《网页设计与制作》教案-第5讲 图像的操作(一)
（完整版）《网页设计与制作》课程教案
（完整版）《网页设计与制作》课程教案《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。
本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。
二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。
（一）知识目标：1.熟悉网页制作的基本元素；2.掌握Dreamweaver CS6软件的基本操作方法；3.掌握在网页中插入文字、图片、声音、flash等的方法；4.掌握常见的网页布局方法，学会使用CSS美化网页；5.掌握在网页中使用表单和制作网页特效的方法；6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。
7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。
（二）职业能力培养目标1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理；2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。
（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的学习精神；2.具有良好的心理素质和职业道德素质；3.具有高度责任心和良好的团队合作精神；4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。
（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
网页设计与制作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个选 项卡完成整个菜单的创建。
《网页设计与制作》教案
授课内容
HTML语言简介
课型
理论实践
授课学时
2
教学方法与手段
讲授法
教学目的与要求
1．了解HTML语言，重点掌握HTML文件的基本结构和语法格式；
2．掌握标记语言的用法；
3．熟记<title>标记、<marquee>标记及常用属性代码。
教学重点与难点
教学重点：
1．HTML文件的基本结构；
1．有序列表和无序列表的区别；
2．描述性列表的制作。
教学过程设计
一、文本的输入（10分钟左右）
1．换行与换段的输入
2．空白字符的输入
3．特殊符号的输入
4．日期与时间的插入
5．水平线的插入
二、文本的编辑（20分钟左右）
1．文本的选择：鼠标拖选，按住shift+光标键选择
网页设计与制作教案
课程名称
网页设计与制作
课程类型
使用教材
教材名称：网页设计与制作实用教程主编：刘艳丽
出版社：高等教育出版社日期：2011年5月
学时分配
共64学时，其中理论36学时，实践28学时。
课
程
教
学
目
的
与
要
求
该课程是三年制高职高专电子商务专业的职能课程，目标是让学生掌握网页设计的基本概念，学会使用常用的网页设计工具和相关网页美工软件，能够设计制作常见的静态网页。它要以计算机基础、计算机网络技术课程的学习为基础，也是进一步学习网络编辑、网站建设与管理课程的基础。
作业/思考题：1．关键字之间以文逗号分隔。关键词输入不是越多越好，因为大多数搜索引擎限制关键字的数量，所以设置关键字要精简才会被搜中率高。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、教学目标1. 了解网页设计与制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和应用。
3. 能够独立设计并制作一个简单的网页。
二、教学内容1. 网页设计与制作的基本概念和流程。
讲解网页设计与制作的基本概念，如网页、网页设计、网页制作等。
介绍网页设计与制作的流程，包括需求分析、页面布局、页面设计、编码实现等。
2. HTML的基本语法和应用。
讲解HTML的基本语法，如标签、属性、注释等。
通过实例演示HTML在网页中的应用，如、段落、图片、等。
3. CSS的基本语法和应用。
讲解CSS的基本语法，如选择器、属性、注释等。
通过实例演示CSS在网页中的应用，如字体样式、颜色、布局等。
4. JavaScript的基本语法和应用。
讲解JavaScript的基本语法，如变量、运算符、注释等。
通过实例演示JavaScript 在网页中的应用，如动态修改内容、响应用户事件等。
5. 设计并制作一个简单的网页。
根据所学知识，设计并制作一个简单的网页，包括页面布局、页面设计、编码实现等。
三、教学方法1. 讲授法：讲解基本概念、语法和应用。
2. 演示法：通过实例演示HTML、CSS和JavaScript在网页中的应用。
3. 实践法：学生动手实践，设计并制作一个简单的网页。
四、教学环境1. 教室环境：多媒体教学设备、网络连接。
2. 软件环境：文本编辑器、浏览器、网页设计软件。
五、教学评价1. 课堂参与度：学生参与课堂讨论、提问和回答问题的情况。
2. 课后作业：学生完成课后作业的情况，包括网页设计作品的质量和完成时间。
3. 期末考试：考查学生对网页设计与制作的基本概念、语法和应用的掌握情况。
六、教学资源1. 教材：《网页设计与制作教程》2. 辅助材料：PPT课件、实例代码、教学视频3. 网络资源：在线教程、相关论坛、网页设计素材库七、教学安排1. 课时：共计32课时，每课时45分钟2. 课程安排：第1-4课时：网页设计与制作的基本概念和流程第5-8课时：HTML的基本语法和应用第9-12课时：CSS的基本语法和应用第13-16课时：JavaScript的基本语法和应用第17-20课时：设计并制作一个简单的网页3. 课后作业：每课时布置相应的课后作业，巩固所学内容八、教学策略1. 针对不同学生的学习基础，调整教学进度和难度，确保学生能够跟上课程节奏。
《网页设计与制作》电子教案课程课件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>是一个页面的开始和结尾。
《网页设计与制作》课程教案
《网页设计与制作》课程教案第一章：网页设计与制作概述1.1 课程介绍网页设计与制作的基本概念网页设计与制作的目的与意义网页设计与制作的应用领域1.2 网页设计原则网页设计的基本原则用户体验设计原则响应式网页设计原则1.3 网页制作工具与技术网页设计软件的选择与使用HTML与CSS的基本语法与使用方法JavaScript的基础知识与应用第二章：网页布局与排版2.1 网页布局的基本概念网页布局的定义与作用常见的网页布局方式布局元素的分类与使用2.2 排版的原则与方法排版的基本原则文本的格式化与排版图片与多媒体元素的排版2.3 响应式网页布局与排版响应式网页布局的概念与意义媒体查询的使用方法布局与排版在不同设备上的应用第三章：网页色彩与字体3.1 色彩的基本概念与应用色彩的视觉效应与心理作用色彩的搭配原则与技巧色彩在网页设计中的应用案例3.2 字体的选择与使用字体的分类与特点字体的搭配原则与技巧字体在网页设计中的应用案例3.3 网页色彩与字体的综合应用色彩与字体的协调与平衡字体大小与行距的设置与调整色彩与字体的个性化应用与创新第四章：网页图片与多媒体元素4.1 网页图片的选择与处理图片的格式与特点图片的选择标准与技巧图片的处理与优化方法4.2 多媒体元素的应用音频与视频元素的应用动画与GIF图片的应用交互式多媒体元素的应用4.3 网页图片与多媒体元素的优化图片与多媒体元素的加载优化图片与多媒体元素的响应式应用图片与多媒体元素的视觉效果与用户体验第五章：网页交互与动画5.1 网页交互的基本概念与原理交互的定义与作用交互的实现方式与技术交互的设计原则与技巧5.2 JavaScript基础与应用JavaScript的基本语法与功能事件处理与DOM操作JavaScript库与框架的选择与使用5.3 网页动画的实现与优化CSS动画的制作方法与技巧JavaScript动画的制作方法与技巧动画的加载优化与性能考虑第六章：HTML与CSS高级应用6.1 表单设计与验证表单的基本结构与属性表单元素的使用与布局表单验证的实现方法6.2 网页组件设计与实现导航栏与面包屑的制作折叠面板与标签页的制作轮播图与幻灯片的设计与实现6.3 网页动画与过渡效果CSS过渡与动画的实现JavaScript动画的实现方法动画的性能优化与调试第七章：前端框架与库7.1 前端框架的基本概念前端框架的作用与优势常见的前端框架介绍框架的选择与使用7.2 Bootstrap框架的应用Bootstrap的基本结构与组件栅格系统与布局设计Bootstrap表单与样式定制7.3 React与Vue框架的选择与应用React框架的基本概念与使用方法Vue框架的基本概念与使用方法框架项目结构与组件化开发第八章：网页兼容性与优化8.1 网页兼容性基本概念浏览器兼容性的原因与挑战兼容性测试的方法与工具兼容性解决方案与最佳实践8.2 网页性能优化网页加载速度的影响因素图片与多媒体元素的优化代码压缩与合并技巧8.3 搜索引擎优化（SEO）SEO的基本概念与原则关键词研究与内容优化代码优化与站点结构调整第九章：网页安全与维护9.1 网页安全基本概念网页安全的威胁与挑战跨站脚本攻击（XSS）的预防跨站请求伪造（CSRF）的预防9.2 数据备份与恢复数据备份的重要性与方法数据库备份与文件备份恢复策略与流程9.3 网站维护与更新网站维护的内容与流程网站更新的方法与技巧网站监控与性能调优第十章：项目实践与案例分析10.1 项目实践流程项目需求分析与规划设计阶段与实现阶段项目测试与上线流程10.2 项目案例分析案例一：个人博客网站设计与制作案例二：电子商务网站设计与制作案例三：响应式企业官网设计与制作项目过程中的问题与解决方法网页设计与制作的趋势与展望重点和难点解析1. 第一章：网页设计与制作概述难点解析：网页设计原则的理解与应用、网页制作工具与技术的熟练运用2. 第二章：网页布局与排版难点解析：响应式网页布局与排版的设计与实现3. 第三章：网页色彩与字体难点解析：色彩与字体的协调与平衡、字体大小与行距的设置与调整4. 第四章：网页图片与多媒体元素难点解析：网页图片与多媒体元素的优化方法、响应式应用5. 第五章：网页交互与动画难点解析：JavaScript事件的处理与DOM操作、动画的实现与优化6. 第六章：HTML与CSS高级应用难点解析：表单验证的实现方法、网页组件的布局与样式设计7. 第七章：前端框架与库难点解析：框架的选择与使用、React与Vue框架的选择与应用8. 第八章：网页兼容性与优化难点解析：兼容性解决方案与最佳实践、网页性能优化的实施方法9. 第九章：网页安全与维护难点解析：预防跨站脚本攻击（XSS）与跨站请求伪造（CSRF）的策略、网站维护与更新的方法10. 第十章：项目实践与案例分析难点解析：项目需求的分析与规划、项目测试与上线流程的控制本教案《网页设计与制作》涵盖了网页设计与制作的基本概念、技术应用、项目实践等各个方面。
网页制作第5单元 图像
第5单元图像课程目标：●掌握在网页中插入图像●掌握影像地图的使用●掌握轮换图像的使用●掌握导航条的制作●掌握图片相册的制作建议学时：理论4学时，实践4学时。
5.1 插入图像及设置图像属性5.1.1 插入图像在网页中插入图像的操作十分简单，既可以使用工具栏的【图像】按钮，然后找到要插入的图片文件，再也可以使用菜单【插入】|【图像】，还可以直接从文件面板中拖动图像文件到正在编辑的页面上。
虽然图像文件的格式有很多，但在网页上通常只使用三种格式：jpg、gif、png等。
将图像插入到网页时，Dreamweaver8会自动在HTML源代码中生成对该文件的引用，打开代码视窗可看到类似如下的代码：<img src="images/IMG001.JPG" />即为引用images文件夹中的img001.jpg文件。
在网页制作中，为了确保文件引用的正确性，图像文件必须位于当前站点文件夹中，如果图像文件不在当前站点文件夹，系统会提问是否要将此文件复制到当前站点文件夹，此时应回答“是”，否则当站点上传后会找不到该图像文件。
5.1.2 设置图像属性选中插入的图像，属性面板为图像的属性面板，如图5-1所示，使用该面板可对插入的图像进行设置。
图5-1 图像属性面板宽、高：选定图像的当前尺寸，如果插入后更改过图像的大小，则宽、高旁边的“重设大小”按钮变成可选。
提示：建议不要更改插入后图像的尺寸，这样一是容易产生图像变形，二是即使插入后尺寸改小，也不可能改变网页文件实际的大小。
因此，图像在插入前应使用专门的图像编辑软件（如Photoshop、Firework等）修改好。
垂直边距、水平边距，是指图像与其它对象（如文字等）之间的距离。
源文件，即插入到网页中的文件全名，包含了图像文件的相对路径和文件名。
替换：在该文本框中可以输入图像的替换文字。
这样，当图像没有被显示时，相应区域会显示替换文字以提示浏览者这里将显示的内容。
HTML5网页设计与制作教学课件第5章定义网页图片
5.2 定义网页图片
5.2.2 定义图片边框
2. 边框颜色和宽度 【随堂练习 】
在浏览器中预览显示效果，如图5-5所示。
图5-5 定义各边边框颜色的效果
5.2 定义网页图片
5.2.3 定义图片透明度
CSS3以前的版本没有定义图像透明度的标准属性，不过各个主要浏览器都自定义了专有透 明属性。下面简单地说明一下。
● IE浏览器 IE浏览器使用CSS滤镜来定义透明度，属 性用法如下所示。
● FF浏览器 FF浏览器定义了“-moz-opacity”私有 属性，该属性可以设计透明效果，属性用法 如下所示。
5.2 定义网页图片
5.2.3 定义图片透明度
● W3C标准属性 W3C在CSS 3版本中增加了定义透明度 的opacity属性，属性用法如下所示。
5.2 定义网页图片
5.2.2 定义图片边框
1. 边框样式 【随堂练习 】
在浏览器中预览，可以比较虚线和点线的效果，如图5-3所示。
图5-3 比较边框样式效果
5.2 定义网页图片
5.2.2 定义图片边框
1. 边框样式 【随堂练习 】
当单独定义对象的某边边框样式时，可以使用单边边框属性：
border-top-style （顶部边框样式）
步骤1 新建一个网页，保存为 test.html，在<body>内使用 <img>标签插入两幅相同的图片， 代码如下所示。
步骤2 在<head>标签内添加<style type="text/css">标签，定义一个内部样 式表，然后输入下面的代码，定义两个类 样式，用来设计图片边框效果，代码如下 所示。
其中，transparent属性值表示背景 色透明，该属性值为默认值。 color表示 指定颜色，为任意合法的颜色值。例如， 设计网页背景色为灰色，则可以设计如下 样式，代码如下所示。
《网页设计与制作》课程教案
《网页设计与制作》课程教案一、教学目标1. 了解网页设计与制作的基本概念和流程。
2. 掌握HTML、CSS和JavaScript的基本语法和应用。
3. 学会使用网页设计软件进行网页布局和美观设计。
4. 能够独立设计并制作一个简单的网页。
二、教学内容1. 网页设计与制作的基本概念和流程。
2. HTML的基本语法和使用方法。
3. CSS的基本语法和使用方法。
4. JavaScript的基本语法和使用方法。
5. 网页设计软件的使用方法和技巧。
三、教学方法1. 讲授法：讲解网页设计与制作的基本概念和流程，HTML、CSS和JavaScript 的基本语法和使用方法。
2. 示范法：通过实际操作演示如何使用网页设计软件进行网页布局和美观设计。
3. 练习法：学生跟随教师的步骤进行实际操作练习，巩固所学知识。
4. 互助法：学生之间相互讨论和帮助，解决学习中遇到的问题。
四、教学准备1. 教室环境：安装有网页设计软件的计算机。
2. 教学材料：教案、PPT、网页设计软件教程。
3. 网络环境：学生可以访问互联网，查找相关资料。
五、教学过程1. 导入：通过展示一些精美的网页，引起学生对网页设计与制作的兴趣。
2. 讲解：讲解网页设计与制作的基本概念和流程，HTML、CSS和JavaScript 的基本语法和使用方法。
3. 示范：教师使用网页设计软件进行网页布局和美观设计的实际操作演示。
4. 练习：学生跟随教师的步骤进行实际操作练习，巩固所学知识。
5. 讨论：学生之间相互讨论和帮助，解决学习中遇到的问题。
7. 作业：布置相关的练习题目，让学生课后巩固所学知识。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 练习完成情况：检查学生完成练习的情况，包括正确性和完整性。
3. 作业质量：评估学生作业的质量，包括对知识的掌握程度和创意性。
4. 同伴评价：学生之间相互评价对方的作品，提供反馈和建议。
中职网页设计与制作(中国工信出版集团)教案：图像的插入与编辑、多媒体元素
中等专业学校2022-2023-2教案
教学内容
URL：可在文本框中输入一个FLV文件的URL地址，或单击“浏览”按钮，从弹出的对话框中选择FLV文件。
宽度和高度：设置视频的宽度和高度。
自动播放：如果选中该复选框，则在浏览网页时自动播放视频。
自动重新播放：如果选中该复选框，则视频将循环播放。
（3）单击“确定”按钮，即可在文档中插入一个FLV 文件。
3.插入音频文件
（1）要在网页中插入音频，可采用以下步骤：
①将光标定位到要插入音频文件的位置
在“插入”面板的“HTML”类别中的“插件”。
选择菜单“插入→HTML→插件”命令。
②在打开的“选择文件”对话框中选择要插入的音频文件。
③可以在属性面板中设置其属性。
（2）给网页添加背景音乐
选择音频插件占位符，在属性面板中单击“参数”按钮，打开“参数”对话框，如图2-106所示，在“参数”框中输入“hidden”,并设定值为“true”（或直接在属性面
板中将其宽度和高度的值设为0），单击加号按钮，在新出现的行中输入“autostart”，并设定值为“true”，单击“确定”按钮。
【巩固练习】
提问基础概念，学生回答。
【课堂小结】
师生共同总结本节知识点。
【作业布置】
完成同步练习。
板书设计
2.7 图像的插入与编辑
2.8 多媒体元素
1.插入鼠标经过图像
2.插入动画、视频、音频
教后札记。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础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：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
网页设计与制作教程第5章 使用与处理图像
10/36
5.1.2 常用 Web 图像格式（续）
JPEG 是 Joint Photographic Experts Group（联合静态图 形专家组）的缩写，JPEG 是压缩比很高的图像格式，因 此其最大的特点是文件尺寸非常小。JPEG 格式使用有损 压缩的算法来压缩图像，随着图像文件的减小，图像的质 量也会降低。 JPEG 格式具有渐进式处理选项，其含义是在图像在网上 下载时，图像先下载一个模糊的轮廓，然后由模糊到清晰， 否则 JPEG 图像下载时为逐行下载。 JPEG 格式不支持透明处理，也不支持动画效果。JPEG 格式的图像文件主要应用于连续色调的作品、数字化照片 和扫描图像等。
11/36
5.1.2 常用 Web 图像格式（续）
PNG 是 Portable Network Graphics （可移植网 络图形）的缩写，是近年来新出现的一种图像格 式。该格式的图像兼有 GIF 和 JPEG 两种格式的 优点，它不仅适用于 256 色的图像，还能保存 24 位真彩色图像，而且能将图像文件压缩，从而 更利于网络传输。另外 PNG 格式支持交错方式 显示图像，也支持图像透明处理，而且还支持 Alpha 通道。 PNG 格式的图像是目前在 Web 上应用广泛的一 种图像格式，但是并没有 GIF 和 JPEG 格式那样 普及。
15/36
5.2.1 插入图像（续）
演示——插入图像（p71~p73）
16/36
5.2.2 图像的属性
插入图像后，可以使用属性检查器设置属 性。 其中包括：源文件、链接、替换。 演示——修改图像的属性（p73~p74）
6/36
5.1.1 矢量图与位图（续）
《网页设计与制作》教案
《网页设计与制作》教案网页设计与制作是当今信息时代中不可或缺的一项技能，随着互联网的不断发展，越来越多的人加入到这一行业中来。
为了满足市场需求，众多培训机构和自媒体都推出了相关的课程和教材。
而本文要介绍的则是一份《网页设计与制作》教案。
一、教案概述本教案是由一位资深的网页设计师撰写，目标群体为初学网页设计的入门者。
教案共分为四个部分：网页设计基础、HTML基础、CSS基础和案例分析。
通过这些部分的学习，学生将能够掌握网页设计与制作的基本技能。
二、网页设计基础在这一部分中，教师首先介绍了什么是网页设计及其重要性。
然后，对网页设计中的色彩、排版、视觉效果等进行了详细的讲解。
最后，通过实例让学生了解如何在设计中考虑用户体验和可用性。
三、HTML基础在这一部分中，教师首先介绍了什么是HTML，以及HTML文档的基本结构和语法。
接着，详细介绍了HTML中的各种标签，包括文本标签、图像标签、链接标签等。
最后，通过案例演示了如何利用HTML实现一个基本的网页。
四、CSS基础在这一部分中，教师介绍了什么是CSS，以及CSS与HTML 的关系。
接着，详细介绍了CSS中的选择器、属性和值。
最后，教师通过实例演示了如何运用CSS来实现网页的美化和布局。
五、案例分析在这一部分中，教师选取了一些经典的网页作为案例，让学生分析其中的设计元素、HTML结构和CSS样式，并进一步了解网页设计与制作中的一些技巧和注意事项。
六、教学效果该教案的教学效果得到了学生和教师的一致好评。
学生经过该课程的学习，掌握了网页设计与制作的基础知识和技能，能够独立完成一个基本的网页设计任务。
同时，也为日后更深入的学习和实践奠定了坚实的基础。
七、结语通过上述介绍，我们可以看出，一份好的教案对于学习和实践是有着极大的帮助的。
对于想要学习网页设计与制作的初学者来说，掌握基本的技能和原理是至关重要的。
相信本文介绍的《网页设计与制作》教案能够给大家带来一些参考和启示。
《网页设计与制作》教案
一、教案基本信息教案名称：《网页设计与制作》教案适用课程：网页设计与制作课时安排：共20课时，每课时45分钟教学目标：1. 了解网页设计的基本概念和流程；2. 掌握HTML、CSS和JavaScript的基本语法和应用；3. 能够独立设计和制作简单的网页。
教学方法：1. 讲授与实践相结合；2. 案例分析；3. 小组讨论与协作。
教学内容：1. 网页设计基本概念与流程；2. HTML基本语法及应用；3. CSS基本语法及应用；4. JavaScript基本语法及应用；5. 网页设计与制作实践。
二、第一章：网页设计基本概念与流程课时安排：2课时教学内容：1. 网页设计基本概念；2. 网页设计流程；3. 网页设计原则与技巧。
教学方法：1. 讲授与实践相结合，通过案例分析让学生了解网页设计的基本概念和流程；2. 小组讨论，让学生分享对网页设计原则与技巧的理解。
教学活动：1. 引入案例：分析优秀网页设计案例，引导学生了解网页设计的基本概念；2. 讲解网页设计流程，让学生掌握从需求分析到设计制作的过程；3. 小组讨论：学生分组讨论网页设计原则与技巧，分享心得体会。
作业与评估：1. 课后作业：要求学生总结本节课所学的网页设计基本概念和流程；2. 课堂表现：观察学生在讨论中的参与程度和理解程度。
三、第二章：HTML基本语法及应用课时安排：4课时教学内容：1. HTML基本语法；2. 常用HTML标签及属性；3. HTML页面结构。
教学方法：1. 讲授与实践相结合，通过案例让学生掌握HTML基本语法和常用标签；2. 小组讨论，让学生分析实际案例中的HTML代码。
教学活动：1. 讲解HTML基本语法，让学生了解HTML代码的构成；2. 演示常用HTML标签及属性，让学生通过实践掌握其应用；3. 案例分析：学生分组分析实际案例中的HTML代码，理解其结构。
作业与评估：1. 课后作业：要求学生编写一个简单的HTML页面，运用所学标签和属性；2. 课堂表现：观察学生在讨论和实践中对HTML基本语法的掌握程度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第5讲图像的操作（一）1.1教学目标：◆知识目标1.认识图像，掌握在页面中插入图像的方法2.掌握图像各属性的作用和交换图像的设置。
◆技能目标1.能够根据页面显示效果在适当位置插入图像元素。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：2.掌握图像各属性的作用和交换图像的设置。
1.3 教学难点交换图像的设置。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题前一章节把Dreamweaver MX的工作环境做了一个详细介绍，相信同学们对网页制作软件的界面有了一个清晰的认识，万事开头难，一个好的站点不仅有全局规划，而且一个功能强大的网站，需要多方面知识的积累，首先找一个已经做得比较好的网站，把整个链接过程演示给学生，让他们感受到网站其实做起来也不难，只要用心就可以，关键是主线要清晰。
二、使用图像图像和文字是网页中最重要的两个元素。
一个高质量的网页是离不开图像的。
制作精良的图像可以大大增强网页的美观性，令网页更加生动多彩。
在页面中如何用漂亮的图像来吸引人们的视线是每个网站都需要面对的问题。
一幅好的图片，胜过千言万语，反映在网页上也是如此。
在这里“好的”这个词包含了三方面的含义：一是指合适的，用一幅毫不相干的图像只会起到画蛇添足的作用；二是指正确的，用一个文件量很大的图像或者格式错误的图像，只会让浏览者对你的网页火冒三丈；三是指漂亮的。
0.1认识图像要在文档中正确使用图像，首先要了解一些Internet相关的图像知识。
由于图像在磁盘中的压缩方式和存储方式的不同，加上许多图像处理软件又有自己专门的格式，所以图像的标准有很多种。
目前在Internet上最为常见的图像包括JPG、JPEG、GIF和PNG等几种，在网页上使用的图像一般有JPEG、GIF、PNG等。
像BMP、PSD等格式的图像因为文件太大，影响网络的传输速度，因此几乎不在网络中使用。
1.GIF图像GIF（Graphics Interchange Format图形交换格式）是一种索引颜色格式，文件最多只支持256 种颜色，色彩比较简单，但文件比较小，是网页上常用的图像格式。
GIF图像在网络上流行的另一个原因是它支持透明背景，所以它在网页中经常被用做项目符号和按钮等希望不遮挡背景的元素。
但是，由于GIF动画最高只支持256色，所以它的缺点也很明显，不能很好的表现更丰富的色彩效果。
2.JPEG图像JPEG（Joint Photographic Expert Group联合图像专家组标准）格式是一种有损压缩的格式，由于它具有很高的压缩比，从浏览的角度看图像质量受到损失不大，大大方便了网上传输和用磁盘交换图像。
JPEG格式是用于摄影或连续色调图像的高级格式，这是因为JPEG 文件可以包含数百万种颜色。
随着JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。
通常可以通过压缩JPEG 文件在图像品质和文件大小之间达到良好的平衡。
3.PNG图像PNG（Portable Network Graphic可移植网络图形）文件格式是一种替代GIF 格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha 通道透明的支持。
PNG 是Macromedia Fireworks 固有的文件格式。
PNG 文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。
文件必须具有.png 文件扩展名才能被Dreamweaver 识别为PNG 文件。
目前，GIF 和JPEG 文件格式的支持情况最好，大多数浏览器都可以查看它们。
0.2插入图像插入图像是一个简单的操作，只需要用一个命令或者一个按钮就可以实现。
然而，想正确地插入图像需要了解很多知识。
除了前面介绍过的图像格式外，图像的位置也是很重要的，在插入图像时要明确采用的是绝对位置还是相对位置。
还需要对图像属性的了解，包括对齐方式和留白大小等。
要在页面中插入图像，可执行下列操作：1)在设计视图下，将光标放置到文档中需要插入图像的地方。
2)执行“插入/图像”命令，或者单击对象面板常用对象组上的图像按钮，如图2-37所示。
此时会出现如图2-38所示对话框，用户可以从磁盘上选择图像文件。
图2-37 插入图像图2-38插入图像对话框3)选择需要插入的图片，在该对话框的URL文本框中，会显示当前选中文件的URL地址。
4)在“相对于”选项后的文本框下拉列表中，可以选择文件URL地址的类型。
选择文档，则使用相对地址；选择站点根目录，则使用基于根目录的地址。
选择预览图像复选框，则可以在对话框右边预览图像。
5)选定图像文件后，单击确定按钮，即可将图像插入到页面中。
如果选择的图像没有在本地站点的目录中，则会出现如图2-39所示对话框，询问是否要将该图像文件复制到你的本地站点中。
单击“是”，则图像被复制到站点目录中，同时会出现一个对话框，提示从站点中选择目录。
图2-39询问是否将图像复制到本地站点将图像复制到站点中后，页面中引用的是位于站点中的图像文件，如果不希望复制图像文件，则单击“否”按钮，如果图像位于站点目录之外，可能会造成网页无法正常浏览。
在文档窗口中插入图像后，就会将该图像的原始大小显示出来。
如图2-40所示。
图2-40在页面中插入图片0.3设置图像属性仅仅将图像插入网页，并不能达到正确使用图像的目的。
只有了解了图像的属性以及如何设置修改这些属性，才能创建出图文并茂的网页。
插入图像以后在属性面板中可以查看图像的所有属性，并对其进行修改。
在文档窗口选择一幅图像，此时属性检查器显示该图像的基本属性。
如图2-41所示。
图2-41图像属性面板若要设置图像属性，则在选择图像后，执行以下操作：1.给图像命名在属性面板的左上角显示当前图像的缩略图，使用缩略图下面的文本框设置图像名称，以便在使用Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如JavaScript 或VBScript）时可以引用该图像。
2.改变图像大小“宽”和“高”以像素为单位指定图像的宽度和高度。
在页中插入图像时，Dreamweaver 自动用图像的原始尺寸更新这些文本框。
这里我们更改是图像显示的宽度和高度，图像文件的真正大小是不变，只是它在页面中的显示被进行了缩放。
所以这不会缩短下载时间，因为浏览器在缩放图像前会下载所有图像数据。
若要缩短下载时间并确保所有图像实例以相同大小显示，请使用图像编辑应用程序缩放图像。
3.改换图像在属性检查器中“源文件”可以指定图像资源的URL路径。
若需要替换图片，可以单击右边的文件夹图标打开一个对话框，然后从磁盘上选择文件，或者直接键入图像的路径。
4.图像超链接“链接”指定图像的超链接。
在文本框中输入图像超链接的URL地址，此时图像被设置为一个超级链接。
在浏览器中，单击该图像，即可跳转到相应的位置上。
同样，通过单击右边的文件夹图标，可以打开一个对话框，从磁盘上选择要链接是对象；通过拖动该文本框右边的“指向文件”图标，也可以提取相应的URL链接路径。
（有关创建链接的信息将在后面的章节中详细叙述）5.给图像加上替代文本“替代”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。
在属性检查器中“替代”文本框中输入图像的文本说明。
图像替代文本起到了两个作用。
一是当鼠标移动到这些图像上时，如果这个图像加上了替代文本，浏览器可以在鼠标指针右下方弹出一个黄底的说明框，为浏览者提供提示。
二是当浏览器禁止显示图片时，如果给图像加上了替代文本，可以在图像位置显示出这些文本。
6.为图像定义样式单击属性检查器中“类”后面的下拉列表可以从已定义的样式中选择为图像定义的样式。
7.编辑图像在属性检查器中编辑这里集合了一些常用的图片编辑工具，其实是调用了Fireworks的图片编辑功能，这是Dreamweaver MX 2004新增的功能。
如图2-42所示。
图2-42图片编辑按钮其中，按钮从左至右依次为：使用Fireworks编辑图像：点击后可以调出Fireworks编辑窗口，进行图像编辑。
在Fireworks中优化：打开Fireworks的优化窗口，进行图像的优化。
（关于Fireworks的编辑与优化请参考Fireworks相关书籍，这里不详述）裁切图像：使用内置的裁切工具进行图像的裁切。
修剪图像的大小，从所选图像中删除不需要的区域。
图2-41裁切图像重新取样：单击此按钮后，如果把图像宽度和高度变小后，可以重新采样，使图像本身文件尺寸变小。
如图2-42所示图2-42图像重新采样前后调整亮度和对比度：单击此按钮，或执行“修改/图像/亮度/对比度”命令，弹出如图2-43所示亮度对比度对话框，分别拖动滑块来调整图像的亮度和对比度。
值的范围从-100~100。
“亮度/对比度”修改图像中像素的亮度或对比度，这将影响图像的高亮显示、阴影和中间色调。
修正过暗或过亮的图像时通常使用“亮度/对比度”。
图2-43调整亮度对比度锐化图像：锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。
单击图像属性检查器中的“锐化”按钮，或者执行“修改/图像/锐化”命令，将弹出如图2-44所示对话框。
可以通过拖动滑块控件或在文本框中输入一个0 到10 之间的值，来指定Dreamweaver 应用于图像的锐化程度。
图像锐化前后的效果对比如图2-45所示。
图2-44锐化图像图2-45图像锐化前后的效果8.为图像创建链接热区在图像属性检查器中“地图”后面的文本框中输入图像映像的名称，用巨型、圆形、多边形工具可以在一幅图像上创建多个链接热区。
例如选择地图右下角的矩形工具，在图像上绘制一个矩形热区，在属性检查器中链接文本框后输入链接地址，如图2-46所示，则一个矩形链接热区创建完成，预览时，单击该热区即可跳转到该热区所连链接的内容上去。
图2-46为图像创建热区9.设置图像边距选中图像后，在图2-41所示的图像属性检查器上“垂直边距”和“水平边距”后的文本框中输入合适的参数可以设置图像垂直方向和水平方向的边距。
10.设置图像超链接的目标窗口如果为图像设置了超链接，则在图像属性检查器上“目标”后的下拉列表中选择设置链接目标端点文档的打开位置。
“目标”是指链接的页面载入的框架或窗口。
当前框架集中所有框架的名称都显示在“目标”列表中。
也可选用下列保留目标名：_blank将链接的文件载入一个未命名的新浏览器窗口中。