《网 设计教学教案》由会员分享，可在线阅读，更多相关《网 设计教学教案（33页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS5 网页设计教程配套教学教案第1 讲课时内容Dreamweaver CS5 网页制作基础授课时间 150 分钟课时4了解规划网站的一般流程。教学目标掌握 Dreamweaver CS5 的工作界面。熟悉站点的创建与管理操作。教学重点Dreamweaver CS5 的工作界面组成。创建站点和管理站点的操作。教学难点 如何正确规划网站内容。1、教学思路：（1）介绍 Dreamweaver CS5 的界面和网页制作的流程；（2）演示创建“千履千寻公司”站点的具体步骤，让学员了解如何创建站点；（3）演示管理“千履千寻公司”站点的操作，让学员教学设计熟悉站点的基本操作；（4）
2、安排上机实训。2、教学手段：（1）结合相关案例讲解，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以再找一些已建立和制作 完成的站点进行演示，便于学员理解。教学内容知识回顾：在前面讲解了 Dreamweaver CS5 的工作界面，以及站点的创建和管理，在实例制作过程中也涉及了站点中文件和文件夹的创建和管理操作。讨论问题：1、为什么要首先建立站点？2、一个网站最基本的功能有哪些？内容大纲：具体可结合本章的 PPT 课件进行配合讲解。?规划“千履千寻公司”网站确定网站风格和布局网站需求分析规划站点内容?Dreamweaver
3、 CS5 的工作界面界面概述标题栏 菜单栏文档工具栏插入栏浮动面板组状态栏属性”面板?创建“千履千寻公司”站点站点规划创建本地站点?管理“千履千寻公司”站点打开站点编辑站点删除站点复制站点管理站点文件和文件夹?实训创建“快乐旅游”站点实训目标专业背景操作思路?疑难解析?习题拓展知识课堂案例 1创建站点课堂案例 2管理站点上机实训创建“快乐旅游”站点1、掌握如何确定网站风格和布局、分析网站需求。2、掌握如何规划网站内容、认识Dreamweaver CS5 的工作界面、创建小结与管理站点等。3、本章内容虽然尚未涉及到网页设计和制作，但却是网页设计制作的 基础。学员应认真理解和掌握，为后面制作网页打
4、下基础。想一想：站点的作用是什么？站点有何意义？举例日常浏览网页时遇到的 站点，并分析其分为几大板块？练一练：（1） 查看 Dreamweaver CS5 中“表单”插入栏包含的内容。（2） 在浮动面板组中将“资源”、“行为”和“组件” 3 个面板排思考及作业列到同一个面板中（首先需要利用“窗口”菜单显示出这些面板）。（3） 创建名为“wodewangzhan”的站点，将位置设置在 D 盘的“OK”文件夹中，然后通过编辑站点的方法将其重命名为“ mynet”，最后删除站点并取消操作。（4） 规划并构思一个美食站点，创建一个导航草图，其中必须包 含“菜谱”和“食材”两大板块，要求整个站点结构能满
5、足一般的浏 览和查询美食资源的要求。（5） 在上一题的基础上，启动 Dreamweaver CS5，创建该美食站点并在其中添加相应的文件夹和文件。第2 讲课时内容输入与格式化文本授课时间 120 分钟课时3掌握文本段落的输入与换行分段的操作。教学目标掌握设置文本格式的方法。熟悉项目列表的设置和水平线的创建方法。了解添加滚动字幕的方法。文本的输入、字体格式的设置、段落的设置等操作。教学重点插入特殊文本对象、创建列表、设置水平线和添加滚动字幕等操 作。教学难点 如何设计文字版式，使页面舒适美观。1、教学思路：（1）演示“公司简介”网页的具体制作步骤，让学员学习如何在 Dreamweaver 中输入
6、文本并设置相应的格式；（2）演示“企业文化”网页的具体制作步骤，让学员了解如何在网页中插入其他对象；（3）安排上机实训。教学设计 2、教学手段：（1）实例讲解过程穿插输入和设置的相关基础知识，实例结束后进行总结和疑难提问；（2）对于重点操作可以着重演示，并加强举例说明。3、教学资料及要求：除教材中的实例外，可以再找一些文字类网页进行展示，与学员互动，讨论文字添加了何种格式，便于学员理解。教学内容知识回顾：在前面讲解了 Dreamweaver CS5 中文本的输入和格式的设置，以及其他对象的添加操作，在实例制作过程中还涉及了滚动字幕的设置操作。讨论问题：1、设置网页文字的字体时应注意些什么？2、
7、网页的制作一般将就图文结合，在什么情况下需要使用纯文字的网页？内容大纲：具体可结合本章的 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）分别在“最新留言”图像和“动感相
12、册”图像下插入多媒体插件和 SWF 动画，其中插件的尺寸为“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、不同的布局方式常用在哪种类型的
14、网页中？内容大纲：具体可结合本章的 PPT 课件进行配合讲解。?使用表格布局“产品展示”网页创建表格调整表格结构设置表格和单元格属性在表格中插入内容?利用AP Div 制作千履千寻网站首页创建 AP Div 选择 AP Div设置 AP Div 尺寸移动 AP Div对齐 AP Div更改 AP Div 堆叠顺序 在 AP Div 插入各种元素?使用框架制作“公司公告”网页创建框架集与框架保存框架集与框架删除框架设置框架集与框架属性制作框架网页?实训制作“景点介绍”网页实训目标专业背景操作思路?疑难解析?习题拓展知识课堂案例 1使用表格布局“产品展示”网页课堂案例 2利用 AP Div 制作首页课堂案例 3使用框架制作“公司公告”网页上机实训制作“景点介绍”网页1、掌握网页布局的几种方式。小结2、掌握创建表格、设置表格、在表格中插入内容、创建 AP Div、设置 AP Div、创建
