dreamweaver8网页实用设计教案Word文档下载推荐.docx

dreamweaver8网页实用设计教案Word文档下载推荐.docx

《dreamweaver8网页实用设计教案Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《dreamweaver8网页实用设计教案Word文档下载推荐.docx（45页珍藏版）》请在冰豆网上搜索。

（2）创建HTML网页

（3）在网页中插入图像

输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。

3、巩固练习

练习使用界面中的各个工具

七、作业处理

根据本节所学的内容，课堂上练习创建一个空白网页，并且输入一段文字，在文本的左边插入一张图片

八、教具

所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。

第二章创建与规划站点

规划站点及创建静态站点

1、站点规划概念

2、站点规划的方法

3、站点的组成

4、定义站点

1、站点组成

2、如何创建静态站点

1、站点的定义

2、编辑、删除站点

1、掌握建立静态站点的流程

2、掌握静态站点的基本操作

1、复习引入

由上节所学习的建立HTML网页引出站点概念

2、讲授新课

（1）站点规划概念及方法

概念：

所谓本地站点，就是指定本地硬盘中存放远程站点所有文档的文件夹

方法：

规划网站一般需要从3个方面去思考，即网站的主题、网站的内容和网站的对象。

（2）创建本地站点

站点组成：

Dreamweaver8站点由3部分组成，具体内容取决于环境和所开发的Web站点类型。

包括本地文件夹、远程文件夹、动态页文件夹

定义站点：

（01）选择“站点”|“新建站点”选项，或者选择“站点”｜“管理站点”选项，在弹出的“站点管理”对话框中单击“新建”按钮，弹出对话框，在“基本”选项卡的站点名称输入框中输入所要创建站点的名称，如图2-5所示

（02）输入站点名称后，单击“下一步”按钮，在弹出的是否使用服务器技术对话框中，根据自己所制作网页的类型，确定是否使用服务器技术。

在此制作静态页面，因此不使用服务器技术，如图2-6所示。

（03）单击“下一步”按钮，在弹出的设置站点文件夹对话框中，选择或输入一个本地文件夹作为“本地站点文件夹”，如图2-7所示。

（04）选择了本地站点文件夹后，单击该对话框中的“下一步”按钮，进入设置是否与远程服务器相连的对话框，在这里选择“无”，设置为不与远程服务器相连，如图2-9所示。

（05）单击“下一步”按钮，便会显示在站点定义向导中所选择设置的详细报告，如果感觉满意，单击“完成”按钮，完成本网站的创建，如图2-10所示；

否则单击“上一步”按钮重新修改各项设置。

（3）站点的基本操作

其基本操作包括编辑、复制、删除站点。

练习站点的建立，及其基本操作。

在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹，在dreamweaver中创建一个静态站点，将站点信息存放到我的站点文件夹中。

搭建动态网站服务器及创建动态站点

1、安装IIS

2、动态站点与静态站点的区别

3、搭建动态站点

动态站点与静态站点的区别

1、虚拟目录的概念

2、动态站点的定义

3、站点测试

1、学会安装IIS，知道IIS的作用

2、学会创建虚拟目录

3、会创建动态站点

先提出静态站点的作用及限制性，引入动态站点的功能

（1）安装并启动IIS（现场操作）

（2）定义一个动态站点

步骤：

<

01>

设置虚拟目录。

（1）在本地磁盘“C:

\”下新建一个site文件夹作为本地站点的根文件夹。

（2）设置web共享。

找到“C:

\site”文件夹，选中并右击该文件夹，从弹出的快捷菜单中选择“共享和安全”选项。

在打开的“site属性”对话框中，选择“Web共享”选项卡，如图2-19所示

（3）设置“编辑别名”对话框。

选中“共享文件夹”单选按钮，在弹出的“编辑别名”对话框中将“别名”设置为site；

在“访问权限”中选择“读取”；

在“应用程序权限”中选择“脚本”，如图2-20所示。

最后单击“确定”按钮关闭对话框，便完成了定义动态站点的准备工作。

02>

进入“高级”选项卡。

（1）选择“站点”|“新建站点”选项，选择“站点定义”对话框中的“高级”选项卡。

（2）从“分类”列表框中选择“本地信息”（默认选项）选项，如图2-21所示。

03>

设置“本地信息”的各参数（见图2-22

04>

设置“测试服务器”的各参数（见图2-23）。

05>

显示结果。

（3）测试站点

将ch02\test.asp文件复制到C:

\site文件夹中，并使用Dreamweaver8打开test.asp。

单击浏览器中“预览/调试”按钮，或者按F12键在浏览器中运行test.asp页面。

出现如图2-25所示的成功页面。

若浏览器提示找不到服务器，则需重新搭建ASP服务器。

在课堂上要求每一个同学在F盘下建立一个名为”我的动态站点”的文件夹，将其设置为虚拟目录，在dreamweaver中创建一个动态站点，将站点信息存放到我的动态站点文件夹中。

第三章文本及其格式化

输入文本及其格式化

1、输入普通文本

2、插入符号、日期

3、使用项目列表

1、插入符号、空格和日期

2、使用项目列表

1、项目列表

1、掌握文本输入方法

2、掌握日期的插入

3、掌握项目列表的使用

首先例用一个已完成的网页，让学生来看别人的设置，由此引入文本的格式化。

（1）文本的输入

两种方法：

a:

直接在文档窗口中输入文本。

即先选择要插入文本的位置，然后直接输入文本。

b:

在其他编辑器中复制已经生成的文本，然后切换到Dreamweaver8文档窗口中，将选取插入点，然后选择“编辑”|“粘贴”选项。

（2）创建项目列表

类型：

无序列表、有序列表、定义列表、目录列表和菜单列表。

（3）插入日期

练习各种项目列表的使用

要求每一个同学建立一个名为“我的网页”的空白文档，在网页中输入文字，然后在右下角插入日期，在内容当中便用有序列表。

CSS样式

1、演示并讲解CSS的应用

2、CSS的基本概念

3、CSS的特点

4、CSS样式定义

5、CSS常用属性与值

1、掌握CSS样式定义

2、掌握CSS常用属性与值

2、CSS常用属性与值

3、能独立完成CSS样式的应用

1、掌握CSS的基本概念

2、掌握CSS样式定义

3、掌握CSS常用属性与值

向学生演示多个项目：

成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。

讲解完毕后学生完成课后作业，教师实施指导。

第一步：

演示并讲解用CSS样式制作的网页。

第二步：

分步演示并讲解CSS样式的基本概念。

第三步：

讲解并分析CSS常用属性与值。

第四步：

结合CSS样式的使用制作网页

课程小结。

课堂上进行计论：

讲解并分析CSS的知识点。

结合CSS样式的使用制作网页

第四章表格

表格创建及设置

1、创建表格

2、添加表格对象

3、自动套用表格格式

1、创建表格

2、自动套用表格格式

套用表格格式

1、掌握创建表格的基本方法

2、会使用自动套用表格格式

网页需要进行排版，由报纸的排版引入网页的排版，由此提出表格的作用

（1）创建表格

将光标停放在页面需要创建表格的位置。

如果未打开“插入”工具栏，可以在文档窗口单击按钮。

如果在文档窗口中找不到该按钮，可使用Ctrl+F2快捷键切换“插入”工具栏的显示或隐藏状态，

在“常用”标签中，单击“表格”按钮

弹出“表格”对话框

输入要插入表格的行数，在此输入2。

列数输入要插入表格的列数，在此输入3

单击“确定”按钮

（2）套用表格格式

创建一个表格，练习格式的套用。

在课堂上创建一个五行四列的表格，要求边框为0，宽150，高254的表格。

表格的应用

1、设置单元格

2、表格的基本操作

表格的编辑

排序表格

1、掌握表格的基本操作

2、能够熟练设置单元格格式

（1）文字的定位：

空格、回车

（2） 

图片的定位：

垂直边距、水平边距

2、 

表格

插入表格：

插入（Insert）表格（table），或者在对象面板

行数（row） 

列数（column）

边距（cellpadding）：

单元格中的内容与单元格边框之间的距离

间距（cellspacing）：

单元格之间的距离

宽度（width）：

可以是像素（pixel）或百分比为单位（percent）

边框（boder）：

属性面板：

只有在选定整个表格时才出现表格属性

在表格中也可以通过右击，调出的快捷菜单中选择表格来对表格进行设置清除行高和列宽按钮

改变列宽单位按钮

背景颜色：

边框颜色：

设置整个表格的格线颜色

背景图像：

3、 

表格所对应的HTML代码

表格：

[table][/table]

行：

[tr][/tr]

列：

[td][/td]

4、 

（1）表格的嵌套

（2）在网页中，要进行复杂的定位，一般需要用到嵌套表格。

不过，一般不超过三层。

复制剪切粘贴

（3）插入行、列，删除行列

（4）合并单元格，拆分单元格

（5）改变行、列、表格的大小：

拖放，属性面板精确定义

（6）表格模板：

命令（command）格式化表格（formattable）

根据课本上的实训作出一个精美课程表网页

第五章图像

图像插入及属性设置

1、图像的类型

2、插入鼠标经过图像

插入图像

图像属性

1、掌握图像的插入方法

2、掌握图像属性设置

网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？

RGB方式表示颜色：

红绿兰，0表示最弱，255表示最强一共可以表示：

256╳256╳256=16777216种颜色由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。

这个范围我们称之为网页安全颜色范畴

网页中运用颜色原则 

：

切忌采用过；

背景颜色不要太深；

要保持整个网页的色调统一；

要围绕网页主题选择颜色

（1）网页中的图像格式*BMP：

位图格式

GIF：

GraphicsInterchangeFormat可交换的图像格式特点：

只支持256种颜色支持透明效果、可以交错下载、可以实现动画效果、文件所占用空间小、不能支持渐变色彩、更改图片大小要从原文件改起

JPEG：

JointPhotographicExpertsGroup联合摄影专家组文件格式特点：

支持24位图像、有损压缩。

（2）插入图像

练习设置图像的属性。

在表格中插入一张背景图像。

制作地图网页及电子相册

1、制作地图网页

2、电子相册

实验课

制作地图网页

热点选择

1、掌握图像使用

2、掌握图像的其它操作

此节是实验课，实验步骤为：

（01）启动Dreamweaver8，打开ch05\SAMPLE01\MAP.ASP文件。

（02）选中该文档中“丝绸之路示意图”图像。

（03）在菜单栏中依次选择“窗口”|“属性”选项或按下Ctrl+F3组合键，打开“属性”面板，如果没有显示图像地图制作工具，单击“属性”面板右下角的扩展箭头，

（04）在“属性”面板中的“地图”文本框中输入图像地图名称。

（05）创建图像地图（热区），可根据地图中不同的形状选择不同的热区工具，在所选定图像上拖动鼠标指针，便可完成图像地图的创建。

（06）图像地图创建完成后，选中所创建的热区，打开“属性”面板。

在热点“属性”面板的“链接”文本框中输入链接文件的名称，或者单击文件夹图标并通过浏览选择在用户单击该热点时要打开的文件。

在“目标”下拉列表中，选择用于打开该文件的窗口。

（07）在“地中海”创建一个矩形热区，在“替换”框中输入“关于地中海的论述”替代文本，并设置好链接（链接到DZH.ASP）。

（08）按照相同的方法分别为不同的路线或地名创建热区，并输入不同的链接和替代文字，

保存并预览。

当鼠标指针移到图像地图中时将显示“替换”框中的内容，如果设置有链接，单击便可进入所链接的文档。

（9）完成创建。

第六章框架

框架集的创建及其基本操作

1、演示并讲解用框架制作的网页

2、框架的基本结构

3、框架的各种属性

4、框架结构之间的链接

1、框架的各种属性

2、框架结构之间的链接

2、框架结构之间的链接

1、掌握框架的基本结构

2、掌握框架的各种属性

3、掌握框架结构之间的链接

1、复习引入

回忆：

Frontpage中的框架应用

2、框架的应用

重复出现在不同网页文档中的元素：

网页标题、导航栏等等

3、建立框架

（1）将对象面板切换到框架页（Frame）

（2）插入不同的框架，一个区域对应于一个页面 

（3）在框架中打开原有网页：

文件（File）à

在框架中打开（OpeninFrame） 

4、保存框架 

（1）选择文件（File）/保存所有框架（SaveFrameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页

（2） 

保存时注意名称

5、框架编辑

框架面板：

窗口（Windows）à

其它（Other）à

框架（Frame）调出框架面板

选定框架组：

单击整个框架组的边框；

或在框架面板中单击整个框架的边框

框架属性：

名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等

拆分框架：

按Alt键，拖动边框；

修改（Modify）à

框架页（Frameset）à

拆分左/右/上/下（splitframetop/bottom/left/right）

*注意区别：

插入一个新的框架与拆分框架的区别

6、 

框架所对应的HTML代码

框架组：

通过设置rows或cols来设定是横的还是竖的，是顶部还是底部

框架组属性：

frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距

框架项：

src指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小 

1、建立框架页面如图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开

建立左右型的框架，并在其中的左框架中插入上下型的框架3、建立左右型框架，并将左边的框架拆分为上下型

创建电子图书

利用框架制作电子图书网页

框架结构之间的链接

框架集

1、掌握框架的运用

2、掌握框架结构之间的链接

（01）打开或新建一个空白的文档，在该文档中创建一个框架集。

（02）命名框架。

将左列框架命名为index、右列上部框架命名为_top、右列下部框架命名为main。

（03）保存框架。

将框架集保存为06A.asp文档，index框架保存为06B.asp文档，_top框架保存为06C.asp文档，main框架保存为06D.asp，文档均保存在ch06文件夹下。

（04）设置框架的行或列。

将index框架的列设置为150像素，_top框架的行设置为90像素。

（05）设置页面的配色方案。

单击“属性”面板中的“页面属性”按钮，将index框架的06B.asp文档的文本颜色设置为#669966，背景颜色设置为#FFCC99。

（06）将链接颜色按图6-14右侧图进行设置，然后单击“确定”按钮。

（07）定义样式。

选择“文本”|“CSS样式”|“新建”选项，将index框架的06B.asp文档的tr标签定义为宋体9points。

（08）填充页面。

在index框架06B.asp文档中输入如图6-15所示的文本并插入一个9行1列的表格。

其中“休闲娱乐”文本为隶书5号字体，颜色为#66CC00；

表格边框的颜色为白色；

单元格的高度为30像素，单元格的对齐方式为水平居中、垂直居中。

（09）在“页面属性”对话框中将_top框架的标题设置为“标题栏”，将所有边界都设置为0

（10）将光标停留在_top框架中，输入文本并插入images文件夹下的图像，其中文本为4号宋体，颜色为#66CC00。

（11）设置链接。

选中左边框架（index）中目录下的“考试作弊”文本，在“属性”面板中的“链接”框中设置与之对应的笑话内容（WJ/wj6-1.asp）的链接。

这时“目标”框变为激活状态，从“目标”下拉列表框中选择链接的目标为main。

（12）使用相同的方法设置其他“笑话”目录所链接的内容和链接目标，其他的链接目标均为main框架。

笑话目录各项和WJ文件夹中wj6-1.asp～wj6-8.asp是一一对应的关系。

（13）指定框架源文件。

选中main框架，在“属性”面板中的“源文件”文本框中设置框架的源文件。

单击旁边的文件夹，选择WJ文件夹中wj6-1.asp文件

（14）在文档窗口的菜单栏中选择“文件”|“保存全部”选项，将所有的框架进行保存。

（15）按F12键便可预览该实例

第七章页面布局视图的使用

布局表格和布局单元格的基本知识及操作

1、布局表格和布局单元格的基本知识

2、布局表格和布局单元格的创建

创建布局表格和布局单元格

布局表格的使用

1、掌握布局的基本知识

2、熟练运用布局表格和布局单元格

在第四章学习过了表格的布局，用表格与布局表格相比，看其特点，从而使学生更加了解什么是布局表格和布局单元格。

（1）布局表格的基本知识

（2）布局表格和布局单元格的基本操作

选择布局表格：

须要执行下列操作之一：

双击所绘制的布局表格中的标志。

单击文档窗口左下角的<

table>

标签，如图7-3所示。

调整布局单元格的大小:

具体操作步骤如下：

（01）选中要调整的布局单元格。

（02）选择布局单元格边线上的调整手柄，拖动鼠标便可调整布局单元格的大小

移动布局表格和布局单元格:

（01）选中要移动的布局表格或布局单元格。

（02）使用方向键便可移动布局表格或布局单元格了，但这样每次只能移动1像素的距离；

如果是在按下Shift键的同时再利用方向键移动，每次可移动10像素的距离。

设置布局宽度