第二章使用网页工具制作静态网页

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

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

3、夹），可用于插入相应的对象。 网页制作与网站设计网页制作与网站设计一一. Dreamweaver CS4的界面工具栏工具栏 工具栏中包含按钮可以在文档的不同视图间快速切换：工具栏中包含按钮可以在文档的不同视图间快速切换：“代码代码”视图、视图、“设计设计”视图、同时显示代码和设计视图的视图、同时显示代码和设计视图的”拆分拆分”视图视图, ,以及即时调试运行效果以及即时调试运行效果”实时视图实时视图”。工具栏中。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。常用命令和选项。状态栏 状态栏提供与您正创建的文档有关

4、的其它信息，它的作状态栏提供与您正创建的文档有关的其它信息，它的作用和含义如图所示。用和含义如图所示。网页制作与网站设计网页制作与网站设计一一. Dreamweaver CS4的界面属性面板属性面板 网页中的对象都有自身的属性，当选取不同的对象时网页中的对象都有自身的属性，当选取不同的对象时, ,属属性面板显示的内容不相同性面板显示的内容不相同, ,属性面板显示了被选取对象的各种属性面板显示了被选取对象的各种属性，可以随时进行修改。属性，可以随时进行修改。文档窗口文档窗口 文档窗口显示当前文档的内容或内容代码，也就是你编辑文档窗口显示当前文档的内容或内容代码，也就是你编辑网页文档的地方，在这里

5、可以通过菜单命令、工具栏按钮、插网页文档的地方，在这里可以通过菜单命令、工具栏按钮、插入栏按钮、属性面板以及面板级等到工具来编辑、制作网页，入栏按钮、属性面板以及面板级等到工具来编辑、制作网页，也可以通过按也可以通过按”实时视图实时视图”来检验网页的调试结果来检验网页的调试结果,这与浏览器中这与浏览器中的显示效果基本相同。的显示效果基本相同。网页制作与网站设计网页制作与网站设计一一. Dreamweaver CS4的界面选项面板选项面板 选项面板可以随时以选项面板可以随时以直观的方式获得特定功能，直观的方式获得特定功能，它们一般组合成面板组嵌它们一般组合成面板组嵌入在界面的右边。如图：入在界面

6、的右边。如图： 网页制作与网站设计网页制作与网站设计二二. 建立本地站点建立本地站点 在在DreamweaverDreamweaver下创建本地站点的具体步骤：下创建本地站点的具体步骤：1、选择选择 站点站点-新建站点新建站点 ，出现，出现“定义站点定义站点”对话对话框。框。2 2、可以、可以使用使用“高级高级”选项页进行站点的定义。选项页进行站点的定义。3 3、设置本地信息，如下图所示。、设置本地信息，如下图所示。 本地信息共有本地信息共有8 8个项目需要设置：定义个项目需要设置：定义“站点名站点名称称”、选择网站本地文件夹、确认是否、选择网站本地文件夹、确认是否“自动刷新文自动刷新文件列表

7、件列表”、选择、选择“默认图像文件夹默认图像文件夹”、选择链接相对、选择链接相对地址、选择地址、选择“默认图像文件夹默认图像文件夹”路径、输入路径、输入“HTTPHTTP地地址址”、“区分大小写的链接区分大小写的链接”、确认是否、确认是否“启用缓启用缓存存”。 网页制作与网站设计网页制作与网站设计二二. 建立本地站点建立本地站点 站点定义对话框站点定义对话框网页制作与网站设计网页制作与网站设计二二. 建立本地站点建立本地站点 举例：定义一个站点“我的网站” 在在“站点名称站点名称”文本框中输入文本框中输入 我的网站我的网站 。 在在“本地根文件夹本地根文件夹”中输入中输入“D:web”D:we

8、b”或是单击右边的文或是单击右边的文件夹图标后进行选择此文件夹。件夹图标后进行选择此文件夹。 选择选择“自动刷新本地文件列表自动刷新本地文件列表”单选框。单选框。 在在“默认图像默认图像文件夹文件夹”文本框中输入文本框中输入 D:WebimagesD:Webimages，同样可以点击文件夹同样可以点击文件夹图标以进行选择。图标以进行选择。 保持保持“链接相对于链接相对于”单选框的默认值不变。单选框的默认值不变。 在在“HTTPHTTP地址地址”文本框中，你可以输入你已经申请的网站文本框中，你可以输入你已经申请的网站的域名的域名( (可选项可选项) )，如，如http:/http:/。“区分大小

9、写链接区分大小写链接”和和“缓存缓存”两项可以保持默认值不变。两项可以保持默认值不变。 单击单击“确定确定”按钮完成本地站点的设置。按钮完成本地站点的设置。 网页制作与网站设计网页制作与网站设计三三.新建新建HTML网页网页 新建文档新建文档打开打开DreamweaverDreamweaver后，就会显示使用开始页面，在开始页面后，就会显示使用开始页面，在开始页面“创创建新项目建新项目”选项区中选择某个新建项目选项，如选项区中选择某个新建项目选项，如HTMLHTML，即可新即可新建相应类型的新文档，当然也可以使用菜单来新建网页。建相应类型的新文档，当然也可以使用菜单来新建网页。保存网页保存网页

10、 新建网页后，先把网页保存在站点目录下，保存新建的新建网页后，先把网页保存在站点目录下，保存新建的HTMLHTML文文件时，默认的文件名是件时，默认的文件名是Untitled-1Untitled-1等名称，但一般不使用默认等名称，但一般不使用默认的文件名而是自己定义文件名，如的文件名而是自己定义文件名，如temptemp，indexindex，loginlogin等有一等有一定的含义的半角英文（或拼音）名称。默认的位置是在站点文定的含义的半角英文（或拼音）名称。默认的位置是在站点文件夹下面，当然也可以把网页保存在在站点下面的其它文件夹件夹下面，当然也可以把网页保存在在站点下面的其它文件夹中，一

11、般不保存在站点文件夹以外中，一般不保存在站点文件夹以外。 网页制作与网站设计网页制作与网站设计三三.新建新建HTML网页网页预览网页预览网页最常见的浏览正在制作的网页两种方式：最常见的浏览正在制作的网页两种方式： 在在DreamweaverCS4DreamweaverCS4编辑窗口中，点击编辑窗口中，点击“实时视图按钮实时视图按钮”；在在WindowsWindows（或其它操作系统）中打开站点文件夹，找到已经或其它操作系统）中打开站点文件夹，找到已经保存过网页文件，双击文件就可以预览此网页；保存过网页文件，双击文件就可以预览此网页；先保存网页，使用菜单先保存网页，使用菜单 文件文件-在浏览器中

12、预览在浏览器中预览-IExplore6.0IExplore6.0，或使用快捷键或使用快捷键F12F12进行预览网页（推荐使用快进行预览网页（推荐使用快捷键捷键F12F12）。打开与编辑网页打开与编辑网页 可以在可以在DreamweaverCS4DreamweaverCS4文件面板中看到已经保存过的文件，双文件面板中看到已经保存过的文件，双击该网页文件就可以打开并编辑相应的网页，也要以通过击该网页文件就可以打开并编辑相应的网页，也要以通过“文文件件”菜单打开网页文件，操作方法和菜单打开网页文件，操作方法和wordword等应用软件相似。等应用软件相似。 网页制作与网站设计网页制作与网站设计第第2

13、.2节节 文本编排与文本编排与CSSCSS样式样式 【本节内容】 一.文本输入与HTML属性 二.CSS样式的创建与应用 三.CSS样式表文件 网页制作与网站设计网页制作与网站设计一一. 文本输入与文本输入与HTMLHTML属性属性 网页内容的编辑，一般以网页内容的编辑，一般以“设计设计”视图下进行，必要视图下进行，必要的时候转换到的时候转换到“代码代码”视图修改代码。当处于设计视图时，视图修改代码。当处于设计视图时，可直接在文档窗口中输入文本，但在网页中输入空格字符可直接在文档窗口中输入文本，但在网页中输入空格字符却有讲究，直接使用空格键只能插入一个空格字符，要连却有讲究，直接使用空格键只能

14、插入一个空格字符，要连续插入多个空格，可以选用下列方法之一：续插入多个空格，可以选用下列方法之一： 使用菜单使用菜单“插入插入”-“HTML”-“特殊字符特殊字符”-“不不换行空格换行空格”； 在代码视图中，加入在代码视图中，加入“ ”占位符；占位符； Ctrl+Shift+空格的快捷键插入空格空格的快捷键插入空格(推荐推荐)。 在在“设计设计”视图中，每按一次回车默认为一个段落，视图中，每按一次回车默认为一个段落，系统会在文本的前后加上了一对系统会在文本的前后加上了一对标签标签 。网页制作与网站设计网页制作与网站设计一一. 文本输入与文本输入与HTMLHTML属性属性 例如，选择设

15、计视图，在文档窗口中输入例如，选择设计视图，在文档窗口中输入“锄禾锄禾”：锄禾锄禾锄禾日当午，锄禾日当午，汗滴禾下土。汗滴禾下土。谁知盘中餐，谁知盘中餐，粒粒皆辛苦。粒粒皆辛苦。 我们来设置其我们来设置其HTML属性，文本的属性，文本的HTML属性主要有：格式、类、属性主要有：格式、类、加粗倾斜、列表、加粗倾斜、列表、ID、链接等项目。我们对这首诗应用格式与列表来、链接等项目。我们对这首诗应用格式与列表来编排一下。选择编排一下。选择“锄禾锄禾”，在，在HTML属性的属性的“格式格式”下拉选项中，选择下拉选项中，选择“标题标题2”，加粗；再选择其余四句，单击，加粗；再选择其余四句，单击“项目列表

16、项目列表”或或“编号列表编号列表”按钮，转到代码视图，可看到按钮，转到代码视图，可看到body标签内有如下代码：标签内有如下代码：网页制作与网站设计网页制作与网站设计一一. 文本输入与文本输入与HTMLHTML属性属性 锄禾锄禾 锄禾日当午，锄禾日当午， 汗滴禾下土。汗滴禾下土。 谁知盘中餐，谁知盘中餐， 粒粒皆辛苦。粒粒皆辛苦。锄禾锄禾 锄禾日当午，锄禾日当午， 汗滴禾下土。汗滴禾下土。 谁知盘中餐，谁知盘中餐， 粒粒皆辛苦。粒粒皆辛苦。浏览效果：网页制作与网站设计网页制作与网站设计一一. 文本输入与文本输入与HTMLHTML属性属性 如果要给文本选择某一种汉字字体、字颜色、字大小等属性，如

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

18、平对齐方式（左对齐（左对齐|右对齐右对齐|居中居中|两端对齐）等项。通过这个面板可以两端对齐）等项。通过这个面板可以为文本创建和指定为文本创建和指定CSS样式。样式。 网页制作与网站设计网页制作与网站设计二二. CSS样式的创建与应用样式的创建与应用 在在Dreamweaver中创建中创建CSS样式，可以通过样式，可以通过CSS样样式面板，或者通过属性面板来进行。式面板，或者通过属性面板来进行。在在Dreamweaver CS4右边的面板组中找到右边的面板组中找到“CSS样样式式”标签，双击，就打开了标签，双击，就打开了CSS样式面板。单击样式面板。单击CSS面板下边的钮，或者在属性面板里选择

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

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

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

22、了 。 网页制作与网站设计网页制作与网站设计二二. CSS样式的创建与应用样式的创建与应用 CSS样式应用于文本样式应用于文本下面我们来应用上面已经创建的两个样式。下面我们来应用上面已经创建的两个样式。应用应用CSS样式，既可在属性板中的样式，既可在属性板中的“HTML”属性中属性中设置，也可在设置，也可在“CSS”属性中设置。选择前面输入的属性中设置。选择前面输入的诗歌诗歌“锄禾锄禾”标题，在其标题，在其HTML属性中的属性中的“类类”下下列表中选择列表中选择fontclass0，也可以在，也可以在CSS属性中的属性中的“目标规则目标规则”下拉列表中选择下拉列表中选择.fontclass0。

23、同样地，将样式类同样地，将样式类fontclass1应用于四句诗歌应用于四句诗歌“锄锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦苦”。浏览效果：浏览效果：网页制作与网站设计网页制作与网站设计二二. CSS样式的创建与应用样式的创建与应用 查看源代码：查看源代码： /*样式定义开始样式定义开始*/ /*样式定义结束标签样式定义结束标签*/锄禾锄禾锄禾日当午，锄禾日当午，汗滴禾下土。汗滴禾下土。谁知盘中餐，谁知盘中餐，粒粒皆辛苦。粒粒皆辛苦。 不光是样式类能够应用于不光是样式类能够应用于文本，标签样式、文本，标签样式、ID样式样式都可应用于文本。都可应用

24、于文本。 网页制作与网站设计网页制作与网站设计二二. CSS样式的创建与应用样式的创建与应用 使用标记符样式定义整个网页的字体使用标记符样式定义整个网页的字体要使整个页面文字属性统一为某种样式，可以使用要使整个页面文字属性统一为某种样式，可以使用菜单菜单 “修改修改”-“页面属性页面属性”，在，在“页面属性页面属性”对对话框中选择外观（话框中选择外观（CSS），然后设置面面字体、字），然后设置面面字体、字大小、文本颜色、背景色、背景图像与重复次数、大小、文本颜色、背景色、背景图像与重复次数、网页的左、右、上、下边距。网页的左、右、上、下边距。单击单击“确定确定”以后，会在网页以后，会在网页he

25、ad头部自动生成关头部自动生成关于于body、td、th的标签样式的标签样式 。网页制作与网站设计网页制作与网站设计二二. CSS样式的创建与应用样式的创建与应用 查看代码，如下：查看代码，如下：网页制作与网站设计网页制作与网站设计二二. CSS样式的创建与应用样式的创建与应用 在网页属性对话框中，还可以设置网页的在网页属性对话框中，还可以设置网页的HTML外外观、链接（观、链接（CSS）、标题（）、标题（CSS）等属性。例如我）等属性。例如我们设置网页的们设置网页的HTML属性如下：属性如下：这将给网页的这将给网页的body标签加上一些属性，代码如下：标签加上一些属性，代码如下：网页制作与网

26、站设计网页制作与网站设计二二. CSS样式的创建与应用样式的创建与应用 标签符内直接定义并应用标签符内直接定义并应用CSS样式样式如果针对某个如果针对某个HTML标签的样式应用很少，甚至只标签的样式应用很少，甚至只应用一次，建议采用应用一次，建议采用style=; 的方式直接在的方式直接在HTML标记符内定义和应用样式。例如：标记符内定义和应用样式。例如：HELP？这是直接在表格单元格内定义的样式，引号中间的这是直接在表格单元格内定义的样式，引号中间的样式规则（属性名样式规则（属性名:属性值属性值;）直接应用于当前单元格）直接应用于当前单元格中，也只能应用于当前的单元格中。中，也只能应用于当前

27、的单元格中。标签符内直接定义和应用标签符内直接定义和应用CSS样式，一般只能在样式，一般只能在“代码代码”视图下直接编辑。视图下直接编辑。网页制作与网站设计网页制作与网站设计三三. CSSCSS样式表文件样式表文件 建设网站时，通常要把一个建设网站时，通常要把一个CSS样式应用到整样式应用到整个站点的所有网页中去，这可以通过个站点的所有网页中去，这可以通过CSS样式文件样式文件来实现，来实现，CSS样式表文件是将多个样式表文件是将多个CSS样式定义集样式定义集中保存在一起的文件，文件扩展名为中保存在一起的文件，文件扩展名为.css。 在其它网页要使用此文件中的样式时，把此样在其它网页要使用此文

28、件中的样式时，把此样式表文件的链接到这些网页就可以了。式表文件的链接到这些网页就可以了。 创建创建CSS样式文件的方法有两种。样式文件的方法有两种。 网页制作与网站设计网页制作与网站设计三三. CSSCSS样式表文件样式表文件 单独新建单独新建CSS样式表文件样式表文件第一种方法是，使用菜单第一种方法是，使用菜单“文件文件”-“新建新建”命令，命令，在打开的对话框中选择页面类型为在打开的对话框中选择页面类型为CSS，如图，如图2-14所示，单击所示，单击“创建创建”按钮，即可进行新建按钮，即可进行新建CSS代码代码文件的窗口。文件的窗口。网页制作与网站设计网页制作与网站设计三三. CSSCSS

29、样式表文件样式表文件 在该在该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;text-align: center; .class1 /*定义一个样式类定义一个样式类*/f

30、ont-family: 华文新魏华文新魏;font-size: 18px;font-style: normal;color: #000; #id-css1 /*定义一个定义一个ID样式样式*/font-family: 方正姚体方正姚体;font-size: 14px;color: #0F0;网页制作与网站设计网页制作与网站设计三三. CSSCSS样式表文件样式表文件 保存文件，并将文件命名为保存文件，并将文件命名为type0.css。查看文件。查看文件面板，如图所示，可以看到站点内多了一个名为面板，如图所示，可以看到站点内多了一个名为type0.css的样式文件。的样式文件。也可以在新建也可以

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

32、网站设计三三. CSSCSS样式表文件样式表文件 将网页链接样式文件的方法有将网页链接样式文件的方法有link模式和模式和import模式（见第一模式（见第一章章1.7节），可使用以下两种方法之一：节），可使用以下两种方法之一：一种方法是直接在网页代码的一种方法是直接在网页代码的head元素内加入如下代码：元素内加入如下代码：其中其中path&filename.css是样式文件的路径和名称。是样式文件的路径和名称。另一种方法，就是单击另一种方法，就是单击CSS样式面板下的链接按钮样式面板下的链接按钮 ，在弹，在弹出的对话框中选择样式文件，并在单选项出的对话框中选择样式文件，并在单选项 “链接链

33、接”（link）、）、“导入导入”（import）中选择一种链接方式。如图所示。按）中选择一种链接方式。如图所示。按“确确定定”即将样式文件链接到当前网页中来了。即将样式文件链接到当前网页中来了。网页制作与网站设计网页制作与网站设计第第2.3节节 插入图像、动画与媒体元素插入图像、动画与媒体元素 【本节内容】 一.插入并编辑图像 二.插入动画和其它媒体元素 网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像 插入图像插入图像 将光标置于需要插入图像的位置；将光标置于需要插入图像的位置； 执行执行“插入插入”-“图像图像”菜单命令，或者菜单命令，或者在在“插入插入”面板中单击

34、按钮面板中单击按钮 ，弹出，弹出“选择选择图像源文件图像源文件”对话框，在此对话框中选择合对话框，在此对话框中选择合适的图像，单击适的图像，单击“确定确定”按扭即可按扭即可。 网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像编辑图像属性编辑图像属性选中要修改的图像，可以通过选中要修改的图像，可以通过“属性属性”面板来修改面板来修改图像的属性，图像属性面板的基本属必和扩展属性，图像的属性，图像属性面板的基本属必和扩展属性，通过单击属性面板右下角的通过单击属性面板右下角的 按钮展开、按钮展开、 按扭收缩按扭收缩扩展属性。扩展属性。 网页制作与网站设计网页制作与网站设计一一.插

35、入并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 图像的基本属性主要有：图像的基本属性主要有：设置设置“宽宽”、“高高”属性改变图像的大小。属性改变图像的大小。通过设置通过设置“源文件源文件”来选择图像。来选择图像。“替换替换”的意义为：当图浏览网页时把鼠标放在图像上会显示的的意义为：当图浏览网页时把鼠标放在图像上会显示的文字提示文字提示“Cs3C60分子结构分子结构”，当图像不能正常显示时，显示一，当图像不能正常显示时，显示一个红个红X的同时，把的同时，把“Cs3C60分子结构分子结构”显示在红显示在红X的边上。的边上。“类类”就是为图像应用已经定义了的样式。就是为图像应用已经定义了的样

36、式。“链接链接”处输入新目标处输入新目标URL，意义为：点击图像时，可以打开新，意义为：点击图像时，可以打开新目标目标URL网页或其它文件。网页或其它文件。“编辑编辑”就是使用该图像默认的编辑器来编辑它。就是使用该图像默认的编辑器来编辑它。网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 图像的扩展属性主要有：图像的扩展属性主要有：“垂直边距垂直边距”和和“水平边距水平边距”用于确定图像上下、左用于确定图像上下、左右间距。右间距。简单图像处理工具简单图像处理工具 中的中的“边框边框”用于用于给图像加一个指定宽度的边框，后面几个工具按钮依次给图像加

37、一个指定宽度的边框，后面几个工具按钮依次是裁剪、重新取样、亮度和对比度、锐化。使用这几个是裁剪、重新取样、亮度和对比度、锐化。使用这几个工具按钮，可以对插入进来的图像进行简单的处理，与工具按钮，可以对插入进来的图像进行简单的处理，与第一章所讲的图像滤镜完全不同，这些处理会实质性地第一章所讲的图像滤镜完全不同，这些处理会实质性地改变图像文件。改变图像文件。 网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 例如，给图形添加边框、进行裁剪和锐化，结果如下：例如，给图形添加边框、进行裁剪和锐化，结果如下： 网页制作与网站设计网页制作与网站设计一一.插入

38、并编辑图像插入并编辑图像 编辑图像属性编辑图像属性 热点工具按钮热点工具按钮 用于设置图像的热点区域，热用于设置图像的热点区域，热点主要用于链接。在图像中设置了点主要用于链接。在图像中设置了3个热点区域，每个个热点区域，每个热点区都可以单独做一个链接。热点区都可以单独做一个链接。“对齐对齐”属性用于指定图像在网页区域的左右、上下对属性用于指定图像在网页区域的左右、上下对齐方式。齐方式。 网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像图像占位符的使用图像占位符的使用 图像占位符是在准备好将最终图形添加到网页之前使用图像占位符是在准备好将最终图形添加到网页之前使用的图形，在

39、网页布局时常常用到。的图形，在网页布局时常常用到。 （1）插入图像占位符）插入图像占位符在文档窗口中，将光标置于要插入点的位置。选择在文档窗口中，将光标置于要插入点的位置。选择“插插入入”-“图像图像”-“图像占位符图像占位符”，或者在插入面板中单，或者在插入面板中单击图像下拉按钮，再选择击图像下拉按钮，再选择 ；网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像图像占位符的使用图像占位符的使用 （2）替换图像占位符）替换图像占位符根据图像占位符的尺寸，用根据图像占位符的尺寸，用fireworks或或photoshop等等软件中制作相应大小的图像。然后在软件中制作相应大小的

40、图像。然后在Dreamweaver中中推进换它。推进换它。替换图像占位符，执行下列操作：替换图像占位符，执行下列操作：选择图像占位符，然后在属性面板中单击选择图像占位符，然后在属性面板中单击“源文件源文件”框框旁的文件夹图标，或者双击占位符，将出现旁的文件夹图标，或者双击占位符，将出现“选择图像选择图像源文件源文件”的对话框，在该对话框中选择要替换占位符的的对话框，在该对话框中选择要替换占位符的图像，然后单击图像，然后单击“确定确定” 。见上一张。见上一张PPT图示。图示。网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像图像应用图像应用CSSCSS样式样式 图像属性面板中

41、有图像属性面板中有“类类”这个栏目，这是为图像选择这个栏目，这是为图像选择CSS样式而设样式而设计的。图像对象可以应用标签（计的。图像对象可以应用标签（img）样式、）样式、ID样式、样式类，可样式、样式类，可以将样式单独定义再应用，也可以直接在以将样式单独定义再应用，也可以直接在img标签里定义并应用样标签里定义并应用样式。式。例如，在例如，在CSS样式面板中单击新建按钮，新建一个样式类，类名样式面板中单击新建按钮，新建一个样式类，类名“.imageclass1”,“规则定义规则定义”选择选择“仅限该文档仅限该文档”，单击确定后，单击确定后，在在“CSS规则定义规则定义”对话框的对话框的“分

42、类分类”-“扩展扩展”-“Filter”下选下选择择“FlipH”，单击，单击“确定确定”即建好了样式类即建好了样式类.imageclass1。在代码视图中，在代码视图中，head头部的头部的style样式定义元素内可看到：样式定义元素内可看到：.imageclass1 filter: FlipH; 网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像图像应用图像应用CSSCSS样式样式 在网页中插入一张图片，选择该图，在属性面板的在网页中插入一张图片，选择该图，在属性面板的“类类”属性下拉列表中选择属性下拉列表中选择“.imageclass1”，保存文件。按，保存文件。按F

43、12，在浏览器中预览效果如下所示。，在浏览器中预览效果如下所示。原图：原图： 水平镜像滤镜：水平镜像滤镜：Xrays滤镜：滤镜： Double滤镜：滤镜：网页制作与网站设计网页制作与网站设计一一.插入并编辑图像插入并编辑图像图像应用图像应用CSSCSS样式样式 注意：注意： 将滤镜样式应用于图像时，在将滤镜样式应用于图像时，在“实时视图实时视图”下将看下将看不到滤镜的效果，只有在浏览器中才能预览到滤镜效果，不到滤镜的效果，只有在浏览器中才能预览到滤镜效果，其它样式（如加边框样式）则可以在其它样式（如加边框样式）则可以在“实时视图实时视图”中预中预览到样式的效果。览到样式的效果。 将将CSS样式

44、应用于图像，只是改变了图像在浏览器样式应用于图像，只是改变了图像在浏览器的显示样式，图像原文件并未发生变化。的显示样式，图像原文件并未发生变化。 网页制作与网站设计网页制作与网站设计二二. 插入动画和其它媒体元素插入动画和其它媒体元素 插入动画插入动画 常见的动画有常见的动画有GIFGIF和和SWFSWF（FlashFlash动画）两种形式，插动画）两种形式，插入入GIFGIF动画的方法和插入一互普通的图片相同，插入动画的方法和插入一互普通的图片相同，插入SWFSWF动画的方法为：动画的方法为：(1). (1). 先先将插入光标置于页面中需要插入将插入光标置于页面中需要插入SWFSWF文件的文

45、件的位置；位置；(2). (2). 执行执行 插入插入-媒体媒体-Flash Flash 菜单命令，菜单命令，或或者在者在“插入插入”面板中单击下拉按钮面板中单击下拉按钮 再选择再选择 ，在弹出的在弹出的“选择文件选择文件”对话框中，选择要插入的对话框中，选择要插入的SWFSWF文件后单击文件后单击“确定确定”； ( (3).3).在属性面板中，对插入的动画属性进行设置。在属性面板中，对插入的动画属性进行设置。 网页制作与网站设计网页制作与网站设计二二. 插入动画和其它媒体元素插入动画和其它媒体元素插入声音插入声音 （1 1）将声音作为背景音乐将声音作为背景音乐 将音乐文件放到站点文件夹下面；

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

47、定; ;可可以使用属性面板对插件的一些属性进行设置。以使用属性面板对插件的一些属性进行设置。 网页制作与网站设计网页制作与网站设计第第2.4节节 插入超链接插入超链接 【本节内容】 一一. .创建页面链接创建页面链接 二二. .锚点链接锚点链接 三三. .电子邮件链接电子邮件链接 四四. .使用图像映射使用图像映射 网页制作与网站设计网页制作与网站设计一一. . 超链接的意义超链接的意义超链接，简称链接，是网页之间关联在一起的纽带。许多网页存放在一起，之所以能够成为一个网站，就是因为它们之间设置了合适的超链接，成为了一个有着“千丝万屡”联系的有机整体。在第一章中我们学习过超链接（标签a）代码的

48、使用，这一节我们学习使用Dreamweaver可视化方式地创建超链接。 网页制作与网站设计网页制作与网站设计一一. .创建页面链接创建页面链接创建页面链接的方法创建页面链接的方法(1) 选中要创建链接的文本或图片；(2) 在属性面板中的“链接”框中输入目标文件的URL，或单击“浏览文件”按钮，在站点中选择一个文件作为超链接的目标文件。 (3) 在“目标”属性下拉列表中，选择“_blank”表示在新窗口中打开链接，选择“_self”表示在当前窗口中打开链接。 网页制作与网站设计网页制作与网站设计二二.锚点链接锚点链接创建锚点链接的方法创建锚点链接的方法(1) (1) 把光标定位到要插入锚点的区域

49、；把光标定位到要插入锚点的区域；(2) (2) 使用菜单使用菜单 插入插入 - -命名锚记命名锚记 ，在命，在命名 锚 记 对 话 框 中 输 入 锚 点 的 名 称 ，名 锚 记 对 话 框 中 输 入 锚 点 的 名 称 ，如如 “ “N01”N01”；(3) (3) 将光标定位到文档窗口中要跳转到定义将光标定位到文档窗口中要跳转到定义锚记的区域，选中文本或图像；锚记的区域，选中文本或图像；(4) (4) 在在“属性检查器属性检查器”中的中的“链接链接”框中输框中输入入“#”“#”和命名锚记的名称，如和命名锚记的名称，如“#“#NO1”NO1”。网页制作与网站设计网页制作与网站设计三三.

50、.电子邮件链接电子邮件链接 创建电子邮件链接的方法创建电子邮件链接的方法(1)(1) 选中要创建电子邮件链接的文本或图片；选中要创建电子邮件链接的文本或图片；(2) (2) 在属性检查器的在属性检查器的“链接链接”文本框中输入文本框中输入mailto:mailto:电子邮件地址电子邮件地址。 网页制作与网站设计网页制作与网站设计四四. .使用图像映射链接使用图像映射链接 图像映射链接图像映射链接 所谓图像映射链接就是指在一幅图中定义若干所谓图像映射链接就是指在一幅图中定义若干个区（这些区域被称为热点），每个区域中指定个区（这些区域被称为热点），每个区域中指定一个不同的超链接，当点击不同区域时便

51、可以转一个不同的超链接，当点击不同区域时便可以转跳到相应的目标页面。跳到相应的目标页面。 图像映射常见的用法包括：电子地图、页面导图像映射常见的用法包括：电子地图、页面导航等。航等。网页制作与网站设计网页制作与网站设计四四. .使用图像映射链接使用图像映射链接使用图像映射链接使用图像映射链接举例：举例：下面的图片中有下面的图片中有5 5个小图标，下面在每一个小图标上加上不个小图标，下面在每一个小图标上加上不同的超链接。同的超链接。方法：方法：(1) (1) 把图片插入到合适的位置；把图片插入到合适的位置；(2) (2) 选中图片，在属性面板的左下角三个形状小图选中图片，在属性面板的左下角三个形

52、状小图标（矩形、圆和多边形），点击其中的一个图标，标（矩形、圆和多边形），点击其中的一个图标，在图片合适的地方拖动（多边形是在图像上点击在图片合适的地方拖动（多边形是在图像上点击鼠标以产生多边形的顶点）以产生矩形或圆，我鼠标以产生多边形的顶点）以产生矩形或圆，我们可以清楚地看到在图书片上有半透明的热点区们可以清楚地看到在图书片上有半透明的热点区域，如下图所示：域，如下图所示： 网页制作与网站设计网页制作与网站设计四四. .使用图像映射链接使用图像映射链接(3) (3) 选中热点区域，在属性面板中修改热点的超链接，如下图选中热点区域，在属性面板中修改热点的超链接，如下图所示所示 在图象上绘制热点

53、在图象上绘制热点网页制作与网站设计网页制作与网站设计五五. .使用伪类改变超级链接样式使用伪类改变超级链接样式链接有四种状态：未使用的链接（链接有四种状态：未使用的链接（link）、访问过的链接）、访问过的链接（visited）、鼠标在链接对象上（）、鼠标在链接对象上（hover）和链接激活时）和链接激活时（actived）使用样式面板定义伪类。）使用样式面板定义伪类。（1）伪类定义改变超链接显示样式的一般方法）伪类定义改变超链接显示样式的一般方法CSS中使用标签中使用标签a的四个伪类（的四个伪类（a:link、a:visited、a:hover、a:actived）来表示链接的这四种状态，重

54、新定义这四个）来表示链接的这四种状态，重新定义这四个伪类来改变超链接的样式。伪类来改变超链接的样式。在在CSS样式面中，点击样式面中，点击“新建新建”按钮；按钮；在出现对话框的在出现对话框的“选择器类型选择器类型”下拉列表下选择下拉列表下选择“复合内复合内容容”，在，在“选择器名称选择器名称”下拉列表中选择下拉列表中选择“a:link”,“规则规则定义定义”取默认值，单击取默认值，单击“确定确定”；在在“CSS规则定义规则定义”对话框中，设置该伪类的各种属性值，对话框中，设置该伪类的各种属性值，例如在例如在“类型类型”下指定下指定Fong-family（字体）、（字体）、Font-size（大

55、小）、（大小）、Color（颜色）、（颜色）、Text-decoration（装饰）（装饰）参数是否要下划线。单击参数是否要下划线。单击“确定确定”。网页制作与网站设计网页制作与网站设计五五. .使用伪类改变超级链接样式使用伪类改变超级链接样式 重复这几步，再为重复这几步，再为a:visited、a:hover、a:actived三个三个伪类分别设置伪类分别设置CSS样式。则完成了对超链接四种显示样式样式。则完成了对超链接四种显示样式的重新定义。的重新定义。这四个伪类重新定义以后，网页中的超链接样式自动变为了新这四个伪类重新定义以后，网页中的超链接样式自动变为了新设置的样式。设置的样式。（2）

56、伪类和类结合定义多组超链接样式）伪类和类结合定义多组超链接样式还可以将伪类和类相结合，为网页定义几组超链接的样式。例还可以将伪类和类相结合，为网页定义几组超链接的样式。例如将标签如将标签a的伪类与类的伪类与类x相结合，采用上述方法分别为相结合，采用上述方法分别为a.x:link、a.x:visited、a.x:hover和和a.x:actived定义好定义好CSS样式。样式。在给网页中的文本对象应用超链接时，要在属性面板的在给网页中的文本对象应用超链接时，要在属性面板的“类类”下拉框中选择下拉框中选择“x”，这样就会出现新的一组超链接的显示，这样就会出现新的一组超链接的显示样式。样式。网页制作

57、与网站设计网页制作与网站设计五五. .使用伪类改变超级链接样式使用伪类改变超级链接样式 3）超链接）超链接CSS样式的简单定义法样式的简单定义法超链接伪类有一种简单定义方法，就是在网页的超链接伪类有一种简单定义方法，就是在网页的“页面属性页面属性”中进行。中进行。具体方法是：使用菜单具体方法是：使用菜单“修改修改”-“页面属性页面属性”-“链接链接（CSS）”，如图，如图2-26所示，在对话框中为链接、已访问所示，在对话框中为链接、已访问的链接、活动链接、变换图像链接设置几种简单属性（字的链接、活动链接、变换图像链接设置几种简单属性（字体、大小、颜色）。这样也可以改变超链接的样式。体、大小、颜

58、色）。这样也可以改变超链接的样式。 网页制作与网站设计网页制作与网站设计第第2.5节节 使用表格使用表格 【本节内容】 一.插入表格 二.编辑表格 三.表格中应用CSS样式 四.表格的嵌套 五.应用表格布局网页 网页制作与网站设计网页制作与网站设计一一.插入表格插入表格 在在DreamweaverDreamweaver中，有多种插入表格的方法，中，有多种插入表格的方法，使用使用菜单命令和工具按钮的方法插入和编辑表格的方法。菜单命令和工具按钮的方法插入和编辑表格的方法。可以采用如下步骤：可以采用如下步骤： 将鼠标光标置于文档中需要插入表格的位置。将鼠标光标置于文档中需要插入表格的位置。 执行执行

59、“插入插入”“表格表格”菜单命令，菜单命令，或者在或者在“插入插入”面板下选择按钮面板下选择按钮 ，弹出弹出“表格表格”对话对话框，如下图所示。框，如下图所示。 在对话框中输入如上图所示的表格参数，就可在对话框中输入如上图所示的表格参数，就可以得到相应的表结构。以得到相应的表结构。 网页制作与网站设计网页制作与网站设计一一.插入表格插入表格 网页制作与网站设计网页制作与网站设计二二.编辑表格编辑表格 表格元素的选定 使用标签选择器可以方便地选定整个表格，也可以选定表格的使用标签选择器可以方便地选定整个表格，也可以选定表格的单元格、行或其它元素。如选定第一行，可以把光标置于第一行的单元格、行或其

60、它元素。如选定第一行，可以把光标置于第一行的任一单元格内，然后点击状态栏的标签选择器中的任一单元格内，然后点击状态栏的标签选择器中的 标记。如下标记。如下图所示：图所示：使用相似的方法可以选中整个表格、一个单元格。网页制作与网站设计网页制作与网站设计二二.编辑表格编辑表格编辑表格结构 使用“属性”面板可以快捷地编辑表格的多个属性，如行数、列数、宽度、填充、间距、边框、对齐等，表格属性面板中的“填充”、“间距”、“边框”与新建表格对话框中的“单元格间距”、“单元格边距”和“边框粗细”相对应。还可以为表格应用CSS样式类、标签样式。 （1） 表格的宽度表格的宽度网页制作与网站设计网页制作与网站设计