《《Dreamweaver网页设计》教案》由会员分享，可在线阅读，更多相关《《Dreamweaver网页设计》教案（39页珍藏版）》请在金锄头文库上搜索。
1、教案 2012 2013学年第1学期课程名称 Dreamweaver网页制作 授课对象 全校各专业学生 授课教师 周 改 云 职 称 讲 师 教材版本 dreamweaver网页制作实用教程 张新成 缪亮编著 参 考 书1.Dreamweaver 经典范例教程2.dreamweaver网页设计与制作平顶山学院教务处印制第1章 网页设计基础教学目标与要求熟记站标、导航条、广告条、按钮等网页构成要素，以及网页、网站、IP地址、域名、网址等概念；了解网页的本质和网页的布局类型和HTML文档的基本结构，熟练掌握网站建设的基本流程。教学重点重点：站标、导航条、广告条、网页、网站、IP地址、域名、网址等概
2、念，以及网站建设的流程教学难点难点： IP地址、域名、网址，HTML文档的基本结构及其常见标签教学方法提问、启发、图示、情景教学、案例、课堂讨论教学课时2课时第1章 网页设计基础教学提示导入课程：大家会输入文字、制作和处理图像、设计动画，如何把这些作品放到internet中，让更多的人去查阅和欣赏呢？-DW就可以制作网页。1.网页的构成要素和组成元素n 网页的构成要素：站标、导航条、广告条、标题栏和按钮；n 网页的组成元素：文字、图片、动画（gif、flash）、表单（交互功能）、音频、视频、超链接、表格、框架、导航等。2.网页相关知识简介n 基本概念： 网页的本质 网页、网站、主页、互联网
3、动态网页、静态网页 IP地址、域名、网址（url）、浏览器等概念n 网页布局 网页布局的相关概念 常见的布局类型n 网站管理与网页制作相关软件 制作和管理网页工具； 制作和优化网页图像工具； 制作网页动画工具； 其中Dreamweaver、 fireworks、 flash这三个软件合称为网页“三剑客”。 其他小工具软件。n HTML语言 HTML的概念 HTML文档的基本结构 几个常见的html标签： html、head、title、style、script、link、meta、body、img、p、font等。n XHTML语言简介 n 脚本语言简介 3.网页的设计理念和配色方案n 网页的
4、设计理念n 色彩的三要素n 网页中的色彩心理与网页表现n 色彩搭配应遵循的原则4.网站的开发流程 网站需求分析 设计制作网站页面 空间和域名申请 测试和发布网站 网站推广 制作页面第二阶段：创建站点，设计制作各级页面规划网站准备素材定义站点设置页面属性第一阶段：网站需求分析第三阶段：申请空间和域名第四阶段：测试和发布网站第五阶段：网站推广5.典型网站分析n 页面结构n 色彩运用以提问的方式引入课程采用课堂讨论教学法，打开几个典型的网页让同学们讨论总结构成要素和组成元素。打开一个搜狐主页，保存成不同的类型，让大家看保存的效果，加深对网页本质的理解；先打开一个网页的源文件，结合网络常识，详细讲解网
5、页的定义，然后略讲网站和主页的概念。并提醒同学理解并记忆这些概念。以注册和登录邮箱为例，对比讲解动态网页和静态网页的特点和区别。以平顶山学院和搜狐网站的IP地址与域名为例，简要讲述这两个概念。通过查看分析知名网站的网址引入url的定义和组成，其它概念略讲。提醒学生理解并记忆上述概念。打开一网页（详细讲解网页布局效果的教程）让学生讨论、分析总结布局类型。根据学生特点简要讲解ps、flash、fw等软件在网页设计中的功能。 打开搜狐主页的源代码，让学生认识一下html语言及其结构，然后分别用记事本和dw创建2个最简单的网页，让学生细看其源代码，并详细讲解8个基本标签及其结构关系，最后根据时间酌情讲
6、解其它几个常见标签。简要讲解这两个概念，然后创建一个网页，复制无缝循环的代码并粘贴到网页的body标签，让学生了解脚本语言的功能。让学生欣赏插入后的效果，吸引学生dw的相关代码。结合上网的经验，让学生总结网页的设计理念。色彩的三要素和心理表现学生在上学期的ps课程中学习过，采用提问法，进行复习；然后打开几个典型网站，分析其配色方案，最后总结网页中色彩运用的原则。根据设计的先后顺序和学生一起分析总结网站的开发流程，并用图加以解释，重点讲解网站的需求分析，以加深学生对重点知识的掌握。采用课堂讨论教学法，打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配色方案。作业布置：1.察
7、看并对比分析大型网站（如中国网、著名学校网、著名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、著名出版社网、cctv网站、sohu、yahoo、IBM、微软等）的风格、色彩搭配与布局。2 .察看的同时下载自己需要的文章、图片、软件等资源。.课后习题。提问小结：通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用，提高了学生的学习兴趣，从学生的反应看，授课效果很好。第2章 Dreamweaver基础知识教学目标与要求熟悉Dreamweaver 8工作界面 ，熟记几个常用的工具按钮和菜单命令；熟练掌握站点的创建步骤，能快速规范地创建站点；能够快速创建、打开、保存网页文档；能熟练设
8、置页面的属性。教学重点1.创建站点并组织站点的结构;2. 在站点中创建网页3.页面的属性设置教学难点HTML基础教学方法举例为主，适当讲授操作要领，提问以测试课题效果。教学课时2课时第2章 Dreamweaver基础知识教学 提示我们一贯都是浏览网页，想自己动手做网站吗？用什么工具做网站？怎样做呢？- Dreamweaver网页制作工具。2.1 熟悉Dreamweaver 8工作界面 2.2 网站创建与管理 2.2.1 站点的定义、组成和结构 2.2.2 网页文档与文件夹命名规则 2.2.3创建本地站点的步骤2.2.4组织站点结构2.3 网页文档基本操作 新建、保存、预览、打开、关闭2.4 基
9、本页面属性设置 制定文档标题和边距、网页背景颜色和背景图像，为网页设置文本属性、链接属性和跟踪图像的属性，总结页面的使用的技巧：抛出问题，引入新课启动dw，详细讲解插入栏、文档标签与“文档”工具栏、状态栏的作用，区分标签检查器、标签选择器、标记选择符3个概念及其作用 详细讲解站点的定义、组成、结构，以及文件和文件夹的命名规则。演示站点的创建过程和步骤，着重提出保存和站点文件夹的命名。详细讲解站点结构的组织方法和原则。分别演示这几个操作通过dw设计视图分别创建1个网页，分别演示文档标题和边距、背景颜色和背景图像、文本和链接属性，以及跟踪图像的属性的设置方法和步骤，帮助学生掌握页面的设置过程。并总
10、结页面设置和创建过程中的一些使用技巧。作业：习题一第1，2, 3 题小结：本次课内容操作性很强，经过学生自己上台操作，发现大多数学生都能创建并组织好一个站点，还能快速地设置网页的属性，达到了教学目标的要求。第3章 网页中的基本元素教学目标与要求1.熟练操作网页中的文本；2.熟练插入各种格式的图像并设置其属性；3.了解图像切片的作用；4.熟练制作图像切片，并插入到dw中教学重点1.文本对象的插入和格式设置；2.GIF、PNG和JPEG三种图像格式 的异同点和使用环境；3.用fireworks制作网页切片的方法； 教学难点1.设置文本标题；段落的设置效果；2.GIF、PNG和JPEG三种图像格式的
11、异同点和使用环境；3.Dreamweaver 8.0中使用图像的一些基本方法和技巧；4. 在dreamweaver中插入用fireworks制作的切片教学方法课堂讲授为辅，多媒体演示为主，适当举例，提问以测试课题效果，实验式教学。教学课时4课时第3章网页中的基本元素教学提示复习上节内容：1 如何创建站点？2 如何站点结构的组织3.1网页中文本的操作. 认识文本按钮及属性面板 思考题：根据以前所学知识说出文本的编辑和设置属性各包括几个方面？. 插入文本和对象n 将文本（英文、中文、数字）添加到文档中的3种方法。n 插入特殊字符n 水平线 n 插入日期：菜单法；插入栏按钮法n 对插入的文本也可以执
12、行删除、搜索、替换、检查拼写（文本检查拼写shift+f7）等操作。. 设置文本格式 字符的样式包括的方面及其设置方法. 设置文本标题 标题的含义与作用3. 设置段落效果 1 . 设置段落格式 .缩进段落对齐段落 （4种对齐方式）.分段与换行的相关操作和区别：.创建项目列表.网页图像的运用.网页中图像格式简介 1. 图像在网页中的作用和网页中常用图像格式有：GIF 、JPEG 、PNG。2.三种图像格式的特点和在网页中的使用场合。 在Web页上显示图片之前，通常需要考虑下列三个问题：.在网页中使用图像1.插入图像：2.插入图像占位符：注意图像占位符的命名规则和作用3.创建鼠标经过图象（轮换图像）4. 在dw中图像的编辑功能仅适用于GIF 和JPEG 图像格式。 在属性检面板中编辑图像，上述设置也可通过菜单实现：修改-图像 用fireworks优化图像。热点工具的使用和图像热区的添加 .设置图文混排的效果：7.制作电子相册：命令创建网站相册3.2.3切片在fw中的创建和在dw使用打开大图片网页时，总是等
