《网页设计与制作综合实训》实训指导书5篇

第一篇：《网页设计与制作综合实训》实训指导书

武汉商贸职业学院 信息工程学院

《网页设计与制作综合实训》实训指导书

软件教研室 2013年9月 《网页设计与制作综合实训》实训指导书

目录

实训目的...........................................................................................................................................1 实训内容及要求...............................................................................................................................1 实训性质、实训地点、实习时间安排，适用专业班级...............................................................2 实训一 站点的规划设计..................................................................................................................3 实训二 设计案例网站LOGO.........................................................................................................4 实训三 设计案例网站BANNER...................................................................................................5 实训四 设计案例网站导航条.........................................................................................................6 实训五 设计案例网站网页内容和网页版权声明.........................................................................7 实训六 对案例网站版面切图.........................................................................................................8 实训七 制作完成案例网站首页.....................................................................................................9 实训八 案例网站模板的制作.......................................................................................................10 实训九 案例网页超级链接的添加...............................................................................................11 实训十 案例网站加入动态元素...................................................................................................12

第2页 《网页设计与制作综合实训》实训指导书

实训目的

在前一阶段，学生完成了《网页设计与制作》、《图形图像处理》、《CSS设计》、等专业课程的学习，为了让学生将前期的专业课程学以致用，融会贯通，特开设本系统化实训。

本次综合实训基于学生的兴趣，选取专业建设网站开发为主题，基于网页开发的流程，把实训周期当做是一个项目的开发周期，严格把握项目进度，最终要求学生完成网站的前台设计。

通过本次实训希望达到以下目的：

1.熟悉和掌握Dreamweaver软件的使用方法； 2.熟悉和掌握PS软件的使用方法； 3.熟悉FLASH软件应用的方法； 4.学会使用CSS+DIV做网页布局； 5.熟练掌握站点的规划与设计

实训内容及要求

本实训的内容简述： 1.网站首页（1）专业概况（2）专业建设规划

（3）展示最新动态文章标题（8条）（4）专业建设成效的文章标题（8项）（5）专业建设特色文章标题（8项）2.专业概况

点击项目概况，显示相关文本 3.专业建设规划

点击项目申报书菜单，显示flashpaper格式的申报书内容 4.专业建设特色

显示专业建设特色的文章标题列表，点击标题进入内容 5.专业建设动态

显示专业建设动态的标题列表，点击标题进入成果详细展示 6.专业建设成效

显示专业建设成效的标题列表，点击标题进入成果详细展示。本实训的要求：

1.应用css和html（div+css）技术完成至少4个页面，其中必须包括网站主页面设计、栏目页设计、管理员管理登陆页面、管理员登录以后的页面。2.显示环境：网页视觉效果应采用Internet Explorer 6.0以上版本浏览器，显示分辨率以1024×768状态为准。

第1页 《网页设计与制作综合实训》实训指导书

3.网页规模：网页总量原则上不应超过10M，且必须要是不连接互联网就可以进行展示的作品。

4.网站结构：要求结构清晰，文件有清晰的分类，比如图片都放在images文件夹下等。

5.要求页面美观大方、颜色搭配协调；

6.作品留存，下学期或下一阶段继续完善、开发。

实训性质、实训地点、实习时间安排，适用专业班级

该实训为校内模拟实训。根据高等教育教学大纲规定和学院教学计划安排及培养学生职业技能的要求，软微班的学生于第一学期进行为期4周的校内实训，项目名称为《网页设计与制作综合实训》。

实训时间：2013-2014学年第一学期第15-18周 实训班级：软件1301班、软件1302班 实训地点： 学校机房

第2页 《网页设计与制作综合实训》实训指导书

实训一 站点的规划设计

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的界面布局和工作环境。（2）熟练掌握本地站点创建和管理的方法。

3、实训任务

（1）创建一个静态网站站点。（2）从网络上收集网页素材。

（3）根据提供的网站策划方案范本，结合自己要制作完成的网站，开始着手书写网站策划方案。

4、实训内容

（1）打开Dreamweaver 软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Dreamweaver 软件。

（2）在本机D盘上创建文件夹“home”，在“home”文件夹下根据网站的规划设计，创建相关的文件夹，用来放置不同的文件。

（3）在Dreamweaver 软件中，将D盘 “home” 文件夹定义成静态网站站点，站点名称任意。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第3页 《网页设计与制作综合实训》实训指导书

实训二 设计案例网站LOGO

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的界面布局和工作环境。（2）熟练掌握网站LOGO的设计方法。（3）创建项目案例网站的LOGO。

3、实训任务

（1）掌握Photoshop软件文字工具工具的使用方法。（2）查看网络上相关网站LOGO。

（3）根据小组讨论结果，实际动手完成网站的LOGO。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，能够熟练使用Photoshop软件。

（2）新建Photoshop文件，大小为980*600像素，分辨率为72像素/英寸，颜色模式为RGB颜色8位，背景颜色为白色或者透明都可以。（3）使用文字工具，输入MZD三个字母，设置文字属性。

（4）栅格化文字图层，将栅格化后的图层上的3个字母分别移动到不同的3个图层上。

（5）分别对3个字母进行艺术化处理。（6）输入其他的文字。

（7）为输入的文字图层设置“混合选项”。（8）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第4页 《网页设计与制作综合实训》实训指导书

实训三 设计案例网站BANNER

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站BANNER的设计方法。（3）创建项目案例网站的BANNER。

3、实训任务

（1）掌握Photoshop软件渐变工具的使用方法。（2）查看网络上相关网站BANNER。

（3）根据小组讨论结果，实际动手完成网站的BANNER。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）打开上次保存好的Photoshop源文件，在上次完成的LOGO基础上，准备开始制作本次的BANNER。

（3）根据网站策划方案里的主色调和主题的要求，开始设计网站的BANNER，首先去选择一张适合的图片。

（4）使用矩形选框工具选择要使用的图片部分，图片的其他部分删除。（5）根据设计要求，在BANNER上添加其他元素，比如文字或者其他能够表达网站主题的图片。

（6）使用魔术棒工具将要放置到BANNER上的图片的某一部分扣出来，然后设置适合的大小，旋转好方向后放好。

（7）设置图层的样式，以及文字的混合选项等。（8）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第5页 《网页设计与制作综合实训》实训指导书

实训四 设计案例网站导航条

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。（2）熟练掌握网站导航条的设计方法。（3）创建项目案例网站的导航条。

3、实训任务

（1）掌握Photoshop软件圆角矩形工具的使用方法。（2）查看网络上相关网站导航条。

（3）根据小组讨论结果，实际动手完成网站的导航条。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）查看网上其它网站的导航条，了解导航条的基本情况。

（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的导航条。

（4）根据网站策划方案里的主色调和主题的要求，开始设计网站的导航条，首先去选择一张适合的图片。

（5）使用圆角矩形工具绘制一个圆角矩形，颜色与大小要与整个网站的风格与主题相一致。

（6）选中绘制好的圆角矩形，使用渐变工具，绘制立体感导航条背景。（7）输入导航条文字，输入导航条文字间的竖线间隔。（8）设置文字和竖线的混合选项，增加立体感。（9）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第6页 《网页设计与制作综合实训》实训指导书

实训五 设计案例网站网页内容和网页版权声明

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。

（2）熟练掌握网站网页内容和网页版权声明的设计方法。（3）创建项目案例网站的网页内容和网页版权声明。

3、实训任务

（1）掌握Photoshop软件多种工具结合的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手完成网站的网页内容和网页版权声明。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）查看网上其它网站的网页，了解网页对象分布的基本情况。

（3）打开上次保存好的Photoshop源文件，在上次完成的基础上，准备开始制作本次的网页内容和网页版权声明。

（4）根据网站策划方案里的主色调和主题的要求，选择灰色与深蓝色作为边框颜色，网页内容标题文字颜色为黑色。

（5）以制作通知公告为例，使用文字工具输入文字“通知公告”，文字大小为14号，文字颜色为黑色，文字字体为“宋体或者黑体”，根据自己的理解，可以为文字增加“混合选项”，设置文字效果。（6）新建图层，选择“线条工具”，线条粗细为1 像素，颜色为黑色或者深蓝色都可以，绘制一条直线。

（7）新建图层，选择“圆角矩形工具”，半径为50 像素，颜色为黑色或者深蓝色。

（8）新建图层，选择“文字工具”，在刚才绘制好的圆角矩形上输入“More”，文字大小是12，颜色为白色，字体为“Arial”。

（9）使用同样的办法可以制作完成其他网页内容部分的标题。（10）保存文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第7页 《网页设计与制作综合实训》实训指导书

实训六 对案例网站版面切图

1、学时分配：6学时

2、实训目的

（1）熟悉Photoshop软件的使用方法。（2）掌握网站版面设计的方法。（3）对案例网站版面进行切图。

3、实训任务

（1）掌握Photoshop软件切片工具的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手对网站版面进行切图。

4、实训内容

（1）打开Photoshop软件，熟悉软件的界面布局和工作面板的摆放，熟练使用Photoshop软件。

（2）查看网上其它网站的网页，了解网页对象分布的基本情况。

（3）打开制作好的网站版面源文件，使用切片工具准备对版面进行切图。（4）使用参考线将网站版面部分之间进行分割。（5）使用切片工具对网站版面进行切割。

（6）切图完成后，选择“文件”——“存储为WEB所用格式”，存储文件类型可以选择“JPEG”或者“GIF”。（7）整理保存好的文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第8页 《网页设计与制作综合实训》实训指导书

实训七 制作完成案例网站首页

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的使用方法。（2）掌握使用表格布局网页的方法。（3）制作完成案例网站首页。

3、实训任务

（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手完成案例网站首页。

4、实训内容

（1）预览实训网页。

（2）在D盘根目录下新建一个文件夹“home”，在该文件夹中分别新建“css”、“images”，“html”三个文件夹，（3）打开Dreamweaver软件，将“home”文件夹定义为站点。

（4）创建一个命名为“index.html”的网页文档，设置网页的页面属性。（5）根据网页首页效果图，插入表格，进行表格的嵌套，完成网页首页的布局。（6）在网页插入的表格中输入文字、水平线和日期等内容，设置文本的属性。（7）在网页中插入图像，设置图像的属性。

（8）创建CSS样式表文件，分别定义需要添加效果的不同CSS样式。（9）在网页上分别应用不同的CSS样式。（10）保存网页文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第9页 《网页设计与制作综合实训》实训指导书

实训八 案例网站模板的制作

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的使用方法。（2）掌握网页模板的制作方法。

（3）掌握使用网页模板创建网页的方法。

3、实训任务

（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手制作网页模板。

4、实训内容（1）根据下发的“二级网页.jpg”，在Photoshop软件中设计完成二级网页版面，并且切图制作网页。

（2）查看网上其它网站的网页，了解网页对象分布的基本情况。

（3）在Dreamweaver软件中打开制作好的二级网页，选择“文件”—“另存为模板”，将制作好的网页转化为模板文件。（4）在创建好的模板网页上插入“可编辑区域”，根据需要可以插入多个可编辑区域。

（5）也可以选择“文件”—“新建”—“模板文件”，重新创建一个新的模板文件，跟制作网页的方法一样，制作完成模板网页后，一定要在模板网页中插入可编辑区域。

（6）选择“文件”—“模板”，选择创建好的网页模板，选择“由模板创建”，利用制作好的模板来生成网页。

（7）在生成的网页中的可编辑区域中添加相应的网页内容。（8）对创建好的网页模板进行编辑，并且进行更新。（9）整理保存好的文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第10页 《网页设计与制作综合实训》实训指导书

实训九 案例网页超级链接的添加

1、学时分配：6学时

2、实训目的

（1）熟悉Dreamweaver软件的使用方法；（2）掌握网页超连接的添加和设置方法；（3）创建完成案例网页的超连接。

3、实训任务

（1）掌握Dreamweaver软件的使用方法。（2）查看网络上相关网站网页。

（3）根据小组讨论结果，实际动手创建网页超链接。

4、实训内容

（1）根据设计好的二级网页版面，制作网页模板。（2）打开Dreamweaver软件使用创建的二级网页模板来创建主页的新闻网页。（3）根据首页新闻链接标题内容，选择新闻网页内容，并将新闻内容添加到使用网页模板生成的新闻网页中。

（4）为首页新闻文字添加文字超链接。

（5）在创建新闻网页的模板文件中添加返回首页的链接。（6）更新网页。

（7）根据首页导航条内容，选择合适的网页内容，使用二级网页模板生成相应网页。

（8）为首页导航条添加图片超链接，链接到相应的二级网页。

（9）在创建二级网页的模板文件中创建返回首页，以及二级网页之间互相链接的超链接。

（10）更新网页。（11）为首页添加邮件链接、锚点链接、跳转菜单链接、下载链接等其他超链接。（12）测试网页超链接，保存相关文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第11页 《网页设计与制作综合实训》实训指导书

实训十 案例网站加入动态元素

1、学时分配：6学时

2、实训目的

（1）熟悉Flash软件的使用方法；（2）掌握创建滚动效果的方法；（3）为案例网站加入动态效果。

3、实训任务

（1）掌握Dreamweaver软件和Flash软件的使用方法。（2）实际动手为网站首页制作一个Flash动画。

（3）为首页增加新闻动态滚动效果，以及图片动态滚动效果。

4、实训内容

（1）打开Flash软件，熟悉Flash软件的使用方法。

（2）使用Flash软件创建一个简单动画，比如图片之间的简单切换。（3）打开Dreamweaver软件，将Flash中生成的SWF格式动画文件插入到网页中，设置动画属性。

（4）熟悉链接网页源代码的编写方法，掌握基本的网页代码标签。（5）在“通知公告”中给网页新闻添加由下向上的动态滚动效果。（6）在“专业展板”中给图片添加由右向左的动态滚动效果。（7）测试网页效果，整理保存好的文件。

5、实训要求

（1）由指导教师讲清实训的基本原理，要求，实训目的。

（2）实训不分小组，要求每位同学均能独立地完全相关实训的设计与制作。（3）教学实训除了验证课程理论外，还要求学生掌握网络资源的搜索与应用。（4）除了教师的指导外，还要着重培养学生自学的能力。

第12页

第二篇：《网页设计与制作》综合实训

《网页制作》期末大作业

一、概述：

要求设计并制作一个表达某个主题的网站，通过网站的制作，综合运用本课程各单元所学的知识。网站的内容不能是一些素材如图片、音乐等的堆积，必须有鲜明的主题。可以从网上下载部分资料，但不能超过整个内容的30%，更不要指望从网上下一个完整的网站应付老师。总的页数应超过10页（一个包含主题内容的htm文件算一页）。请同学们注意不要下载相同的资料，如果出现网页内容雷同，双方都要扣分，严重的必须重做。

二、网站内容：

自行选择如下内容：科普、科幻知识；公益形象宣传；大、中、小学教学用动画形象；奥林匹克体育；环境保护；战争与和平；求职；校园生活；诚信、传统美德；交通安全；卫生与健康；爱心；教育；新青年；管理；实用工具等。自己确定一个主题，整个网站要突出主题，信息分类合理，导航清晰。要求必须有自己创作的内容，这些原创内容可以是文字、图片、动画等。

三、版面及格式：

l、要求图文并茂，颜色搭配合理，但是图片及声音文件不要太大。如果能加入自己创作的动态元素(如Flash，Gif动画等)将获得加分。希望充分发挥自己的创作能力。

2、要求每个网页都使用表格布局。

3、要求网页中插入有Web组件，包括悬停按钮、滚动字幕、横幅广告管理器等。

4、导航设计简洁明了，不能有“死链接”，要保证能够在网络上浏览。

5、自创内容越多越好，得分越高。

四、递交方式：

1、每个同学以自己的学号姓名建一个文件夹，上交时间为18周2、所做网页的首页文件名必须为index.htm3、所有文件名和目录名全部使用英文字母和数字，不得使用汉字或全角符号，否则，网络将出现死链接。

4、递交时必须把网页中所有用到的图片、声音、动画等都一起上传到服务器。网页的总容量一般不要大于3MB5、建议将网页中的素材分类，建立不同的子目录存放。

五、网页评分标准:

整个网页的评分强调“自己的创意”，不管主题是什么，也不论是哪一个栏目的内容，如果创意独特，有自己鲜明的个性、观点，得分较高。

1、主题鲜明，有关主题的内容丰富（30分）

2、原创内容丰富，能体现自己的想法，文字流利通顺（30分）

3、版面布局合理，整理效果美观（20分）

4、其他内容如友情链接、相关资料等（5分）

5、插入的图片等素材恰当、美观（5分）

6、技术含量（使用了各种效果、技术等）（10分）

六、网页制作特别注意事项：

1、网页文件名最好全部用英文字母或数字（不能包含汉字）；

2、整理图片和其他素材；

3、在与网页主文件（index.htm)同级的目录中建立子目录image(图片）、wave(声音）、„等，将取得的素材按类保存好，在制作网页（即编辑HTM文件）时，必须从这些目录中插入素材，以保证显示正确，不能从其他目录插入，提示另外保存图片时，不要改变保存目录，直接按[确定]即可。同学们要改变那种在编辑网页时到处找图片，找到了就往HTML文件中插的坏习惯(也不管这个文件在哪里）；

4、作好笔记将对后期调试非常有利，从开始规划起就记录目录名、文件名的分配，以便调试时节省时间。

第三篇：网页设计综合实训

《网页制作综合实训》考核要求

一、课程考核

采用期末大作业与形成性考核相结合的方式。形成性考核占50分，视平时参加教学活动和作业完成情况而定；期末大作业考核占50分，根据期末大作业的完成而定。两方面成绩累计达到60分者为及格。

二、大作业要求

1．学生独立自主地完成源程序量（包含HTML、JavaScript、VBScript各种代码均算在内）在500行以上的动态Web程序。

2．本课程设计要求所有的脚本程序最终都可运行。

3.本课程设计中有关Web页界面设计部分可以用快速所见即所得类型的开发工具设计（比如FrontPage、Dreamweaver等）

4.可以借鉴一些源代码，但是禁止只对界面部分修改后冒充独立开发产品提交。

5.学生应按时(十六周前)、认真地完成课程设计，并作设计报告。

6.大作业电子稿上传至课程论坛/班级论坛！

第四篇：营销-网页设计实训指导书

《网页设计与制作》课程设计指导书

《网页设计与制作》课程设计指导书

设计专业： 设计时间：

一、实训意义

网页设计与制作综合实训是教学过程中重要的实践性教学环节。它是根据专业教学计划的要求，在教师指导下对学生进行的网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素有着重要的作用。

二、实训目的

1．通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。

（1）掌握规划网站的内容结构、目录结构、链接结构的方法。（2）熟练掌握网页制作软件Dreamweaver 8的基本操作和使用技能。（3）掌握页面的整体控制和头部内容设置的方法。（4）熟练掌握网页页面布局的各种方法。

（5）熟练掌握在网页中输入、设置标题和正文文字的方法。

（6）熟练掌握在网页中插入图像、flash动画、背景音乐的方法。（7）掌握建立各种形式超级链接的方法。（8）掌握表单网页制作方法。（9）掌握网页特效的制作方法。

（10）掌握网站测试的方法。

2．训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图像资料、flash动画和网页特效等。

3．培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。

4．培养学生理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心。

5．训练和培养团队协作精神和共同开发网站的综合能力。

三、实训要求

1．实训参考题：

第1页

《网页设计与制作》课程设计指导书

（1）制作教学资源网站（2）制作个人网站。（3）制作班级网站。（4）制作学习网站。（5）制作体育网站。（6）制作旅游网站。（7）制作上海世博会网站。

2．方式：以小组为单位，每组3－4人；请在实训第一天每个小组把人员分工情况和选题上交给指导教师。

具体要求如下：

1．动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。

2．制作网页前，收集好所需的文字资料、图像资料、flash动画和网页特效。

3．所创建的网站至少分为二层，包括5个页面。（1）首页必须包含有滚动的公告牌效果；

（2）网站的各个页面应包含有框架网页、表单网页、表格网页、层布局网页等；（3）各个页面根据需要插入合适的图像和多媒体元素。（4）适当采用CSS样式表修饰各个页面内容；

（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。（6）各个页面之间导航清晰、链接准确无误。

（7）选取个别页面，可以适当调用JavaScript程序，制作网页特效。（8）附加内容：视各自情况而定，可以制作动态网页。

4．网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。

5．实训过程中既要虚心接受老师的指导，又要充分发挥主观能动性、独立思考、努力钻研、勤于实践、勇于创新。

6．在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。

7．小组成员之间，既要分工明确，又要密切合作，培养良好的互助、协作精神。8．实训期间，严格遵守学校的规章制度，不得迟到、早退、旷课。缺课节数达三分之一以上者，实训成绩按不及格处理。

9．实训环境为Windows XP及以上版本的操作系统，网页制作软件为Dreamweaver 8，根据需要可以运用Fireworks 8处理图像，运用Flash 8制作动画。

四、实训步骤

1．实训准备、制定实训计划

（1）分组：每一组选定一名组长，组长主要负责考勤以及与指导教师联系。（2）选题：确定网站主题，各小组进行分工。

（3）根据实训时间的长短制定一个切实可行的网站开发计划。2．准备素材，搜集与主题相关的文字、图像、动画、音乐等资料。

3．设计网站的内容结构、目录结构和链接结构，设计首页及其页面的版式结构。4．创建本地网站，建立网站的目录结构。5．制作首页。6．制作二级子页。

第2页

《网页设计与制作》课程设计指导书

7．制作内容页。8．创建超级链接。9．测试与浏览网页。10．书写实训报告书。

五、报告书写要求

1.通过报刊、互联网查询，整理，对参考资料需要注明来源地。文章名、作者、报刊名和期数、网址等。例如：

[1]郭诚忠，电子商务发展与我国的电子商务总体框架 电子与信息化 2000（1）[2]EvanHirsh，How to TreatCustomer’s Right 2000,10 http://www.xiexiebang.com/ 2.内容应包括以下几个方面：

1)封面（样张附后）2)引言

3)系统开发及运行环境 4)制作本网站的设计思路

5）绘制出网站的目录结构和网站的链接结构图（样图附后）

6)叙述网站建设及各页面设计的过程（要求各页面以图片的形式存放到文档合适位置）7）自己对本网站作一个全面的评价：包括有何特点、存在的问题、改进意见等。8)总结：自己对本次课程设计的体会及收获。9)参考文献

10)附：人员组织、分工表，工作进度表 3.4.5.字数(不包括图表等)不得少于3000字。禁止直接抄袭网站或报刊内容。

不允许雷同报告，发现后所有雷同以零分记。

六、报告提交方式

要求提交打印稿(A4纸张，正文宋体五号字)，并有基本的格式排版，同时将电子文档（课程设计报告和网站源代码）一并打包成.rar文档，提交到juyhlkl@126.com邮箱。

注意：在提交邮件中请注明：班级、姓名等字样。

第3页

《网页设计与制作》课程设计指导书

七、时间要求

在2012年07月25日前提交，过期不再受理，不记成绩。

2012年5月20日

第4页

第五篇：网页设计与制作实训报告[范文]

《网页设计与制作》

实习报告

指导老师：

实习地点：

实习时间：

实习班级：

学生姓名：

一、实习目的① 学会制作新闻发布系统。

② 学会制作在线调查系统。

③ 熟悉购物网站的主要功能和栏目。

④ 学会购物网站数据库表的创建和数据库连接的创建。

⑤ 学会购物系统前台页面制作和后台管理制作。

二、实训内容

1.创建数据库表

① 启动Microsoft Access，执行“文件”——“新建”命令，打开“新建文件”面板，在面板中单击“空数据库”。

② 弹出“文件新建数据库”对话框，在对话框中选择数据库保存的路径，“文件名”文本框中输入shop。

③ 单击“创建”按钮，在对话框中双击“使用设计器创建表”选项。

④ 弹出“表1：表”对话框，在对话框中输入“字段名称”和字段所对应的“数据类型”，将shopID字段设置为主键。

⑤ 执行“文件”——“保存”命令，弹出“另存为”对话框，在对话框的“表名称”文本框中输入products。

⑥ 单击“确定”按钮，保存表。按以上步骤的方法，创建表fen和admin。

2.创建数据库连接

新建一个网页文件夹，打开IIS信息服务，创建IIS虚拟目录，在文件夹安全性把来宾用户的权限修改为完全控制，并导入数据库。

3.制作购物网系统页面

① 用index.html创建zhanshi.asp商品分类展示页，新建站点，导入shop.mdb数据库文件建立数据库连接。插入表格并插入图片、文字，创建记录集并在表格相应位置绑定数据。在服务器行为里为表格设置重复区域，创建记录集RS2并在左边的商品分类表格里绑定

数据，在服务器行为里为左侧的表格添加重复区域和转到详细页，制作记录集导航条。

② 用index.html创建xiangxi.asp商品详细信息页，首先创建记录集并制作左侧的商品分类表格，之后在中间区域插入表格，在表格中插入图片、文字，创建记录集RS2并将数据绑定在表格相应位置。

③ 用index.html创建denglu.asp商品详细信息页,创建记录集并制作左侧的商品分类表格，在中间区域插入表单，在表单里插入表格，在表格里插入文字、文本域、表单按钮，并为表单设置检查表单。创建记录集RS2并在服务器行为里添加登录用户。

④ 用index.html创建fenlei.asp添加商品分类页，插入表单，在表单里插入文字、文本域、表单按钮，创建记录集并在服务器行为里添加插入记录和限制对页的访问。再用index.html创建fenleiok.asp,在其中插入表格输入文字，并设置返回链接。

⑤ 用index.html创建tianjia.asp添加商品页，创建记录集，用插入记录表单向导创建插入记录表单，在服务器行为里添加限制对页的访问。再用index.html创建tianjiaok.asp,在其中插入表格输入文字，并设置返回链接。

⑥ 用index.html创建guanli.asp商品管理页，创建记录集并制作左侧的商品分类表格，在中间区域插入表格并插入文字，创建记录集RS2并在表格相应位置绑定数据，为该表格设置服务器行为的重复区域，制作修改和删除链接，制作记录集导航条。

⑦ 用tianjia.asp创建xiugai.asp修改页面，创建记录集在对应的文本域中绑定数据，把服务器行为里的插入记录删除并添加更新记录。在服务器行为里添加限制对页的访问。再用index.html创建xiugaiok.asp,在其中插入表格输入文字，并设置返回链接。

⑧ 用index.html创建shanchu.asp删除页面,插入表格并插入文字，建立记录集，在表格相应位置绑定数据，插入表单和表单按钮，创建服务器行为限制对页的访问和删除记录。再用index.html创建shanchuok.asp,在其中插入表格输入文字，并设置返回链接。

三、疑难解惑

① 网页不能正常打开，电脑用户权限没有修改，在文件夹安全性把来宾用户的权限修改为完全控制。

② 创建重复区域时，总显示相同的内容，仔细阅读教材，发现创建重复区域时要选中表格，而不是文字内容。

③ 登陆页面不能登陆，把表格放入表单后，重新登录，问题解决。

④ 创建添加商品页面时，无法显示商品分类。在插入记录表单时，应将feileiID“显

示为”下拉列表中选择“菜单”，并在“菜单属性”里的“域”列表中选择fenlei。

⑤ 修改页面点进去初始内容都一样，“唯一键列”下拉列表中应选择shpID。

⑥ 商品分类点进去每个种类都一样，查找原因，发现记录集中筛选是shpID，把记录集中的筛选改为fenleiID解决。

四、实训心得

经过一周动态网页的实训，使我们对本学期的这门课进行了整体的汇总。在这汇总期间，也算是对自己本学期的一个考核，此次实训暴露出了许多我自身存在的问题，同时也对自身有了很大的提高。

在这次实训中，我也有许多收获。首先，我体会到了作为一个计算机专业的人，不会用DW的痛苦和尴尬。在制作的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自制作动态网页，难免会遇到过各种各样的问题，同时在制作的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固。在此过程当中弥补了我许多知识上的缺陷，弄清的以前没有搞懂的知识点。经过多番的努力和辛酸，我成功地完成了这次过程艰辛的实训，而且我从中体会到了一种叫做‘成功的喜悦’的感觉，那种小有成就的兴奋是只有置身其中的人才能体会的。

在实训过程中，我更体会到了基础知识的重要性，也许我们正在迷惘，我们是否学到了东西，但事实说明零零散散的知识，在项目开发当中起到了非常关键的作用，我们不缺少时间和工具，我们只是缺少经验和动手能力，如果我们以后能更好的在各方面增长自己的经验，相信我们能在长长的就业队伍中脱颖而出的！相信自己，相信未来。今后我将会更加努力的学习，不断提高自身素质，为我将来的就业打下良好的基础