dreamweaver网页设计教案
dreamweaver网页设计教案第1章网页设计基础教学目标与要求熟记站标、导航条、广告条、按钮等网页构成要素,以及网页、网站、IP地址、域名、网址等概念;了解网页的本质和网页的布局类型和HTML文档的基本结构,熟练掌握网站建设的基本流程。
1.网页的构成要素和组成元素n网页的构成要素:站标、导航条、广告条、标题栏和按钮;n网页的组成元素:文字、图片、动画(gif、flash)、表单(交互功能)、音频、视频、超链接、表格、框架、导航等。revolve怎么读
2.网页相关知识简介n基本概念:0网页的本质0网页、网站、主页、互联网0动态网页、静态网页0IP地址、域名、网址(url)、浏览器等概念n网页布局0网页布局的相关概念0常见的布局类型n网站管理与网页制作相关软件0制作和管理网页工具;0制作和优化网页图像工具;0制作网页动画工具;0其中Dreamweaver、fireworks、flash这三个软件合称为网页“三剑客”。
0其他小工具软件。
nXHTML语言简介n脚本语言简介3.网页的设计理念和配方案n网页的设计理念n彩的三要素n网页中的彩心理与网页表现n彩搭配应遵循的原则4.网站的开发流程①网站需求分析②设计制作网站页面③空间和域名申请④测试和发布网站⑤网站推广制作页面第二阶段:创建站点,设计制作各级页面规划网站准备素材定义站点设置页面属性第一阶段:网站需求分析第三阶段:申请空间和域名第四阶段:测试和发布网站第五阶段:网站推广5.典型网站分析n页面结构n彩运用以提问的方式引
入课程采用课堂讨论教学法,打开几个典型的网页让同学们讨论总结构成要素和组成元素。
打开一个搜狐主页,保存成不同的类型,让大家看保存的效果,加深对网页本质的理解;先打开一个网页的源文件,结合网络常识,详细讲解网页的定义,然后略讲网站和主页的概念。并提醒同学理解并记忆这些概念。
以平顶山学院和搜狐网站的IP地址与域名为例,简要讲述这两个概念。通过查看分析知名网站的网址引入url的定义和组成,其它概念略讲提醒学生理解并记忆上述概念。
打开一网页(详细讲解网页布局效果的教程)让学生讨论、分析总结布局类型。
根据学生特点简要讲解ps、flash、fw等软件在网页设计中的功能。让学生欣赏插入后的效果,吸引学生dw的相关代码。结合上网的经验,让学生总结网页的设计理念。
彩的三要素和心理表现学生在上学期的ps课程中学习过,采用提问法,进行复习;然后打开几个典型网站,分析其配方案,最后总结网页中彩运用的原则。
根据设计的先后顺序和学生一起分析总结网站的开发流程,并用图加以解释,重点讲解网站的需求分析,以加深学生对重点知识的掌握。
采用课堂讨论教学法,打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配方案。
作业布置:1.察看并对比分析大型网站(如中国网、著名学校网、著名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、著名出版社网、cctv网站、sohu、yahoo、IBM、微软等)的风格、彩搭配与布局。
3.课后习题。
eclipse使用详细教程提问小结:通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用,提高了学生的学习兴趣,从学生的反应看,授课效果很好。
第2章Dreamweaver基础知识教学目标与要求熟悉Dreamweaver8工作界面,熟记几个常用的工具按钮和菜单命令;熟练掌握站点的创建步骤能快速规范地创建站点;能够快速创建、打开、保存网页文档;能熟练设置页面的属性。
教学重点1.创建站点并组织站点的结构;2.在站点中创建网页3.页面的属性设置教学难点HTML基础教学方法举例为主,适当讲授操作要领,提问以测试课题效果。
教学课时2课时第2章Dreamweaver基础知识教学提示我们一贯都是浏览网页,想自己动手做网站吗?用什么工具做网站?怎样做呢?---Dreamweaver网页制作工具。
演示站点的创建过程和步骤,着重提出保存和站点文件夹的命名。详细讲解站点结构的组织方法和原则。
分别演示这几个操作通过dw设计视图分别创建1个网页,分别演示文档标题和边距、背景颜和背景图像、文本和链接属性,以及跟踪图像的属性的设置方法和步骤,帮助学生掌
握页面的设置过程。并总结页面设置和创建过程中的一些使用技巧。
作业:习题一第1,2,3题小结:本次课内容操作性很强,经过学生自己上台操作,发现大多数学生都能创建并组织好一个站点,还能快速地设置网页的属性,达到了教学目标的要求。
第3章网页中的基本元素教学目标与要求1.熟练操作网页中的文本
2.熟练插入各种格式的图像并设置其属性;3.了解图像切片的作用;4.熟练制作图像切片,并插入到dw中教学重点1.文本对象的插入和格式设置
2.GIF、PNG和JPEG三种图像格式的异同点和使用环境;3.用fireworks制作网页切片的方法;教学难点1.设置文本标题;段落的设置效果;
2.GIF、PNG和JPEG三种图像格式的异同点和使用环境;android 退出app
3.Dreamweaver8.0中使用图像的一些基本方法和技巧;4.在dreamweaver中插入用fireworks制作的切片教学方法课堂讲授为辅,多媒体演示为主适当举例,提问以测试课题效果,实验式教学。php源码 博客
教学课时4课时第3章网页中的基本元素教学提示复习上节内容:
1.如何创建站点?2.如何站点结构的组织3.1网页中文本的操作3.1.1认识文本按钮及属性面板•思考题:根据以前所学知识说出文本的编辑和设置属性各包括几个方面?3.1.2插入文本和对象n将文本(英文、中文、数字)添加到文档中的3种方法。
n插入特殊字符n水平线n插入日期:菜单法;插入栏按钮法n对插入的文本也可以执行删除、搜索、替换、检查拼写(文本-检查拼写/shift+f7)等操作。
3.1.3设置文本格式字符的样式包括的方面及其设置方法3.1.4设置文本标题标题的含义与作用3.1.5设置段落效果1.设置段落格式
2.缩进段落3.对齐段落(4种对齐方式)4.分段与换行的相关操作和区别:3.1.6创建项目列表3.2网页图像的运用3.2.1网页中图像格式简介1.图像在网页中的作用和网页中常用图像格式有:GIF、JPEG、PNG。
dw怎么制作网页2.三种图像格式的特点和在网页中的使用场合。
在Web页上显示图片之前,通常需要考虑下列三个问题:3.2.2在网页中使用图像1.插入图像:2.插入图像占位符:注意图像占位符的命名规则和作用3.创建鼠标经过图象(轮换图像)4.在dw中图像的编辑功能仅适用于GIF和JPEG图像格式。
0在属性检面板中编辑图像,上述设置也可通过菜单实现:修改---图像0用fireworks优化图像。
1.切片的定义和作用2.切片在fw中的创建方法和步骤3.在DW中插入FireworksHTML(切片)的方法和步骤将FireworksHTML插入到Dreamweaver中的方法。
方法1:将切片从Fireworks复制到剪贴板上,然后直接粘贴到Dreamweaver文档代码视图中的相应位置处。
>alpine
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论