《基本网络开发技术》PPT课件.ppt

基本网络开发技术,网站规划设计HTMLJavaScript语言,网站规划设计概述,网站规划设计是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,编写网站设计的计划书确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点确定网站提供的内容网站交互设计，如信息反馈、意见调查等对网站的内容进行分类设计网页必有的内容，如公司标志、联系方法和导航条等制作网页的模板检查网页的链接根据需要修改不合适的地方正式发布网站,网站设计流程,网站规划设计,确定网站的类型,门户网站搜索引擎电子商务网站数据中心主题信息网站团体网站个人网站,网站规划设计,网页设计规划,(1)确定网页的整体风格,(2)设计网页框架,个人网页框架草图,网站规划设计,网页栏目规划,网页栏目规划是确定不同网页之间的逻辑关系，如先后关系、包含关系、并列关系等，多个网页按照它们之间的逻辑关系组织在一起形成一个逻辑结构。常见的逻辑结构：层次型结构、线性结构和网状型结构。,网站规划设计,（1）线性结构：最简单，网页按一定的先后顺序链接起来，用户没有完成上一个网页的访问就无法进入下一个网页。常用于需按步骤进行的栏目，如：用户注册、下订单、教程等。,网站规划设计,（2）层次结构：按照网页之间的包含关系组织而成，其形状像一个倒置的树。简单直观，内容结构清晰，便于理解。几乎所有的网站都采用这种结构来进行总体栏目规划。,网站规划设计,（3）网状结构：是指多个网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任意网页，但因为导航的需要或内容上的相关而链接在一起。,网站规划设计,栏目规划的任务,确定必需的栏目确定重点栏目建立层次型结构设计每一个栏目,网站规划设计,目录结构设计,不要将所有的文件都放在根目录下根据栏目规划来设计目录结构每个目录下都建立独立的images子目录目录的层次不要太深不要使用中文目录名可执行文件和不可执行文件分开放置数据库文件单独放置,网站规划设计,网站的建设技术,静态网页技术（HTML）动态网页技术（Javascript、Java、JSP、ASP、PHP、CGI等）,网页的基本元素,文本图片和动画声音和视频超链接表格表单导航栏其它常见元素,网站规划设计,网页设计工具,1.网页制作工具,文本编辑器FrontPageDreamweaverAdobePagemill,2.网页图形图像处理工具,FireworksPhotoshopCorelDraw,3.网页动画制作与特效工具,FlashUleadGifAnimator,网站规划设计,网页三剑客,Adobe公司的Dreamweaver、Fireworks和Flash系列产品，素有网页“三剑客”之称。它们是专门用于网页制作和站点管理的软件。其中Dreamweaver被大家称为“织梦者”，众多专业网站和个人主页都把它列为首选工具。Flash是“三剑客”中的“闪电”，其以网上动画为特长，它做出的动画效果真是精美致极。Fireworks是“三剑客”中的“火焰”，它以处理页面图片为特长，并可以轻松制作GIF动画。,设计制作好的网站页面文件，需要在Intenet上发布，才可以让互联网上的用户访问。网站发布方法：（1）个人服务器上发布：如果拥有一台独立固定的IP地址，可以将本机配置成Web服务器，即可发布网站；（2）专用服务器上发布：可以向ISP或网络公司申请专用服务器或虚拟主机空间来发布网站。,网站发布,网站空间和域名申请,网站空间获得的两种方式：租用虚拟主机、申请免费空间；选择空间注意事项：空间大小、支持环境(ASP/PHP/CGI等)及数据库情况、访问与链接速度、FTP上传功能、服务商信誉度等；通过搜索引擎查找“免费空间”或“免费建站资源”；有些服务商申请域名赠送空间，有的收费也十分低廉（如10元/月），选择方式很多。,网站发布,HTML概述,1）什么是HTML？,HTML(HyperTextMarkuplanguage,超文本标签语言)：一种用来专门制作超文本文档的简单标签语言。Html文件包括文档数据和显示格式两个部分，文档数据显示在WWW浏览器中的数据内容，显示格式规定了要显示的内容以何种方式呈现给用户。HTML通过利用各种标签文档的结构以及标识超级链接的信息。HTML文件是纯文本文件，扩展名.htm或html，可用任何文本编辑器来编辑(如记事本、可视化编辑软件Frontpage、Dreamweaver等），还可由Web服务器实时动态生成。,HTML概述,网页文件命名：,*.htm或*.html无空格无特殊符号（例如Style;title;ID等属性，这里只介绍一个属性设定。以为例：align=“center”，可选值：center;left;right。决定文字、图像、表格等居中、靠左或靠右。的作用和居中标签一样。,字体标签,字体标签包括：字体加粗标签：字体斜体效果：字体加线：上标字、下标字：字体变粗变大加宽：设定字形、大小、颜色,字体标签,：两者皆能产生字体加粗的效果。,字体标签,：这些标签于InternetExplorer都产生斜体效果。这些标签中只有较为特别，因它包括换行效果，所以不必在它前面加上标签。,字体标签,：可令每字母有相等宽度且每字母之间的距离稍为加宽。是加底线的标签，一些特别的浏览器并不支持，因顾虑到与链接混淆。加上删除线的标签；令字体加大；令字体变细。为下标字，则为上标字，仅剩的数学标签。,字体标签,：这些是标题标签，由至变粗变大加宽的程度逐渐减小。每个标题标签所标示的字句将独占一行且上下留一空白行。,字体标签,：这两个标签的参数设定是一样的，都是设定文字的大小、字形及颜色，但各有用处，且看以下比较：a.可以用于文件的开头部分，即与之间的位置，将影响全文字句，是一个空标签，用以改变字体显示的默认值。b.是应用于文件的内文部分，即与之间的位置，只影响所标示的字句，是一个双标签。两标签可同时存在，凡没被所标示的字句才直接受所影响，而本身亦受的影响。,字体标签,字体标签,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从1到7,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如SIZE、COLOR和FACE）可用于控制网页上文本的显示,清单（列表）标签,清单标签,:称为顺序清单标签。则用以标示清单项目。所谓顺序清单就是在每一项前面加上1,2,3.等编号，又称编号清单。每个列表前必须加上标签。的参数设定（常用）：例如：type=“i”:设定编号样式，其值有五种，请参考表，默认type=1start=“4”:设定开始编号，不论设定了哪一编号样式，其值只能是1,2,3.等整数，默认start=1。,清单标签,:称为无序清单标签。所谓无序清单就是在每一项前面加上等符号，故又称符号清单。的参数设定（常用）：例如type=“square”设定符号样式，其值有三种，默认为type=“disc”：当type=“disc”时的列项符号为实心圆点；当type=“circle”时的列项符号为空心小方块；当type=“square”时的列项符号为实心小方块。,表格标签,表格标签,列,在HTML文档中，广泛使用表格来存放网页上的文本和图像,单元格,行,列标题,表格标签综合应用：创建表格,使用表格姓名性别分数RobertM80.,代表表格的开始，border=2表示边框尺寸为2,表示行，这是表格的第一行，有三列数据，代表列,表格的第二行，有三列数据,表格的第三行，也有三列数据,表格标签综合应用：表格标题,学员档案信息姓名性别分数RobertM80.,表示表格标题,表示行或列标题，粗体显示,表格的第二行，有三列数据,表格的第三行，有三列数据,表格标签综合应用：表格对齐方式,学员档案信息姓名性别分数RobertM80.,整个表格居中,姓名列默认左对齐,性别列居中,分数列右对齐,创建表格第一学期第二学期数学科学英语数学科学英语989580958788.,COLSPAN=“n”属性表示跨多少列,表格综合应用：合并单元格（跨列）,创建表格螺母螺栓锤子第一季度一月250010001240二月300025004000.,ROWSPAN=“n”属性表示跨多少行,表格综合应用：合并单元格（跨行）,表格综合应用：背景和尺寸设置,学员档案信息姓名性别分数RobertM80MaryF18,表格的颜色设置：表格的背景色行的背景色列的背景色颜色值可以采用RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。,表单标签,表单的概念-表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互能力。,表单标签,：称为表单标签，用以创建表单，是双标签，表示其它表单标签需要在它的包围中才有效。标签提供了用户输入数据的常用控件，通过参数Type来指定控件的类型。Type可选值为Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button,表单标签,输入方式1：Text(单行文本框),表单标签,输入方式2：Radio(单选按钮),输入方式3：Checkbox(复选框),表单标签,输入方式4：Password(密码框),输入方式5：Submit(提交按钮)/Reset(清除按钮),表单标签,输入方式6：Image(提交图片),输入方式7：File(文件上传),表单标签,输入方式8：Button(按钮控件),：用来创建一个下拉列表框，每一选项皆由所标示。,表单标签,：,表单标签,：是表单文字区块标签，常用于创建一个多行文本框。,表单标签,表单标签综合例子,2004年欧锦赛预测“最佳球员”RonaldoBeckhamZidane预测大赛亚军巴西法国阿根廷预测谁将成为2004年欧锦赛冠军？,阅读代码，请问网页中的显示结果？,：称图形标签，主要用以插入图片于网页中。,图形和链接标签,图形和链接标签,创建超级链接,聪明的狗狗会弹琴的狗狗单击此处查看,：称链接标签，由与所围的文字、图片等等可以成为一个链接。,要链接到另一目录(C:example)下的页面，可编写或,要链接到同一目录(C:html)下的页面，可编写或,C:html目录,C:example目录,绝对和相对路径名,绝对路径名,相对路径名,电子邮件的链接,用户可从网页发送电子邮件,海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至DavidFernandez,：在上网时，经常会发现网页的文字会滚动，可以借助：标签来实现网页中的文字滚动。,滚动文字标签,例：,滚动文字标签,滚动字我会动啊，我是一天到晚游泳的鱼,注意:1、在.标签之间插入图像也可以使图像滚动起来。2、标签只能在IE浏览器中使用。,HTML教程参考网站：,