网页设计教学教案小学教育小学学案小学教育小学学案.pdf
《网页设计教学教案小学教育小学学案小学教育小学学案.pdf》由会员分享,可在线阅读,更多相关《网页设计教学教案小学教育小学学案小学教育小学学案.pdf(33页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、Dreamweaver CS5 网页设计教程 配套教学教案 第1 讲 课时内容 Dreamweaver CS5网页制作基础 授课时间 150 分钟 课时 4 教学目标 了解规划网站的一般流程。掌握 Dreamweaver CS5的工作界面。熟悉站点的创建与管理操作。教学重点 Dreamweaver CS5的工作界面组成。创建站点和管理站点的操作。教学难点 如何正确规划网站内容。教学设计 1、教学思路:(1)介绍 Dreamweaver CS5 的界面和网页制作的流程;(2)演示创建“千履千寻公司”站点的具体步骤,让学员了解如何创建站点;(3)演示管理“千履千寻公司”站点的操作,让学员熟悉站点的
2、基本操作;(4)安排上机实训。2、教学手段:(1)结合相关案例讲解,实例结束后进行总结和疑难提问;(2)对于重点操作可以着重演示,并加强举例说明。3、教学资料及要求:除教材中的实例外,可以再找一些已建立和制作完成的站点进行演示,便于学员理解。教学内容 知识回顾:在前面讲解了 Dreamweaver CS5的工作界面,以及站点的创建和管理,在实例制作过程中也涉及了站点中文件和文件夹的创建和管理操作。讨论问题:1、为什么要首先建立站点 2、一个网站最基本的功能有哪些 内容大纲:具体可结合本章的 PPT 课件进行配合讲解。规划“千履千寻公司”网站 1.1.1 确定网站风格和布局 1.1.2 网站需求
3、分析 1.1.3 规划站点内容 CS5 的工作界面 1.2.1 界面概述 1.2.2 标题栏 1.2.3 菜单栏 1.2.4 文档工具栏 1.2.5 插入栏 1.2.6 浮动面板组 1.2.7 状态栏 1.2.8 “属性”面板 创建“千履千寻公司”站点 1.3.1 站点规划 1.3.2 创建本地站点 管理“千履千寻公司”站点 1.4.1 打开站点 1.4.2 编辑站点 1.4.3 删除站点 1.4.4 复制站点 1.4.5 管理站点文件和文件夹 实训创建“快乐旅游”站点 1.5.1 实训目标 1.5.2 专业背景 1.5.3 操作思路 疑难解析 习题 拓展知识 课堂案例 1创建站点 课堂案例
4、2管理站点 上机实训创建“快乐旅游”站点 的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点内容的工作界面界面概述标题栏菜单栏文档工具
5、栏插入栏浮动面板组状态栏属性面板创建千履千寻公司小结 1、掌握如何确定网站风格和布局、分析网站需求。2、掌握如何规划网站内容、认识 Dreamweaver CS5 的工作界面、创建与管理站点等。3、本章内容虽然尚未涉及到网页设计和制作,但却是网页设计制作的基础。学员应认真理解和掌握,为后面制作网页打下基础。思考及作业 想一想:站点的作用是什么站点有何意义举例日常浏览网页时遇到的站点,并分析其分为几大板块 练一练:(1)查看 Dreamweaver CS5中“表单”插入栏包含的内容。(2)在浮动面板组中将“资源”、“行为”和“组件”3 个面板排列到同一个面板中(首先需要利用“窗口”菜单显示出这些
6、面板)。(3)创建名为“wodewangzhan”的站点,将位置设置在 D 盘的“OK”文件夹中,然后通过编辑站点的方法将其重命名为“mynet”,最后删除站点并取消操作。(4)规划并构思一个美食站点,创建一个导航草图,其中必须包含“菜谱”和“食材”两大板块,要求整个站点结构能满足一般的浏览和查询美食资源的要求。(5)在上一题的基础上,启动 Dreamweaver CS5,创建该美食站点并在其中添加相应的文件夹和文件。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让
7、学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司第2 讲 课时内容 输入与格式化文本 授课时间 120 分钟 课时 3 教学目标 掌握文本段落的输入与换行分段的操作。掌握设置文本格式的方法。熟悉项目列表的设置和水平线的创
8、建方法。了解添加滚动字幕的方法。教学重点 文本的输入、字体格式的设置、段落的设置等操作。插入特殊文本对象、创建列表、设置水平线和添加滚动字幕等操作。教学难点 如何设计文字版式,使页面舒适美观。教学设计 1、教学思路:(1)演示“公司简介”网页的具体制作步骤,让学员学习如何在Dreamweaver中输入文本并设置相应的格式;(2)演示“企业文化”网页的具体制作步骤,让学员了解如何在网页中插入其他对象;(3)安排上机实训。2、教学手段:(1)实例讲解过程穿插输入和设置的相关基础知识,实例结束后进行总结和疑难提问;(2)对于重点操作可以着重演示,并加强举例说明。3、教学资料及要求:除教材中的实例外,
9、可以再找一些文字类网页进行展示,与学员互动,讨论文字添加了何种格式,便于学员理解。教学内容 知识回顾:在前面讲解了 Dreamweaver CS5中文本的输入和格式的设置,以及其他对象的添加操作,在实例制作过程中还涉及了滚动字幕的设置操作。讨论问题:1、设置网页文字的字体时应注意些什么 2、网页的制作一般将就图文结合,在什么情况下需要使用纯文字的网页 内容大纲:具体可结合本章的 PPT 课件进行配合讲解。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让学员了解如何创
10、建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司 制作“公司简介”页面 2.1.1 输入文本 2.1.2 设置文本字体格式 2.1.3 设置段落格式 制作“企业文化”页面 2.2.1 插入特殊文本对象 2.2.2 创建列表 2.2.3
11、 设置水平线 2.2.4 添加滚动字幕 实训制作“快乐旅游”网站首页 2.3.1 实训目标 2.3.2 专业背景 2.3.3 操作思路 疑难解析 习题 拓展知识 课堂案例 1“公司简介”页面 课堂案例 2“企业文化”页面 上机实训制作“快乐旅游”网站首页 小结 1、掌握输入和编辑文本的操作。2、掌握水平线的插入以及滚动字幕的创建等操作。3、本章是网页制作的基础内容,只有熟练掌握文本的各种设置方法后,才能创建出多姿多彩的网页效果。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的
12、具体步骤让学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司思考及作业 想一想:为什么在制作网页时常使用默认的字体在使用一些特殊字体的文字时,为何需要将其制作为图片 练一练:(1)打开提供的“”网页,通过分段、换行和插入连
13、续空格等操作输入网页中的文本内容。(2)利用 CSS 格式为各段文本设置不同的格式。(3)在第一段文本后插入水平线。(4)在倒数第二段文本后分段,输入“最近更新:”文本并设置格式,然后插入日期,要求保存时自动更新。(5)将更新日期的上一段文本设置为滚动字幕,滚动方式为“scroll”,速度为“15”。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再
14、找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司第3 讲 课时内容 插入图像和多媒体对象 授课时间 90 分钟 课时 2 教学目标 掌握在网页中插入与编辑图像的各种操作。熟悉美化与优化图像的方法。掌握插入多媒体插件、SWF 动画和 FLV视频的方法。了解添加网页背景音乐的方法。教学重点 图像的插入、编辑、美化与优化等操作。多媒体插件的使用
15、。教学难点 如何在网页中设计图像与多媒体。教学设计 1、教学思路:(1)演示“关于我们”页面的具体步骤,让学员了解如何在网页中使用图片;(2)演示“新品展台”网页的具体步骤,让学员了解如何添加多媒体插件,如何在网页中使用多媒体;(3)安排上机实训。2、教学手段:(1)实例讲解过程穿插使用其他多媒体的基础知识,实例结束后进行总结和疑难提问;(2)对于重点操作可以着重演示,并加强举例说明。3、教学资料及要求:除教材中的实例外,可以在网上找一些现成的网站进行展示,吸引学员注意,便于学员理解,拓宽学员思维。教学内容 知识回顾:在前面讲解了 Dreamweaver CS5中图像和多媒体的应用,在实例制作
16、过程中也涉及了添加背景音乐的操作。讨论问题:1、为什么需要在网页中添加图像 2、在设置鼠标经过图像时应注意些什么 内容大纲:具体可结合本章的 PPT 课件进行配合讲解。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可
17、结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司 制作“关于我们”页面 3.1.1 插入与编辑图像 3.1.2 美化与优化图像 3.1.3 创建鼠标经过图像 制作“新品展台”网页 3.2.1 添加多媒体插件 3.2.2 添加背景音乐 3.2.3 插入 SWF 动画 3.2.4 插入 FLV 视频 实训制作“旅游导航”网页 3.3.1 实训目标 3.3.2 专业背景 3.3.3 操作思路 疑难解析 习题 拓展知识 课堂案例 1“关于我们”页面 课堂案例 2“新品展台”网页
18、 上机实训“旅游导航”网页 小结 1、掌握在网页中插入和编辑图像的操作。2、掌握设置鼠标经过图像、插入多媒体插件、插入页面背景音乐、插入 SWF 动画和插入 FLV视频等操作。3、本章内容同样是网页制作的基础,只有掌握了这些对象的插入与使用方法,才能制作出内容丰富的网页。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进
19、行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司思考及作业 想一想:图像的使用在网页中通常起什么作用怎样才能快速在网页中添加多媒体文件 练一练:(1)打开“”网页,将提供的“”、“”和“”图像插入到网页中,设置边框为“1”。(2)在“我的动态”图像下插入“”图像,设置对齐方式为“左对齐”,缩小图像尺寸,增加水平边距,然后适当降低图像品质。(3)分别在“最新留言”图像和
20、“动感相册”图像下插入多媒体插件和 SWF 动画,其中插件的尺寸为“538 45”。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分析规划站点
21、内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司第4 讲 课时内容 布局网页版面 授课时间 150 分钟 课时 4 教学目标 掌握在网页中插入与编辑表格的方法。熟悉使用 AP Div 布局网页的方法。了解框架和框架集在网页中的应用。教学重点 使用表格布局网页、使用 AP Div 布局网页、使用框架布局网页。表格、AP Div 和框架的使用。教学难点 如何在制作网页的过程综合使用 3 种网页布局方式。教学设计 1、教学思路:(1)演示“产品展示”网页布局的具体步骤,让学员理解表格的作用与设置;(2)演示“千履千寻”网页布局的具体步骤,让学员理解 AP D
22、iv 的概念和使用方法;(3)演示“公司公告”网页布局的具体步骤,让学员理解框架和框架集的概念和属性的设置;(4)安排上机实训。2、教学手段:(1)实例讲解过程穿插与网页布局相关的基础知识,实例结束后进行总结和疑难提问;(2)对于重点操作可以着重演示,并加强举例说明。3、教学资料及要求:除教材中的实例外,可以再找一些包含各种布局的网页进行展示,便于学员理解。教学内容 知识回顾:在前面讲解了 Dreamweaver CS5中使用表格、AP Div 和框架布局的操作,在实例制作过程中也接触了在表格和 AP Div 中插入内容的操作。讨论问题:1、除了介绍的 3 种布局方式,还有其他什么布局方式 2
23、、不同的布局方式常用在哪种类型的网页中 内容大纲:具体可结合本章的 PPT 课件进行配合讲解。的工作界面熟悉站点的创建与管理操作的工作界面组成教学重点创建站点和管理站点的操作教学难点如何正确规划网站内容教学思路介绍的界面和网页制作的流程演示创建千履千寻公司站点的具体步骤让学员了解如何创建站点演示结束后进行总结和疑难提问对于重点操作可以着重演示并加强举例说明教学资料及要求除教材中的实例可以再找一些已建立和制作完成的站点进行演示便于学员理解教学内容知识回顾在前面讲解了的工作界面以及站点的创建和管理本的功能有哪些内容大纲具体可结合本章的课件进行配合讲解规划千履千寻公司网站确定网站风格和布局网站需求分
24、析规划站点内容的工作界面界面概述标题栏菜单栏文档工具栏插入栏浮动面板组状态栏属性面板创建千履千寻公司 使用表格布局“产品展示”网页 4.1.1 创建表格 4.1.2 调整表格结构 4.1.3 设置表格和单元格属性 4.1.4 在表格中插入内容 利用 AP Div 制作千履千寻网站首页 4.2.1 创建 AP Div 4.2.2 选择 AP Div 4.2.3 设置 AP Div 尺寸 4.2.4 移动 AP Div 4.2.5 对齐 AP Div 4.2.6 更改 AP Div 堆叠顺序 4.2.7 在 AP Div 插入各种元素 使用框架制作“公司公告”网页 4.3.1 创建框架集与框架 4
25、.3.2 保存框架集与框架 4.3.3 删除框架 4.3.4 设置框架集与框架属性 4.3.5 制作框架网页 实训制作“景点介绍”网页 4.4.1 实训目标 4.4.2 专业背景 4.4.3 操作思路 疑难解析 习题 拓展知识 课堂案例 1使用表格布局“产品展示”网页 课堂案例 2利用 AP Div 制作首页 课堂案例 3使用框架制作“公司公告”网页 上机实训制作“景点介绍”网页 小结 1、掌握网页布局的几种方式。2、掌握创建表格、设置表格、在表格中插入内容、创建 AP Div、设置 AP Div、创建框架与框架集、编辑框架与框架集等操作。3、本章内容是学习网页制作的重点和核心内容之一,对于掌
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 教学 教案 小学教育 小学
限制150内