网页设计与制作 第 7 章 插入图像和多媒体对象
《网页设计与制作》课程标准
《网页设计与制作》课程标准【课程名称】《网页设计与制作》【适用专业】中等职业学校计算机应用专业办公自动化技术1.前言1.1课程性质本课程是中等职业学校计算机应用专业的一门专业核心课程。
通过本课程的学习, 要求学生掌握网页设计的基本概念, 学会使用常用的网页设计工具和常用脚本语言, 能够设计制作常见的静态和动态网页, 具备网站的建立和维护能力。
同时通过本课程的学习, 培养学生的综合职业能力、创新精神和良好的职业道德。
1.2设计思路本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”, 整个《网页设计与制作》课程共分为四大模块, 它们分别是: 网页基础知识、DreamWeaver的使用、HTML语言、ASP动态网页设计。
教学时各模块既有独立性, 又有关联性。
独立性是指各模块设计案例、组织教学、突出重点时应该相互独立, 学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系, 在重难点设计上应该加以配合, 如HTML语言模块着重基本代码的熟记和编写, 对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。
《网页设计与制作》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。
本课程作为计算机专业的一门主干专业课程, 一般在2.3年级开设, 此时学生已经具备一定的计算机基础知识和动手能力, 能较快地掌握网页设计的各种知识, 并运用所学知识做出具有特色的网站, 使学生能够得到全面的培养, 成为社会所需专用人才。
2. 课程目标总目标：使学生掌握常用的网页设计工具, 熟练运用多种网页设计技术, 具备Web网页设计、制作及站点管理的基本知识和基本技能, 学生能够独立制作中小型的网站。
1.了解WWW、HTTP、HTML、CSS的定义、概念和作用；2.理解服务器、客户端、浏览器的概念和作用； 3.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用；4.熟练操作DreamWeaver；5.理解CSS样式表的作用和意义；6.深入理解HTML语言的各种功能和应用；7.深入理解表格、框架、表单的作用；8.深入理解层的作用；9.初步了解面向对象程序设计思想。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础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 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
《网页设计与制作》课程简介
《网页设计与制作》课程简介课程名称：网页设计与制作课程代码：02038适用专业：初等教育（计算机与信息技术方向）课程性质：专业核心课程、必修课、专业技能课学分：3 学分计划学时：72学时（理论36学时，实训36学时）一、前言1. 课程性质本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。
本课程的先修课程是《计算机应用基础》，后续课程是《程序设计》。
在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。
在以后学生还将学习《程序设计》课程，能设计和制作动态网页。
2. 课程基本理念初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。
课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。
同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。
3. 课程设计思路根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。
课程以工作任务来组织内容，以案例驱动贯穿教学过程。
由浅入深，最后完成主题网站的开发项目。
课程教学中以Dreamweaver的使用为主线，要重视HTML语言和CSS样式的讲解和应用。
通过以3—4人为小组完成主题网站的建设，培养沟通能力、合作能力和团队协作能力，为今后的职业生涯打下良好的基础。
二、课程目标1. 总体目标本课程以学生能独立完成静态网站开发和维护的实际工作能力为学习目标，要求学生掌握HTML语言的文档结构和基本标签使用。
完整版)网页设计与制作课程标准
完整版)网页设计与制作课程标准网页设计与制作》是一门理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
该课程定位于WEB技术开发工作岗位，是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。
通过本课程的研究，学生将了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。
该课程旨在为今后从事网页设计与制作、网站开发和管理奠定基础，并在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主研究能力和探索创新能力。
该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：1.网页基本概念（第1章）2.基本开发工具的使用DW CS6软件介绍（第2章）3.建立与管理站点（第3章）4.制作主要内容为文本的网页（第4章）5.插入与编辑图像（第5章）6.插入多媒体元素（第6章）7.创建超级链接（第7章）8.HTML基础（第13章）9.表格处理与网页布局（第6章）10.网页布局AP Div的应用（第9章）11.使用CSS+DIV布局网页（第11章）12.网页美化CSS样式表（第10章）13.行为（第12章）14.动态网页基础（第15章）15.创建和使用模板（第9章）16.创建和使用库（第10章）该课程的教学目标为：1.掌握使用Photoshop进行图像处理的基本方法及操作技能；2.掌握DreamweaverCS5的基本知识及操作技能；3.掌握建立与管理站点的方法；4.掌握制作主要内容为文本的网页的方法；5.掌握在网页中插入与编辑图像的方法；6.掌握在网页中插入多媒体元素的方法；7.掌握表格处理与网页布局的方法；8.掌握创建超级链接的方法；9.掌握使用框架制作旅游网站的方法；10.掌握创建和使用模板的方法；11.掌握创建和使用库的方法；12.掌握在网页中添加AP Div的方法；13.掌握在网页中使用行为的方法；14.掌握HTML基础知识及通过代码修饰网页的方法。
DreamweaverCC网页设计与制作标准教程图像与多媒体
锐化 图像预览 边距 原始图像位置 边框宽度 对齐方式 亮度和对比度 裁剪 重新取样
图 4-4
图像【属性】检查器
图像【属性】检查器中的各项参数设置如表 4-1 所示。
表 4-1
图像属性
性 作 用 图像在网页中唯一的标识 图像在水平方向（宽）和垂直方向（高）的尺寸 图像在本地计算机或互联网中的 URL 路径 图像所应用的超链接 URL 地址 当鼠标滑过图像时显示的工具提示信息 调用相关的图像处理软件编辑图像 （例如， PSD 使用 Photoshop， PNG 使用 Fireworks） 在使用相关的图像处理软件编辑图像时所采用的设置项目 如使用的是 PSD 文档输出的图像文件，可将图像与源 PSD 关联，单 击此按钮进行动态更新 图像在网页中可应用的 CSS 样式 选择图像上方的热点链接，并进行移动或其他操作 在图像上方绘制一个矩形的热点链接区域 在图像上方绘制一个圆形的热点链接区域 在图像上方绘制一个多边形的热点链接区域 定义图像与其上方或下方各种网页元素之间的距离 定义图像与其左侧或右侧各种网页元素之间的距离 定义图像所应用的超链接的打开方式 如使用的是 PSD 文档输出的图像文件， 此处将显示 PSD 文档的 URL 路径 定义图像外部的边框宽度 第
第4章
图像与多媒体
在网页中，除了插入文本内容之外，还可以插入图像和多媒体素材内容。由于文本 给人的感觉单调、枯燥，所以通过添加图像和多媒体素材，可以使网页更加生动。 通过插入图像，可以使网页中的文本内容和图像进行混排，并实现图文结合，内容 上更加具有说服力。 而对于多媒体素材，在网页中应用比较广泛，如一些动画广告、动画网页，以及流 媒体视频，还有音乐网站等。 本章学习要点： 插入图像 编辑图像 图像对象操作 插入多媒体
网页设计与制作(Dreamweaver)《插入网页基本要素之多媒体内容》
随着网络的发展，多媒体在网络上得到了更广泛的 应用，因此，对网页设计页提出了更高地要求。在 Dreamweaver中，可以快速、方便地为网页添加
Flash动画、音频文件、视频文件，
插入这些对象可以增强网页的互动性。
插入网页基本要素之多媒体内容
插入Flash动画
目前，Flash动画使网页上最流行的动画格式，大量用于网页中。在Dreamweaver中，Flash动画也是最常用的多媒体 插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时还使用了优化的算法将 多媒体数据进行压缩，是文件变得很小，因此，非常适合在网上传播。
插入网页基本要素之多媒体内容
音频格式
1 midi 或 mid （ 乐 器 数 字 接口）格式：用于器乐。许
多浏览器都支持MIDI文件并且不 要求插件。尽管其声音品质非常 好，但根据访问者的声卡的不同， 声音效果也会有所不同。
5
mp3格式
一种压缩格式，它可令声音文件明显缩小。 其声音品质非常好：如果正确录制和压缩 MP3文件，其质量甚至可以和CD质量相 媲美。
2 wav（ Waveform扩展名）格式： 具有较好的声音品质，许多浏览器都支持此类 格式文件并且不要求插件。可以从CD、磁带、 麦克风等录制自己的WAV文件。
3 aif（音频交换文件格式，即
AIFF）格式：与WAV格式类似，
也具有较好的声音品质，大多数浏览器
4
都可以播放它并且不要求插件。
ra、ram、rpm或RealAudio格式：具
插入网页基本要素之多媒体内容
插入Flash动画
方法：将插入点置于欲添加位置，在“插入栏”中，选择“媒体”，单击“Flash”图标；或在站点管理 器中将“Flash”文件拖到文档窗口中；或者执行“插入/媒体/Flash”菜单。
网页设计与制作(Dreamweaver)《插入网页基本要素之图像与超链接》
超链接
超级链接是网页中的精华部分，当光标移至浏览器中的超级链接时，光
标会变成一只手的形状，此时单击链接便可以打开链接所指向的目标网
页。
没有它每个网页都要输入很长的URL地址。没有超链接，就无法通过单击的方式 遨游Web世界，而如果没有了单击的功能，Web就会是死水一潭。
在左边选择文件类型，右边单击左上方的加号图像编辑器
设置及启用外部图像编辑器：
设置不同类型图像文件编辑器：选择“编辑／ 首选参数／文件类型/编辑器”…… 通过外部图像编辑器对图像文件进行修改:
启用图像编辑器：选取图像→单击属性面板中 的“编辑”按钮即可启动相应编辑器，并打开 图像文件，进行修改。
插入网页基本要素之图像与超链接
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 给图片增加提示：选中图像→在属性面板的“替代”中输入提示文字，在浏览器中，鼠标指向这个图片时，就会出现文字提示。 另外，有时，不显示图片后，可以显示该说明文字。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
插入网页基本要素之图像与超链接
超链接的类型
1 页间链接：利用该链接可 以跳转到其他文档或文件，如图 形、电影、PDF或声音文件。
2 页内链接：也被称为锚记链接，利用它 可以跳转到本站点指定文档的位置。
4 空链接及脚本链接
它允许用户附加行为至对象或创 建 一 个 执 行 JavaScript 代 码 的 链 接。
插入网页基本要素之图像与超链接
图像的编辑与属性设置
单击选中图像，在属性面板中，设置图像的属性： 放大、缩小图像大小：拖动控制点或直接在属性面板中输入宽度与高度的像素值； 等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点； 恢复图像大小：删除其属性面板中的宽度、高度值，即可恢复到原来的大小。 “边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑”启动在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。
《网页设计与制作》课程说明书
计算机图像处理 专业核心课
学时 /学分 56 /3 授课范围
2010 级本科 1 班、2 班、3 班
授课时间 和地点
周三 1-2 节，11-A507 室（2 班、3 班） 周五 5-6 节，11-A507 室（1 班）
人数 限制 90
课 程 本课程全面讲授使用 HTML 和 CSS 进行网页设计和制作的方法和技巧，包括网页设计基础、网页 简 制作工具、XHTML 基础、CSS 基础、CSS 布局技术和 CSS 高级技术等内容。 介
实验、实习、作业、课外 阅读及参考文献等 内容及时间、地点
实验（一）网页基本元素 周三 3、4 节 计算机基础教学实验室 B-103
实验（二）XHTML 语言 周三 3、4 节 计算机基础教学实验室 B-103
实验（三）CSS 选择器 周三 3、4 节 计算机基础教学实验室 B-103
实验（四）CSS 盒模型 周三 3、4 节 计算机基础教学实验室 B-103
缺席 1/3 学时者，取消考试资格，重修；总成绩不及格者，补考；补考不及格者， 重修；补考或重修时，期末考试占 100%。
备注
1．开学一周内，班长或课代表将其姓名、联络电话、手机以 e-mail 传送给任课 老师。 2．若以 e-mail 与老师联络时，请于主题处注明您的班级、姓名及事由等。 3．修读本课程的同学均应准时到课，若无法准时前来，应有请假条。
第 14 章 表格布局（2 课时） 13.1 表格布局基础 13.2 表格布局实例
第 15 章 浏览器兼容问题（2 课时） 13.1 CSS 过滤器 13.2 IE 常见 bug 修复 网页制作综合训练（2 课时） 第 16 章 网页制作综合训练
实验（六）用 CSS 设置背景样 式 周三 3、4 节 计算机基础教学实验室 B-103
湖北自考《网页设计与制作》课程考试大纲
湖北省高等教育自学考试大纲课程名称：网页设计与制作课程代码：06386第一部分课程性质与目标一、课程的性质与特点“网页设计与制作”是湖北省高等教育自学考试网络传播专业（独立本科段）开设的一门专业实践课程。
网页是网络中信息传播的主要载体，是当今网络传播应用的主要形式。
网页是网络传播的重要展现形式，是传统新闻基本能力的新的展现形式，同时也对传统新闻基本能力提出了新的要求。
作为网络传播专业的学生只有了解、掌握了网页设计与制作的基本原理、基本操作方法，才能更好进行网络传播的应用与实践。
本课程是该专业的一门非常重要课程。
本课程通过对网页的基本结构原理、网页页面的基本组成、网页页面的编写语言、网页设计与制作流程、网页设计与制作方法介绍，以及对相关软件的操作掌握后，可以独立完成对网页的制作设计与编辑，从而将新闻、网络信息通过网页展现，更好将网络新闻的采编评与网络传播的网页展现形式结合，充分发挥网络传播的特点。
在网络传播专业学生在将来的实际工作中，需要乃至本课程的内容中介绍的基本原理和方法。
因此，本课程是网络传播专业学生必须掌握的一门课程。
本课程是本专业及相关专业相关课程进一步学习的基础课程。
二、课程目标和基本要求网页的设计与制作是一门与计算机结合十分紧密的课程。
既需要一定的理论知识，也需要一定的实际操作能力。
通过本课程自学、上机实习、作业等方式的学习，要求学生掌握网页的基本原理、网页制作与设计的基本方法、能操作相关应用软件，最终达到可以独立或者与他人分工合作完成简单和复杂网页的设计与制作。
具体地说，包括以下几个方面：（1）考生了解网页的基本概念、基本结构、制作流程和设计原则等相关基础知识，掌握网站的开发流程，能独立规划和设计网站。
（2）要求考生能熟练掌握Dreamweaver网页制作软件，能使用Dreamweaver创建和管理网站，掌握Dreamweaver制作网页的技术，使用Dreamweaver提供的行为机制制作具有动画效果的网页。
中职网页设计与制作(中国工信出版集团)教案：图像的插入与编辑、多媒体元素
中等专业学校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.插入动画、视频、音频
教后札记。
电子商务《网页设计与制作》课程标准
《网页设计与制作》课程标准一、课程说明课程名称网页设计与制作标准简称网页设计与制作适用专业电子商务修读学期第一学期制订时间2018.08课程代码1351610课程学时72课程学分4课程类型B类课程性质必修课课程类别专业基础课先修课程平面设计基础与应用后续课程品牌运营、平台运营对应职业资格证或内容CEAC网店运营师、网页制作员合作开发企业无执笔人合作者无审核人制（修）定2018-08日期注：1.课程类型（单一选项）：A类（纯理论课）/B类（理论＋实践）/C类（纯实践课）2.课程性质（单一选项）：必修课/专业选修课/公共选修课3.课程类别（单一选项）：公共基础课/专业基础课/专业核心课4.合作者：须是行业企业人员，如果没有，则填无二、课程定位《网页设计与制作》是为满足行业企业对静态网页设计和制作人员的用人需求而开设的一门面向电子商务专业的必修课。
涉及网页基础、HTML标记、CSS样式、网页布局等内容。
本课程的前期课程主要有《平面设计》等，平行的专业课程主要有《市场营销》等，后续的专业课程主要有《网店设计》等。
通过本课程学习让学生在已掌握平面设计等基本技能的基础上，进一步掌握网页设计开发技能，同时培养了学生网站建设与运营能力，使其具备从事网站编辑相关岗位的职业能力。
三、设计思路《网页设计与制作》课程设计的基本理念是遵循行动导向的教学理念，按照网站编辑的实际工作过程，设计教学的过程。
充分发挥学生的主体性作用，使学生积极主动参与工作过程。
在教学中体现学生主体、过程导向的理念，按照“项目教学法”设计和实际工作过程一致的学习任务单，分阶段实现不同任务，达到79“做中学”目的。
以电子商务专业学生的就业为导向，根据行业专家对电子商务专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。
网页设计与制作项目7超链接
鼠标指向导航图像
7.2 网页制作
步骤 10 重复同样的操作，插入鼠标经过图像，在 图像名称的文本输入框中输入“酒店机票”，用与设置 “首页”相同的方法选择所需要的图像，【插入鼠标经过 图像】对话框中的参数设置如图所示。
【插入鼠标经过图像】对话框参数设置
7.2 网页制作
7.2.2 创建文本与图片超链接 步骤1 创建文本超级链接。在【属性】面板上单击 “页面属性”按钮 ，设置文本链接的属性，参数设置如 图所示。 步骤2 在“目的地”页面中选择文本“预订酒店”， 如图所示；在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 。
步骤7 单击“预览”按钮 ，当鼠标指向 文本“黄山”图片时，单击即可跳转到“黄山” 页面上。 步骤8 按照相同的操作，可以完成图片 “苏州园林”、“桂林”的超级链接。
7.2 网页制作
7.2.3 创建图像映像超链接 步骤1 在“目的地”页面上单击“地图”图片，在 【属性】面板单击“矩形热点工具”按钮 ，在地图上的 “北京”处绘制“矩形”，如图所示。 步骤2 在【属性】面板上单击“链接（L）”右侧的 “浏览文件”按钮 ，或直接输入超级链接的目标文件名， 如图所示。
“目的地”页面效果
7.2 网页制作
7.2.1 设置导航条超链接 步骤1 启动Dreamweaver CS6后，在letuweb 站点中创建新文档，命名为“destination.html”。 步骤2 在destination文档中绘制表格布局页面，输 入相应的文字、选择图像等素材，插入页面顶部LOGO及其 他元素，如图所示。
7.2 网页制作
步骤3 在表格的第3行定位光标，执行【插入】| 【图像对象】|【鼠标经过图像】菜单命令，弹出【插 入鼠标经过图像】对话框，如图所示。
《网页设计与制作》课程简介
《网页设计与制作》课程简介课程名称：网页设计与制作课程代码：02038适用专业：初等教育（计算机与信息技术方向）课程性质：专业核心课程、必修课、专业技能课学分：3 学分计划学时：72学时（理论36学时，实训36学时）一、前言1. 课程性质本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。
本课程的先修课程是《计算机应用基础》，后续课程是《程序设计》。
在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。
在以后学生还将学习《程序设计》课程，能设计和制作动态网页。
2. 课程基本理念初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。
课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。
同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。
3. 课程设计思路根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。
课程以工作任务来组织内容，以案例驱动贯穿教学过程。
由浅入深，最后完成主题网站的开发项目。
课程教学中以的使用为主线，要重视语言和样式的讲解和应用。
通过以3—4人为小组完成主题网站的建设，培养沟通能力、合作能力和团队协作能力，为今后的职业生涯打下良好的基础。
二、课程目标1. 总体目标本课程以学生能独立完成静态网站开发和维护的实际工作能力为学习目标，要求学生掌握语言的文档结构和基本标签使用。
能综合应用软件、和技术制作网页，掌握规划、开发、发布和管理静态网站的专业知识和技能。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第 7 章 插入图像和多媒体对象
北京师范大学出版
第 7 章 插入图像和多媒体对象
7.1图像文件格式 7.2在页面中插入图像 7.2.1插入图像 7.2.2设置图像属性 7.2.3裁剪图像 7.2.4调整图像的亮度和对比度 7.2.5锐化图像 7.3插入其他网页图像 7.3.1插入图像占位符 7.3.2创建鼠标经过图像 7.4插入Flash对象 7.4.1插入Flash动画影片 7.4.2插入Flash按钮 7.4.3插入Flash文本对象 7.5 在网页中添加声音和视频 7.5.1在网页中添加音频 7.5.2添加视频 7.6 插入其他多媒体对象 7.6.1 插入 Applet 7.6.2插入ActiveX控件 7.7 综合案例实现
7.2.1 插入图像
图像是网页中最主要的元素之一，一幅幅图像和一个个漂亮 的按钮不但使网页更加美观、形象和生动，而且与文本相比 能够更直观地说明问题，使表达的意思一目了然，这样图像 就会为网站增添生命力，同时也加深用户对网站良好的印象。
01打开“源文件\ch7\7_2\7_2_1\index.htm”页面，将光标置于要插入 图像的位置，如图所示。选择菜单中的【插入】|【图像】命令，弹出 【选择图像源文件】对话框，在对话框中选择图像529.jpg。
01打开“\源文件\ch7\7_3\7_3_2\index.htm”原始文件，如图7.20所示. 02将光标置于插入鼠标经过图像的位置，选择菜单中的【插入】|【图像对象】 |【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
鼠标经过图像就是当鼠标经过图像时，原图像会变成另外一幅图像。鼠标经 过图像其实是由两张图像（即原始图像和鼠标经过图像）组成的。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
05单击【确定】按钮，将图像路径添加到文本框中。 06单击【确定】按钮，插入鼠标经过图像，将【对齐】设置为【右对齐】。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.3 插入其他网页图像
7.3.1 插入图像占位符
有时候根据页面布局的需要，要在网页中插入一幅图片。这个时候 可以不制作图片，而是使用占位符来代替图片位置，如图所示是插 入图像占位符的效果。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.1 插入图像占位符
01打开“源文件\ch7\7_3\7_3_1\index.htm”网页文档
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
01打开“源文件\ch7\7_2\7_2_2\index.htm”页面
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.2 设置图像属性
02选中图像，在图像的【属性】面板中【替换】下拉列表中输入【粽 子】，将对齐设置为【右对齐】。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.4 调整图像的亮度和对比度
01打开“源文件\ch7\7_2\7_2_4\index.htm”，选中要 调整亮度和对比度的图像，单击【属性】面板中的 【亮度和对比度】按钮，弹出如图所示的提示对话框。 02单击【确定】按钮，弹出【亮度/对比度】对话框， 在对话框中将【亮度】设置为“-15”， 【对比度】设 置为“10”。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.1 插入Flash动画影片
03单击【确定】按钮，插入SWF动画 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.2 插入Flash按钮
在Dreamweaver cs3中已经没有Flash按钮了，到 cs4把Flash文本也去掉了 全部集成到flash cs4中。 Flash 按钮Dreamweaver 提供的Flash 模板。使用 该模板，设计人员可以快速制作出所需要的Flash按 钮，而避免了切换到Flash中制作按钮的操作。但是 在Dreamweaver cs3中已经没有Flash按钮了，到 cs4把Flash文本也去掉了，全部集成到flash cs4中 。
FLA 文件 (.fla) 所有项目的源文件，使用 Flash 创作工具创建。 此类型的文件只能在 Flash 中打开（而无法在 Dreamweaver或浏 览器中打开）。您可以在 Flash 中打开 FLA 文件，然后将它发 布为 SWF 或 SWT 文件以在浏览器中使用。
SWF 文件 (.swf) FLA (.fla) 文件的编译版本，已进行优化，可以在 Web 上查看。此文件可以在浏览器中播放并且可以在Dreamweaver 中 进行预览，但不能在 Flash中编辑此文件。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.5 锐化图像
锐化将增加对象边缘像素的对比度，从而增加图像的淸晰度或锐度。
Dreamweaver的编辑功能仅适用于JPEG和 GIF图像文件格式，其他位图图 像格式不能使用这些图像编辑功能。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
FLV 文件 (.flv) 一种视频文件，它包含经过编码的音频和视频数 据，用于通过 Flash Player进行传送。例如，如果有QuickTime 或 Windows Media 视频文件，则可以使用编码器（如 Flash® CS4 Video Encoder 或 Sorensen Squeeze）将视频文件转换为 FLV 文件。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.1 插入Flash动画影片
01打开“\源文件\ch7\7_4\7_4_1\index.htm”页面，将光标置于要插入 SWF动画的位置
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.4 插入Flash对象
7.4.1 插入Flash动画影片 02选择菜单中的【插入】丨【媒体】|【SWF】命令 弹出【选择文 件】对话框，在对话框中选择top.swf。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.1 图像文件格式
3 PNG图像格式
PNG是英文单词“Portable Network Graphic”的缩写， 即便携网络图像，该文件格式是一种替代GIF格式的无 专利权限制的格式，它包括对索引色、灰度、真彩色 图像以及alpha 通道透明的支持。
低颜色数下的GIF图比JPEG图装载得更快，可用许 多具有同样大小的图像文件组成动画，在GIF图像中可 指定透明区域，使图像具有非同一般的显示效果。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.1 图像文件格式
2 JPEG图像格式
JPEG格式是目前互联网中最受欢迎的图像格式，可支 持多达16M颜色。 它能展现十分丰富生动的图像，还能压缩。但压缩方式 是以损失图像质量为代价，压缩比越高图像质量损失越 大，图像文件也就越小。 一般情况下，同一图像的BMP格式的大小是JPEG格式 的5至10倍，而GIF格式最多只能是256色，因此载入 256色以上图像的JPEG格式就成了互联网中最受欢迎 的图像格式。 网页中的图像格式一般以GIF为主，如果涉及到照片类 似的图像，则选择JPEG格式。
7.3.2 创建鼠标经过图像
03在对话框中单击【原始图像】文本框右边的【浏览】按钮，弹出【原始图 像：】对话框，在对话框中选择图像529.jpg 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.3 插入其他网页图像
7.3.2 创建鼠标经过图像
04单击【确定】按钮，将图像路径添加到文本框中。单击【鼠标经过图像】 文本框右边的【浏览】按钮，弹出【鼠标经过图像】对话框，在对话框中选 择图像530.jpg 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.1 插入图像
打开源文件
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.1 插入图像
【选择图像源文件】对话框
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.3 裁剪图像
02【确定】按钮，此时在图像的周围会出现调整图像大小的控制手柄 。
《网页设计与制作》
第 7 章 插入图像和多媒体对象
7.2 在页面中插入图像
7.2.4 调整图像的亮度和对比度
图像编辑功能可以不用离开Dreamweaver就能够完成， 编辑工具是内嵌的Fireworks技术。这样在编辑网页图 像时就轻松多了，不需要一定打开其他的图像处理工具 进行处理，从而大大提髙了工作效率。在 Dreamweaver CS4中还可以直接调整图像的亮度/对比 度。这将影响图像的高亮显示、阴影和中间色调。修正 过暗或过亮的图像时通常使用亮度/对比度。
《网页设计与制作》
第 7 章 插入图像和多媒体对象