网页设计与制作-第五章高级网页制作
网页设计与制作实用教程单元5 布局与美化网页
【教学导航】
（1）学会使用表格布局页面 （2）学会使用AP Div布局页面 （3）学会使用使用Div+CSS结构布局页面 （4）学会创建样式文件、设计页面的布局结构、定义页面的布 教学目标 局样式 （5）学会利用CSS样式美化页面元素 （6）学会插入Div标签对网页的页面进行布局 （7）学会插入或绘制AP Div，并合理地设置AP Div的属性 教学方法 任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价）
【任务5-3】使用Div+CSS布局 与美化网页 【任务描述】
（1）创建外部样式文件0503global.css，在该样 式文件中定义必要的CSS样式。 （2）创建外部样式文件0503pages.css，在该样 式文件中定义必要的CSS样式。 （3）创建网页文档0503.html，该网页主体结构 主要应用Div+CSS进行布局，局部结构应用了 定义列表、项目列表和段落结构进行布局。网 页0503.html还应用了CSS样式对文字、图片、 超链接和表单控件进行美化。 网页0503.html的浏览效果如图5-8所示。
3．创建网页文档0502.html
创建网页文档0502.html，保存在文件夹“5-2” 中，该网页主体结构主要应用AP Div、绝对定位和 相对定位进行布局，局部结构应用了Div+CSS和定 义列表、项目列表进行布局。 还应用了CSS样式对文字、图片、超链接和列 表进行美化。 该网页为左右结构，通过绝对定位方式实现左 右布局。
（1）插入Div标签page_wrapper （2）插入Div标签pages_nav （3）插入AP元素l_sidebar （4）插入AP元素r_content （5）插入多个Div标签和AP元素
《网页设计与制作实例教程》课件第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. 管理超链接 包括自动更新和检查链接错误的方法。
网页设计与制第5章图文
第5章 Fireworks入门 图5-5 与文本工具对应的“属性”面板
第5章 Fireworks入门 图5-6 矩形图形对象的“属性”面板
第5章 Fireworks入门
2．“颜色”面板 “颜色”面板及其弹出菜单如图5-7所示，其中显示的是 Fireworks当前的调色板。 3．“混色器”面板 “混色器”面板及其弹出菜单如图5-8所示，创建颜色时 可以单击下拉式列表框，也可以在红(R)、绿(G)、蓝(B)三处 各输入相应值，或者用工具箱中的滴管工具直接点取下部选 色盘的各颜色。选色盘中的颜色范围可随右上部弹出莱单的 内容而改变。弹出菜单指明所选用的颜色系统，如图5-8所示。
快捷 键 无 无 S S t y b b q q q f
第5章 Fireworks入门 图5-2 工具箱的缺省位置和配置
第5章 Fireworks入门
5.2.2 面板
Fireworks的面板是浮于界面上方的，可以把它们移到 屏幕的任何一个地方。每个面板都可以单独移动、分割和组 合。
(1) 若想隐藏面板，可选择菜单中的“窗口”→“隐藏 面板”命令或按Tab键，所有的面板就会隐藏起来。
第5章 Fireworks入门 图5-18 把文字粘贴到路径的前后状态
第5章 Fireworks入门
(6) 选择菜单命令“视图”→“隐藏选区”，或者在 “图层”面板中单击相应的缩略图前的小图标，隐藏文字及 其路径，画面仍然如前图5-14所示，只有一条铅笔所绘的路 径。
(7) 使用鼠标选中该路径，在“属性”面板中设置它的 线条和填充属性。在“填充”下拉列表中选择“线性渐变填 充”，然后用鼠标单击列表框左边的填充色按钮，在打开面 板的“预置”下拉列表中选择“银”色，如图5-19所示。这 时，图片效果如图5-20所示。
网页设计与制作案例教程(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 第五章
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()" />
网页设计与制作_第05章创建和设置超级链接ppt课件
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
文本超级链接 图像超级链接 图像地图 电子邮件超级链接 锚记超级链接 空链接 鼠标经过图像 导航条 Flash文本 Flash按钮 脚本链接
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
(2) 根据目标端点的不同，超级链接可分为内部超级链接、外部超 级链接、电子邮件超级链接和锚记超级链接。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
5.2 创建超级链接
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
5.1.3 链接目标
链接目标用于设置单击某个链接时，被链接文件打开的位置。 通常，链接目标有以下4种形式。
【_blank】：将链接的文档载入一个新的浏览器窗口。 【_parent】：将链接的文档载入该链接所在框架的父框架或 父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档 载入整个浏览器窗口。 【_self】：将链接的文档载入链接所在的同一框架或窗口。 此目标是默认的，因此通常不需要特别指定。 【_top】：将链接的文档载入整个浏览器窗口，从而删除所有 框架。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。