网设计教学教案.docx

1、网设计教学教案 Coca-cola standardization office【ZZ5AB-ZZSYT-ZZ2C-ZZ682T-ZZT18】网设计教学教案Dreamweaver CS5网页设计教程配套教学教案第1讲课时内容Dreamweaver CS5网页制作基础授课时间150分钟课时4教学目标 了解规划网站的一般流程。 掌握Dreamweaver CS5的工作界面。 熟悉站点的创建与管理操作。教学重点 Dreamweaver CS5的工作界面组成。 创建站点和管理站点的操作。教学难点如何正确规划网站内容。教学设计1、教学思路：（1）介绍Dreamweaver CS5的界面和网页制作的流程；

2、（2）演示创建“千履千寻公司”站点的具体步骤，让学员了解如何创建站点；（3）演示管理“千履千寻公司”站点的操作，让学员熟悉站点的基本操作；（4）安排上机实训。2、教学手段：（1）结合相关案例讲解，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以再找一些已建立和制作完成的站点进行演示，便于学员理解。教学内容知识回顾：在前面讲解了Dreamweaver CS5的工作界面，以及站点的创建和管理，在实例制作过程中也涉及了站点中文件和文件夹的创建和管理操作。讨论问题：1、为什么要首先建立站点 2、一个网站最基本的功能有哪些内容大纲：

3、具体可结合本章的PPT课件进行配合讲解。规划“千履千寻公司”网站确定网站风格和布局网站需求分析规划站点内容Dreamweaver CS5的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性”面板创建“千履千寻公司”站点站点规划创建本地站点管理“千履千寻公司”站点打开站点编辑站点删除站点复制站点管理站点文件和文件夹实训创建“快乐旅游”站点实训目标专业背景操作思路疑难解析习题拓展知识课堂案例1创建站点 课堂案例2管理站点 上机实训创建“快乐旅游”站点小结1、掌握如何确定网站风格和布局、分析网站需求。2、掌握如何规划网站内容、认识Dreamweaver CS5的工作界面、创建与管理站点

4、等。3、本章内容虽然尚未涉及到网页设计和制作，但却是网页设计制作的基础。学员应认真理解和掌握，为后面制作网页打下基础。思考及作业想一想：站点的作用是什么站点有何意义举例日常浏览网页时遇到的站点，并分析其分为几大板块练一练：（1）查看Dreamweaver CS5中“表单”插入栏包含的内容。（2）在浮动面板组中将“资源”、“行为”和“组件”3个面板排列到同一个面板中（首先需要利用“窗口”菜单显示出这些面板）。（3）创建名为“wodewangzhan”的站点，将位置设置在D盘的“OK”文件夹中，然后通过编辑站点的方法将其重命名为“mynet”，最后删除站点并取消操作。（4）规划并构思一个美食站点，

5、创建一个导航草图，其中必须包含“菜谱”和“食材”两大板块，要求整个站点结构能满足一般的浏览和查询美食资源的要求。（5）在上一题的基础上，启动Dreamweaver CS5，创建该美食站点并在其中添加相应的文件夹和文件。第2讲课时内容输入与格式化文本授课时间120分钟课时3教学目标 掌握文本段落的输入与换行分段的操作。 掌握设置文本格式的方法。 熟悉项目列表的设置和水平线的创建方法。 了解添加滚动字幕的方法。教学重点 文本的输入、字体格式的设置、段落的设置等操作。 插入特殊文本对象、创建列表、设置水平线和添加滚动字幕等操作。教学难点如何设计文字版式，使页面舒适美观。教学设计1、教学思路：（1）演

6、示“公司简介”网页的具体制作步骤，让学员学习如何在Dreamweaver中输入文本并设置相应的格式；（2）演示“企业文化”网页的具体制作步骤，让学员了解如何在网页中插入其他对象；（3）安排上机实训。2、教学手段：（1）实例讲解过程穿插输入和设置的相关基础知识，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以再找一些文字类网页进行展示，与学员互动，讨论文字添加了何种格式，便于学员理解。教学内容知识回顾：在前面讲解了Dreamweaver CS5中文本的输入和格式的设置，以及其他对象的添加操作，在实例制作过程中还涉及了滚动字幕

7、的设置操作。讨论问题：1、设置网页文字的字体时应注意些什么 2、网页的制作一般将就图文结合，在什么情况下需要使用纯文字的网页内容大纲：具体可结合本章的PPT课件进行配合讲解。 制作“公司简介”页面输入文本设置文本字体格式设置段落格式制作“企业文化”页面插入特殊文本对象创建列表设置水平线添加滚动字幕实训制作“快乐旅游”网站首页实训目标专业背景操作思路疑难解析习题拓展知识课堂案例1“公司简介”页面 课堂案例2“企业文化”页面 上机实训制作“快乐旅游”网站首页小结1、掌握输入和编辑文本的操作。2、掌握水平线的插入以及滚动字幕的创建等操作。3、本章是网页制作的基础内容，只有熟练掌握文本的各种设置方法后

8、，才能创建出多姿多彩的网页效果。思考及作业想一想：为什么在制作网页时常使用默认的字体在使用一些特殊字体的文字时，为何需要将其制作为图片 练一练：（1）打开提供的“”网页，通过分段、换行和插入连续空格等操作输入网页中的文本内容。（2）利用CSS格式为各段文本设置不同的格式。（3）在第一段文本后插入水平线。（4）在倒数第二段文本后分段，输入“最近更新：”文本并设置格式，然后插入日期，要求保存时自动更新。（5）将更新日期的上一段文本设置为滚动字幕，滚动方式为“scroll”，速度为“15”。第3讲课时内容插入图像和多媒体对象授课时间90分钟课时2教学目标 掌握在网页中插入与编辑图像的各种操作。 熟悉

9、美化与优化图像的方法。 掌握插入多媒体插件、SWF动画和FLV视频的方法。 了解添加网页背景音乐的方法。教学重点 图像的插入、编辑、美化与优化等操作。 多媒体插件的使用。教学难点如何在网页中设计图像与多媒体。教学设计1、教学思路：（1）演示“关于我们”页面的具体步骤，让学员了解如何在网页中使用图片；（2）演示“新品展台”网页的具体步骤，让学员了解如何添加多媒体插件，如何在网页中使用多媒体；（3）安排上机实训。2、教学手段：（1）实例讲解过程穿插使用其他多媒体的基础知识，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以在网上

10、找一些现成的网站进行展示，吸引学员注意，便于学员理解，拓宽学员思维。教学内容知识回顾：在前面讲解了Dreamweaver CS5中图像和多媒体的应用，在实例制作过程中也涉及了添加背景音乐的操作。讨论问题：1、为什么需要在网页中添加图像 2、在设置鼠标经过图像时应注意些什么内容大纲：具体可结合本章的PPT课件进行配合讲解。制作“关于我们”页面插入与编辑图像美化与优化图像创建鼠标经过图像制作“新品展台”网页添加多媒体插件添加背景音乐插入SWF动画插入FLV视频实训制作“旅游导航”网页实训目标专业背景操作思路疑难解析习题拓展知识课堂案例1“关于我们”页面 课堂案例2“新品展台”网页 上机实训“旅游导

11、航”网页小结1、掌握在网页中插入和编辑图像的操作。2、掌握设置鼠标经过图像、插入多媒体插件、插入页面背景音乐、插入SWF动画和插入FLV视频等操作。3、本章内容同样是网页制作的基础，只有掌握了这些对象的插入与使用方法，才能制作出内容丰富的网页。思考及作业想一想：图像的使用在网页中通常起什么作用怎样才能快速在网页中添加多媒体文件练一练：（1）打开“”网页，将提供的“”、“”和“”图像插入到网页中，设置边框为“1”。（2）在“我的动态”图像下插入“”图像，设置对齐方式为“左对齐”，缩小图像尺寸，增加水平边距，然后适当降低图像品质。（3）分别在“最新留言”图像和“动感相册”图像下插入多媒体插件和SW

12、F动画，其中插件的尺寸为“53845”。第4讲课时内容布局网页版面授课时间150分钟课时4教学目标 掌握在网页中插入与编辑表格的方法。 熟悉使用AP Div布局网页的方法。 了解框架和框架集在网页中的应用。教学重点 使用表格布局网页、使用AP Div布局网页、使用框架布局网页。 表格、AP Div和框架的使用。教学难点如何在制作网页的过程综合使用3种网页布局方式。教学设计1、教学思路：（1）演示“产品展示”网页布局的具体步骤，让学员理解表格的作用与设置；（2）演示“千履千寻”网页布局的具体步骤，让学员理解AP Div的概念和使用方法；（3）演示“公司公告”网页布局的具体步骤，让学员理解框架和框

13、架集的概念和属性的设置；（4）安排上机实训。2、教学手段：（1）实例讲解过程穿插与网页布局相关的基础知识，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以再找一些包含各种布局的网页进行展示，便于学员理解。教学内容知识回顾：在前面讲解了Dreamweaver CS5中使用表格、AP Div和框架布局的操作，在实例制作过程中也接触了在表格和AP Div中插入内容的操作。讨论问题：1、除了介绍的3种布局方式，还有其他什么布局方式 2、不同的布局方式常用在哪种类型的网页中内容大纲：具体可结合本章的PPT课件进行配合讲解。使用表格布

14、局“产品展示”网页创建表格调整表格结构设置表格和单元格属性在表格中插入内容利用AP Div制作千履千寻网站首页创建AP Div选择AP Div设置AP Div尺寸移动AP Div对齐AP Div更改AP Div堆叠顺序在AP Div插入各种元素使用框架制作“公司公告”网页创建框架集与框架保存框架集与框架删除框架设置框架集与框架属性制作框架网页实训制作“景点介绍”网页实训目标专业背景操作思路疑难解析习题拓展知识课堂案例1使用表格布局“产品展示”网页 课堂案例2利用AP Div制作首页 课堂案例3使用框架制作“公司公告”网页 上机实训制作“景点介绍”网页小结1、掌握网页布局的几种方式。2、掌握创建

15、表格、设置表格、在表格中插入内容、创建AP Div、设置AP Div、创建框架与框架集、编辑框架与框架集等操作。3、本章内容是学习网页制作的重点和核心内容之一，对于掌控整个网页版面和设计风格有至关重要的作用，读者应认真学习和掌握，并达到灵活运用和举一反三的程度。思考及作业想一想：随着网络的发展，程序语言也在发展，网页布局的方式方法也在改变，如今常用的网页布局方式有哪些常用的与设计网页相关的编程语言有哪些练一练：（1）创建“”网页，在其中输入并设置“我的心情客栈”文本，并绘制4个AP Div对象，在其中插入提供的4张图片。（2）创建“”网页，插入132表格，合并最后一行单元格，并在其中插入14嵌

16、套表格，设置表格背景颜色并在各单元格中输入文本。（3）创建“上方固定”框架网页，在上方的框架中指定“”网页，在下方的框架中指定“”网页，适当调整后保存并预览效果。第5讲课时内容在网页中创建超链接授课时间120分钟课时3教学目标 了解超链接的组成和种类。 掌握文本超链接、图像超链接、外部超链接和图像热点超链接的创建方法。 熟悉锚点超链接、电子邮件超链接、文件超链接和空链接的创建方法。 了解脚本链接的插入方法。教学重点 文本超链接、图像超链接、外部超链接、图像热点超链接的创建。 锚点超链接、电子邮件超链接、文件超链接、空链接及脚本链接的创建。教学难点如何在设置网页时为不同的元素添加合适的链接。教学

17、设计1、教学思路：（1）演示“公司地图”网页的具体步骤，让学员理解文本超链接、图像超链接、外部超链接和图像热点超链接的作用；（2）演示“给我们留言”网页的具体步骤，让学员理解锚点超链接、电子邮件超链接、文件超链接、空链接和脚本链接的作用；（3）安排上机实训。2、教学手段：（1）实例讲解过程穿插设置链接属性的相关基础知识，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可在网络中搜索一些门户网站，为学员展示其中的链接，与学员一起分析链接方式，让学员深入了解。教学内容知识回顾：在前面讲解了Dreamweaver CS5各种超链接的

18、使用，在实例制作过程中也接触了文件下载链接和空链接的使用。讨论问题：1、在网页中经常用到的链接类型有哪些 2、超链接还有哪些特殊用途内容大纲：具体可结合本章的PPT课件进行配合讲解。制作“公司地图”网页认识超链接创建文本超链接创建图像超链接创建外部超链接创建图像热点超链接制作“给我们留言”网页创建锚点超链接创建电子邮件超链接创建文件超链接创建空链接插入脚本链接实训制作“精品线路”网页实训目标专业背景操作思路疑难解析习题拓展知识课堂案例1“公司地图”网页 课堂案例2“给我们留言”网页 上机实训“精品线路”网页小结1、掌握文本超链接、图像超链接、外部超链接、图像热点超链接、锚点超链接、电子邮件超链

19、接、文件超链接、空链接和脚本链接的创建操作。2、本章内容是制作网页的基础，读者应认真学习和掌握，并灵活运用到各种网页上。思考及作业想一想：还有没有其他链接方式怎样可快速提高链接操作的效率练一练：（1）打开“”网页，将上方的“心情客栈”文本链接到“”网页。（2）利用热点工具将“进入主页ENTER”和日志（圆形）分别连接到“”和“”网页。（3）利用电子邮件链接将“邮件传情”文本链接到“”邮箱。（4）分别利用各种脚本链接和空链接，实现“设为主页”、“收藏我吧”和“关闭窗口”文本对应的互动功能，其中网址为“”，收藏名称为“我的世界”。第6讲课时内容CSS与盒子模型授课时间120分钟课时3教学目标 了解

20、CSS和盒子模型的概念和作用。 掌握CSS样式的创建、设置、编辑和删除等方法。 熟悉使用CSS+Div布局网页的方法。教学重点 CSS属性的认识、样式的设置，盒子模型的使用。 利用CSS+Div布局网页。教学难点如何结合CSS与Div制作网页。教学设计1、教学思路：（1）演示“热销精品”网页的具体步骤，让学员理解什么是CSS，并能使用CSS制作网页；（2）演示“消费者保障”网页的具体步骤，让学员认识盒子模型，并会利用CSS+Div制作网页；（3）安排上机实训。2、教学手段：（1）实例讲解过程穿插相关CSS属性设置的基础知识，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举

21、例说明。3、教学资料及要求：除教材中的实例外，可以再找设置好CSS的网页设计作品或使用了盒子模型的网页进行展示，便于学员理解。教学内容知识回顾：在前面讲解了Dreamweaver CS5CSS的使用与设置，以及盒子模型的优势和使用，在实例制作过程中也对CSS属性窗口中不同的属性参数进行了讲解。讨论问题：1、为什么要使用CSS设置网页中的内容的属性 2、Div标签是什么，常见的Div标签有哪些内容大纲：具体可结合本章的PPT课件进行配合讲解。制作“热销精品”网页认识CSS样式样式的各种属性设置创建与应用CSS样式编辑CSS样式删除CSS样式制作“消费者保障”网页认识盒子模型盒子模型的优势利用CS

22、S+Div布局网页实训制作“驴友攻略”网页实训目标专业背景操作思路疑难解析习题拓展知识课堂案例1“热销精品”网页 课堂案例2“消费者保障”网页 上机实训“驴友攻略”网页小结1、掌握CSS样式以及Div标签的操作。2、掌握CSS样式的新建、应用、编辑和修改，盒子模型的结构和优势，Div标签的插入以及对应CSS样式规则的设置等知识。3、本章内容与当前网页制作的主流方式紧密相关，读者应认真学习和掌握，为实际工作中制作网页打下坚实的基础。思考及作业想一想：网页中常见的CSS样式有哪些你能例举出见到过的盒子模型么盒子模型一般应用在什么地方练一练：（1）打开提供的“”网页，插入42表格，合并第一行和第二行

23、单元格，合并第一列的第三行和第四行单元格，然后在该单元格中插入41的嵌套表格。（2）依次在表格和嵌套表格的各单元格中输入文本。（3）通过创建多个类CSS样式为输入的文本应用相应的样式规则。（4）通过创建复合内容CSS样式为嵌套表格中的超链接文本（空链接）设置访问前后和鼠标指针指向时等文本状态的样式。第7讲课时内容模板和库的应用授课时间90分钟课时2教学目标 了解“资源”面板的使用方法。 掌握模板的创建、应用和编辑操作。 熟悉模板的删除和更新等管理方法。 熟悉库文件的创建、应用、编辑和更新操作。教学重点 模板的创建、编辑、应用与管理操作。 库文件的创建、应用、编辑、更新和分离等操作。教学难点如何

24、应用模板中的相关内容并更改。教学设计1、教学思路：（1）演示“客户交流”网页的具体步骤，让学员认识并了解模板，并学会如何利用模板创建网页；（2）演示“产品介绍”网页的具体步骤，让学员认识“资源”面板，并了解库文件的使用；（3）安排上机实训。2、教学手段：（1）实例讲解过程穿插相关基础操作的知识，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以再从模板创建不同的网页，并往其中添加库文件，加深学员印象，巩固所学知识。教学内容知识回顾：在前面讲解了Dreamweaver CS5中模板和“资源”面板中库文件的使用和操作，在实例制作

25、过程中讲解了模板中不同类型的可编辑区域的设置。讨论问题：1、使用模板创建网页有什么好处 2、应如何有效地管理“资源”面板中的库文件内容大纲：具体可结合本章的PPT课件进行配合讲解。制作“客户交流”网页创建模板编辑模板应用与管理模板制作“产品介绍”网页认识“资源”面板创建库文件应用库文件编辑库文件更新库文件分离库文件实训制作“旅游相册”网页实训目标专业背景操作思路疑难解析习题拓展知识课堂案例1“客户交流”网页 课堂案例2“产品介绍”网页 上机实训“旅游相册”网页小结1、掌握从模板创建网页，以及模板的编辑、应用、更新、删除和脱离等操作。2、掌握“资源”面板的使用、库文件的创建、应用、编辑、更新和分

26、离等操作。3、对于本章的内容，读者应尽量掌握，以便在实际工作中灵活运用，提高网站的制作效率。思考及作业想一想：使用模板创建网页的益处和不益之处是什么如何通过更改库文件，从而快速更改网页文件练一练：（1）打开“”网页，保存为模板，并在空白单元格中插入可编辑区域。（2）根据上一步创建的模板来创建网页，并利用“资源”模板制作库文件，表格左侧为提供的“”图像，右侧为输入的文本，并适当设置格式。（3）将新建的网页保存为“”，并在可编辑区域中插入31表格，并在每行表格中应用创建的库文件，最后保存并预览网页效果。第8讲课时内容表单和行为的应用授课时间120分钟课时3教学目标 了解表单的作用。 掌握表单的创建

27、以及在表单中插入文本字段、按钮和复选框等对象的方法。 熟悉在表单中插入文件域、图像域和字段集等对象的方法。 了解并熟悉行为的组成、作用、添加和编辑等基本操作。 掌握交换图像行为和效果行为的应用教学重点 各种表单元素的添加。 行为的基础知识和常用行为的使用方法。教学难点如何在设计作品过程中灵活应用行为命令。教学设计1、教学思路：（1）演示“会员注册”网页的具体步骤，让学员了解表单的作用与添加操作；（2）演示“品牌展厅”网页的具体步骤，让学员理解行为的作用，了解常用行为的使用；（3）安排上机实训。2、教学手段：（1）实例讲解过程穿插表单通用属性的基础知识，实例结束后进行总结和疑难提问；（2）对于重

28、点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以在网络中搜索相关注册页面等与表单和行为有关的网页，与学员互动进行分析，加深学员的理解。教学内容知识回顾：在前面讲解了Dreamweaver CS5表单与行为的添加与使用方法，在实例制作过程中涉及了对表单属性的讲解，并介绍了行为的组成与事件的作用。讨论问题：1、表单除了用在注册类网页中，还可用于什么网页 2、你知道的行为命令还有哪些内容大纲：具体可结合本章的PPT课件进行配合讲解。制作“会员注册”网页表单的基础操作在表单中添加各种元素制作“品牌展厅”网页关于行为的基础知识常用行为的使用方法实训制作“驴友交流”网页实训目

29、标专业背景操作思路疑难解析习题拓展知识课堂案例1“会员注册”网页 课堂案例2“品牌展厅”网页 上机实训“驴友交流”网页小结1、了解Dreamweaver中表单和行为的作用。2、掌握表单的创建、各种表单元素的添加和管理、行为的添加、编辑和删除等操作。3、对于本章的内容，读者可以适当了解并熟悉，尝试能按照书中介绍的知识使用表单和行为。思考及作业想一想：不同类型的网站中行为命令的应用领域不同，社交类网站与门户类网站的行为命令有何不同常用的表单有哪些练一练：（1）打开“”网页，在空白单元格中创建表单，然后在创建的表单区域依次创建“大名：”文本字段、“暗号：”密码字段和“进入”按钮。（2）选择网页右上方的“”文本，为其添加“弹出信息”行为，信息内容可自行设置，事件需要更改为“onClick”。（3）保存并预览网页。尝试单击“”文本区域，查看弹出的对话框内容。第9讲课时内容制作ASP动态网页授课时间150分钟课时4教学目标 了解动态网页的基础、开发流程和Web服务器。 熟悉II