网页制作与网站设计第二章

1、网页制作与网站设计第二章第二章第二章 【本章内容【本章内容】 2.1 Dreamweaver入门入门 2.2 文本编排与文本编排与CSS样式样式 2.3 插入图像、动画与媒体元素插入图像、动画与媒体元素 2.4 插入超链接插入超链接 2.5 网页表格网页表格 2.6 使用表单使用表单 2.7 层的使用层的使用 2.8 框架的使用框架的使用 第节第节 Dreamweaver入门入门【本节内容【本节内容】 一一. . Dreamweaver CS4Dreamweaver CS4的界面的界面 二二. . 建立本地站点建立本地站点 三三. . 新建新建HTML网页网页 一一. Dreamweaver

2、CS4的界面 DreamweaverCS4DreamweaverCS4系统界面系统界面: :一一. Dreamweaver CS4的界面 菜单栏菜单栏 菜单栏是描述软件完整功能的方式，它提供软菜单栏是描述软件完整功能的方式，它提供软件功能的所有命令选项。件功能的所有命令选项。插入栏插入栏 插入栏包括多种网页对象（常用、布局、表单、插入栏包括多种网页对象（常用、布局、表单、文本、文本、HTMLHTML、应用程序、应用程序、FlashFlash元素和可以自定义的元素和可以自定义的收藏夹），可用于插入相应的对象。收藏夹），可用于插入相应的对象。 一一. Dreamweaver CS4的界面工具栏工具

3、栏 工具栏中包含按钮可以在文档的不同视图间快速切换：工具栏中包含按钮可以在文档的不同视图间快速切换：“代码代码”视图、视图、“设计设计”视图、同时显示代码和设计视图的视图、同时显示代码和设计视图的”拆分拆分”视图视图, ,以及即时调试以及即时调试运行效果运行效果”实时视图实时视图”。工具栏中还包含一些与查看文档、在本地和。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。远程站点间传输文档有关的常用命令和选项。状态栏状态栏 状态栏提供与您正创建的文档有关的其它信息，它的作用和含义如图状态栏提供与您正创建的文档有关的其它信息，它的作用和含义如图所示。所示。一一. Dr

4、eamweaver CS4的界面属性面板属性面板 网页中的对象都有自身的属性，当选取不同的对象时网页中的对象都有自身的属性，当选取不同的对象时, ,属性面板属性面板显示的内容不相同显示的内容不相同, ,属性面板显示了被选取对象的各种属性，可以随时进行修属性面板显示了被选取对象的各种属性，可以随时进行修改。改。文档窗口文档窗口 文档窗口显示当前文档的内容或内容代码，也就是你编辑网页文文档窗口显示当前文档的内容或内容代码，也就是你编辑网页文档的地方，在这里可以通过菜单命令、工具栏按钮、插入栏按钮、属档的地方，在这里可以通过菜单命令、工具栏按钮、插入栏按钮、属性面板以及面板级等到工具来编辑、制作网页

5、，也可以通过按性面板以及面板级等到工具来编辑、制作网页，也可以通过按”实时实时视图视图”来检验网页的调试结果来检验网页的调试结果,这与浏览器中的显示效果基本相同。这与浏览器中的显示效果基本相同。一一. Dreamweaver CS4的界面选项面板选项面板 选项面板可以随时以选项面板可以随时以直观的方式获得特定功能，直观的方式获得特定功能，它们一般组合成面板组嵌它们一般组合成面板组嵌入在界面的右边。如图：入在界面的右边。如图： 二二. 建立本地站点建立本地站点 在在DreamweaverDreamweaver下创建本地站点的具体步骤：下创建本地站点的具体步骤：1 1、选择选择 站点站点-新建站点

6、新建站点 ，出现，出现“定义站点定义站点”对话对话框。框。2 2、可以使用、可以使用“高级高级”选项页进行站点的定义。选项页进行站点的定义。3 3、设置本地信息，如下图所示。、设置本地信息，如下图所示。 本地信息共有本地信息共有8 8个项目需要设置：定义个项目需要设置：定义“站点名站点名称称”、选择网站本地文件夹、确认是否、选择网站本地文件夹、确认是否“自动刷新文自动刷新文件列表件列表”、选择、选择“默认图像文件夹默认图像文件夹”、选择链接相对、选择链接相对地址、选择地址、选择“默认图像文件夹默认图像文件夹”路径、输入路径、输入“HTTPHTTP地地址址”、“区分大小写的链接区分大小写的链接”

7、、确认是否、确认是否“启用缓启用缓存存”。 二二. 建立本地站点建立本地站点 站点定义对话框站点定义对话框二二. 建立本地站点建立本地站点 举例：定义一个站点举例：定义一个站点“我的网站我的网站” 在在“站点名称站点名称”文本框中输入文本框中输入 我的网站我的网站 。 在在“本地根文件夹本地根文件夹”中输入中输入“D:web”D:web”或是单击右边的文件夹图标后进或是单击右边的文件夹图标后进行选择此文件夹。行选择此文件夹。 选择选择“自动刷新本地文件列表自动刷新本地文件列表”单选框。单选框。 在在“默认图像文件夹默认图像文件夹”文本框中文本框中输入输入 D:WebimagesD:Webima

8、ges，同样可以点击文件夹图标以进行选择。同样可以点击文件夹图标以进行选择。 保持保持“链接相对于链接相对于”单选框的默认值不变。单选框的默认值不变。 在在“HTTPHTTP地址地址”文本框中，你可以输入你已经申请的网站的域名文本框中，你可以输入你已经申请的网站的域名( (可选可选项项) )，如，如。“区分大小写链接区分大小写链接”和和“缓存缓存”两项可以保持默认值不变。两项可以保持默认值不变。 单击单击“确定确定”按钮完成本地站点的设置。按钮完成本地站点的设置。 三三.新建新建HTML网页网页 新建文档新建文档打开打开DreamweaverDreamweaver后，就会显示使用开始页面，在开

9、始页面后，就会显示使用开始页面，在开始页面“创创建新项目建新项目”选项区中选择某个新建项目选项，如选项区中选择某个新建项目选项，如HTMLHTML，即可新即可新建相应类型的新文档，当然也可以使用菜单来新建网页。建相应类型的新文档，当然也可以使用菜单来新建网页。保存网页保存网页 新建网页后，先把网页保存在站点目录下，保存新建的新建网页后，先把网页保存在站点目录下，保存新建的HTMLHTML文文件时，默认的文件名是件时，默认的文件名是Untitled-1Untitled-1等名称，但一般不使用默认等名称，但一般不使用默认的文件名而是自己定义文件名，如的文件名而是自己定义文件名，如temptemp，

10、indexindex，loginlogin等有一等有一定的含义的半角英文（或拼音）名称。默认的位置是在站点文定的含义的半角英文（或拼音）名称。默认的位置是在站点文件夹下面，当然也可以把网页保存在在站点下面的其它文件夹件夹下面，当然也可以把网页保存在在站点下面的其它文件夹中，一般不保存在站点文件夹以外中，一般不保存在站点文件夹以外。 三三.新建新建HTML网页网页预览网页预览网页最常见的浏览正在制作的网页两种方式：最常见的浏览正在制作的网页两种方式： 在在DreamweaverCS4DreamweaverCS4编辑窗口中，点击编辑窗口中，点击“实时视图按钮实时视图按钮”；在在WindowsWin

11、dows（或其它操作系统）中打开站点文件夹，找到已经保存过或其它操作系统）中打开站点文件夹，找到已经保存过网页文件，双击文件就可以预览此网页；网页文件，双击文件就可以预览此网页；先保存网页，使用菜单先保存网页，使用菜单 文件文件-在浏览器中预览在浏览器中预览-IExplore6.0IExplore6.0，或使用快捷键或使用快捷键F12F12进行预览网页（推荐使用快捷键进行预览网页（推荐使用快捷键F12F12）。）。打开与编辑网页打开与编辑网页 可以在可以在DreamweaverCS4DreamweaverCS4文件面板中看到已经保存过的文件，双击该网页文件面板中看到已经保存过的文件，双击该网页

12、文件就可以打开并编辑相应的网页，也要以通过文件就可以打开并编辑相应的网页，也要以通过“文件文件”菜单打开网菜单打开网页文件，操作方法和页文件，操作方法和wordword等应用软件相似。等应用软件相似。 第节第节 文本编排与文本编排与CSSCSS样式样式 【本节内容【本节内容】 一一. .文本输入与文本输入与HTMLHTML属性属性 二二. .CSSCSS样式的创建与应用样式的创建与应用 三三. .CSSCSS样式表文件样式表文件 一一. 文本输入与文本输入与HTMLHTML属性属性 网页内容的编辑，一般以网页内容的编辑，一般以“设计设计”视图下进行，必要的视图下进行，必要的时候转换到时候转换到

13、“代码代码”视图修改代码。当处于设计视图时，可视图修改代码。当处于设计视图时，可直接在文档窗口中输入文本，但在网页中输入空格字符却有直接在文档窗口中输入文本，但在网页中输入空格字符却有讲究，直接使用空格键只能插入一个空格字符，要连续插入讲究，直接使用空格键只能插入一个空格字符，要连续插入多个空格，可以选用下列方法之一：多个空格，可以选用下列方法之一： 使用菜单使用菜单“插入插入”-“HTML”-“特殊字符特殊字符”-“不换行空格不换行空格”； 在代码视图中，加入在代码视图中，加入“&”占位符；占位符； Ctrl+Shift+空格的快捷键插入空格空格的快捷键插入空格(推荐推荐)。 在在“

14、设计设计”视图中，每按一次回车默认为一个段落，系视图中，每按一次回车默认为一个段落，系统会在文本的前后加上了一对统会在文本的前后加上了一对标签标签 。一一. 文本输入与文本输入与HTMLHTML属性属性 例如，选择设计视图，在文档窗口中输入例如，选择设计视图，在文档窗口中输入“锄禾锄禾”：锄禾锄禾锄禾日当午，锄禾日当午，汗滴禾下土。汗滴禾下土。谁知盘中餐，谁知盘中餐，粒粒皆辛苦。粒粒皆辛苦。 我们来设置其我们来设置其HTML属性，文本的属性，文本的HTML属性主要有：格式、类、加粗倾斜、列属性主要有：格式、类、加粗倾斜、列表、表、ID、链接等项目。我们对这首诗应用格式与列表来编排一下。选择、链

15、接等项目。我们对这首诗应用格式与列表来编排一下。选择“锄禾锄禾”，在在HTML属性的属性的“格式格式”下拉选项中，选择下拉选项中，选择“标题标题2”，加粗；再选择其余四句，单，加粗；再选择其余四句，单击击“项目列表项目列表”或或“编号列表编号列表”按钮，转到代码视图，可看到按钮，转到代码视图，可看到body标签内有如下标签内有如下代码：代码：一一. 文本输入与文本输入与HTMLHTML属性属性 锄禾锄禾 锄禾日当午，锄禾日当午， 汗滴禾下土。汗滴禾下土。 谁知盘中餐，谁知盘中餐， 粒粒皆辛苦。粒粒皆辛苦。锄禾 锄禾日当午， 汗滴禾下土。 谁知盘中餐， 粒粒皆辛苦。浏览效果：一一. 文本输入与文

16、本输入与HTMLHTML属性属性 如果要给文本选择某一种汉字字体、字颜色、字大小等属性，就要为如果要给文本选择某一种汉字字体、字颜色、字大小等属性，就要为文本设置文本设置CSS属性才行。选择文本以后，在属性栏里单击属性才行。选择文本以后，在属性栏里单击“HTML”或或“CSS”可在可在HTML属性与属性与CSS属性之间切换。属性之间切换。 文本文本HTML属性中的属性中的“类类”是指通用的样式类、是指通用的样式类、“ID”就是指就是指ID类，要应用类，要应用这些类，必须要先定义才行。这些类，必须要先定义才行。 文本文本CSS属性栏里，有属性栏里，有“目标规则目标规则”、“编辑规则编辑规则”、“

17、CSS面板面板”、字、字体、大小、颜色、加粗倾斜、水平对齐方式（左对齐体、大小、颜色、加粗倾斜、水平对齐方式（左对齐|右对齐右对齐|居中居中|两端对齐）等项。通过这个面板可以为文本创建和指定两端对齐）等项。通过这个面板可以为文本创建和指定CSS样式。样式。 二二. CSS样式的创建与应用样式的创建与应用 在在Dreamweaver中创建中创建CSS样式，可以通过样式，可以通过CSS样样式面板，或者通过属性面板来进行。式面板，或者通过属性面板来进行。在在Dreamweaver CS4右边的面板组中找到右边的面板组中找到“CSS样样式式”标签，双击，就打开了标签，双击，就打开了CSS样式面板。单击

18、样式面板。单击CSS面面板下边的钮，或者在属性面板里选择板下边的钮，或者在属性面板里选择“CSS”并单击并单击“编辑规则编辑规则”，即能打开，即能打开“新建新建CSS规则规则”对话框，对对话框，对话框有话框有“选择器类型选择器类型”、“选择器名称选择器名称”、“定义规则定义规则”等选项。点击等选项。点击“选择器类型选择器类型”下拉列表，出现：类、下拉列表，出现：类、ID、标签、复合内容、标签、复合内容4个选项，这就是我们在第一章节个选项，这就是我们在第一章节学过的四种学过的四种CSS样式的类型：样式类、样式的类型：样式类、ID样式、标签样式、标签样式和伪类样式（复合内容样式）。我们选择样式和伪

19、类样式（复合内容样式）。我们选择“类类”。如图如图 二二. CSS样式的创建与应用样式的创建与应用 类似地，再新建一个样式类类似地，再新建一个样式类fontclass0，在，在“类型类型”属性面板下设置属性面板下设置font-family为黑体、字大小为为黑体、字大小为24px、color为为#F00(红色红色)，“区块区块”下的下的text-align属性属性值也设置为值也设置为center。 二二. CSS样式的创建与应用样式的创建与应用 如果要新建另外三种样式：标签样式、如果要新建另外三种样式：标签样式、ID样式、复样式、复合样式（伪类样式），则在图合样式（伪类样式），则在图2-9中中“

20、新建新建CSS样式样式”对话框，对话框，“选择器类型选择器类型”下要选择：标签、下要选择：标签、ID或复或复合样式；此外，新建样式类和合样式；此外，新建样式类和ID样式需要用户自定样式需要用户自定义一个名称，而新建标签样式和复合样式（伪类）不义一个名称，而新建标签样式和复合样式（伪类）不需要用户自定义名称，只要在需要用户自定义名称，只要在“选择器名称选择器名称”下拉列下拉列表中选择标签名（如表中选择标签名（如body、p、h2、table、tr、td等）或伪类名（如等）或伪类名（如a:link、a:visited、a:hover、a:active等）就可以了等）就可以了 。 二二. CSS样式

21、的创建与应用样式的创建与应用 CSS样式应用于文本样式应用于文本下面我们来应用上面已经创建的两个样式。下面我们来应用上面已经创建的两个样式。应用应用CSS样式，既可在属性板中的样式，既可在属性板中的“HTML”属性中属性中设置，也可在设置，也可在“CSS”属性中设置。选择前面输入的属性中设置。选择前面输入的诗歌诗歌“锄禾锄禾”标题，在其标题，在其HTML属性中的属性中的“类类”下列下列表中选择表中选择fontclass0，也可以在，也可以在CSS属性中的属性中的“目标目标规则规则”下拉列表中选择下拉列表中选择.fontclass0。同样地，将样式类同样地，将样式类fontclass1应用于四句

22、诗歌应用于四句诗歌“锄锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦”。浏览效果：浏览效果：二二. CSS样式的创建与应用样式的创建与应用 查看源代码：查看源代码： /*样式定义开始样式定义开始*/ /*样式定义结束标签样式定义结束标签*/锄禾锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。 不光是样式类能够应用于文本，标签样式、ID样式都可应用于文本。 二二. CSS样式的创建与应用样式的创建与应用 使用标记符样式定义整个网页的字体使用标记符样式定义整个网页的字体要使整个页面文字属性统一为某种样式，可以使用菜要使整个页面文字属性统一为某种样式，可以

23、使用菜单单 “修改修改”-“页面属性页面属性”，在，在“页面属性页面属性”对话框对话框中选择外观（中选择外观（CSS），然后设置面面字体、字大小、），然后设置面面字体、字大小、文本颜色、背景色、背景图像与重复次数、网页的左、文本颜色、背景色、背景图像与重复次数、网页的左、右、上、下边距。右、上、下边距。单击“确定”以后，会在网页head头部自动生成关于body、td、th的标签样式 。二二. CSS样式的创建与应用样式的创建与应用 查看代码，如下：查看代码，如下：二二. CSS样式的创建与应用样式的创建与应用 在网页属性对话框中，还可以设置网页的在网页属性对话框中，还可以设置网页的HTML外观

24、、外观、链接（链接（CSS）、标题（）、标题（CSS）等属性。例如我们设置）等属性。例如我们设置网页的网页的HTML属性如下：属性如下：这将给网页的这将给网页的body标签加上一些属性，代码如下：标签加上一些属性，代码如下：二二. CSS样式的创建与应用样式的创建与应用 标签符内直接定义并应用标签符内直接定义并应用CSS样式样式如果针对某个如果针对某个HTML标签的样式应用很少，甚至只应标签的样式应用很少，甚至只应用一次，建议采用用一次，建议采用style=; 的方式直接在的方式直接在HTML标记符内定义和应用样式。例如：标记符内定义和应用样式。例如：HELP？这是直接在表格单元格内定义的样式

25、，引号中间的样这是直接在表格单元格内定义的样式，引号中间的样式规则（属性名式规则（属性名:属性值属性值;）直接应用于当前单元格中，）直接应用于当前单元格中，也只能应用于当前的单元格中。也只能应用于当前的单元格中。标签符内直接定义和应用标签符内直接定义和应用CSS样式，一般只能在样式，一般只能在“代代码码”视图下直接编辑。视图下直接编辑。三三. CSSCSS样式表文件样式表文件 建设网站时，通常要把一个建设网站时，通常要把一个CSS样式应用到整个样式应用到整个站点的所有网页中去，这可以通过站点的所有网页中去，这可以通过CSS样式文件来实样式文件来实现，现，CSS样式表文件是将多个样式表文件是将多

26、个CSS样式定义集中保存样式定义集中保存在一起的文件，文件扩展名为在一起的文件，文件扩展名为.css。 在其它网页要使用此文件中的样式时，把此样式在其它网页要使用此文件中的样式时，把此样式表文件的链接到这些网页就可以了。表文件的链接到这些网页就可以了。 创建创建CSS样式文件的方法有两种。样式文件的方法有两种。 三三. CSSCSS样式表文件样式表文件 单独新建单独新建CSS样式表文件样式表文件第一种方法是，使用菜单第一种方法是，使用菜单“文件文件”-“新建新建”命令，命令，在打开的对话框中选择页面类型为在打开的对话框中选择页面类型为CSS，如图，如图2-14所示，单击所示，单击“创建创建”按

27、钮，即可进行新建按钮，即可进行新建CSS代码文代码文件的窗口。件的窗口。三三. CSSCSS样式表文件样式表文件 在该在该CSS样式文件中创建几种不同的样式，代码如下：样式文件中创建几种不同的样式，代码如下：h2 /*定义定义h2的样式的样式*/font-family: 黑体黑体;font-size: 24px;color: #F00; /*在在CSS中，用中，用3位十六进制数表示颜色位十六进制数表示颜色*/p /*定义标签定义标签p的样式的样式*/font-family: 楷体楷体_GB2312;font-size: 18px;font-style: normal;color: #000;t

28、ext-align: center; .class1 /*定义一个样式类定义一个样式类*/font-family: 华文新魏华文新魏;font-size: 18px;font-style: normal;color: #000; #id-css1 /*定义一个定义一个ID样式样式*/font-family: 方正姚体方正姚体;font-size: 14px;color: #0F0;三三. CSSCSS样式表文件样式表文件 保存文件，并将文件命名为。查看文件面板，如图保存文件，并将文件命名为。查看文件面板，如图所示，可以看到站点内多了一个名为的样式文件。所示，可以看到站点内多了一个名为的样式文件

29、。也可以在新建也可以在新建CSS文件窗口中，通文件窗口中，通过直接输入代码来编辑过直接输入代码来编辑CSS样式文件样式文件 。 三三. CSSCSS样式表文件样式表文件 在创建在创建CSS样式的同时新建一个样式的同时新建一个CSS样式表文件样式表文件在编辑站内一个网页时，单击在编辑站内一个网页时，单击CSS样式面板下样式面板下 按钮，按钮，出现出现“新建新建CSS规则规则”对话框，在对话框中选择样式对话框，在对话框中选择样式类型、名称，再在下面的类型、名称，再在下面的“规则定义规则定义”中选择中选择“新建新建样式表文件样式表文件”如图所示。如图所示。三三. CSSCSS样式表文件样式表文件 将

30、网页链接样式文件的方法有将网页链接样式文件的方法有link模式和模式和import模式（见第一章节），模式（见第一章节），可使用以下两种方法之一：可使用以下两种方法之一：一种方法是直接在网页代码的一种方法是直接在网页代码的head元素内加入如下代码：元素内加入如下代码：其中其中是样式文件的路径和名称。是样式文件的路径和名称。另一种方法，就是单击另一种方法，就是单击CSS样式面板下的链接按钮样式面板下的链接按钮 ，在弹出的对话框，在弹出的对话框中选择样式文件，并在单选项中选择样式文件，并在单选项 “链接链接”（link）、）、“导入导入”（import）中）中选择一种链接方式。如图所示。按选择一

31、种链接方式。如图所示。按“确定确定”即将样式文件链接到当前即将样式文件链接到当前网页中来了。网页中来了。第节第节 插入图像、动画与媒体元素插入图像、动画与媒体元素 【本节内容【本节内容】 一一. .插入并编辑图像插入并编辑图像 二二. .插入动画和其它媒体元素插入动画和其它媒体元素 一一.插入并编辑图像插入并编辑图像 插入图像插入图像 将光标置于需要插入图像的位置；将光标置于需要插入图像的位置； 执行执行“插入插入”-“图像图像”菜单命令，或者在菜单命令，或者在“插入插入”面板中单击按钮面板中单击按钮 ，弹出，弹出“选择图像源文选择图像源文件件”对话框，在此对话框中选择合适的图像，单击对话框，

32、在此对话框中选择合适的图像，单击“确定确定”按扭即可按扭即可。 一一.插入并编辑图像插入并编辑图像编辑图像属性编辑图像属性选中要修改的图像，可以通过选中要修改的图像，可以通过“属性属性”面板来修改图面板来修改图像的属性，图像属性面板的基本属必和扩展属性，像的属性，图像属性面板的基本属必和扩展属性，通通过单击属性面板右下角的过单击属性面板右下角的 按钮展开、按钮展开、 按扭收缩扩展按扭收缩扩展属性。属性。 一一.插入并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 图像的基本属性主要有：图像的基本属性主要有：设置设置“宽宽”、“高高”属性改变图像的大小。属性改变图像的大小。通过设置通过设置“源

33、文件源文件”来选择图像。来选择图像。“替换替换”的意义为：当图浏览网页时把鼠标放在图像上会显示的文字提的意义为：当图浏览网页时把鼠标放在图像上会显示的文字提示示“Cs3C60分子结构分子结构”，当图像不能正常显示时，显示一个红，当图像不能正常显示时，显示一个红X的同时，把的同时，把“Cs3C60分子结构分子结构”显示在红显示在红X的边上。的边上。“类类”就是为图像应用已经定义了的样式。就是为图像应用已经定义了的样式。“链接链接”处输入新目标处输入新目标URL，意义为：点击图像时，可以打开新目标，意义为：点击图像时，可以打开新目标URL网页或其网页或其它文件。它文件。“编辑编辑”就是使用该图像默

34、认的编辑器来编辑它。就是使用该图像默认的编辑器来编辑它。一一.插入并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 图像的扩展属性主要有：图像的扩展属性主要有：“垂直边距垂直边距”和和“水平边距水平边距”用于确定图像上下、左用于确定图像上下、左右间距。右间距。简单图像处理工具简单图像处理工具 中的中的“边框边框”用于用于给图像加一个指定宽度的边框，后面几个工具按钮依次给图像加一个指定宽度的边框，后面几个工具按钮依次是裁剪、重新取样、亮度和对比度、锐化。使用这几个是裁剪、重新取样、亮度和对比度、锐化。使用这几个工具按钮，可以对插入进来的图像进行简单的处理，与工具按钮，可以对插入进来的图像进行简

35、单的处理，与第一章所讲的图像滤镜完全不同，这些处理会实质性地第一章所讲的图像滤镜完全不同，这些处理会实质性地改变图像文件。改变图像文件。 一一.插入并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 例如，给图形添加边框、进行裁剪和锐化，结果如下：例如，给图形添加边框、进行裁剪和锐化，结果如下： 一一.插入并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 热点工具按钮热点工具按钮 用于设置图像的热点区域，热点用于设置图像的热点区域，热点主要用于链接。在图像中设置了主要用于链接。在图像中设置了3个热点区域，每个热点个热点区域，每个热点区都可以单独做一个链接。区都可以单独做一个链接。“对齐对齐”

36、属性用于指定图像在网页区域的左右、上下对属性用于指定图像在网页区域的左右、上下对齐方式。齐方式。 一一.插入并编辑图像插入并编辑图像图像占位符的使用图像占位符的使用 图像占位符是在准备好将最终图形添加到网页之前使用图像占位符是在准备好将最终图形添加到网页之前使用的图形，在网页布局时常常用到。的图形，在网页布局时常常用到。 （1）插入图像占位符）插入图像占位符在文档窗口中，将光标置于要插入点的位置。选择在文档窗口中，将光标置于要插入点的位置。选择“插插入入”-“图像图像”-“图像占位符图像占位符”，或者在插入面板中单，或者在插入面板中单击图像下拉按钮，再选择击图像下拉按钮，再选择 ；一一.插入并

37、编辑图像插入并编辑图像图像占位符的使用图像占位符的使用 （2）替换图像占位符）替换图像占位符根据图像占位符的尺寸，用根据图像占位符的尺寸，用fireworks或或photoshop等等软件中制作相应大小的图像。然后在软件中制作相应大小的图像。然后在Dreamweaver中中推进换它。推进换它。替换图像占位符，执行下列操作：替换图像占位符，执行下列操作：选择图像占位符，然后在属性面板中单击选择图像占位符，然后在属性面板中单击“源文件源文件”框框旁的文件夹图标，或者双击占位符，将出现旁的文件夹图标，或者双击占位符，将出现“选择图像选择图像源文件源文件”的对话框，在该对话框中选择要替换占位符的的对话

38、框，在该对话框中选择要替换占位符的图像，然后单击图像，然后单击“确定确定” 。见上一张。见上一张PPT图示。图示。一一.插入并编辑图像插入并编辑图像图像应用图像应用CSSCSS样式样式 图像属性面板中有图像属性面板中有“类类”这个栏目，这是为图像选择这个栏目，这是为图像选择CSS样式而设计的。图像对象样式而设计的。图像对象可以应用标签（可以应用标签（img）样式、）样式、ID样式、样式类，可以将样式单独定义再应用，也样式、样式类，可以将样式单独定义再应用，也可以直接在可以直接在img标签里定义并应用样式。标签里定义并应用样式。例如，在例如，在CSS样式面板中单击新建按钮，新建一个样式类，类名样

39、式面板中单击新建按钮，新建一个样式类，类名“.imageclass1”,“规则定义规则定义”选择选择“仅限该文档仅限该文档”，单击确定后，在，单击确定后，在“CSS规则定规则定义义”对话框的对话框的“分类分类”-“扩展扩展”-“Filter”下选择下选择“FlipH”，单击，单击“确定确定”即即建好了样式类建好了样式类.imageclass1。在代码视图中，在代码视图中，head头部的头部的style样式定义元素内可看到：样式定义元素内可看到：.imageclass1 filter: FlipH; 一一.插入并编辑图像插入并编辑图像图像应用图像应用CSSCSS样式样式 在网页中插入一张图片，选

40、择该图，在属性面板的在网页中插入一张图片，选择该图，在属性面板的“类类”属性下拉列表中选择属性下拉列表中选择“.imageclass1”，保存文件。按，保存文件。按F12，在浏览器中预览效果如下所示。，在浏览器中预览效果如下所示。原图：原图： 水平镜像滤镜：水平镜像滤镜：Xrays滤镜：滤镜： Double滤镜：滤镜：一一.插入并编辑图像插入并编辑图像图像应用图像应用CSSCSS样式样式 注意：注意： 将滤镜样式应用于图像时，在将滤镜样式应用于图像时，在“实时视图实时视图”下将看下将看不到滤镜的效果，只有在浏览器中才能预览到滤镜效果，不到滤镜的效果，只有在浏览器中才能预览到滤镜效果，其它样式（

41、如加边框样式）则可以在其它样式（如加边框样式）则可以在“实时视图实时视图”中预中预览到样式的效果。览到样式的效果。 将将CSS样式应用于图像，只是改变了图像在浏览器样式应用于图像，只是改变了图像在浏览器的显示样式，图像原文件并未发生变化。的显示样式，图像原文件并未发生变化。 二二. 插入动画和其它媒体元素插入动画和其它媒体元素 插入动画插入动画 常见的动画有常见的动画有GIFGIF和和SWFSWF（FlashFlash动画）两种形式，插动画）两种形式，插入入GIFGIF动画的方法和插入一互普通的图片相同，插入动画的方法和插入一互普通的图片相同，插入SWFSWF动画的方法为：动画的方法为：(1)

42、. (1). 先将插入光标置于页面中需要插入先将插入光标置于页面中需要插入SWFSWF文件的位文件的位置；置；(2). (2). 执行执行 插入插入-媒体媒体-Flash Flash 菜单命令，菜单命令，或或者在者在“插入插入”面板中单击下拉按钮面板中单击下拉按钮 再选择再选择 ，在弹出的在弹出的“选择文件选择文件”对话框中，选择要插入的对话框中，选择要插入的SWFSWF文件后单击文件后单击“确定确定”； ( (3).3).在属性面板中，对插入的动画属性进行设置。在属性面板中，对插入的动画属性进行设置。 二二. 插入动画和其它媒体元素插入动画和其它媒体元素插入声音插入声音 （1 1）将声音作为

43、背景音乐将声音作为背景音乐 将音乐文件放到站点文件夹下面；在网页的将音乐文件放到站点文件夹下面；在网页的headhead部分使用标记符部分使用标记符bgsoundbgsound，例如：例如： bgsound src=tunes/ loop=1。 （2 2）直接将声音文件嵌入到网页中直接将声音文件嵌入到网页中 将音乐文件放到站点文件夹下面；将光标置于页面中需要插入音乐文件的位置；将音乐文件放到站点文件夹下面；将光标置于页面中需要插入音乐文件的位置；执行执行 插入插入-媒体媒体-插件插件 菜单命令，菜单命令，或者在或者在“插入插入”面板中单面板中单击下拉按钮击下拉按钮 再选择再选择 ，在在 选择文

44、件选择文件 对话框中选中要插对话框中选中要插入的声音文件，并加以确定入的声音文件，并加以确定; ;可以使用属性面板对插件的一些属性进行可以使用属性面板对插件的一些属性进行设置。设置。 第节第节 插入超链接插入超链接 【本节内容【本节内容】 一一. .创建页面链接创建页面链接 二二. .锚点链接锚点链接 三三. .电子邮件链接电子邮件链接 四四. .使用图像映射使用图像映射 一一. . 超链接的意义超链接的意义超链接，简称链接，是网页之间关联在一起超链接，简称链接，是网页之间关联在一起的纽带。许多网页存放在一起，之所以能够的纽带。许多网页存放在一起，之所以能够成为一个网站，就是因为它们之间设置了

45、合成为一个网站，就是因为它们之间设置了合适的超链接，成为了一个有着适的超链接，成为了一个有着“千丝万屡千丝万屡”联系的有机整体。在第一章中我们学习过超联系的有机整体。在第一章中我们学习过超链接（标签链接（标签a）代码的使用，这一节我们学）代码的使用，这一节我们学习使用习使用Dreamweaver可视化方式地创建超可视化方式地创建超链接链接。 一一. .创建页面链接创建页面链接创建页面链接的方法创建页面链接的方法(1) (1) 选中要创建链接的文本或图片；选中要创建链接的文本或图片；(2) (2) 在属性面板中的在属性面板中的“链接链接”框中输入目标文框中输入目标文件的件的URLURL，或单击或

46、单击“浏览文件浏览文件”按钮，在站点中选按钮，在站点中选择一个文件作为超链接的目标文件。择一个文件作为超链接的目标文件。 ( 3 ) ( 3 ) 在在 “ 目 标目 标 ” 属 性 下 拉 列 表 中 ， 选 择属 性 下 拉 列 表 中 ， 选 择“_ _blank”blank”表示在新窗口中打开链接，选择表示在新窗口中打开链接，选择“_ _self”self”表示在当前窗口中打开链接。表示在当前窗口中打开链接。 创建锚点链接的方法创建锚点链接的方法(1) (1) 把光标定位到要插入锚点的区域；把光标定位到要插入锚点的区域；(2) (2) 使用菜单使用菜单 插入插入 - -命名锚记命名锚记

47、，在命名锚，在命名锚记对话框中输入锚点的名称，如记对话框中输入锚点的名称，如 “N01”N01”；(3) (3) 将光标定位到文档窗口中要跳转到定义锚记的将光标定位到文档窗口中要跳转到定义锚记的区域，选中文本或图像；区域，选中文本或图像；(4) (4) 在在“属性检查器属性检查器”中的中的“链接链接”框中输入框中输入“# #”和命名锚记的名称，如和命名锚记的名称，如“# #NO1”NO1”。三三. .电子邮件链接电子邮件链接 创建电子邮件链接的方法创建电子邮件链接的方法(1) (1) 选中要创建电子邮件链接的文本或图片；选中要创建电子邮件链接的文本或图片；(2) (2) 在属性检查器的在属性检

48、查器的“链接链接”文本框中输入文本框中输入mailto:mailto:电子邮件地址电子邮件地址。 四四. .使用图像映射链接使用图像映射链接 图像映射链接图像映射链接 所谓图像映射链接就是指在一幅图中定义若干个所谓图像映射链接就是指在一幅图中定义若干个区（这些区域被称为热点），每个区域中指定一区（这些区域被称为热点），每个区域中指定一个不同的超链接，当点击不同区域时便可以转跳个不同的超链接，当点击不同区域时便可以转跳到相应的目标页面。到相应的目标页面。 图像映射常见的用法包括：电子地图、页面导航图像映射常见的用法包括：电子地图、页面导航等。等。四四. .使用图像映射链接使用图像映射链接使用图像

49、映射链接使用图像映射链接举例：举例：下面的图片中有下面的图片中有5 5个小图标，下面在每一个小图标上加上不个小图标，下面在每一个小图标上加上不同的超链接。同的超链接。方法：方法：(1) (1) 把图片插入到合适的位置；把图片插入到合适的位置；(2) (2) 选中图片，在属性面板的左下角三个形状小图标选中图片，在属性面板的左下角三个形状小图标（矩形、圆和多边形），点击其中的一个图标，（矩形、圆和多边形），点击其中的一个图标，在图片合适的地方拖动（多边形是在图像上点击在图片合适的地方拖动（多边形是在图像上点击鼠标以产生多边形的顶点）以产生矩形或圆，我鼠标以产生多边形的顶点）以产生矩形或圆，我们可以

50、清楚地看到在图书片上有半透明的热点区们可以清楚地看到在图书片上有半透明的热点区域，如下图所示：域，如下图所示： 四四. .使用图像映射链接使用图像映射链接(3) (3) 选中热点区域，在属性面板中修改热点的超链接，如下图选中热点区域，在属性面板中修改热点的超链接，如下图所示所示 在图象上绘制热点在图象上绘制热点五五. .使用伪类改变超级链接样式使用伪类改变超级链接样式链接有四种状态：未使用的链接（链接有四种状态：未使用的链接（link）、访问过的链接）、访问过的链接（visited）、鼠标在链接对象上（）、鼠标在链接对象上（hover）和链接激活时（）和链接激活时（actived）使用样式面板

51、定义伪类。使用样式面板定义伪类。（1）伪类定义改变超链接显示样式的一般方法）伪类定义改变超链接显示样式的一般方法CSS中使用标签中使用标签a的四个伪类（的四个伪类（a:link、a:visited、a:hover、a:actived）来表示链接的这四种状态，重新定义这四个伪类来改变超链接的样式。来表示链接的这四种状态，重新定义这四个伪类来改变超链接的样式。在在CSS样式面中，点击样式面中，点击“新建新建”按钮；按钮；在出现对话框的在出现对话框的“选择器类型选择器类型”下拉列表下选择下拉列表下选择“复合内容复合内容”，在，在“选择器名称选择器名称”下拉列表中选择下拉列表中选择“a:link”,“

52、规则定义规则定义”取默认值，取默认值，单击单击“确定确定”；在在“CSS规则定义规则定义”对话框中，设置该伪类的各种属性值，例如在对话框中，设置该伪类的各种属性值，例如在“类型类型”下指定下指定Fong-family（字体）、（字体）、Font-size（大小）、（大小）、Color（颜（颜色）、色）、Text-decoration（装饰）参数是否要下划线。单击（装饰）参数是否要下划线。单击“确确定定”。五五. .使用伪类改变超级链接样式使用伪类改变超级链接样式 重复这几步，再为重复这几步，再为a:visited、a:hover、a:actived三个伪类分别设三个伪类分别设置置CSS样式。则

53、完成了对超链接四种显示样式的重新定义。样式。则完成了对超链接四种显示样式的重新定义。这四个伪类重新定义以后，网页中的超链接样式自动变为了新设置的样式。这四个伪类重新定义以后，网页中的超链接样式自动变为了新设置的样式。（2）伪类和类结合定义多组超链接样式）伪类和类结合定义多组超链接样式还可以将伪类和类相结合，为网页定义几组超链接的样式。例如将标还可以将伪类和类相结合，为网页定义几组超链接的样式。例如将标签签a的伪类与类的伪类与类x相结合，采用上述方法分别为相结合，采用上述方法分别为a.x:link、a.x:visited、a.x:hover和和a.x:actived定义好定义好CSS样式。样式。

54、在给网页中的文本对象应用超链接时，要在属性面板的在给网页中的文本对象应用超链接时，要在属性面板的“类类”下拉框中选择下拉框中选择“x”，这样就会出现新的一组超链接的显示样式。这样就会出现新的一组超链接的显示样式。五五. .使用伪类改变超级链接样式使用伪类改变超级链接样式 3）超链接）超链接CSS样式的简单定义法样式的简单定义法超链接伪类有一种简单定义方法，就是在网页的超链接伪类有一种简单定义方法，就是在网页的“页面属性页面属性”中进行。中进行。具体方法是：使用菜单具体方法是：使用菜单“修改修改”-“页面属性页面属性”-“链接（链接（CSS）”，如图，如图2-26所示，在对话框中为链接、已访问的

55、链接、活动链接、变换图所示，在对话框中为链接、已访问的链接、活动链接、变换图像链接设置几种简单属性（字体、大小、颜色）。这样也可以改变像链接设置几种简单属性（字体、大小、颜色）。这样也可以改变超链接的样式。超链接的样式。 第节第节 使用表格使用表格 【本节内容【本节内容】 一一. .插入表格插入表格 二二. .编辑表格编辑表格 三三. .表格中应用表格中应用CSSCSS样式样式 四四. .表格的嵌套表格的嵌套 五五.应用表格布局网页应用表格布局网页 一一.插入表格插入表格 在在DreamweaverDreamweaver中，有多种插入表格的方法，中，有多种插入表格的方法，使用菜使用菜单命令和工

56、具按钮的方法插入和编辑表格的方法。可单命令和工具按钮的方法插入和编辑表格的方法。可以采用如下步骤：以采用如下步骤： 将鼠标光标置于文档中需要插入表格的位置。将鼠标光标置于文档中需要插入表格的位置。 执行执行“插入插入”“表格表格”菜单命令，菜单命令，或者在或者在“插入插入”面板下选择按钮面板下选择按钮 ，弹出弹出“表格表格”对话框，对话框，如下图所示。如下图所示。 在对话框中输入如上图所示的表格参数，就可在对话框中输入如上图所示的表格参数，就可以得到相应的表结构。以得到相应的表结构。 一一.插入表格插入表格 二二.编辑表格编辑表格 表格元素的选定表格元素的选定 使用标签选择器可以方便地选定整个

57、表格，也可以选定表格的单元格、行或其它使用标签选择器可以方便地选定整个表格，也可以选定表格的单元格、行或其它元素。如选定第一行，可以把光标置于第一行的任一单元格内，然后点击状态栏的标元素。如选定第一行，可以把光标置于第一行的任一单元格内，然后点击状态栏的标签选择器中的签选择器中的 tr标记。如下图所示：标记。如下图所示：使用相似的方法可以选中整个表格、一个单元格使用相似的方法可以选中整个表格、一个单元格。二二.编辑表格编辑表格编辑表格结构编辑表格结构 使用使用“属性属性”面板可以快捷地编辑表格的多个属性，面板可以快捷地编辑表格的多个属性，如行数、列数、宽度、填充、间距、边框、对齐等，如行数、列

58、数、宽度、填充、间距、边框、对齐等，表格属性面板中的表格属性面板中的“填充填充”、“间距间距”、“边框边框”与与新建表格对话框中的新建表格对话框中的“单元格间距单元格间距”、“单元格边距单元格边距”和和“边框粗细边框粗细”相对应。相对应。还可以为表格应用还可以为表格应用CSS样式类、标签样式。样式类、标签样式。 （1） 表格的宽度表格的宽度二二.编辑表格编辑表格编辑表格编辑表格 1、表格的宽表格的宽 要制作固定宽度的表格，通常有两种方法：要制作固定宽度的表格，通常有两种方法： 定义所有列的宽度，但不定义整个表格的宽度，定义所有列的宽度，但不定义整个表格的宽度，整个表格的实际宽度为：所有列的宽度

59、和整个表格的实际宽度为：所有列的宽度和+ +边框宽度边框宽度和和+ +间距和间距和+ +填充和，这时候，只要单元格内的内容不填充和，这时候，只要单元格内的内容不超过的单元格的宽度时，表格不会变形。超过的单元格的宽度时，表格不会变形。 定义整个表格的宽，如定义整个表格的宽，如500500像素、像素、98%98%等，再留一等，再留一列的宽度不定义，未定义的这一列的宽度为整个表格列的宽度不定义，未定义的这一列的宽度为整个表格的宽度的宽度- -已定义列的宽度和已定义列的宽度和- -边框宽度和边框宽度和- -间距和间距和- -填充填充和，同样在插入内容时也不会变形。和，同样在插入内容时也不会变形。 二二

60、.编辑表格编辑表格编辑表格编辑表格 2 2、表格的边框表格的边框 用表格的用表格的“边框边框”属性制作边框，定义表格的属性制作边框，定义表格的边框粗细和边框颜色。边框粗细和边框颜色。 二二.编辑表格编辑表格 使用背景色和间距制作边框使用背景色和间距制作边框例如，要制作一个粗细为一个像素的红色边框：先设例如，要制作一个粗细为一个像素的红色边框：先设定表格的间距为定表格的间距为1 1边框为边框为0 0；再设定表格的背景色为红；再设定表格的背景色为红色；最后设定所有行或单元格的背景色为非红色（如色；最后设定所有行或单元格的背景色为非红色（如浅灰色或白色），请看下图：浅灰色或白色），请看下图： 二二.编辑表格编辑表格 使用表格行或列制作边框使用表格行或