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

1、 湖北轻工职业技术学院网页设计与制作实训设计报告姓 名: xxxx 班 级: 09电信 学 号: xx号 指 导 教 师: xx 设 计 时 间： 2011年6月16日 湖北轻工职业技术学院信息工程系目 录一. 实训设计目的2二. 实训设计题目描述和要求42.1 实训设计题目描述42.2 实训要求42.3 设计思路5三.实训设计报告内容63.1 设计方案63.2 设计过程63.3 设计结果9四. 结论与心得10五. 参考文献11一. 实训设计目的本次实训是运用网页制作的知识，在掌握理论的基础上再加以实践，使之得以融会贯通，进一步提高，根据我们自己的兴趣，设计一个动静态结合的网站，围绕一个主题体

2、现出自己的个性。我个人选择的是做一个关于张杰的个人网页，一方面表达出我对他的喜爱与崇拜，另一方面我想让更多的人认识他加入他的粉丝团，一起来支持他，鼓励他，崇拜他。同时我想借助本次实训的机会来进一步熟悉和掌握网站建设的基本流程和技术规范，巩固综合运用Dreamweaver网页制作软件制作网页的知识，来完成网站建设任务的方法，能独立设计一个内容完整、图文并茂、技术运用得当的网站。我将从张杰的个人简介开始介绍，接着介绍他的明星之路，他的的作品、个人出版书籍等。在网页中尽量加入图片，利用图片和CSS美化网页。加入背景音乐来美化试听效果。利用表格、模板、表单等排版网页。总的来说，希望通过此次试训，能够将

3、网页制作的课程理论与实践联合起来，通过我们以自己搜索书籍，网站等方式来收集文字资料，图像资料，动画及页面效果等。从而来培养自己独立动手的工作能力。二. 实训设计题目描述和要求2.1 实训设计题目描述本次实训是自选主题，并围绕所选主题制作一个动静相结合的网站。所以我根据自己的喜爱，选做了一个关于张杰的网站。网站内容从张杰个人简介，接着介绍他的明星之路，他的的作品、个人出版书籍等多方面来描述。讲述了他明星之路的艰辛，体现了他那种对音乐的热诚和坚持不懈的决心。2.2 实训要求1站点结构与命名 站点文件夹为班级学号姓名(如：09电信班 杨小莉) 站点文件夹中所包含文件夹：Images （存放图片文件）

4、 Templates（存放模版文件） pages（存放网页文件） 其余视文件夹需要而添加，全部用英文命名。 站点文件夹中所包含文件： index （首页）其文件余视需要而添加，全部用英文命名。 并且要求画出网站结构图。2网站题材选择 内容，题材不限，可以选择你所感兴趣的内容和专题，内容充实、健康。网站标题自拟。3网站技术要求 页面布局合理，色彩和谐，链接正确，图文并茂并茂。网站页面大小应该满足800*600分辨率的客户，兼顾1024*768分辨率。4、 网站中必须制作一个留言簿 要求至少要有如下5个功能页面：l 显示留言页面index.asp；l 提交留言页面new.asp；l 管理员登录页面

5、login.asp；l 删除页面del.asp；l 错误提示页面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、 利用

6、模板生成分页面分页之一5、 制作动态留言板 管理员登陆页面 提交留言页面 错误提示页面 删除留言页面 显示留言页面3.3 设计结果网站设计完成，静态网站能够实现主页与分页之间的链接，背景音乐、背景图片、页面动画效果等显示正确。动态网站能够实现管理员加密管理，能够实现留言显示。显示留言成功4. 结论与心得近一周的实训转瞬即逝，在这短暂的时间里，在老师的指导和帮助下，第一个完整版的自制网站圆满完成，同时，也让我们对于网页设计与制作有了进一步的了解。整个网站设计中，我能把散乱的网页链接成框架体系，使平时学习的知识点由散到整，并且能够合理的在实训中进行实践。在本次实训的过程中，我搜集了大量的素材，也看

7、了很多网页设计技巧方面的材料，增加了知识面，给我以后能够制作出更好的网页打下了基础。最后让我感触最深的是：想要做好一个网站，好的素材和技能是十分重要的。整个网站设计由动静态网站综合组成。静态网站组成了整个网站的框架结构，由一个主页面然后链接到其他分页面。在静态网站中，设置了移动字幕、背景音乐、背景图片、鼠标经过图像变换大小、跟随鼠标文字等一系列效果。增加网站的美观度和色彩协调度。动态网站主要根据数据库来完成，总共制作了五个动态页面：显示留言页面、提交留言页面、管理员登录页面、删除页面、错误提示页面，达到了他人为本网站留言、管理员管理页面等作用，而且在每个静态网站中都有请登录或是请留言的字眼，点击后可进入到动态留言页面。总体上说整个网站设计还是比较成功的，值得改进的是，可能内容上有些局限性，如果可以的话，还可以在网站中添加Flash视频。这次网页设计与制作我们是利用Dreamweaver 8来完成设计的，在计算机上面操作，每换一台电脑我们