网站建设实训报告

甘肃机电职业技术学院

网页设计与制作

实训报告

专业：计算机信息管理

班级：G093501班

学号：G********

*名：***

指导老师：***

实训时间：2011-05-09—05-21

实训地点：图书馆——1号机房

前言

人类永无止境的探索精神，是科技发展的原动力，驱动着我们的步伐飞速迈入21世纪的E世代。我们是新世代的探险家，为人类探索陌生的价值，就像第一个发现黄金价值的人。我们了解所做的事，我们知道该如何去做，正确判断自己，正确判断周遭，我们绝不冒险。我们肩负使命，为世人开拓沟通的新方法，人类的感知将无限延伸，沟通将与光同速。

企业形象和商业宣传网站主要是为了全面展现企业的整体理念，介绍公司的业务和宣传商业价值。

设计风格配合企业的统一形象，力争国际化、商业化；表现上配合多媒体技术和手段，充分体现宽带环境下的绝对优越，强调感官冲击力网站信息编排和栏目设计上，力争简洁、明晰，做到信息模块化；根据访问者的不同动态生成对应级别信息；网站内容上紧扣主题与各功能网站保持完整线上宣传系统的绝对职能分工。

汽车网站是一个汽车企业的"商标"，每一个汽车企业里的每一个系列汽车都有自己的特色，每一个系列都有自己的个性。在这个高度信息化的社会里，建立自己汽车企业网站是最直接的宣传手段。网站的超时空特性，不仅能让地区内的人们了解该汽车企业的文化，更可让世界了解你的汽车发展过程。

本站点采用静态网页技术，运用网页三剑客软件及PHOTOSHOP软件进行网站开发、制作，整体页面采用的是模版加表格的形式，适当加如CSS特效编程使网页变的越加生动和新颖。

利用现在时下非常流行的引导页加首页的样式，此样式最大的特点在于，引导页给予阅读者一个网站总体的感受，第一印象是最重要的，所以我们要抓住这第一印象，给予读者一个数字化的网站新概念。

一、实训目的

通过实训让我们对网页有更深一步的了解，培养我们的动手能力，提高我们运用HTML 语言编写静态网页能力的水平，掌握HTML和CSS语言的应用，为我们学习动态网页打下坚实的基础，通过实训可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上再加以实践，进一步提高、加强我们学习的综合能力，把本学期学到的东西都运用起来达到一定的技术性、创意性，让其更美观。

（1）掌握创建Dreamweaver本地站点的方法，利用表格等规划网页布局；

（2）掌握在网页中添加文本、图像、Flash动画等页面元素；

（3）掌握在网页中输入、设置标题和正文文字的方法；

（4）掌握网页设计基本概念和HTML的基本结构，了解网页技术

HTML的编辑和运行环境以及掌握CSS的各种属性应用；

（5）掌握文字版面的编辑，掌握在Dreamweaver中建立链接及网页的超链接技术的应用，了解图像的处理；

（6）综合运用所学软件进行网页材料的准备。

二、实训项目

1、网站名称：BMW悦驾中国网

2、网站设计要求

1）利用Dreamweaver制作一个静

态网站，要求网站有特色，整个网站的内容

和形式要统一，应能够反映一个简单的主

题。可以选择制作《个人网站设计》、《企

业网站设计》、《文化网站的设计》、《娱乐网站设计》或者其他自己认为适合的网站。

2）必须用到模版、表格或层排版技术、Flash技术和图像处理技术，使网站具有合理的外观和功能。

3）主页基本要求：

页头Logo，准确无误地标识站点和企业标志；

网页标题动画，可以制作成GIF动画或者Flash动画；

导航条；

E-mail地址，用来接受用户垂询；

联系信息，如普通邮件地址或电子信箱，版权信息。

4）某个页面有滚动字幕。

5）整个网站各页面之间保持风格一致，页面之间要有合理的超级链接。

6）进行站点测试后申请免费空间并发布到网络。

3、网站的设计过程

1）主页的设计与制作

首先要建立站点，然后再收

集相关网站建设的资料信息，将

自己建设的网站首页勾画框架，

用Adobe Dreamweaver CS4软件

建设网站的首页，制作头部，设

置导航菜单，向页面中插入图片，产生图文并茂的效果。但要注意插入的图片不要过多，以免影响网速。

网站共分为七大板块，流程图

Index

首页新

闻

中

宝

马

图

系

列

大

汽

车

资

其

他

车

关

于

2）二级网页设计与制作

本网站的二级网页共有六个：新闻中心、宝马图库、系列大全、汽车资讯、其他车型和关于我，在网页中还有友情链接网页，网站内部链接网页等；二级网页中包含网站的基本信息以及新闻信息等，每一个二级网页都运用了模

版，在模版里插入可编辑区域，这样用模版做二级网

页，速度很快，而且网页的质量也相对有很大的提高，

运用模版的好处多在于在修改网页时，只要在模版里

面修改，用到模版的网页都会相应的自动修改，大大

的提高了对网站的信息等的更新。当然有很多网页会

与网站的主页在风格上有所不同，比如在我的网站中

的“关于我”，就运用了与本站主页所不同的网页风

格，网站的主页是以淡蓝色为主色调而设计的，而在网站中的“关于我”是以浅绿色为主色调而设计的，浅绿色体现了活力，在关于我里面有运用了另一个模版，在“关于我”中还包括了三个二级网页，其中也用到了与主页不同风格的网页模版。

此网页中的三个二级网页为：我的简介、我的博客和联系我哦；还有一个返回网站首页的链接。

在整个网站的设计中用到了大量的表格，每一个网页都用表格规划排版，在表格里面嵌套表格，同时还运用了大量的背景图片，是网页的色彩深浅搭配合理，在表格及文字中还运用了CSS样式，控制文字的样式：大小、颜色以及对齐方式；表格的边框等等。

为了使静态的网页看起来有动态的视觉效果，在网页中插入了FLASH动画，设计了