Dreamweaver网页设计 授课教案.docx

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

2、amweaver启动比较 二、 Dreamweaver的安装 三、 Dreamweaver的界面 1(文档窗口:主菜单、工具栏、底部启动条、文档编辑区 2(对象面板:标准、表格、表单、框架、特殊、文件头、隐藏、字符 3(启动面板:站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理 4(属性面板:随目前对象不同而内容不同 四、 作业 1(写出Dreamweaver对象界面中所有对象的名称 2(新建一个空白网页，写出空白网页的HTML代码 Dreamweaver教案二(一课时) 教学目的:回忆原来学过的网页的文字知识，熟悉 Dreamweaver的操作，熟悉属性面板的使用，掌握

3、页面属性、文本属性的设置 教学难点:向导图片、预格式化、图片的路径 教学重点:常用属性 一、 复习引入 1(输入文本 2(回车键的作用 3(如何输入换行符:Shift+ENTER，或者是对象面板符号 4(换行符对应的HTML标记 二、 设置页面属性 1(打开页面属性对话框:右击页面，选择页面属性(page properties) 2(设置标题显示(Title): 3(设置页面背景(Background image):选择背景图像，注意路径 4(设置背景颜色Background: 5(设置本页面中文字的颜色Text:在没有设置其它的字体颜色前，这个文字颜色发生作用，一 旦对具体的文字设置颜色，这

4、个设置就不起作用了 6(设置链接的各种颜色(Visited Links、Active Links、Links) (设置页面边界(Left Top ):使内容与边框没有空隙 7 8(设置文档字符集(Document Encoding):gb2312 9(设置向导图片(Tracing Image):用于设计时，下面的滑动条用于设置这个图片的透明度( Transparent) 三、 设置文本属性 1(格式(Format): (1) 样式:段落(Paragraph)，标题(Heading1) 、预先格式化的(preformatted) *预先格式化的:可以输入空格，可以按文本原来的样子排列，缺点是不能

5、实现自动换行 (2) 字体:Default Font (3) 大小:Size (4) 颜色: (5) 其它:加粗、倾斜 (6) 对齐: 2(链接(Link):链接到文件，链接到地址， *相关(Relate to):文档(Document)，站根目录(SiteRoot) 3(目标(Target):打开链接的目标_blank、_self、_parent、_top 4(项目符号、编号和缩进 四、 作业 根据示例网页，制作一个网页 Dreamweaver 教案三(两课时) 教学目的:掌握网页中图片的相关操作 教学重点:dreamweaver中设置图片的属性 教学难点: 图像处理软件的使用 一、复习引入

6、 1(网页的页面背景颜色和文本颜色在HTML代码中是如何表示的, RGB方式表示颜色:红绿兰，0表示最弱，255表示最强 一共可以表示:256?256?256=16777216种 颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显 示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜色范畴 2(网页中运用颜色原则 l 切忌采用过多的颜色; l 背景颜色不要太深; l 要保持整个网页的色调统一; l 要围绕网页主题选择颜色 二、网页中的图像格式 *BMP:位图格式 1( GIF:Graphics Interchange Format可交换的

7、图像格式 特点: l 只支持256种颜色 l 支持透明效果 l 可以交错下载 l 可以实现动画效果 l 文件所占用空间小 l 不能支持渐变色彩 l 更改图片大小要从原文件改起 2( JPEG:Joint Photographic Experts Group联合摄影专家组文件格式 特点: l 支持24位图像 l 有损压缩 3( GIF与JPEG比较 三、插入图像 1( 插入图像:InsertImage;对象面板 2( 图像 属性: l 宽(W)高(H):默认为图片的大小，可以设置 其它尺寸，但图片会变形 l 源文件(Src): l 对齐(align): l 链接(Link):链接到的图片 l 替

8、代(Alt):图像注释，当浏览器不能正常显 示图片时所出现的文字提示 l 地图(Map):制作映射图 l 垂直边距(V space):与上边界的距离 l 水平边距(H space)与左边界的距离 l 目标(Target):当链接项有设置时发生作用 l 低品质源(Low Src):低分辨率副本文件 l 边框(Border): l 编辑(Edit):启动图像处理软件来对图像进行 编辑 l 重设大小(Reset size):当用其它工具修改了 图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项 四、使用图 像处理软件 1、 转换图像格式:打开，另存为 2、 更改图像尺寸

9、: 3、 更改图像品质:另存为 五、作业 l 下列文件均放于同一文件夹下: 1( 在网上寻找透明背景的GIF图片5张，JPEG图片5张，其中，GIF要有动画的至少一张，JPEG要有一 张风景的。 2( 将找到的图片放置在背景为蓝色的页面上 3( 改变第一 张GIF图片的大小 4( 设置第二张GIF图片的替代文字为“试一试” 5( 设 置第三张GIF图片的链接为第三张JPEG图片 6( 设置第四张GIF图片的垂直边距为5，水平 边距为9 7( 对第一张JPEG图片设置映射4个，分别链接到第二、三、四、五张JPEG图片 8( 运用图像处理软件，制作风景JPEG图片的低品质图片，并对网页中该风景图片

10、设置低 品质源 l 不看电脑，写出下列RGB值对应什么颜色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF Dreamweaver教案四(三课时) 教学目的:掌握dreamweaver中表格的应用 教学难点:表格对应的HTML代码 教学重点:表格的编辑 一、 复习引入 1( 文字的定位:空 格、回车 2( 图片的定位:垂 直边距、水平边距 二、 表格 1( 插入表格:插入 (Insert)表格(table)，或者在对象面板 2( 行数(row) 3( 列数(column) 4( 边距(cell padding):单元格中的内容与单元格边框之间的距离

11、 5( 间距(cell spacing):单元格之间的距离 6( 宽度(width) :可以是像素(pixel)或百分比为单位(percent) ( 边框(boder) : 78( 属性面板:只有 在选定整个表格时才出现表格属性 9( 在表格中也可以 通过右击，调出的快捷菜单中选择表格来对表格进行设置 10( 清除行高和列宽按钮 11( 改变列宽单位按钮 12( 背景颜色: 13( 边框颜色:设置整个表格的格线颜色 14( 背景图像: 三、 表格所对应的HTML代码 1(表格: 2(行: 3(列: 四、 选定 1( 单击表格左上角 或边框线 2( 在表格内单击表 格任一处，右击，选择表格(ta

12、ble)选定表格(select table) 3( 选择所有单元格 4( 在文档窗口的左 下角选择标记 5( 选定行 6( 选定单元格 五、 表格的编辑 1( 表格的嵌套 在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。 2( 复制剪切粘贴 3( 插入行、列，删 除行列 4( 合并单元格，拆 分单元格 5( 改变行、列、表 格的大小:拖放，属性面板精确定义 6( 表格模板:命令 (command)格式化表格(format table) 六、 导入表格数据 1( 文件导入导入表格数据 2( 数据文件 3( 定界符 4( 表格宽度 5( 单元格边距和间距 6( 格式化首行

13、7( 边框 七、 学习网页制作的方法 1( 学习网页制作， 要先模仿 2( 在浏览到合适的 网页时，用“另存为”保存，再用dreamweaver来打开 八、 作业 1( 将数据文件1.txt转为表格 2( 模仿此页制作页面 Dreamweaver教案五(两课时)教学目的: 掌握框架 教学难点: 框架的编辑 教学重点: 框架的HTML代码 一、 复习引入 回忆:Frontpage中的框架应用 二、 框架的应用 ( 重复出现在不同 网页文档中的元素:网页标题、导航栏等等 1 三、 建立框架 1( 将对象面板切换 到框架页(Frame) 2( 插入不同的框架 ，一个区域对应于一个页面 3( 在框架中

14、打开原 有网页:文件(File)在框架中打开(Open in Frame) 四、 保存框架 1( 选择文件(File )/保存所有框架(Save Frameset)，先保存框架文件，接着会出现提示，逐个保存框架中的网页 2( 保存时注意名称 五、 框架编辑 1( 框架面板:窗口 (Windows)其它(Other)框架(Frame)调出框架面板 2( 选定框架组:单 击整个框架组的边框;或在框架面板中单击整个框架的边框 3( 框架属性:名称 、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等 4( 拆分框架:按 Alt键，拖动边框;修改(Modify)框架页(Fra

15、meset)拆分左/右/上/下(split frame top/bottom/left/right) *注意区别:插入一个新的框架与拆分框架的区别 5( 链接打开的目标 六、 框架所对应的HTML代码 1( 框架组: 2( 通过设置:rows 或cols来设定是横的还是竖的，是顶部还是底部 3( 框架组属性: frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距 4( 框架项: 5( 框架属性:src 指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小 6( 无框架提示 七、 作业 1( 建立框架页面如

16、图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开 2( 建立左右型的框 架，并在其中的左框架中插入上下型的框架 3( 建立左右型框架 ，并将左边的框架拆分为上下型 4( 将2、 3题所得出的代码写在作业本上比较 Dreamweaver教案六(三课时) 教学目的: 掌握层的相关操作，为动画设置打基础 教学难点: z-index、子层 教学重点: 层的属性 一、 复习引入 *网页中的定位表格 二、 建立层 1( 菜单，插入 (Insert)层(Layer)，默认大小:200?115 2( 对象面板 三、 层的意义 1( 可以将元素重叠 ( 可以用于精确定 位网页元素 2 3( 可

17、以通过应用时 间线使层移动和变换，实现简单的动画效果 4( 网页和网页元素 的可见或不可见可以通过层的显示和隐藏属性实现 5( 层可以转换成表 格 四、 层所对应的HTML代码 五、 层属性 1( 层编号 (LayerID) 2( L、T、W、H 3( Z轴(Z-index) :控制层重叠时谁在前谁在后的问题 4( 背景图像 (Bgimage) 5( 显示(Vis): 默认(default)、(继承)inherit、(可见)visible、隐藏(hidden)四个选项之一 6( 标签(Tag): DIV、SPAN、LAYER、ILAYER，选DIV 7( 溢出(Overflow ):当层内容超

18、过层大小的时候如何显示。显示层内的全部内容(visible)、hidden)、不改变层大小、只添加滚动条(scroll)、只有层不够只显示层尺寸以内的内容 (大时才显示滚动条(auto) 8( 剪裁(Clip): 指定层的哪一部分是可见的，输入的数值是距离层的4个边界的距离 六、 层面板 1( 选择窗口 (Window) 层(Layer)打开层面板 2( 防止重叠 (Prevent Overlap): 3( 缩放层: ( 移动层: 4 5( 对齐层: 6( 改变层的可见性 7( 改变层的Z轴属 性 例:阴影字的制作 七、 子层 1( 在一个层中再插 入一个层，后者就是前者的子层 2( 子层不一定在父 层里面 3( 移动子层，父层 位置不发生变化 4( 移动父层，子层 跟着变化，对父层的相对位置不变 5( 子层可以继承父 层的可见性 八、 层与表格的转换 1( 层转换为表格: 修改转换层到表格 2( 表格转换为层: 修改转换表格到层 九、 作业: 1、 制作阴影字 2、 用层将5个图片放置围绕一个 图片