网页设计教案.doc

新疆天山职业技术学院
教师课程教案手册
（2016 — 2017 学年 第 二 学期）
教师姓名
王 欣 娜
课程名称
网页设计与制作—Dreamweaver 实用教程
授课班级
15W计信、15Z计信
所属部门
信息技术学院

新疆天山职业技术学院教务处
新疆天山职业技术学院教案编写要求与说明
新疆天山职业技术学院课程教学基本信息表
课程名称
网页设计与制作
面向专业
计算机信息管理
课程类型
专业课
总学时
80
理论学时
48
实践学时
32
授课班级
15W计信、15Z计信 共 2 班
使用教材
网页设计与制作—Dreamweaver 实用教程 北京出版社
课程教学目标（知识、能力、情感)
知识目标:
1、了解Dreamweaver CS3软件并熟悉界面；
2、了解网站建设工作流程；
3、掌握网页制作工具软件的使用；
4、掌握网页的基本制作方法;
5、掌握网页动画制作工具Falsh；
6、了解网站的测试、发布和管理。
能力目标：
1、具有创建和管理站点的能力。 
2、具备进行综合网站规划的能力。  
3、具备进行综合网站设计的能力。
素质目标：
1、理论结合实践,培养动手能力；
2、具有团队意识，协作完成任务；
3、具有责任感，主动承担任务；
4、具有分析问题和解决问题的能力。

参考主要
书目及资料
1、网页设计与制作—Dreamweaver 实用教程,丁爱萍编，北京出版社2015年7月
2、网页设计与制作,董洁编，清华大学出版社 2012年8月;
3、网页设计案例教程,朱艳丽编，清华大学出版社2012年9月
教研室
审核意见
负责人:
年 月 日
院部
审查意见
负责人：
年 月 日
教务处
检查意见
负责人：
年 月 日
新疆天山职业技术学院课程教案首页
课程名称
网页设计与制作
授课时间
2。29—3。4
授课班级
15W计信、15Z计信
授课序次
第 一 周 第 1 次课
授课题目
第1章网站策划 1.1网页规划设计基础
学时数
80
授课类型
R理论课 R实训课 £一体课 £其他
周学时数
3+2
学习（教学）标准（知识、能力、素质）
知识目标：
1、了解网站可行性分析的主要内容；
2、了解网站定位的主要因素；
能力目标:
1、会分析目标客户的需求和竞争对手的网站
素质目标：
1、培养学生良好的学习意识
教学方法
讲授法、多媒体辅助教学法、讨论法、练习法、归纳法
教学重难点
教学重点：网站可行性分析的主要内容、定位的主要因素
教学难点：理解网站可行性分析的主要内容
参考资料或
相关网站
1、网页设计与制作-Dreamweaver 实用教程,丁爱萍编，北京出版社2015年7月
2、网页设计与制作，董洁编，清华大学出版社 2012年8月；
3、网页设计案例教程，朱艳丽编,清华大学出版社2012年9月
教学媒体
多媒体
教学过程
课堂设计（教学内容、过程、方法）
时间分配
第1章网站策划
1.1网页规划设计基础
网站包含着众多内容各异，错综复杂的网页,这些网页的内容组织，材料收集和处理工作通常可以从两个方面入手.一是根据所需发布的信息确定主题,每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。
网站内容丰富，信息含量大,应该运用一定的方式将其条理化,同时在一定程度上加以归纳后重复利用,使网页较为整齐，脉络清楚,读起来也有重点。
1、通过需求分析进行业务选择：
（1）信息中介类
（2）企业展示类
（3)开放型商务
（4）内部型商务
2、了解网上活动所对应的网站内容和功能：
(1）企业展示类商务形式的核心
(2）企业展示类商务网站的内容要求
（3）企业展示类商务网站的功能要求
3、网站的可行性分析:
(1）建设成本和收益可行性分析
(2）网站运营成本可行性分析
（3）网站功能及相关技术可行性分析
4、网站的定位
（1）确定建立网站的目的
（2）择自身网站所属领域
(3）明确自身网站的目标对象
（4)确定网站定位(竞争定位、形象定位、功能定位）
5、网站的规划
(1）明确网站的目标
(2）选择合适的域名和网站名称
(3）选择恰当的网站功能
（4）设计网站技术解决方案
(5）规划网站内容
(6）设计网站测试和发布方案
（7）制定网站推广策划
（8)安排网站维护措施
（9)指定网站财务预算
6、撰写网站规划报告（封面、目录、前言、正文：市场分析、网站目的及定位、网站技术解决方案、网站结构、内容和功能；网站、网页设计、费用预算、网站维护、网站发布与推广等）
补充内容：
1、各类网站的设计总体框架
（1）门户类网站（2）产品类网站
(3）娱乐类网站（4）游戏类网站
（5)时尚类网站(6）音乐类网站
（7）杂志类网站(8）传记类网站
（9）个人类网站
2、网页赏析
举例说明各个网站的特点.
（1)新疆天山职业技术学院
(2）百度搜索
（3)腾讯
（4）Pixar动画工作室
(5）故宫博物院
（6）网易
（7）柯达相机
（8)唯品会
（9）Rabbit游戏
欣赏完上面不同主题不同风格的网站之后我们可以得出一些结论：
1、网页的组织结构
网页的内容和组织取决于网站的主题和定位。确定了网站的定位和模式,就可以对网页的内容进行组织、规划和布局。
2、首页的结构
首页一般包含主题、徽标、企业精神、经营理念、旗帜广告、首页链接、最新报道、联系方式、招贤纳士和栏目简介等.
3、一般页面的结构
一般页面也称子页面，其结构往往是依据要表现的内容而定，形式比较单一。页面的主题突出，取向性强，主要用于描述同一类事情。
4、网站页面的组织结构
一般来说，设计网站常常采用顺序结构、层次结构、网状结构或复合结构来组织页面。
建设网站的第一步是收集资料，分门别类，将这些素材合理地分配到由超级连接组织的不同的网页中，使得自己的网页能够吸引众多的浏览者，网页的内容的有效组织是必不可少的.
组织网页的方法　
1。突出个性；2.具有可读性；3.完整性强；4。布局合理；5。重要信息放置在首页.

导入新课
（5分钟）
通过提问了解学生对网页设计规划的了解掌握学生课前预习情况
(15分钟）
主要内容讲解及浏览网站（90分钟）

课后任务
1.怎样保证网页界面设计主题的鲜明性？
2。建立网页之初，该如何规划网站内容?
3.打开互联网,选择一个网站，根据所学知识分析、评测之。
教学后记

新疆天山职业技术学院课程教案
教学流程
教学内容与过程
教学方法
学生活动
时间
分配
新课导入
大家对网址、网站并不陌生，每一个网站的内容以及设计、布局都不相同，如果要你给某一公司设计网站，你要如何给这个网站定位并撰写网站的规划报告？

讨论法
思考
5分钟
预习考核
1、大家平常用过哪些网站？各有什么特点？
2、大家所浏览的这些网站当中,都具有什么功能？针对性是否强？
3、网站之间是否有竞争性？
4、网站需求有哪些类型？
5、网站的规划包括哪些内容？
6、网站需求有哪几种类型?
7、什么是CI？
8、如何给网站定位？
9、网站形象包括哪些内容？
10、网站规划包括哪几个方面？
11、网站应具备哪几个功能？
12、信息发布型企业网站内容包括哪些？
13、网站测试内容包括哪些?
14、网站定期维护包括几个方面？
15、商务网站规划报告中包含哪些内容?
讨论法
回答
讨论
15分钟
讲授新课
第1章 网站策划
1.1网页规划设计基础
1、业务选择
2、网站的功能及内容
3、网站的可行性分析及定位
4、网站的规划及撰写网站规划报告

讲授法
多媒体辅助教学法
笔记
讨论
归纳

90分钟
目标检测
1、网页与网站有何不同？请举例说明.
2、网页构成的基本元素是什么?
3、说出自己熟悉的3个网页,并试分析它的归类。
讨论法
练习法
分析
练习
改正

20分钟
归纳小结
本节主要讲解网页规划设计基础，让学生初步了解与网页网站相关的基本概念,通过系统的学习掌握网站的需求及可行性分析，对今后的学习打下基础,使学习学习起来有据可循。
归纳法
思考
推理
判断

10分钟
课后任务说明
1、总结、归纳所学知识点
2、预习1.2章节内容

笔记
5分钟
教学自评

新疆天山职业技术学院课程教案首页
课程名称
网页设计与制作
授课时间
3.7-3.11
授课班级
15W计信、15Z计信
授课序次
第 二 周 第 2 次课
授课题目
第1章 网站策划 1。2网站设计流程
学时数
80
授课类型
R理论课 R实训课 £一体课 £其他
周学时数
3+2
学习（教学)标准(知识、能力、素质）
知识目标：
1、了解网站栏目与板块设置、整体风格的设计方法;
2、了解网站目录结构与连接结构的基本要求；
能力目标：
1、熟悉网页设计的流程和注意事项
2、会对网站风格进行基本设计、会进行网页色彩搭配及布局
素质目标：
1、培养学生良好的学习意识
教学方法
讲授法、多媒体辅助教学法、讨论法、练习法、归纳法
教学重难点
教学重点：网站栏目与板块设置、目录结构与首页设计
教学难点:网站风格的设计、首页的设计
参考资料或
相关网站
1、网页设计与制作-Dreamweaver 实用教程,丁爱萍编,北京出版社2015年7月
2、网页设计与制作，董洁编，清华大学出版社 2012年8月；
3、网页设计案例教程，朱艳丽编，清华大学出版社2012年9月
教学媒体
多媒体
教学过程
课堂设计（教学内容、过程、方法）
时间分配
第1章网站策划
1.2网站设计流程
网页设计与网站主题之间的关系归纳起来有三点，第一，设计应满足主题的要求，应该为主题服务；第二，设计使艺术和技术交融，应该是艺术和技术的完美结合。就是说，在保证“美”的前提下，不丧失网站的“功能”;第三，无论是“美”，还是“功能”,都是为了更好地表达网站的主题思想。
网页设计的优秀与否，取决于设计师对主题的理解与掌握程度，好的页面设计肯定是服从于网站主题,鲜明地突出网站的诉求主题。要使网页从形式上获得良好的诱导力，可以通过对网页的空间层次、主从关系、视觉秩序以及彼此之间的逻辑性来把握运用。
网页的内容和组织取决于网站的主题和定位。确定了网站的定位和模式,就可以对网页的内容进行组织、规划和布局。
1、确定网站栏目与板块:
（1）紧扣主题
（2）设立一个最近更新或网站指南栏目
（3）设立一个可以双向交流的栏目
（4)划分栏目时的注意事项
2、确定网站整体风格(Logo、标准色彩、标准字体、宣传标语、统一图片、设计花边、条、点）
3、确定网站目录结构
(1)不重要将所有文件都存放在根目录下
（2）按栏目内容建立子目录
(3）在每个主目录下都建立独立的images目录
（4）目录的层次不要太深
4、确定网站的链接结构
（1）树状链接结构一对一
（2)星状链接结构一对多
5、首页的设计
（1）确定首页的功能模块
（2）设计首页的版面
6、网页设计布局的原则
(1）画出草图
（2）粗略布局
（3）定案
7、配色
（1)颜色的基本知识
（2）非彩色和彩色的搭配
（3）网页色彩搭配的技巧
8、网页布局的原则
（1）正常平衡
（2）异常平衡
(3）对比
（4）凝视
(5)尽量用图片解说
9、见的版面布局
（1）“厂”型结构布局
(2)“口”型布局
（3）堆成对比布局
（4)POP布局
10、色彩的心理感觉及网页色彩搭配原理：
色彩是自然美、生活美、艺术美的重要组成部分。它代表着情感（绿色代表生命，红色代表热情，白色代表纯洁，蓝色代表深邃），代表着生活。没有色彩的世界是死寂而平淡的。
在主题明确的前提下,网页可以用丰富的色彩来烘托主题，让浏览者耳目一新的感觉.给人清新，如坐春风，吃人生果，让人感觉身上三万六千个毛孔都渗透着激情。但多变的色彩不要干扰了浏览者的易读，不可以浓妆艳抹,脱离主题。
补充内容：
1、网页目标和风格
网站包含着众多内容各异，错综复杂的网页,这些网页的内容组织,材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容,烘托和突出主题，使本页面与网站其他网页有明显的不同。
2、内容组织
网站内容丰富,信息含量大，应该运用一定的方式将其条理化,同时在一定程度上加以归纳后重复利用,使网页较为整齐，脉络清楚，读起来也有重点.
3、页面的组织原则
将页面含盖内容的整体布局的需要进行分组归纳，进行内在联系的组织排列,反复推敲标题图形与整体版面的关系，创造秩序使版面各元素成为丰富多彩而简洁统一整体.

导入新课
（5分钟）
通过提问了解学生对网页设计规划的了解掌握学生课前预习情况
（15分钟）
主要内容讲解及浏览网站（90分钟）

课后任务
1、首页一般包含哪些内容?企业网站的首页主要应该突出哪些方面?
2、网站的页面之间通常采用什么样的组织结构?
3、网状结构有何优、缺点？用什么方法解决。
教学后记

新疆天山职业技术学院课程教案
教学流程
教学内容与过程
教学方法
学生活动
时间
分配
新课导入
在上节课的基础上,当报告撰写成功后，网站建设有了初步的规划，那么下一步应该从哪儿做起呢?在着手建设之前，必须对网站内容深入研究，也就需要一个设计流程。

讨论法
思考
5分钟
预习考核
1、一个网站最显眼、最能体现它内容的是什么？
2、网站当中的内容需要不同栏目体现，需要注意哪些内容?
3、目录的层次一般不能超过几层？
4、网站成功与否的关键是什么设计?
5、网站形象关键的一个要素是什么？
6、色彩搭配的原理是什么？
7、什么颜色使人兴奋？
8、常见的版面布局有哪些？
9、一个网站中能够树立网站形象的关键之一是什么?
10、网站首页一般有哪些内容？
11、什么是网站的链接结构？
12、建立网站的链接结构的两种基本方式是什么？
13、什么是网站风格？应该如何确定？
14、在建立目录时应该注意哪些事项？
15、在划分栏目是要注意什么？
讨论法
回答
讨论
15分钟
讲授新课
第1章 网站策划
1.2网站设计流程
1、确定网站内容
2、确定整体风格
3、确定目录结构
4、确定链接
5、设计首页及布局
6、配色方案

讲授法
多媒体辅助教学法
笔记
讨论
归纳

90分钟
目标检测
1、一个网站是否有必要和客户保持沟通和联系？如需要应通过什么来设计？
2、在设计首页版面时，围绕网站整体思路通过创意和想象力来完成。那么设计版面最好的方法是什么？
3、在众多网站中你对哪个印象最深刻？为什么会深刻？
讨论法
练习法
分析
练习
改正

20分钟
归纳小结
本节主要讲解网站设计流程,让学生初步了解网站设计相关的基本内容，通过系统、明确的学习掌握网站设计流程，通过自己的创意来培养对本课程的兴趣。
归纳法
思考
推理
判断

10分钟
课后任务说明
1、总结、归纳所学知识点，完成课后习题
2、预习2章节内容

笔记
5分钟
教学自评

新疆天山职业技术学院课程教案首页
课程名称
网页设计与制作
授课时间
3。15-3.18
授课班级
15W计信、15Z计信
授课序次
第 三 周 第 3 次课
授课题目
第2章Dreamweaver基本操作
学时数
80
授课类型
R理论课 R实训课 £一体课 £其他
周学时数
3+2
学习（教学)标准（知识、能力、素质）
知识目标:
1、掌握Dreamweaver站点管理、文字使用、图像使用；
2、掌握掌握Dreamweaver中表格的制作方法及链接设计
能力目标：
1、能够使用掌握Dreamweaver制作简单网页
素质目标：
1、培养学生良好的学习意识
教学方法
讲授法、多媒体辅助教学法、讨论法、练习法、归纳法
教学重难点
教学重点：站点的创建、站点文件的管理、站点文件的预览以及表格的建立和设置
教学难点：建立站点所注意的事项、管理站点文件
参考资料或
相关网站
1、网页设计与制作—Dreamweaver 实用教程，丁爱萍编，北京出版社2015年7月
2、网页设计与制作，董洁编，清华大学出版社 2012年8月；
3、网页设计案例教程，朱艳丽编，清华大学出版社2012年9月
教学媒体
多媒体
教学过程
课堂设计（教学内容、过程、方法）
时间分配
第2章 Dreamweaver基本操作
2.1使用Dreamweaver制作简单网页
1、网络的概念：
①Internet概述
Internet是相互连接的网络集合.网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息。
②WWW
WWW（World Wide Web）简称为万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问internet上的服务器端，迅速地获得所需的信息.
③域名与IP地址
在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址.IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔,比如:202.100.4.11。域名系统是一个分层的树状结构组织。域名的书写格式为：叶节点名。二级域名.顶级域名
2、网站与网页的概念
构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息,从而实现网页之间的链接,从而构成了WWW的纵横交织的网状结构。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站.
3、网页制作工具
①网页编辑工具
网页编辑工具主要分为标记型和所见即所得型.所见即所得型的编辑软件主要有：微软的FrontPage和Macromedia公司推出的Dreamweaver。
②图形和图像处理工具
目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件:Photoshop和Macromedia公司推出的Fireworks。
③动画制作工具
目前常用的是Macromedia公司推出的Flash.
4、HTML语言
HTML语法结构
HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：
〈标签>HTML语言元素〈/标签〉
5、了解Dreamweaver CS3的安装并启动Dreamweaver CS3；
6、Dreamweaver 工作界面：
Dreamweaver 工作界面主要包括：菜单栏、插入栏、工具栏、文档窗口、状态栏、属性检查器、面板组、快捷菜单。
7、规划站点：
Web站点是一组具有共享属性(如相关主题、类似的设计或共同目的等）的链接文档.
本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。
建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档.待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。
（1）规划站点结构：
注:规划站点的结构之前应先用笔绘出站点的结构图
（2)规划站点的浏览机制：
一般可采用以下的方法：
①创建返回主页的链接
②显示网站专题目录
③显示当前位置
④搜索和索引
⑤反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中）
8、创建本地站点
本地站点就是位于客户端网页制作者所使用的文件夹被称为本地根目录.通常在制作网站时应首先应在计算机中制作根目录,然后在使用 Dreamweaver 定义该文件夹为本地站点。
（1)创建本地根目录
在计算机硬盘上使用 Windows 资源管理器的方法新建一个文件夹,并为其指定一个有意义的名称.
(2）定义本地站点
9、管理站点
在 Dreamweaver 中可以方便的对站点进行管理，主要包括： 站点操作，文件操作。
10、站点操作
使用“文件"面板可以的对所定义的站点进行各种操作。常用操作包括：查看站点和管理站点。
11、创建一个站点:（操作)
步骤:
①单击“文件”—--“新建”——-“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头,从打开的下拉菜单中选择“站点”命令)
②选择一种站点模板或向导
③单击“确定”按钮
12、站点的基本操作：
①打开站点:“文件"—-—“打开站点”
②删除站点:
方法一：在Windows资源管理器中删除一个站点
方法二:在FrontPage中删除站点，在“文件夹”视图或“网页"视图的“文件夹列表”中，右击站点所对应的目录,在快捷菜单中单击“删除”命令
③站点的设置
“工具"-——-“站点设置”，有“常规”、“参数”、“高级"、“语言”、“导航”、“数据库”六个选项卡
2。2制作表格布局的首页
一、 插入表格
1、单击常用工具上的“插入表格”按钮
2、单击“表格”-——“插入”-—-“表格"命令
3、使用表格工具栏（“查看”-“工具栏”—--“表格”命令）
4、由文本转换(“表格"—“转换”—“文本到表格”）一般以段落为分行标记，以逗号或句号为分列标记.
二、 单元格的基本操作
1、选择单元格（“表格”—“选定”—“单元格”）
Ctrl：可选择不相邻的单元格
Shift:选择多个相邻的单元格
2、插入单元格（“表格”—“插入”-“单元格”）
3、合并单元格（“表格”—“合并单元格"或“表格工具栏"上的“合并单元格”按钮）
4、拆分单元格（“表格"-“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮)
三、填充单元格
1、文本与图像填充(“插入”—“图片”）
2、对齐文本与图像(“表格”—“属性”—“单元格”，“水平对齐方式”、“垂直对齐方式”）
3、修改单元格背景（“表格”-“属性”—“单元格”，“背景"）
4、调整边框颜色（“表格”—“属性”—“单元格”，“边框”）
5、改变单元格尺寸（“表格”—“属性”—“单元格”，“指定宽度”、“指定高度”）
四、修改表格的行与列
1、选择行与列
2、插入行与列（“表格”—“插入”—“行或列"）
3、均分行与列（“表格工具栏”中的“平均分配行高”或“平均分配列宽”)
4、删除行与列(“表格工具栏”中的“删除单元格”按钮或“表格”-“删除单元格”命令)

导入新课
（5分钟)
通过提问了解学生对网页设计规划的了解掌握学生课前预习情况
(15分钟）
主要内容讲解及浏览网站（90分钟）

课后任务
1、网页文件、素材文件都同意在哪里进行管理？
2、每次设置文本的格式很麻烦，可以通过什么工具来完成？
3、一般请快些使用http://链接，属于什么路径？
教学后记

新疆天山职业技术学院课程教案
教学流程
教学内容与过程
教学方法
学生活动
时间
分配
新课导入
在确定网站基本风格后，用什么工具来完成设计呢?

讨论法
思考
5分钟
预习考核
1、“网页三剑客”是哪三个软件？都有什么功能和特点？
2、如何对Dreamweaver CS3进行参数设置？
3、什么是站点？是如何新建的？
4、HTML和XHTML有什么呢区别？
5、网页属性有哪些内容？
6、Dreamweaver CS3中“插入”工具栏包含哪些内容?
7、站点命名时应该注意哪些事项?
8网页的组成元素有哪些？
9、如何删除站点？
10、图片如何插入到网页中？
11、如何插入日期？
12、什么是CSS？
13、HTML文档主体标记是什么？
14、介绍作者、网站说明以及关键字时使用什么语句?
15、水平线标记是什么？

讨论法
回答
讨论
15分钟
讲授新课
第2章Dreamweaver基本操作
2.1使用 Dreamweaver制作简单网页
1、网络的概念
2、网站与网页的概念
3、网页制作工具
4、HTML语言
5、了解Dreamweaver CS3的安装并启动Dreamweaver CS3
6、Dreamweaver 工作界面
7、规划站点
8、创建本地站点
9、管理站点
10、创建一个站点
11、站点的基本操作
12、制作表格布局的首页

讲授法
多媒体辅助教学法
笔记
讨论
归纳

90分钟
目标检测
1、网页文件、素材文件都同意在哪里进行管理？
2、每次设置文本的格式很麻烦,可以通过什么工具来完成？
3、请一位同学到讲台前简单操作站点的建立。
讨论法
练习法
分析
练习
改正

20分钟
归纳小结
本节主要讲解Dreamweaver，让学生初步了解Dreamweaver的基本操作，通过系统、明确的学习掌握Dreamweaver基本的操作，为下面的课程做好铺垫。
归纳法
思考
推理
判断

10分钟
课后任务说明
1、总结、归纳所学知识点，完成课后习题
2、预习3章节内容

笔记
5分钟
教学自评

新疆天山职业技术学院课程教案首页
课程名称
网页设计与制作
授课时间
3.21-3.25
授课班级
15W计信、15Z计信
授课序次
第 四 周 第 4 次课
授课题目
第3章Dreamweaver中的多媒体对象
学时数
80
授课类型
R理论课 R实训课 £一体课 £其他
周学时数
3+2
学习（教学)标准（知识、能力、素质）
知识目标：
1、掌握在网页中插入并使用Flash动画、文本、视频;
2、掌握Shockwave影片的插入方法并设置属性
能力目标:
1、制作带有视频和音乐的网页
素质目标：
1、培养学生良好的学习意识
教学方法
讲授法、多媒体辅助教学法、讨论法、练习法、归纳法
教学重难点
教学重点：插入Flash动画、插入Flash文本、插入Flash视频、按钮
教学难点：Shockwave影片的插入方法并设置属性
参考资料或
相关网站
1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，北京出版社2015年7月
2、网页设计与制作，董洁编,清华大学出版社 2012年8月；
3、网页设计案例教程，朱艳丽编，清华大学出版社2012年9月
教学媒体
多媒体
教学过程
课堂设计（教学内容、过程、方法）
时间分配
第3章 Dreamweaver中的多媒体对象
3.1制作带有Flash效果的网页
Flash 动画是目前最流行的网页多媒体技术,在 Web 领域有广泛的应用。本节介绍如何使用 Dreamweaver 在网页中插入：Flash动画，Flash按钮，Flash文本。
1、 Flash 动画格式
在网页向中添加 Flash 动画之前，首先应该对 Flash 动画的格式有所了解，Flash 动画文件格式包括3种：
①。 fla 格式 The Flash file（。fla)：在 Flash 程序中创建出的动画项目源文件，这种格式的 Flash 动画文件格式可以在 Flash 程序中编辑,也可以将它输出成 swf 或 swt 格式文件,从而方便在浏览器窗口使用。
②.swf 格式 The Flash movie file（。swf）：这种格式的 Flash 文件是.fla 格式的压缩版，它是优化过的 Flash 文件格式,用于在 Web 上浏览。它可以在 Dreamweaver 和浏览器窗口中播放，但是不能在 Flash 程序中编辑。在 Dreamweaver 中的 Flash 按钮和 Flash 文本功能使用的就是这种动画格式。
③.swt 格式 The Flash Generator template（。swt）：可以用来修改和替换。swf格式动画文件的信息，这种格式文件被使用在 Flash 按钮对象中,用户可以使用文字或链接修改模板，来创建自定义的swf 格式动画文件，并将其添加到文件中。
2 、插入 Flash 动画
使用 Dreamweaver插入栏“常用”类别“媒体”列表中的 Flash 按钮，可以在网页中添加 Flash 对象。在文档中添加了 Flash 动画后，选择该文件,可以使用属性检查器查看和修改 Flash 动画属性。
3、 插入 Flash 按钮
Dreamweaver 提供了自动生成 Flash 按钮和 Flash 文本功能，使网页设计者不用使用 Flash 软件也能在网页中获得 Flash 按钮和文本效果。
使用插入栏“常用"〉“媒体"〉 Flash按钮 ，可以将 Flash 按钮添加到插入点。
4 、插入Flash 文本
使用插入栏“常用"〉“媒体”>“Flash 文本"按钮 ，可以将Flash 文本添加到插入点.
5、插入Flash对象
(1）、插入Flash动画
“插入”-“媒体”-“Flash"
设置FLASH属性
(2）、插入FLASH按钮
“插入”-“媒体"—“FLASH按钮"
3。2制作带有公司视频和音乐的网页
1、 使用声音与视频
本节介绍声音与视频基本概念，以及如何在网页中使用：声音，视频。
2、 声音与视频概述
（1）声音概述
声音是最常见的一种多媒体信息。声音文件有不同的类型和格式，如果要将声音文件添加到网页，有几种不同的方法.在确定采用哪一种格式和方法添加声音前,需要考虑几个因素：添加声音的目的、文件大小、声音品质和不同浏览器中的差异。
PC机上的常用声音格式：
①。midi 或 。mid（乐器数字接口)格式用于器乐。
②。wav(Waveform 扩展名）格式文件具有较好的声音品质，许多浏览器都支持此类格式文件，且不要求插件。
③.mp3(运动图像专家组音频，即 MPEG-音频层-3）格式是一种压缩格式,它可令声音文件明显缩小.
④.ra、。ram、.rpm 或 Real Audio 格式具有非常高的压缩品质，文件大小要小于 MP3，全部歌曲文件可以在合理的时间范围内下载.
（2）视频概述:
视频是信息含量最丰富的一种媒体。可以通过不同方式和使用不同格式将视频添加到网页。视频可下载给用户，或者对视频进行流式处理以便在下载它的同时播放它。
PC机上较为常见的视频文件格式 ：
①。avi 格式，即音频视频交错格式，就是可以将视频和音频交织在一起进行同步播放.
②。mpeg、.mpg 或 .dat 格式，也就是运动图像专家组（MPEG）格式，它是运动图像压缩算法的国际标准。
③。ra、。rm 或 .rmvb 格式是 RealNetworks 公司开发的一种新型流式视频文件格式，它包含在RealNetworks公司所制定的音频视频压缩规范RealMedia中，主要用来在低速率的广域网上实时传输活动视频影像 。
④。mov 格式是 Apple 计算机公司开发的一种音频、视频文件格式，用于保存音频和视频信息，具有先进的音视频功能。
3、插入其他媒体对象
（1)、插入Shockwave影片
Shockwave是一个很普及的浏览器的插件，可以在大多数常用的浏览器中进行播放
“插入"-“媒体"—“Shockwave”
（2)、插入ActiveX控件
ActiveX控件是可以充当浏览器插件的可重复使用的组件。
（3）、插入JAVA小程序。
JAVA是一种编程语言，通过它可以开发可嵌入WEB页中的小型应用程序（applets）

导入新课
（5分钟）
通过提问了解学生对网页设计规划的了解掌握学生课前预习情况
(15分钟)
主要内容讲解及浏览网站(90分钟）

课后任务
1、网页文件、素材文件都同意在哪里进行管理？
2、每次设置文本的格式很麻烦,可以通过什么工具来完成？
3、一般请快些使用http：//链接，属于什么路径？
教学后记

新疆天山职业技术学院课程教案
教学流程
教学内容与过程
教学方法
学生活动
时间
分配
新课导入
随着多媒体技术的发展，单纯的文本和图像以及无法满足网页多样化的需求，不仅能完善视觉、听觉效果还能增强交互性，如何在网页中带有Flash效果呢？

讨论法
思考
5分钟
预习考核
1、Flash媒体对象有哪些？
2、网站封面页有使用Flash的吗？举例说明
3、网页中播放视频是比较常见的，如何在网页中插入一个Flash视频?
4、网页上常见的音频格式有哪些？
5、Shockwave是什么？是否经过压缩？
6、如何插入Flash视频？
7、如何插入Flash按钮?
8、什么是Flash文本？
9、〈embed〉标签是什么?
10、如果想设定播放重复次数应该用什么?
11、width、height分别指的是什么?
12、什么是用来设置打开页面时音乐是否自动播放的？
13、如何插入Shockwave影片?
14、bgsound标签有几个属性？
15、如何设置音乐下载？

讨论法
回答
讨论
15分钟
讲授新课
第3章Dreamweaver中的多媒体对象
3。1制作带有Flash效果的网页
1、Flash 动画格式
2、插入 Flash 动画
3、插入 Flash 按钮
4、插入Flash 文本
3。2制作带有公司视频和音乐的网页动
1、使用声音与视频
2、声音与视频概述
3、插入其他媒体对象

讲授法
多媒体辅助教学法
笔记
讨论
归纳

90分钟
目标检测
1、在制作网页时，可以代替文本超链接或图片超链接的是什么？
2、插入Flash视频中，消息参数的内容是什么?
3、讲一首音乐无限循环播放，代码是什么？
讨论法
练习法
分析
练习
改正

20分钟
归纳小结
本节主要解Dreamweaver中的多媒体对象，让学生掌握在网页中插入Flash动画、按钮、文本以及视频并应用于网页
归纳法
思考
推理
判断

10分钟
课后任务说明
1、总结、归纳所学知识点，完成课后习题
2、预习4章节内容

笔记
5分钟
教学自评

新疆天山职业技术学院课程教案首页
课程名称
网页设计与制作
授课时间
3。28-4.1
授课班级
15W计信、15Z计信
授课序次
第 五 周 第 5 次课
授课题目
第4章AP Div、时间轴与行为 4.1 4。2
学时数
80
授课类型
R理论课 R实训课 £一体课 £其他
周学时数
3+2
学习（教学）标准(知识、能力、素质）
知识目标：
1、掌握AP Div的创建、