Dreamweaver网页设计 授课教案.docx

Dreamweaver网页设计 授课教案.docx

《Dreamweaver网页设计 授课教案.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页设计 授课教案.docx（11页珍藏版）》请在冰点文库上搜索。

Dreamweaver网页设计授课教案

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）

（设置页面边界（LeftTop）:

使内容与边框没有空隙7

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切忌采用过多的颜色;

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）

（边框（boder）:

7

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（无框架提示<body></body>

七、作业

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">