最新Dreamweaver网页设计+授课教案.docx

《最新Dreamweaver网页设计+授课教案.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、精品资料Dreamweaver网页设计+授课教案........................................精品资料Dreamweaver教案(一课时)教学目的：初步了解Dreamweaver的操作教学重点：Dreamweaver的界面教学难点：各个面板的调用一、 引入为什么要用Dreamweaver而不用Frontpage？Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。例一：m1.htm和f1.htm的大小比较例二：fro

2、ntpage安装程序和dreamweaver安装程序的大小比较例三：frontpage运行和dreamweaver启动比较二、 Dreamweaver的安装三、 Dreamweaver的界面1．文档窗口：主菜单、工具栏、底部启动条、文档编辑区2．对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符3．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理4．属性面板：随目前对象不同而内容不同........................................精品资料四、 作业1．写出D

3、reamweaver对象界面中所有对象的名称2．新建一个空白网页，写出空白网页的HTML代码Dreamweaver教案二(一课时)教学目的：回忆原来学过的网页的文字知识，熟悉Dreamweaver的操作，熟悉属性面板的使用，掌握页面属性、文本属性的设置教学难点：向导图片、预格式化、图片的路径教学重点：常用属性一、 复习引入1．输入文本2．回车键的作用3．如何输入换行符：Shift+ENTER，或者是对象面板à符号4．换行符对应的HTML标记
二、 设置页面属性1．打开页面属性对话框：右击页面，选择页面属性（pageprop

4、erties）2．设置标题显示（Title）：3．设置页面背景（Backgroundimage）：选择背景图像，注意路径4．设置背景颜色Background：........................................精品资料5．设置本页面中文字的颜色Text：在没有设置其它的字体颜色前，这个文字颜色发生作用，一旦对具体的文字设置颜色，这个设置就不起作用了6．设置链接的各种颜色（VisitedLinks、ActiveLinks、Links）7．设置页面边界（LeftTop）：使内容与边框没有空隙8．设置文档字

5、符集（DocumentEncoding）：gb23129．设置向导图片（TracingImage）：用于设计时，下面的滑动条用于设置这个图片的透明度（Transparent）三、 设置文本属性1．格式（Format）：（1） 样式：段落（Paragraph），标题（Heading1）、……预先格式化的（preformatted）*预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现自动换行（2） 字体：DefaultFont（3） 大小：Size（4） 颜色：（5） 其它：加粗、倾斜（6） 对齐：........

6、................................精品资料2．链接（Link）：链接到文件，链接到地址，*相关（Relateto）：文档（Document），站根目录（SiteRoot）3．目标（Target）：打开链接的目标_blank、_self、_parent、_top4．项目符号、编号和缩进四、 作业根据示例网页，制作一个网页Dreamweaver教案三(两课时)教学目的：掌握网页中图片的相关操作教学重点：dreamweaver中设置图片的属性教学难点：图像处理软件的使用一、复习引入1．网页的页面背景颜色和

7、文本颜色在HTML代码中是如何表示的？RGB方式表示颜色：红绿兰，0表示最弱，255表示最强一共可以表示：256╳256╳256=种颜色由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。........................................精品资料这个范围我们称之为网页安全颜色范畴2

8、．网页中运用颜色原则l 切忌采用过多的颜色；l 背景颜色不要太深；l 要保持整个网页的色调统一；l 要围绕网页主题选择颜色二、网页中的图像格式*BMP：位图格式1． GIF：GraphicsInterchangeFormat可交换的图像格式特点：l 只支持256