Dreamweaver教案一一课时-平山中学.DOCVIP

平山中学校本课程 第一节 了解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．输入文本 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．项目符号、编号和缩进 四、作业 根据示例网页，制作一个网页 ? Dreamweaver 中插入图片 教学目的：掌握网页中图片的相关操作 教学重点：dreamweaver中设置图片的属性 教学难点： 图像处理软件的使用 一、复习引入 1．网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？ BODY BGCOLOR=”#FFFFFFF” TEXT=”#000000” LINK=”#FF0000” VLINK=”#FFFF00” ALINK=”#00FFFF” RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256╳256╳256颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜色范畴 2．网页中运用颜色原则 切忌采用过多的颜色； 背景颜色不要太深； 要保持整个网页的色调统一； 要围绕网页主题选择颜色 二、网页中的图像格式 GIF：Graphics Interchange Format可交换的图像格式 特点：只支持256种颜色支持透明效果可以交错下载可以实现动画效果文件所占用空间小不能支持渐变色彩更改图片大小要从原文件改起2．JPEG：Joint Photographic Experts Gro