书签分享收藏举报版权申诉 / 171

立即下载

当前位置：首页 > 教育专区 > 大学资料 > 网页设计与制作（.ppt

网页设计与制作（.ppt

上传人：春哥&#****71;

文档编号：12117619

上传时间：2022-04-23

格式：PPT

页数：171

大小：507KB

( 4.5 )

《网页设计与制作（.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作（.ppt（171页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作网页设计与制作目目录录第第1章章网页设计概述网页设计概述第第2章章 HTML基础知识基础知识第第3章章 Dreamweaver 8 快速入门快速入门第第4章章 JavaScript与与DHTML技术技术第第5章章用用Dreamweaver制作动态网页制作动态网页第第6章章网页设计常用技巧网页设计常用技巧第第7章章动态服务器网页动态服务器网页ASP基础基础第第8章章网站上传与维护网站上传与维护第第1章章网页设计概述网页设计概述1.1 认识网页认识网页1.2 网页和网站网页和网站1.3 网页设计网页设计1.4 网页的其他操作网页的其他操作1.1 认识网页认识网页1.1.

2、1网页是什么网页是什么 “网页网页”是什么，平常所说的是什么，平常所说的“新浪新浪”、“搜狐搜狐”、“网易网易”等，即是俗称的等，即是俗称的“网站网站”。而访问这些网站的时候，。而访问这些网站的时候，最直接访问的就是最直接访问的就是“网页网页”了。这许许多多的网页就组成了了。这许许多多的网页就组成了整个站点，也就是网站。从中可以看到网页和网站之间的密整个站点，也就是网站。从中可以看到网页和网站之间的密切关系。切关系。网页是一种网络信息传递的载体。这种媒介的性质和日网页是一种网络信息传递的载体。这种媒介的性质和日常的常的“报纸报纸”、“广播广播”、“电视电视”等传统媒体是可以相提等传统媒体是可

3、以相提并论的。在网络上传递的相关信息，比如文字、图片甚至多并论的。在网络上传递的相关信息，比如文字、图片甚至多媒体音影，都是在网页中的存储，浏览者只需要通过浏览网媒体音影，都是在网页中的存储，浏览者只需要通过浏览网页，就可以了解到相关信息了。页，就可以了解到相关信息了。下一页返回1.1 认识网页认识网页1.1.2网页是如何形成的网页是如何形成的网页是由一些部件组成的，知道这些部件是做什么的很网页是由一些部件组成的，知道这些部件是做什么的很重要，因为在网页编写或设计过程中，主要的任务就是为每重要，因为在网页编写或设计过程中，主要的任务就是为每一个标准的部件选用或编写相应的内容，这些部件有的能

4、够一个标准的部件选用或编写相应的内容，这些部件有的能够在网页中直接看到，而有的却不能在网页中直接看到。在网页中直接看到，而有的却不能在网页中直接看到。上一页下一页返回1.1 认识网页认识网页 1.浏览者能够看到的内容浏览者能够看到的内容 (1)主题：一般情况下，浏览器在所显示网页窗口的标题栏主题：一般情况下，浏览器在所显示网页窗口的标题栏上显示上显示“主题主题”。网页的真正主题不一定出现在网页内部，。网页的真正主题不一定出现在网页内部，而是有可能作为显示此网页的浏览器窗口的标题。然而，大而是有可能作为显示此网页的浏览器窗口的标题。然而，大多数网页的标题表现为屏慕上的文本或图像，标题的作用和

5、多数网页的标题表现为屏慕上的文本或图像，标题的作用和在书本或杂志中的作用一样，位于网页中比较醒目重要的顶在书本或杂志中的作用一样，位于网页中比较醒目重要的顶部附近，从而给网页赋予了名字。部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者标题：浏览器在浏览网页时通常以较大字体、粗体或者其他的突出显示类型来显示标题。一个网页可以有很多标题，其他的突出显示类型来显示标题。一个网页可以有很多标题，而且标题还可以有多达而且标题还可以有多达6层的嵌套深度。层的嵌套深度。 (3)普通文本：是指组成网页基本内容普通文本：是指组成网页基本内容A.多用途的文本。一多用途的文本。

6、一般情况下将普通文本中的线和块当作页面中的般情况下将普通文本中的线和块当作页面中的“段落段落”。上一页下一页返回1.1 认识网页认识网页(4)签名：通常显示在网页的底部。签名标识了网页的作者，并签名：通常显示在网页的底部。签名标识了网页的作者，并且常常还包含作者且常常还包含作者(或者网络竹理员或者网络竹理员)的电子邮件地址，从而的电子邮件地址，从而使访问者可以发送有关此网页的评论或者建议、问题等。使访问者可以发送有关此网页的评论或者建议、问题等。(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。(6)动画：可以是网页中出现的文

7、本或者图片，不同的是它们以动画：可以是网页中出现的文本或者图片，不同的是它们以某种方式运动。图片可以忽隐忽现或者按照简单的动作进行某种方式运动。图片可以忽隐忽现或者按照简单的动作进行旋转；而文本既可以忽隐忽现，也可以从屏幕上滚动滑过。旋转；而文本既可以忽隐忽现，也可以从屏幕上滚动滑过。(7)超级链接：可以链接到很多不同的对象上去，如其他的网页、超级链接：可以链接到很多不同的对象上去，如其他的网页、多媒体文件多媒体文件(动画、视频、声音和外部图像动画、视频、声音和外部图像)、文档文件、电、文档文件、电子邮件地址以及文件或者应用程序。链接还可以引导至当前子邮件地址以及文件或者应用程序。链接还可以引

8、导至当前网页的某个特定的位置。网页的某个特定的位置。上一页下一页返回1.1 认识网页认识网页 (8)内嵌图像：指那些嵌入网页布局中的图像，它们让网页内嵌图像：指那些嵌入网页布局中的图像，它们让网页变得大气美观，而且使得网页的信息量更大。变得大气美观，而且使得网页的信息量更大。 (9)图像地图：是一些内嵌图像，此图像的不同区域下面包图像地图：是一些内嵌图像，此图像的不同区域下面包含有不同的链接，称为热点区域。含有不同的链接，称为热点区域。 (10)背景色或样式：可以是一种单一的颜色，或者是一个内背景色或样式：可以是一种单一的颜色，或者是一个内嵌图像，但是和普通图像不同的是，它们覆盖了整个网页

9、页嵌图像，但是和普通图像不同的是，它们覆盖了整个网页页面的背景，文本和其他图像就显示在其上面。面的背景，文本和其他图像就显示在其上面。 (11)列表：可以是黑点或按数字进行编号，或者其他图形。列表：可以是黑点或按数字进行编号，或者其他图形。 (12)表单：访问者可以在其中的空白处填写内容，回复在线表单：访问者可以在其中的空白处填写内容，回复在线注册网站，填写个人信息、发表言论、问卷调查等。注册网站，填写个人信息、发表言论、问卷调查等。上一页下一页返回1.1 认识网页认识网页 2.浏览者看不到的内容浏览者看不到的内容 (1)鉴定：网页文件可以包含多种鉴定信息，包括作者的名鉴定：网页文件可以

10、包含多种鉴定信息，包括作者的名字、电子邮件地址，以及一些特殊的编码，这些编码可以帮字、电子邮件地址，以及一些特殊的编码，这些编码可以帮助搜索引擎确定网页的主题与内容。助搜索引擎确定网页的主题与内容。 (2)注释：这是用户希望在直接阅读网页的注释：这是用户希望在直接阅读网页的HTML代码时能代码时能够看到的文本，在浏览器中是看不到的。注释通常包括够看到的文本，在浏览器中是看不到的。注释通常包括HTML文件的结构或者相关的注意事项。文件的结构或者相关的注意事项。 ( 3) JavaScript代代4i：在：在HTML文件内，文件内，JavaScript的的语句行可以给网页添加一些特殊的动态效果。语

11、句行可以给网页添加一些特殊的动态效果。 (4) Java Applet：以单独的文件存在，这种：以单独的文件存在，这种Java程序模程序模块可以提高访问者、浏览器和服务器之间的交互能力。比如块可以提高访问者、浏览器和服务器之间的交互能力。比如说，说，Java就非常适合于编写在就非常适合于编写在Web页面上玩的交互游戏。页面上玩的交互游戏。 (5)图像地图和表单处理代码：用来处理图像地图和交互表图像地图和表单处理代码：用来处理图像地图和交互表单的程序代码。单的程序代码。上一页下一页返回1.1 认识网页认识网页1.1.3网页的浏览过程网页的浏览过程 (1)用户在用户在www客户机上输入网址，发

12、出浏览网页的请求客户机上输入网址，发出浏览网页的请求(HTTP请求请求)； (2)该请求通过互联网从该请求通过互联网从WWW客户机传输到客户机传输到WWW服务器；服务器； (3) WWW服务器接受这个请求，然后根据这个请求找到相服务器接受这个请求，然后根据这个请求找到相关的网页并发送给用户；关的网页并发送给用户； (4)这个网页又通过互联网传输到这个网页又通过互联网传输到WWW客户机，客户机接客户机，客户机接受这个网页并将其在浏览器上显示出来。受这个网页并将其在浏览器上显示出来。上一页返回1.2 网页和网站网页和网站(1)拥有众多的网页。拥有众多的网页。(2)拥有一个主题与统一的风格。拥有一

13、个主题与统一的风格。(3)有便捷的导航系统。有便捷的导航系统。 (4)分层的栏目组织。分层的栏目组织。(5)用户指南和网站动态信息。用户指南和网站动态信息。(6)能与用户进行双向交流的栏目。能与用户进行双向交流的栏目。(7)有一个域名。有一个域名。返回1.3 网页设计网页设计1.3.1网页设计网页设计 1.网页设计的步骤网页设计的步骤 (1)草案。新建页面就像一张白纸，没有任何表格、框架和草案。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西。设计人员可以尽可能地发挥想象力，然后约定俗成的东西。设计人员可以尽可能地发挥想象力，然后将所想象到的勾勒出一个草图。这属于创造阶段，所以不讲将所

14、想象到的勾勒出一个草图。这属于创造阶段，所以不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。意的轮廓即可。 (2)粗略布局。在草案的基础上，将需要设置的功能模块安粗略布局。在草案的基础上，将需要设置的功能模块安排到页面上。这时设计人员必须遵循突出重点、平衡协调的排到页面上。这时设计人员必须遵循突出重点、平衡协调的原则。首先将网站标志、主菜单等最重要的模块放在最显眼、原则。首先将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的位置排放。最突出的位置，然后再考虑次要模块的位置排放。 (3)确定方案

15、。这是设计网页布局的重要步骤，是指将粗略确定方案。这是设计网页布局的重要步骤，是指将粗略布局精细化、具体化，形成完整的页面设计方案。布局精细化、具体化，形成完整的页面设计方案。下一页返回1.3 网页设计网页设计 2.网页表现手法网页表现手法 (1)匀称。匀称。 (2)非对称形式。非对称形式。 (3)对比。对比。 (4)空白。空白。 (5)图片解说。图片解说。上一页下一页返回1.3 网页设计网页设计1.3.2网页设计的流程网页设计的流程 1.客户需求客户需求 2.确定网站的内容和主题确定网站的内容和主题 3.设计页面设计页面 4.设计网页动画设计网页动画上一页返回1.4 网页的其他操作网

16、页的其他操作1.4.1保存网页中的图片保存网页中的图片在浏览网页时，看到自己喜爱的图片，总想将其收藏起在浏览网页时，看到自己喜爱的图片，总想将其收藏起来，以便日后使用。保存网页中的图片步骤很简单，具体步来，以便日后使用。保存网页中的图片步骤很简单，具体步骤为：骤为：将鼠标移动要保存的图片上，右击；将鼠标移动要保存的图片上，右击；在弹出的快捷菜单中选择在弹出的快捷菜单中选择“图片另存为图片另存为”命令；命令；在弹出的在弹出的“保存图片保存图片”对话框中选择合适的保存路径，并对对话框中选择合适的保存路径，并对图片重新命名，最后单击确定。图片重新命名，最后单击确定。下一页返回1.4 网页的其他操

17、作网页的其他操作1.4.2保存正在浏览的网页保存正在浏览的网页(1)在在IE浏览器的菜单栏中选择浏览器的菜单栏中选择“文件文件” “另存为另存为”命令，弹命令，弹出出“保存网页保存网页”对话框，对话框，(2)单击单击“保存保存”按钮即可将正在浏览的页面连同其中的图片完按钮即可将正在浏览的页面连同其中的图片完整地保存下来。在对话框中还可以设置网页的保存路径、网整地保存下来。在对话框中还可以设置网页的保存路径、网页保存的文件名以及网页保存的模式。页保存的文件名以及网页保存的模式。上一页返回第第2章章 HTML基础知识基础知识2.1 HTML概述概述2.2 HTML文件的构成文件的构成2.3 HT

18、ML基本语法基本语法2.4 HTML标记标记2.1 HTML概述概述 HTML的英文全称是：的英文全称是：Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，是因为它可以加入图片、档的简单标记语言。所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个声音、动画、影视等内容，事实上每一个HTML文档都是一文档都是一种静态的网页文件，这个文件单面包含了种静态的网页文件，这个文件单面包含了HTML指令代码，指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中这些

19、指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。资料显示位置的标记结构语言，易学易懂，非常简单。返回2.2 HTML文件的构成文件的构成HTML文档卞要由文档卞要由3部分组成。部分组成。 (1) HTML部分：部分：HTML部分以部分以标记开始，以标记开始，以结束。结束。HTML标记告诉浏览器这两个标记中间标记告诉浏览器这两个标记中间的内容是的内容是HTML文档。文档。 (2)头部：头部以头部：头部以标记开始，航栏中的标题和其他标记开始，航栏中的标题和其他在网页中不显示的信息以在网页中不显示的信息以标记结束。这部分包含标记结束。这部分包含显示在网

20、页导。标题包含在显示在网页导。标题包含在和和标记之标记之间。间。 (3)卞体部分：卞体部分包含在网页中显示的文本、图像和链卞体部分：卞体部分包含在网页中显示的文本、图像和链接。卞体部分以接。卞体部分以标记开始，以标记开始，以标记标记结束。结束。返回2.3 HTML基本语法基本语法1. HTML元素元素 HTML元素元素(HTML Element)用来标记文本，表小文用来标记文本，表小文本的内容。比如本的内容。比如body， p， table就是就是HTML元素。元素。 HTML元素用标记表小，标记以符号元素用标记表小，标记以符号“”结束。结束。下一页返回2.3 HTML基本语法基本语法2.

21、HTML元素的属性元素的属性大多数标签都有自己的一些属性，属性要写在起始标签大多数标签都有自己的一些属性，属性要写在起始标签内，属性用于进一步改变显示的效果，各属性之间无先后次内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值；其格式序，属性是可选的，属性也可以省略而采用默认值；其格式如下：如下：内容内容上一页返回2.4 HTM L标记标记2.4.1基本标记基本标记 1.段落标记段落标记正如在写一篇文章的时候，通常要将文章的内容以一个正如在写一篇文章的时候，通常要将文章的内容以一个个段落的形式组织起来，这样排列显得整齐、清晰。在个段落的形式

22、组织起来，这样排列显得整齐、清晰。在HTML文档中，也需要将文本内容组合成多个段落。文档中，也需要将文本内容组合成多个段落。段落标记的语法格式为段落标记的语法格式为文本文本，段落的开始由，段落的开始由标记，段落的结束由标记，段落的结束由标记，标记，有时也被有时也被省略。省略。标记还有一个属性标记还有一个属性align，它用来指明字符显示，它用来指明字符显示时的对齐方式，一般值有时的对齐方式，一般值有center， left， right 3种，分种，分别为居中、左对齐、右对齐。别为居中、左对齐、右对齐。下一页返回2.4 HTM L标记标记2.换行标记换行标记换行标记的语法格式为：文本换行

23、标记的语法格式为：文本。使用使用标记可以在不新建段落的情况下换行，只要在标记可以在不新建段落的情况下换行，只要在文本中放入文本中放入标记，就会强制换行。标记，就会强制换行。3.标题标记标题标记看过看过Word单面的标题单面的标题1、标题、标题2、标题、标题3这样的样式吗这样的样式吗?在在HTML语言中也有这样简明的定义。依次为语言中也有这样简明的定义。依次为，， . . . 6种，种，设设置的字休最大，置的字休最大，设置的字体最小。设置的字体最小。 4.预格式化标记预格式化标记要保留原始文字排版的格式，就可以通过要保留原始文字排版的格式，就可以通过标签来标签来实现，方法是把制作好的文字

24、排版内容前后分别加上开始标实现，方法是把制作好的文字排版内容前后分别加上开始标签签和结尾标签和结尾标签。上一页下一页返回2.4 HTM L标记标记2.4.2格式标记格式标记 1. 标记标记 2. 标记标记 3.标记标记 4. 标记标记 5. 标记标记上一页下一页返回2.4 HTM L标记标记2.4.3文本标记文本标记1. 标记用于控制网页上文字的字体，大小和颜色。标记用于控制网页上文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。控制方式是利用属性设置得以实现的。2.特殊符号特殊符号某些字符在某些字符在HTML中具有特殊意义，如小于号中具有特殊意义，如小于号()即定即定义义

25、HTML标记的开始。这个小于号是不显示在最终看到的网标记的开始。这个小于号是不显示在最终看到的网页单的。那如果希望在网页中显示一个小于号，该怎么办呢页单的。那如果希望在网页中显示一个小于号，该怎么办呢?要在浏览器中显示这些特殊字符，就必须在要在浏览器中显示这些特殊字符，就必须在HTML文档中使文档中使用字符实体。用字符实体。上一页下一页返回2.4 HTML标记标记2.4.4列表标记列表标记 1.无序列表无序列表无序列表就是无序列表就是“项目列表项目列表”，不用数字标记每个列表项，不用数字标记每个列表项，而采用一个符号标记每个列表项，比如圆黑点。无序列表的而采用一个符号标记每个列表项，比如

26、圆黑点。无序列表的标记为：标记为：.，每个列表项由，每个列表项由开始。结开始。结束标记束标记为可选项。为可选项。 2.有序列表有序列表有序列表中，每个列表项前标有数字，表示顺序。有序列有序列表中，每个列表项前标有数字，表示顺序。有序列表由表由开始，开始，结束，每个列表项由结束，每个列表项由开始。开始。 3.定义列表定义列表定义列表由定义列表由开始。术语由开始。术语由开始，英文意为开始，英文意为Definition Term。术语的解释说明，由。术语的解释说明，由开始，开始，.单的文字缩进显小。单的文字缩进显小。上一页下一页返回2.4 HTM L标记标记2.4.5图像标记图像标记 1.图

27、像的基本知识图像的基本知识在使用图像标记前，需要先来了解一些图像的基本知识。在使用图像标记前，需要先来了解一些图像的基本知识。图像可分为位图和矢量图。位图图形由排列成网格的称为像图像可分为位图和矢量图。位图图形由排列成网格的称为像素的点组成。例如，在一个位图的苹果图形中，图像由网格素的点组成。例如，在一个位图的苹果图形中，图像由网格中每个像素的位置和颜色值决定；每个点被制定一种颜色；中每个像素的位置和颜色值决定；每个点被制定一种颜色；在以一定的分辨率查看时，这些点就像马赛克那样拼合在一在以一定的分辨率查看时，这些点就像马赛克那样拼合在一起形成图像，在编辑位图图形时，修改的就是这些像素点。起形

28、成图像，在编辑位图图形时，修改的就是这些像素点。上一页下一页返回2.4 HTM L标记标记2.图像标记图像标记在在HTML中，使用中，使用IMG标记在网页中加入图像。它具有标记在网页中加入图像。它具有两个基本属性两个基本属性src和和alt，分别用于设置图像文件的位置和替，分别用于设置图像文件的位置和替换文本。换文本。上一页下一页返回2.4 HTM L标记标记2.4.6超链接标记超链接标记1.相对地址与绝对地址相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联统一资源定位符，也被称为网页地址，是表示互联网上资源的一种方法，通常可以理解为资源的地址。一个网上资源的

29、一种方法，通常可以理解为资源的地址。一个URL包括包括3部分：协议代码、装有所需文件的计算机地址，部分：协议代码、装有所需文件的计算机地址，以及具体的文件地址和文件名。以及具体的文件地址和文件名。 (1)绝对绝对URL。绝对。绝对URL是指是指Internet上资源的完整地址，上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名。形包括完整的协议种类、计算机域名和包含路径的文档名。形式为协议：式为协议：/计算机域名计算机域名/文档名。文档名。 (2)相对相对URL。相对。相对URL是指是指Internet上资源相对于当前上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置

30、的路径。页面的地址，它包含从当前页面指向目的页面位置的路径。上一页下一页返回2.4 HTM L标记标记 2.超级链接超级链接超级链接超级链接(简称为超链接简称为超链接)是到另一个文档或文件是到另一个文档或文件(图形、图形、音频、视频音频、视频)甚至到同一文档的另一部分的连接。当用户单击甚至到同一文档的另一部分的连接。当用户单击超级链接时，就会进入链接中指定的超级链接时，就会进入链接中指定的URL。要创建超级链接，应指定以下两部分：要创建超级链接，应指定以下两部分： (1)要链接文件的完整地址或要链接文件的完整地址或URL ； (2)将提供链接的热点。热点可以是文本行，也可以是将提供链接

31、的热点。热点可以是文本行，也可以是图像。图像。上一页下一页返回2.4 HTM L标记标记2.4.7表格标记表格标记1.表格的基本结构表格的基本结构(1)TABLE。(2)CAPTION。(3) TR。(4)TD和和 TH。上一页下一页返回2.4 HTM L标记标记 2.合并单元格合并单元格如果在网页中需要创建不规则的表格，那么就需要进行如果在网页中需要创建不规则的表格，那么就需要进行单元格的合并。单元格的合并。行合并行合并在在和和标记内使用标记内使用rowspan属性可以进行属性可以进行行合并，行合并，rowspan的取值表示纵方向上合并的行数。的取值表示纵方向上合并的行数。列

32、合并列合并在在和和标记内使用标记内使用colspan的取值表示水平的取值表示水平方向上合并的列数。方向上合并的列数。上一页下一页返回2.4 HTM L标记标记2.4.8表单标记表单标记 1.表单元素表单元素标记：用于在网页中创建表单区域，属于一标记：用于在网页中创建表单区域，属于一个容器标记，表示其他表单标记需要在它的包围中才有效。个容器标记，表示其他表单标记需要在它的包围中才有效。其属性介绍如下。其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程用来设置接收和处理浏览器递交的表单内容的服务器程序的序的URL。 method：此属性告诉浏览器如何将数据发送给

33、服务器，它指：此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法定向服务器发送数据的方法(用用POST方法还是用方法还是用GET方法方法)。上一页下一页返回2.4 HTM L标记标记2.创建表单控件创建表单控件 (1) HTML输入元素。输入元素。标记定义要在表单中显示的标记定义要在表单中显示的控件类型和外观。此标记包括的属性介绍如下。控件类型和外观。此标记包括的属性介绍如下。 type：此属性指定表单元素的类型。：此属性指定表单元素的类型。 name：此属性指定表单元素的名称。：此属性指定表单元素的名称。 value：此属性是可选属性，它指定表单元素的初始值。：此属性是

34、可选属性，它指定表单元素的初始值。 size：此属性指定表单元素的初始宽度。：此属性指定表单元素的初始宽度。 maxlength：此属性用于指定可在：此属性用于指定可在text或或password元元素中输入的最大字符数。素中输入的最大字符数。 checked：此属性是：此属性是Boolean属性，指定按钮是否是被选属性，指定按钮是否是被选中的。中的。上一页下一页返回2.4 HTM L标记标记 (2)文本框与口令框。如果需要浏览者输入单行文本文本框与口令框。如果需要浏览者输入单行文本(例如输入例如输入姓名、年龄等信息姓名、年龄等信息)，则应该在表单中使用单行文本框。单行，则应该在表单中使用

35、单行文本框。单行文本框使用文本框使用INPUT标记符创建，将标记符创建，将type属性指定为属性指定为“ text”即可。实际上，由于即可。实际上，由于INPUT标记符标记符type属性的默属性的默认值就是认值就是“ text所以可以直接用所以可以直接用INPUT标记符创建单行文标记符创建单行文本框。本框。上一页下一页返回2.4 HTM L标记标记(3)复选框与单选框。复选框和单选框都是允许用户进行选择的复选框与单选框。复选框和单选框都是允许用户进行选择的控件，常用于选择多种选项控件，常用于选择多种选项(如兴趣爱好如兴趣爱好)，或选择互斥的选，或选择互斥的选项项(如性别如性别)。上一页下

36、一页返回2.4 HTM L标记标记 (4)文件选择框。如果需要用户在表单中选择文件，然后将选文件选择框。如果需要用户在表单中选择文件，然后将选中文件的内容发送到服务器，则可以使用中文件的内容发送到服务器，则可以使用“文件选择框文件选择框”控控件。文件选择框在件。文件选择框在Web上的一种典型用法是：当用户在撰写上的一种典型用法是：当用户在撰写电子邮件时，如果需要附加文件作为附件，则可以单击电子邮件时，如果需要附加文件作为附件，则可以单击“附附件件”按钮，然后使用文件选择框选择需要附加的文件。按钮，然后使用文件选择框选择需要附加的文件。上一页下一页返回2.4 HTM L标记标记 (5)按钮

37、。当用户完成了表单的填写后，如果需要提交数据，按钮。当用户完成了表单的填写后，如果需要提交数据，则可以单击表单中的则可以单击表单中的“提交提交”按钮按钮(通常按钮上的文字为通常按钮上的文字为“提提交交”或或“submit”等等)；如果希望恢复表单为填写前的状态，；如果希望恢复表单为填写前的状态，以便重新填写，则可以单击以便重新填写，则可以单击“重置重置”按钮按钮(通常按钮上的文字通常按钮上的文字为为“重置重置”、“重新填写重新填写”或或“reset”等等)。另外，还可以。另外，还可以在表单中使用自定义按钮，以便响应特定的事件。在表单中使用自定义按钮，以便响应特定的事件。上一页下一页返回2.

38、4 HTM L标记标记 (6)多行文本框。当需要浏览者提交多于一行的文本时多行文本框。当需要浏览者提交多于一行的文本时(例如希例如希望获得用户的反馈意见望获得用户的反馈意见)，就不能再使用单行文本框，而应使，就不能再使用单行文本框，而应使用多行文本框。用多行文本框。 (7)选项菜单。如果希望浏览者从多个选项中选取信息，则可选项菜单。如果希望浏览者从多个选项中选取信息，则可以使用选项菜单控件。要创建选项菜单，应使用以使用选项菜单控件。要创建选项菜单，应使用SELECT标标记符，并将每个可以独立选取的项用一个记符，并将每个可以独立选取的项用一个OPTION标记符标标记符标出来。出来。上一页下一页

39、返回2.4 HTM L标记标记2.4.9层标记层标记虽然可以使用表格来指定虽然可以使用表格来指定Web浏览器中页面的布局，但浏览器中页面的布局，但是使用表格为复杂的网页布局非常困难。是使用表格为复杂的网页布局非常困难。Dreamweaver提供了一个功能，可以使高级的页面布局创建变得更容易。提供了一个功能，可以使高级的页面布局创建变得更容易。使用层，网页设计人员就可以精细地调整元素的准确像素布使用层，网页设计人员就可以精细地调整元素的准确像素布置。层就是包含内容的容器，可以将其放置在文档中的任何置。层就是包含内容的容器，可以将其放置在文档中的任何位置。由于可以制作层的动画，因此，层属于动态

40、内容类。位置。由于可以制作层的动画，因此，层属于动态内容类。上一页下一页返回2.4 HTM L标记标记2.4.10脚本标记脚本标记有时，网页中的一些特殊效果击要加入脚本语言才能够有时，网页中的一些特殊效果击要加入脚本语言才能够实现，脚本语言是一种简化的编程语言，它可以生成许多的实现，脚本语言是一种简化的编程语言，它可以生成许多的网页特效，如滚动的文字、雪花效果、波浪效果等。网页特效，如滚动的文字、雪花效果、波浪效果等。常用常用的脚本语言有的脚本语言有3种，分别是种，分别是JavaScript， VBScript和和 Jscript。其中。其中JavaS cript是是IE不不II Nav

41、igator都完全都完全支持的脚本语言，所以使用得最广泛。支持的脚本语言，所以使用得最广泛。上一页下一页返回2.4 HTM L标记标记2.4.11对象标记对象标记1.APPLET、PARAM APPLET指的是用指的是用Java语言编写、经语言编写、经Java编译器编译编译器编译之后可在网页中直接嵌入使用的对象，中文称之为之后可在网页中直接嵌入使用的对象，中文称之为Java应用应用小程序。小程序。2. OBJECE 除除APPLET外还有许多类型的对象，最常见的是外还有许多类型的对象，最常见的是ActiveX，这些对象在，这些对象在HTML中都没有对应的标记，都必须中都没有对应的标记，都必

42、须依靠依靠OBJECT标记才能嵌入网页。标记才能嵌入网页。 3. EMBED、NOEMBED EMBED也是用来在网页中嵌入对象的标记，也是用来在网页中嵌入对象的标记，NOEMBED用来指明当浏览器不能显小所显小的对象时显小用来指明当浏览器不能显小所显小的对象时显小的文本。的文本。EMBED标签是单独出现的，以标签是单独出现的，以开始，开始，结束。使用结束。使用EMBED标签可以在网页中嵌入标签可以在网页中嵌入Flash Mid， MP3等嵌入式内容。等嵌入式内容。上一页返回第第3章章 Dreamweaver 8快速入门快速入门3.1 Dreamweaver 8简介简介3.2 Dreamwe

43、aver 8基本工作环境基本工作环境3.3 用用Dreamweaver 8制作网页制作网页3.4 网页制作高级功能网页制作高级功能3.1 Dreamweaver 8简介简介 Macromedia Dreamweaver 8是一个可视化的网是一个可视化的网页设计和建立页设计和建立Web站点及应用程序的专业工具。它将可视布站点及应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其局工具、应用程序开发功能和代码编辑支持组合在一起，其功能的强大使得各个层次的开发人员和设计人员都能够快速功能的强大使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用

44、程序。从对基于创建界面吸引人的基于标准的网站和应用程序。从对基于CSS设计的领先支持到乎工编码功能，设计的领先支持到乎工编码功能，Dreamweaver提提供了专业人员在一个集成、高效的环境中所需的工具。开发供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用人员可以使用 Dreamweaver及所选择的服务器技术来创及所选择的服务器技术来创建功能强大的建功能强大的Internet应用程序，从而使用户能链接到数应用程序，从而使用户能链接到数据库、据库、Web服务和旧式系统。服务和旧式系统。返回3.2 Dreamweaver 8基本工作环境基本工作环境3.2.1界面介绍界面介绍新建

45、或打开一个文档，进入新建或打开一个文档，进入Dreamweaver 8的标准的标准工作界面。工作界面。Dreamweaver 8的标准工作界面包括：标题的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组，如档窗口、状态栏、属性面板和浮动面板组，如图图3-2所示。所示。下一页返回3.2 Dreamweaver 8基本工作环境基本工作环境3.2.2主菜单主菜单文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打印

46、等。印等。编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置等。等。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。链接等。修改：具有对页面元素修改的功能。修改：具有对页面元素修改的功能。文本：用来对文本操作，例如设置文本格式等。文本：用来对文本操作，例如设置文本格式等。命令：所有的附加命令项。命令：所有的附加命

47、令项。站点：用来创建和管理站点。站点：用来创建和管理站点。窗口：用来显示和隐藏控制面板以及切换文档窗口。窗口：用来显示和隐藏控制面板以及切换文档窗口。帮助：联机帮助功能。例如按帮助：联机帮助功能。例如按F1键，就会打开电子帮助文本键，就会打开电子帮助文本。上一页下一页返回3.2 Dreamweaver 8基本工作环境基本工作环境3.2.3工具栏工具栏1.文档工具栏文档工具栏 “文档文档”工具栏包含各种按钮，它们提供各种工具栏包含各种按钮，它们提供各种“文档文档”窗口视图窗口视图(如如“设计设计”视图和视图和“代码代码”视图视图)的选项、各种查的选项、各种查看选项和一些常用操作看选项和一些常

48、用操作(如在浏览器中预览如在浏览器中预览)。上一页下一页返回3.2 Dreamweaver 8基本工作环境基本工作环境 2.标准工具栏标准工具栏 “标准标准”工具栏包含来自工具栏包含来自“文件文件”和和“编辑编辑”菜单中的菜单中的一般操作的按钮：一般操作的按钮： “新建新建”、 “打开打开”、“保存保存”、“保保存全部存全部”、“剪切剪切”、“复制复制”、“粘贴粘贴”、“撤销撤销”和和“重做重做”上一页下一页返回3.2 Dreamweaver 8基本工作环境基本工作环境3.文档窗口文档窗口 “文档文档”窗口显示当前文档。可以选择下列任一视图：窗口显示当前文档。可以选择下列任一视图：“设

49、计设计”视图是一个用于可视化页面布局、可视化编辑和快视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。类似于在浏览器中查看页面时看到的内容。“代码代码”视图是视图是一个用于编写和编辑一个用于编写和编辑HTML， JavaScript、服务器语言代、服务器语言代码以及任何其他类型代码的乎工编码环境。码以及任何其他类型代码的乎工编码环境。“代码和设计代码和设计”视图使用户可以在单个窗口中同时看到

50、同一文档的视图使用户可以在单个窗口中同时看到同一文档的“代码代码”视图和视图和“设计设计”视图。视图。上一页下一页返回3.2 Dreamweaver 8基本工作环境基本工作环境4.状态栏状态栏 “文档文档”窗口底部的状态栏提供与用户正创建的文档有窗口底部的状态栏提供与用户正创建的文档有关的其他信息。标签选择器显示环绕当前选定内容的标签层关的其他信息。标签选择器显示环绕当前选定内容的标签层次结构。单击该层次结构中的任何标签以选择该标签及其全次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击部内容。单击标签可以选择文档的整个正文。标签可以选择文档的整个正文。上一页下一页返回3

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

40 金币

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 网页设计制作

淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

限制150内

关于本文

本文标题：网页设计与制作（.ppt
链接地址：https://www.taowenge.com/p-12117619.html