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代码中是如何表示的?
RGB方式表示颜色:
红绿兰,0表示最弱,255表示最强一共可以表示:
256╳256╳256=16777216种颜色由于浏览器的关系,只有216种颜色能在浏览器中正常显示,多于这个范围的颜色,有的浏览器显示时就可能发生偏差,不能正常显示。
这个范围我们称之为网页安全颜色范畴2.网页中运用颜色原则
l切忌采用过多的颜色;
2背景颜色不要太深;
3要保持整个网页的色调统一;
4要围绕网页主题选择颜色
二、网页中的图像格式
*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">