网页设计与制作实训指导书 下载本文

实训八 样式设计

一、 实训目的和要求

按照实训四所完成的站点规划书的要求完成站点设计和制作中的HTML样式和CSS样式的创建。 二、 实训内容

1. HTML样式的创建。 1) 创建字符型的HTML样式。 2) 创建段落型的HTML样式。 2. CSS样式的创建。 1) 创建自定义的CSS样式。 2) 创建HTML标记的的CSS样式。

3) 创建CSS选择器的CSS样式。(用于创建伪锚名)。 三、 实训准备

Dreamweaver 8中文版 。 四、 实训步骤

1. HTML样式的创建。 2. CSS样式的创建 1) 内部CSS样式创建。

2) 外部链接CSS样式单文件的创建。 五、 实训方法

机房利用本机软件完成。 六、 考核办法

此部分实训内容采用全体考察的方法,以百分制为满分,具体评分标准如下: 1. HTML、CSS样式(内部、外部)创建的熟练程度(30分) 2. HTML、CSS样式(内部、外部)创建的操作正确性(40分) HTML、CSS样式(内部、外部)创建的结果正确性(30分) 七、 思考与练习

1、 导入外部链接的CSS样式单文件和链接外部的CSS样式单文件有什么

区别?

13

2、 CSS样式中自定义的CSS样式、HTML标记的CSS样式和CSS选择器

样式各有什么独特的作用 ?

14

实训九 首页模板设计

一、 实训目的和要求

按照实训四所完成的站点规划书的要求以及实训五的整体布局设计中的首页布局设计完成首页模板的整体设计和填充。 二、 实训内容

首页模板的制作和内容的填充。 三、 实训准备

Dreamweaver 8中文版 。 四、 实训步骤

1. 根据《实训五 整体布局设计》中的首页布局设计制作首页模板。 2. 在模板中插入实训六、七、八所设计好的资源和素材进行模板内容的填

充,形成站点的首页。

五、 实训方法

机房利用本机软件完成。 六、 考核办法

此部分实训内容采用全体考察的方法,以百分制为满分,具体评分标准如下: 1. 关于模板操作的熟练程度(50分) 2. 关于模板操作的正确性(50分) 七、 思考与练习

15

实训十 二级页面模板设计

一、 实训目的和要求

按照实训四所完成的站点规划书的要求以及实训五的整体布局设计中的首页布局设计完成二级模板的整体设计和填充。 二、 实训内容

二级页面模板的设计和填充。 三、 实训准备

Dreamweaver 8中文版 。 四、 实训步骤

1. 根据《实训五 整体布局设计》中的各二级页面布局设计制作二级页面模

板。

2. 在模板中插入实训六、七、八所设计好的资源和素材进行模板内容的填

充,形成站点的各个二级页面。

五、 实训方法

机房利用本机软件完成。 六、 考核办法

此部分实训内容采用全体考察的方法,以百分制为满分,具体评分标准如下: 1. 关于模板操作的熟练程度(50分) 2. 关于模板操作的正确性(50分) 七、 思考与练习 无

16

实训十一 各页面的细化、测试和上传作品

一、 实训目的和要求

按照实训四所完成的站点规划书的要求细化页面,使其达到最优的效果并进行测试和上传作品。 二、 实训内容

1. CSS样式的应用和调整。 2. 页面布局的调整。

3. 页面文本、图片以及媒体内容的进一步细化。 4. 链接的测试。 5. 作品的上传。 三、 实训准备

Dreamweaver 8中文版 、PhotoShop7.0以上中文版本 。 连接因特网的局域网。 四、 实训步骤

1. 按照站点规划书的内容要求对各个页面进行CSS样式的应用。 2. 细化各个页面,对各个页面的图像、表格、链接进行适当的调整,使站

点更加美观。 3. 测试所有链接。

4. 在本地站点中测试整个站点的运作情况,并进行相应的调整。 5. 利用CuteFtp工具进行作品上传。。 五、 实训方法

机房利用本机软件完成。 六、 考核办法

此部分实训内容采用全体考察的方法,以百分制为满分,具体评分标准如下: 1. CSS应用操作的熟练程度(20分)。

2. 页面布局的微操作(表格、布局视图、层等)熟练程度(10分)。 3. 图片、链接调整的为操作熟练程度(10分)。 4. CuteFtp的使用熟练程度。(50分)。 七、 思考与练习

17