网页设计教案

《网页设计教案》由会员分享，可在线阅读，更多相关《网页设计教案（66页珍藏版）》请在装配图网上搜索。

1、-*天山职业技术学院教师课程教案手册2016 2017 学年第二学期教师王欣娜课程名称网页设计与制作-Dreamweaver 实用教程授课班级15W计信、15Z计信所属部门信息技术学院*天山职业技术学院教务处*天山职业技术学院教案编写要求与说明*天山职业技术学院课程教学根本信息表课程名称网页设计与制作面向专业计算机信息管理课程类型专业课总学时80理论学时48实践学时32授课班级15W计信、15Z计信共 2 班使用教材网页设计与制作-Dreamweaver 实用教程课程教学目标知识、能力、情感知识目标：1、了解Dreamweaver CS3软件并熟悉界面；2、了解建立工作流程；3、掌握网页制作工

2、具软件的使用；4、掌握网页的根本制作方法；5、掌握网页动画制作工具Falsh；6、了解的测试、发布和管理。能力目标：1、具有创立和管理站点的能力。2、具备进展综合规划的能力。3、具备进展综合设计的能力。素质目标：1、理论结合实践，培养动手能力；2、具有团队意识，协作完成任务；3、具有责任感，主动承当任务；4、具有分析问题和解决问题的能力。参考主要书目及资料1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教研室审核意见负责人：年月日院部审查意见负责人：年月日教务

3、处检查意见负责人：年月日*天山职业技术学院课程教案首页课程名称网页设计与制作授课时间授课班级15W计信、15Z计信授课序次第一周第 1 次课授课题目第1章筹划 1.1网页规划设计根底学时数80授课类型R理论课R实训课一体课其他周学时数3+2学习教学标准知识、能力、素质知识目标：1、了解可行性分析的主要容；2、了解定位的主要因素；能力目标：1、会分析目标客户的需求和竞争对手的素质目标：1、培养学生良好的学习意识教学方法讲授法、多媒体辅助教学法、讨论法、练习法、归纳法教学重难点教学重点：可行性分析的主要容、定位的主要因素教学难点：理解可行性分析的主要容参考资料或相关1、网页设计与制作-Dreamw

4、eaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教学媒体多媒体教学过程课堂设计教学容、过程、方法时间分配第1章筹划1.1网页规划设计根底包含着众多容各异，错综复杂的网页，这些网页的容组织，材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和容。二是组织、精选一些能突出本网页特色的容，衬托和突出主题，使本页面与其他网页有明显的不同。容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚

5、，读起来也有重点。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、撰写规划报告封面、目录、前言、正文：市场分析、目的及定

6、位、技术解决方案、构造、容和功能；、网页设计、费用预算、维护、发布与推广等补充容：1、各类的设计总体框架1门户类2产品类3娱乐类4游戏类5时尚类6音乐类7杂志类8传记类9个人类2、网页赏析举例说明各个的特点。1*天山职业技术学院2百度搜索3腾讯4Pi*ar动画工作室5故宫博物院6网易7柯达相机8唯品会9Rabbit游戏欣赏完上面不同主题不同风格的之后我们可以得出一些结论：1、网页的组织构造网页的容和组织取决于的主题和定位。确定了的定位和模式，就可以对网页的容进展组织、规划和布局。2、首页的构造首页一般包含主题、徽标、企业精神、经营理念、旗帜广告、首页、最新报道、联系方式、招贤纳士和栏目简介等。

7、3、一般页面的构造一般页面也称子页面，其构造往往是依据要表现的容而定，形式比拟单一。页面的主题突出，取向性强，主要用于描述同一类事情。4、页面的组织构造一般来说，设计常常采用顺序构造、层次构造、网状构造或复合构造来组织页面。建立的第一步是收集资料，分门别类，将这些素材合理地分配到由超级连接组织的不同的网页中，使得自己的网页能够吸引众多的浏览者，网页的容的有效组织是必不可少的。组织网页的方法1.突出个性；2.具有可读性；3.完整性强；4.布局合理；5.重要信息放置在首页。导入新课5分钟通过提问了解学生对网页设计规划的了解掌握学生课前预习情况15分钟主要容讲解及浏览90分钟课后任务1.怎样保证网页

8、界面设计主题的鲜明性？2.建立网页之初，该如何规划容？3.翻开互联网，选择一个，根据所学知识分析、评测之。教学后记*天山职业技术学院课程教案教学流程教学容与过程教学方法学生活动时间分配新课导入大家对网址、并不陌生，每一个的容以及设计、布局都不一样，如果要你给*一公司设计，你要如何给这个定位并撰写的规划报告？讨论法思考5分钟预习考核1、大家平常用过哪些？各有什么特点？2、大家所浏览的这些当中，都具有什么功能？针对性是否强？3、之间是否有竞争性？4、需求有哪些类型？5、的规划包括哪些容？6、需求有哪几种类型？7、什么是CI？8、如何给定位？9、形象包括哪些容？10、规划包括哪几个方面？11、应具备

9、哪几个功能？12、信息发布型企业容包括哪些？13、测试容包括哪些？14、定期维护包括几个方面？15、商务规划报告中包含哪些容？讨论法答复讨论15分钟讲授新课第1章筹划1.1网页规划设计根底1、业务选择2、的功能及容3、的可行性分析及定位4、的规划及撰写规划报告讲授法多媒体辅助教学法笔记讨论归纳90分钟目标检测1、网页与有何不同？请举例说明。2、网页构成的根本元素是什么？3、说出自己熟悉的3个网页，并试分析它的归类。讨论法练习法分析练习改正20分钟归纳小结本节主要讲解网页规划设计根底，让学生初步了解与网页相关的根本概念，通过系统的学习掌握的需求及可行性分析，对今后的学习打下根底，使学习学习起来有

10、据可循。归纳法思考推理判断10分钟课后任务说明1、总结、归纳所学知识点2、预习1.2章节容笔记5分钟教学自评*天山职业技术学院课程教案首页课程名称网页设计与制作授课时间授课班级15W计信、15Z计信授课序次第二周第 2 次课授课题目第1章筹划 1.2设计流程学时数80授课类型R理论课R实训课一体课其他周学时数3+2学习教学标准知识、能力、素质知识目标：1、了解栏目与板块设置、整体风格的设计方法；2、了解目录构造与连接构造的根本要求；能力目标：1、熟悉网页设计的流程和考前须知2、会对风格进展根本设计、会进展网页色彩搭配及布局素质目标：1、培养学生良好的学习意识教学方法讲授法、多媒体辅助教学法、讨

11、论法、练习法、归纳法教学重难点教学重点：栏目与板块设置、目录构造与首页设计教学难点：风格的设计、首页的设计参考资料或相关1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教学媒体多媒体教学过程课堂设计教学容、过程、方法时间分配第1章筹划1.2设计流程网页设计与主题之间的关系归纳起来有三点，第一，设计应满足主题的要求，应该为主题效劳；第二，设计使艺术和技术交融，应该是艺术和技术的完美结合。就是说，在保证美的前提下，不丧失的功能；第三，无论是美，还是功能，都是为了更

12、好地表达的主题思想。网页设计的优秀与否，取决于设计师对主题的理解与掌握程度，好的页面设计肯定是服从于主题，鲜明地突出的诉求主题。要使网页从形式上获得良好的诱导力，可以通过对网页的空间层次、主从关系、视觉秩序以及彼此之间的逻辑性来把握运用。网页的容和组织取决于的主题和定位。确定了的定位和模式，就可以对网页的容进展组织、规划和布局。1、确定栏目与板块：1紧扣主题2设立一个最近更新或指南栏目3设立一个可以双向交流的栏目4划分栏目时的考前须知2、确定整体风格Logo、标准色彩、标准字体、宣传标语、统一图片、设计花边、条、点3、确定目录构造1不重要将所有文件都存放在根目录下2按栏目容建立子目录3在每个主

13、目录下都建立独立的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堆成比照布局4POP布局10、色彩的心理感觉及网页色彩搭配原理：色彩是自然美、生活美、艺术美的重要组成局部。它代表着情感绿色代表生命，红色代表热情，白色代表纯洁，蓝色代表深邃，代表着生活。没有色彩的世界是死寂而平淡的。在主题明确的

14、前提下，网页可以用丰富的色彩来衬托主题，让浏览者耳目一新的感觉。给人清新，如坐春风，吃人生果，让人感觉身上三万六千个毛孔都渗透着激情。但多变的色彩不要干扰了浏览者的易读，不可以浓妆艳抹，脱离主题。补充容：1、网页目标和风格包含着众多容各异，错综复杂的网页，这些网页的容组织，材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和容。二是组织、精选一些能突出本网页特色的容，衬托和突出主题，使本页面与其他网页有明显的不同。2、容组织容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚，读起来

15、也有重点。3、页面的组织原则将页面含盖容的整体布局的需要进展分组归纳，进展在联系的组织排列，反复推敲标题图形与整体版面的关系，创造秩序使版面各元素成为丰富多彩而简洁统一整体。导入新课5分钟通过提问了解学生对网页设计规划的了解掌握学生课前预习情况15分钟主要容讲解及浏览90分钟课后任务1、首页一般包含哪些容？企业的首页主要应该突出哪些方面？2、的页面之间通常采用什么样的组织构造？3、网状构造有何优、缺点？用什么方法解决。教学后记*天山职业技术学院课程教案教学流程教学容与过程教学方法学生活动时间分配新课导入在上节课的根底上，当报告撰写成功后，建立有了初步的规划，则下一步应该从哪儿做起呢？在着手建立

16、之前，必须对容深入研究，也就需要一个设计流程。讨论法思考5分钟预习考核1、一个最显眼、最能表达它容的是什么？2、当中的容需要不同栏目表达，需要注意哪些容？3、目录的层次一般不能超过几层？4、成功与否的关键是什么设计？5、形象关键的一个要素是什么？6、色彩搭配的原理是什么？7、什么颜色使人兴奋？8、常见的版面布局有哪些？9、一个中能够树立形象的关键之一是什么？10、首页一般有哪些容？11、什么是的构造？12、建立的构造的两种根本方式是什么？13、什么是风格？应该如何确定？14、在建立目录时应该注意哪些事项？15、在划分栏目是要注意什么？讨论法答复讨论15分钟讲授新课第1章筹划1.2设计流程1、确

17、定容2、确定整体风格3、确定目录构造4、确定5、设计首页及布局6、配色方案讲授法多媒体辅助教学法笔记讨论归纳90分钟目标检测1、一个是否有必要和客户保持沟通和联系？如需要应通过什么来设计？2、在设计首页版面时，围绕整体思路通过创意和想象力来完成。则设计版面最好的方法是什么？3、在众多中你对哪个印象最深刻？为什么会深刻？讨论法练习法分析练习改正20分钟归纳小结本节主要讲解设计流程，让学生初步了解设计相关的根本容，通过系统、明确的学习掌握设计流程，通过自己的创意来培养对本课程的兴趣。归纳法思考推理判断10分钟课后任务说明1、总结、归纳所学知识点，完成课后习题2、预习2章节容笔记5分钟教学自评*天山

18、职业技术学院课程教案首页课程名称网页设计与制作授课时间授课班级15W计信、15Z计信授课序次第三周第 3 次课授课题目第2章Dreamweaver根本操作学时数80授课类型R理论课R实训课一体课其他周学时数3+2学习教学标准知识、能力、素质知识目标：1、掌握Dreamweaver站点管理、文字使用、图像使用；2、掌握掌握Dreamweaver中表格的制作方法及设计能力目标：1、能够使用掌握Dreamweaver制作简单网页素质目标：1、培养学生良好的学习意识教学方法讲授法、多媒体辅助教学法、讨论法、练习法、归纳法教学重难点教学重点：站点的创立、站点文件的管理、站点文件的预览以及表格的建立和设置

19、教学难点：建立站点所注意的事项、管理站点文件参考资料或相关1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教学媒体多媒体教学过程课堂设计教学容、过程、方法时间分配第2章 Dreamweaver根本操作2.1使用Dreamweaver制作简单网页1、网络的概念：Internet概述Internet是相互连接的网络集合。网络协议是网络中的设备进展通信时共同遵循的一套规则，即以何种方法获得所需的信息。(World Wide Web)简称为万维网，客户端只要通过浏览器

20、Browser就可以非常方便地访问internet上的效劳器端，迅速地获得所需的信息。域名与IP地址在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。IP地址是由32位的二进制数值构成，分成4组，转化为十进制用点分隔，比方：。域名系统是一个分层的树状构造组织。域名的书写格式为：叶节点名.二级域名.顶级域名2、与网页的概念构建的根本单位是网页。网页中包含所谓的超，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的，从而构成了的纵横交织的网状构造。通过超连接起来的一系列逻辑上可以视为一个整体的

21、页面，则叫做。3、网页制作工具网页编辑工具网页编辑工具主要分为标记型和所见即所得型。所见即所得型的编辑软件主要有：微软的FrontPage和Macromedia公司推出的Dreamweaver。图形和图像处理工具目前常用的图形和图像处理工具主要是Adobe公司出品的著名的图形图像处理软件：Photoshop和Macromedia公司推出的Fireworks。动画制作工具目前常用的是Macromedia公司推出的Flash。4、HTML语言HTML语法构造HTML文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：HTML语言元素5、了解Dreamweaver CS3的安装并启动Drea

22、mweaver CS3；6、Dreamweaver 工作界面：Dreamweaver 工作界面主要包括：菜单栏、插入栏、工具栏、文档窗口、状态栏、属性检查器、面板组、快捷菜单。7、规划站点：Web站点是一组具有共享属性如相关主题、类似的设计或共同目的等的文档。本地站点：是本地硬盘中存放远程所有文档的地方文件夹。建立的通常做法是：在要地硬盘中建立一个文件夹用来存放的所有文件，往后就在该文件夹中创立和编辑文档。待网页设计和测试好之后，再把它们拷贝到上供浏览者浏览。1规划站点构造：注：规划站点的构造之前应先用笔绘出站点的构造图2规划站点的浏览机制：一般可采用以下的方法：创立返回主页的显示专题目录显示

23、当前位置搜索和索引反应将网页创作者或管理员公布在网页上，或创立一个超级，以使用户能快速地将信息反应到中8、创立本地站点本地站点就是位于客户端网页制作者所使用的文件夹被称为本地根目录。通常在制作时应首先应在计算机中制作根目录，然后在使用 Dreamweaver 定义该文件夹为本地站点。1创立本地根目录在计算机硬盘上使用 Windows 资源管理器的方法新建一个文件夹，并为其指定一个有意义的名称。2定义本地站点9、管理站点在 Dreamweaver 中可以方便的对站点进展管理，主要包括：站点操作，文件操作。10、站点操作使用文件面板可以的对所定义的站点进展各种操作。常用操作包括：查看站点和管理站点

24、。11、创立一个站点：操作步骤：单击文件-新建-站点命令或单击常用工具栏中新建网页按钮的下拉箭头，从翻开的下拉菜单中选择站点命令选择一种站点模板或向导单击确定按钮12、站点的根本操作：翻开站点：文件-翻开站点删除站点：方法一：在Windows资源管理器中删除一个站点方法二：在FrontPage中删除站点，在文件夹视图或网页视图的文件夹列表中，右击站点所对应的目录，在快捷菜单中单击删除命令站点的设置工具-站点设置，有常规、参数、高级、语言、导航、数据库六个选项卡2.2制作表格布局的首页一、插入表格1、单击常用工具上的插入表格按钮2、单击表格-插入-表格命令3、使用表格工具栏查看工具栏-表格命令4

25、、由文本转换表格转换文本到表格一般以段落为分行标记，以逗号或句号为分列标记。二、单元格的根本操作1、选择单元格表格选定单元格Ctrl：可选择不相邻的单元格Shift：选择多个相邻的单元格2、插入单元格表格插入单元格3、合并单元格表格合并单元格或表格工具栏上的合并单元格按钮4、拆分单元格表格拆分单元格或表格工具栏上的拆分单元格按钮三、填充单元格1、文本与图像填充插入图片2、对齐文本与图像表格属性单元格，水平对齐方式、垂直对齐方式3、修改单元格背景表格属性单元格，背景4、调整边框颜色表格属性单元格，边框5、改变单元格尺寸表格属性单元格，指定宽度、指定高度四、修改表格的行与列1、选择行与列2、插入行

26、与列表格插入行或列3、均分行与列表格工具栏中的平均分配行高或平均分配列宽4、删除行与列表格工具栏中的删除单元格按钮或表格删除单元格命令导入新课5分钟通过提问了解学生对网页设计规划的了解掌握学生课前预习情况15分钟主要容讲解及浏览90分钟课后任务1、网页文件、素材文件都同意在哪里进展管理？2、每次设置文本的格式很麻烦，可以通过什么工具来完成？3、一般请快些使用，属于什么路径？教学后记*天山职业技术学院课程教案教学流程教学容与过程教学方法学生活动时间分配新课导入在确定根本风格后，用什么工具来完成设计呢？讨论法思考5分钟预习考核1、网页三剑客是哪三个软件？都有什么功能和特点？2、如何对Dreamwe

27、aver CS3进展参数设置？3、什么是站点？是如何新建的？4、HTML和*HTML有什么呢区别？5、网页属性有哪些容？6、Dreamweaver CS3中插入工具栏包含哪些容？7、站点命名时应该注意哪些事项？8网页的组成元素有哪些？9、如何删除站点？10、图片如何插入到网页中？11、如何插入日期？12、什么是CSS13、HTML文档主体标记是什么？14、介绍作者、说明以及关键字时使用什么语句？15、水平线标记是什么？讨论法答复讨论15分钟讲授新课第2章Dreamweaver根本操作2.1使用 Dreamweaver制作简单网页1、网络的概念2、与网页的概念3、网页制作工具4、HTML语言5、

28、了解Dreamweaver CS3的安装并启动Dreamweaver CS36、Dreamweaver 工作界面7、规划站点8、创立本地站点9、管理站点10、创立一个站点11、站点的根本操作12、制作表格布局的首页讲授法多媒体辅助教学法笔记讨论归纳90分钟目标检测1、网页文件、素材文件都同意在哪里进展管理？2、每次设置文本的格式很麻烦，可以通过什么工具来完成？3、请一位同学到讲台前简单操作站点的建立。讨论法练习法分析练习改正20分钟归纳小结本节主要讲解Dreamweaver，让学生初步了解Dreamweaver的根本操作，通过系统、明确的学习掌握Dreamweaver根本的操作，为下面的课程做

29、好铺垫。归纳法思考推理判断10分钟课后任务说明1、总结、归纳所学知识点，完成课后习题2、预习3章节容笔记5分钟教学自评*天山职业技术学院课程教案首页课程名称网页设计与制作授课时间授课班级15W计信、15Z计信授课序次第四周第 4 次课授课题目第3章Dreamweaver中的多媒体对象学时数80授课类型R理论课R实训课一体课其他周学时数3+2学习教学标准知识、能力、素质知识目标：1、掌握在网页中插入并使用Flash动画、文本、视频；2、掌握Shockwave影片的插入方法并设置属性能力目标：1、制作带有视频和音乐的网页素质目标：1、培养学生良好的学习意识教学方法讲授法、多媒体辅助教学法、讨论法、

30、练习法、归纳法教学重难点教学重点：插入Flash动画、插入Flash文本、插入Flash视频、按钮教学难点：Shockwave影片的插入方法并设置属性参考资料或相关1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教学媒体多媒体教学过程课堂设计教学容、过程、方法时间分配第3章 Dreamweaver中的多媒体对象3.1制作带有Flash效果的网页Flash 动画是目前最流行的网页多媒体技术，在 Web 领域有广泛的应用。本节介绍如何使用 Dreamweaver

31、在网页中插入：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 文件格

32、式，用于在 Web 上浏览。它可以在 Dreamweaver 和浏览器窗口中播放，但是不能在 Flash 程序中编辑。在 Dreamweaver 中的 Flash 按钮和 Flash 文本功能使用的就是这种动画格式。.swt 格式 The Flash Generator template.swt：可以用来修改和替换.swf格式动画文件的信息，这种格式文件被使用在 Flash 按钮对象中，用户可以使用文字或修改模板，来创立自定义的swf 格式动画文件，并将其添加到文件中。2 、插入 Flash 动画使用Dreamweaver插入栏常用类别媒体列表中的 Flash 按钮，可以在网页中添加 Flas

33、h 对象。在文档中添加了 Flash 动画后，选择该文件，可以使用属性检查器查看和修改 Flash 动画属性。3、插入 Flash 按钮Dreamweaver 提供了自动生成 Flash 按钮和 Flash 文本功能，使网页设计者不用使用 Flash 软件也能在网页中获得 Flash 按钮和文本效果。使用插入栏常用媒体 Flash按钮，可以将 Flash 按钮添加到插入点。4 、插入Flash 文本使用插入栏常用媒体Flash 文本按钮，可以将Flash 文本添加到插入点。5、插入Flash对象1、插入Flash动画插入媒体Flash设置FLASH属性2、插入FLASH按钮插入媒体FLASH按

34、钮3.2制作带有公司视频和音乐的网页1、使用声音与视频本节介绍声音与视频根本概念，以及如何在网页中使用：声音，视频。2、声音与视频概述1声音概述声音是最常见的一种多媒体信息。声音文件有不同的类型和格式，如果要将声音文件添加到网页，有几种不同的方法。在确定采用哪一种格式和方法添加声音前，需要考虑几个因素：添加声音的目的、文件大小、声音品质和不同浏览器中的差异。PC机上的常用声音格式：.midi 或 .mid乐器数字接口格式用于器乐。.wavWaveform 扩展名格式文件具有较好的声音品质，许多浏览器都支持此类格式文件，且不要求插件。.mp3运动图像专家组音频，即 MPEG-音频层-3格式是一种

35、压缩格式，它可令声音文件明显缩小。.ra、.ram、.rpm 或 Real Audio 格式具有非常高的压缩品质，文件大小要小于 MP3，全部歌曲文件可以在合理的时间围下载。2视频概述：视频是信息含量最丰富的一种媒体。可以通过不同方式和使用不同格式将视频添加到网页。视频可下载给用户，或者对视频进展流式处理以便在下载它的同时播放它。PC机上较为常见的视频文件格式：.avi 格式，即音频视频交织格式，就是可以将视频和音频交织在一起进展同步播放。.mpeg、.mpg 或 .dat 格式，也就是运动图像专家组MPEG格式，它是运动图像压缩算法的国际标准。.ra、.rm 或 .rmvb 格式是 Real

36、Networks 公司开发的一种新型流式视频文件格式，它包含在RealNetworks公司所制定的音频视频压缩规RealMedia中，主要用来在低速率的广域网上实时传输活动视频影像。.mov 格式是 Apple 计算机公司开发的一种音频、视频文件格式，用于保存音频和视频信息，具有先进的音视频功能。3、插入其他媒体对象1、插入Shockwave影片Shockwave是一个很普及的浏览器的插件，可以在大多数常用的浏览器中进展播放插入媒体Shockwave2、插入Active*控件Active*控件是可以充当浏览器插件的可重复使用的组件。3、插入JAVA小程序。JAVA是一种编程语言，通过它可以开发

37、可嵌入WEB页中的小型应用程序applets导入新课5分钟通过提问了解学生对网页设计规划的了解掌握学生课前预习情况15分钟主要容讲解及浏览90分钟课后任务1、网页文件、素材文件都同意在哪里进展管理？2、每次设置文本的格式很麻烦，可以通过什么工具来完成？3、一般请快些使用，属于什么路径？教学后记*天山职业技术学院课程教案教学流程教学容与过程教学方法学生活动时间分配新课导入随着多媒体技术的开展，单纯的文本和图像以及无法满足网页多样化的需求，不仅能完善视觉、听觉效果还能增强交互性，如何在网页中带有Flash效果呢？讨论法思考5分钟预习考核1、Flash媒体对象有哪些？2、封面页有使用Flash的吗？

38、举例说明3、网页中播放视频是比拟常见的，如何在网页中插入一个Flash视频？4、网页上常见的音频格式有哪些？5、Shockwave是什么？是否经过压缩？6、如何插入Flash视频？7、如何插入Flash按钮？8、什么是Flash文本？9、标签是什么？10、如果想设定播放重复次数应该用什么？11、width、height分别指的是什么？12、什么是用来设置翻开页面时音乐是否自动播放的？13、如何插入Shockwave影片？14、bgsound标签有几个属性15、如何设置音乐下载？讨论法答复讨论15分钟讲授新课第3章Dreamweaver中的多媒体对象3.1制作带有Flash效果的网页1、Flas

39、h 动画格式2、插入 Flash 动画3、插入 Flash 按钮4、插入Flash 文本3.2制作带有公司视频和音乐的网页动1、使用声音与视频2、声音与视频概述3、插入其他媒体对象讲授法多媒体辅助教学法笔记讨论归纳90分钟目标检测1、在制作网页时，可以代替文本超或图片超的是什么？2、插入Flash视频中，消息参数的容是什么？3、讲一首音乐无限循环播放，代码是什么？讨论法练习法分析练习改正20分钟归纳小结本节主要解Dreamweaver中的多媒体对象，让学生掌握在网页中插入Flash动画、按钮、文本以及视频并应用于网页归纳法思考推理判断10分钟课后任务说明1、总结、归纳所学知识点，完成课后习题2

40、、预习4章节容笔记5分钟教学自评*天山职业技术学院课程教案首页课程名称网页设计与制作授课时间授课班级15W计信、15Z计信授课序次第五周第 5 次课授课题目第4章AP Div、时间轴与行为 4.1 4.2学时数80授课类型R理论课R实训课一体课其他周学时数3+2学习教学标准知识、能力、素质知识目标：1、掌握AP Div的创立、编辑方法，完成AP Div属性设置；2、掌握时间轴动画的制作方法能力目标：1、能够根据视觉需要进展AP Div与表格的互换操作并创立时间轴动画素质目标：1、培养学生良好的学习意识教学方法任务驱动法、多媒体辅助教学法、演示法、讨论法、练习法、归纳法教学重难点教学重点：AP

41、Div的创立、编辑方法、AP Div属性设置、教学难点：创立AP Div的时间轴动画参考资料或相关1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教学媒体多媒体教学过程课堂设计教学容、过程、方法时间分配1、AP Div的定义及作用；2、创立AP Div；3、创立嵌套AP Div及其作用；4、编辑AP Div选择单个AP Div、选择多个AP Div、调整AP Div大小、更改AP Div的堆叠顺序、显示和隐藏AP Div、移动AP Div、删除AP Div、重

42、命名AP Div；5、设置AP Div的属性CSS-P元素、左和上、宽和高、Z轴、可见性4种、背景图像、背景颜色、类、溢出4种、剪辑；6、AP Div与表格互换将选择单个AP Div、选择多个AP Div、调整AP Div大小、更改AP Div的堆叠顺序、显示和隐藏AP Div、移动AP Div、删除AP Div、重命名AP Div转为表格、将表格转为选择单个AP Div、选择多个AP Div、调整AP Div大小、更改AP Div的堆叠顺序、显示和隐藏AP Div、移动AP Div、删除AP Div、重命名AP Div；7、时间轴版面概述时间轴选择框、重新播放、后退、数字1、播放、Fps、自

43、动播放、循环、设置行为轨道、时间轴、关键帧、动画条；8、制作时间轴动画通过改变AP Div的位置、大小、可见性以及叠放顺序来创立动画5分钟15分钟90分钟20分钟10分钟课后任务1、第4章课后习题2、预习第5章教学后记*天山职业技术学院课程教案教学流程教学容与过程教学方法学生活动时间分配新课导入表格对于现实行、列表格方式的数据很有用，并且容易创立，AP Div网页元素定位技术可以更好地控制定位，减少所需代码数量，配合时间轴，可通过在不同的时间改变AP Div的位置、大小、可见性和叠放顺序，制作出动态效果讨论法思考5分钟预习考核1、什么是AP Div？它的作用是什么？2、什么是嵌套AP Div？

44、如何操作？3、AP Div属性中，什么是CSS-P元素？4、在将AP Div转换为表格之前应确保什么？5、什么是时间轴？时间轴面板的功能是什么？6、如何翻开AP元素面板？7、使用AP技术有什么好处？8、如何进展AP Div与表格的互换操作？9、讨论法答复讨论15分钟讲授新课讲授法多媒体辅助教学法任务驱动法笔记讨论归纳90分钟目标检测1、在网页制作过程中使用AP Div技术有什么好处？2、如何将表格转换为AP Div？3、做时间轴动画时有哪些小技巧？讨论法练习法分析练习改正20分钟归纳小结本节主要讲解，让学生了解AP Div网页元素的根本操作，通过系统、明确的学习掌握AP Div网页元素根本的操

45、作，掌握时间轴动画的制作方法。归纳法思考推理判断10分钟课后任务说明1、第4章课后习题2、预习第5章笔记5分钟教学自评*天山职业技术学院课程教案首页课程名称网页设计与制作授课时间授课班级15W计信、15Z计信授课序次第六周第 6 次课授课题目第4、5章4.3、5.1学时数80授课类型R理论课R实训课一体课其他周学时数3+2学习教学标准知识、能力、素质知识目标：1、了解行为的概念、组成和常用事件；2、掌握网页中表单及表单元素的制作；3、了解网页中检查表单的方法能力目标：1、会使用置行为制作交换图像、弹出信息、翻开浏览器窗口素质目标：1、培养学生良好的学习意识教学方法任务驱动法、多媒体辅助教学法、

46、演示法、讨论法、练习法、归纳法教学重难点教学重点：掌握行为面板组成并会添加行为；教学难点：掌握表单根本知识及元素制作并进展属性设置参考资料或相关1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教学媒体多媒体教学过程课堂设计教学容、过程、方法时间分配1、新课导入如何提升网页的视觉效果使网页容更为形象；2、预习考核通过课前提问的方式进展考核；3、讲授新课了解行为并能熟练操作，认识表单容并能够熟练运用；4、目标检测通过抽查学生笔记和课后作业检测学生学习容；5、课后归

47、纳通过本次课程使学生初步了解网页规划设计根底的相关容，使学生产生学习兴趣5分钟15分钟90分钟20分钟10分钟课后任务1、第4章课后习题2、预习第5章教学后记*天山职业技术学院课程教案教学流程教学容与过程教学方法学生活动时间分配新课导入*准备搞一些促销活动，希望在公司首页翻开的同时，弹出产品优惠容网页，当点击公司Logo时，能弹出公司介绍窗口，都是如何操作的？讨论法思考5分钟预习考核1、什么是行为？2、可以通过什么方法增强网页的视觉效果？3、中客户注册页面以及客户信息反应的页面都是用什么创立的？4、onclick是什么事件？5、交换图像是如何实现的？讨论法答复讨论15分钟讲授新课1、什么是行为

48、分别阐述事件和动作；2、行为面板的翻开窗口菜单中行为命令，可以将行为附加到页面元素，可以修改以前所附加行为的参数；3、行为面板的组成显示设置事件、显示所有事件、添加动作、删除事件、向上箭头按钮、向下箭头按钮、事件、显示事件；4、常用事件onclick鼠标单击时、ondblclick鼠标双击时、onmousedown按下鼠标时、onmouseup鼠标按下后松开鼠标时、onmouseover当鼠标移动到*对象围的上方时、onmousemove鼠标移动时、onmouseout当鼠标离开*对象围时、onkeypress当键盘上的*个键被按下并且释放时、onkeydown当键盘上*个按钮被按下时、onk

49、eyup当键盘上*个按钮键被按放开时、onerror出现错误时、onload页面容完成时、onunload当前页面将被改变时、onfocus当*个元素获得焦点时、onblur当前元素失去焦点时；5、如何添加、更改或删除行为；6、表单的根本认识HTML源代码、效劳器端应用程序或客户端脚本；7、认识表单对象并熟练操作，能够设置每一个表单对象属性文本框、复选框、单项选择按钮、列表/菜单、跳转菜单、图像域、文件域、隐藏域、按钮讲授法多媒体辅助教学法任务驱动法笔记讨论归纳90分钟目标检测1、在行为面板中效果的类别有哪些？2、对客户反应表，在提交时进展检查，根本信息中的所有文本选项都是必须的吗？讨论法练习

50、法分析练习改正20分钟归纳小结本节主要讲解行为和表单，让学生掌握的根本操作，通过系统、明确的学习掌握Dreamweaver根本的操作，为下面的课程做好铺垫归纳法思考推理判断10分钟课后任务说明1、第4章课后习题2、预习第5章笔记5分钟教学自评*天山职业技术学院课程教案首页课程名称网页设计与制作授课时间授课班级15W计信、15Z计信授课序次第七周第 7 次课授课题目第5章5.2、5.3学时数80授课类型R理论课R实训课一体课其他周学时数3+2学习教学标准知识、能力、素质知识目标：1、掌握网页中框架的建立、选择、保存的方法，能够对框架容进展创立2、框架与框架集的属性，能够数量设置其属性3、掌握框架

51、间的制作方法以及设置CSS属性的方法4、会设置超的CSS属性能力目标：1、会使框架容并熟练掌握框架间的，掌握CSS相关容素质目标：1、培养学生良好的学习意识教学方法任务驱动法、多媒体辅助教学法、演示法、讨论法、练习法、归纳法教学重难点教学重点：掌握框架间的制作方法、掌握设置CSS属性的方法；教学难点：掌握设置CSS属性的方法参考资料或相关1、网页设计与制作-Dreamweaver 实用教程，丁爱萍编，2015年7月2、网页设计与制作，董洁编，清华大学2012年8月；3、网页设计案例教程，朱艳丽编，清华大学2012年9月教学媒体多媒体教学过程课堂设计教学容、过程、方法时间分配1、新课导入统一网页

52、所有容一致，能睡着点击而发生变化；2、预习考核通过课前提问的方式进展考核3、讲授新课熟悉表单的操作，熟练框架操作4、目标检测通过抽查学生笔记和课后作业检测学生学习容5、课后归纳通过本次课程使学生初步了解网页规划设计根底的相关容，使学生产生学习兴趣5分钟15分钟90分钟20分钟10分钟课后任务1、第5章课后习题2、预习第6章教学后记*天山职业技术学院课程教案教学流程教学容与过程教学方法学生活动时间分配新课导入*公司产品相对较多，而且介绍文字也很多，如果一个产品就做一个单独页面的话工程量太大，要使左边容不变，右边的产品介绍容可以随着点击而发生变化，我们可以使用一个简单的方法来实现，它就是框架讨论法

53、思考5分钟预习考核1、框架都有哪些作用，他是有什么组成的？2、框架有哪些优、缺点？3、创立框架有哪两种方法？4、框架属性设置有哪些容？5、_blank、_parent、_self、_top的含义讨论法答复讨论15分钟讲授新课1、框架的根本知识框架的作用、框架的组成、框架的优点和缺点；2、创立框架集创立自定义框架集、创立预定义框架集；3、框架文件的新建或翻开新建空文档、翻开文档；4、选择框架与框架集在框架面板中选择框架与框架集、在文档窗口中选择框架与框架集、保存框架及框架集；5、设置框架属性边框、边框颜色、边框宽度、值、单位、行列选定围；6、设置框架集属性框架名称、源文件、边框、滚动、不能调整大小、边框颜色、边界宽度、边界高度；7、超框架模板的指定掌握木碧昂选项含义_blank在新的浏览器窗口中翻开的文档、_parent在显示的框架的父框架集中翻开的文档、_self在当前框架中翻开、_top在当前浏览器窗口中翻开的文档；8、CSS的作用外部样式表的优点；9、设置CSS属性文本型属性、背景属性、段落区块属性、方框边距与填充属性、边框属性、列表属性、定位属性、扩展属性；讲授法