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对象界面中所有对象的名称
网页设计html代码大全空格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=16777216种 颜 由于浏览器的关系，只有216种颜能在浏览器中正常显示，多于这个范围的颜，有的浏览器显 示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜范畴 2．网页中运用颜原则
l 切忌采用过多的颜；
2 背景颜不要太深；
3 要保持整个网页的调统一；
4要围绕网页主题选择颜
二、网页中的图像格式
*BMP：位图格式 1． GIF：Graphics Interchange Format可交换的图像格式 特点： l 只支持256种颜 l 支持透明效果 l 可以交错下载 l 可以实现动画效果 l 文件所占用空间小 l 不能支持渐变彩 l 更改图片大小要从原文件改起 2． JPEG：Joint Photographic Experts Group联合摄影专家组文件格式 特点： l 支持24位图像 l 有损压缩 3． GIF与JPEG比较
三、插入图像
1． 插入图像：InsertàImage；对象面板 2． 图像 属性： l 宽（W）高（H）：默认为图片的大小，可以设置 其它尺寸，但图片会变形 l 源文件（Src）： l 对齐（align）： l 链接（Link）：链接到的图片 l 替代（Alt）：图像注释，当浏览器不能正常显 示图片时所出现的文字提示 l 地图（Map）：制作映射图 l 垂直边距（V space）：与上边界的距离 l 水平边距（H space）与左边界的距离 l 目标（Target）：当链接项有设置时发生作用 l 低品质源（Low Src）：低分辨率副本文件 l 边框（Border）： l 编辑（Edit）：启动图像处理软件来对图像进行 编辑 l 重设大小（Reset size）：当用其它工具修改了 图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项 四、使用图 像处理软件 1、 转换图像格式：打开，另存为 2、 更改图像尺寸： 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图片的低品质图片，并对网页中该风景图片设置低 品质源 l 不看电脑，写出下列RGB值对应什么颜 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。