下载文档原格式
第19讲动感页面-多媒体1.1教学目标：◆知识目标1.掌握多媒体内容的插入。
2.掌握多媒体内容的编辑。
3.掌握富具动感的spry组件的用法。
◆技能目标1.能够在设计中运用声音、动画等多媒体效果为网页制作动感效果。
2.能够灵活运用Dreamweaver CS6新增加的功能增加网页的炫感。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握多媒体内容的插入。
2.掌握多媒体内容的编辑。
3.掌握富具动感的spry组件的用法。
1.3 教学难点理解多媒体内容的作用和spry组件的用法1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题行为的设置可以使网页动起来，动的画面可以引发同学们极高的兴趣，抓住同学们感光趣的东西让他们找失误，在设置动作过程中想想为什么会有千差万别的变化，不同的对象为什么设置的效果不同，设置悬念，让同学们掌握应该掌握的内容。
二、流动的媒体⒈多媒体页面制作多媒体页面是指在页面中添加声音、视频和Flash Movie等多媒体内容。
多媒体页面为浏览者提供在网上听音乐和观看视频的功能，比只含有文字和图片的页面具有更丰富的效果。
Dreamweaver允许添加任何类型的多媒体扩展、插件程序、applet或控件，你只需在对象选项板上单击相应的按钮然后利用属性检查器进行修改即可。
Dreamweaver对Macromedia公司的两个多媒体元素Shockwave影片和Flash文件进行了专门的优化。
在插入这两类对象时，Dreamweaver会自动写入必要的HTML代码以确保尽可能多的浏览器能够接受它们，并且你也可以编辑它们的属性。
《网页设计与制作》教案第一章：网页设计基础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 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
计算机二级选考科目
计算机二级选考科目通常包括：
1. 计算机网络基础：学习计算机网络的基本概念、协议、网络拓扑结构、网络安全等内容，了解网络通信原理和常见网络设备的使用。
2. 数据库原理与应用：学习数据库的基本概念、数据组织和管理技术，了解SQL语言的基本语法和数据库操作，能够进行数据库的设计和应
用开发。
3. 多媒体技术与应用：学习多媒体技术的基本原理和应用，包括图像
处理、音频处理、视频处理等内容，能够实现简单的多媒体应用程序
的开发。
4. 算法与程序设计：学习算法的基本概念和设计方法，能够分析和解
决实际问题，掌握至少一种常见编程语言的基本语法和编程技巧。
5. 网页设计与制作：学习网页设计的基本原理和制作方法，包括HTML、CSS、JavaScript等内容，能够设计和制作简单的网页。
6. 软件工程与项目管理：学习软件工程的基本概念和开发过程，了解
软件项目管理的基本方法和技巧，能够进行软件项目的规划、分析和
设计。
7. 数据结构与算法分析：学习数据结构的基本概念和常见数据结构的
实现方法，了解算法分析和算法设计的基本技术，能够分析和优化算
法性能。
8. 操作系统原理与应用：学习操作系统的基本原理和功能，包括进程
管理、文件系统、内存管理等内容，了解操作系统的设计和应用。
这些选考科目旨在培养学生计算机应用能力和解决实际问题的能力，
为日后从事计算机相关工作做好准备。
课程教案项目效果【任务】制作电影网首页——框架网页入门除表格外，框架也是一种重要的网页布局工具，与使用表格布局网页不同的是，框架布局通常适合页面中一个区域发生变化，而其他区域不发生变化的网页，如网站后台管理界面和一些论坛网页。
（一）了解框架和框架集在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架。
每个框架可显示不同文档的内容，彼此之间互不干扰。
框架网页由框架集定义，框架集是特殊的HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。
框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供如何显示一组框架，以及在这些框架中应显示哪些文档的信息。
要在浏览器中查看一组框架，需要输入框架及文件的URL，浏览器随后打开要显示在这些框架中的相应文档。
使用框架最常见的情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。
例如，下图显示了一个由两个框架组成的框架网页：一个较窄的框架位于右侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。
当访问者浏览站点时，单击左侧框架中的某一超链接，或者展开或收缩其中的栏目，或者更改左侧框架的内容。
（二）了解框架构造上图所示的网页至少由三个单独的网页文档组成：两个框架区域中显示的两个网页文档和把这两个文档显示在一个界面上的框架集文档。
在Dreamweaver中设计使用框架集的网页时，必须全部保存这三个文件，框架集网页才能在浏览器中正常显示。
下图显示了该框架集文档的结构。
在制作框架集文档时，每个框架都有自己的名称。
如果没有理解前面所讲框架的概念，可能会搞不清楚框架名称和网页文档名称的区别。
为方便记忆和理解，可自行设置框架名称。
方法为：选择框架后，在“属性”面板上的“框架名称”编辑框中直接输入（一般在创建框架时会自动指定框架名称）。
（三）制作并保存框架集文档在Dreamweaver中创建框架集的方法有很多，可以选择“文件”→“新建”菜单，打开“新建文档”对话框，然后在左侧的“文档类型”列表中选择“示例中的页”，在“示例文件夹”列表中选择“框架集”，最后在“示例页”列表中选择框架类型并单击“创建”按钮；也可以通过选择“修改”→“框架集”菜单下的子菜单，将普通页面拆分为框架集；另外，还可以单击“布局”插入栏中的“框架”按钮，在普通页面中插入预定义的框架集。
《网页设计与制作》教案第一章：网页设计基础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：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
网页设计与制作课程标准江苏农林职业技术学院《网页设计与制作》课程标准课程代码：08058一、适用对象电子信息工程、计算机应用、电子商务等专业的三年制大专。
二、课程性质网页设计与制作是当今社会的热门技术之一，也是三年制计算机专科学生的一门专业必修课，是根据网页设计与制作、网站管理、网页编辑的工作岗位能力要求所开设的课程。
本课程的教学目的是：以HTML、DreamWeaver和ASP为蓝本，全面介绍与网页设计制作有关的知识，使学生具有解决一般网页制作问题的能力。
与此同时，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。
使学生具有良好的网站规划、设计、编辑与维护能力。
三、参考学时74学时（理论34学时、实训40学时）四、学分4学分五、课程目标通过本课程的学习，学生具有网页设计师工作最基本的知识与技能、具备较高的职业素质，能基本胜任各公司的网页设计师和网站管理维护等岗位工作。
具体来讲，又分为职业能力、工作能力和创新能力的培养。
（一）情感与态度目标1. 具有勤奋学习的态度,严谨求实,创新的工作作风;2. 具有良好的心理素质和职业道德素质;3. 具有高度责任心和良好的团队合作精神;4. 具有一定的科学思维方式和判断分析问题的能力;5. 具有较强的网页设计创意思维,艺术设计素质.（二）能力目标（五号黑体，顶头空两字）1、熟悉DreamWeaver软件的使用。
2、掌握创建和管理站点的原理和方法。
3、掌握网页文本的编辑和控制、表格设计和制作网页的技术。
4、掌握网页图像的处理、超链接的使用、网页表单的编辑的技术。
5、掌握制作网页框架、图层技术、CSS 样式的技术。
6、掌握网页中插入多媒体、利用模板和库设计网页的技术。
7、掌握网页测试和发布等技能。
8、具备进行综合网站规划与设计的能力。
9、具备网站的更新与维护能力。
（三）知识目标1. 会使用dreamweaver网页设计工具制作网页;2. 理解html语言中的标记设置颜色,文本格式和列表;3. 熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符,链接颜色的设置方法;4. 熟练掌握网页设计中字符格式的设置方法,段落分段与换行的方法;5. 掌握html的语法结构,掌握html语言中标记的使用方法;6. 掌握在网页中添加css的方法.掌握三种添加样式信息的方法,会使用css设置网页格式和列表的格式;7. 掌握在网页中嵌入图像的方法,掌握与嵌入图像相关标记的用法;8. 掌握与图像布局和位置相关的标记的概念和用法;9. 熟练掌握使用绝对和相对url,创建超链接,图像链接;学会图像映射的建立方法;10.熟练掌握表格的使用方法,会用表格布局并设计网页;11.掌握框架制作网页的方法,会使用框架设计网页;12.掌握制作表单的方法,会利用表单建立交互式页面;13.掌握javascript语言的语法;14.掌握在html语言代码中嵌入javascript代码的方法,能看懂javascript特效网页源代码;15.学会使用javascript语言实现网页特效.。
