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

Dreamweaver网页设计+授课教案

第一篇：Dreamweaver网页设计+授课教案Dreamweaver教案一(一课时)教学目的：初步了解Dreamweaver的操作教学重点：Dreamweaver的界面教学难点：各个面板的调用一、引入为什么要用Dreamweaver而不用Frontpage？Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。例一：m1.htm和f1.htm的大小比较例二：frontpage安装程序和dreamweaver安装程序的大小比较例三：frontpage运行和dreamweaver启动比较二、Dreamweaver的安装三、Dreamweaver的界面1．文档窗口：主菜单、工具栏、底部启动条、文档编辑区2．对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符3．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理4．属性面板：随目前对象不同而内容不同四、作业1．写出Dreamweaver对象界面中所有对象的名称2．新建一个空白网页，写出空白网页的HTML代码Dreamweaver教案二(一课时)教学目的：回忆原来学过的网页的文字知识，熟悉Dreamweaver的操作，熟悉属性面板的1使用，掌握页面属性、文本属性的设置教学难点：向导图片、预格式化、图片的路径教学重点：常用属性一、复习引入1．输入文本2．回车键的作用3．如何输入换行符：Shift+ENTER，或者是对象面板à符号4．换行符对应的HTML标记二、设置页面属性1．打开页面属性对话框：右击页面，选择页面属性（pageproperties）2．设置标题显示（Title）：3．设置页面背景（Backgroundimage）：选择背景图像，注意路径4．设置背景颜色Background：5．设置本页面中文字的颜色Text：在没有设置其它的字体颜色前，这个文字颜色发生作用，一旦对具体的文字设置颜色，这个设置就不起作用了6．设置链接的各种颜色（VisitedLinks、ActiveLinks、Links）7．设置页面边界（LeftTop）：使内容与边框没有空隙8．设置文档字符集（DocumentEncoding）：gb23129．设置向导图片（TracingImage）：用于设计时，下面的滑动条用于设置这个图片的透明度（Transparent）三、设置文本属性1．格式（Format）：（1）样式：段落（Paragraph），标题（Heading1）、„„预先格式化的（preformatted）*预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现自动换行（2）字体：DefaultFont（3）大小：Size（4）颜色：（5）其它：加粗、倾斜（6）对齐：2．链接（Link）：链接到文件，链接到地址，*相关（Relateto）：文档（Document），站根目录（SiteRoot）3．目标（Target）：打开链接的目标_blank、_self、_parent、_top4．项目符号、编号和缩进四、作业根据示例网页，制作一个网页Dreamweaver教案三(两课时)教学目的：掌握网页中图片的相关操作教学重点：dreamweaver中设置图片的属性教学难点：图像处理软件的使用一、复习引入1．网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？RGB方式表示颜色：红绿兰，0表示最弱，255表示最强一共可以表示：256╳256╳256=16777216种颜色由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。这个范围我们称之为网页安全颜色范畴2．网页中运用颜色原则l切忌采用过多的颜色；l背景颜色不要太深；l要保持整个网页的色调统一；l要围绕网页主题选择颜色二、网页中的图像格式*BMP：位图格式1．GIF：GraphicsInterchangeFormat可交换的图像格式特点：l只支持256种颜色l支持透明效果l可以交错下载l可以实现动画效果l文件所占用空间小l不能支持渐变色彩l更改图片大小要从原文件改起2．JPEG：JointPhotographicExpertsGroup联合摄影专家组文件格式特点：l支持24位图像l有损压缩3．GIF与JPEG比较三、插入图像1．插入图像：InsertàImage；对象面板2．图像属性：l宽（W）高（H）：默认为图片的大小，可以设置其它尺寸，但图片会变形l源文件（Src）：l对齐（align）：l链接（Link）：链接到的图片l替代（Alt）：图像注释，当浏览器不能正常显示图片时所出现的文字提示l地图（Map）：制作映