Dreamweaver网页设计 授课教案.docx
- 文档编号:6218502
- 上传时间:2023-01-04
- 格式:DOCX
- 页数:9
- 大小:21.19KB
Dreamweaver网页设计 授课教案.docx
《Dreamweaver网页设计 授课教案.docx》由会员分享,可在线阅读,更多相关《Dreamweaver网页设计 授课教案.docx(9页珍藏版)》请在冰豆网上搜索。
Dreamweaver网页设计授课教案
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标记
二、 设置页面属性
1.打开页面属性对话框:
右击页面,选择页面属性(pageproperties)
2.设置标题显示(Title):
3.设置页面背景(Backgroundimage):
选择背景图像,注意路径
4.设置背景颜色Background:
5.设置本页面中文字的颜色Text:
在没有设置其它的字体颜色前,这个文字颜色发生作用,一旦对具体的文字设置颜色,这个设置就不起作用了
6.设置链接的各种颜色(VisitedLinks、ActiveLinks、Links)
7.设置页面边界(LeftTop):
使内容与边框没有空隙
8.设置文档字符集(DocumentEncoding):
gb2312
9.设置向导图片(TracingImage):
用于设计时,下面的滑动条用于设置这个图片的透明度(Transparent)
三、 设置文本属性
1.格式(Format):
(1) 样式:
段落(Paragraph),标题(Heading1)、……预先格式化的(preformatted)
*预先格式化的:
可以输入空格,可以按文本原来的样子排列,缺点是不能实现自动换行
(2) 字体:
DefaultFont
(3) 大小:
Size
(4) 颜色:
(5) 其它:
加粗、倾斜
(6) 对齐:
2.链接(Link):
链接到文件,链接到地址,
*相关(Relateto):
文档(Document),站根目录(SiteRoot)
3.目标(Target):
打开链接的目标_blank、_self、_parent、_top
4.项目符号、编号和缩进
四、 作业
根据示例网页,制作一个网页
Dreamweaver教案三(两课时)
教学目的:
掌握网页中图片的相关操作
教学重点:
dreamweaver中设置图片的属性
教学难点:
图像处理软件的使用
一、复习引入1.网页的页面背景颜色和文本颜色在HTML代码中是如何表示的?
红绿兰,0表示最弱,255表示最强一共可以表示:
256╳256╳256=16777216种颜色由于浏览器的关系,只有216种颜色能在浏览器中正常显示,多于这个范围的颜色,有的浏览器显示时就可能发生偏差,不能正常显示。
这个范围我们称之为网页安全颜色范畴2.网页中运用颜色原则
l 切忌采用过多的颜色;
l 背景颜色不要太深;
l 要保持整个网页的色调统一;
l 要围绕网页主题选择颜色
二、网页中的图像格式*BMP:
位图格式1. GIF:
GraphicsInterchangeFormat可交换的图像格式特点:
l 只支持256种颜色l 支持透明效果l 可以交错下载l 可以实现动画效果l 文件所占用空间小l 不能支持渐变色彩l 更改图片大小要从原文件改起2. JPEG:
JointPhotographicExpertsGroup联合摄影专家组文件格式特点:
l 支持24位图像l 有损压缩3. GIF与JPEG比较
三、插入图像1. 插入图像:
InsertàImage;对象面板2. 图像属性:
l 宽(W)高(H):
默认为图片的大小,可以设置其它尺寸,但图片会变形l 源文件(Src):
l 对齐(align):
l 链接(Link):
链接到的图片l 替代(Alt):
图像注释,当浏览器不能正常显示图片时所出现的文字提示l 地图(Map):
制作映射图l 垂直边距(Vspace):
与上边界的距离l 水平边距(Hspace)与左边界的距离l 目标(Target):
当链接项有设置时发生作用l 低品质源(LowSrc):
低分辨率副本文件l 边框(Border):
l 编辑(Edit):
启动图像处理软件来对图像进行编辑l 重设大小(Resetsize):
当用其它工具修改了图片大小时,如果不重设图片的大小,则会变形或者在不小心改变了图片的大小时使用此项四、使用图像处理软件1、 转换图像格式:
打开,另存为2、更改图像尺寸:
3、 更改图像品质:
另存为五、作业l 下列文件均放于同一文件夹下:
1. 在网上寻找透明背景的GIF图片5张,JPEG图片5张,其中,GIF要有动画的至少一张,JPEG要有一张风景的。
2. 将找到的图片放置在背景为蓝色的页面上3. 改变第一张GIF图片的大小4. 设置第二张GIF图片的替代文字为“试一试”5. 设置第三张GIF图片的链接为第三张JPEG图片6. 设置第四张GIF图片的垂直边距为5,水平边距为97. 对第一张JPEG图片设置映射4个,分别链接到第二、三、四、五张JPEG图片8. 运用图像处理软件,制作风景JPEG图片的低品质图片,并对网页中该风景图片设置低品质源l 不看电脑,写出下列RGB值对应什么颜色#FF000 #00FF00#0000FF#FFFF00#FF00FF#00FFFF
Dreamweaver教案四(三课时)
教学目的:
掌握dreamweaver中表格的应用教学难点:
表格对应的HTML代码
教学重点:
表格的编辑
一、 复习引入
1. 文字的定位:
空格、回车
2. 图片的定位:
垂直边距、水平边距
二、 表格
1. 插入表格:
插入(Insert)à表格(table),或者在对象面板
2. 行数(row)
3. 列数(column)
4. 边距(cellpadding):
单元格中的内容与单元格边框之间的距离
5. 间距(cellspacing):
单元格之间的距离
6. 宽度(width):
可以是像素(pixel)或百分比为单位(percent)
7. 边框(boder):
8. 属性面板:
只有在选定整个表格时才出现表格属性
9. 在表格中也可以通过右击,调出的快捷菜单中选择表格来对表格进行设置
10. 清除行高和列宽按钮
11. 改变列宽单位按钮
12. 背景颜色:
13. 边框颜色:
设置整个表格的格线颜色
14. 背景图像:
三、 表格所对应的HTML代码
1.表格:
2.行:
3.列:
四、 选定
1. 单击表格左上角或边框线
2. 在表格内单击表格任一处,右击,选择表格(table)à选定表格(selecttable)
3. 选择所有单元格
4. 在文档窗口的左下角选择标记
5. 选定行
6. 选定单元格
五、 表格的编辑
1. 表格的嵌套
在网页中,要进行复杂的定位,一般需要用到嵌套表格。
不过,一般不超过三层。
2. 复制剪切粘贴
3. 插入行、列,删除行列
4. 合并单元格,拆分单元格
5. 改变行、列、表格的大小:
拖放,属性面板精确定义
6. 表格模板:
命令(command)à格式化表格(formattable)
六、 导入表格数据
1. 文件导入导入表格数据
2. 数据文件
3. 定界符
4. 表格宽度
5. 单元格边距和间距
6. 格式化首行
7. 边框
七、 学习网页制作的方法
1. 学习网页制作,要先模仿
2. 在浏览到合适的网页时,用“另存为”保存,再用dreamweaver来打开
八、 作业
1. 将数据文件1.txt转为表格
2. 模仿此页制作页面
Dreamweaver教案五(两课时)
教学目的:
掌握框架
教学难点:
框架的编辑
教学重点:
框架的HTML代码
一、 复习引入
回忆:
Frontpage中的框架应用
二、 框架的应用
1. 重复出现在不同网页文档中的元素:
网页标题、导航栏等等
三、 建立框架
1. 将对象面板切换到框架页(Frame)
2. 插入不同的框架,一个区域对应于一个页面
3. 在框架中打开原有网页:
文件(File)à在框架中打开(OpeninFrame)
四、 保存框架
1. 选择文件(File)/保存所有框架(SaveFrameset),先保存框架文件,接着会出现提示,逐个保存框架中的网页
2. 保存时注意名称
五、 框架编辑
1. 框架面板:
窗口(Windows)à其它(Other)à框架(Frame)调出框架面板
2. 选定框架组:
单击整个框架组的边框;或在框架面板中单击整个框架的边框
3. 框架属性:
名称、源文件,滚动否,是否可以调整大小,是否有边框,边框颜色,边界宽度,边界高度等
4. 拆分框架:
按Alt键,拖动边框;修改(Modify)à框架页(Frameset)à拆分左/右/上/下(splitframetop/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题所得出的代码写在作业本上比较
Dreamweaver教案六(三课时)
教学目的:
掌握层的相关操作,为动画设置打基础
教学难点:
z-index、子层
教学重点:
层的属性
一、 复习引入
*网页中的定位——表格
二、 建立层
1. 菜单,插入(Insert)à层(Layer),默认大小:
200╳115
2. 对象面板
三、 层的意义
1. 可以将元素重叠
2. 可以用于精确定位网页元素
3. 可以通过应用时间线使层移动和变换,实现简单的动画效果
4. 网页和网页元素的可见或不可见可以通过层的显示和隐藏属性实现
5. 层可以转换成表格
四、 层所对应的HTML代码
absolute;left: 69px;top: 79px;width: 305px;height: 148px;z-index: 1">
五、 层属性
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. 防止重叠(PreventOverlap):
3. 缩放层:
4. 移动层:
5. 对齐层:
6. 改变层的可见性
7. 改变层的Z轴属性
例:
阴影字的制作
七、 子层
1. 在一个层中再插入一个层,后者就是前者的子层
2. 子层不一定在父层里面
3.移动子层,父层位置不发生变化
4. 移动父层,子层跟着变化,对父层的相对位置不变
5. 子层可以继承父层的可见性
八、 层与表格的转换
1. 层转换为表格:
修改转换层到表格
2. 表格转换为层:
修改转换表格到层
九、 作业:
1、 制作阴影字
2、 用层将5个图片放置围绕一个图片
3、 将上题结果转换为表格
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver网页设计 授课教案 Dreamweaver 网页 设计 授课 教案