网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程(最新(PPT 171页)

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 网页的其他操作第3页，共171页。1.1 认识网页1.1.1网页是什么 “网页”是什么，平常所说的“新浪”、“搜狐”、“网易”等，即是俗称的“网站”。而访问这些网站的时候，最直接访问的就是“网页”了。这许许多

2、多的网页就组成了整个站点，也就是网站。从中可以看到网页和网站之间的密切关系。 网页是一种网络信息传递的载体。这种媒介的性质和日常的“报纸”、“广播”、“电视”等传统媒体是可以相提并论的。在网络上传递的相关信息，比如文字、图片甚至多媒体音影，都是在网页中的存储，浏览者只需要通过浏览网页，就可以了解到相关信息了。下一页 返回第4页，共171页。1.1 认识网页1.1.2网页是如何形成的 网页是由一些部件组成的，知道这些部件是做什么的很重要，因为在网页编写或设计过程中，主要的任务就是为每一个标准的部件选用或编写相应的内容，这些部件有的能够在网页中直接看到，而有的却不能在网页中直接看到。上一页 下一页

3、 返回第5页，共171页。1.1 认识网页 1.浏览者能够看到的内容 (1)主题：一般情况下，浏览器在所显示网页窗口的标题栏上显示“主题”。网页的真正主题不一定出现在网页内部，而是有可能作为显示此网页的浏览器窗口的标题。然而，大多数网页的标题表现为屏慕上的文本或图像，标题的作用和在书本或杂志中的作用一样，位于网页中比较醒目重要的顶部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者其他的突出显示类型来显示标题。一个网页可以有很多标题，而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一般情况下将普通文本中的线和块当作页

4、面中的“段落”。上一页 下一页 返回第6页，共171页。1.1 认识网页(4)签名：通常显示在网页的底部。签名标识了网页的作者，并且常常还包含作者(或者网络竹理员)的电子邮件地址，从而使访问者可以发送有关此网页的评论或者建议、问题等。(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。(6)动画：可以是网页中出现的文本或者图片，不同的是它们以某种方式运动。图片可以忽隐忽现或者按照简单的动作进行旋转；而文本既可以忽隐忽现，也可以从屏幕上滚动滑过。(7)超级链接：可以链接到很多不同的对象上去，如其他的网页、多媒体文件(动画、视频、声音和外部图像)、文档文件、电子邮件地址以及文件或者应用程序

5、。链接还可以引导至当前网页的某个特定的位置。上一页 下一页 返回第7页，共171页。1.1 认识网页 (8)内嵌图像：指那些嵌入网页布局中的图像，它们让网页变得大气美观，而且使得网页的信息量更大。 (9)图像地图：是一些内嵌图像，此图像的不同区域下面包含有不同的链接，称为热点区域。 (10)背景色或样式：可以是一种单一的颜色，或者是一个内嵌图像，但是和普通图像不同的是，它们覆盖了整个网页页面的背景，文本和其他图像就显示在其上面。 (11)列表：可以是黑点或按数字进行编号，或者其他图形。 (12)表单：访问者可以在其中的空白处填写内容，回复在线注册网站，填写个人信息、发表言论、问卷调查等。 上一

6、页 下一页 返回第8页，共171页。1.1 认识网页 2.浏览者看不到的内容 (1)鉴定：网页文件可以包含多种鉴定信息，包括作者的名字、电子邮件地址，以及一些特殊的编码，这些编码可以帮助搜索引擎确定网页的主题与内容。 (2)注释：这是用户希望在直接阅读网页的HTML代码时能够看到的文本，在浏览器中是看不到的。注释通常包括HTML文件的结构或者相关的注意事项。 ( 3) JavaScript代4i：在HTML文件内，JavaScript的语句行可以给网页添加一些特殊的动态效果。 (4) Java Applet：以单独的文件存在，这种Java程序模块可以提高访问者、浏览器和服务器之间的交互能力。比

7、如说，Java就非常适合于编写在Web页面上玩的交互游戏。 (5)图像地图和表单处理代码：用来处理图像地图和交互表单的程序代码。上一页 下一页 返回第9页，共171页。1.1 认识网页1.1.3网页的浏览过程 (1)用户在www客户机上输入网址，发出浏览网页的请求(HTTP请求)； (2)该请求通过互联网从WWW客户机传输到WWW服务器； (3) WWW服务器接受这个请求，然后根据这个请求找到相关的网页并发送给用户； (4)这个网页又通过互联网传输到WWW客户机，客户机接受这个网页并将其在浏览器上显示出来。上一页 返回第10页，共171页。1.2 网页和网站(1)拥有众多的网页。(2)拥有一个

8、主题与统一的风格。(3)有便捷的导航系统。 (4)分层的栏目组织。(5)用户指南和网站动态信息。(6)能与用户进行双向交流的栏目。(7)有一个域名。返回第11页，共171页。1.3 网页设计1.3.1网页设计 1.网页设计的步骤 (1)草案。新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西。设计人员可以尽可能地发挥想象力，然后将所想象到的勾勒出一个草图。这属于创造阶段，所以不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。 (2)粗略布局。在草案的基础上，将需要设置的功能模块安排到页面上。这时设计人员必须遵循突出重点、平衡协调的原则。首先将网站标志、主菜单等最重要的

9、模块放在最显眼、最突出的位置，然后再考虑次要模块的位置排放。 (3)确定方案。这是设计网页布局的重要步骤，是指将粗略布局精细化、具体化，形成完整的页面设计方案。下一页 返回第12页，共171页。1.3 网页设计 2.网页表现手法 (1)匀称。 (2)非对称形式。 (3)对比。 (4)空白。 (5)图片解说。上一页 下一页 返回第13页，共171页。1.3 网页设计1.3.2网页设计的流程 1.客户需求 2.确定网站的内容和主题 3.设计页面 4.设计网页动画上一页 返回第14页，共171页。1.4 网页的其他操作1.4.1保存网页中的图片 在浏览网页时，看到自己喜爱的图片，总想将其收藏起来，以

10、便日后使用。保存网页中的图片步骤很简单，具体步骤为：将鼠标移动要保存的图片上，右击；在弹出的快捷菜单中选择“图片另存为”命令；在弹出的“保存图片”对话框中选择合适的保存路径，并对图片重新命名，最后单击确定。下一页 返回第15页，共171页。1.4 网页的其他操作1.4.2保存正在浏览的网页(1)在IE浏览器的菜单栏中选择“文件” “另存为”命令，弹出“保存网页”对话框，(2)单击“保存”按钮即可将正在浏览的页面连同其中的图片完整地保存下来。在对话框中还可以设置网页的保存路径、网页保存的文件名以及网页保存的模式。上一页 返回第16页，共171页。第2章 HTML基础知识2.1 HTML概述2.2

11、 HTML文件的构成2.3 HTML基本语法2.4 HTML标记第17页，共171页。2.1 HTML概述 HTML的英文全称是：Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件单面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。返回第18页，共171页。2.2 HTML文件的构成HTML文档卞要由3部分组成。 (1) HTML部分：HTML部分

12、以标记开始，以结束。HTML标记告诉浏览器这两个标记中间的内容是HTML文档。 (2)头部：头部以标记开始，航栏中的标题和其他在网页中不显示的信息以标记结束。这部分包含显示在网页导。标题包含在和标记之间。 (3)卞体部分：卞体部分包含在网页中显示的文本、图像和链接。卞体部分以标记开始，以标记结束。返回第19页，共171页。2.3 HTML基本语法1. HTML元素 HTML元素(HTML Element)用来标记文本，表小文本的内容。比如body， p， table就是HTML元素。 HTML元素用标记表小，标记以符号“”结束。下一页 返回第20页，共171页。2.3 HTML基本语法2. H

13、TML元素的属性 大多数标签都有自己的一些属性，属性要写在起始标签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值；其格式如下： 内容上一页 返回第21页，共171页。2.4 HTM L标记2.4.1基本标记 1.段落标记 正如在写一篇文章的时候，通常要将文章的内容以一个个段落的形式组织起来，这样排列显得整齐、清晰。在HTML文档中，也需要将文本内容组合成多个段落。 段落标记的语法格式为文本，段落的开始由标记，段落的结束由标记，有时也被省略。标记还有一个属性align，它用来指明字符显示时的对齐方式，一般值有center， left， right

14、 3种，分别为居中、左对齐、右对齐。下一页 返回第22页，共171页。2.4 HTM L标记2.换行标记 换行标记的语法格式为：文本。 使用标记可以在不新建段落的情况下换行，只要在文本中放入标记，就会强制换行。3.标题标记 看过Word单面的标题1、标题2、标题3这样的样式吗?在HTML语言中也有这样简明的定义。依次为， ， . . . 6种，设置的字休最大，设置的字体最小。 4.预格式化标记 要保留原始文字排版的格式，就可以通过标签来实现，方法是把制作好的文字排版内容前后分别加上开始标签和结尾标签 。上一页 下一页 返回第23页，共171页。2.4 HTM L标记2.4.2格式标记 1. 标

15、记 2. 标记 3.标记 4. 标记 5. 标记上一页 下一页 返回第24页，共171页。2.4 HTM L标记2.4.3文本标记1. 标记用于控制网页上文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。2.特殊符号 某些字符在HTML中具有特殊意义，如小于号()即定义HTML标记的开始。这个小于号是不显示在最终看到的网页单的。那如果希望在网页中显示一个小于号，该怎么办呢?要在浏览器中显示这些特殊字符，就必须在HTML文档中使用字符实体。上一页 下一页 返回第25页，共171页。2.4 HTML标记2.4.4列表标记 1.无序列表 无序列表就是“项目列表”，不用数字标记每个列表项，而采

16、用一个符号标记每个列表项，比如圆黑点。无序列表的标记为：.，每个列表项由开始。结束标记为可选项。 2.有序列表 有序列表中，每个列表项前标有数字，表示顺序。有序列表由开始，结束，每个列表项由开始。 3.定义列表 定义列表由开始。术语由开始，英文意为Definition Term。术语的解释说明，由开始，.单的文字缩进显小。上一页 下一页 返回第26页，共171页。2.4 HTM L标记2.4.5图像标记 1.图像的基本知识 在使用图像标记前，需要先来了解一些图像的基本知识。图像可分为位图和矢量图。位图图形由排列成网格的称为像素的点组成。例如，在一个位图的苹果图形中，图像由网格中每个像素的位置和

17、颜色值决定；每个点被制定一种颜色；在以一定的分辨率查看时，这些点就像马赛克那样拼合在一起形成图像，在编辑位图图形时，修改的就是这些像素点。上一页 下一页 返回第27页，共171页。2.4 HTM L标记2.图像标记 在HTML中，使用IMG标记在网页中加入图像。它具有两个基本属性src和alt，分别用于设置图像文件的位置和替换文本。上一页 下一页 返回第28页，共171页。2.4 HTM L标记2.4.6超链接标记1.相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联网上资源的一种方法，通常可以理解为资源的地址。一个URL包括3部分：协议代码、装有所需文件的计算机地址，以

18、及具体的文件地址和文件名。 (1)绝对URL。绝对URL是指Internet上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名。形式为协议：/计算机域名/文档名。 (2)相对URL。相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目的页面位置的路径。上一页 下一页 返回第29页，共171页。2.4 HTM L标记 2.超级链接 超级链接(简称为超链接)是到另一个文档或文件(图形、音频、视频)甚至到同一文档的另一部分的连接。当用户单击超级链接时，就会进入链接中指定的URL。 要创建超级链接，应指定以下两部分： (1)要链接文件的完整地址或URL ；

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

20、M L标记2.4.8表单标记 1.表单元素 标记：用于在网页中创建表单区域，属于一个容器标记，表示其他表单标记需要在它的包围中才有效。其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。 method：此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法(用POST方法还是用GET方法)。上一页 下一页 返回第33页，共171页。2.4 HTM L标记2.创建表单控件 (1) HTML输入元素。标记定义要在表单中显示的控件类型和外观。此标记包括的属性介绍如下。 type：此属性指定表单元素的类型。 name：此属性指定表单元素的名称。 va

21、lue：此属性是可选属性，它指定表单元素的初始值。 size：此属性指定表单元素的初始宽度。 maxlength：此属性用于指定可在text或password元素中输入的最大字符数。 checked：此属性是Boolean属性，指定按钮是否是被选中的。上一页 下一页 返回第34页，共171页。2.4 HTM L标记 (2)文本框与口令框。如果需要浏览者输入单行文本(例如输入姓名、年龄等信息)，则应该在表单中使用单行文本框。单行文本框使用INPUT标记符创建，将type属性指定为“ text”即可。实际上，由于INPUT标记符type属性的默认值就是“ text所以可以直接用INPUT标记符创建

22、单行文本框。上一页 下一页 返回第35页，共171页。2.4 HTM L标记(3)复选框与单选框。复选框和单选框都是允许用户进行选择的控件，常用于选择多种选项(如兴趣爱好)，或选择互斥的选项(如性别)。上一页 下一页 返回第36页，共171页。2.4 HTM L标记 (4)文件选择框。如果需要用户在表单中选择文件，然后将选中文件的内容发送到服务器，则可以使用“文件选择框”控件。文件选择框在Web上的一种典型用法是：当用户在撰写电子邮件时，如果需要附加文件作为附件，则可以单击“附件”按钮，然后使用文件选择框选择需要附加的文件。上一页 下一页 返回第37页，共171页。2.4 HTM L标记 (5

23、)按钮。当用户完成了表单的填写后，如果需要提交数据，则可以单击表单中的“提交”按钮(通常按钮上的文字为“提交”或“submit”等)；如果希望恢复表单为填写前的状态，以便重新填写，则可以单击“重置”按钮(通常按钮上的文字为“重置”、“重新填写”或“reset”等)。另外，还可以在表单中使用自定义按钮，以便响应特定的事件。上一页 下一页 返回第38页，共171页。2.4 HTM L标记 (6)多行文本框。当需要浏览者提交多于一行的文本时(例如希望获得用户的反馈意见)，就不能再使用单行文本框，而应使用多行文本框。 (7)选项菜单。如果希望浏览者从多个选项中选取信息，则可以使用选项菜单控件。要创建选

24、项菜单，应使用SELECT标记符，并将每个可以独立选取的项用一个OPTION标记符标出来。上一页 下一页 返回第39页，共171页。2.4 HTM L标记2.4.9层标记 虽然可以使用表格来指定Web浏览器中页面的布局，但是使用表格为复杂的网页布局非常困难。Dreamweaver提供了一个功能，可以使高级的页面布局创建变得更容易。使用层，网页设计人员就可以精细地调整元素的准确像素布置。层就是包含内容的容器，可以将其放置在文档中的任何位置。由于可以制作层的动画，因此，层属于动态内容类。上一页 下一页 返回第40页，共171页。2.4 HTM L标记2.4.10脚本标记 有时，网页中的一些特殊效果

25、击要加入脚本语言才能够实现，脚本语言是一种简化的编程语言，它可以生成许多的网页特效，如滚动的文字、雪花效果、波浪效果等。常用的脚本语言有3种，分别是JavaScript， 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外还有许多类型的对象，最

26、常见的是ActiveX，这些对象在HTML中都没有对应的标记，都必须依靠OBJECT标记才能嵌入网页。 3. EMBED、NOEMBED EMBED也是用来在网页中嵌入对象的标记，NOEMBED用来指明当浏览器不能显小所显小的对象时显小的文本。EMBED标签是单独出现的，以开始，结束。使用EMBED标签可以在网页中嵌入Flash Mid， MP3等嵌入式内容。上一页 返回第42页，共171页。第3章 Dreamweaver 8快速入门3.1 Dreamweaver 8简介3.2 Dreamweaver 8基本工作环境3.3 用Dreamweaver 8制作网页3.4 网页制作高级功能第43页，

27、共171页。3.1 Dreamweaver 8简介 Macromedia Dreamweaver 8是一个可视化的网页设计和建立Web站点及应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能的强大使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS设计的领先支持到乎工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能链接到数据库、Web服务和旧式系统。返回第44页，共1

28、71页。3.2 Dreamweaver 8基本工作环境3.2.1界面介绍 新建或打开一个文档，进入Dreamweaver 8的标准工作界面。Dreamweaver 8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组，如图3-2所示。下一页 返回第45页，共171页。3.2 Dreamweaver 8基本工作环境3.2.2主菜单文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打印等。编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和参数设置等。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入：用来

29、插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。修改：具有对页面元素修改的功能。文本：用来对文本操作，例如设置文本格式等。命令：所有的附加命令项。站点：用来创建和管理站点。窗口：用来显示和隐藏控制面板以及切换文档窗口。帮助：联机帮助功能。例如按F1键，就会打开电子帮助文本。上一页 下一页 返回第46页，共171页。3.2 Dreamweaver 8基本工作环境3.2.3工具栏1.文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图(如“设计”视图和“代码”视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)。上一页 下一页 返回第47页，共171页。3.2

30、Dreamweaver 8基本工作环境 2.标准工具栏 “标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮： “新建”、 “打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”上一页 下一页 返回第48页，共171页。3.2 Dreamweaver 8基本工作环境3.文档窗口 “文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑HTML， J

31、avaScript、服务器语言代码以及任何其他类型代码的乎工编码环境。“代码和设计”视图使用户可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。上一页 下一页 返回第49页，共171页。3.2 Dreamweaver 8基本工作环境4.状态栏 “文档”窗口底部的状态栏提供与用户正创建的文档有关的其他信息。标签选择器显示环绕当前选定内容的标签层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击标签可以选择文档的整个正文。上一页 下一页 返回第50页，共171页。3.2 Dreamweaver 8基本工作环境3.2.4常用面板 1.插入面板组 插入面板集成了所有可以在网页

32、应用的对象包括“插入”菜单中的选项。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，画、表格、图层、框架、表单、Flash和 ActiveX可以很容易地加入图像、声音、多媒体动等网页元素。上一页 下一页 返回第51页，共171页。3.2 Dreamweaver 8基本工作环境2.属性面板 属性面板并不是将所有的属性加载在面板上，而是根据用户选择的对象来动态显示对象的属性，属性面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。上一页 下一页 返回第52页，共171页。

33、3.2 Dreamweaver 8基本工作环境3.浮动面板 其他面板可以统称为浮动面板，这些面板都浮动于编辑窗口之外。在初次使用Dreamweave 8的时候，这些面板根据功能被分成了若十组。在窗口菜单中，选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板组、资源面板组和其他面板组。上一页 返回第53页，共171页。3.3 用Dreamweaver 8制作网页3.3.1创建站点及网页 1.规划站点结构 网站是多个网页的集合，其包括一个首页和若十个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何Web站点页面之前，要对站点的结构进行设计和规划。卞要包括决定要创建多少

34、页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的，等等。下一页 返回第54页，共171页。3.3 用Dreamweaver 8制作网页 2.创建站点 在Dreamweave 8中可以有效地建立并管理多个站点。创建站点有两种方法：一是利用向导完成；一是利用高级设定来完成。 在创建站点前，用户可以先在自己的电脑硬盘上新建一个以英文或数字命名的空文件夹作为本地站点使用。上一页 下一页 返回第55页，共171页。3.3 用Dreamweaver 8制作网页 3.搭建站点结构 站点是文件与文件夹的集合，下面我们根据前面对xmWeb网站的设计，来新建xmWeb站点要设置的文件夹和文件。上

35、一页 下一页 返回第56页，共171页。3.3 用Dreamweaver 8制作网页3.3.2设置网页的属性1.页面的总体设置2.设置页面属性(1)设置外观(2)设置链接(3)设置标题上一页 下一页 返回第57页，共171页。3.3 用Dreamweaver 8制作网页3.3.3输人与修饰文本 1.插入文本 要向Dreamweaver文档添加文本，可以直接在Dreamweaver“文档”窗口中输入文本，也可以剪切并粘贴，还可以从Word文档导入文本。 用鼠标在文档编辑窗口的空白区域点一下，窗口中会出现闪动的光标，提示文字的起始位置，将01.rar中的文字素材复制/粘贴进来。上一页 下一页 返回

36、第58页，共171页。3.3 用Dreamweaver 8制作网页 2.编辑文本格式 网页的文本分为段落和标题两种格式。 在文档编辑窗口中选中一段文本，在属性面板“格式”后的下拉列表框中选择“段落”命令，把选中的文本设置成段落格式。 “标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。对应的字体由大到小，同时文字全部加粗。 另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容。上一页 下一页 返回第59页，共171页。3.3 用Dreamweaver 8制作网页3.设置字体组合 Dreamweaver 8预设置的可供选择的字体组合只有6项英文字体组合，要想使用中文字

37、体，必须重新编辑新的字体组合，在“字体”后的下拉列表框中选择“编辑字体列表”命令。上一页 下一页 返回第60页，共171页。3.3 用Dreamweaver 8制作网页 4.文字的其他设置 文本换行，按Enter键换行的行距较大(在代码区生成标签)，按Enter+Shift组合键换行的行间距较小(在代码区生成标签)。上一页 下一页 返回第61页，共171页。3.3 用Dreamweaver 8制作网页3.3.4插入图像1.插入图像2.设置图像属性3.插入其他图像元素上一页 下一页 返回第62页，共171页。3.3 用Dreamweaver 8制作网页3.3.5建立超链接 1.页面之间的超级链接

38、 在网页中，单击某些图片或有画划线、有明示链接的文字就会跳转到相应的网页中去。 (1)在网页中选中要做超级链接的文字或者图片。 (2)在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接，在属性面板中会出现链接文件显示。 (3)按F12键预览网页。在浏览器里光标移到超级链接的地方就会变成手型。上一页 下一页 返回第63页，共171页。3.3 用Dreamweaver 8制作网页 2.邮件地址的超级链接 在网页制作中，还经常看到这样的一些超级链接。单击了这些超级链接后，会弹出邮件发送程序，联系人的地址也己经填写好了。这也是一种超级链接。制作方法是：在编辑状态下

39、，先选定要链接的图片或文字，再插入栏或单击“插入”菜单选择“电子邮件链接”命令，弹出对话框，填入E-Mail地址即可。上一页 下一页 返回第64页，共171页。3.3 用Dreamweaver 8制作网页3.制作图片上的超级链接(1)首先插入图片。(2)属性面板改换为热点面板。(3)保存页面。上一页 下一页 返回第65页，共171页。3.3 用Dreamweaver 8制作网页3.3.6应用表格1.插入并编辑表格(1)插入表格。(2)选择单元格对象。(3)设置表格属性。(4)单元格属性。(5)表格的行和列。(6)拆分与合并单元格。上一页 下一页 返回第66页，共171页。3.3 用Dreamw

40、eaver 8制作网页 2.嵌套表格 表格之中还有表格即是嵌套表格。 网页的排版有时会很复杂，首先，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。上一页 返回第67页，共171页。3.4 网页制作高级功能3.4.1插入和使用层1.创建层 (1)创建普通层 1)插入层 2)拖放层 3)绘制层 (2)创建嵌套层 下一页 返回第68页，共171页。3.4 网页制作高级功能2.设置层的属性

41、“层编号”下拉列表框：给层命名，以便在“层”面板和 JavaScript代码中标识该层。 “左、上”文本框：指定层的左上角相对于页面(如果嵌套，则为父层)左上角的位置。 “宽、高”文本框：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘会延仲以容纳这些内容。 “Z轴”文本框：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。 “可见性”下拉列表框：在“可见性”下拉列表中，设置层的可见性。上一页 下一页 返回第69页，共171页。3.4 网页制作高级功能3.4.2表单的使用 1.关于表单 使用表单，可以帮助Internet服务器从用户那单收集信息，是网站管理者与浏览者之

42、间沟通的桥梁。通常应用表单的是调查表、订单和搜索界面等。例如收集用户资料、获取用户订单，在Internet上也同样存在大量的表单，让用户输入文字进行选择。 一个完整的表单包含两个部分： 一是在网页中进行描述的表单对象； 一是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。上一页 下一页 返回第70页，共171页。3.4 网页制作高级功能2.认识表单对象 (1)表单：在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能准确处理这些数据。 (2)文本域：在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行

43、、多行或者显示为项目符号或星号(用于保护密码)。 (3)复选框：在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。上一页 下一页 返回第71页，共171页。3.4 网页制作高级功能 (4)单选按钮：在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。 (5)单选按钮组：插入共亨同一名称的单选按钮的集合。 (6)列表/菜单：使用户可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选

44、择一个选项。上一页 下一页 返回第72页，共171页。3.4 网页制作高级功能 (7)跳转菜单：插入可导航的列表或弹出式菜单。跳转菜单允许用户插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。 (8)图像域：使用户可以在表单中插入图像。可以使用图像域替换“提交”按钮，以牛成图形化按钮。 (9)文件域：在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。上一页 下一页 返回第73页，共171页。3.4 网页制作高级功能 (10)按钮：在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名

45、称或标签，或者使用预定义的“提交”或“重置”标签之一。 (11)标签：在文档中给表单加上标签，以， 形式开头和结尾。 (12)字段集：在文本中设置文本标签。上一页 下一页 返回第74页，共171页。3.4 网页制作高级功能3.创建表单 (1)插入表单。 (2)给表单添加对象。 (3)表单对象的属性设置。4.表单的应用 一个简单的提交留言页面。新建一网页文件，选择表单插入栏，插入表单，将光标放置在表单内，插入一个5行2列的表格，将第1， 5行合并。分别在第2， 3行插入文本字段，在第4行插入文本区域，在第5行插入两个按钮。上一页 下一页 返回第75页，共171页。3.4 网页制作高级功能3.4.

46、3行为 1.什么是行为 “行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。与行为相关的有3个重要的部分一一对象、事件和动作。上一页 下一页 返回第76页，共171页。3.4 网页制作高级功能2.应用行为(1)行为面板。(2)创建行为。1)打开Ol.html，选中图片。2)单击行为面板上的“+”按钮，打开动作菜单。3)在添加行为时，系统自动为用户选择了事件onClick(单击鼠标)，现在单击“行为”面板上的“事件菜单”按钮，打开事件菜单，重新选择一个触发行为的事件

47、。上一页 下一页 返回第77页，共171页。3.4 网页制作高级功能3.4.4 CSS样式表 1.创建CSS样式(1)选择“窗口” “CSS样式”命令。打开“CSS样式”面板。(2)单击“CSS样式”面板右下角的“新建CSS规则”按钮，弹出“新建CSS规则”对话框。(3)为新建CSS样式输入或选择名称、标记或选择器.(4)在“定义在”区域选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。(5) CSS规则定义”对话框中设置CSS规则定义。上一页 下一页 返回第78页，共171页。3.4 网页制作高级功能2.使用CSS样式美化页面 (1)文本样式的设置。 (2)背景样式的设置。 (3

48、)区块样式设置。 (4)方框样式的设置。 (5)边框样式设置。 (6)列表样式设置。 (7)定位样式设置。 (8)扩展样式的设置。上一页 返回第79页，共171页。图3-2 Dreamweaver 8 的标准工作界面返回第80页，共171页。第4章 JavaScript与DHTML技术4.1 使用客户端脚本4.2 Javascript4.3 DHTML技术第81页，共171页。4.1 使用客户端脚本 客户端程序是利用客户端脚本语言来完成的。脚本语言是介于HTML和Java， Visual Basic以及C+等编程语言之间的一种特殊语言。HTML通常用于设置文本格式和创建链接，而编程语言通常用于

49、向计算机发出一系列复杂的指令。脚本语言也可以向计算机发送指令，但它们的语法和规则没有编译的编程语言那么严格和复杂。脚本语言卞要用于格式化文本和使用编程语言编写的组件。返回第82页，共171页。4.2 Javascript4.2.1 JavaScript语言简介 JavaScript为Netscape Communication Corporation(网景公司)所开发的S cript语言。它提供给该公司的浏览程序产品Netscape Navigator开发h.动网页的功能。JavaScript原名LiveScript，1995年正式发布的Netscape 2.0版本，是目前浏览器最普遍支持的S

50、 cript语言。下一页 返回第83页，共171页。4.2 Javascript4.2.2JavaScript的数据类型 1.字符串数据类型 2.数值数据类型 3.整型值 4.浮点值 5. Boolean数据类型 6. Null数据类型 7. Undefined数据类型上一页 下一页 返回第84页，共171页。4.2 Javascript4.2.3JavaScript的变量1.变量声明2.变量命名3.强制转换上一页 下一页 返回第85页，共171页。4.2 Javascript4.2.4JavaScript的运算符 1.运算符的优先级 JavaScript提供的运算符有很多种，而且在同一个表达

51、式中允许使用多种运算符。为了正确的得到计算结果，表达式以默认的优先顺序进行计算，即所谓的运算符的优先级。上一页 下一页 返回第86页，共171页。4.2 Javascript2.算术运算符 JavaScript的算术运算符拥有常用的数学运算符。大部分的运算元都是数字，不过加法运算还可以链接两个字符串。表4为各种运算符的例子。3.逻辑运算符 逻辑运算符卞要是使用在循环和条件语句的判断条件中，true为真，false为假，比较运算符如表5所示。上一页 下一页 返回第87页，共171页。4.2 Javascript4.位运算符 JavaScript拥有位运算符，能够进行一进制的位运算，可以向左或右移

52、动儿位，也可以通过NOT， AND， XOR不II OR进行位运算，如表6所示。 上一页 下一页 返回第88页，共171页。4.2 Javascript4.2.5JavaScript的控制语句1.使用条件语句 JavaScript支持if和if.else条件语句。在if语句中将测试一个条件，如果该条件满足测试，执行相关的JavaScript编码。在if.else语句中，如果条件不满足测试，则将执行不同的代码。最简单的if语句格式可以在一行中写完，不过更常见的是多行的if和iif.else语句。上一页 下一页 返回第89页，共171页。4.2 Javascript 2.条件运算符 JavaScr

53、ipt也支持隐式的条件格式。该格式在要测试的条件后使用一个问号(而不是在条件前的if)。它也指定两个可选项，一个在满足条件时使用，另一个在不满足条件时使用。这两个选择项之间必须用一个冒号隔开。上一页 下一页 返回第90页，共171页。4.2 Javascript3.使用循环 有多种方式来重复执行一条语句或语句块。通常重复执行被称为循环或重复。重复只是循环的一个运行。典型情况是用一个变量测试来进行控制，每执行一次循环变量的取值都会更改。JavaScript支持4种循环：for循环、for. in循环、whil e循环、do.while循环。上一页 下一页 返回第91页，共171页。4.2 Jav

54、ascript 4.使用for循环 for语句指定了一个计数器变量，一个测试条件，以及更新该计数器的操作。在每次循环的重复之前，都将测试该条件。如果测试成功，将运行循环中的代码。如果测试不成功，不运行循环中的代码，程序继续运行紧跟在循环后的第一行代码。在执行该循环后，计算机变量将在下一次循环之前被更新。上一页 下一页 返回第92页，共171页。4.2 Javascript5.使用forin循环 JavaScript提供了一种特别的循环方式来编译一个对象的所有用户定义的属性或者一个数组的所有元素。for.in循环中的循环计数器是一个字符串，而不是数字。它包含当前属性的名称或者当前数组元素的下标。

55、上一页 下一页 返回第93页，共171页。4.2 Javascript6.使用while循环 while循环相似于for循环。其不同之处是while循环没有内置的计数器或更新表达式。如果希望控制语句或语句块的循环执行，需要不只是“运行该代码n次”，而是更复杂的规则，用while循环。下面的示例使用Internet浏览器对象模型和while循环来询问用户一个简单的问题。上一页 下一页 返回第94页，共171页。4.2 Javascript7.使用break和continue语句 在JavaScript中当某些条件得到满足时，用break语句来中断一个循环的运行(请注意，也用break语句退出一个

56、switch)。如果是一个for或者for. in循环，在更新计数器变量时使用continue语句越过余下的代码块而直接跳到下一个循环中。上一页 下一页 返回第95页，共171页。4.2 Javascript4.2.6JavaScript的函数 1.内部函数 JavaScript语言包含很多内部函数。某些函数可以操作表达式和特殊字符，而其他函数将字符串转换为数值。例如evalU，该函数可以对以字符串形式表示的任意有效的JavaScript代码求值。eval()函数有一个参数，该参数就是想要求值的代码。下面给出一个使用本函数的示例。 2.创建自己的函数 在必要的时候，可以创建并使用自己的函数。一

57、个函数的定义中包含了一个函数语句和一个JavaScript语句块。下面示例中的integerCheck函数以三角形的边长(整数)为参数，通过查看二条边的长度来测试是否可以组成一个直角三角形。上一页 下一页 返回第96页，共171页。4.2 Javascript4.2.7 JavaScript的对象 JavaScript对象是属性和方法的集合。一个方法就是一个函数，是对象的成员。属性是一个值或一组值(以数组或对象的形式)，是对象的成员。JavaS cript支持4种类型的对象：内部对象、自定义对象、宿卞给出的对象(如浏览器中的Windows和Document)以及ActiveX对象(外部组件)。

58、上一页 下一页 返回第97页，共171页。4.2 Javascript4.2.8JavaScript的事件1. HTML属性：在HTML标记的属性中设置JavaScript的事件处理函数2. JavaScript属性：在对象的属性中设置JavaScript的事件处理上一页 返回第98页，共171页。4.3 DHTML技术4.3.1什么是DHTML技术 DHTML ，即动态HTML，是Dynamic HTML的缩写，DHTML通过传统的HTML语言，利用层叠样式表(Cascading Style Sheets CSS)，并依靠JavaScript使一向静止不变的页面得以“动”起来。Netscap

59、e 4.0和 IE 4.0/5.0版本支持DHTML， DHTML是一种完全“客户端”技术，直接通过Web页面实现页面与用户之间的交互性。下一页 返回第99页，共171页。4.3 DHTML技术4.3.2 DHTML的应用 自从HTML 4.0出现以后，引入了“层叠样式表”，于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计，并目使网页具有交互性。其实动态HTML(DHTML)并不是一种专门的技术，而是HTML技术的一个综合，其实就是一种技巧，但往往是这样或那样的小技巧使网页变得更加好看、实用。下面开始以实例来说明动态HTML在网页设计中的应用。上一页 返回第100页，共171页。表

60、4 算术运算符返回第101页，共171页。表5 逻辑运算符返回第102页，共171页。表6 位运算符返回第103页，共171页。第5章 用Dreamweaver制作动态网页5.1 插入动画5.2 创建和使用层叠样式表5.3 加入各种JavaScript特效第104页，共171页。5.1 插入动画5.1.1插入Flash动画1.插入Flash动画的基本方法 将光标放置在表格任意单元格中，单击常用快捷工具栏中的“媒体”按钮，然后在弹出的列表中选择Flash命令。2.插入Flash实例下一页 返回第105页，共171页。5.1 插入动画5.1.2用时间轴创建层动画(1)新建网页文件(2)插入层对象(