网页实训设计报告.docx

网页实训设计报告.docx

《网页实训设计报告.docx》由会员分享，可在线阅读，更多相关《网页实训设计报告.docx（11页珍藏版）》请在冰豆网上搜索。

网页实训设计报告

湖北轻工职业技术学院

《网页设计与制作》实训设计报告

姓名:

xxxx

班级:

09电信

学号:

xx号

指导教师:

xx

设计时间：

2011年6月16日

湖北轻工职业技术学院信息工程系

目录

一.实训设计目的2

二.实训设计题目描述和要求4

2.1实训设计题目描述4

2.2实训要求4

2.3设计思路5

三.实训设计报告内容6

3.1设计方案6

3.2设计过程6

3.3设计结果9

四.结论与心得10

五.参考文献11

一.实训设计目的

本次实训是运用网页制作的知识，在掌握理论的基础上再加以实践，使之得以融会贯通，进一步提高，根据我们自己的兴趣，设计一个动静态结合的网站，围绕一个主题体现出自己的个性。

我个人选择的是做一个关于张杰的个人网页，一方面表达出我对他的喜爱与崇拜，另一方面我想让更多的人认识他加入他的粉丝团，一起来支持他，鼓励他，崇拜他。

同时我想借助本次实训的机会来进一步熟悉和掌握网站建设的基本流程和技术规范，巩固综合运用Dreamweaver网页制作软件制作网页的知识，来完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站。

我将从张杰的个人简介开始介绍，接着介绍他的明星之路，他的的作品、个人出版书籍等。

在网页中尽量加入图片，利用图片和CSS美化网页。

加入背景音乐来美化试听效果。

利用表格、模板、表单等排版网页。

总的来说，希望通过此次试训，能够将网页制作的课程理论与实践联合起来，通过我们以自己搜索书籍，网站等方式来收集文字资料，图像资料，动画及页面效果等。

从而来培养自己独立动手的工作能力。

二.实训设计题目描述和要求

2.1实训设计题目描述

本次实训是自选主题，并围绕所选主题制作一个动静相结合的网站。

所以我根据自己的喜爱，选做了一个关于张杰的网站。

网站内容从张杰个人简介，接着介绍他的明星之路，他的的作品、个人出版书籍等多方面来描述。

讲述了他明星之路的艰辛，体现了他那种对音乐的热诚和坚持不懈的决心。

2.2实训要求

1．站点结构与命名

站点文件夹为班级学号姓名（如：

09电信班杨小莉）

站点文件夹中所包含文件夹：

Images（存放图片文件）

Templates（存放模版文件）

pages（存放网页文件）

其余视文件夹需要而添加，全部用英文命名。

站点文件夹中所包含文件：

index（首页）

其文件余视需要而添加，全部用英文命名。

并且要求画出网站结构图。

2．网站题材选择

内容，题材不限，可以选择你所感兴趣的内容和专题，内容充实、健康。

网站标题自拟。

3．网站技术要求

页面布局合理，色彩和谐，链接正确，图文并茂并茂。

网站页面大小应该满足800*600分辨率的客户，兼顾1024*768分辨率。

4、网站中必须制作一个留言簿

要求至少要有如下5个功能页面：

●显示留言页面index.asp；

●提交留言页面new.asp；

●管理员登录页面login.asp；

●删除页面del.asp；

●错误提示页面sorry.asp。

2.3设计思路

栏目4

栏目3

栏目2

栏目1

栏目5

栏目6

栏目7

主页

分页4

分页1

分页2

分页5

分页3

内容4

内容3

内容2

内容1

三.实训设计报告内容

3.1设计方案

主页用表格布局，以张杰的图片为背景图片，突出主题，在主页中设置了移动字幕、背景音乐、背景图片、鼠标经过图像变换大小、跟随鼠标文字等一系列效果，增加了主页面的美观度。

主页设有七个分栏目，五个小分页。

七个分栏目分别链接到七个分页面，并且这七个分页面由模板生成，格调统一，色彩搭配协调。

3.2设计过程

1、建立站点，规划主页

2、制作分栏目录

3、制作模板

4、利用模板生成分页面

分页之一

5、制作动态留言板

管理员登陆页面提交留言页面

错误提示页面删除留言页面

显示留言页面

3.3设计结果

网站设计完成，静态网站能够实现主页与分页之间的链接，背景音乐、背景图片、页面动画效果等显示正确。

动态网站能够实现管理员加密管理，能够实现留言显示。

显示留言成功

4.结论与心得

近一周的实训转瞬即逝，在这短暂的时间里，在老师的指导和帮助下，第一个完整版的自制网站圆满完成，同时，也让我们对于网页设计与制作有了进一步的了解。

整个网站设计中，我能把散乱的网页链接成框架体系，使平时学习的知识点由散到整，并且能够合理的在实训中进行实践。

在本次实训的过程中，我搜集了大量的素材，也看了很多网页设计技巧方面的材料，增加了知识面，给我以后能够制作出更好的网页打下了基础。

最后让我感触最深的是：

想要做好一个网站，好的素材和技能是十分重要的。

整个网站设计由动静态网站综合组成。

静态网站组成了整个网站的框架结构，由一个主页面然后链接到其他分页面。

在静态网站中，设置了移动字幕、背景音乐、背景图片、鼠标经过图像变换大小、跟随鼠标文字等一系列效果。

增加网站的美观度和色彩协调度。

动态网站主要根据数据库来完成，总共制作了五个动态页面：

显示留言页面、提交留言页面、管理员登录页面、删除页面、错误提示页面，达到了他人为本网站留言、管理员管理页面等作用，而且在每个静态网站中都有请登录或是请留言的字眼，点击后可进入到动态留言页面。

总体上说整个网站设计还是比较成功的，值得改进的是，可能内容上有些局限性，如果可以的话，还可以在网站中添加Flash视频。

这次网页设计与制作我们是利用Dreamweaver8来完成设计的，在计算机上面操作，每换一台电脑我们都要重新配置服务器环境，所以说，没有耐心与耐力是无法完成这次实训的。

这次实训不仅让我们将课本上的理论知识得到了实践，更重要的是让我们知道学习是一个步步渐进的过程，需要认真，细心，努力的去完成。

5.参考文献

《网页设计与制作》主编池同柱