Dreamwear 8网页设计教程

1、 Dreamweaver8学习教程 2010.8课堂讲解 上机实战 第1课 初识Dreamweaver 8 课堂讲解 什么是网页和网站 网页的分类 网页中的常用术语 网页设计的相关知识 认识Dreamweaver 8 Dreamweaver 8的基本操作 Dreamweaver 8工作界面介绍 什么是网页和网站 什么是网页 什么是网站 什么是网页 网页是由HTML（超级文本标识语言）或者其他语言编写的，通过IE浏览器编译后供用户获取信息的页面，它又称为Web页，其中可包含文字、图像、表格、动画和超级链接等各种网页元素。 什么是网站 网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到

2、Internet上以后，能通过浏览器在Internet上访问的页面 。 门户网站 职能网站 专业网站 个人网站 网页的分类 按所处位置分类 按表现形式分类 按所处位置分类 按网页在网站中所处的位置可将网页分为主页和子页两类。按表现形式分类 按网页的表现形式可将网页分为静态网页和动态网页。网页中的常用术语 万维网（www） 浏览器 统一资源定位符（URL） 文件传输协议（FTP） IP地址 域名 超级链接 超级文本标记语言（HTML） 万维网（www） 万维网（www）是World Wide Web的中文简称，也称为3W网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是Interne

3、t提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。 浏览器 浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。 Internet Explorer（IE） Netscape Navigator（NE） 腾讯TT浏览器 统一资源定位符（URL） URL（Uniform Resource Locator）主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。 通信协议 主机名所要访问的网页路径及名称 文件传输协议（FTP

4、） FTP（File Transfer Protocol）是一种广泛使用的文件传输协议，是快速、高效和可靠的信息传输方法。 FTP是基于客户/服务器模型的TCP/IP的应用，所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连接方式的异同以及使用的操作系统的异同，都能通过FTP协议进行文件的传输。 IP地址 IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如61

5、.139.2.69。 域名 域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。超级链接 超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。 超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。 超级文本标记语言（HTML） HTML（Hyper Text Markup Language）是一种用户与电脑之间进行交流的文本技术，各种网页均是用HTML语言来描述的，用HTML语言编写的

6、网页文件的扩展名一般为“*.htm”或“*.html”。网页设计的相关知识 设计网页的原则 网页设计的一般步骤 网页制作的常用工具 设计网页的原则整体规划 鲜明的主题善用图像醒目的导航及时更新易记的网站名称通用网页动画适量 网页设计的一般步骤 规划网站 收集整理资源 配置站点 创建页面 测试站点 发布站点 维护、更新站点网页制作的常用工具 网页设计软件 Dreamweaver是目前使用最多的网页设计软件。图像处理软件 制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。动画制作软件 网页动画制作中最常用的软件非Flash莫属。 认识Dreamweave

7、r 8 使用Dreamweaver 8制作网页之前，需先将该软件安装到电脑中，其方法与安装其他软件相似，用户可根据提示操作。 Dreamweaver 8的基本操作 启动Dreamweaver 8 新建空白HTML网页 保存网页文档 预览网页效果 退出Dreamweaver 8 启动Dreamweaver 8 选择开始所有程序MacromediaMacromedia Dreamweaver 8菜单命令 新建空白HTML网页 选择文件 新建菜单命令，打开“新建文档”对话框，在“分类”栏中选择“基本页”选项，在“基本页”栏中选择“HTML”选项，单击“创建”按钮。 保存网页文档 选择文件保存菜单命令

8、，打开的“另存为”对话框，在“保存在”下拉列表框中选择文件的保存路径，在“文件名”文本框中输入保存的文件名，单击“保存”按钮。 预览网页效果 选择文件 在浏览器中预览IExplore 6.0菜单命令在IE浏览器中预览网页文档的效果。 退出Dreamweaver 8 单击Dreamweaver 8窗口右上角的“关闭”按钮。单击Dreamweaver 8窗口左上角的图标，在弹出的下拉菜单中选择“关闭”命令。在Dreamweaver 8窗口中选择文件退出菜单命令。在当前窗口为Dreamweaver 8工作界面时，按【Alt+F4】键退出Dreamweaver 8。Dreamweaver 8 工作界面

9、介绍 插入栏文档工具栏文档编辑区网页标签扩展按钮浮动面板组属性面板标签选择器水平标尺 和 垂直标尺上机实战 本课上机实战将练习在Dreamweaver 8中新建一个只包含文本的简单网页，并使用IE浏览器预览其效果。其中主要练习Dreamweaver 8的启动、新建文档、保存网页、预览网页和退出Dreamweaver 8的操作。 课堂讲解 上机实战 第2课 站点的基本操作 课堂讲解 站点的规划 创建本地站点 创建远程站点 管理本地站点 管理站点地图 页面设置 站点的规划 Dreamweaver 8的站点类型 规划站点结构 绘制网站结构草图 Dreamweaver 8的站点类型 本地站点 远程站点

10、 测试站点 规划站点结构 规划站点结构是设计站点的必要前提，其操作是将不同的文件分类存放在文件夹中以便于设计者管理。合理地组织站点结构，可提高工作效率，加快对站点的设计。 绘制网站结构草图 站点规划好之后，就可以根据规划绘制出一个网站结构草图，以便于有一个清晰的思路。 外语影片“零零影视”网站首页动作片国语影片喜剧片外语影片国语影片爱情片外语影片国语影片今日推荐艺术片外语影片国语影片恐怖片外语影片国语影片影星专辑创建本地站点 新建站点 新建文件夹 新建网页文件 新建站点 通过站点新建站点菜单命令或“文件”面板新建站点。 新建站点 新建文件夹 建立好站点后就可以在站点中新建文件夹，该文件夹主要用

11、来存储这个网站中用到的网页元素，如图片、音乐等。 新建网页文件 新建网页文件的方法与新建文件夹的方法相同 。创建远程站点 创建远程站点的方法与创建本地站点的方法类似，只是无需在站点文件夹下再新建文件夹或网页文件。 管理本地站点 编辑本地站点 删除本地站点 编辑本地站点 选择本地站点 删除站点中的文 件和文件夹 更改站点信息 删除本地站点 如果不需要某个站点时，可以将其从站点列表中删除。管理站点地图 定义主页 查看站点地图 在站点地图中管理页面文件 定义主页 在使用站点地图查看站点时必须保证这个站点已定义了一个主页，因为主页是一个站点的根节点，必须有根节点才有各个支节点，也就是各个子页。 查看站

12、点地图 查看站点地图是在Dreamweaver 8的“文件”面板的“视图”下拉列表框中选择“地图视图”选项。 在站点地图中管理页面文件 选择页面文件 打开页面文件 新建页面文件 更改页面标题选择页面文件 在站点地图中的某个页面文件上单击鼠标即可选择该文件。 按住【Shift】键的同时单击需要选取的文件，可选择多个连续的页面文件。 按住【Ctrl】键的同时单击需要选取的文件，可选择多个不连续的页面文件。打开页面文件 在页面文件上双击鼠标即可打开该文件。 在选择页面之后，选择文件打开菜单命令打开页面。 选择页面后单击鼠标右键，在弹出的快捷菜单中选择“打开”命令可打开页面。 新建页面文件 在建立好站

13、点地图之后，如果还需要在其中添加新的网页文件，可以在站点地图中新建一个页面文件。 更改页面标题 在站点地图中可对页面标题进行更改，以方便绝对站点的管理。 页面设置 当站点建立好之后，就可以进行具体的网页编辑操作了，但在编辑网页之前，还需要对页面进行一些简单的属性设置以方便以后的工作。 上机实战 本课上机实战将练习创建一个名为“国画欣赏”的站点，将其中的本地站点保存在“D:guohua”文件夹下，远程站点保存在“E:guohua”文件夹下。然后为“国画欣赏”网站建立一个存放图片的文件夹“pic”，并新建名为“index.html”、“ghzs.html”、“jrmh.html”、“ghds.ht

14、ml”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件，最后设置“index.html”的页面属性。国画知识分类欣赏联系我们国画大师“国画欣赏”网站首页今日名画国画论坛课堂讲解 上机实战 第1课 为网页添加文本 课堂讲解 插入文本 格式化文本 项目列表的应用 标尺和网格 插入文本 插入普通文本 插入特殊字符 在字符之间添加空格 插入其他文本插入普通文本 将插入点定位在文档编辑区中，直接输入文本即可。 在Word等文本编辑软件中编辑好文本之后，将其复制到剪贴板上，然后在Dreamweaver 8中将插入点定位到文档编辑区中，粘贴剪贴板中的文本即可。 插入特殊字符

15、 在Dreamweaver 8中编辑文本时，往往会遇到一些无法通过键盘直接输入的特殊字符，如版权符号、注册商标符号等，这时可通过Dreamweaver 8插入特殊字符的功能进行插入。 在字符之间添加空格 Dreamweaver 8中的文档格式都是以HTML编码形式存在的，而HTML编码中只允许字符之间包含一个空格，所以在Dreamweaver 8中无论按多少次空格键都只会输入一个空格。 插入其他文本 插入水平线 添加水平线 修改水平线 插入日期 添加水平线 在文档编辑区将插入点定位到所需位置，选择插入HTML水平线菜单命令或单击“插入”栏中的“HTML”选项卡在其中单击 按钮即可添加水平线。

16、修改水平线 初始绘制的水平线的格式往往不能满足实际需要，此时可通过属性面板对其进行修改。 插入日期 在制作网页时，有时需要插入当前的日期，Dreamweaver 8提供了快速插入日期和时间的功能。 格式化文本 设置字体外观 设置字体大小 设置颜色 设置字体样式 设置对齐方式 设置标题格式 设置样式 设置字体外观 用户也可对属性面板的“字体”下拉列表框中的字体列表重新编辑。 设置字体大小 在属性面板的“大小”下拉列表框中选择相应的选项，并选择其后的“单位”下拉列表框中相应的单位选项，即可设置所选文本的字体大小。 其中字体的度量单位有像素（px）、厘米（cm）等，可根据具体情况进行选择，但一般都以

17、像素为单位。 设置颜色 单击属性面板中的 按钮，在弹出的颜色列表框中选择相应的选项可设置所选文本的字体颜色，在其后的文本框中直接输入颜色的英文名（如Red、Green等）或以“#”开头的十六进制颜色代码（如#ff0000、00ff00）设置所选文本的颜色。设置字体样式 粗体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本加粗。单击按钮即可设置“加粗”设置，再次单击按钮可取消“加粗”设置。 斜体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本进行倾斜设置。选中按钮即可将所选的文本应用“倾斜”。

18、再次单击按钮可取消“倾斜”设置。 设置对齐方式 通过属性面板中的“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮和“两端对齐”按钮可设置文本的对齐方式。 设置标题格式 在属性栏的“格式”下拉列表框中可设置标题格式，其中“段落”是应用标签的默认格式，“标题 1”选项应用标签，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。 设置样式 属性面板中的“样式”下拉列表框可用于显示当前应用于所选文本的样式。项目列表的应用 有序列表 无序列表 定义列表 为现有文本创建列表 创建嵌套列表 设置项目列表属性 有序列表 有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，其中

19、前导字符可以是阿拉伯数字、英文字母或罗马数字等。 无序列表 无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。 定义列表 定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。 为现有文本创建列表 除了先创建列表项再输入文本外，还可以先输入文本，然后再设置列表项。 创建嵌套列表 嵌套列表是包含在其他列表中的列表。 设置项目列表属性 使用“列表属性”对话框可以设置列表项的外观，包括编号样式、项目符号样式等。 标尺和网格 标尺 网格 标尺 标尺分为水平标尺和垂直标尺，分别显示在Dreamweaver 8文档编辑区的上方和左侧。标尺

20、的单位包括像素、厘米和英寸，在默认状态下使用像素为单位。 网格 网格与标尺都是定位工具，但在网页布局中使用网格更方便。文档编辑区中显示了网格后，就可以对网页元素进行准确的定位了。 上机实战 在本课的上机实战中，将在已有基本框架（相关知识将在后面几课详细讲解）的“风行天科技”网站的首页页面中添加文本、项目列表，并对它们进行设置，如缩进、加粗、倾斜、大小、颜色等。 课堂讲解 上机实战 第4课 为网页添加图像 课堂讲解 网页图像的格式及来源 插入图像 设置图像属性 图像高级设置 网页图像的格式及来源 GIF格式 JPEG格式 PNG格式 网页图像来源 GIF格式 GIF全称为“Graphics In

21、terchange Format”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。 JPEG格式 JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。 PNG格式 PNG全称为“Portable Network Graphics”，意为便携网络图像，它是逐渐流行的网络图像

22、格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。 网页图像来源 网页图像的素材有很多来源，如可以使用图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作；可以购买网页素材光盘；可以从网络上下载等。 插入图像 直接插入 占位符插入 图像的放大显示 直接插入 选择插入图像菜单命令。单击插入栏的“常用”选项卡中的按钮。按【Ctrl+Alt+I】键。 占位符插入 制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。 将图像确定后双击占位符，在打

23、开的对话框中设置后插入即可。 图像的放大显示 Dreamweaver 8新增的放大镜功能可以让用户更方便地进行对齐图像、选择较小的对象以及查看较小的文本、动画或网页元素等操作。 设置图像属性 在网页中插入图像后可通过属性面板对其属性进行修改等设置。 图像命名 图像大小 编辑图片 源文件设置 文本说明 图像与文本的对齐 图像边距 图像边框 图像命名 为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。 图像大小 在Dreamweaver 8中插入图像后系统会自动将图像的原始大小显示

24、在“宽”和“高”文本框（以像素为单位）中。 编辑图片 在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Fireworks将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。 源文件设置 在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的 按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。 文本说明 在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。 图像与文本的对

25、齐 选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。 图像边距 选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离。 图像边框 选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。 图像高级设置 鼠标经过图像设置 插入Fireworks HTML对象 鼠标经过图像设置 鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。 插入Fireworks HTML对象 Macromedia公司的图形处理软件Fi

26、reworks优化后的图像和HTML文件。使用Dreamweaver可直接插入保存到所需的Dreamweaver站点文件夹中。 上机实战 本课上机实战主要练习在网页中插入图像并对其进行属性设置。在练习过程中，将用到课堂讲解中所学的插入图像的方法、图像属性设置的方法、热点链接的设置及鼠标经过图像的创建方法等知识。 课堂讲解 上机实战 第5课 创建超级链接 课堂讲解 超级链接概念 超级链接分类 创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建图像超级链接 创建导航条 超级链接概念 超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链

27、接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。 超级链接分类 绝对超级链接 文档相对路径 站点根目录相对路径 绝对超级链接 绝对超级链接就是形如“http:/www.china/zh_cn”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“http:/”。一般用于创建站外具有固定地址的超级链接。文档相对路径 使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以

28、不用更新各个超级链接。 站点根目录相对路径 站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站点根目录，在同一个站点中网页的超级链接也可采用这种方法。 创建文本超级链接 文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。 创建锚链接 创建命名锚记 链接命名锚记 创建命名锚记 在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。 链接命名锚记 创建好锚记之后，必须创建对应的超级链接源端点。 创建空链接 要想对文本设置行为，首先必须为文本

29、建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。 为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。 创建电子邮件超级链接 电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。 创建图像超级链接 为一般图像创建超级链接 创建图像热点超级链接 为一般图像创建超级链接 创建图像热点超级链接 要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超

30、级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver 8的图像热点超级链接功能就能避免这个问题。 创建导航条 插入导航条 编辑导航条 插入导航条 导航条一般由图像或图像组组成，这些图像的显示内容随用户的操作不同而进行相应的变化。导航条为访问者浏览不同网页提供了一条捷径。 编辑导航条 上机实战 本课上机实战制作过程可分为左侧导航图像超级链接的创建、主要内容区文本和图像超级链接的创建、公司Logo下方的图像热点超级链接的创建及底部版权信息区电子邮件超级链接的创建4部分进行。 课堂讲解 上机实战 第6课 在网页中应用表格 课堂讲解 插入表格 输入表格内容 表格嵌套 选择表格 合并及

31、拆分单元格 插入或删除行或列 设置表格、单元格属性和表格模板 表格内容的移动和排序 表格数据的导出 插入表格 在网页制作中，对页面进行布局是非常重要的，表格就是页面布局中常用的方式。Dreamweaver 8不仅支持在表格中有序地排列数据，还可用表格对网页中的文本、图像及其他元素进行定位。 输入表格内容 手动添加表格内容 从其他文档导入表格式数据 手动添加表格内容 将表格插入到文档后即可向表格添加文本或图像等内容。向表格添加内容的方法很简单，只需将插入点定位到要输入内容的单元格中，再输入文本或插入图像即可。从其他文档导入表格式数据 Dreamweaver 8可以将创建在另一个应用程序（如写字板

32、文件）中的数据导入到网页中并设置为表格的格式，而且各数据之间不可以制表符、逗号、冒号、分号或其他分隔符分隔开来。 表格嵌套 嵌套表格是表格布局中一个十分重要的环节，它是指在一个表格的单元格中再插入一个表格，嵌套表格的宽度受所在单元格的宽度限制，其编辑方法与表格相同。 选择表格 选择整个表格 选择整行或整列 选择单元格 选择整个表格 选择整行或整列 将鼠标光标移到要选择行或列的左侧或上方，当需要选择的行或列边框线呈红色时单击鼠标即可。 选择单元格 单元格的选择分为选择单个单元格和选择多个单元格区域。合并及拆分单元格 合并单元格 拆分单元格 合并单元格 合并单元格操作只能针对连续的单元格使用。 拆

33、分单元格 表格中每一行中的单元格列数可能不等，这时就可根据需要使用拆分命令把一个单元格变为几个单元格。 插入或删除行或列 插入单行或单列 插入多行或多列 删除行或列 插入单行或单列 插入多行或多列 删除行或列 将插入点定位到要删除行或列的任意一个单元格中，然后选择修改表格删除行菜单命令或选择修改表格删除列菜单命令。 选择表格要删除的行或列，然后选择编辑清除菜单命令或按【Delete】键。 设置表格、单元格属性和表格模板 设置表格属性 设置单元格属性 套用表格模板设置表格属性 “表格”属性面板中显示了插入表格的所有特性，通过修改面板中的参数可快速地编辑表格外观。 设置单元格属性 在编辑网页时除可

34、以设置整个表格的属性外，还可以单独设置表格中某行、列或单元格的属性。套用表格模板 在Dreamweaver 8中提供了多个表格模板供用户选择使用，还可以通过设置模板的参数来调整表格的外观。 表格内容的移动和排序 表格整列内容的移动表格的排序 表格整列内容的移动表格的排序 表格一般用来处理数据，在处理数据的同时还需要对表格中的各项进行排序。 表格数据的导出 因为语言原因，导出的文件只能用写字板打开才能正确显示其中的数据，在其他程序中打开会乱码。 上机实战 本课上机实战练习“项目介绍”页面的制作，主要用到表格的创建、表格内容的添加和表格属性设置等知识。本节将在已有基本框架的页面基础上进行制作。 课

35、堂讲解 上机实战 第7课 在网页中应用框架 课堂讲解 认识框架和框架集 框架和框架集的创建 框架和框架集的选择和删除 框架和框架集的保存 框架和框架集的属性设置 处理不能显示框架的浏览器 框架的链接 认识框架和框架集 框架是将一个页面划分成不同的文档区，每个文档区显示独立的内容，其效果是在浏览网页时，网页中一部分区域（如公司Logo、导航条）内容不改变，而其他区域内容在不断发生改变。 框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容（对不能显示框架的浏览器进行的处理除外，即部分），框架集文

36、件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。 框架和框架集的创建 在“插入”栏插入预定义的框架集 创建预定义框架集 手动设计框架 在“插入”栏插入预定义的框架集 在Dreamweaver 8中预定义了一些框架集样式，需要使用时直接插入即可。 创建预定义框架集 手动设计框架 框架和框架集的选择和删除 认识“框架”面板 选择框架与框架集 删除框架 认识“框架”面板 “框架”面板中显示所创建的框架结构，并在不同的框架区域中显示框架的名称。当在框架网页中新建、删除框架，或修改框架的尺寸、名称等时，“框架”面板中的示意图会跟随变化。 选择框架与框架集 在编辑窗口中选择

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

38、个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。 保存框架 保存框架集 保存框架集中的所有网页 保存框架 将插入点定位到要保存的框架中。 选择文件保存框架菜单命令，在打开的“另存为”对话框中像保存其他网页一样指定保存路径和文件名，然后单击“保存”按钮即可。 保存框架集 选中要保存的框架集。 选择文件保存框架页菜单命令，打开“另存为”对话框。 在“保存在”下拉列表框中选择框架集的保存路径，在“文件名”文本框中为框架集命名。 单击“保存”按钮即可保存框架集。 保存框架集中的所有网页 框架和框架集的属性设置 框架集的属性设置 框架集文档标题的设置 框架的属性设置 框架

39、集的属性设置 使用框架集属性面板可以查看和设置大多数框架集属性。 框架集文档标题的设置 当访问者在浏览器中查看该框架集时，标题将显示在浏览器的标题栏中。 框架的属性设置 处理不能显示框架的浏览器 由于在低版本的浏览器中不能正确显示使用了框架的网页和框架中的内容，因此在Dreamweaver 8中允许指定在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示内容。此类内容存储在框架集文件中，用标签括起来。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用标签括起来的内容。 框架的链接 在使用了框架技术文档中的链接与一般文档中的链接不同，增加了与框架有关的链接目标，可以在一个框架内使用链接改变

40、另一个框架的内容。 上机实战 本课上机实战主要练习个人网页的页面制作。在练习过程中，主要用到框架的创建、框架和框架集的属性设置、框架和框架集的保存、不能显示框架的处理等知识。本页面分为上中下3个框架来制作，在制作之前应先制作好各框架中要显示的网页。 课堂讲解 上机实战 第8课 在网页中应用层 课堂讲解 创建层 认识“层”面板 选择、移动和对齐层 层大小和属性设置 层的显示和隐藏 层名的变更 层的堆叠和删除 层与表格的相互转换 创建层 层的首选参数设置 层的建立 层的嵌套 层的首选参数设置 在新建层之前，通过“首选参数”对话框中的“层”选项来设置层的默认属性。 层的建立 将插入点放置在“文档”编

41、辑窗口中，然后选择插入布局对象层菜单命令将自动在插入点插入一个层。在“插入栏”的“布局”插入栏中单击“绘制层”按钮，拖动鼠标绘制一个层。在“插入栏”的“布局”插入栏中单击“绘制层”按钮，在文档编辑窗口中单击鼠标可绘制一个层。在“插入栏”的“布局”插入栏中单击“绘制层”按钮，按住【Ctrl】键并拖动即可连续绘制多个层。 层的嵌套 层与表格相似，可进行嵌套。在某层内新创建的层称为嵌套层或子层，嵌套层外部的层称为父层。子层可浮动于文本编辑窗口的任何位置，子层的大小也可以大于父层，可根据实际需要嵌套多个层。 认识“层”面板 “层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板

42、，可选择窗口层菜单命令或按【F2】键。 选择、移动和对齐层 选择层 选择单个层 选择多个层 移动层 对齐层 选择单个层 在文档编辑区中单击层边框。在层中单击鼠标左键，再单击该层的选择柄。在“层”面板中单击要选择的层的名称。按住【Ctrl+Shift】键并在层中单击即可选择层。 选择多个层 按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。 按住【Shift】键，在“层”面板中单击要选择的多个层的名称。 移动层 在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行移动。 对齐层 在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层

43、中所有子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。 层大小和属性设置 层大小的设置 设置单个层的大小 设置多个层的大小 层属性的设置 设置单个层的属性 设置多个层的属性 设置单个层的大小 在文档编辑区选择一个层，在出现的调整柄上按住鼠标左键不放并拖动，当调整到适当的大小时释放鼠标即可。在文档编辑区选择一个层，按住【Ctrl】键的同时再按键盘上的方向键即可按一次1个像素的步幅来调整层大小。在文档编辑区选择一个层，按住【Shift+Ctrl】键的同时再按键盘上的方向键即可按一次10个像素的步幅来调整层大小。在文档编辑区选择一个层，以像素为单位在属性面板中输入

44、宽度和高度的值。 设置多个层的大小 在文档编辑区选择两个或多个层，选择修改排列顺序设成宽度相同菜单命令或修改排列顺序设成高度相同菜单命令。首先选择的层将自动调整为最后一个选择的层相同的宽度或高度。 在文档编辑区选择两个或多个层，再在属性面板中的“多个层”栏中输入宽度和高度值，这些值将应用于所有选择的层。 设置单个层的属性 在“属性”面板中进行设置。设置多个层的属性 在“属性”面板中进行设置。层的显示和隐藏 在层中可插入所有的网页元素，若想控制层内元素的显示与隐藏可通过改变层的可见性来实现。 单个层的显示和隐藏 多个层的显示和隐藏 单个层的显示和隐藏 在Dreamweaver 8中可通过“层”面

45、板和属性面板对层的显示或隐藏进行控制。 多个层的显示和隐藏 更改多个层的可见性可在“层”面板中设置，单击该列顶部标题的“眼睛”图标，设置所有的层的显示或隐藏。要将子层设置为“继承”父层的属性则需在属性面板中设置。 层名的变更 层的名称并非固定不便，为了制作网页时方便工作，可以将层名更改为容易理解和记忆的名称，变更层的名称有以下两种方法。在“层”属性面板的“层编号”文本框中输入层的名称。在“层”面板中设置层的名称。 层的堆叠和删除 层的堆叠设置 用属性面板设置层的堆叠 用“层”面板设置层的堆叠 使用菜单命令设置层的堆叠 层的删除 用属性面板设置层的堆叠 在“层”面板或文档编辑区中选择一个层。在“

46、层”属性面板的“Z轴”文本框中输入一个较大的数字将该层在堆叠顺序中上移，输入一个较小的数字可将该层在堆叠顺序中下移。 用“层”面板设置层的堆叠 选择窗口层菜单命令或按【F2】键打开“层”面板。选择要改变堆叠顺序的层，将层向上或向下拖至所需的位置时释放鼠标即可。 使用菜单命令设置层的堆叠 在“层”面板或文档编辑区中选择一个层。选择修改排列顺序子菜单中的“移到最上层”或“移到最下层”命令即可。 层的删除 当不需要某层时，就应将该层删除。在“层”面板或文档编辑区中选择需删除的层，然后按【Delete】键或选择编辑清除菜单命令，还可以在层上单击鼠标右键，在弹出的快捷菜单中选择“删除标签”命令，将层删除

47、。如果将嵌套层中的父层删除，则其下包含的所有子层也将同时被删除。 层与表格的相互转换 将层转换为表格 将表格转换为层 将层转换为表格 层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加方便，但层只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。将表格转换为层 在网页制作中，表格的灵活性没有层的灵活性强，为了方便调整一些元素的位置，可将表格转化为层。由于层能定位到网页中任何位置，所以将

48、表格转换为层后可以方便定位网页元素的位置。 上机实战 本课上机实战将用层布局“悠悠音乐”网站首页页面。通过练习可使读者巩固层的创建、层的选择、层的移动以及层的属性设置等操作。 课堂讲解 上机实战 第9课 为网页插入动态元素 课堂讲解 了解动态元素 插入Flash影片 插入Flash按钮 插入Flash文本 插入Flash Video 插入其他动态元素 为网页加入音乐文件 了解动态元素 媒体的来源 系统集成 网络下载 从素材库导入 自己制作 Flash简介 系统集成 在Dreamweaver 8中集成了许多Flash按钮，可以在它的页面中方便地插入Flash按钮和Flash文本。 网络下载 提供

49、各种媒体下载的网站非常多，如果不知道具体的网址，可通过google、百度等搜索引擎搜索。虽然网络上的媒体异彩纷呈，下载后便可使用，非常方便，但如需作商业用途，则请参照相关的版权信息，以免引发版权纠纷。 http:/ 素材精品屋http:/ 动态网站制作指南http:/ 网页特效集锦http:/ 3lian素材http:/www.J Java网站http:/ Macromedia公司的 一个交互性娱乐服务网站 从素材库导入 对于没有使用网络的用户，可以购买市面上出售的网页制作素材库光盘，使用时只需将素材导入Dreamweaver 8中即可。 自己制作 在网上下载和购买的媒体虽然方便，但在实际中往

50、往不能直接为我们所用。如果自己对制作这些素材的软件熟悉，有一定的美术、编程基础，也可自己制作。不过各种媒体的制作软件都不同，Flash动画是使用Macromedia Flash软件来制作的，而Shockwave影片则是通过Macromedia Director来创建的。在网页中使用最多的就是Flash元素了。 Flash简介 *.fla：Flash的源文件，在Flash应用程序中创建，只能在Flash中打开，不能在Dreamweaver 8或浏览器中打开。必须在Flash中将其导出为SWF或SWT的格式文件，才可以在浏览器中播放。*.swf：压缩格式的Flash文件，是运用于网络中最优的格式文

51、件，可以在浏览器和Dreamweaver 8中播放，但不能在Flash中打开进行编辑。使用Dreamweaver 8集成的Flash按钮和Flash文本创建的文件就是这种类型的文件。*.swt：这种类型的文件允许对Flash动画文件中的信息进行编辑。它主要用在Flash按钮对象中，可以利用自己的文本或链接来修改模板，创建自己的SWF来插入到设计视图中。在“Dreamweaver 8ConfigurationFlash Objects Flash Buttons and Flash Text”文件夹中可以查看这些文件。 插入Flash影片 插入Flash影片之前，首先应在Flash制作软件中完成

52、影片的制作，最好将其制作好后保存在站点相应文件夹中。 插入Flash按钮 在Dreamweaver 8中可以插入自己制作的Flash按钮，也可插入Dreamweaver 8集成的动态按钮。 插入Flash文本 Flash文本是Dreamweaver 8集成的文本动画。插入Flash文本与插入Flash按钮的方法类似。 插入Flash Video 插入Flash Video是Dreamweaver 8新增加的功能，使用该功能可以轻松的在网页中插入一段Flash视频，在网页中浏览该视频时，网页不仅显示该视频信息，还将显示播放Flash视频的控件。 插入其他动态元素 插入Shockwave影片 插入

53、Java Applet 插入ActiveX控件 插入插件插入Shockwave影片 Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持。 插入Java Applet Java Applet是美国SUN公司开发的Java程序设计语言中的一个小应用程序，它能实现动态、安全和跨平台的网络应用。将Java Applet嵌入到HTML语言中能实现网页中各种各样的特殊效果和较为复杂的控制。 插入ActiveX控件 ActiveX控件是Microsoft对浏览器的能力扩展，ActiveX控件的作用和插件基本上是相同的

54、，但两者还是存在着差异，载入网页时，如果浏览器不支持ActiveX控件，浏览器会自动安装所需软件，如果是插件，则需用户手动安装相关软件。 插入插件 如果想在浏览器中访问更多类型的媒体对象（如Shockwave影片和MIDI音乐等），就必须借助插件，前面介绍的Shockwave就是插件中的一员。为网页加入音乐文件 当访问者打开了添加背景音乐的网页时背景音乐即会自动播放，设置背景音乐可以加深浏览者对网站的印象，更加突出网站主题。 加入背景音乐 添加背景音乐代码 通过插入插件来添加背景音乐 页面音乐的链接和嵌入添加背景音乐代码 其中src指定音乐文件的位置，hidden=true 表示不显示播放器，

55、loop=true表示循环播放。 页面音乐的链接和嵌入 前面讲解了背景音乐的设置，但有时需要对一段文本或一张图像链接声音文件，产生诸如单击文本或图像时能听到“噗”一声的效果。嵌入声音到网页中也是通过插入插件的方法实现的，这里不再赘述。另外，也可以通过添加行为的方法来实现声音的链接和嵌入。 上机实战 本课上机实战主要练习在有基本框架的页面中插入Flash影片、Flash文本、Flash按钮及背景音乐等知识。通过练习，读者应掌握网页中各种动态元素的插入方法，并重点掌握Flash媒体元素的插入。 课堂讲解 上机实战 第10课 行为与事件 课堂讲解 什么是行为 什么是事件 认识“行为”面板 添加、修改

56、和删除行为 获取更多的行为 应用行为 什么是行为 行为（Behavior）是在Dreamweaver 8中预置的JavaScript程序，由事件（event）和对应动作（actions）组成。它能实现用户与网页间的交互，通过某个动作来触发某项计划。如当用户在页面中将鼠标移动并单击某一个链接后，载入了一幅图像，这就产生了两个事件onMouseOver和onClick，同时触发了一个动作载入图像。 什么是事件 浏览器都会提供一组事件，事件与动作相关联。当访问者与网页进行交互时，浏览器生成事件，但并非所有的事件都是交互的，如设置网页每10s自动重新载入。 根据所选对象和在“显示事件”子菜单中指定的浏

57、览器的不同，显示在“事件”下拉列表框中的事件将有所不同。Internet Explorer和Netscape Navigator是当今主的流浏览器。IE4表明此事件适用于Internet Explorer 4.0浏览器，NE4表明此事件适用于Netscape Navigator 4.0浏览器。 认识“行为”面板 在使用行为前要先了解行为的具体操作场所“行为”面板，在Dreamweaver 8右侧的浮动面板组中打开“标签”面板，在其中单击“行为”选项卡打开“行为”面板，如没有“行为”面板，可以选择窗口行为菜单命令，也可按【Shift+F4】键打开“行为”面板。 添加、修改和删除行为 添加行为 修

58、改行为 删除行为 添加行为 在不同类型的浏览器中可以根据需要将行为附加到整个文档、链接、图像、表单对象或任何其他的HTML元素中。 修改行为 选择添加行为的对象。 按【Shift+F4】键打开“行为”面板，在其“动作”列表中双击要修改的行为动作或将其选择并按【Enter】键，也可单击鼠标右键，在弹出的快捷菜单中选择“编辑行为”命令，在打开的对话框中进行修改，然后单击“确定”按钮。 删除行为 在“行为”面板中选择要删除的行为。 单击 按钮或在行为上单击鼠标右键，在弹出的快捷菜单中选择“删除行为”命令，还可以直接按【Delete】键即可。 获取更多的行为 Dreamweaver 8自带的行为比较少

59、，如果想获取更多的行为可以从Macromedia公司和其他第三方的开发网站下载。在“行为”下拉列表中选择“获取更多的行为”选项，则会打开Macromedia公司官方网站提供的行为下载页面。 应用行为 设置文本 “设置层文本”行为 “设置框架文本”行为 “设置文本域文本”行为 “设置状态栏文本”行为 播放声音 打开浏览器窗口 交换图像 恢复交换图像 改变属性 检查浏览器 检查插件 检查表单 设置导航栏图像 转到URL 弹出信息 拖动层 显示-隐藏层 弹出式菜单 调用JavaScript 控制Shockwave或Flash 预先载入图像 跳转菜单 跳转菜单开始 时间轴 “设置层文本”行为 “设置层

60、文本”行为可以用指定的内容替换现有层的内容和格式设置，但将保留层的属性，包括颜色。该内容可以包括任何有效的HTML源代码。 “设置框架文本”行为 “设置框架文本”行为可以动态设置框架的文本，用指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的HTML源代码。使用此行为可以动态显示信息。 “设置文本域文本”行为 “设置文本域文字”行为可以用指定的内容替换表单文本域的内容。 “设置状态栏文本”行为 “设置状态栏文本”行为可在浏览器窗口底部左侧的状态栏中显示消息。如可以使用此行为在状态栏中说明链接的目标而不是显示链接的URL。 播放声音 “播放声音”行为用来播放声音和音乐文件，页面背景音乐