网页设计实训指导书.docx

网页设计实训指导书.docx

《网页设计实训指导书.docx》由会员分享，可在线阅读，更多相关《网页设计实训指导书.docx（14页珍藏版）》请在冰点文库上搜索。

网页设计实训指导书

实训1　创建本地站点、整体控制页面

一．实训目的

（1）熟悉Dreamweaver8的界面布局和工作环境。

（2）熟练掌握本地站点创建和管理的方法。

（3）掌握页面属性的设置方法。

 （4）掌握在网页中输入文本、输入空格、实现文本换行和编辑文本的方法。

（5）学会在网页中插入水平线和日期。

（6）掌握网页文本格式化操作。

（7）掌握图像的插入方法，图像属性的设置方法。

（8）掌握图像与文本混合编排的方法

二．预览效果

本次实训的浏览效果如图1所示。

                  图1网页效果

三．实训内容

（1）创建一个命名为“site”的本地站点。

（2）创建一个命名为“huiyi.html”的网页文档。

（3）根据图1所示的网页浏览效果合理设置页面属性，页面属性的各个参数值自行确定。

（3）在网页中输入文字、水平线和日期，设置文本的属性。

（4）在网页中插入图像，设置图像的属性，实现图文混排效果。

实训2　网页布局之一

一．实训目的

（1）掌握利用表格布局网页中的文字、图像等页面元素的方法。

（2）掌握应用表格存储文本或数据，且对数据进行有序排列。

（3）掌握利用表格将形状规则的小图片合成形状不规则的大图片的操作方法。

（4）掌握应用布局表格和层的方法布局网页中的文字和图片的方法。

二．预览效果

本次实训的浏览效果如图2所示。

三．实训内容

（1）在站点“site”根文件夹中新建一个子文件夹“实训2”，在该子文件夹中创建一个命名为“shuiguo.html”的网页文档。

（2）设置网页shuiguo.html的页面属性。

（3）先插入一个2行2列的表格

（4）将第1行的两个单元格合并，再插入图片

（5）在第2行第1列的单元格内再插入6个鼠标经过图像

（6）第2行第2列的单元格内再在插入一个2行4列的表格

（7）在新插入的表格各单元格内分别插入图片、输入文字

实训3　"布局表格"的运用

一．实训目的

（1）掌握布局表格和布局单元格的插入方法。

（2）掌握布局表格和布局单元格的编辑方法

（3）能够综合运用“布局”表格和“标准”表格完成页面的布局设计

二．预览效果

本次实训的浏览效果如图3所示

                图3 页面效果

三．实训内容

（1）在站点“site”根文件夹中新建一个子文件夹“实训3”，在该子文件夹中创建一个命名为“fuxinlou.html”的网页文档。

（2）设置网页shuiguo.html的页面属性。

（3）将整个页面分为页头、正文、页尾三个部分，每部分为一个单独的表格

（4）页头表格按标准表格进行设计

（5）在正文对应的部分先插入一个布局表格，设置表格的背景图，并将表格的大小调整为背景图一样大

（6）在布局表格中在各版块对应的位置分别插入布局单元格

（7）在“标准”视图中，对各布局单元格中的内容进行详细设计。

实训4　“模板”的运用

一．实训目的

（1）了解模板在网页设计中的地位与作用；

（2）掌握模板的创建与编辑方法。

（3）掌握模板的应用方法。

二．预览效果

本次实训的浏览效果如图4至5所示

                            图5

                                  图6

三．实训内容

（1）在站点“site”根文件夹中新建一个子文件夹“实训4”

（2）分析两个页面在结构布局上的共同点

（3）打开"资源"面板--"模板"---"新建",创建一个名为moban.dwt的模板文件

（4）编辑moban.dwt的内容,按网页设计的方法,对模板进行设计（同网页设计的方法）

（5）在模板中将应用到网页后需要修改的部分定义为可编辑区域

（6）保存模板

（7）新建网页index.htm,选择模板moban.dwt,应用到网页后修改相应部分

（8）按同样的方法设计网页fq.htm

四．操作提示

（1）创建基本模板的网页文档时，应先创建模块文件，模板文件创建后存放在“Templates”文件夹中，该文件夹由系统自动生成的。

然后将模板文件中的某些区域设置为可编辑区域。

（2）库文件创建后位于“资源”面板的“库”子面板中，在网页中插入库文件应先切换到“资源”面板的“库”子面板，选择要插入的库文件，然后单击该面板中左下角的【插入】按钮。

（3）为框架网页导入框架源文件时，利用“框架”面板选中对应的框架，然后在框架属性面板中选择已制作好的网页文件。

实训5　“框架”的运用

一．实训目的

（1）了了解在网页设计中运用框架技术的优势与弊端；

（2）掌握框架的拆分与属性设置。

（3）能将超链接和框架结合起来设计网页。

二．预览效果

本次实训的浏览效果如图6所示

                          图6

三．实训内容

（1）在站点“site”根文件夹中新建一个子文件夹“实训5”

（2）分别页面上部、左部、下部和中间部分的内容设计为网页top.htm,left.htm,bottom.htm,1.htm,2.htm,3.htm,4.htm,5.htm

（3）建立如下的框架结构

                   图7

（4）利用“框架”面板选择相应的框架，给各框架分别命名为topframe,leftframe,mainframe,bottomframe

（5）在“文件”菜单中选择“框架集另存为”将整个框架集保存为index.htm（框架集的作用是用于保存整个框架集结构及每个框架的设置）

（6）利用框架面板选择框架topframe,在属性面板中将其源文件设置为网页top.htm

（7）利用框架面板选择框架leftframe,在属性面板中将其源文件设置为网页left.htm

（8）利用框架面板选择框架bottomframe,在属性面板中将其源文件设置为网页bottom.htm

（9）利用框架面板选择框架mainframe,在属性面板中将其源文件设置为网页gxlc.htm

（10）对各框架的源文件设置完成后，观察各框架内网页间的距离。

若不合适，可通过在“页面属性”中设置各网页的边距来调整（

若框架mainframe不能全部显示其内的网页，则将给框架设置滚动条）

（11）选择leftframe框架内网页中的图片“工作流程”，给其设置链接，链接文件为gzlc.htm,目标为mainframe

（12）选择leftframe框架内网页中的图片“经典案例”，给其设置链接，链接文件为jdal,目标也为mainframe

（13）按同样的方法给其它项目设置超链接，但要注意它们的链接文件打开目标位置都为mainframe

实训6　浮动框架的运用

一．实训目的

（1）了解普通框架和浮动框架的区别

（2）掌握在网页中使用浮动框架的操作方法。

二．预览效果

本次实训的浏览效果如图8所示。

三．实训内容

（1）在站点“site”根文件夹中新建一个子文件夹“实训6”，在该子文件夹中创建一个命名为“index.html”的网页文档。

（2）将各景点对应的链接内容分别设计为网页如1.htm,2.htm,3.htm等；

（3）选择index.htm网页中间的空白单元格，进入代码视图，修改代码为：

（4）给左边的文字设置链接，定义目标为浮动框架main

实训7　CSS样式的运用

一．实训目的

（1）了解CSS样在网页设计中的地位与作用

（2）掌握CSS样式的定义方法与应用方法；

（3）能熟练运用CSS样式对网页的设计效果进行美化

二．预览效果

本次实训的浏览效果如图9所示。

三．实训内容

（1）在站点“site”根文件夹中新建一个子文件夹“实训7”，在该子文件夹中创建一个命名为“css.html”的网页文档。

（2）创建样式,用于定义网页中的文字大小设为12像素。

由于是定义所有文字的格式，所以可通过重定义body标签来实现

（3）定义样式.line1设计网页的外框

（4）选择表格，在表格属性中的“类”中选择刚才定义的样式.line1

（5）内嵌表格中竖线效果的设计（定义样式.line2）

（6）选择内嵌表格的中间单元格，修改代码为：

（7）在网页中的其它相应表格和单元格上分别应用样式.line1和.line2

（8）设计样式.addglow

（9）选择文字所在的单元格，在属性面板上的“类”中选择样式.addglow