Dreamweaver8教程

1、网页设计基础网页设计基础3.1 Dreamweaver8简介简介3.2 网页文本及媒体的应用网页文本及媒体的应用3.3 表格的应用表格的应用3.4 布局表格的应用布局表格的应用 3.5 超级链接超级链接3.6 框架的应用框架的应用3.7 CSS样式的应用样式的应用3.8 层和行为的应用层和行为的应用 3.9 时间轴的应用时间轴的应用 3.10 表单的应用表单的应用3.11 模板的应用模板的应用 本节知识F认识Dreamweaver8FDreamweaver8编辑环境介绍F创建与管理站点 Dreamweaver 8是一款功能强大的网页编辑软件，它以其直观的图形界面大大简化了网页的设计和编辑。在具

2、体学习使用Dreamweaver之前，首先应该掌握对网页文档操作的一些基础知识，如网页文档的创建、打开、预览和保存以及页面属性的基本设置等。 Dreamweaver是专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论直接编写HTML代码还是在可视化编辑环境中工作，Dreamweaver都提供了专业的编辑工具。知识要点 F系统要求在安装Dreamweaver8之前请确保硬件和软件环境满足以下条件： Intel Pentium III 600MHz或更快的处理器和等效的处理器 Windows 2000、Windows XP或Windows Server 20

3、03 至少128MB的可用内存（建议采用256MB内存或更大内存） 能达到1024768像素分辨率或更高分辨率的监视器F安装 Dreamweaver8在Dreamweaver8的系统盘上运行安装程序 setup.exe知识要点F启动Dreamweaver 8 F新建空白HTML网页 F保存网页文档 F预览网页效果 F退出Dreamweaver 8 该部分主要介绍Dreamweaver8的基本功能、主窗口和菜单命令。内容包括熟悉主工作区、使用菜单栏、掌握“插入”工具栏、充分利用“属性”面板和灵活使用菜单命令。该部分是学习Dreamweaver8快速入门部分。通过这一部分的学习能够对Dreamwe

4、aver8的基础操作和功能有一个全面的掌握和认识，从而为后续章节中能够深入地学习好Dreamweaver8打下坚实的基础。1.1.启动启动Dreamweaver 8Dreamweaver 8 选择“开始”|“程序”|“Macromedia”|“Macromedia Dreamweaver 8”命令如图所示。选择“创建新项目”|“Html”项。2.2.新建空白新建空白HTMLHTML网页网页进入Dreamweaver 8页面后，如图所示。选择“文件”|“新建”菜单命令，打开“新建文档”对话框，在“类别”栏中选择“基本页”选项，在“基本页”栏中选择“HTML”选项，单击“创建”按钮。如图所示。3.

5、保存网页文档保存网页文档 选择“文件”|“保存”菜单命令，打开的“另存为”对话框，在“保存在”下拉列表框中选择文件的保存路径，在“文件名”文本框中输入保存的文件名，单击“保存”按钮。如图所示。4.4.预览网页效果预览网页效果 选择“文件”|“在浏览器中预览”|“IExplore 6.0”命令在IE浏览器中预览网页文档的效果， 如图所示。5.退出退出Dreamweaver 8F单击Dreamweaver 8窗口右上角的“关闭”按钮。F单击Dreamweaver 8窗口左上角的图标，在弹出的下拉菜单中选择“关闭”命令。F在Dreamweaver 8窗口中选择“文件”|“退出”菜单命令。F在当前窗口

6、为Dreamweaver 8工作界面时，按“Alt+F4”键退出Dreamweaver 8。 知识要点F插入栏F文档工具栏F文档编辑区F网页标签F扩展按钮F浮动面板组F属性面板F标签选择器F水平标尺和垂直标尺1.Dreamweaver 81.Dreamweaver 8的界面元素介绍的界面元素介绍2. 2. 创建本地站点创建本地站点 Dreamweaver8是一个站点创建和管理的工具，因此使用它不仅可以创建单独的文档，还可以创建完整的Web站点。创建Web站点的第一步是规划。为了达到最佳效果，在创建任何Web站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布

7、局的外观以及页面间是如何连接的。 所谓的定义网站，就是在自己的计算机中创建一个文件夹，用来放置所有的文件，然后再将这个文件夹定义为站点。建立一个网站，首先要在本地机器上设置站点存储位置。下面主要介绍本地站点的建立，站点文件命名。创建站点的步骤：创建站点的步骤： 建立本地站点文件夹“wangye”（站点文件夹名称必须是西文的，不能为中文名称）。 进入Dreamweaver8的工作界面。 选择“站点”|“新建站点”命令，弹出“未命名站点1的站点定义为”对话框，如图所示。 在“站点名称”中输入站点名称“wangli”，在“本地根文件夹”中点击按钮，找到本地机上站点文件夹的位置，如图所示。 单击“确定

8、”，则完成站点的建立，如图所示。 实训要求：F建立一个学生自己的站点及网页文件F创建网页文件，设置网页标题为“网页学习”。F保存网页并预览效果。实训目的：F学会建立站点及建立站点的用处。F创建网页文件并保存。F预览网页的方法。返回本节知识F插入文本、输入空格、特殊字符、日期F格式化文本 F设置文本的属性F项目列表的应用 F插入多媒体对象 文本是网页最基本、最常用的元素，因此文本处理是网页设计中最基本的操作。 制作简单的网页，在页面中插入文本、图像、水平线、日期、背景及空链接。其效果图为如图所示。知识要点F创建网站站点F制作简单网页F修改页面、文本属性F插入图像F设置图像属性F（实战步骤详见教材

9、）1.1.输入文本输入文本 插入普通文本插入普通文本 F将插入点定位在文档编辑区中，直接输入文本即可。F在Word等文本编辑软件中编辑好文本之后，将其复制到剪贴板上，然后在Dreamweaver 8中将插入点定位到文档编辑区中，粘贴剪贴板中的文本即可。 F导入已有word文档，在Dreamweaver文档中，将光标定位到要导入文本的地方，选择“文件”|“导入”|“word文档”命令，弹出“导入word文档”对话框，在其中选择要导入的word文档，单击该对话框的“打开”命令，就可以导入文本了。 插入特殊字符插入特殊字符 F在Dreamweaver 8中编辑文本时，往往会遇到一些无法通过键盘直接输

10、入的特殊字符，如版权符号“”和注册商标符号“”等，这时可通过Dreamweaver 8插入特殊字符的功能进行插入。F在需要添加特殊字符的位置单击鼠标，设置插入点。F选择插入栏的“文本”类别（如图所示），单击最右边的 下三角按钮，在弹出的下拉菜单中选择“其他字符”命令，弹出如图所示的对话框，可在其中选择要输入的对象。 F 也可通过软键盘来输入“、【】”等特殊字符符号。 在字符之间添加空格在字符之间添加空格 Dreamweaver 8中的文档格式都是以HTML编码形式存在的，而HTML编码中只允许字符之间包含一个空格，所以在Dreamweaver 8中无论按多少次空格键都只会输入一个空格。 F将中

11、文输入法切换到全角模式，按一下空格键则输入一个全角的空格。F在“属性”面板的“格式”列表中选择“预先格式化的”选项后（如图所示），则可以按空格键输入空格。F插入空格的快捷键方式为Ctrl + Shift + 空格键. 文本的换行文本的换行 在Dreamweaver 8中，当通过按回车键（Enter）换行时，两段之间的距离比较远。要使两段之间的距离和正常行距一样有如下的操作。F将光标定位在需要换行的位置。F单击插入栏“文本”类别中的“换行符”按钮，或按快捷键Shift + Enter，即可在该位置插入一个换行符，从而使两段之间的距离和正常行距一样。 插入其他文本插入其他文本 插入水平线添加水平线

12、 在文档编辑区将插入点定位到所需位置。选择“插入”|“HTML”|“水平线”命令。单击“插入”栏中的“HTML” 按钮。修改水平线 初次绘制的水平线的格式往往不能满足实际需要，此时可通过“属性”面板对其进行修改，如图所示: 插入日期 在制作网页时，有时需要插入当前的日期，Dreamweaver 8提供了快速插入日期和时间的功能。F将光标定位在需要插入日期的位置。F选择“插入”|“日期”命令。F单击“插入”栏中“常用”类别上的按钮 。 F在弹出的对话框中选择日期格式，如图所示 插入列表 列表就是那些具有相同属性的事物。在Dreamweaver 8中，有三种类型的列表：F项目列表：F编号列表：F定

13、义列表： 在“列表属性”对话框中可以定义“列表的类型”、“样式”、“开始计数”等设置 格式化文本格式化文本 文本格式一般包括文本的字体、字号、颜色及文本的对齐方式等。通常可通过文本的“属性”面板来设置如图所示，在文档窗口中就可以看到效果。只是在字体的设置时，先要在“字体列表”框中选择“编辑字体列表”，选择要添加的字体。如图所示。 网页图像的基础知识网页图像的基础知识 网页图像格式FGIF、JPEG和PNG是Web页面中经常用到的图形文件格式。它们的共同特点是：文件小，适合于网页传输。FGIF格式是一个8位文件格式，最多只能显示256色，GIF格式文件的扩展名为. .gif。GIF格式既支持透明

14、颜色属性，也支持动画。FJPEG允许包含超过1600万种颜色，大大超过人眼所能辨别的颜色。JPEG文件一般要比GIF或PNG文件大一些，其扩展名为. .jpg或. .jpeg。FPNG是Macromedia Fireworks的源文件格式。PNG格式文件较大，其扩展名为. .png。 颜色基础 在Web页面中，颜色既可以用颜色名称red （红色）、green（绿色）、blue（蓝色）来表示，也可以用十六进制数（例如：#FF00000）来表示，如#000000表示黑色；#FFFFFF表示白色；#FF0000表示红色；#00FF00表示绿色；#0000FF表示蓝色. 插入图像插入图像 图像可以直接

15、插入在页面中，也可以在表格、表单或层中插入。应用层还可以使图像交迭。插入图像文件必须在当前站点的文件夹中。如果图像文件不在当前站点的文件夹中，Dreamweaver 8将询问是否要将文件复制到当前的文件夹内。插入图像常用的几种方式：F选择“插入”|“图像”命令。F单击“插入”栏中的“常用”按钮 。F快捷键Ctrl + Alt + I。出现“选择图像源文件”对话框选取所要插入的图像文件即可。如图所示 设置图像属性设置图像属性 在文档窗口中可直接选中图像并进行修改，也可用图像的“属性”面板进行设置。例如：为图像设置大小、对齐、链接等操作。如图所示。热点工具图像名称图像宽度与高度浏览文件 鼠标经过图

16、像鼠标经过图像 鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像 F在文档窗口中，将插入点放置要插入鼠标经过图像的位置。F单击“插入”栏的“常用”按钮 旁的下三角，在下拉菜单中选择“鼠标经过图像” 命令，弹出“插入鼠标经过图像”对话框，如图所示。 插入插入Flash对象对象 插入Flash按钮 插入Flash文本对象 插入Flash动画实训要求实训要求：F制作一个简单网页“我的美丽家乡- ”F在页面上输入文本内容F设置标题及文本的格式F插入背景颜色或背景图像F插入图像、鼠标经过图像、水平线、日期及Flash的动画效果实训目的：实训目的：F了解Dreamwea

17、ver8中格式化的设置F网页中的效果设置F能够独立完成简单网页的制作及预览返回本节知识本节知识F创建表格F表格的合并、拆分F表格的嵌套F表格的属性F表格的排版及修改 在网页制作中，对页面进行布局是非常重要的，表格就是页面布局中常用的方式。Dreamweaver 8不仅支持在表格中有序地排列数据，还可用表格对网页中的文本、图像及其他元素进行定位。 应用表格的布局制作“花之心语”网页，页面效果如图所示。 知识要点知识要点 F插入表格并设置其属性F单元格的拆分F设置单元格的属性F表格的嵌套F插入艺术字、水平线、图片F文字的输入和设置F设置背景图片F保存网页（实战步骤详见教材）创建表格创建表格 表格是

18、制作网页时非常有用的布局工具，我们可以使用表格垂直和水平的结构来改变网页的布局。表格的三个基本要素是：F行（水平方向）F列（垂直方向）F单元格（行和列交叉点） 三种插入表格的方法 “表格”的对话框说明 表格宽度。 边框粗细。 单元格边距。 单元格间距。 页眉。 辅助功能单元格行列表格的基本操作和属性表格的基本操作和属性 在表格中输入文字和插入图像 从其他文档导入表格式数据 选择表格元素 选择整个表格 选择行或列 选择单元格 合并、拆分单元格 单元格属性 设置表格属性 “表格”属性面板中显示了插入表格的所有特性，通过修改面板中的参数可快速地编辑表格外观，如图所示。表格中各个单元格之间的间距单元格

19、中的元素距离单元格边框的距离在此可以修改 表格的行数和列数在此可以设置表格的边框颜色 套用默认的表格样式套用默认的表格样式 Dreamweaver内置了格式化的表格库，只要选中表格，选择“命令”|“格式化表格”命令就可以弹出如图所示的“格式化表格”对话框，可以设置各个参数来格式化表格。 表格的嵌套表格的嵌套 嵌套表格是表格布局中一个十分重要的环节，它是指在一个表格的单元格中再插入一个表格，嵌套表格的宽度受所在单元格的宽度限制，其编辑方法与表格相同。如图所示 在网页中制作一个学生管理表，效果如图所示。先插入一个7行4列的表格，设置表格宽度和高度，然后合并单元格，输入相应的文本即可。 应用表格的布

20、局制作简单的应用表格的布局制作简单的“专业课程介绍专业课程介绍”的网页的网页实训要求：F页面应用表格进行布局。F应用表格的“属性”面板，对表格进行插入、拆分、合并等设置。F表格“格式化表格”样式的套用。实训目的：F插入表格的灵活应用。F对表格、行、列、单元格的选择和属性面板的应用。 相册的制作相册的制作实训要求：F创建网站站点及页面F插入设置表格F创建网页相册F美化网站相册F创建链接（制作的方法见教材）返回本节知识F布局模式F绘制布局表格、布局单元格F移动布局单元格F设置布局表格、布局单元格属性 制作网页的首要工作是设置页面的布局，前面学习了表格的应用，如果直接使用表格进行布局不太方便，往往需

21、要预先计算好表格中的行数和列数，反复调整单元格的高度和宽度。为了简化创建页面布局的过程，Dreamweaver 8提供了“布局”模式。 在“布局”模式中，用户可以使用表格作为基础结构来设计页面，同时避免在使用传统方法创建基于表格的设计时经常出现的一些问题。使用布局表格制作 “北京奥运”网页，其效果图为如图所示。 知识要点 F布局模式的切换F绘制布局表格或单元格F设置布局表格或单元格属性F设置布局表格或单元格的位置、大小F在布局单元格中添加内容（实战步骤详见教材）布局模式布局模式 单击“插入”栏“布局”类中的“布局模式”按钮，进入布局模式，如图所示。在布局模式里，“插入”栏的“布局”中有两个可用

22、的按钮，它们是“布局表格”按钮和“绘制布局单元格”按钮。此时，标准模式下的“表格”按钮和“绘制层”按钮均为不可用状态。（在标准模式下，“布局表格”按钮和“绘制布局单元格”按钮是不可用的。） 布局表格绘制布局单元格布局模式（Ctrl+F6） 在布局模式下使用布局表格和布局单元格进行页面布局时，一般先创建布局表格，再在布局表格中添加布局单元格，如图所示。 在使用“布局”模式时 ，为了更精确地定位，往往需要使用标尺和网格来了解布局表格或布局单元格的高度和宽度。F标尺：当使用“布局”模式时，可选择标尺定位，选择“查看”|“标尺”|“显示”命令。否则也可不显示。F网格：选择“查看”|“网格”|“显示网格

23、”命令。设置如图所示。设置布局表格的属性设置布局单元格的属性 在Dreamweaver 8中可以移动或调整布局单元格的大小，但不能重叠布局单元格。对布局单元格进行移动或调整大小时，只能在布局表格的边框与内容的边线之间，只有嵌套在布局表格内部的才能被移动，其他的布局表格均不能移动，如图所示。 清除单元格高度之后，单元格将自动被压缩，当向布局单元格内插入内容后，单元格将自动调整大小以适应插入的内容，如图所示。 要改变布局表格和布局单元格的显示颜色、自动插入间隔图像等属性，可通过设置布局模式参数来实现。 在布局模式中可向布局表格中的布局单元格内添加文本、图像和其他网页元素，与在标准模式中将内容添加到

24、表格单元格相同。在添加内容之前，必须先绘制布局单元格，因为内容只能添加到布局单元格中。 如图所示实训要求：（页面的内容可自定，也可参考演练的格式和内容）F应用布局表格制作“自我介绍”的网页F页面的版式要用布局表格。F设置布局表格的单元格和页面。F能够熟练对其属性进行设置和修改。实训目的：F对比表格和布局表格的相同点和不同点。F表格和布局表格之间的转换。返回本节知识 F超级链接概念 F创建文本超级链接 F创建锚链接 F创建空链接 F创建电子邮件超级链接 F创建图像超级链接 F创建热点链接 超级链接是指页面对象之间的链接关系，它是网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了

25、一个有机整体，使浏览者能快速地访问到想要访问的页面。 为“北京奥运”页面中添加空链接、文字链接、电子邮件链接、命名锚记链接，创建脚本链接和下载链接，充分体会链接在网页制作中的作用。页面效果如图所示。知识要点F页面文档链接F电子邮件链接F空链接F脚本链接F下载链接F热点链接F命名锚记链接（实战步骤详见教材） 超级链接就是把一个网站的网页连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。Dreamweaver提供了几种方式来创建指向文档、图像、多媒体文件或可下载软件的超链接。我们可以为文档内任何地方的任何文本或图像创建链接，包括在标题、列表、表格、层或框架中的任何文件或图像

26、。 一般来说，在文档中可以创建以下类型的超链接：F链接到其他文档或文件（如图形、影片、PDF或声音文件）的链接。F命名锚记链接，选择此类链接将跳转至文档的特定位置。F电子邮件链接，选择此类链接将打开一个新的空白信息窗口。F空链接和脚本链接，此类链接使得能够在对象上附加行为，或者创建执行JavaScript代码的链接。提示：创建链接之前，一定要清楚文档相对路径、站点根目录相 对路径以及绝对路径的工作方式。 文档和图片的链接文档和图片的链接 文档超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。 链接对象的文件既可以是站点内的文件也可是站点外的文件，如图所示。 命名锚

27、记链接命名锚记链接 当页面内容长度超过一个画面可容纳的范围时，可以在适当位置插入锚记，然后在网页开头加上连到这些锚点的超链接，浏览时只要点击链接，就可以快速跳到锚记的位置上，方便浏览网页的内容。 电子邮件超级链接电子邮件超级链接 电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。 空链接空链接 空超级链接是一个未指派目标的超级链接，为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。 热点链接热点链接 以往在指定链接时一张图片上只能设置一个链接，若要在一幅比较大的图片中添加许

28、多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver 8的图像热点超级链接功能就能避免这个问题。 脚本链接脚本链接 脚本链接执行代码或调用函数，它非常有用，能够在不离开当前网页的情况下为访问者提供有关的附加信息。例如选定以图片，在图片“属性”面板的“链接”文本框中输入JavsScript:alert（谢谢光临！）。 下载链接下载链接 下载链接实际上也属于文档链接，只是在下载链接时，必须要求链接内容为一个压缩文件。 实训要求： F应用所有类型的链接。F对“自我介绍”网页做相应的子页，然后作相关的链接

29、实训目的：F理解超链接的含义。F对比各链接类型间的特点和不同。返回本节知识F框架和框架集的创建 F框架和框架集的选择和删除 F框架和框架集的保存 F框架和框架集的属性设置 F框架的链接 上两节我们应用了“布局表格”制作了“北京奥运”网页，并制作了相应的链接。本节应用框架制作“北京奥运”网页，并创建链接，当我们单击左边栏中的标题时，具体内容在右边的主框架中显示。如图所示。知识要点 F创建框架F保存框架集文件及框架文件F修改框架F设置框架属性F编辑框架内容F超链接控制框架内容（实战步骤详见教材） 框架是将一个页面划分成不同的文档区，每个文档区显示独立的内容，其效果是在浏览网页时，网页中一部分区域内

30、容不改变，而其他区域内容在不断发生改变。 框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容（对不能显示框架的浏览器进行的处理除外，即部分），框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。 创建框架框架集创建框架框架集 F使用预定义的框架集 新建 选择“文件”菜单中的“新建”命令，打开“新建文档”对话框，如图所示 插入 选择“插入”|“HTML”|“框架”命令，打开子菜单预定义的框架集。如图所示： （ 也可在“插入”工具栏的布局对象类别中，单击“框架”

31、工具栏按钮 ） F自己设计框架集 在新创建的文档编辑状态下，选择“查看”|“可视化助理”|“框架边框”命令，在文档中显示框架边框。插入于定义的框架集 新建于定义的框架集 设计框架集设计框架集 用户可以通过对当前文档窗口的修改、拆分，创建自己的框架集。选择“修改”|“框架页”|“拆分右框架”命令，如图所示 。 用此框架页可以将一个框架拆分成几个更小的框架，如图所示。 要更改框架或框架集的属性，首先要选择需要更改的框架或框架集。用户既可以在文档窗口中选择框架或框架集，也可以通过“框架”面板进行选择。1.1.在文档窗口中选择框架和框架集在文档窗口中选择框架和框架集 在编辑窗口中选择框架的方法很简单，

32、按住Alt键，在要选择的框架内单击鼠标左键即可。被选取的框架边框呈虚线显示。2.2.在在“框架框架”面板中选择框架和框架集面板中选择框架和框架集 在“框架”面板中单击框架区域中的任意位置即可选择框架，选中的框架以粗黑框显示。在“框架”面板中单击框架边框即可选择框架集，如果要选择整个框架集，只需单击框架最外面的边框即可， 如图所示。3.3.删除框架删除框架 如果窗口中有不需要的框架，可将其删除，用鼠标将要删除框架的边框拖到父框架边框上或拖离页面即可。 保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。1.1.

33、保存框架和框架集文件保存框架和框架集文件F将插入点定位到要保存的框架中。F选择“文件”|“保存框架”菜单命令，在打开的“另存为”对话框中像保存其他网页一样指定保存路径和文件名，然后单击“保存”按钮即可。2.2.保存框架集中所有文件保存框架集中所有文件 选择“文件”|“保存全部”菜单命令，将保存所有打开的文档，包括单独的文档、框架文档和框架集。1.1.设置框架集的属性设置框架集的属性 设置框架的属性 单击框架集中的某一区域，即可在页面中选择此框架，然后可在属性检查器中设置其属性，如图所示。 框架的链接 若要在框架中使用链接，就必须为链接设置一个目标。目标就是用来打开被链接的文档的框架。例如，如果

34、导航菜单是在左框架中，而需要链接材料在主内容框架中出现，就必须为所有的导航菜单链接选定目标。目标将是主内容框架的名称，例如：mainFrame。当用户单击一个导航链接时，内容将在主框架中显示。框架集的属性面板 框架的属性面板 框架目标 实训要求：F设计“大学生活”的网页F应用框架结构设计页面，结构任选。F创建框架中的超链接。实训目的：F框架的用途。F框架的保存。 F框架中属性面板的设置及应用。F框架中超链接目标的设置。返回本节知识FCSS样式简介F样式的基本操作F使用外部样式表 CSS样式表是一系列格式规则，通过它可以灵活地控制网页外观，而插入多媒体对象可以丰富页面表现力，使其更具动感。 在“

35、北京奥运”页面中，对页面中文字、图片、页面背景水平线设置如下样式，如图所示。 知识要点F Css样式的使用F Css样式的属性（实战步骤详见教材）1.CSS1.CSS样式简介样式简介 CSS（Cascading Style Sheets）样式又叫层叠样式，使用它可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用，而且可以用于其他多个页面。2.CSS2.CSS样式的基本操作样式的基本操作 创建创建CSSCSS样式样式 选择“窗口”|“CSS样式”命令或按Shift+F11快捷键可以显示或隐藏“CSS样式”面板，如图所示。

36、在“CSS样式”面板右下方有四个按钮四个按钮 使用使用CSSCSS样式样式 当“CSS样式”定义后，在“属性”面板中的“样式”或“类”下拉列表框中就可以选择相应的样式，则样式应用于被选择的对象中。 编辑编辑CSSCSS样式样式 在“CSS样式”面板中，单击要编辑的样式名称，单击面板右下方的“编辑样式表” 按钮，在弹出的“CSS规则定义”对话框中对样式进行修改 删除删除CSSCSS样式样式 在“CSS样式”面板中，单击要删除的样式名称，单击面板右下方的“取消CSS样式的链接” 按钮，将样式从面板中删除。在删除了样式后，原来应用了该样式的内容将恢复应用样式前的显示状态。 设置设置CSSCSS样式表

37、属性样式表属性 “CSS规则定义”对话框有8个选项页，分别是：类型、背景、区块、方框、列表、定位、扩展。 3.3.使用外部样式表使用外部样式表 外部样式表是一个包含CSS样式和格式规范的文本文件。用户可以通过链接或导出的方法将外部样式表应用到Web站点的任意文档中，也可以导出文档中包含的CSS样式以创建新外部样式表。 链接或导出外部样式表。若要在文档中链接或导出已有的外部样式表，执行以下操作：链接或导出外部样式表。若要在文档中链接或导出已有的外部样式表，执行以下操作： 在“CSS样式”面板中，单击其右下角区域的按钮，弹出“链接外部样式表”对话框如图所示。 单击“浏览”按钮查找已有的外部样式表，

38、或在“文件|URL”文本框中输入外部样式表的路径。 在“添加为”单选按钮组中选择一个单选按钮。F若要创建当前文档和外部样式表之间的链接，选择“链接”单选按钮。F若要在当前文档的内部CSS样式定义中引用外部样式表，选择“导入”单选按钮。 单击“确定”按钮，外部样式表的文件名出现在“CSS样式”面板中。 导出样式以创建新的外部样式表。用户可以从文档中导出样式以创建新的导出样式以创建新的外部样式表。用户可以从文档中导出样式以创建新的外部样式表外部样式表 然后可将其连接到其他文档以应用这些样式。操作如下：然后可将其连接到其他文档以应用这些样式。操作如下： 选择“文件”|“导出”|“CSS样式”命令或选

39、择“文本”|“CSS样式”|“导出”命令，弹出“导出样式为CSS 文件”对话框。 在“文件名”文本框中输入样式表的名称，然后单击“保存”按钮，样式随即保存为外部样式表。 CSSCSS滤镜效果滤镜效果 CSS滤镜是CSS的一个扩展，能把可视化的滤镜和转换效果添加到一个标准的HTML元素上，使应用样式的对象产生模糊、反转、发光等特殊效果。在Dreamweaver 8中，可直接在对话框中添加滤镜的参数，而不用编写复杂的代码。 如图所示： 实训要求：FCSS样式的设置F建外部样式Fbiaoti.css：颜色：999999，字体：黑体，大小：16ptF内部样式：F .xian，颜色：FF0000F .w

40、enzi，字体：宋体，大小：9ptF .Biaoti2，字体：黑体，大小：12ptF主页：F下边框线为红色虚线Fa:link，颜色：000000，字体：宋体，大小：9pt，修饰：无Fa:visited：颜色：000000，字体：宋体，大小：9pt，修饰：无Fa:hover： 颜色：000000，字体：宋体，大小：9pt，修饰：下划线。F图像的透明样式（可自定样式）实训目的：F应用文字的样式、链接的样式、背景图片的样式。F理解内、外部样式表的应用。返回本节知识本节知识F插入层F设置层的属性F层与表格的转换F应用层排版设置网页F行为的概念F行为的应用 用表格定位网页中的元素，不能相互叠加在一起。但

41、是使用层功能，无论将其放置到网页文档的任何一个位置，都可以随意移动，并且页面元素放入图层之中时，还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏，可见，层的优点是很明显的。 之所以在网页文档中使用层，是为了自由地安排图像等网页构成元素表现特殊效果。大家可以将层理解为文档窗口内的又一个文档窗口。像在普通文档窗口中进行操作一样，在层中可以输入文字，也可以插入图像、动画、表格、多媒体等，对其进行编辑。 应用层和行为制作网页“你能抓住小兔子吗？”，当鼠标移动到兔子图片上时，“兔子”却跑到另外位置上，页面效果如图所示。知识要点F插入层F定位层F设置层的属性F在层中添加内容F添加“显示隐藏层”

42、行为F修改行为F选择鼠标事件（实战步骤详见教材）1.插入层插入层 创建层的方法F直接单击“插入”面板“布局”类别中的“绘制层”按钮 。F执行“插入”|“布局对象”|“层”命令。F拖动绘制层按钮 到文档窗口中。F单击“布局”|“绘制层”按钮 ，按住Ctrl键并拖动即可连续绘制多个层。 层的嵌套 层与表格相似，可进行嵌套。在某层内新创建的层称为嵌套层或子层，嵌套层外部的层称为父层。子层可浮动于文本编辑窗口的任何位置，子层的大小也可以大于父层，可根据实际需要嵌套多个层。 创建嵌套层的方法：创建嵌套层的方法：F插入法：把光标点放置于页面上已有层内，然后选择“插入”|“层”菜单命令插入一个嵌套层。F拖放

43、法：从“插入”工具栏布局面板中拖动按钮 ，然后把它放到页面上的已有层中便可新建一个该层的子层。 关于嵌套层需要特别注意注意的是：嵌套层并不是页面上一层位于另一层内。嵌套层的本质应该是一层的HTML代码嵌套在另一层的HTML之内，如右图上所示。从图中可以看出，层“Layer2”、“Layer3”、“Layer4”的代码分别嵌套在层“Layer1”、“Layer2”、“Layer3”代码之内，所以它们是嵌套。反过来，即使在页面上看，一个层位于另一层之内，如果它们的HTML代码互不包含，它们就不是嵌套层。当然最直观的方法还是通过层面板查看层间是不是存在嵌套关系，如右图下所示。“层”的嵌套 不是“层”

44、嵌套 2.调整层调整层 层的显示和隐藏 调整层的大小 选择和移动层 防止层嵌套 对齐层 激活和删除层 改变层的堆叠顺序3.层与表格的转换层与表格的转换 将层转换为表格 层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加方便，但层只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。 “转换层为表格”对话框 将表格转换为层 在网页制作中，表格的灵活性没有层的灵活性强，为了方便调整一些元素的

45、位置，可将表格转化为层。由于层能定位到网页中任何位置，所以将表格转换为层后可以方便定位网页元素的位置。 “转换表格为层”对话框 4.设置层的属性设置层的属性 层的属性“面板”如图所示: 在层中插入内容 在层中可以插入多种元素，包括文本、表格、图像、插件、按钮等。元素被放置于层中后，同样可以改变元素的大小、颜色、对齐方式等。在网页设计过程中，往往依靠层进行精确定位，使得插入的内容在网页上排列得井井有条，以增强页面的整洁和美观。 行为（Behavior）是在Dreamweaver 8中预置的JavaScript程序，由事件（event）和对应动作（actions）组成。它能实现用户与网页间的交互，

46、通过某个动作来触发某项计划。如当用户在页面中将鼠标移动并单击某一个链接后，载入了一幅图像，这就产生了两个事件onMouseOver和onClick，同时触发了一个动作载入图像。1.行为、事件和动作的概念 首先就“行为”、“事件”和“动作”这几个概念的说明 “行为”、“事件”和“动作”的概念在人类的自然语言中似乎非常相似，但是这里有严格的区分。例如：网页上有一行字，浏览网页时，鼠标一旦放在这行字上，就会显示一幅画；鼠标一旦离开这行文字，那个图片就会隐藏起来。这个效果就使用了“行为”。此列中，三者的具体表现为：F事件：鼠标的移动和鼠标的移出。F动作：图片的显示和隐藏。F行为：鼠标的移入+图片的显示

47、，鼠标的移出和图片的隐藏。 由此可见，行为是事件和由该事件触发的动作的组合 2.常用事件的种类（参照教材表格）常用事件的种类（参照教材表格）F 窗口事件 F 键盘和鼠标的事件 F 表单事件 F 其他事件 3.行为动作的类型（参照教材表格）行为动作的类型（参照教材表格）4.行为面板行为面板 选择“窗口”|“行为”菜单命令，或按Shift+F4键打开“行为”面板。在Dreamweaver中，通过使用“行为”面板为页面元素附加行为或修改以前所附加行为的参数。“行为”面板如图所示： 5.行为的应用行为的应用 选择网页中要附加行为的对象（例如图像或链接），然后在“行为”面板中单击“添加行为”按钮，从弹出

48、菜单中选择要附加的行为。当选择某个动作时，将会弹出一个相应的对话框，显示该动作的参数和说明。在对话框中进行参数设置后，单击“确定”按钮，即可完成附加行为的操作，如图所示。 6.6.修改行为事件修改行为事件 添加行为后，用于触发该动作的默认事件会显示在“行为”面板“事件”栏中。在“事件”栏中单击要应用的事件，然后单击该事件右侧出现的下拉按钮，在弹出的下拉列表框中选择另一个事件，即可修改触发的事件。 1.制作“播放音乐” 和“改变属性”的行为网页 2.添加“弹出信息框”、“设置状态栏文本”和“打开浏览器窗口”行为的网页（具体操作步骤详见教材） 实训要求：层与行为在网页中的各种应用实训目的：F层与行

49、为在网页中的各种类型F理解层的概念及两者的联系返回本节知识F时间轴的概念F时间轴的实例 在Dreamweaver 8中，可以不使用ActiveX控件、插件或Java程序，而在“时间轴”面板中创建一系列帧，然后改变每帧中层的位置、尺寸、可见性及重叠顺序等属性，从而创建出动画效果，或者利用时间轴在特定的时间改变层中的对象或执行特定行为。 利用时间轴面板制作层动画效果，网页的效果如图所示知识要点F“时间轴”面板F修改关键帧层的位置（实战步骤详见教材）1.时间轴的概念时间轴的概念 利用时间轴可以通过在不同的时间改变层的位置、大小、可见性和叠放顺序等来创建动画。其原理是将画面连起来播放，产生运动的效果。

50、 时间轴动画的基本单位是一个画面，也叫帧，而其中起关键性作用的、可以影响整个动画的帧叫做关键帧。很多帧按照时间的先后顺序连接起来，就形成了动画。因此说：时间轴就是用来排列画面顺序的。2. “时间轴时间轴”面板面板 时间轴面板能够显示层和图像随时间变化的属性。 选择“窗口”|“时间轴”命令，即可显示时间轴面板，如图所示 时间轴弹出式菜单行为通道播放头向后跳进后退当前帧播放播放速度帧编号动画条关键帧动画通道3.创建时间轴动画创建时间轴动画 所谓时间轴动画，就是在浏览器浏览网页时让一个层随时间的变化而不断的改变它的位置。创建时间轴动画的步骤为： 添加对象到时间轴 在页面上插入一个层，并在层中插入要移

51、动的元素，再把层移到动画的起始位置，然后选择要制作动画的层，再选择“修改”|“时间轴”|“增加对象到时间轴”命令，或者直接用鼠标左键按住层的“选择柄”，将层直接拖到时间轴，如图所示。 并在弹出的提示对话框中单击“确定”按钮，此时层“Layer1”就添加到时间轴的第115帧上，如图所示：一个动画条便出现在时间轴的第一个通道内。 记录层路径 选择所需的层后，将该层移动到动画的起始处，并保证该层被选择状态，选择“修改”|“时间轴”|“录制层路径”命令，然后再页面上拖动层，即可创建想要的运动路径，如图所示。 在动画停止时释放鼠标键，弹出提示用户，时间轴面板可以变动的层属性的提示对话框，单击其中的“确定

52、”按钮，即会添加一个动画条到时间轴中，同时也添加了适当数量的关键帧。此时，若勾选时间轴面板上的“自动播放”选项，打开网页时就会直接自动播放该动画。若勾选时间轴面板上的“循环”选项，该动画的播放就会循环往复进行。用浏览器预览，就会看到这个层随着制作的路径漂移的效果。 4.修改时间轴修改时间轴F添加和删除帧在时间轴面板中，将播放头放置时间轴上在要添加或删除帧的位置，选择“修改”|“时间轴”|“添加帧”或“移除帧”命令。F改变关键帧的位置-在时间轴面板的动画条中左右拖动要改变位置的关键帧标记。F改变动画的起始时间-选择与要改变的动画相应的动画条，左右拖动此动画条。F改变动画路径的位置-在时间轴面板中

53、选择该路径位置的动画条，然后在页面上拖动该动画所对应的对象。F改变动画的时间长度-在时间轴面板的动画条中左右拖动结束帧的标记。F改变动画的播放状态-在时间轴中选择“自动播放”或“循环”复选框。5.控制时间轴的行为控制时间轴的行为 在时间轴面板的行为通道中单击要为其添加行为的帧，再单击行为面板中的“添加行为”按钮，为该帧选择一个要执行的动作。此动作出现在“行为”面板中，并且在事件栏中显示触发该动作的事件，其中还有指定动作发生的帧编号。同时，在时间轴面板的行为通道中会出现一个动作标记。1.逐个显示文字的文本动画逐个显示文字的文本动画F要求：利用层和时间轴的属性面板制作下落的文字。F目的：多个层在时

54、间轴中应用。F步骤（详见教材）2.利用类似的方法，制作叶子下落的动画利用类似的方法，制作叶子下落的动画实训要求：F层在时间轴中的应用。F时间轴中添加帧的含义。实训目的：时间轴中路径的几种添加方式。时间轴的添加及修改。 返回本节知识F表单与表单对象F创建表单F插入各种表单域并设置其属性F表单和表单元素应用实例 表单是Internet用户与服务器进行信息交流的重要工具，在网页中有着广泛的应用，如留言板、搜索引擎、注册程序等。通常，一个表单中会包含多个对象，也称为控件。一个完整的表单包括表单对象和应用程序两个基本组件。其中，表单对象在网页中起描述作用，应用程序则是服务器端或客户端的脚本，通过它实现对

55、用户信息的处理。本章将主要介绍在Dreamweaver 8中制作和编辑表单的方法。 使用表单制作“网站留言簿”网页，在表单中插入文本段、单选按钮、复选按钮、文本域按钮和提交按钮并设置表单的属性。网页的效果图如图所示。知识要点F创建表单F插入表单域F设置表单域属性（实战步骤详见教材） 在Dreamweaver 8中，表单是用来输入数据或与网站进行交互的工具。可以将整个网页创建成一个表单网页，也可以在网页的部分区域中添加表单，其创建方法都相同。表单输入类型被称为表单对象。我们可以使用创建各种表单对象，如文本域、密码域、单选按钮、复选按钮、弹出式菜单或按钮。1.插入表单的方法插入表单的方法 在插入工

56、具栏中单击“表单”选项。F单击“表单”按钮，或选择“插入”|“表单”|“表单”命令，即可在光标处插入表单；插入表单在窗口中以红色虚线框表示。F如果看不到该外框，请单击“查看”|“可视化助理”|“不可见元素”选项是否被选中。如图所示。1.插入表单的方法插入表单的方法 将光标定位在插入的表单中，可打开表单的“属性”面板，如图所示。 在表单“属性”面板中“表单名称”文本框中输入标识该表单的唯一名称；在“动作”文本框中输入处理该表单的页面或脚本的路径，或者单击文件夹图标定位到适当的页面或脚本。“方法”下拉列表框用来选择将表单数据传输到服务器的方式，如图所示：2.插入表单对象插入表单对象 添加文本字段：文本字段是用户可在其中输入数据的表单对象。用户可以创建一个包含单行或多行的文本字段，也可以创建一个隐