Dreamweaver教案好.doc

教学内容：设计网站与制作首页 教学目的：初步了解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的操作，熟悉属性面板的使用，掌握页面属性、文本属性的设置 教学难点：向导图片、预格式化、图片的路径 教学重点：常用属性 一、?复习引入 1．输入文本 2．回车键的作用 3．如何输入换行符：Shift+ENTER，或者是对象面板à符号 4．换行符对应的HTML标记br 二、?设置页面属性 1．打开页面属性对话框：右击页面，选择页面属性（page properties） 2．设置标题显示（Title）： 3．设置页面背景（Background image）：选择背景图像，注意路径 4．设置背景颜色Background： 5．设置本页面中文字的颜色Text：在没有设置其它的字体颜色前，这个文字颜色发生作用，一 旦对具体的文字设置颜色，这个设置就不起作用了 6．设置链接的各种颜色（Visited Links、Active Links、Links） 7．设置页面边界（Left Top ）：使内容与边框没有空隙 8．设置文档字符集（Document Encoding）：gb2312 9．设置向导图片（Tracing Image）：用于设计时，下面的滑动条用于设置这个图片的透明度（ Transparent） 三、?设置文本属性 1．格式（Format）： （1）?样式：段落（Paragraph），标题（Heading1） 、……预先格式化的（preformatted） *预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现自动换行 （2）?字体：Default Font （3）?大小：Size （4）?颜色： （5）?其它：加粗、倾斜 （6）?对齐： 2．链接（Link）：链接到文件，链接到地址， *相关（Relate to）：文档（Document），站根目录（SiteRoot） 3．目标（Target）：打开链接的目标_blank、_self、_parent、_top 4．项目符号、编号和缩进 四、?作业 根据示例网页，制作一个网页 教学内容：定义CSS样式 教学目的：掌握网页中图片的相关操作 教学重点：dreamweaver中设置图片的属性 教学难点： 图像处理软件的使用 一、复习引入 1．网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？ BODY BGCOLOR=”#FFFFFFF” TEXT=”#000000” LINK=”#FF0000” VLINK=”#FFFF00” ALINK=”#00FFFF” RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256╳256╳256 颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显 示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜色范畴 2．网页中运用颜色原则 l?切忌采用过多的颜色； l?背景颜色不要太深； l?要保持整个网页的色调统一； l?要围绕网页主题选择颜色 二、网页中的图像格式 *BMP：位图格式 1．?GIF：Graphics Interchange Format可交换的图像格式 特点： l?只支持256种颜色 l?支持透明效果 l?可以交错下载 l?可以实现动画效果 l?文件所占用空间小 l?不能支持渐变色彩 l?更改图片大小要从原文件改起 2．?JPEG：Joint Photogr