Microsoft Word - 第3章.doc

Size: px

Start display at page:

Download "Microsoft Word - 第3章.doc"

戌物俸丁
5 years ago
Views:

第 3 章制作网页内容文字图像动画声音和视频是网页中常见的对象, 它们构成了网页的基本内容 Dreamweaver 提供了功能强大的可视化设计工具, 用户可以对这些网页对象进行编辑和处理本章主要内容 : 文字和段落在网页中的应用图像在网页中的应用多媒体对象在网页中的应用超链接 3.

1 第 3 章制作网页内容文字图像动画声音和视频是网页中常见的对象, 它们构成了网页的基本内容 Dreamweaver 提供了功能强大的可视化设计工具, 用户可以对这些网页对象进行编辑和处理本章主要内容 : 文字和段落在网页中的应用图像在网页中的应用多媒体对象在网页中的应用超链接 3.1 文字和段落在网页中的应用文字是网页的主体, 可以传达各种各样的信息, 浏览者主要通过文字了解网页的内容本节介绍在网页中插入文字设置文本属性和段落格式的方法插入文字在网页中插入文字有 3 种方法, 即直接输入粘贴剪贴板中的文字导入 Word 文档 1. 直接通过键盘输入 (1) 运行 Dreamweaver CS6, 在开始页中选择新建列表下的 HTML 新建一个网页文档 (2) 在文档窗口中 ( 即中间大块的白色区域 ) 单击, 出现光标并且一直在闪动 (3) 选择合适的输入法在光标处输入文字输入完一个段落按 Enter 键, 然后进行下一段落的输入, 如图 3-1 所示 2. 粘贴剪贴板中的文字用户可以从其他程序或者窗口中复制或剪切一些文本内容, 然后粘贴在 Dreamweaver 的文档窗口中 (1) 在 Word 窗口中选中需要的文本内容, 按 Ctrl+C 组合键将所选文字复制到剪贴板上 (2) 切换到 Dreamweaver 窗口中, 在文档窗口中单击定位光标, 按 Ctrl+V 组合键将剪贴板上的文字粘贴到当前光标位置

2 图 3-1 直接输入文字 3. 导入 Word 文档 (1) 用 Word 软件制作文档或者利用已经创建好的 Word 文档 (2) 新建一个 HTML 网页, 选择文件导入 Word 文档命令, 弹出导入 Word 文档对话框, 在其中选择要导入的 Word 文档, 如图 3-2 所示图 3-2 导入 Word 文档对话框 (3) 单击打开按钮即可将文本导入到网页中设置文本属性在网页中插入文本后可以对这些文本的属性进行相关设置, 这样网页将变得更加漂亮 1. 设置文本格式 Dreamweaver 中的文本格式设置与使用标准的字处理程序类似, 可以为文本块设置默 35 第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 36 认格式 ( 段落标题 1 标题 2 等 ), 更改所选文本的字体大小颜色和对齐方式, 或者应用文本样式 ( 如粗体斜体和下画线 ) Dreamweaver CS6 将两个属性检查器 (CSS 属性检查器和 HTML 属性检查器 ) 集成为一个属性面板在使用 CSS

如图 3-3 所示在应用 HTML 格式时 Dreamweaver 会将属性添加到页面正文的 HTML 代码中, 在应用 CSS 格式时 Dreamweaver 会将属性写入文档头或单独的样式表中专家点拨 : 使用 CSS 是一种能控制网页样式且不损坏其结构的方式通过将可视化设计元素 ( 字体颜色边距等 ) 与网页的结构逻辑分离,CSS 为 Web 设计人员提供了可视化控制和版式控制,

3 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 36 认格式 ( 段落标题 1 标题 2 等 ), 更改所选文本的字体大小颜色和对齐方式, 或者应用文本样式 ( 如粗体斜体和下画线 ) Dreamweaver CS6 将两个属性检查器 (CSS 属性检查器和 HTML 属性检查器 ) 集成为一个属性面板在使用 CSS 属性检查器时 Dreamweaver 使用层叠样式表 (CSS) 设置文本格式 CSS 使 Web 设计人员和开发人员能更好地控制网页设计, 同时改进功能以提供辅助功能并减小文件大小 CSS 属性检查器使用户能够访问现有样式, 也能创建新样式展开属性面板, 可以通过单击其左上角的 HTML 按钮或者 CSS 按钮进行 CSS 属性检查器和 HTML 属性检查器的切图 3-3 属性面板换, 如图 3-3 所示在应用 HTML 格式时 Dreamweaver 会将属性添加到页面正文的 HTML 代码中, 在应用 CSS 格式时 Dreamweaver 会将属性写入文档头或单独的样式表中专家点拨 : 使用 CSS 是一种能控制网页样式且不损坏其结构的方式通过将可视化设计元素 ( 字体颜色边距等 ) 与网页的结构逻辑分离,CSS 为 Web 设计人员提供了可视化控制和版式控制, 而不牺牲内容的完整性此外, 在单独的代码块中定义版式设计和页面布局, 无须对图像地图 font 标签表格和 GIF 间隔图像重新排序, 从而加快了下载速度, 简化了站点维护, 并能集中控制多个页面的设计属性 2. 设置文本字体第一次打开 Dreamweaver CS6 的字体列表时里面只有几种汉字字体, 需要用户自己添加其他字体, 具体的编辑字体列表和设置文本字体的方法如下 (1) 在 Dreamweaver 的文档编辑区中插入一些文字 (2) 选中需要改变字体的文本, 在属性面板中单击 CSS 按钮切换到 CSS 属性检查器展开字体后面的下拉列表, 选择编辑字体列表命令, 如图 3-4 所示图 3-4 选择编辑字体列表命令 (3) 弹出编辑字体列表对话框, 在可用字体列表框中选择 Verdana, 单击按钮, 将其添加到左侧的选择的字体框中, 然后用同样的方法将宋体加入选择的字体

选择新字体列表 (5) 弹出新建 CSS 规则对话框, 在选择器名称文本框中输入 gz001, 然后直接单击确定

4 框中, 这样将得到一个新的字体列表 Verdana, 宋体, 完成设置后单击确定按钮, 如图 3-5 所示图 3-5 添加字体 (4) 再次展开字体列表, 选择刚才新建的字体列表 Verdana, 宋体, 如图 3-6 所示图 3-6 选择新字体列表 (5) 弹出新建 CSS 规则对话框, 在选择器名称文本框中输入 gz001, 然后直接单击确定按钮, 如图 3-7 所示这样所选择的字体格式就被设置到所选文本上了 37 图 3-7 新建 CSS 规则对话框第 3 章科制作网页内容

5 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 38 专家点拨 : 第一次设置所选文本格式时会弹出新建 CSS 规则对话框, 在其中定义一个新的 CSS 规则有关 CSS 的详细内容请参考第 4 章的相关内容 3. 设置文字大小输入到网页中的文字都是按照默认的大小显示的, 用户可以对这些文本的大小进行更改具体操作步骤如下 : (1) 选中需要更改文字大小的文本, 在属性面板的目标规则下拉列表中选择 gz001( 这是前面步骤建立的一个 CSS 规则 ) (2) 单击大小选项框旁边的按钮, 在弹出的文字大小列表框中选择一个类别, 如图 3-8 所示图 3-8 设置文字大小 (3) 在大小选项框右边还有一个选项框, 是设置文字大小单位的, 里面包括像素 (px) 点数(pt) 厘米(cm) 等 9 个单位选项, 如图 3-9 所示用户可以根据需要选择文字大小的单位, 在默认情况下通常选择像素 (px) 为单位图 3-9 选择文字大小的单位 (4) 如果在大小列表框中没有需要的大小, 将光标定位在大小文本框中直接输入文字大小的数字, 然后按 Enter 键即可 4. 设置文本颜色一般情况下输入到网页中的文字都是黑色, 用户可以通过文本属性设置文本的颜色 (1) 选中需要更改文字颜色的文本, 在属性面板的目标规则下拉列表中选择

gz001( 这是前面步骤建立的一个 CSS 规则 ) (2) 单击文本颜色按钮, 弹出图 3-10 所示的调色板, 在其中选择一种需要的颜色即可图 3-10 设置颜色 (3) 在调色板中还可以单击颜色列表上方的系统颜色拾取器按钮, 此时将弹出颜色对话框, 如图 3-11 所示在这个对话框中用户可以自己调配颜色图 3-11 颜色对话框 3.1.3 设置段落格式网页中的文章段落分明有层次感才能让浏览者更好地阅读, 也会使页面看起来整洁美观大方下面介绍设置段落格式的方法 1.

6 gz001( 这是前面步骤建立的一个 CSS 规则 ) (2) 单击文本颜色按钮, 弹出图 3-10 所示的调色板, 在其中选择一种需要的颜色即可图 3-10 设置颜色 (3) 在调色板中还可以单击颜色列表上方的系统颜色拾取器按钮, 此时将弹出颜色对话框, 如图 3-11 所示在这个对话框中用户可以自己调配颜色图 3-11 颜色对话框设置段落格式网页中的文章段落分明有层次感才能让浏览者更好地阅读, 也会使页面看起来整洁美观大方下面介绍设置段落格式的方法 1. 设置文本标题在一个网站的网页中或者一篇独立的文章中通常都会有一个醒目的标题, 告诉浏览者这个网站的名字或该文章的主题 HTML 的标题标签主要用来快速设置文本标题的格式, 典型的形式是 <h1></h1>, 它用来设置第一层标题,<h2></h2> 设置第二层标题, 以此类推用户可以在设计视图中通过属性面板对文本标题进行设置 39 第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 40 (1) 在设计视图中将光标定位在要设置标题的段落 (2)

(3) 如果想取消设置好的标题格式, 可以在属性面板中单击格式右侧的下三角按钮, 在弹出的列表框中选择无专家点拨 : 如果想更改标题文字的外观, 比如更改标题 1

7 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 40 (1) 在设计视图中将光标定位在要设置标题的段落 (2) 进入属性面板, 切换到 HTML 属性检查器, 然后单击格式右侧的下三角按钮, 在弹出的列表框中就可以选择相应的标题格式, 如图 3-12 所示图 3-12 设置标题 (3) 如果想取消设置好的标题格式, 可以在属性面板中单击格式右侧的下三角按钮, 在弹出的列表框中选择无专家点拨 : 如果想更改标题文字的外观, 比如更改标题 1 的文本颜色为红色, 可以在属性面板中单击页面属性按钮, 打开页面属性对话框, 选择标题 (CSS), 然后设置标题 1 的颜色为红色, 如图 3-13 所示图 3-13 页面属性对话框 2. 设置段落对齐段落的对齐方式有居左对齐居右对齐居中对齐和两端对齐设置段落对齐的具体操作步骤如下 : (1) 新建一个 HTML 网页文档, 输入一些文本段落, 如图 3-14 所示 (2) 切换到代码视图, 观察和文本段落相关的代码, 如图 3-15 所示图 3-14 输入一些文本段落图 3-15 和文本段落相关的代码

<p> 和 </p> 这对标签是定义文本段落的标签, 在 <p> 和 </p> 之间的文本属于同一个段落 (3) 切换到设计视图, 将光标定位到文本段落居中对齐的后面 (4) 进入属性面板, 单击 CSS 按钮切换到 CSS 属性检查器, 然后单击居中对齐按钮, 弹出新建 CSS 规则对话框, 在选择器名称文本框中输入 gz001, 如图 3-16 所示 (5) 单击确定

8 <p> 和 </p> 这对标签是定义文本段落的标签, 在 <p> 和 </p> 之间的文本属于同一个段落 (3) 切换到设计视图, 将光标定位到文本段落居中对齐的后面 (4) 进入属性面板, 单击 CSS 按钮切换到 CSS 属性检查器, 然后单击居中对齐按钮, 弹出新建 CSS 规则对话框, 在选择器名称文本框中输入 gz001, 如图 3-16 所示 (5) 单击确定按钮, 可以看到设计视图中的文本定位到了页面中间, 不论怎样调整窗口大小, 这些文字始终保持在中间, 如图 3-17 所示图 3-16 新建 CSS 规则对话框图 3-17 设置文本居中对齐专家点拨 : 在属性面板中可以单击左对齐右对齐两端对齐按钮设置段落的对齐方式, 如图 3-18 所示左对齐居中对齐两端对齐右对齐图 3-18 段落的对齐方式按钮 3. 分段和换行 (1) 在设计视图中输入一些文本, 将光标定位到第一个段落间距的后面, 如图 3-19 所示 (2) 按 Enter 键进行分段, 则两个段落之间将会出现较大的间距, 如图 3-20 所示 41 图 3-19 定位光标图 3-20 用 Enter 键分段的效果第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版专家点拨 : 这里按下 Enter

3-21 所示 (4) 按 Shift+Enter 组合键进行分行, 可以看到两行之间的间距很小, 如图 3-22 所示图 3-21 定位光标图

HTML 按钮切换到 HTML 属性检查器 (3) 单击文本缩进按钮, 在设计视图中可以看到文本缩进的效果, 如图 3-24 所示图 3-23

9 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版专家点拨 : 这里按下 Enter 键换行以后其实就是一个新段落的开始, 切换到代码视图可以观察到多了一对 <p></p> 标签 42 (3) 将光标定位到第二个段落间距的后面, 如图 3-21 所示 (4) 按 Shift+Enter 组合键进行分行, 可以看到两行之间的间距很小, 如图 3-22 所示图 3-21 定位光标图 3-22 用 Shift+Enter 组合键分段的效果专家点拨 : 切换到代码视图, 可以观察到这次操作系统自动生成了一个 <br/> 标签, 这是一个换行标签, 它和 <p> 标签有本质的区别 4. 文本缩进 (1) 在设计视图中再输入 3 个文本段落, 将光标定位到第二个文本缩进的后面, 如图 3-23 所示 (2) 进入属性面板, 单击 HTML 按钮切换到 HTML 属性检查器 (3) 单击文本缩进按钮, 在设计视图中可以看到文本缩进的效果, 如图 3-24 所示图 3-23 定位光标图 3-24 一次文本缩进的效果 (4) 在设计视图中将光标定位到第三个文本缩进的后面, 如图 3-25 所示 (5) 连续单击两次文本缩进按钮, 在设计视图中可以看到文本连续缩进后的效果, 如图 3-26 所示图 3-25 定位光标图 3-26 两次文本缩进的效果

专家点拨 : 在属性面板中可以设置文本的粗体斜体样式, 其他文本样式可以通过选择格式样式菜单下的命令进行设置在样式菜单下除了粗体斜体外还包括下画线删除线加强等样式 3.1.

在文档编辑区中将光标定位在需要插入特殊字符的位置 (2) 将插入工具栏切换到文本选项卡 (3) 单击字符按钮右侧的黑色三角按钮, 在弹出的下拉列表中可以选择需要插入到网页的特殊字符, 如图 3-27 所示图 3-27 字符下拉列表专家点拨 :

10 专家点拨 : 在属性面板中可以设置文本的粗体斜体样式, 其他文本样式可以通过选择格式样式菜单下的命令进行设置在样式菜单下除了粗体斜体外还包括下画线删除线加强等样式插入特殊字符用户在制作网页时经常会应用一些特殊字符, 比如版权符号注册商标符号等, 这些特殊符号利用键盘直接输入有些困难, 可以利用 Dreamweaver 提供的文本选项卡中的字符功能来制作 (1) 在文档编辑区中将光标定位在需要插入特殊字符的位置 (2) 将插入工具栏切换到文本选项卡 (3) 单击字符按钮右侧的黑色三角按钮, 在弹出的下拉列表中可以选择需要插入到网页的特殊字符, 如图 3-27 所示图 3-27 字符下拉列表专家点拨 : 除了可以通过字符下拉列表插入特殊字符外, 用户还可以选择插入 HTML 特殊字符, 在联级菜单中选择需要的特殊字符插入 (4) 如果字符下拉列表中没有需要的特殊字符, 可以在字符下拉列表中选择其他字符, 在弹出的插入其他字符对话框中单击选择需要的特殊字符, 如图 3-28 所示 43 图 3-28 插入其他字符对话框第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版专家点拨 :HTML 只允许字符之间有一个空格, 若要在文档中添加其他空格, 必须插入不换行空格, 具体操作方法是在字符下拉列表中选择不换行空格

编号列表 (1) 新建一个 HTML 网页文档, 在页面中输入一些文本段落, 然后切换到设计视图, 拖动鼠标选择编号列表下面的 3 行文本, 如图 3-29 所示 (2) 进入属性面板, 单击编号列表按钮, 这时可以看到设计视图中的列表, 如图

3-31 定位光标准备图 3-32 新增加的插入新的列表项目列表项目 (5) 将光标定位在列表项目内部的任意位置, 然后右击, 从弹出的快捷菜单中选择列表属性命令, 在弹出的列表属性对话框中选择样式下拉列表框中的大写罗马字母选项, 设置

11 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版专家点拨 :HTML 只允许字符之间有一个空格, 若要在文档中添加其他空格, 必须插入不换行空格, 具体操作方法是在字符下拉列表中选择不换行空格使用段落列表列表是 HTML 中组织多个段落文本的一种方式, 列表分为编号列表和项目列表, 前一种列表用数字顺序为列表中的项目进行编号, 后一种列表在每个列表项目之前使用一个项目符号 1. 编号列表 (1) 新建一个 HTML 网页文档, 在页面中输入一些文本段落, 然后切换到设计视图, 拖动鼠标选择编号列表下面的 3 行文本, 如图 3-29 所示 (2) 进入属性面板, 单击编号列表按钮, 这时可以看到设计视图中的列表, 如图 3-30 所示 (3) 如果需要在列表中添加新项目, 将光标定位到最后一个列表项目的后面, 如图 3-31 所示 (4) 按 Enter 键, 列表中将会多出新的一行, 并自动编号, 如图 3-32 所示图 3-29 选择列表项目图 3-30 编号列表图 3-31 定位光标准备图 3-32 新增加的插入新的列表项目列表项目 (5) 将光标定位在列表项目内部的任意位置, 然后右击, 从弹出的快捷菜单中选择列表属性命令, 在弹出的列表属性对话框中选择样式下拉列表框中的大写罗马字母选项, 设置开始计数为 2, 然后单击确定按钮, 如图 3-33 所示图 3-33 设置编号列表的属性 (6) 完成上面的设置后列表的编号将用罗马字符表示, 起始编号项目为 II( 罗马字符中的 2), 效果如图 3-34 所示专家点拨 : 编号列表又称为有序列表, 使用 <ol></ol> 标签创建编号列表具体使用方法如下 :

<ol> <li> 列表项目一 </li> <li> 列表项目二 </li> <li> 列表项目三 </li> <li> 列表项目四 </li>

项目列表 (1) 在设计视图中选择项目列表下面的 3 行文字, 如图 3-35 所示 (2) 在属性面板中单击项目列表按钮,

项目列表的效果 (3) 在列表中右击, 在弹出的快捷菜单中选择列表属性命令, 在弹出的列表属性对话框中设置样式为正方形, 然后单击确定

设置项目列表属性图 3-38 项目列表属性修改后的效果专家点拨 : 使用 <ul></ul> 标签创建项目列表具体使用方法如下 : <ul>

12 <ol> <li> 列表项目一 </li> <li> 列表项目二 </li> <li> 列表项目三 </li> <li> 列表项目四 </li> </ol> 2. 项目列表 (1) 在设计视图中选择项目列表下面的 3 行文字, 如图 3-35 所示 (2) 在属性面板中单击项目列表按钮, 默认的列表项目记号为圆形黑点, 效果如图 3-36 所示图 3-34 修改属性后的编号列表效果图 3-35 选择列表中的项目图 3-36 项目列表的效果 (3) 在列表中右击, 在弹出的快捷菜单中选择列表属性命令, 在弹出的列表属性对话框中设置样式为正方形, 然后单击确定按钮, 如图 3-37 所示 (4) 在设计视图中可以看到项目列表前面的项目标记变成黑色的正方形, 如图 3-38 所示图 3-37 设置项目列表属性图 3-38 项目列表属性修改后的效果专家点拨 : 使用 <ul></ul> 标签创建项目列表具体使用方法如下 : <ul> <li> 列表项目一 </li> <li> 列表项目二 </li> <li> 列表项目三 </li> </ul> 3.2 图像在网页中的应用图像是网页中最常用的元素, 要想制作出漂亮的网页是离不开图像这个元素的网页中的图像一般都是使用 Photoshop Fireworks 这样的专业图像处理软件进行编辑, 然后将 45 第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版这些图像插入到 Dreamweaver 中对网页进行修饰和美化 3.2.1 插入图像 46 下面结合实例介绍在网页中插入图像和插入图像占位符的方法 1.

jpg 文件, 选中文件后可在对话框的右边看到图像的预览效果, 如图 3-40 所示图 3-39 插入图像图 3-40 选择图像源文件 (4) 单击确定按钮, 在弹出的图像标签辅助功能属性对话框中设置替换文本为最新汽车产品, 如图 3-41 所示然后单击确定按钮, 图像就被插入到页面中 (5) 保存文件, 然后按 F12 键预览, 将鼠标指针放到图片上方,

13 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版这些图像插入到 Dreamweaver 中对网页进行修饰和美化插入图像 46 下面结合实例介绍在网页中插入图像和插入图像占位符的方法 1. 插入图像的方法 (1) 新建一个 HTML 网页文档并将其保存, 在设计视图中将光标定位在准备插入图像的位置 (2) 在常用选项卡中单击图像按钮后面的下三角按钮, 在下拉列表中选择图像, 如图 3-39 所示专家点拨 : 用户还可以选择插入图像命令进行插入图像的操作 (3) 在弹出的选择图像源文件对话框中选择 images 文件夹中的汽车 1.jpg 文件, 选中文件后可在对话框的右边看到图像的预览效果, 如图 3-40 所示图 3-39 插入图像图 3-40 选择图像源文件 (4) 单击确定按钮, 在弹出的图像标签辅助功能属性对话框中设置替换文本为最新汽车产品, 如图 3-41 所示然后单击确定按钮, 图像就被插入到页面中 (5) 保存文件, 然后按 F12 键预览, 将鼠标指针放到图片上方, 这时将会出现一个提示信息最新汽车产品, 也就是上一个步骤中设置的替换文本, 如图 3-42 所示 (6) 网页中的图像是用 <img> 标签定义的, 可以切换到代码视图查看相关的代码 : <img src="../images/diannao3.png" alt=" 最新汽车产品 " width="159" height= "141" /> 专家点拨 : 在新建网页文档时应该指定文件名并保存之后再继续操作如果在未保存网页文档的情况下插入图像会出现一个警示对话框, 提示操作者只有先保存文档, 才能统一图像和网页文档的路径为了防止指定错误的图像路径, 应该将网页文档保存到站点

文件夹之后再进行操作图 3-41 图像标签辅助功能属性对话框图 3-42 网页预览效果 2.

但是这幅图片还没有准备好, 而又需要这幅图片以便完成页面的整体布局和设计, 可以先插入图像占位符, 等到图片编辑好后再将其换成图片

(2) 在名称和替换文本文本框中都输入 top, 颜色选为红色, 宽度和高度分别为 760 和 140, 如图 3-43 所示 (3)

图像占位符效果 (4) 用户以后可以随时在图像占位符的位置将它替换成真正的图像, 只要在属性面板的源文件文本框中直接输入真正图像的地址,

14 文件夹之后再进行操作图 3-41 图像标签辅助功能属性对话框图 3-42 网页预览效果 2. 插入图像占位符的方法顾名思义, 图像占位符是在需要使用图片的地方先插入一个占位图形占领着地盘也就是说, 如果打算在网页中的某个位置放入一幅图片, 但是这幅图片还没有准备好, 而又需要这幅图片以便完成页面的整体布局和设计, 可以先插入图像占位符, 等到图片编辑好后再将其换成图片插入图像占位符的具体步骤如下 : (1) 在常用选项卡中单击图像按钮后面的下三角按钮, 在下拉列表中选择图像占位符, 弹出图像占位符对话框 (2) 在名称和替换文本文本框中都输入 top, 颜色选为红色, 宽度和高度分别为 760 和 140, 如图 3-43 所示 (3) 单击确定按钮后编辑文档中出现了如图 3-44 所示的效果注意, 图像占位符在选中之后周围会有黑色边框图 3-43 图像占位符对话框图 3-44 图像占位符效果 (4) 用户以后可以随时在图像占位符的位置将它替换成真正的图像, 只要在属性面板的源文件文本框中直接输入真正图像的地址, 或者单击它后面的按钮指向真正的图像, 或者单击按钮浏览文件, 选择真正的图像就可以了专家点拨 : 选中图像占位符以后单击属性面板中的创建按钮动外部图像编辑程序 Fireworks 来完成对图片的创建可以启科制作网页内容 47 第 3 章

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 3.2.

15 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版设置图像属性 48 在网页中插入图像以后可以使用属性面板设置图像的属性, 如图 3-45 所示下面对属性面板中的各个选项进行说明 ID 文本框 : 在图像缩略图旁边的 ID 文本框中输入一个名称, 以便在编写脚本语言 ( 例如 JavaScript 或 VBScript) 时可以引用该图像图 3-45 图像属性面板宽和高文本框 : 以像素为单位指定图像的宽度和高度在页面中插入图像时 Dreamweaver 会自动用图像的原始尺寸更新这些文本框如果设置的宽和高的值与图像的实际宽度和高度不相符, 则该图像在浏览器中可能不会正确显示若要恢复原始值, 可单击宽和高文本框标签, 或单击用于输入新值的宽和高文本框右侧的重设大小按钮源文件文本框 : 指定图像的源文件单击文件夹图标可以浏览找到图像的源文件, 也可以直接输入图像源文件所在的路径替换下拉列表 : 指定在只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替换文本在某些浏览器中, 当鼠标指针滑过图像时也会显示该文本链接文本框 : 指定图像的超链接方法为将指向文件图标拖到站点面板中的某个文件, 单击文件夹图标浏览到站点上的某个文档, 也可以直接手动输入 URL 编辑按钮 : 启动在外部编辑器首选参数中指定的图像编辑器并打开选定的图像编辑图像设置按钮 : 选择页面中的图像后单击这个按钮打开图像预览对话框, 在其中可以设置图像 ( 优化裁剪等 ) 并预览图像效果地图文本框和热点工具 : 允许用户标注和创建客户端图像地图与热区垂直边距和水平边距文本框 : 沿图像的边添加边距, 以像素表示垂直边距沿图像的顶部和底部添加边距, 水平边距沿图像的左侧和右侧添加边距目标下拉列表 : 指定链接的页面应当载入的框架或窗口当图像没有链接到其他文件时此选项不可用当前框架集中所有框架的名称都显示在目标列表中边框文本框 : 以像素为单位的图像边框的宽度, 在默认情况下为无边框裁剪按钮 : 修剪图像的大小, 从所选图像中删除不需要的区域重新取样按钮 : 当改变了图像尺寸时此按钮有效, 可以重新取样已调整尺寸的图像, 提高图像在新的大小和形状下的品质亮度和对比度按钮 : 调整图像的亮度和对比度设置

锐化按钮 : 调整图像的清晰度重设大小按钮 : 当改变了图像尺寸后, 宽和高文本框的右边会出现这个按钮, 单击它可以将宽和高的值重设为图像的原始大小对齐下拉列表 : 在其中选择一个选项, 对齐同一行上的图像和文本 3.2.

编辑器首选参数选择用于启动和编辑图形文件的图像编辑器, 可以设置编辑器打开哪些文件类型, 并且可以选择多个图像编辑器 (1) 选择编辑首选参数命令, 弹出首选参数对话框, 从左侧的分类列表中选择文件类型 / 编辑器选项, 如图 3-46 所示图 3-46 选择

16 锐化按钮 : 调整图像的清晰度重设大小按钮 : 当改变了图像尺寸后, 宽和高文本框的右边会出现这个按钮, 单击它可以将宽和高的值重设为图像的原始大小对齐下拉列表 : 在其中选择一个选项, 对齐同一行上的图像和文本使用外部图像编辑器 Dreamweaver 允许用户使用外部图像编辑器对页面上的图像进行编辑, 在编辑页面中的图像时选中图像, 然后单击属性面板中的编辑按钮就可以启动外部的图像编辑软件对图像进行编辑在 Dreamweaver 的首选参数对话框中使用文件类型 / 编辑器首选参数选择用于启动和编辑图形文件的图像编辑器, 可以设置编辑器打开哪些文件类型, 并且可以选择多个图像编辑器 (1) 选择编辑首选参数命令, 弹出首选参数对话框, 从左侧的分类列表中选择文件类型 / 编辑器选项, 如图 3-46 所示图 3-46 选择首选参数对话框中的文件类型 / 编辑器 (2) 在扩展名列表中选择要为其设置外部编辑器的文件扩展名单击编辑器列表上方的加号 (+) 按钮, 在选择外部编辑器对话框中浏览到要作为此文件类型的编辑器启动的应用程序, 如图 3-47 所示 49 图 3-47 选择外部编辑器对话框第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 (3) 在首选参数对话框中, 如果希望该编辑器成为此文件类型的主编辑器, 可以单击设为主要按钮 50 3.

插入 SWF 在 Dreamweaver 中插入 Flash 动画的方法如下 : (1)

html (2) 将光标定位在需要插入 Flash 动画的位置, 在常用选项卡中单击媒体按钮, 从弹出的下拉菜单中选择 SWF, 如图 3-48 所示 (3) 弹出选择 SWF 对话框, 在其中选择 images 文件夹下的网络广告.

17 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 (3) 在首选参数对话框中, 如果希望该编辑器成为此文件类型的主编辑器, 可以单击设为主要按钮多媒体对象在网页中的应用随着多媒体技术的发展,Internet 的功能也得到较大的提高, 音乐动画视频等媒体的应用越来越广泛, 音乐网站电影网站播客等融合多媒体技术的网站也越来越多在网页中应用 Flash 动画在制作网页时让 Dreamweaver 与动感鲜活的 Flash 动画相结合有助于制作出更具动感的网页, 网页的表现效果也因此更受用户的青睐 1. 插入 SWF 在 Dreamweaver 中插入 Flash 动画的方法如下 : (1) 新建一个网页文档, 并保存为 html (2) 将光标定位在需要插入 Flash 动画的位置, 在常用选项卡中单击媒体按钮, 从弹出的下拉菜单中选择 SWF, 如图 3-48 所示 (3) 弹出选择 SWF 对话框, 在其中选择 images 文件夹下的网络广告.swf 影片文件, 并单击确定按钮, 如图 3-49 所示图 3-48 选择 SWF 图 3-49 选择 SWF 对话框 (4) 这时页面中出现一个 SWF 文件占位符 SWF 文件占位符有一个选项卡式蓝色外框, 此选项卡指示资源的类型 (SWF 文件 ) 和 SWF 文件的 ID 此选项卡还显示一个眼睛图标, 此图标可用于在 SWF 文件和用户在没有正确的 Flash Player 版本时看到的下载信息之间切换 (5) 单击属性面板中的播放按钮就可以在文档窗口中查看播放的 Flash 影片为了在浏览器中查看操作结果, 按 F12 键, 这样可以在浏览器中确认 Flash 影片的动画效果, 如图 3-50 所示

在 Dreamweaver 中编辑 FLA 文件 Dreamweaver 提供了在编辑区中直接启动 Flash 软件编辑动画的功能如果用户对编辑区中的 SWF 不满意, 可以启动 Flash 软件对其进行编辑处理 (1) 选中编辑区中的 SWF, 在属性

18 图 3-50 浏览器中的 Flash 动画效果专家点拨 : 有时候无法在浏览器中显示 Flash 影片, 这是因为没有安装 Flash 影片的播放插件用户可以自己安装插件但是, 当使用的浏览器版本过低或者安装的插件有问题时无法收看 Flash 影片, 此时用户需要在 Adobe 公司的主页下载 Flash Player 并安装 2. 在 Dreamweaver 中编辑 FLA 文件 Dreamweaver 提供了在编辑区中直接启动 Flash 软件编辑动画的功能如果用户对编辑区中的 SWF 不满意, 可以启动 Flash 软件对其进行编辑处理 (1) 选中编辑区中的 SWF, 在属性面板中单击编辑按钮, 弹出查找 FLA 文件对话框, 在其中查找到相应的 FLA 文件, 如图 3-51 所示图 3-51 查找 FLA 文件对话框 (2) 单击打开按钮即可启动 Flash CS6 软件对 FLA 文件进行编辑, 处理完成后单击完成按钮, 如图 3-52 所示 (3) 系统将 FLA 文件重新保存并且生成 SWF 文件后自动返回到 Dreamweaver 编辑区, 编辑区中的 SWF 得到相应的更改 51 第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 52 图 3-52 Flash CS6 软件窗口 3.

$SWF 文件 (images\trans.$ swf), 在属性面板中单击播放按钮可以在编辑区中看到图 3-53 所示的效果, 发现 SWF 的背景色为白色, 而表格的背景色为蓝色, 没有融合在一起, 效果很不好

19 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 52 图 3-52 Flash CS6 软件窗口 3. 使 SWF 背景透明在页面中插入 SWF 时经常会出现网页的背景色和 SWF 的背景色不一致的情况, 这样就影响了页面的显示效果, 用户可以在 Dreamweaver 中通过将 SWF 设置成透明背景来解决这个问题 (1) 在文档编辑区中插入一个 1 行 1 列的表格, 设置这个表格的高度为 350 像素, 背景色为蓝色 (2) 在这个表格中插入一个 SWF 文件 (images\trans.swf), 在属性面板中单击播放按钮可以在编辑区中看到图 3-53 所示的效果, 发现 SWF 的背景色为白色, 而表格的背景色为蓝色, 没有融合在一起, 效果很不好 (3) 单击停止按钮停止 SWF 的播放, 在 Wmode 下拉列表中选择透明选项然后保存文档并预览, 可以看到 SWF 的背景变成透明, 效果很好, 如图 3-54 所示图 3-53 编辑区中的 SWF 图 3-54 将 SWF 设置成透明 4. 设置 SWF 的属性在属性面板中可以指定 SWF 的属性, 如图 3-55 所示

图 3-55 属性面板 ID 文本框 : 为 SWF 文件指定唯一的 ID, 在属性面板最左侧的文本框中输入 ID 即可宽和高文本框 : 以像素为单位指定 SWF 影片的宽度和高度文件文本框 : 指定 SWF 文件的路径单击文件夹图标以浏览到某一文件, 或者直接输入路径背景颜色文本框 : 指定影片区域的背景颜色在不播放影片时 ( 在加载时和在播放后 ) 也显示此颜色类

则在加载页面时自动播放影片垂直边距和水平边距文本框 : 指定影片上下左右空白的像素数品质下拉列表 : 在影片播放期间控制其抗失真高品质设置可改善影片的外观, 但高品质设置的影片需要较快的处理器才能在屏幕上正确呈现低品质设置会首先照顾到显示速度, 然后才考虑外观, 而高品质设置首先照顾到外观, 然后才考虑显示速度自动低品质会首先照顾到显示速度, 但会在可能的情况下改善外观

20 图 3-55 属性面板 ID 文本框 : 为 SWF 文件指定唯一的 ID, 在属性面板最左侧的文本框中输入 ID 即可宽和高文本框 : 以像素为单位指定 SWF 影片的宽度和高度文件文本框 : 指定 SWF 文件的路径单击文件夹图标以浏览到某一文件, 或者直接输入路径背景颜色文本框 : 指定影片区域的背景颜色在不播放影片时 ( 在加载时和在播放后 ) 也显示此颜色类下拉列表 : 可用于对影片应用 CSS 类源文件文本框 : 指定源文档 (FLA 文件 ) 的路径编辑按钮 : 启动 Flash 以更新 FLA 文件 ( 使用 Flash 软件创建的文件 ) 如果计算机上没有安装 Flash, 则会禁用此选项循环复选框 : 使 SWF 影片连续播放如果没有选中此复选框, 则影片将播放一次, 然后停止自动播放复选框 : 选中此复选框, 则在加载页面时自动播放影片垂直边距和水平边距文本框 : 指定影片上下左右空白的像素数品质下拉列表 : 在影片播放期间控制其抗失真高品质设置可改善影片的外观, 但高品质设置的影片需要较快的处理器才能在屏幕上正确呈现低品质设置会首先照顾到显示速度, 然后才考虑外观, 而高品质设置首先照顾到外观, 然后才考虑显示速度自动低品质会首先照顾到显示速度, 但会在可能的情况下改善外观自动高品质开始时会同时照顾显示速度和外观, 但以后可能会根据需要牺牲外观以确保速度比例下拉列表 : 确定影片如何适合在宽和高文本框中设置的尺寸默认设置为显示整个影片对齐下拉列表 : 确定影片在页面上的对齐方式 Wmode 下拉列表 : 为 SWF 文件设置 Wmode 参数以避免与 DHTML 元素 ( 例如 Spry Widget) 相冲突默认值是不透明, 这样在浏览器中 DHTML 元素就可以显示在 SWF 文件的上面如果 SWF 文件包括透明度, 并且希望 DHTML 元素显示在它们的后面, 请选择透明选项选择窗口选项可以从代码中删除 Wmode 参数并允许 SWF 文件显示在其他 DHTML 元素的上面播放按钮 : 在文档编辑窗口中播放影片参数按钮 : 单击这个按钮打开一个对话框, 可在其中输入传递给影片的附加参数, 但影片必须已设计好可以接收这些附加参数在网页中应用 FLV 视频 FLV(Flash Video 的简称 ) 是 Flash 专用的视频格式, 这是一种流媒体 53 第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 54 格式由于它形成的文件极小加载速度极快, 使得在网络上观看视频文件成为可能目前视频门户网站十分流行, 例如优酷土豆等视频网站提供了大量的视频素材, 这些视频大部分都是 FLV 格式的文件 1. 插入 FLV 文件 (1) 新建一个 HTML 网页文档, 将其保存为 3.3.2.

flv 是 Flash 视频格式文件的扩展名, 要想获得 FLV 文件, 可以使用 Riva FLV Encoder 将其他格式的视频 ( 比如 MPEG AVI) 格式转换成 FLV 文件 (3) 弹出插入 FLV 对话框, 在视频类型下拉列表框中选择累进式下载视频选项, 单击 URL 文本框右侧的浏览按钮, 选择 part3 中的 video.

21 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 54 格式由于它形成的文件极小加载速度极快, 使得在网络上观看视频文件成为可能目前视频门户网站十分流行, 例如优酷土豆等视频网站提供了大量的视频素材, 这些视频大部分都是 FLV 格式的文件 1. 插入 FLV 文件 (1) 新建一个 HTML 网页文档, 将其保存为 html 在页面中输入文字播放 FLV 视频, 然后将光标定位到文字的后面, 如图 3-56 所示图 3-56 定位光标 (2) 在常规选项卡中单击展开媒体按钮, 从弹出的下拉菜单中选择 FLV 命令, 如图 3-57 所示专家点拨 :.flv 是 Flash 视频格式文件的扩展名, 要想获得 FLV 文件, 可以使用 Riva FLV Encoder 将其他格式的视频 ( 比如 MPEG AVI) 格式转换成 FLV 文件 (3) 弹出插入 FLV 对话框, 在视频类型下拉列表框中选择累进式下载视频选项, 单击 URL 文本框右侧的浏览按钮, 选择 part3 中的 video.flv 文件, 在外观下拉列表框中选择一种控制栏外观, 比如 Clear Skin 3( 在列表下方有控制栏的外观预览 ), 如图 3-58 所示图 3-57 插入 Flash 视频图 3-58 插入 FLV 对话框专家点拨 : 在插入 FLV 对话框中视频类型有两种, 一种是累进式下载视频, 另外一种是流视频前者可以用于普通的 Web 服务器, 若要使用后一种类型必须有专门的流媒体服务器 2. 设置 FLV 文件的播放 (1) 在插入 FLV 对话框中单击检测大小按钮检测 FLV 视频的尺寸, 检测结果将显示在宽度和高度文本框中, 如图 3-59 所示

22 图 3-59 检测大小 (2) 选中自动播放和自动重新播放复选框, 如图 3-60 所示自动播放指定在网页打开时是否播放视频, 自动重新播放指定播放控件在视频播放完之后是否返回起始位置图 3-60 设置视频自动播放选项 (3)Flash 视频完成插入后在设计视图中会显示为灰色占位标志, 在用户浏览网页的时候 Flash 视频将在这个区域中播放, 如图 3-61 所示 55 第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 (4) 预览网页, 效果如图 3-62 所示在浏览器窗口中播放刚才插入的 Flash 视频, 这个视频的下端会有一个视频播放控制条, 单击上面的按钮可以控制视频的播放 56 图 3-61 插入 Flash 视频后的页面效果图 3-62 预览网页效果在网页中完成插入 FLV

swf, 这两个文件保存在站点根目录的 Scripts 文件夹下要想网页文件正常播放 FLV 视频, 必须保证这 4 个文件都存在, 缺一不可专家点拨 : 在本地预览包含 FLV 的页面时可能会遇到不能正常显示 FLV 视频的情况, 大部分是因为用户在 Dreamweaver 站点定义中未定义本地测试服务器并且使用该测试服务器来预览页面解决方法是定义测试服务器 ( 安装 IIS)

23 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 (4) 预览网页, 效果如图 3-62 所示在浏览器窗口中播放刚才插入的 Flash 视频, 这个视频的下端会有一个视频播放控制条, 单击上面的按钮可以控制视频的播放 56 图 3-61 插入 Flash 视频后的页面效果图 3-62 预览网页效果在网页中完成插入 FLV 视频的操作以后, 在当前网页文档所在的文件夹下会自动产生两个文件, 即 Clear_Skin_3.swf 和 FLVPlayer_Progressive.swf 另外, 系统还会自动产生两个文件, 即 swfobject_modified.js 和 expressinstall.swf, 这两个文件保存在站点根目录的 Scripts 文件夹下要想网页文件正常播放 FLV 视频, 必须保证这 4 个文件都存在, 缺一不可专家点拨 : 在本地预览包含 FLV 的页面时可能会遇到不能正常显示 FLV 视频的情况, 大部分是因为用户在 Dreamweaver 站点定义中未定义本地测试服务器并且使用该测试服务器来预览页面解决方法是定义测试服务器 ( 安装 IIS) 并使用该测试服务器来预览页面, 或者将文件上传到远程服务器并通过远程显示在网页中应用声音目前因特网上有很多站点都在主页中采用了多媒体技术, 表现出类似电影的效果, 这种效果在一些音乐网站和电影网站的主页设计中最为常见在 Dreamweaver 中主要通过在网页中插入媒体插件进行声音和视频的应用制作网页背景音乐主要有两个步骤, 一是插入音乐文件, 二是隐藏音乐的播放条, 而在 Dreamweaver 中插入媒体文件是通过插入插件的方法来实现的 1. 插入音乐 (1) 新建一个 HTML 网页文档, 将其保存为 html, 并在这个页面中插入文字和图片, 然后将光标定位在最后一行, 如图 3-63 所示 (2) 在常用选项卡中单击展开媒体按钮, 从弹出的下拉菜单中选择插件命令, 如图 3-64 所示 (3) 从弹出的选择文件对话框中选择 images 下的 music.mp3 文件, 然后单击确定按钮, 如图 3-65 所示

图 3-63 定位光标图 3-64 插入插件图 3-65 选择声音文件专家点拨 :

24 图 3-63 定位光标图 3-64 插入插件图 3-65 选择声音文件专家点拨 : 可以用作网页文档的背景音乐的声音文件格式有 MID WAV MP3 等, 但是在采用 MP3 格式时文件容量过大, 并且要在本地计算机上安装另外的专用播放器, 考虑到计算机配置较低的用户, 设计者最好选择负荷相对少的 MID 声音格式 (4) 声音文件完成插入后在设计视图中会显示为一个灰色的插件标志, 在用户浏览网页的时候将在这个区域显示一个声音播放控制条, 如图 3-66 所示 (5) 选择插件标志, 在属性面板中将它的宽和高分别设置为 400 和 50, 如图 3-67 所示, 这样可以使网页中显示的音乐播放控制条更清楚 57 图 3-66 插入声音后的网页效果图 3-67 改变插件标志的尺寸第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 58 (6) 按 F12 键预览, 页面加载后将会听到音乐, 音乐只播放一遍,

设置参数 (1) 回到 Dreamweaver 的界面中, 进入设计视图, 选择音频文件的插件图标 (2) 进入属性面板, 单击参数按钮, 在弹出的参数对话框中单击添加按钮, 设置参数为

设置其值为 TRUE, 如图 3-70 所示设置这个参数的作用是隐藏音频播放条, 让它不显示在页面上图 3-69 添加 LOOP 参数图 3-70 添加 HIDDEN 参数 (4) 按 F12

25 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 58 (6) 按 F12 键预览, 页面加载后将会听到音乐, 音乐只播放一遍, 并且页面上会有一个播放条, 如图 3-68 所示 2. 设置参数 (1) 回到 Dreamweaver 的界面中, 进入设计视图, 选择音频文件的插件图标 (2) 进入属性面板, 单击参数按钮, 在弹出的参数对话框中单击添加按钮, 设置参数为 LOOP 值为 TRUE, 如图 3-69 所示这样设置是为了让音乐不断循环, 形成背景音乐 (3) 再次单击参数对话框中的添加按图 3-68 播放音乐的页面钮添加一个新的参数 HIDDEN, 设置其值为 TRUE, 如图 3-70 所示设置这个参数的作用是隐藏音频播放条, 让它不显示在页面上图 3-69 添加 LOOP 参数图 3-70 添加 HIDDEN 参数 (4) 按 F12 键预览, 可以发现背景音乐不断重复, 并且页面上没有了播放条, 如图 3-71 所示图 3-71 具有背景音乐的页面专家点拨 : 在网页中插入非 FLV 视频的方法和插入声音的方法类似, 这里不再赘述 3.4 超链接网络之所以引人注目, 除了因为其具有丰富多彩的内容之外, 更重要的是它具有网络相连的特性这些网络相连的特性是通过超链接来完成的, 在页面中加入超链接后只要在

下面通过一个实例介绍给文字和图片创建超链接的方法 1. 给文字创建超链接 (1) 事先制作好 3 个 HTML 文档, 把它们存放在站点的同一个文件夹下, 文件面板中的文件结构如图 3-72 所示 (2) 用 Dreamweaver 打开 3.4.

26 超链接上单击就能够链接到所要查看的网页创建超链接的方法一个网站是由多个网页组成的, 站点和页面具有一定的链接关系才能正常运行, 在制作网站时需要建立站点与网页网页与网页之间的链接关系所谓超链接是指从一个网页指向一个目标的链接关系, 这个目标可以是另一个网页 ( 同一个网站内部的网页或者其他网站的网页 ), 也可以是同一个网页的不同位置, 还可以是一个电子邮件地址一个文件等在网页中最常见的就是在文字或者图片上建立超链接, 下面通过一个实例介绍给文字和图片创建超链接的方法 1. 给文字创建超链接 (1) 事先制作好 3 个 HTML 文档, 把它们存放在站点的同一个文件夹下, 文件面板中的文件结构如图 3-72 所示 (2) 用 Dreamweaver 打开 3.4.html, 这个页面中有 3 行文字, 如图 3-73 所示下面要给其中的两行文字分别加上超链接, 单击添加了超链接的文字后能够打开相应的网页 (3) 选中文字宝马, 打开属性面板, 拖动指向到文件按钮到文件面板中的 bmw.html 上此时鼠标指针变成带箭头的形状, 松开鼠标后一个超链接就添加完成了, 如图 3-74 所示图 3-72 文件面板图 3-73 网页 3.4.html 的效果 (4) 可以发现在属性面板的链接文本框内已自动填写了 bmw.html 另外, 在编辑页面上可以看到添加了超链接的文字变成蓝色, 而且下面添加了一条下画线, 如图 3-75 所示 (5) 用另外一种方法给另一行文字添加超链接选中文字奔驰, 在属性面板中单击浏览文件按钮 (6) 在弹出的选择文件对话框中选择 benz.html, 如图 3-76 所示 (7) 单击确定按钮即可完成超链接的定义同样, 编辑页面上的文字变成蓝色, 而且多了一条下画线 59 第 3 章科制作网页内容

给图片创建超链接用户除了可以给文本添加超链接外, 还可以给图片添加超链接给图片添加超链接的方法与给文字添加超链接的方法类似 (1) 在网页 3.4.

27 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 60 图 3-74 创建超链接文本由默认颜色变为蓝色, 并且下面多了一条下画线图 3-75 文字添加了超链接后的效果图 3-76 选择文件对话框 (8) 保存文件, 按 F12 键预览网页, 单击一下超链接文字就可以打开相应的页面了 2. 给图片创建超链接用户除了可以给文本添加超链接外, 还可以给图片添加超链接给图片添加超链接的方法与给文字添加超链接的方法类似 (1) 在网页 3.4.html 中插入一个图片, 如图 3-77 所示 (2) 选中图片, 这里要给图片添加一个外部链接, 是一个具体的网址进入属性面板, 在链接文本框中输入如图 3-78 所示专家点拨 : 在链接文本框中添加一个网址时一定要输入包含协议 ( 如的绝对路径, 如果直接写会把网址当成是一个文件名, 单击链接后会出现找不到服务器的提示

Dreamweaver 中创建电子邮件链接, 具体方法是选中需要添加 E-mail 链接的对象, 在属性面板的链接文本框中输入 mailto: 电子邮件地址这里要注意在冒号与电子邮件地址之间不能输入任何空格, 否则会出现错误 4.

28 (3) 保存文件, 按 F12 键预览网页, 单击图片就链接到对应的网站上去了 3. 添加链接是网上最常使用的功能之一, 用户也可以在自己的网页中加入链接在 Windows 系统中如果设置了 Outlook Foxmail 等邮件软件, 在浏览器中单击链接会自动打开新邮件窗口, 并在地址栏中自动添加链接中的邮箱地址图 3-77 插入图片图 3-78 在链接文本框中直接输入链接地址用户可以在 Dreamweaver 中创建电子邮件链接, 具体方法是选中需要添加链接的对象, 在属性面板的链接文本框中输入 mailto: 电子邮件地址这里要注意在冒号与电子邮件地址之间不能输入任何空格, 否则会出现错误 4. 添加空链接空链接是指未指派的链接空链接用于向页面上的对象或文本附加行为例如可向空链接附加一个行为, 以便在指针滑过该链接时会交换图像或显示绝对定位的元素 (AP 元素 ) 选中需要添加超链接的对象, 在属性面板的链接文本框中输入一个 # 就可以创建一个空链接超链接的路径每个网页甚至每个独立的网页元素 ( 图像声音动画视频等 ) 都有一个唯一的地址, 称为统一资源定位符 (URL) 在网页的超链接中正是以统一资源定位路径的方式来链接的一般情况下路径有 3 种表示方法, 即绝对路径文档相对路径和站点根目录相对路径 1. 绝对路径绝对路径就是被链接文档的完整 URL, 包括所使用的传输协议 ( 对于网页通常是例如上例中为图片创建的友情链接就是一个绝对路径在创建外部链接时必须使用绝对路径 2. 文档相对路径文档相对路径就是以当前文档所在位置为起点到被链接文档经过的路径在创建内部链接时使用相对路径比较方便与同文件夹内的文件链接只写文件名即可, 例如上例中对 61 第 3 章科制作网页内容

网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 62 文字添加的超链接就是使用了文档的相对路径如果与下一级文件夹里的文件链接, 可以直接写出文件夹名称与文件名, 例如 images/google.gif; 如果与上一级文件夹里的文件链接, 可在文件名前加上../ 文件夹名每个../ 表示在文件夹层次结构中上移一级 3.

29 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 62 文字添加的超链接就是使用了文档的相对路径如果与下一级文件夹里的文件链接, 可以直接写出文件夹名称与文件名, 例如 images/google.gif; 如果与上一级文件夹里的文件链接, 可在文件名前加上../ 文件夹名每个../ 表示在文件夹层次结构中上移一级 3. 站点根目录相对路径站点根目录相对路径是指所有路径都开始于当前站点的根目录站点根目录相对路径以一个正斜杠开始, 该正斜杠表示站点根文件夹, 例如 /images/google.gif 当移动含有根目录相对链接的文档时不需要更改这些链接, 如果不熟悉此类型的路径, 最好使用文档相对路径用户可以在选择文件对话框中设置相对路径的类型在选择文件对话框的相对于下拉列表中有两个选项文档和站点根目录, 用户可以根据需要进行选择, 如图 3-79 所示设置相对路径的类型图 3-79 设置相对路径的类型链接目标链接目标是指当一个链接打开时被链接的文件打开的位置, 比如链接的页面可以在当前窗口中打开, 或者在新建窗口中打开属性面板中的目标下拉列表可以进行链接目标的设置, 如图 3-80 所示该下拉列表中有 5 个选项, 它们的功能分别如下 _blank: 将链接的文档载入一个新的未命名的浏览器窗口 _new: 将链接的文档载入一个新的浏览器窗口它和 _blank 的不同之处在于如果同一个页面中其他超链接的目标也设置成 _new, 那么只打开一个新的浏览器窗口 _parent: 将链接的文档载入该链接所在框架的父框架或父窗口如果包含链接的框架不是嵌套框架, 则所链接的文档载入整个浏览器窗口 _self: 将链接的文档载入链接所在的同一个框架或窗口此目标是默认的, 所以通

常不需要指定它图 3-80 目标下拉列表中的 4 个选项 _top: 将链接的文档载入整个浏览器窗口, 从而删除所有框架专家点拨 :_parent _self _top 这 3 个选项都和框架网页有关, 框架网页的相关知识请参考第 5 章的内容 3.5 本章习题一选择题 1. 在设计视图中制作网页时, 如果要新建一个段落, 应按 ( ) 键 A.Enter B.Alt+Enter C.

30 常不需要指定它图 3-80 目标下拉列表中的 4 个选项 _top: 将链接的文档载入整个浏览器窗口, 从而删除所有框架专家点拨 :_parent _self _top 这 3 个选项都和框架网页有关, 框架网页的相关知识请参考第 5 章的内容 3.5 本章习题一选择题 1. 在设计视图中制作网页时, 如果要新建一个段落, 应按 ( ) 键 A.Enter B.Alt+Enter C.Shift+Enter D.Ctrl+Enter 2. 在 Dreamweaver CS6 中可以直接制作 ( ) A. 视频 B. 音频 C.Flash 动画 D. 以上都不对 3. 用户可以在 Dreamweaver 中创建电子邮件链接, 具体方法是选中需要添加链接的对象, 在属性面板的链接文本框中输入 ( ) A.mailto:abc@126.com B.mail: abc@126.com C.mailto+abc@126.com D.mail+abc@126.com 二填空题 1. 在网页中插入文本有 3 种方法, 即通过键盘直接输入粘贴剪贴板中的文字和 2. 如果想使插入到网页中的背景音乐循环播放, 应该在属性面板中设置参数 3. 刚插入到编辑页面上的 Flash 动画并不真正显示效果和播放, 只需在属性面板中单击按钮即可显示并播放 Flash 动画 4. 如果要正确地创建超链接, 必须灵活使用的 3 种文档路径类型是 3.6 上机练习练习 1 制作文字网页 63 本练习要制作一个文字网页, 效果如图 3-81 所示请按照图中的提示信息进行制作第 3 章科制作网页内容

31 网页设计与制作实用教程 (Dreamweaver+Flash+Photoshop)( 第 3 版 ) 微课版 64 设置为标题 2, 红色字体设置为标题 3 设置为项目列表插入超链接插入版权符号图 3-81 文字网页效果练习 2 制作图文混排网页拟定一个主题, 例如宝马汽车新闻, 制作一个图文混排的网页效果, 如图 3-82 所示在制作时可以到网上搜索相关的图片和文字图 3-82 图文混排网页

32 练习 3 制作 Flash 导航条先插入一个 Flash 汽车广告动画, 然后插入 6 个 Flash 按钮, 制作一个动感的 Flash 导航条, 效果如图 3-83 所示本练习的 Flash 动画素材在 images 文件夹下图 3-83 Flash 导航条 65 第 3 章科制作网页内容

<C8EBC3C5C6AAA3A8B5DA31D5C2A3A92E696E6464>

<C8EBC3C5C6AAA3A8B5DA31D5C2A3A92E696E6464> 第 1 章进入 Photoshop 的全新世界本章导读 Photoshop 1 1.1 Photoshop CS6 Photoshop Photoshop 1.1.1 Photoshop POP 1-1 图 1-1 平面广告效果 1.1.2 Photoshop 1-2 Photoshop CS6 Photoshop CS6 Photoshop CS6 Extended 3D 3 Photoshop