最新h《网页设计与制作》第五章：高级网页制作

《网页设计与制作实例教程》课件第5章

第5章设置超级链接
5.2 创建超级链接
教学内容
5.2.2 创建文本超链接
文本超链接的创建，有多种方法，可以在“链接”文本框中输入内容，
也可以利用工具按钮来创建链接。实例2 安徽省各地简介给网页中的文本“淮北”、“合肥”、“阜阳”、“宿州”创建超
链接，效果如下图所示。
单击 ②删除
打开网页
第5章设置超级链接
5.2.1 创建图像超链接
教学内容
给网页上的图像设置超链接，使得用户通过单击图像就可以打开相应的内容，让网页更加生动。例如常见的友情链接，可以将站点页面链接到本地站点以外的页面，设计者需要事先给相应的图像指定一个完整的地址。
实例1 创建友情链接在网页文档中插入3张图像，并将它们用新窗口的方式分别链接到相应的网页，如下图所示。
A. 1像素 B. 5像素 C. 10像素 D. 20像素
第5章设置网页超级链接
5.4 小结和习题
5.4.2 强化练习
教学内容
二、判断题
1．设置电子邮件超链接时，在“链接”框中直接输入邮箱地址即可，例如
teacher@。
()
2．使用根目录相对路径时，以“\”开头。
()
3．超链接创建后无法删除或更改。
5.3.1 自动更新超链接 5.3.2 检查链接错误
第5章设置网页超级链接
5.4 小结和习题
教学内容
5.4.1 本章小结
网络中的所有资源都是通过超链接联系在一起的，利用好超链接，可以让网页变得更加方便、清晰和更富有灵性。本章详细介绍了超级链接的制作方法和技巧，具体包括以下主要内容。
1. 超链接的基本概念超链接的定义、分类、地址、URL等。 2. 创建超链接主要介绍了在Dreamweaver中创建图像超链接、文本超链接、电子邮件超链接、空链接和脚本超链接、下载文件超链接以及热点超链接的方法。 3. 管理超链接包括自动更新和检查链接错误的方法。

网页设计与制作案例教程(Dreamweaver CS5+Div+CSS+JavaScript)第五章

标签
<table>...</table> <caption>…</captio n> <tr>...</tr> <td>...</td> <th>...</th>
功能
定义一个表格开始和结束定义表格标题，可以使用属性align，属性值 top、bottom
定义表行，一行可以由多组<td>或<th>标签组成
定义单元格，必须放在<tr>标签内定义表头单元格，是一种特殊的单元格标签，在表格中不是必须的
图5-9 生成的表格
图5-10
“标签检查器”面板
在“标签检查器”中列出了表格所有的属性，如表5-2所示。请用户根据表5-2列出的表格属性，在“标签”面板中对表格作进一步的属性设置，观察表格外观变化情况。
5.1.2 表格的基本操作
1、选择整行单元格 2、选择整列单元格 3、选择连续的多个单元格 4、选择不连续的多个单元格 5、选择表格的所有单元格
5.1.2 表格的基本操作
1）插入行
选择“修改→表格→插入行”菜单命令，即在插入点的下面出现一行。选择“插入→表格对象→在上面插入行”菜单命令，在插入点的上面插入一行。选择“插入→表格对象→在下面插入行”菜单命令，在插入点的下面插入一行。
含义
border，时显示上下左右边框表 5-2 表格的属性及含义（续） frame box，显示上下左右边框 hsides，显示上下边框 lhs，只显示左边框
rhs，只显示右边框
void，不显示边框 vsides，只显示左右边框 none，表格内部所有线框不显示

网页设计与制作05

5.4 位图的处理
位图图形由排列成网格的称为“像素”的点组成。 5.4.1 区域的选择 1. 规则编辑区域的选择
单击工具箱中的“选取框工具”或“椭圆形选取框工具”，在画布中按住鼠标左键并拖动，即可在位图中选取一个矩形或椭圆形区域。
单击工具箱中的“套索工具”，在画布中按住鼠标左键直接勾画可以在位图中画出一个不规则的闭合区域。 3.相近颜色编辑区域的选择
④选中组合的矢量对象，在“编辑”菜单选择 “粘贴于内部”，即可完成蒙版的效果，拖拽图像中心蓝色调节柄可进行位图位置的调整。
5-5 创建动画
操作实例5-14 使用“以动画打开”方式创建动画操作步骤：
①首先，制作好动画的每一帧图像，各自保存成一个文件，如图5-54所示。 ②选择“文件”菜单的“打开”选项，在弹出的对话框中选中这4幅图像文件，并选中“以动画打开”选项，如图 5-55所示，然后，单击“打开”按钮。 ③打开“帧面板”，即可看到组成动画的4帧，如图5-56 所示，此时单击图像窗口下方的“播放”按钮，可观看动画的播放效果。 ④双击“帧面板”每帧后的数字“7”，可调整每一帧图像播放的延时时间，以达到期望的播放效果，如图5-57
5.5.3 弹出菜单
弹出菜单是指当鼠标单击或滑过网页中的某些热点或切片时，在浏览器中弹出的一个菜单。
操作实例5-22 为图5-75所示的网页创建弹出菜单操作步骤：
①首先使用Web工具箱的“切片”工具为每个导航按钮勾画一个矩形区域，如图5-76所示。下面以“实景案例” 栏目为例制作。
②单击“实景案例”切片，在“修改”菜单选择“弹出菜单”、“添加弹出菜单”选项，或者单击切片中心的时钟图形，在弹出菜单中选择“添加弹出菜单”，打开如图5-77所示的“弹出菜单编辑器”，利用其中的4个选项卡完成整个菜单的创建。

《网页设计与制作》电子教案课程课件PPT 第五章

第5章 HTML语言和动态交互
HTML语言含有大量的标记符号，并且还在不断的增加当中。本节将介绍HTML一些常用的标记符号，以及它们使用时的语法规则
5.1.1 网页和HTML语言的关系

在Dreamweaver的可视化窗口中制作网页时，形成的目标文件仍然是HTML代码，如果切换到代码窗口中，马上就可以看到对应的HTML 代码。 1．一个空白网页的HTML代码当新建一个网页时，网页上没有什么对象，这就是一个空白页，现在看一下空白页的 HTML代码。如图5-1所示。

在HTML语言中规定，两个 <Body>之间是输入网页对象的位置。那么，如果是一幅图像，情况又会怎样呢？注意：在代码窗口调试 HTML代码时，如果有语法或格式错误，代码将会用黄色显示。
图5-5代码窗口中的文本对照

3．在网页中插入图像在网页中输入一行文本，采用5号字，再插入一幅大小为 150×100像素的图像，在两个窗口中观察对比一下。如图5的语法规则

1．HTML语言文件的基本结构对于一个网页，即一个HTML文档，其基本结构为： <html> <head> 文档标题部分 </head> <body> 页面主体部分 </body> </html> · 从上面的格式可以看出，文档内容以<标记符>开始，以</标记符>结束。 · <head>文档标题</head> 是文件标题标记。 · <body>文档标题部分</body> 是页面主体部分标记。 · <html> </html>是一个页面的开始和结尾。

Dreamweaver CS5网页设计与制作教程第五章

5.1 认识行为
行为是由对象、动作和事件构成的，事件是产生行为的条件，动作是行为的具体结果。对象：是产生行为的主体。对象可以是网页中的很多元素，如网页中的一段文字、一幅图片等元素，也可以整个网页文档。动作：通常是一段JavaScript代码，用于完成某些特殊的任务。如打开一个窗口自动弹出“欢迎”窗口、鼠标经过图片图片晃动等效果。事件：是由用户或浏览器引发动作产生的事情。事件经常是针对页面元素的，也就是行为的对象，如鼠标经过、鼠标离开、鼠标单击等。
5.2 使用行为
文本域文字的行为页面中的用户登录需要输入用户名、密码，因此在页面会插入给用户输入的文本域。常常可以设计这样的效果：当鼠标移到文本域时，文本域中显示“ 请输入用户名”，当文本域获得焦点时，之前的文字消失，用户则可以输入用户名信息。这种效果是添加了文本域文字的行为
5.2 使用行为
制作交换图像 “交换图像”这一动作的特效是恢复交换的图像。当鼠标经过图像时，原图像会变成另外一幅图像，否则恢复原图像。其实，一个交换图像是由两幅图像组成的，包括原始图像和鼠标经过时显示的交换图像。
5.2 使用行为
制作交换图像 2.选择行为的事件。
<img src="images2/cp2.jpg" alt="" name="Image1" width="256" height="226" hspace="10" vspace="10" id="Image1" onmouseover="MM_swapImage('product', '','images2/cp2.jpg',1)" onmouseout="MM_swapImgRestore()" />

网页设计与制作5 网站规划和方案设计

第五单元：图层在图像设计中的应用
5.1.1 图层窗体
图层窗体可以完成大部分的图层操作任务，图层窗体如图所示。若默
认状态下没有展开图层窗体可点击菜单【窗体】|【图层】来显示窗体。
第五单元：图层在图像设计中的应用
5.1.2 图层菜单图层菜单包括了图层的几乎所有功能，图层菜单功能可以等价为图
层窗体及在图层窗体鼠标右击出现的上下文菜单功能之和，系统图层菜单
如图所示。图层窗体选中某图层后，鼠标右击的上下文菜单如图所示。
第五单元：图层在图像设计中的应用
5.1.3 常用术语
在介绍如何使用图层之前，有一些常用的专业术语必须要掌握
1、通道：通道的概念比较复杂，实际上通道可以理解为图层中各种单色分量的分布状态。换句话说，通道就好像从彩色图片中抽取出的单
色图片，如果抽取的是图片的红色成分，就称之为图片的“红色通道”
用菜单【图层】|【图层样式】| 【拷贝/粘贴图层样式】可以实现同样的效果，不过后面这种方法只能用于拷贝图层的所有样式，
而不能用来拷贝某一个样式。如果你只需要复制一个样式，应该使
用拖动的方式。同样，要删除样式可以将其直接拖放到层面板下边的垃圾桶图标上。方法 4 ：将样式面板中 Photoshop 预定义的样式，直接应用到层面板中的当前图层上。层面板左侧的图标可以用来设置样式为可见或者不可见，如果设置为“不可见”，样式的效果将不会显示在图片中，但是你可以随时使其重新显示出来。
第五单元：图层在图像设计中的应用
5.2 图层样式的设置图层样式是Photoshop中制作图片效果的重要手段之一，图层样式可以运用于一幅图片中除背景层以外的任意一个层。如果要对背景层使用层样式，可以在背景层上双击鼠标并为其另外命名。

网页设计与制作第5章

网页设计与制作
第5章创建网页对象
图5.2.3 插入的占位图像
在发布站点之前，应该使用普通图像替换所有的占位图像，方法如下：（1）双击占位图像。（2）在弹出的“选择图像源文件”对话框中选择要替换占位图像的普通图像。（3）单击“确定”按钮，即可将占位图像替换掉，如图 5.2.4所示。
网页设计与制作
网页设计与制作
第5章创建网页对象
5.2.1 图像的插入根据图像在网页中作用的不同，可以将其分为普通图像、占位图像和鼠标经过图像3种，下面分别介绍它们的插入方法。 1．插入普通图像插入普通图像的方法如下：（1）将鼠标指针置于需要插入图像的位置。（2）选择“插入”→“图像”命令，弹出 “选择图像源文件”对话框，如图5.2.1所示，在该对话框中选择合适的图像，单击“确定”按钮即可。
图5.1.7 不同样式下的文本
网页设计与制作
第5章创建网页对象
4．设置文本的大小文本的大小即文本的字号，在Dreamweaver 8中，字号用数字来表示，值越大，所对应的文本就越大。设置文本大小的操作步骤如下：（1）选中要设置大小的文本。（2）在“属性”面板的“大小”下拉列表中选择所需的字号即可。如图5.1.8所示为不同字号下的文本。
2．插入占位图像占位图像实际上是一种图像占位符，在实际制作网页的过程中，当网页的整体排版已经完成，但是需要插入的图像还没有制作出来时，可以插入一个占位图像，来配合排版的需要，等到图像制作出来后，再将占位的图像替换掉。插入占位图像的方法如下：（1）将鼠标指针置于需要插入占位图像的位置。（2）选择“插入”→“图像对象”→“图像占位符”命令，弹出“图像占位符”对话框，如图5.2.2所示。
网页设计与制作

网页设计与制作Dreamweaver CS6标准教程(微课版第3版)第五章

网页设计与制作Dreamweaver CS6标准教程（微课版第3版）第五章该节介绍了网页设计的基本原则，包括布局、色彩、字体、图片等方面的要点。

该节详细介绍了如何使用Dreamweaver CS6创建网页，包括新建网页、添加文本、插入图片等操作步骤。

该节讲解了如何使用CSS样式来美化网页，包括设置背景色、文本样式、边框效果等。

该节教授了如何创建超链接，包括内部链接和外部链接的创建方法。

该节介绍了如何使用Dreamweaver CS6中的模板和库来快速创建和管理网页。

模板是预先设计好的网页样式和布局，可以用于多个网页。

通过使用模板，您可以避免重复性的工作，节省时间和精力。

在Dreamweaver CS6中，您可以选择现有的模板，也可以自定义创建自己的模板。

本节将向您展示如何使用这些模板。

库是一组可以在不同网页中重复使用的元素或代码片段。

通过使用库，您可以轻松地在多个网页中保持一致的元素和代码。

本节将向您介绍如何创建并使用库。

___:了解如何使用Dreamweaver CS6中的模板创建网页学会创建自定义模板掌握如何使用库在网页中重复使用元素和代码学会创建和管理库5.1 使用模板创建网页Dreamweaver CS6提供了一系列模板供您选择，包括网站模板和文档类型模板。

您可以根据自己的需求选择适合的模板，并进行自定义设置，如网页标题、导航菜单、页脚等。

本节将向您展示如何使用Dreamweaver CS6中的模板创建网页。

5.1.1 选择现有模板Dreamweaver CS6中内置了许多现有的网站和文档类型模板供您使用。

您可以从模板库中选择适合您的模板，并进行进一步的定制。

本节将向您介绍如何选择并使用现有的模板。

5.1.2 创建自定义模板除了使用现有模板外，您还可以创建自己的模板。

自定义模板可以根据您的需求进行设计和设置，并在创建新网页时使用。

创建自定义模板的过程相对复杂一些，但是一旦创建完成，您可以多次重复使用它。

《网页设计与制作》第五章：高级网页制作

Hale Waihona Puke 24作者：韩森华作者：实例5.7：制作拖动图像进行类似拼图的效果，将会员图片拖到指定位置。
25
作者：韩森华作者：
调用JavaScript
“调用JavaScript”行为允许用户使用“行为” 面板指定当发生某个事件时执行自定义功能。
26
作者：韩森华作者：
控制Shockwave或Flash
编辑库项目选中资源面板中的一个库项目，单击编辑按钮进行编辑。修改使用库项目的页面（1）执行修改——库——更新页面命令；（2）在“更新页面”对话框中，选择需要修改的文件；（3）单击开始按钮完成更新。
41
作者：韩森华作者：
网站的发布与维护
站点的测试和发布的主要工作和步骤如下：申请域名。申请站点空间。本地站点的测试。网页的上传。网站的宣传推广。
19
作者：韩森华作者：
显示-隐藏层
“显示-隐藏层”行为用于交互时显示信息，可以显示、隐藏或恢复一个或多个层的可见性。实例5.6:鼠标移动到会员图像上时显示会员介绍。
20
作者：韩森华作者：
拖动层
浏览者在访问添加了“拖动层”行为的页面时可拖动层到页面的任意位置。 “拖动层”行为可通过“拖动层”对话框实现。选中所需的层并打开“行为”面板，单击按钮，在弹出的 “行为”菜单中选择“拖动层”命令，打开 “拖动层”对话框，该对话框中有“基本”和“高级”两个选项卡。可以设定浏览者向水平、垂直或任意方向拖动层，以及用JavaScript函数名或代码实现一些特殊功能。
2．直接创建空白模板
34
作者：韩森华作者：
设置模板的属性
1.设置模板的页面属性设置模板的页面属性