网页设计综合实训指导方案实例

《网页设计综合实训》实训指导方案

一、实训目的与规定

《网页设计综合实训I》重要目日勺是让学生通过这门实践课程向学

习理解和掌握网页设计的基本措施，通过不停上机实习训练到达处理

实际日勺问题。因此，在本学期特设置此课程设计，集中一段时间使学

生综合运用所学习口勺网页制作知识及此前所学习的计算机方面注勺知

识，按照网站制作的流程，完毕一种相对详细、综合的网站，全面巩

固学生的知识，培养学生处理实际问题於J能力，从而到达学以致用的

目的。

二、实训内容

1.实例实训

以一种电子商务静态网站设计日勺实例指导学生怎样独立完毕

电子商务静态站点的设计和制作。让学生在机房实际操作，按

照给定H勺实例完毕实例中站点W、J创立和设计制作。

2.自建站点实训

让学生自行选择站点H勺主题，从规划站点到上传文献一步一步

完毕整个站点的创立、调试和上传工作。

3.总结

对学生H勺所有作品进行考核，并选择经典W、J案例对实训W、J成果

进行考核。

三、参照课时

标题实训内容实训课时

预备实训动员1

实训一基本知识回忆1

实训四实训作品的站点规划2

实训五整体布局设计3

实训六搜集和创立资源3

实训七页面素材设计3

实训八样式设计3

实训九首页模板设计2

实训十二级页面模板设计2

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

实训十二总结1

总计24

四、实训材料准备

1.软件准备

Dreamweaver8中文版、PhotoShop7.0以上版本、Flash中文版

（本实训对FLASH技术不做规定）。

2.硬件准备

网络条件：与因特网连接的局域网。

教师用机：Windows2023Server及以上版本。

学生用机：Windows2023Professional及以上版本。

五、综合实训考核措施:

1）系统文档20分

2）编写代码30分

3）程序调试10分

4）实训出勤20分

5）技术含量10分

6）美工设计10分

实训一基本知识回忆

一、实训目的和规定

温习网页制作内课程重点难点，使学生对Dreamweaver8各方面

的操作知识系统的由“片”的认识转向“面”的认识。

二、实训内容

Dreamweaver8口勺基本操作：站点、表格、图像、链接、框架等。

三、实训准备

Dreamweaver8中文版。

四、实训环节

各实训指导教师按照所代学生口勺状况不一样选择性地按下列环

节温习Dreamweaver8区I重点难点知识。

（一）站点创立和规划

1.当地站点的创立管理

2.站点视图的使用措施

（二）链接日勺处理方式

1.相对途径

2.链接到命名锚

3.管理链接

（三）图像日勺处理措施

1.插入图像的有关操作

2.使用导航条

3.客户端图像映象

［四）布局视图、表格和层的I应用

1,使用布局视图的有关操作

2.自动伸展类型的版面宽度

3.草稿图时使用

4.有关插入表格的有关操作

5.创立分层、使用分层时口勺操作

6,使用分层面板

7.运用分层排版时的注意事项

（五）框架

1.框架和框架集的某些标识性概念

2.创立框架

3.框架文献的存储

4.框架和框架集属性的设置

5.在框架中使用链接

（六）CSS样式

1.创立三种类型日勺CSS样式

2.创立外部链接W、JCSS样式单。

五、实训措施

使用投影进行讲解演示，并抽样进行检查。

六、考核措施

此部分实训内容采用抽样考察的措施，考核以操作的纯熟程度和

对的性为评分原则，以A（优秀）、B（良好）、C（及格）、D（不及

格）为成绩原则。

七、思索和练习

1.创立一种表格，预览效果为各边框珞式是虚线、颜色是红色、

各边框的宽度为1像素（px）。

2.在制作站点时，会碰到CSS样式的处理，而CSS样式有两种处

理措施：一是应用于单一文档的CSS样式；二是外部连接的

CSS样式单。请问建立站点时怎样选择为最优。

3.怎样处理由于浏览辨别率的不一样所导致区I网页布局错位口勺

现象。

4.怎样运用层（Layer）来制作下拉式菜单。

实训二实例一讲解

一、实训目的和规定

通过对一种详细的静态电子商务网站II勺解析，使学生理解制作电

子商务静态站点的环节，让同学们对静态电子商务网站的粗略和宏观

认识得到细化，使其懂得怎样独立面对静态电子商务网站的设计。

由实训指导教师自行选择站点作为实例。实例规定如下：

1.站点系电子商务有关站点。

2.站点模块功能清晰，虽然是静态站点，但也能反应各模块口勺基

本功能。

3.为了便于教学，站点应当具有布局（表格/布局视图/层/框架）、

图像、链接、css样式等网页设计制作中常用n勺知识点和操作。

二、实训内容

讲解和演示整个站点的制作过程和设计措施C

三、实训准备

Dreamweaver8中文版。

四、实训环节

1.由实训指导教师详细讲解静态电子商务站点（静态企业站点）

的设计措施和构成模块。

2.由实训指导教师详细演示首页和一种以上的二级页面H勺整个

制作过程（从站点创立开始）。

3.抽样检查学生的听课效果，在时间容许出J条件下，让学生上教

师机独立完毕页面制作。

4.对学生日勺抽样检查进行分析，重点讲解其失误或错误日勺地方。

五、实训措施

使用投影讲解演示，并抽样进行检查。

六、考核措施

此部分实训内容采用抽样考察的措施，考核以操作的纯熟程度和

对的性为评分原则，以A（优秀）、B（良好）、C（及格）、D（不及

格）为成绩原则。

七、思索和练习

1.怎样优化企业站点创立规划阶段的公共资源和独有资源口勺存

储措施？

2.静态电子商务站点aI创立应当遵照那些基本要素？

实训三实例一操作

一、实训目的和规定

将实训二时内容在机房进行操作，让学生切实地对静态电子商务

站点n勺设计进行操作。

二、实训内容

对给定的实例站点进行分析，并进行制作，最终由实训指导教师

为每一位学生的制作成品进行考核。

三、实训准备

Dreamweaver8M文版、PhotoShop7.0以上版本、制作站点时不

能在机房完毕的或以学生能力不能制作口勺素材。

四、实训环节

1.准备工作：

I）站点时创立和规划C

2）设计素材和内容素材的准备。

3）CSS样式日勺准备。

2.设计工作：

1）草稿图的制作。

2）映射草稿图，按照草稿图出J设计运用布局视图进行版面布

局。

3）布局完毕后，进行内容素材和设计素材等有关素材对象日勺

插入工作。

3.细化工作：

1）对内容、表格、链接、图片等进行CSS样式H勺应用。

2）细化整个版面。

4.测试整个站点并交由实训指导教师进行考核。

五、实训措施

在机房进行实训，由实训指导教师亲临指导。

六、考核措施

此部分实训内容采用全体考察的措施，考核以操作的纯熟程度和

对『'J性为评分原则，以A（优秀）、B（良好）、C（及格）、D（不及

格）为成绩原则。

七、思索和练习

通过此部分实训，你与否纯熟掌握建立静态电子商务站点所需要

各知识点的操作技能？由那些需要深入的由教师在此后的课堂中

进行讲解和演示。

实训四实训作品的站点规划

一、实训目的和规定

使学生在创立站点之前对站点有总体II勺规划，让学生对自己即将

设计和制作的站点进行规划并完毕站点规划书的撰写。

实训作品的选题范围：

1、班级网站

2、个人网站

3、电子商务消费网站（为一种消费品制作电子商务站点）

4、电子商务企业网站（为某个企业制作电子商务站点）

由于是建立静态的电子商务站点，因此在讲解和分析站点规

划书时应当着重于站点的设计，而不是其他方面，静态口勺电子商

务站点没有交互式日勺访问模式和系统，因此只能是公布信息口勺工

具.这点请实训指导教师在讲课和指导时予以关切c

正式站点规划书见附录。

二、实训内容

让学生在因特网上申请免费日勺个人主页空间，向学生讲解站点规

划的重要性以及站点规划书日勺撰写措施，并由学生自行思索并完毕实

训指导书的撰写。

三、实训准备

Dreamweaver8中文版7、WORD2023以上版本。

四、实训环节

1.进行实训作品的选题并申请个人主页空间。

2.站点规划书的书写格式和措施的讲解。

3.详细讲解静态电子商务站点创立和制作的环节，并分析制作站

点规划书口勺重要性和必要性，使学生规范网站设计的流程。

4.学生思索并撰写自行创立站点的站点规划书。

五、实训措施

首先由实训指导教师在机房讲解站点规划书的书写措施和基本

格式，另一方面由学生针对所选的主题进行站点规划。

六、考核措施

此部分实训内容采用全体考察的措施，考核以站点规划书的完整

性、实用性和发明性为评分原则，以A（优秀）、B（良好）、C（及

格）、D（不及格）为成绩原则。

七、思索和练习

作为电子商务专'也，你觉得在撰写电子商务站点规划书应当着重

突出哪几种方面，为何?

实训五整体布局设计

一、实训目的和规定

在站点规划完毕的基础上，按照站点规划书进行网站整体口勺布局

设计。

规定：

L设计作品中的多种文献夹和文献名沟使用英文名（小写）；

2.设计作品首页文献名为index,htm、default,htni等；

3.设计作品中中文字体设定为简体字；

4.网页应有很好的浏览兼容性，同步应考虑显示辨别率（以

800*600为显示原则），浏览器为IE7.0以上；

5.主题鲜明，具有实用性，清晰体现设计意图；

6.构造清晰合理，便于浏览查找；

7.色彩搭配协调，页面美观，具有艺术品位；

8.注意下载速度、语言代码、导航效果、实用性、时效性；

二、实训内容

1.站点於J创立。

2.绘制草稿图。

3.运用草稿图对网站各页面进行布局设计。

三、实训准备

Dreamweaver8中文版/英文版、PhotoShop7.0以上版本。

四、实训环节

1.指导学生完毕站点的创立。规定如下:

1）站点文献夹以自己的班级和自己的学号的组合命名。

2）在站点文献夹中建立有关页面，以保证连接和图像处理操

作中途径的对的性。

3）所有的资源都保留在assets资源文献夹中，assets文献夹可

以细分为pic、animation>sound等子文献夹。

4）假如需要CSS样式单文献，则CSS样式单文献单独放置于

CSS文献夹中。

2.指导学生完毕草稿图时绘制，包括首页和一级页面。规定如下：

1）为了便于布局视图的绘制，草稿图的宽度统一为777像素,

高度根据站点内容进行设置。

2）草稿图统一用photoshop进行绘制。

3）草稿图卜必须表明每板块日勺内容名称C

3.指导学生运用草稿图进行网页各个页面的布局设计（使用布局

视图）。措施简述如下：

1）进入布局视图。

2）载入草稿图。

3）绘制一种布局表格覆盖整个草稿图，即绘制一种宽度为777

H勺表格。保证在辨别率变化日勺状况下，网页不会出现异常

现象。

4）分别对个板块绘制布局表格。

5）进行保留。

五、实训措施

机房操作。

六、考核措施

此部分实训内容采用全体考察的措施，以百分制为满分，详细评

分原则如下：

1.站点创立口勺规范性和纯熟程度（25分）

2.草稿图的绘制（20分）

3.草稿图附载入（5分）

布局视图的有关操作（50分）

七、思索和练习

布局视图和表格视图在版面布局中各有优势和劣势？对怎样日勺

版面布局应当用布局视图，又对怎样的版面布局应当用表格视图?

实训六搜集和创立资源

一、实训目的和规定

1.按照实训四所完毕口勺站点规划书的规定完毕站点设计和制作

中资源的搜集和创立工作。规定如下：

a）为了维护机房秩序，与因特网互联期间，由老师监督，不

可运用实训时间进行任何与实训无关的活动。

b）实训指导教师推荐资源站点供学生参照。

c）实训指导教师严格把关，保证资源创立和搜集的完整性。

二、实训内容

在因特网上搜索资源或在本机上创立所需资源。

三、实训准备

Dreamweaver8中文版、WORD2023以上版本、Photoshop7.0

以上版本、与因特网连接的局域网c

四、实训环节

根据网站规划书的内容和网站建设的需要，在因特网上搜索素

材，素材包括网页的信息内容和网页的主题设计内容。

五、实训措施

机房上网并运用本机软件完毕。

六、考核措施

此部分是学生在因特网和本机上进行资源的搜集和创立，故无

需进行考核，但需要指导学生按照站点规划书日勺规定完毕站点资源时

搜集和创立工作。

七、思索与练习

此部分是学生在因特网和本机上进行资源的搜集和创立，故无练

习。

实训七页面素材设计

一、实训目的和规定

按照实训四所完毕的站点规划书的规定完毕站点设计和制作中

的页面素材的设计工作。规定如下：

1.严格按照站点规划书的内容进行页面素材设计。

2.实训指导教师予以页面主题的有关指导。

二、实训内容

在本机上进行页面素材设计。

三、实训准备

Dreamweaver8中文版、WORD2023以上版本、Photoshop7.0

以上版本。与因特网连接的局域网。

四、实训环节

1.公共页面素材的设计C

2.首页独有页面素材的设计。

3.各二级页面独有页面素材的设计。

4.将设计好日勺素材文献寄存在资源文献夹中。

五、实训措施

机房运用本机软件完毕。

六、考核措施

此部分是学生在本机上进行页面素材日勺搜集和创立，故无需进

行考核，但需要指导学生按照站点规划书W,J规定完毕页面素材的创立

工作。

七、思索与练习

此部分是学生在本机上进行页面素材的创立，故无练习。

实训八样式设计

一、实训目的和规定

按照实训四所完毕的站点规划书的规定完毕站点设计和制作中

的HTML样式和CSS样式的创立。

二、实训内容

1.HTML样式口勺创立。

1）创立字符型的HTML样式。

2）创立段落型的HTML样式。

2.CSS样式的创立。

1）创立自定义内CSS样式。

2）创立HTML标识区|口勺CSS样式。

3）创立CSS选择器日勺CSS样式。（用于创立伪锚名）。

三、实训准备

Dreamweaver8中文版。

四、实训环节

1.HTML样式必J创立。

2.CSS样式时创立

1）内部CSS样式创立。

2）外部链接CSS样式单文献的创立。

五、实训措施

机房运用本机软件完毕。

六、考核措施

此部分实训内容采用全体考察的措施，以百分制为满分，详细评

分原则如下：

1.HTML、CSS样式（内部、外部）创立的纯熟程度（3（）分）

2.HTML、CSS样式（内部、外部）创立的操作对的性（40分）

HTML、CSS样式（内部、外部）创立的成果对时性（30分）

七、思索与练习

1、导入外部链接的CSS样式单文献和链接外部的CSS样式单文

献有什么区别？

2、CSS样式中自定义口勺CSS样式、HTML标识区ICSS样式和

CSS选择器样式各有什么独特的作用？

实训九首页模板设计

一、实训目的和规定

按照实训四所完毕的站点规划书的规定以及实训五的整体布局

设计中的首页布局设计完毕首页模板的整体设计和填充。

二、实训内容

首页模板的制作和内容口勺填充。

三、实训准备

Dreamweaver8中文版。

四、实训环节

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

板。

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

内容的填充，形成站点日勺首页C

五、实训措施

机房运用本机软件完毕。

六、考核措施

此部分实训内容采用全体考察的措施，以百分制为满分，详细评

分原则如下：

1.有关模板操作W、J纯熟程度（50分）

2.有关模板操作的对的性（50分）

七、思索与练习

无

实训十二级页面模板设计

一、实训目的和规定

按照实训四所完毕的站点规划书的规定以及实训五的整体布局

设计中的首页布局设计完毕二级模板的整体设计和填充。

二、实训内容

二级页面模板的设计和填充。

三、实训准备

Dreamweaver8中文版。

四、实训环节

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

二级页面模板。

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

内容的填充，形成站点日勺各个二级页面C

五、实训措施

机房运用本机软件完毕。

六、考核措施

此部分实训内容采用全体考察的措施，以百分制为满分，详细评

分原则如下：

1.有关模板操作W、J纯熟程度（50分）

2.有关模板操作的对的性（50分）

七、思索与练习

无

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

一、实训目的和规定

按照实训四所完毕的站点规划书的规定细化页面，使其到达最优

的效果并进行测试和上传作品。

二、实训内容

1.CSS样式口勺应用和调整。

2.页面布局口勺调整。

3.页面文本、图片以及媒体内容的深入细化。

4.链接Ef、J测试。

5.作品的上传。

三、实训准备

Dreamweaver8中文版、PhotoShop7.0以上中文版本。

连接因特网日勺局域网c

四、实训环节

I.按照站点规划书的内容规定对各个页面进行CSS样式的应用。

2.细化各个页面，对各个页面日勺图像、表格、链接进行合适的调

整，使站点愈加美观。

3.测试所有链接。

4.在当地站点中测试整个站点W、J运作状况，并进行对应的调整。

5.运用CuteFtp工具进行作品上传。o

五、实训措施

机房运用本机软件完毕。

六、考核措施

此部分实训内容采用全体考察的措施，以百分制为满分，详细评

分原则如下：

1.CSS应用操作的纯熟程度（20分）。

2.页面布局的微操作（表格、布局视图、层等）纯熟程度（1（）

分）。

3.图片、链接调整的为操作纯熟程度（10分）。

4.CuteFtp日勺使用纯熟程度。（50分）。

七、思索与练习

完毕整个站点后，对自己口勺站点的建设进行总结。

实训十二总结

一、实训目的和规定

将学生制作口勺作品进行综合的考核，并进行总结。

二、实训内容

1.对学生作品进行考核。

2.选择经典的（优秀的和劣质的）作品分别进行总结。

三、实训准备

Dreamweaver8中文版、PhotoShop7.0以上中文版本。

连接因特网口勺局域网。

四、实训环节

1.对学生的作品依次进行综合考核。

2.抽取经典（优秀和劣质）的作品进行全面的解析。

五、实训措施

机房运用本机软件完毕。

六、考核措施

此部分实训以考核为主，对学生组品进行整体的考核。采用全体

考察日勺措施，以百分制为满分，详细评分原则如下：

a）系统文档20分

b）编写代码30分

c）程序调试10分

d）实训出勤20分

e）技术含量10分

f）美工设计10分

七、思索与练习

无。

附录一网站规划书书写格式

一、建设网站前的市场分析

1、有关行业的市场是怎样的,市场有什么样口勺特点，与否可以在

互联网上开展企业业务。

2、市场重要竞争者分析，竞争对手上网状况及其网站规划、功能

作用。

3、企业自身条件分析、企业概况、市场优势，可以运用网站提高

哪些竞争力，建设网站的能力（费用、技术、人力等）。

二、网站内容规划

1.根据网站口勺目的和功能规划网站内容，一般企'业网站应包括：

企业简介、产品简介、服务内容、价格信息、联络方式、网上

定单等基本内容。

2.电子商务类网站要提供会员注册、详细的商品服务信息、信息

搜索查询、定单确认、付款、个人信息保密措施、有关协助等。

3.假如网站栏目比较多，则考虑采用网站编程专人负责有关内

容。注意：网站内容是网站吸引浏览者最重要Ef、J原因，无内

容或不实用的信息不会吸引匆匆浏览的访客。