全套电子课件：网页设计与制作-第六套

1、第1章 Internet简介 Internet中文译为因特网，专指全球最大的、开放的、由众多网络互联而成的主要采用TCP/IP协议的电脑网络。 一、Internet是一种网络结构 二、Internet的应用 可以这样认为，凡是采用TCP/IP（传输控制协议/网际协议）协议并能够与Internet上的任何一台电脑进行通信的电脑都可以看成是Internet的一部分。二、Internet的应用从信息资源的角度讲，Internet是全球范围内最大的资源（信息）库。它的产生正是为了信息共享和信息交流而发展起来的。 Internet的作用是越来越大，它已经走进人们日常生活的方方面面。如：E-mail电子邮

2、件、文件传输、网络新闻、信息查询、网上购物等等。 1. 娱乐。Internet网络上充满了娱乐性的项目，例如网络游戏、视频点播、音乐歌曲点播、笑话幽默、体育报道、网上交友、网上旅游等等。例如：是一个综合信息网,其中充满了娱乐性信息。 二、Internet的应用2. 网上报纸杂志。现在已有越来越多的报社和杂志社走进Internet，分别组建了自己的网站，通过网页向读者展示信息。如：人民网的网址/。 3.综合信息网。雅虎网 ;新浪网搜狐网第2章 HTML基础 HTML（Hypertext Marked Language，超文本标记语言）是一种用来生成WWW网页的脚本语言。2.1 HTML简介 2.

3、2 一个简单的HTML程序的编写 2.3 多种标记使用 2.4 列表使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。它是一种非常简单的页面描述语言，并不是为了能够做事情提供给电脑命令，而是强调如何以最快最容易的方式在网页中展示信息。使用HTML在制作网页方面是通过使用各种标记来实现的。总结其特点 ： 通过HTML可以显示丰富多彩的各种信息。2.1 HTML简介一、HTML特点 通过HTML可以实现页面之间的跳转链接。 通过HTML可以展现多媒体的效果。 例如图片调用： 文字格式设置：文字例如页面跳转：A HREF=“文件路径/文件名”链接文字例如声音播放： 视频播放：用HTML编写

4、超文本文件的脚本程序，其结构分为文件头和文件体两部分。 例如一个完整结构的HTML脚本程序文件，2_2_1.htm如下：二、HTML基本框架 头部信息文档主体， 正文部分和为HTML脚本程序的标记和为HTML脚本程序的文件头标记和为HTML脚本程序的文件体标记案例 设计一个特定格式的页面 2. 文件头部分：一个简单的HTML示例1. 程序基本结构；制作步骤标题栏显示文字标记实例效果3. 主体部分：欢迎您的光临只要你努力，一定能够做好！4. 标记中可以使用一些属性设置。例如：与为标题显示标记。其中的文字用第3号标题字格式显示出来。 强制换行标记。标记不管放在什么位置，都能够强制换行。 水平线标记

5、，在网页上画用于分割文档的一条水平直线。 标记的作用是定义一个需要被显示文字的字体大小,颜色等HTML元素。这里是定义文字大小Size=2。 标记中加入bgcolor属性，设置浏览器页面的背景色设为红色。2.3 多种标记使用 使用HTML进行网页设计的过程中，涉及到网页页面的布局，各种文字及颜色，显示格式的控制等等。案例 网页文字信息设计实例效果2. 编写头文件部分：字体样式1. 程序的基本结构。 3. 编写文件的主体部分：HTML基本概念制作步骤为段落标记。文字段落的开始由来标记，段落的结束由来标记。 与为黑体字标记，在标记之间的文字被设置为以黑体显示出来。与为下划线字标记，在标记之间的文字

6、被设置为带下划线显示出来。4. 第1、2段文字显示代码为： HTML（Hypertext Marked Language，超文本标记语言）是一种用来制作超文本文档的简单标记语言。 用HTML编写的文档称为HTML文档，它能独立于各种操作系统平台 5. 第3段文字显示代码为： 自1990年以来HTML就一直被用作World Wide Web 的信息表示语言 标签还有一个属性ALING，它用来指明字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。 标记为斜体文字格式。6. 剩下两段文字显示代码为：用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息使

7、用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 列表用于列举事实，常用的清单有3种格式： 即无序清单(unordered List)， 有序清单(ordered list) 定义清单(definition list)。 1. 程序的基本结构 2.4 列表 一、案例 应用无序号列表显示文字信息制作步骤制作步骤2. 编写头文件部分，在头文件标记之间程序； 无序列表 3. 编写文件的主体部分；这是一个无序列表：我国的四大名著是：三国演义红楼梦水浒传西游记和为一对无序列表标记每个列表项前使用 标记4. 保存文件并浏览二、案例 应用有序号列表显示文字信息 2.4 列表 制作步骤1. 编写程序

8、的基本结构和头文件部分；2. 编写文件的主体部分：这是一个有序列表： 我国的四大名著是： 三国演义 红楼梦 水浒传 西游记有序列表其中为有序列表标记每个列表项前使用 标记3. 保存文件并浏览 Dreamweaver MX 是由Macromedia公司开发的一款专业网站设计工具，用于网站网页的设计、编码和管理。它既便于手工编写 HTML 代码，又可在可视化编辑环境中完成创作。它是目前最常用的网站与网页开发环境。在接触软件之前，有必要先了解关于网站和网页构成、内容设计和编排等基本知识。 第3章 网站规划设计和Dreamweaver MX简介只有网站的前期设计完成了，才能进入制作阶段。当然，学习制作

9、技术之前也要清楚网站与网页应如何进行策划。 首先应从整体上对网站建设进行策划，这是一个网站的立足之本。明确自身的定位，具体内容包括网站用户定位，功能定位，网站自身特色的定位。 网站内容设计对于网站建设至关重要，包括：网站内容的组织的总体结构要层次分明。 文字信息可提供较快的浏览速度。而图像、声音和视频信息会产生强大的吸引力。网站主页是非常重要的，内容的适用性和组织的合理性。网站内容应是动态的，随时进行修改和更新。网页中的文本内容应简明、通俗、易懂。 3.1 网站内容的确定与组织首页的设计是一个网站成功与否的关键。 确定首页功能模块：网站名称(logo)广告条(banner)主菜单(menu)新

10、闻(whats new)搜索(search)友情链接(links)邮件列表(maillist)计数器(count)版权(copyright) 3.3 网页设计的构思设计首页的版面：画面正常平衡，亦称匀称。指左右、上下对照对比能达到均衡的效果。 异常平衡，即非对照形式。让画面布局能达到强调特别信息，引起用户高度关注的效果。对比。利用色彩、色调等技巧来作表现。尽量用图片做解说。对不能用语言说服、或用语言难以表达的信息，特别适合图片解说，可以传达给用户的更多的心理因素。 3.3 网页设计的构思彩色的搭配使色彩千变万化：网页的背景、文字、图标、边框和超级链接等，应该采用什么样的色彩，应该搭配什么色彩才

11、能最好的表达出预想的内涵 。页面内容设计 :页面内容设计, 要表达的是一定意图和要求，在页面的环境中为人们所理解和接受。因此，在页面设计时要注意画面内容的简洁性、一致性和好的对比度。以及页面信息的编排。3.3 网页设计的构思 Macromedia Dreamweaver MX 是由Macromedia公司开发的一款专业网站设计工具，用于网站网页的设计、编码和管理。它既可便于手工编写 HTML 代码，又可在可视化编辑环境中工作完成创作。 一、选择工作区布局 Dreamweaver MX工作区；Dreamweaver 4工作区。3.4 Dreamweaver MX简介 二、Dreamweaver

12、MX 工作区窗口 文档编辑窗口；文档工具栏；插入栏和插入选项；属性面板和面板组。 1.文档编辑窗口与文档工具栏 文档编辑窗口，也称文档编辑区。用于编辑或显示当前页的文档内容。通常可以根据所要编辑内容和需要，可以与文档工具栏配合使用选择某一视图。 3.4 Dreamweaver MX简介 Show Code View代码视图显示；Show Code and Design Views代码和设计视图显示；Show Design View设计视图显示；Live Data View动态数据视图显示；Title文本框，输入所设计文档的标题；File Management文件管理；Preview/Debug

13、 in Browser在浏览器中浏览/编译；Reference代码参考；代码导航；View Options。文档工具栏实际是菜单命命令的常用快捷按钮： 2. 插入栏和插入选项 插入栏包含用于创建和插入对象（如表格、层和图像）的按钮，这些按钮被组织到选项卡中。 3.4 Dreamweaver MX简介 三、面板组和属性检查器Commen常用、Layout布局、Test文本、Tables表、Frames框架、Forms表格、Templates模板、Characters 面板组面板组是组合在一个标题下面的相关面板的集合。在窗口的右侧 ，通过菜单中窗口项选择是否显示。2. 属性检查器属性检查器用于检查

14、和编辑当前选定页面元素（如文本和插入 的对象）的属性。 站点建好后，所有和本网站相关的资源都可以保存在以该文件夹核心的相关文件夹内，以便对站点的资源文件进行规划和组织。 第4章 站点的创建与管理 4.1 创建本地站点 站点是网站资源的存放场所，一个站点需要一个根目录，来保存资源。 称为站点根目录，其实它就是一个文件夹。 一个网站要进行良好的信息组织，在技术上取决于整个站点的文件规划和组织。创建站点是建设网站的第一步。建立一个本地站点，实质上就是在本地计算机的硬盘上建立一个文件夹 。制作要求 ：创建一个名为“深房小区”的本地站点。站点根目录设在“D:MyWeb”。 案例 创建本地站点制作步骤：1

15、选择菜单站点 / 新建站点命令 ，输入名称。2. 在接下来的选项中选择否 。3. 在新对话框中给出站点根目录，即选择一个文件夹 。然后再选定无服务器项。 定义站点之后，可以对站点进行管理，如修改站点参数、复制站点和删除站点等。 4.2 站点的管理 案例 编辑站点 制作要求：利用Dreamweaver MX的站点编辑工具对站点进行管理维护。包括编辑站点，删除站点，复制站点等。 制作步骤 ：1选择主菜单站点/编辑站点。 2 在对话框中，可以根据需要选择不同的选项。 前面已经建好了一个站点。接下来的任务就是开始制作一个个网页了。第5章 制作一个新网页 制作一个新网页包括文字、图片、动画和影像等元素的

16、使用。学会如何插入和编排这些元素，为后续的网页制作打下基础。真正进行网页制作的第一步就是新建一个网页。而文字是网页的最基本元素，也是网页的灵魂。 5.1 网页创建与文字输入制作步骤：1新建网页 制作要求：首先创建一个新网页，然后在网页中直接输入一些文字和从其它文件中粘贴一段文字。 两种方法：菜单文件中生成静态网页从模板中生成案例 新建网页并输入文字2输入文字 5.1 网页创建与文字输入3保存网页 直接输入文字。若要另起一个段落，则按回车键。如果只想换行，按Shift+Enter组合键。4预览网页 按F12键可在浏览器中预览网页效果 编辑浏览器列表如果想输入空格，必须在中文全角状态下。也可从其它

17、文件中粘贴文字。5.2 文字属性设置 文字是构成网站的最基本的信息资源，除了准备好适当的文字内容以外，对文字修饰也是增加网站吸引力的重要环节，文字效果好能给人赏心悦目的感觉。学习如何对文字的属性进行设置。 案例 文字属性的设置 制作要求本例要求对第一行文字设置为Heading2格式，第二行文字设为方正舒体，第三行文字设置为黑体，第四行文字设为楷体，最后三行文字设为5号字，所有文字颜色为蓝色。5.2 文字属性设置 制作步骤 设置文字标题 选中文字：小区焦点，单击属性面板中的格式选择框，在弹出的下拉菜单中选择Heading2。 设置文字字体首先选中要设置的文字，单击属性面板中的字体选择框，在弹出的

18、下拉菜单中选择相应字体。 如果字体选择框中没有合适的字体，那么可选择Edit Font List编辑字体列表，添加字体。 设置文字字号选中文字，然后单击属性面板上Size大小下拉框选择。单击调色板设置颜色。 5.3 文字排列方法 文字的排列对网页起到了美化的作用 案例 文字段落设置制作要求 :设置文字为居中对齐，增加项目符号，设置段落缩进。 制作步骤1打开网页 2设置居中/左右对齐 4设置段落缩进 3设置项目符号5.4 图片的插入与设置 图片也是网页中普遍使用的元素。可以说，没有图片的网页是不可想象的。 制作要求 :要求图片插在文字“小区焦点”的左边，在图片外面加一个框，图片大小设为宽59像素

19、，高121像素，图片与文字的水平距离为35像素，最后给网页加一张背景图像。 制作步骤1插入图片 2设置设置图片属性 3设置页面背景图象 学会插入一张图片，并设置某些基本属性，如图片大小、加框、文字说明等，并且给网页增加背景图像。案例 插入图片并设置属性 5.5 文字与图片混排 插入图片以后，如何摆放它们就成了一个重要问题。特别是与文字一起排列，排列合理可以增加网页的美观效果。 制作要求 :把图片设置成右对齐，即图片在文字的右面。 制作步骤1在文字中插入图片2设置排列方式 ，左右对齐可以有多行文字。学会进行图文混排 。案例 文字与图片的混排效果 5.6 动画与影像的使用 在网页中含有动画和多媒体

20、影像是经常碰到的，制作一个充满动感的网页也是大家所追求的。 制作要求 :在网页中插入一个Flash动画和一段影像。 制作步骤1将鼠标定位在想插入的地方 2单击动画插入工具和插件工具插入文件并设置其属性。学习在网页中插入Flash动画、影像和声音。 案例 插入动画和影像 3.保存文件，然后按F12，可看到播放效果。 超级链接一般分为内部链接、外部链接、锚点链接、电子邮件链接以及其它的一些链接方式，如图像映射和翻转图等。 第6章 神通广大的超级链接6.1 内部链接内部链接是指链接到网站内部的页面，就是在同一个站点内的不同页面之间建立一定的相互关系。 该类型的超级链接是使用最为广泛的链接。 超级链接

21、是开发网站的基本基本技术，超级链接能将千千万万个网页组织成一个个的网站，它是Web的灵魂。 在Dreamweaver MX中，不仅可以用文字制作成超级链接，还可以用图片制作成超级链接。链接的对象不仅是网页，还可以是多媒体文件、E-mail以及其它网站等。 制作要求 ： 当用户单击“保护地板5大原则”时，链接到一个内部网页。案例 制作一个带有内部链接的网页制作步骤1打开或制作所要链接的页面文件，选中用于链接的文字“保护地板五大原则”。 2.在属性面板中单击Link旁边的按钮，选择超级链接要指向的文件名。3. 当网页尚未保存时，属性面板的Link框中显示的是以“file:/”开头的绝对路径，当保存

22、文件后，则显示的是相对于文档所在目录（网站）的相对路径。网页效果内部链接是最常用的链接方式，制作很简单，只需将某个文字、词语或某幅图像与其它网页的地址联系在一起即可。 网页常常建立与外部网站的链接。如很多网站都有的“友情链接”，就是应用了外部链接。6.2 外部链接案例 创建与其它网站的链接 制作要求：在上一案例基础上增加一个“友情链接”的外部链接，当用户单击“友情链接”时，链接到一个外部网站。制作步骤1输入“友情链接”文字，然后选中它。 2在属性面板中的Link框中输入一个要链接到的外部网址。如：。注意：不能省略“http:/”,否则浏览时会出现“该页无法显示”的提示信息。 很多网站中经常有与

23、网站作者联系的电子邮件地址，当浏览者单击电子邮件地址时，系统会启动电子邮件程序，这就是电子邮件链接。 案例 创建一个电子邮件链接 6.3 电子邮件链接制作要求：在上例中加入“与我联系”，创建电子邮件链接。 制作步骤1.将光标定位到要插入电子邮件链接的位置。 2.选择主菜单Insert / Email Link，弹出对话框。在Text框中输入 “与我们联系”，在E-mail文本框中输入电子邮件地址。 注意：电子邮件地址一定要符合格式要求。 我们经常碰到这样的情况：在同一网页中实现超级链接。当某链接项时，网页自动跳到该项的详细内容上。这就是锚点链接的作用。对于包含了大量文字的网页来说，锚点链接是非

24、常实用的。 6.4 锚点链接1.在网页中编辑文字内容 制作要求：在网页顶部有几部小说的名字，当用户单击某部小说时，网页立刻显示在本页中有关小说的详细内容。.在文档窗口中，将光标放在要插入锚点的位置，即小说的详细内容处。3.选择主菜单Insert/ Named Anchor，弹出对话框。在对话框中输入锚点名字。名字可以任取，但最好不要中文。 4.然后选中网页顶部的小说名，在属性面板中的Link框中输入“#“号和锚点名。 案例 制作锚 点链接 显示在网页锚点链接的效果。制作步骤6.5 图像映射 我们在前面谈到，整幅图片可以制成超级链接。不仅如此，还可以把一幅图片的不同区域做成不同的超级链接。比如一

25、张旅游地图，当单击不同地区，会跳转到不同的介绍该地区情况的网页。这就是图像映射，图片上可单击的区域叫Hotspot热区。案例 使用图像映射 制作要求：把一幅地图图片上的“上海，北京，广东”三个区域分别设置成热区，使得当用户单击这些地区时，能跳转到不同网页。制作步骤 在网页中插入地图并选中地图图像。2.单击属性面板的热区工具，在相应区域绘制。 3. 分别选中“北京”和“广东”热区，设置成不同的超级链接。6.6 翻转图 翻转图是指当鼠标指向一幅图片上时，该图片变成了另外一幅图，移走鼠标，又恢复原来的图像，单击鼠标时，会跳转到另一个网页。 这就是所谓的翻转图。 案例 制作翻转图广告 制作要求网页中显

26、示一幅图，当鼠标指向该图片时，它变成另外一幅图片，移走鼠标，又恢复原来的图片。单击该图片，链接到网页home.htm。6.6 翻转图制作步骤 1.插入翻转图。将鼠标指针放到要插入翻转图的位置单击，选择菜单Insert / Interactive Image / Rollover Image，在弹出对话框内进行设置。 2.保存网页，按F12，可预览效果。 为了在页面中显示一些动态效果，翻转图是一种很好的形式。它简单、实用。在制作时要注意原图与变换图不要搞错，超级链接设置与前面介绍的内、外部超级链接一样。 第7章 巧用表格表格是整个网页设计的精华。它不但具有输入数据和进行分类列表的功能，而且还有更

27、重要的作用页面布局。既可以用于页面设计和排版。 也用于控制文本和图像在页面上的位置。 本章将主要学会表格的创建、在表格中插入页面元素、表格属性设置和表格管理，最后学习表格的使用技巧，如制作导航条、利用表格定位页面元素等。 7.1 表格的插入与设置制作步骤1表格插入。将鼠标放到网页中要插入的位置，有两种方法插入表格。2选定表格。可以一次选定全部表格或者是一行、一列或几个单元格。然后进行对齐、边框颜色的背景颜色等属性设置。 3. 在表格中添加内容：可以插入文本、图片等页面元素。 案例 插入表格并设置其属性通过设置表格或单元格的属性，我们可以改变表格的外观。 示例效果制作要求 ：在页面中插入一个3行

28、3列的表格，对表格属性进行设置，第一行设置为标题，表格有1像素宽的边框，表格背景颜色为淡蓝色，表格中的数据居中对齐。在插入面板中的常用选项卡中单击表格按钮，显示出表格对话框。选择菜单插入/表格命令 ，显示出表格对话框。选定整个表格：单击表格左上角或右边框或底边框。选定一行或一列：将鼠标置于一行的左边框上，或置于一列的上边框上，当出现黑箭头时单击即可。7.2 表格的管理案例 使用不规则表格 制作要求：在在页面中插入一个3行4列的表格，然后进行插入一行，删除一列操作，最后进行合并、拆分单元格。 制作步骤1.插入一个3行4列的表格。 2. 增加或删除表格的行、列。 3. 拆分、合并单元格 。插入一个

29、表格后，有时经常要在表格中插入一行或一列，或者删除行和列，还有合并单元格等，这就涉及到表格的编辑管理。示例效果在需要插入新行（列）的单元格中单击。如要插入一行，则选择菜单 修改/表格/插入行（或列）。如要插入多行或列，则选择菜单修改 /表格/插入行或列。选中想要合并的单元格 ，则选择菜单修改 /表格/合并单元格。选中单元格，选择菜单修改 /表格/拆分单元格。7.3 使用表格模板制作要求：在网页中插入一个表格后，对该表格使用表格模板进行格式化，设置其外观。 制作步骤1.在网页中插入一个表格 。 2.选中表格，选择菜单命令/格式化表格，在对话框中选择其中一种。 3. 输入要求内容。系统提供了很多预

30、设的表格模板，提供给设计者以便提高表格格式化的水准和效率。可以直接套用即可 。 案例应用表格模板 示例效果 导航条是网页制作中经常用到的，本节学习利用表格来制作导航条。 7.4 表格的妙用 1.在网页中插入表格，并进行参数设置。 制作要求：在网页顶部有一导航条，当用户单击不同的栏目时，能链接到不同的网页。.在表格单元格内插入内容。这里是插入一些图片 。3.在属性面板上设置表格对齐方式为居中对齐。 4.对每个图片设置内部超级链接。案例使用表格技术制作导航条 制作步骤示例效果7.4 表格的妙用前面学习了表格技术，学会了表格的创建、在表格中插入页面元素、表格属性设置和表格管理，最后学习表格的使用技巧

31、，如制作导航条、利用表格定位页面元素进行网页布局设计等。在利用表格进行网页布局时，一定要将其属性中的边框置设为0，有时也要设置间距值。第8章 Frame框架页面的创建框架Frame是设计页面布局的技术。 其实框架的每一部分都是一个正常的网页页面。 它是把浏览器窗口划分成若干个区域，每个区域用于显示不同的网页文件。 本章将主要学习应用Dreamweaver MX预定义的13种框架集创建框架页面的方法，设计者自己创建框架页面。 8.1 框架介绍 浏览器窗口分成了三个部分： 在一般的框架页面中，有一个页面是用来放置导航条，另外页面是用来显示相应网页内容。 当单击左边导航条的栏目，在右边就会显示该栏目

32、的相关页面详细内容。示例效果右边部分是用来显示网站的主要内容。 顶部部分用来显示网站的标题； 左边部分是用来显示网站的导航条； 8.2 创建框架页面 案例 创建一个框架页面 制作要求：利用系统预定义的13种框架集，创建一个三页面的框架集。不过需要注意的是，我们只能在Design View设计视图模式下插入预定义的框架集。制作步骤1.在一个网页中插入一个顶部和嵌套的左侧框架。 2.修改框架或框架集 。这要通过页面上框架边框或Frames框架面板进行选择。 3. 保存框架集文件 。选择菜单File文件/Save All保存全部命令，最先是框架集文件，然后是主画面文件和其它。 Dreamweaver

33、 MX为我们提供了两种创建框架页面的方法：一种是使用系统预定义的框架集，另一种是由设计者自己创建。 示例效果选择Insert 插入栏的Frames选项卡中的某个框架集，则页面显示该图示 。如要修改各框架的大小，将鼠标指到框架边框线上拖动，就可以轻松地调整各个框架的大小 。若修改框架大小，选中框架的边框就会出现带点线的轮廓线，拖动鼠标即可。 设置框架属性。选择菜单Window窗口/Others其它/Frames 框架命令，打开Frames面板。选中某部分，即可设置其属性 。框架集文件Frameset.htm，是用来定义页面显示的框架数、框架的大小、载入框架的源文件，以及其它的属性信息。 其它框架

34、被保存时，页面中相应部分会有明显显示样子，并依次进行保存即可 。8.3 总结具体方法如下 1.新建一个HTML网页，为了使框架边框在文档中可见，选择View查看/Visual Aids可视化助理 /Frame Borders框架边框命令，然后插入框架集其边框方可见 。 2.选择菜单Insert插入 / Frame框架，插入框架即可。注意：如果要删除某个框架，只须将该框架的边框拖曳到父框架的边框上即可。 应用Dreamweaver MX预定义的13种框架集创建框架是很方便的一件事情。这里学习另外一种创建框架页面的方法，设计者自己创建框架页面。3. 选择菜单Modify修改/Frameset框架页

35、中的子命令，可对框架不断进行左、右、上、下拆分。 第9章 层及其妙用层是一种新的网页元素定位技术 。 使用层可以以像素为单位精确定位页面元素 。 而且层可以放置在页面的任意位置。 把页面元素放入层中，可以控制哪个显示在前面，哪个显示在后面，哪个显示，哪个隐藏。配合时间轴的使用，可同时移动一个或多个层，轻松制作出动态效果！案例 在页面中使用层 制作要求：页面是由两张图片和一段文字组成的。将它们分别放在不同的图层中，且使图层之间有相互重叠，将文字放在图层内且放置在图片图层的上面。制作步骤1.创建层 。创建层有以下几种方法。2. 插入第二layer2 、三个层layer3。 3.设置层的可见性、层的

36、名称、层的Z 指数 。 在网页中使用层来实现其特有效果。 示例效果9.1 带有图层的网页 案例 制作可拖动的层 制作要求：本例中汽车图片放在一个层中，浏览者在浏览网页时可以拖动图片到窗口的任何位置。制作步骤1.在网页中插入层 。2.为层添加拖动行为动作 。打开Behavior行为面板，单击面板上的“+”按钮，选择Drag layer 3. 按F12键预览网页 。 在网页上常常会见到一些小的广告条，这些广告条可以是文字、图片，也可以是动画或小型的游戏等。它们可以通过鼠标拖动来改变在网页中的位置。这里涉及使用层的技术。 示例效果9.2 通过描绘层可制作拖动层 9.3 能飞的鸟网页上经常能看到一些飞

37、翔的鸟或奔跑的动物，在网页中移动 。案例 能够飞行的小鸟 制作要求：选择一个GIF格式的动画，我们这里是一只鸟，利用层和时间线的功能，可以制作一只逼真的鸟在网页中飞翔的效果 。制作步骤1.在网页中插入层，然后在其中插入gif动画图像。2. 添加Timelines（时间线） 。3. 在Timelines时间线中创建动画的两个关键帧 。 示例效果选择菜单Window/ Other /Timelines选项，打开Timelines工具栏。拖动页面中的层将其拖动到Timelines中的第一个通道 ，随之出现紫色条，并在两端有两个小圆圈，这两个小圆圈代表Timelines的两个关键帧 。关键帧是指动画条

38、中某个对象指定了位置的帧，关键帧在创建Timelines动画的过程中非常重要。 4. 设置动画的起、止位置。 单击Timelines中左边第个小圆圈，可看见红色位置标记移动到第帧。然后在页面编辑窗口中将层移动到页面的最左端，即动画的起点位置。 接下来单击Timelines中紫色条右侧末尾的关键帧小圆圈，将看见红色位置标移动到最后帧，然后在页面编辑窗口中将层拖动至页面的最右端，即动画的终点位置。 5. 增加动画帧数和添加关键帧。拖动时间线动画条的最末帧标记，将Timeline增加到60帧。与动画播放速度有关。 将红色的位置标记移动到需要添加关键帧的地方，按住Ctrl键，此时鼠标指针变成一个小白圆

39、圈，将这个小白圆圈在位置标记处单击，即可添加一个关键帧。 9.3 能飞的鸟制作步骤6.设置动画路径为曲线。7. 添加鸟飞回的动画 。总结：如果页面有许多动作，可以创建个Timelines时间线来控制所有的动作。但是这样做很不方便，实际上可以通过创建多个Timeline的方法来控制多个动作。使用这种方法可以将些复杂的动作分解，这样控制起来就更加方便了。在这个案例中，我们通过两个Timline来控制鸟飞翔的动作。利用层，结合时间线和行为动作可以创建很多特别的效果。 选中所添加的某个关键帧，然后按住Ctrl键在页面中拖动层图像上或下移，即可见到路径变成曲线。 在页面中再插入另个层并插入一幅反向飞的鸟

40、图像，并将该图层拖动到时间线的通道2上，方法同前制作相反方向动画。9.4 动态下拉菜单学习在网页中创建动态下拉菜单，就象WINDOWS窗口的菜单一样，当鼠标单击或鼠标放在主菜单上时，就显示下拉菜单来。 案例 制作下拉菜单 制作要求：本例在网页中单击新闻、体育、科技时，显示动态下拉菜单。（自己完成当选择其中的选项时，链接到新的网页信息。）制作步骤1.在页面的上方插入一个层layer1, 并在层layer1中插入一个一行四列的表格，然后在表格中添加主菜单文字。2.在页面中插入图层layer2 ，将其放在第一个主菜单的下面，在层中插入一行一列的表格，并在表格中输入相应的子菜单文字，然后设置其显示属性

41、为隐藏。 3.添加行为动作 。示例效果其原理是利用层的显示和隐藏动作。 先选中主菜单中的文字如“新闻”，打开行为面板，单击“+”添加“Show-Hide Layers”行为，在弹出的窗口中，选中layer2，单击Show按钮。9.4 动态下拉菜单制作步骤4.在事件选项选择onClick，表示当鼠标单击主菜单文字时，弹出层layer2。 5.选中层layer2，设置其为hide隐藏。并在事件选项中选择onMouseout，表示当鼠标离开层layer2时，就隐藏层layer2。 6. 同样添加其它菜单。 总结：利用层的隐藏和显示属性，实现动态菜单是一件容易的事情。我们还可将触发的事件换为onMou

42、seover或其它的事件，如果事件为onMouseover时，表示当鼠标放在主菜单上时，就会显示出层（即子菜单）。 第10章 行为行为是Dreamweaver MX中最为激动人心的一部分 。 所谓添加行为就是使用所见即所得的方式来添加一些已经封装好JavaScript 脚本程序的常用功能 。 一个行为是由一个事件和一个动作构成的。 我们可在Behavors 行为面板中找到这些由封装好的JavaScript代码完成的功能选项。 显示行为面板这里详细介绍各个选项所对应的动作和行为面板中的各个事件。操作步骤1.单击选择菜单窗 口/行为。2. 在弹出的行为中选择+按钮，则会显示选项。 3.在诸多选项中

43、选择显示事件/IE6.0 。 在Dreamweaver MX中，所有的行为都集中在Behaviors行为面板上 。示例效果10.1 行为面板介绍 4.此时再次单击+按钮，则原来灰掉的选项现在显示出来了。 案例 为网页增加声音制作要求：通过Play Sound 播放声音行为，不用写代码，实现在浏览网页时播放声音的效果。制作步骤1.准备声音文件(mid、wav、ra、rm)并新建网页 。2.设置播放声音动作 。打开Behavior行为面板，单击面板上的“+”按钮，选择播放声音。 3. 修改事件为onLoad ，浏览该页面即可听到声音。 若为背景音乐则添加参数hidden为true。在网页中加入适当

44、的音乐，会极大地增强页面的效果，给人以耳目一新的感觉。示例效果10.2 播放声音 10.3 弹出消息窗口有些网站，一进入首页或某个页面立刻弹出一个消息窗口 。通常在这样的窗口里会显示一些注意事项、警告、公告等提示信息。 案例 制作弹出式消息窗口 制作要求：一进入首页或某个页面立刻弹出一个消息窗口，显示 夜深人静，小心火制作步骤1.在网页中插入层，然后在其中插入gif动画图像。2. 添加Timelines（时间线） 。3. 在Timelines时间线中创建动画的两个关键帧 。 示例效果选择菜单Window/ Other /Timelines选项，打开Timelines工具栏。拖动页面中的层将其拖

45、动到Timelines中的第一个通道 ，随之出现紫色条，并在两端有两个小圆圈，这两个小圆圈代表Timelines的两个关键帧 。关键帧是指动画条中某个对象指定了位置的帧，关键帧在创建Timelines动画的过程中非常重要。 4. 设置动画的起、止位置。 单击Timelines中左边第个小圆圈，可看见红色位置标记移动到第帧。然后在页面编辑窗口中将层移动到页面的最左端，即动画的起点位置。 接下来单击Timelines中紫色条右侧末尾的关键帧小圆圈，将看见红色位置标移动到最后帧，然后在页面编辑窗口中将层拖动至页面的最右端，即动画的终点位置。 5. 增加动画帧数和添加关键帧。拖动时间线动画条的最末帧标

46、记，将Timeline增加到60帧。与动画播放速度有关。 将红色的位置标记移动到需要添加关键帧的地方，按住Ctrl键，此时鼠标指针变成一个小白圆圈，将这个小白圆圈在位置标记处单击，即可添加一个关键帧。 9.3 能飞的鸟制作步骤6.设置动画路径为曲线。7. 添加鸟飞回的动画 。总结：如果页面有许多动作，可以创建个Timelines时间线来控制所有的动作。但是这样做很不方便，实际上可以通过创建多个Timeline的方法来控制多个动作。使用这种方法可以将些复杂的动作分解，这样控制起来就更加方便了。在这个案例中，我们通过两个Timline来控制鸟飞翔的动作。利用层，结合时间线和行为动作可以创建很多特别

47、的效果。 选中所添加的某个关键帧，然后按住Ctrl键在页面中拖动层图像上或下移，即可见到路径变成曲线。 在页面中再插入另个层并插入一幅反向飞的鸟图像，并将该图层拖动到时间线的通道2上，方法同前制作相反方向动画。9.4 动态下拉菜单学习在网页中创建动态下拉菜单，就象WINDOWS窗口的菜单一样，当鼠标单击或鼠标放在主菜单上时，就显示下拉菜单来。 案例 制作下拉菜单 制作要求：本例在网页中单击新闻、体育、科技时，显示动态下拉菜单。（自己完成当选择其中的选项时，链接到新的网页信息。）制作步骤1.在页面的上方插入一个层layer1, 并在层layer1中插入一个一行四列的表格，然后在表格中添加主菜单文

48、字。2.在页面中插入图层layer2 ，将其放在第一个主菜单的下面，在层中插入一行一列的表格，并在表格中输入相应的子菜单文字，然后设置其显示属性为隐藏。 3.添加行为动作 。示例效果其原理是利用层的显示和隐藏动作。 先选中主菜单中的文字如“新闻”，打开行为面板，单击“+”添加“Show-Hide Layers”行为，在弹出的窗口中，选中layer2，单击Show按钮。9.4 动态下拉菜单制作步骤4.在事件选项选择onClick，表示当鼠标单击主菜单文字时，弹出层layer2。 5.选中层layer2，设置其为hide隐藏。并在事件选项中选择onMouseout，表示当鼠标离开层layer2时，

49、就隐藏层layer2。 6. 同样添加其它菜单。 总结：利用层的隐藏和显示属性，实现动态菜单是一件容易的事情。我们还可将触发的事件换为onMouseover或其它的事件，如果事件为onMouseover时，表示当鼠标放在主菜单上时，就会显示出层（即子菜单）。 第11章 网页模板的创建与应用模板是一种特殊的网页元素定位技术 。 它是专门用来创建其他文档的基础文档 。 Dreamveaver MX中的模板是用来创建风格一致的网页，并可在需要更新时同时更新多个网页。利用模板使得创建网页和更新网页变得快速、高效。与一般网页的区别保存文件时，选择菜单文件/另存为模板命令，其后缀名都是.dwt。 网页中重

50、复使用的信息，可以被锁定或设置为不可编辑qu，而变化的部分设置为可编辑区，以便设计不同页面时改变这些内容。案例 创建模板 制作要求：在模板中， 我们将页面的布局、站点标题、站点导航按钮、站点的二级导航菜单以及页面底部的导航条和说明，这些多个页面均有的页面元素设定为被锁定部分，右侧信息部分设置为可编辑区域。 制作步骤1.创建一个新页面，设置页面布局。2. 插入要锁定的页面元素。包括站点标题（顶部）、导航按钮、二级导航（左侧）、底部导航条和说明文字。 3.保存为模板文件 。该文件扩展名为dwt ,保存在站点中生成的特定文件夹里。创建模板既是为了节省网站的开发时间，也是为了统一网站的风格，更是便于对

51、网站和网页进行管理和修改。 示例效果11.1 创建模板 4. 设置模板的可编辑区。单击选择模板选项，显示其工具包括新建模板、创建嵌套模板、设置可编辑区域、设置可选区域、设置重复区域、设置可编辑的可选区域、设置重复表格。本例选择设为可编辑区域并设置。5. 若修改可编辑区为锁定区域，则选中要修改的可编辑区域，然后使用取消可以编辑区域名令，即可恢复。6.保存文件 。模板已经创建完成，接下来学习如何使用模板设计网页。 制作步骤 11.1 模板的创建 11.2 模板的应用 应用模板有两种方法：一种方法是用模板创建新的文档，另一种方法是把模板应用于现有的文档。 案例 应用已有模板制作要求：应用一个已经制作

52、好的模板，创建一个新的页面，并对可编辑区域进行编辑和修改。制作步骤1.单击菜单FileNew命令弹出新建文档对话框。 2. 单击标签Templates栏，左边是站点列表栏，右边是当前站点下的模板文档列表。 3. 在站点列表栏中选择当前站点，在模板文档列表中要应用的模板，单击按钮创建了一个新的页面 。示例效果4. 在新页面的可编辑区域中，加入新的内容后，保存文件。11.3 模板的修改和更新制作步骤1.打开已有模板，然后对模板区域设置进行修改。2. 保存该模板文件后，出现更改文件对话框 。单击更新可以使用该模板所设计页面全部会更改。总结： 模板文档既可由已有的页面另存为模板，也可在新建文档时，直接

53、创建模板文档。 如果要对应用了模板的页面的锁定区域进行修改，就像编辑没有应用模板的页面一样，则需要先将页面从模板中分离出来。 通过修改模板来更新网页，可以使大量的重复工作得以瞬间完成 。 第12章 JavaScript脚本语言应用JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用JavaScript的目的是与HTML超文本标识语言结合，设计网页特效功能。 JavaScript脚本语言是Netscape公司引进了Sun公司有关Java的程序概念，为网页开发而设计，并取名为JavaScript。JavaScript采用小程序段的方

54、式实现编程，像其他脚本语言一样，JavaScript同样也是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言需要先编译，而是在程序运行过程中被逐行地解释。 12.1 JavaScript与HTML的结合标签 1.标签使用的一般格式 。 JavaScript程序代码将JavaScript嵌入HTML网页时，必须使用标签。 2. JavaScript嵌入HTML程序中的位置。 将其放在网页中的 主体部分。将其放在网页中的 之间，如定义一个showdate()函数。然后在 主体部分调用。使用一个外嵌式“.js”文件，然后在 主体部分进行调用。实例 在网页页面显示当天的时间和日期示例效果12.2 显示时间和日期 12.3 分时问候 实例 在网页中根据访问时间对用户进行问候示例效果实例 在网页状态栏里显示时间示例效果12.5 状态栏中显示时间 12.