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 的操作 熟悉 属性面板的使用 掌握页面属性 文本属性的设置 教学难点 向导图片 预格式化 图片的路径 教学重点 常用属性 一 复习引入 1 输入文本 2 回车键的作用 3 如何输入换行符 Shift ENTER 或者是对象面板 符号 4 换行符对应的 HTML 标记 二 设置页面属性 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 代码中是如何表示 的 RGB 方式表示颜色 红绿兰 0 表示最弱 255 表示最强 一共可以表示 256 256 256 16777216 种 颜色 由于浏览器的关系 只有 216 种颜色能在浏览器中正常显示 多于这 个范围的颜色 有的浏览器显 示时就可能发生偏差 不能正常显示 这个范 围我们称之为网页安全颜色范畴 2 网页中运用颜色原则 l 切忌采用过多的颜色 l 背景颜色不要太深 l 要保持整个网页的色调统一 l 要围绕网页主题选择颜色 二 网页中的图像格式 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 教学内容 框架布局网页 教学目的 掌握框架 教学难点 框架的编辑 教学重点 框架的 HTML 代码 一 复习引入 回忆 Frontpage 中的框架应用 二 框架的应用 1 重复出现在不同 网页文档中的元素 网页标题 导航栏等等 三 建立框架 1 将对象面板切换 到框架页 Frame 2 插入不同的框架 一个区域对应于一个页面 3 在框架中打开原 有网页 文件 File 在框架中打开 Open in Frame 四 保存框架 1 选择文件 File 保存所有框架 Save Frameset 先保存框架文件 接 着会出现提示 逐个保存框架中的网页 2 保存时注意名称 五 框架编辑 1 框架面板 窗口 Windows 其它 Other 框架 Frame 调出框架面 板 2 选定框架组 单 击整个框架组的边框 或在框架面板中单击整个框架的边 框 3 框架属性 名称 源文件 滚动否 是否可以调整大小 是否有边框 边 框颜色 边界宽度 边界高度等 4 拆分框架 按 Alt 键 拖动边框 修改 Modify 框架页 Frameset 拆分左 右 上 下 split frame top bottom left right 注意区别 插入一个新的框架与拆分框架的区别 5 链接打开的目标 六 框架所对应的 HTML 代码 1 框架组 2 通过设置 rows 或 cols 来设定是横的还是竖的 是顶部还是底部 3 框架组属性 frameborder 框架是否有边框 border 边框的宽度多少 framespacing 框架间距 4 框架项 5 框架属性 src 指向的页面 name 框架名 scrolling 是否有滚动条 noresize 不能由用户改变大小 6 无框架提示 七 作业 1 建立框架页面如 图 菜单链接到不同的图片 单击菜单中的一项 图片在 右边的框架中打开 2 建立左右型的框 架 并在其中的左框架中插入上下型的框架 3 建立左右型框架 并将左边的框架拆分为上下型 4 将 2 3 题所得出的代码写在作业本上比较 教学内容 完善发布网站 教学目的 掌握层的相关操作 为动画设置打基础 教学难点 z index 子层 教学重点 层的属性 一 复习引入 网页中的定位 表格 二 建立层 1 菜单 插入 Insert 层 Layer 默认大小 200 115 2 对象面板 三 层的意义 1 可以将元素重叠 2 可以用于精确定 位网页元素 3 可以通过应用时 间线使层移动和变换 实现简单的动画效果 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 当层内容超过层大小的时候如何显示 显示层内的全 部内容 visible 只显示层尺寸以内的内容 hidden 不改变层大小 只添 加滚动条 scroll 只有层不够大时才显示滚动条 auto 8 剪裁 Clip 指定层的哪一部分是可见的 输入的数值是距离层的 4 个 边界的距离 六 层面板 1 选择窗口 Window 层 Layer 打开层面板 2 防止重叠 Prevent Overlap 3 缩放层 4 移动层