1、网页设计与制作网页设计与制作第1页，共171页。目目 录录第第1章章 网页设计概述网页设计概述第第2章章 HTML基础知识基础知识第第3章章 Dreamweaver 8 快速入门快速入门第第4章章 JavaScript与与DHTML技术技术第第5章章 用用Dreamweaver制作动态网页制作动态网页第第6章章 网页设计常用技巧网页设计常用技巧第第7章章 动态服务器网页动态服务器网页ASP基础基础第第8章章 网站上传与维护网站上传与维护第2页，共171页。第第1章章 网页设计概述网页设计概述1.1 认识网页认识网页1.2 网页和网站网页和网站1.3 网页设计网页设计1.4 网页的其他操作网页的
2、其他操作第3页，共171页。1.1 认识网页认识网页1.1.1网页是什么网页是什么 “网页网页”是什么，平常所说的是什么，平常所说的“新浪新浪”、“搜狐搜狐”、“网易网易”等，即是俗称的等，即是俗称的“网站网站”。而访问这些网站的时候，最直接访问的。而访问这些网站的时候，最直接访问的就是就是“网页网页”了。这许许多多的网页就组成了整个站点，也就是网了。这许许多多的网页就组成了整个站点，也就是网站。从中可以看到网页和网站之间的密切关系。站。从中可以看到网页和网站之间的密切关系。网页是一种网络信息传递的载体。这种媒介的性质和日常的网页是一种网络信息传递的载体。这种媒介的性质和日常的“报报纸纸”、“
3、广播广播”、“电视电视”等传统媒体是可以相提并论的。在网络上等传统媒体是可以相提并论的。在网络上传递的相关信息，比如文字、图片甚至多媒体音影，都是在网页中的传递的相关信息，比如文字、图片甚至多媒体音影，都是在网页中的存储，浏览者只需要通过浏览网页，就可以了解到相关信息了。存储，浏览者只需要通过浏览网页，就可以了解到相关信息了。下一页 返回第4页，共171页。1.1 认识网页认识网页1.1.2网页是如何形成的网页是如何形成的 网页是由一些部件组成的，知道这些部件是做什么的很重要，网页是由一些部件组成的，知道这些部件是做什么的很重要，因为在网页编写或设计过程中，主要的任务就是为每一个标准的部因为在
4、网页编写或设计过程中，主要的任务就是为每一个标准的部件选用或编写相应的内容，这些部件有的能够在网页中直接看到，件选用或编写相应的内容，这些部件有的能够在网页中直接看到，而有的却不能在网页中直接看到。而有的却不能在网页中直接看到。上一页 下一页 返回第5页，共171页。1.1 认识网页认识网页 1.浏览者能够看到的内容浏览者能够看到的内容 (1)主题：一般情况下，浏览器在所显示网页窗口的标题栏上显示主题：一般情况下，浏览器在所显示网页窗口的标题栏上显示“主主题题”。网页的真正主题不一定出现在网页内部，而是有可能作为显示。网页的真正主题不一定出现在网页内部，而是有可能作为显示此网页的浏览器窗口的标
5、题。然而，大多数网页的标题表现为屏慕上此网页的浏览器窗口的标题。然而，大多数网页的标题表现为屏慕上的文本或图像，标题的作用和在书本或杂志中的作用一样，位于网页的文本或图像，标题的作用和在书本或杂志中的作用一样，位于网页中比较醒目重要的顶部附近，从而给网页赋予了名字。中比较醒目重要的顶部附近，从而给网页赋予了名字。(2)标题：浏览器在浏览网页时通常以较大字体、粗体或者其他的标题：浏览器在浏览网页时通常以较大字体、粗体或者其他的突出显示类型来显示标题。一个网页可以有很多标题，而且标题还突出显示类型来显示标题。一个网页可以有很多标题，而且标题还可以有多达可以有多达6层的嵌套深度。层的嵌套深度。(3)
6、普通文本：是指组成网页基本内容普通文本：是指组成网页基本内容A.多用途的文本。一般情况下将多用途的文本。一般情况下将普通文本中的线和块当作页面中的普通文本中的线和块当作页面中的“段落段落”。上一页 下一页 返回第6页，共171页。1.1 认识网页认识网页(4)签名：通常显示在网页的底部。签名标识了网页的作者，并且常常还签名：通常显示在网页的底部。签名标识了网页的作者，并且常常还包含作者包含作者(或者网络竹理员或者网络竹理员)的电子邮件地址，从而使访问者可以发送的电子邮件地址，从而使访问者可以发送有关此网页的评论或者建议、问题等。有关此网页的评论或者建议、问题等。(5)水平线：用来装饰网页，它将
7、网页分割成逻辑上的几个部分。水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。(6)动画：可以是网页中出现的文本或者图片，不同的是它们以某动画：可以是网页中出现的文本或者图片，不同的是它们以某种方式运动。图片可以忽隐忽现或者按照简单的动作进行旋转；种方式运动。图片可以忽隐忽现或者按照简单的动作进行旋转；而文本既可以忽隐忽现，也可以从屏幕上滚动滑过。而文本既可以忽隐忽现，也可以从屏幕上滚动滑过。(7)超级链接：可以链接到很多不同的对象上去，如其他的网页、超级链接：可以链接到很多不同的对象上去，如其他的网页、多媒体文件多媒体文件(动画、视频、声音和外部图像动画、视频、声音和外部图像)、文档文件
8、、电子、文档文件、电子邮件地址以及文件或者应用程序。链接还可以引导至当前网页邮件地址以及文件或者应用程序。链接还可以引导至当前网页的某个特定的位置。的某个特定的位置。上一页 下一页 返回第7页，共171页。1.1 认识网页认识网页 (8)内嵌图像：指那些嵌入网页布局中的图像，它们让网页变得大气美观，内嵌图像：指那些嵌入网页布局中的图像，它们让网页变得大气美观，而且使得网页的信息量更大。而且使得网页的信息量更大。(9)图像地图：是一些内嵌图像，此图像的不同区域下面包含有图像地图：是一些内嵌图像，此图像的不同区域下面包含有不同的链接，称为热点区域。不同的链接，称为热点区域。(10)背景色或样式：可
9、以是一种单一的颜色，或者是一个内嵌图像，但是背景色或样式：可以是一种单一的颜色，或者是一个内嵌图像，但是和普通图像不同的是，它们覆盖了整个网页页面的背景，文本和其他图像和普通图像不同的是，它们覆盖了整个网页页面的背景，文本和其他图像就显示在其上面。就显示在其上面。(11)列表：可以是黑点或按数字进行编号，或者其他图形。列表：可以是黑点或按数字进行编号，或者其他图形。(12)表单：访问者可以在其中的空白处填写内容，回复在线注册网站，填表单：访问者可以在其中的空白处填写内容，回复在线注册网站，填写个人信息、发表言论、问卷调查等。写个人信息、发表言论、问卷调查等。上一页 下一页 返回第8页，共171
10、页。1.1 认识网页认识网页 2.浏览者看不到的内容浏览者看不到的内容 (1)鉴定：网页文件可以包含多种鉴定信息，包括作者的名字、电子邮鉴定：网页文件可以包含多种鉴定信息，包括作者的名字、电子邮件地址，以及一些特殊的编码，这些编码可以帮助搜索引擎确定网页件地址，以及一些特殊的编码，这些编码可以帮助搜索引擎确定网页的主题与内容。的主题与内容。(2)注释：这是用户希望在直接阅读网页的注释：这是用户希望在直接阅读网页的HTML代码时能够看代码时能够看到的文本，在浏览器中是看不到的。注释通常包括到的文本，在浏览器中是看不到的。注释通常包括HTML文件文件的结构或者相关的注意事项。的结构或者相关的注意事
11、项。(3)JavaScript代代4i：在：在HTML文件内，文件内，JavaScript的语句行的语句行可以给网页添加一些特殊的动态效果。可以给网页添加一些特殊的动态效果。(4)Java Applet：以单独的文件存在，这种：以单独的文件存在，这种Java程序模块可以程序模块可以提高访问者、浏览器和服务器之间的交互能力。比如说，提高访问者、浏览器和服务器之间的交互能力。比如说，Java就就非常适合于编写在非常适合于编写在Web页面上玩的交互游戏。页面上玩的交互游戏。(5)图像地图和表单处理代码：用来处理图像地图和交互表单的程序代图像地图和表单处理代码：用来处理图像地图和交互表单的程序代码。码
12、。上一页 下一页 返回第9页，共171页。1.1 认识网页认识网页1.1.3网页的浏览过程网页的浏览过程 (1)用户在用户在www客户机上输入网址，发出浏览网页的请求客户机上输入网址，发出浏览网页的请求(HTTP请求请求)；(2)该请求通过互联网从该请求通过互联网从WWW客户机传输到客户机传输到WWW服务器；服务器；(3)WWW服务器接受这个请求，然后根据这个请求找到相关的网页并发服务器接受这个请求，然后根据这个请求找到相关的网页并发送给用户；送给用户；(4)这个网页又通过互联网传输到这个网页又通过互联网传输到WWW客户机，客户机接受这个网页并客户机，客户机接受这个网页并将其在浏览器上显示出来
13、。将其在浏览器上显示出来。上一页 返回第10页，共171页。1.2 网页和网站网页和网站(1)拥有众多的网页。拥有众多的网页。(2)拥有一个主题与统一的风格。拥有一个主题与统一的风格。(3)有便捷的导航系统。有便捷的导航系统。(4)分层的栏目组织。分层的栏目组织。(5)用户指南和网站动态信息。用户指南和网站动态信息。(6)能与用户进行双向交流的栏目。能与用户进行双向交流的栏目。(7)有一个域名。有一个域名。返回第11页，共171页。1.3 网页设计网页设计1.3.1网页设计网页设计 1.网页设计的步骤网页设计的步骤 (1)草案。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西。草案。新
14、建页面就像一张白纸，没有任何表格、框架和约定俗成的东西。设计人员可以尽可能地发挥想象力，然后将所想象到的勾勒出一个草图。设计人员可以尽可能地发挥想象力，然后将所想象到的勾勒出一个草图。这属于创造阶段，所以不讲究细腻工整，不必考虑细节功能，只以粗陋的这属于创造阶段，所以不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。线条勾画出创意的轮廓即可。(2)粗略布局。在草案的基础上，将需要设置的功能模块安排到页面上。粗略布局。在草案的基础上，将需要设置的功能模块安排到页面上。这时设计人员必须遵循突出重点、平衡协调的原则。首先将网站标志、这时设计人员必须遵循突出重点、平衡协调的原则。首
15、先将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的位置排放。模块的位置排放。(3)确定方案。这是设计网页布局的重要步骤，是指将粗略布局精细化、确定方案。这是设计网页布局的重要步骤，是指将粗略布局精细化、具体化，形成完整的页面设计方案。具体化，形成完整的页面设计方案。下一页 返回第12页，共171页。1.3 网页设计网页设计 2.网页表现手法网页表现手法 (1)匀称。匀称。(2)非对称形式。非对称形式。(3)对比。对比。(4)空白。空白。(5)图片解说。图片解说。上一页 下一页 返回第13页，共171页。1
16、.3 网页设计网页设计1.3.2网页设计的流程网页设计的流程 1.客户需求客户需求 2.确定网站的内容和主题确定网站的内容和主题 3.设计页面设计页面 4.设计网页动画设计网页动画上一页 返回第14页，共171页。1.4 网页的其他操作网页的其他操作1.4.1保存网页中的图片保存网页中的图片 在浏览网页时，看到自己喜爱的图片，总想将其收藏起来，以在浏览网页时，看到自己喜爱的图片，总想将其收藏起来，以便日后使用。保存网页中的图片步骤很简单，具体步骤为：便日后使用。保存网页中的图片步骤很简单，具体步骤为：将鼠标移动要保存的图片上，右击；将鼠标移动要保存的图片上，右击；在弹出的快捷菜单中选择在弹出的
17、快捷菜单中选择“图片另存为图片另存为”命令；命令；在弹出的在弹出的“保存图片保存图片”对话框中选择合适的保存路径，并对图片重新命对话框中选择合适的保存路径，并对图片重新命名，最后单击确定。名，最后单击确定。下一页 返回第15页，共171页。1.4 网页的其他操作网页的其他操作1.4.2保存正在浏览的网页保存正在浏览的网页(1)在在IE浏览器的菜单栏中选择浏览器的菜单栏中选择“文件文件”“另存为另存为”命令，弹出命令，弹出“保存网保存网页页”对话框，对话框，(2)单击单击“保存保存”按钮即可将正在浏览的页面连同其中的图片完整按钮即可将正在浏览的页面连同其中的图片完整地保存下来。在对话框中还可以设
18、置网页的保存路径、网页保地保存下来。在对话框中还可以设置网页的保存路径、网页保存的文件名以及网页保存的模式。存的文件名以及网页保存的模式。上一页 返回第16页，共171页。第第2章章 HTML基础知识基础知识2.1 HTML概述概述2.2 HTML文件的构成文件的构成2.3 HTML基本语法基本语法2.4 HTML标记标记第17页，共171页。2.1 HTML概述概述 HTML的英文全称是：的英文全称是：Hypertext Marked Language，即超文，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本
19、，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件单面包含了文档都是一种静态的网页文件，这个文件单面包含了HTML指令代码，这指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。标记结构语言，易学易懂，非常简单。返回第18页，共171页。2.2 HTML文件的构成文件的构成HTML文档卞要由文档卞要由3部分组成。部分组成。(1)HTML部分：部分：HTML部分以部
20、分以标记开始，以标记开始，以结束。结束。HTML标记告诉浏览器这两个标记中间的内容标记告诉浏览器这两个标记中间的内容是是HTML文档。文档。(2)头部：头部以头部：头部以标记开始，航栏中的标题和其他在网页中不标记开始，航栏中的标题和其他在网页中不显示的信息以显示的信息以标记结束。这部分包含显示在网页导。标题标记结束。这部分包含显示在网页导。标题包含在包含在和和标记之间。标记之间。(3)卞体部分：卞体部分包含在网页中显示的文本、图像和链接。卞体部卞体部分：卞体部分包含在网页中显示的文本、图像和链接。卞体部分以分以标记开始，以标记开始，以标记结束。标记结束。返回第19页，共171页。2.3 HTM
21、L基本语法基本语法1.HTML元素元素 HTML元素元素(HTML Element)用来标记文本，表小文本的用来标记文本，表小文本的内容。比如内容。比如body，p，table就是就是HTML元素。元素。HTML元素用标记表小，标记以符号元素用标记表小，标记以符号“”结束。结束。下一页 返回第20页，共171页。2.3 HTML基本语法基本语法2.HTML元素的属性元素的属性 大多数标签都有自己的一些属性，属性要写在起始标签内，大多数标签都有自己的一些属性，属性要写在起始标签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选
22、的，属性也可以省略而采用默认值；其格式如下：性是可选的，属性也可以省略而采用默认值；其格式如下：内容内容上一页 返回第21页，共171页。2.4 HTM L标记标记2.4.1基本标记基本标记 1.段落标记段落标记 正如在写一篇文章的时候，通常要将文章的内容以一个个段落的形式正如在写一篇文章的时候，通常要将文章的内容以一个个段落的形式组织起来，这样排列显得整齐、清晰。在组织起来，这样排列显得整齐、清晰。在HTML文档中，也需要将文本内文档中，也需要将文本内容组合成多个段落。容组合成多个段落。段落标记的语法格式为段落标记的语法格式为文本文本，段落的开始由，段落的开始由标记，段标记，段落的结束由落的
23、结束由标记，标记，有时也被省略。有时也被省略。标记还有一个属标记还有一个属性性align，它用来指明字符显示时的对齐方式，一般值有，它用来指明字符显示时的对齐方式，一般值有center，left，right 3种，分别为居中、左对齐、右对齐。种，分别为居中、左对齐、右对齐。下一页 返回第22页，共171页。2.4 HTM L标记标记2.换行标记换行标记 换行标记的语法格式为：文本换行标记的语法格式为：文本。使用使用标记可以在不新建段落的情况下换行，只要在文本中放入标记可以在不新建段落的情况下换行，只要在文本中放入标记，就会强制换行。标记，就会强制换行。3.标题标记标题标记 看过看过Word单面
24、的标题单面的标题1、标题、标题2、标题、标题3这样的样式吗这样的样式吗?在在HTML语言中也有这样简明的定义。依次为语言中也有这样简明的定义。依次为，.6种，种，设置的字休最大，设置的字休最大，设置的字体最小。设置的字体最小。4.预格式化标记预格式化标记 要保留原始文字排版的格式，就可以通过要保留原始文字排版的格式，就可以通过标签来实现，方法是标签来实现，方法是把制作好的文字排版内容前后分别加上开始标签把制作好的文字排版内容前后分别加上开始标签和结尾标签和结尾标签。上一页 下一页 返回第23页，共171页。2.4 HTM L标记标记2.4.2格式标记格式标记 1.标记标记 2.标记标记 3.标
25、记标记 4.标记标记 5.标记标记上一页 下一页 返回第24页，共171页。2.4 HTM L标记标记2.4.3文本标记文本标记1.标记用于控制网页上文字的字体，大小和颜色。控制方标记用于控制网页上文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。式是利用属性设置得以实现的。2.特殊符号特殊符号 某些字符在某些字符在HTML中具有特殊意义，如小于号中具有特殊意义，如小于号()即定义即定义HTML标记的开始。这个小于号是不显示在最终看到的网页单的。标记的开始。这个小于号是不显示在最终看到的网页单的。那如果希望在网页中显示一个小于号，该怎么办呢那如果希望在网页中显示一个小于号，该怎么办呢?
26、要在浏览器中要在浏览器中显示这些特殊字符，就必须在显示这些特殊字符，就必须在HTML文档中使用字符实体。文档中使用字符实体。上一页 下一页 返回第25页，共171页。2.4 HTML标记标记2.4.4列表标记列表标记 1.无序列表无序列表 无序列表就是无序列表就是“项目列表项目列表”，不用数字标记每个列表项，而采用一，不用数字标记每个列表项，而采用一个符号标记每个列表项，比如圆黑点。无序列表的标记为：个符号标记每个列表项，比如圆黑点。无序列表的标记为：.，每个列表项由，每个列表项由开始。结束标记开始。结束标记为可为可选项。选项。2.有序列表有序列表 有序列表中，每个列表项前标有数字，表示顺序。
27、有序列表由有序列表中，每个列表项前标有数字，表示顺序。有序列表由开开始，始，结束，每个列表项由结束，每个列表项由开始。开始。3.定义列表定义列表 定义列表由定义列表由开始。术语由开始。术语由开始，英文意为开始，英文意为Definition Term。术语的解释说明，由。术语的解释说明，由开始，开始，.单的文字缩进显小。单的文字缩进显小。上一页 下一页 返回第26页，共171页。2.4 HTM L标记标记2.4.5图像标记图像标记 1.图像的基本知识图像的基本知识 在使用图像标记前，需要先来了解一些图像的基本知识。图像可分在使用图像标记前，需要先来了解一些图像的基本知识。图像可分为位图和矢量图。
28、位图图形由排列成网格的称为像素的点组成。例如，为位图和矢量图。位图图形由排列成网格的称为像素的点组成。例如，在一个位图的苹果图形中，图像由网格中每个像素的位置和颜色值决在一个位图的苹果图形中，图像由网格中每个像素的位置和颜色值决定；每个点被制定一种颜色；在以一定的分辨率查看时，这些点就像定；每个点被制定一种颜色；在以一定的分辨率查看时，这些点就像马赛克那样拼合在一起形成图像，在编辑位图图形时，修改的就是这马赛克那样拼合在一起形成图像，在编辑位图图形时，修改的就是这些像素点。些像素点。上一页 下一页 返回第27页，共171页。2.4 HTM L标记标记2.图像标记图像标记 在在HTML中，使用中
29、，使用IMG标记在网页中加入图像。它具有两个标记在网页中加入图像。它具有两个基本属性基本属性src和和alt，分别用于设置图像文件的位置和替换文本。，分别用于设置图像文件的位置和替换文本。上一页 下一页 返回第28页，共171页。2.4 HTM L标记标记2.4.6超链接标记超链接标记1.相对地址与绝对地址相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联网上资统一资源定位符，也被称为网页地址，是表示互联网上资源的一种方法，通常可以理解为资源的地址。一个源的一种方法，通常可以理解为资源的地址。一个URL包括包括3部分：部分：协议代码、装有所需文件的计算机地址，以及具体的文
30、件地址和文协议代码、装有所需文件的计算机地址，以及具体的文件地址和文件名。件名。(1)绝对绝对URL。绝对。绝对URL是指是指Internet上资源的完整地址，包括上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名。形式为协议：完整的协议种类、计算机域名和包含路径的文档名。形式为协议：/计算机域名计算机域名/文档名。文档名。(2)相对相对URL。相对。相对URL是指是指Internet上资源相对于当前页上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径。面的地址，它包含从当前页面指向目的页面位置的路径。上一页 下一页 返回第29页，共171页。2.4 HTM L
31、标记标记 2.超级链接超级链接 超级链接超级链接(简称为超链接简称为超链接)是到另一个文档或文件是到另一个文档或文件(图形、音频、图形、音频、视频视频)甚至到同一文档的另一部分的连接。当用户单击超级链接时，甚至到同一文档的另一部分的连接。当用户单击超级链接时，就会进入链接中指定的就会进入链接中指定的URL。要创建超级链接，应指定以下两部分：要创建超级链接，应指定以下两部分：(1)要链接文件的完整地址或要链接文件的完整地址或URL；(2)将提供链接的热点。热点可以是文本行，也可以是图像。将提供链接的热点。热点可以是文本行，也可以是图像。上一页 下一页 返回第30页，共171页。2.4 HTM L
32、标记标记2.4.7表格标记表格标记1.表格的基本结构表格的基本结构(1)TABLE。(2)CAPTION。(3)TR。(4)TD和和 TH。上一页 下一页 返回第31页，共171页。2.4 HTM L标记标记 2.合并单元格合并单元格 如果在网页中需要创建不规则的表格，那么就需要进行单元如果在网页中需要创建不规则的表格，那么就需要进行单元格的合并。格的合并。行合并行合并 在在和和标记内使用标记内使用rowspan属性可以进行行属性可以进行行合并，合并，rowspan的取值表示纵方向上合并的行数。的取值表示纵方向上合并的行数。列合并列合并 在在和和标记内使用标记内使用colspan的取值表示水平
33、方的取值表示水平方向上合并的列数。向上合并的列数。上一页 下一页 返回第32页，共171页。2.4 HTM L标记标记2.4.8表单标记表单标记 1.表单元素表单元素 标记：用于在网页中创建表单区域，属于一个容标记：用于在网页中创建表单区域，属于一个容器标记，表示其他表单标记需要在它的包围中才有效。其属性器标记，表示其他表单标记需要在它的包围中才有效。其属性介绍如下。介绍如下。action用来设置接收和处理浏览器递交的表单内容的服务器程序的用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。method：此属性告诉浏览器如何将数据发送给服务器，它指定：此属性告诉浏览器如何将数据发送给服
34、务器，它指定向服务器发送数据的方法向服务器发送数据的方法(用用POST方法还是用方法还是用GET方法方法)。上一页 下一页 返回第33页，共171页。2.4 HTM L标记标记2.创建表单控件创建表单控件(1)HTML输入元素。输入元素。标记定义要在表单中显示的控件类型和外标记定义要在表单中显示的控件类型和外观。此标记包括的属性介绍如下。观。此标记包括的属性介绍如下。type：此属性指定表单元素的类型。：此属性指定表单元素的类型。name：此属性指定表单元素的名称。：此属性指定表单元素的名称。value：此属性是可选属性，它指定表单元素的初始值。：此属性是可选属性，它指定表单元素的初始值。si
35、ze：此属性指定表单元素的初始宽度。：此属性指定表单元素的初始宽度。maxlength：此属性用于指定可在：此属性用于指定可在text或或password元素中元素中输入的最大字符数。输入的最大字符数。checked：此属性是：此属性是Boolean属性，指定按钮是否是被选中属性，指定按钮是否是被选中的。的。上一页 下一页 返回第34页，共171页。2.4 HTM L标记标记(2)文本框与口令框。如果需要浏览者输入单行文本文本框与口令框。如果需要浏览者输入单行文本(例如输入姓例如输入姓名、年龄等信息名、年龄等信息)，则应该在表单中使用单行文本框。单行文本，则应该在表单中使用单行文本框。单行文本
36、框使用框使用INPUT标记符创建，将标记符创建，将type属性指定为属性指定为“text”即可。即可。实际上，由于实际上，由于INPUT标记符标记符type属性的默认值就是属性的默认值就是“text所所以可以直接用以可以直接用INPUT标记符创建单行文本框。标记符创建单行文本框。上一页 下一页 返回第35页，共171页。2.4 HTM L标记标记(3)复选框与单选框。复选框和单选框都是允许用户进行选择的控件，常复选框与单选框。复选框和单选框都是允许用户进行选择的控件，常用于选择多种选项用于选择多种选项(如兴趣爱好如兴趣爱好)，或选择互斥的选项，或选择互斥的选项(如性别如性别)。上一页 下一页
37、返回第36页，共171页。2.4 HTM L标记标记(4)文件选择框。如果需要用户在表单中选择文件，然后将选中文件的内文件选择框。如果需要用户在表单中选择文件，然后将选中文件的内容发送到服务器，则可以使用容发送到服务器，则可以使用“文件选择框文件选择框”控件。文件选择框在控件。文件选择框在Web上的一种典型用法是：当用户在撰写电子邮件时，如果需要附加上的一种典型用法是：当用户在撰写电子邮件时，如果需要附加文件作为附件，则可以单击文件作为附件，则可以单击“附件附件”按钮，然后使用文件选择框选择按钮，然后使用文件选择框选择需要附加的文件。需要附加的文件。上一页 下一页 返回第37页，共171页。2
38、.4 HTM L标记标记(5)按钮。当用户完成了表单的填写后，如果需要提交数据，则可以按钮。当用户完成了表单的填写后，如果需要提交数据，则可以单击表单中的单击表单中的“提交提交”按钮按钮(通常按钮上的文字为通常按钮上的文字为“提交提交”或或“submit”等等)；如果希望恢复表单为填写前的状态，以便重新；如果希望恢复表单为填写前的状态，以便重新填写，则可以单击填写，则可以单击“重置重置”按钮按钮(通常按钮上的文字为通常按钮上的文字为“重置重置”、“重新填写重新填写”或或“reset”等等)。另外，还可以在表单中使用自定。另外，还可以在表单中使用自定义按钮，以便响应特定的事件。义按钮，以便响应特
39、定的事件。上一页 下一页 返回第38页，共171页。2.4 HTM L标记标记(6)多行文本框。当需要浏览者提交多于一行的文本时多行文本框。当需要浏览者提交多于一行的文本时(例如希望获例如希望获得用户的反馈意见得用户的反馈意见)，就不能再使用单行文本框，而应使用多行文，就不能再使用单行文本框，而应使用多行文本框。本框。(7)选项菜单。如果希望浏览者从多个选项中选取信息，则可以选项菜单。如果希望浏览者从多个选项中选取信息，则可以使用选项菜单控件。要创建选项菜单，应使用使用选项菜单控件。要创建选项菜单，应使用SELECT标记符，标记符，并将每个可以独立选取的项用一个并将每个可以独立选取的项用一个O
40、PTION标记符标出来。标记符标出来。上一页 下一页 返回第39页，共171页。2.4 HTM L标记标记2.4.9层标记层标记 虽然可以使用表格来指定虽然可以使用表格来指定Web浏览器中页面的布局，但是浏览器中页面的布局，但是使用表格为复杂的网页布局非常困难。使用表格为复杂的网页布局非常困难。Dreamweaver提供了提供了一个功能，可以使高级的页面布局创建变得更容易。使用层，一个功能，可以使高级的页面布局创建变得更容易。使用层，网页设计人员就可以精细地调整元素的准确像素布置。层就是网页设计人员就可以精细地调整元素的准确像素布置。层就是包含内容的容器，可以将其放置在文档中的任何位置。由于可
41、包含内容的容器，可以将其放置在文档中的任何位置。由于可以制作层的动画，因此，层属于动态内容类。以制作层的动画，因此，层属于动态内容类。上一页 下一页 返回第40页，共171页。2.4 HTM L标记标记2.4.10脚本标记脚本标记 有时，网页中的一些特殊效果击要加入脚本语言才能够实现，有时，网页中的一些特殊效果击要加入脚本语言才能够实现，脚本语言是一种简化的编程语言，它可以生成许多的网页特效，如脚本语言是一种简化的编程语言，它可以生成许多的网页特效，如滚动的文字、雪花效果、波浪效果等。滚动的文字、雪花效果、波浪效果等。常用的脚本语言有常用的脚本语言有3种，种，分别是分别是JavaScript，
42、VBScript和和 Jscript。其中。其中JavaS cript是是IE不不II Navigator都完全支持的脚本语言，所以使用得都完全支持的脚本语言，所以使用得最广泛。最广泛。上一页 下一页 返回第41页，共171页。2.4 HTM L标记标记2.4.11对象标记对象标记1.APPLET、PARAM APPLET指的是用指的是用Java语言编写、经语言编写、经Java编译器编译之后可在网页编译器编译之后可在网页中直接嵌入使用的对象，中文称之为中直接嵌入使用的对象，中文称之为Java应用小程序。应用小程序。2.OBJECE 除除APPLET外还有许多类型的对象，最常见的是外还有许多类型
43、的对象，最常见的是ActiveX，这些对象在这些对象在HTML中都没有对应的标记，都必须依靠中都没有对应的标记，都必须依靠OBJECT标记才能嵌入网页。标记才能嵌入网页。3.EMBED、NOEMBED EMBED也是用来在网页中嵌入对象的标记，也是用来在网页中嵌入对象的标记，NOEMBED用来指明当浏览器不能显小所显小的对象时显小的文本。用来指明当浏览器不能显小所显小的对象时显小的文本。EMBED标签是单独出现的，以标签是单独出现的，以开始，开始，结束。使用结束。使用EMBED标签可以在网页中嵌入标签可以在网页中嵌入Flash Mid，MP3等嵌入式内容。等嵌入式内容。上一页 返回第42页，共
44、171页。第第3章章 Dreamweaver 8快速入门快速入门3.1 Dreamweaver 8简介简介3.2 Dreamweaver 8基本工作环境基本工作环境3.3 用用Dreamweaver 8制作网页制作网页3.4 网页制作高级功能网页制作高级功能第43页，共171页。3.1 Dreamweaver 8简介简介 Macromedia Dreamweaver 8是一个可视化的网页设计是一个可视化的网页设计和建立和建立Web站点及应用程序的专业工具。它将可视布局工具、应站点及应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能的强大使得各用程序开发功能和
45、代码编辑支持组合在一起，其功能的强大使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于准的网站和应用程序。从对基于CSS设计的领先支持到乎工编码功设计的领先支持到乎工编码功能，能，Dreamweaver提供了专业人员在一个集成、高效的环境中提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用所需的工具。开发人员可以使用 Dreamweaver及所选择的服务及所选择的服务器技术来创建功能强大的器技术来创建功能强大的Internet应用程序，从而使用户能链接应用程序，从而使用户能链接到
46、数据库、到数据库、Web服务和旧式系统。服务和旧式系统。返回第44页，共171页。3.2 Dreamweaver 8基本工作环境基本工作环境3.2.1界面介绍界面介绍 新建或打开一个文档，进入新建或打开一个文档，进入Dreamweaver 8的标准工作界的标准工作界面。面。Dreamweaver 8的标准工作界面包括：标题显示、菜单栏、的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组，如面板和浮动面板组，如图图3-2所示。所示。下一页 返回第45页，共171页。3.2 Dr
47、eamweaver 8基本工作环境基本工作环境3.2.2主菜单主菜单文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打印等。文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打印等。编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置等。编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置等。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接
48、等。修改：具有对页面元素修改的功能。修改：具有对页面元素修改的功能。文本：用来对文本操作，例如设置文本格式等。文本：用来对文本操作，例如设置文本格式等。命令：所有的附加命令项。命令：所有的附加命令项。站点：用来创建和管理站点。站点：用来创建和管理站点。窗口：用来显示和隐藏控制面板以及切换文档窗口。窗口：用来显示和隐藏控制面板以及切换文档窗口。帮助：联机帮助功能。例如按帮助：联机帮助功能。例如按F1键，就会打开电子帮助文本键，就会打开电子帮助文本。上一页 下一页 返回第46页，共171页。3.2 Dreamweaver 8基本工作环境基本工作环境3.2.3工具栏工具栏1.文档工具栏文档工具栏 “
49、文档文档”工具栏包含各种按钮，它们提供各种工具栏包含各种按钮，它们提供各种“文档文档”窗口视图窗口视图(如如“设计设计”视图和视图和“代码代码”视图视图)的选项、各种查看选项和一些常用操作的选项、各种查看选项和一些常用操作(如如在浏览器中预览在浏览器中预览)。上一页 下一页 返回第47页，共171页。3.2 Dreamweaver 8基本工作环境基本工作环境 2.标准工具栏标准工具栏 “标准标准”工具栏包含来自工具栏包含来自“文件文件”和和“编辑编辑”菜单中的一般操作的菜单中的一般操作的按钮：按钮：“新建新建”、“打开打开”、“保存保存”、“保存全部保存全部”、“剪切剪切”、“复制复制”、“粘
50、贴粘贴”、“撤销撤销”和和“重做重做”上一页 下一页 返回第48页，共171页。3.2 Dreamweaver 8基本工作环境基本工作环境3.文档窗口文档窗口 “文档文档”窗口显示当前文档。可以选择下列任一视图：窗口显示当前文档。可以选择下列任一视图：“设设计计”视图是一个用于可视化页面布局、可视化编辑和快速应用视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，程序开发的设计环境。在该视图中，Dreamweaver显示文档显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。时看到的内容
