静态网站设计报告模板

网页设计报告

学部：

课程名称：网页设计基础专业：

学号：

姓名：

指导老师：

目录

一、网站简介 (1)

1.1网站介绍 (1)

1.2制作工具 (2)

1.3站点介绍 (3)

1.4文件夹摆放简介 (3)

二、布局简介 (4)

2.1首页布局 (4)

2.2个人中心布局工具 (4)

2.3朋友布局 (5)

2.4作品布局 (5)

2.5学校布局 (5)

2.6相册布局 (6)

三、网站内容介绍 (8)

四、制作心得 (11)

五、参考文献 (12)

一、网站简介

1.1网站介绍

我的网站是介绍自己的个人网站，总共15个页面，其中导航上有6个链接，包括首页、个人中心、朋友、作品、学校、相册。

首页部分：介绍了自己的一些简单的资料，其中有一份电子杂志，是平时的时候为了留作纪念做的，很想与老师和同学们分享。

个人中心：关于自己的一些详细的信息，以及在大学的一些变化，里面有两个子网页，通过图片链接进入，包括我的家乡和我的专业；我的家乡是介绍荆州和荆州公安的一些信息，而专业就是介绍的电子商务方面的一些信息。

朋友：包括三个子网页，介绍我的三个好朋友，李梦雪、陈丽婷和何立芝；好朋友有很多，只是因为时间原因，没有多余的时间做更多的页面去介绍，在后期的完善过程，会一一加上，因为网站做好不仅仅是因为它是作业、是考试，还是自己在大学的知识的积累和美好的回忆。

作品：运用SPAY放置了自己的五篇随便，平时很喜欢写随便，一段时间不写，就觉得少了写什么。当然，还包括自己喜欢的一些作家，很喜欢张小娴，喜欢她的文字，很真实，因此也用了一个页面专门介绍张小娴。

学校：这一部分我仅仅介绍了大学和高中，因为资源有限，没有一些关于小学和初中的照片，也就没办法详细介绍。相册这页，是花了最多心思去做的一个页面，其中的一个“鼠标经过图片移动”是在平时自学CSS的时候学到的知识，因为对制造网站有很大的兴趣，所以，在平时有时间的时候，会在网上下载一些视频和资料，用来自学。

相册：包含两个子网页，分别是班级相册和家人相册。在下面的介绍中，会仔细介绍。

1.2制作工具

Dreamweaver 8.0

1.3站点介绍

1.4文件夹摆放简介

在文件夹200810178140刘琴里面分为6个子文件夹，命名如下图所示，为了让读者更快捷的进入我的网站，我将index页放在了外面。

二、布局简介

我的网站包括15个页面，八种布局，最主要的运用上下、左右布局，再细分。

2.1首页布局：首页布局采用的是左右结构，其中左分为上、中、下三部分，分别添加下拉式、图片链接、日期三部分。右边是简单的背景加文字组成。大致布局如图1.1

图1.1

2.2个人中心布局：个人中心主要是上下结构，其中上部分包括左中右，下部分包括四块，分别以左上、左下、右上、右下命名，这样的布局在感觉上很复杂，其实很简单，比如下部分的四个块状，它的代码是共同的。大致布局如图2.1

图2.1

2.3朋友布局：朋友部分的布局很简单，简单的上下结构，简单的利用图片的固定位置来构造成上部分的左右结构。在我的家乡页面简介中，也是运用的相同布局。其布局如

3.1

图3.1

2.4作品布局：作品部分运用的是上下结构，其中下部分分为左右两块，如下图4.1

2．5学校简介：学校部分的布局和三个朋友简介页面的布局是采用的相同布局，都是运用的上下结构，其中上部分包括左右，这种布局与上面的作品布局很像，其大致结构如下图5.1

图5.1

2.6相册布局：相册布局采用的是左右结构，再对左部分划分，划分为上中下三

部分，对右部分划分为上下结构。这样的布局在是视觉上可能较为凌乱，但是只要运用较为搭配的色彩，就不会有这种感觉。布局简图如6.1所示

图6.1

另外的两种布局较为简单，即对center部分进行划分，划分为三到四部分。上6图即为我的网站大致布局模式。为了能在不同的浏览器中显示的效果比较统一，在布局的时候，所以的布局都采用了上中下三部分的模式，其中在对center 部分加以扩展，这样的布局使所以的内容伴随着header 、center、footer一起移动，这样一来，就能达到预期的效果。

书本上介绍的布局模式包括肯多，像一列宽度居中、两列固定宽度、三列自适应、高度自适应等，这些布局模式在网站中都有用到。

三、网站内容介绍

3.1 首页

网站首页简单明了，让读者可以很直接的找到自己所需的分类

四、其中，导航栏加入了弹出式菜单在鼠标滑过菜单时会有变化。同时在

主页中多处加入了超链接，用来方便浏览者来查找资料还有等。

3.2吉他入门

在吉他入门这一栏中采用了文本与图片相结合的方式进行制作

在吉他入门这一类中其他分栏基本采用同样的图文结合的方式进行制作与设计的

3.3 吉他教程

在吉他教程分页中，我依旧采用了图文结合的方式进行设计与制作，不过在主页的三个视频连接和此分页中的热门视频分栏中插入了视频元素，

还有热门图谱中的图片元素

3.4 联系我们

在联系我们这一分页中只插入了一些文本与图片

3.5.意见反馈

意见反馈分页中插入了意见反馈表，采用了表格——表单里面的内容

并在下面插入了提交和重置按钮

四制作心得

这次的网站制作，是来打大学后的第二份网站，可是我觉得依然学到了很多知识，相比前一份网站，这一份不仅仅制作的时间较久，而且花了更多的心思，做一份关于自己的网站，相对而言，没那么简单，需要的素材是自己的，所做的布局要自己想，网上的个人网站，要么太复杂，要么太简单，都不适合自己。

在制作前，本来以为在课堂上学习的知识远远不够我们做一份完整的网站，但是后来我发现我错了，一个网站做下来，发现所用到的全是老师上课讲过的。当然，还有些没有用到的知识和自己在课外学到的知识。

在制作网站的时候发现，Dreamweaver的确很强大。需要学习的去运用的东西还有很多，想要做出一份好的网站，必须对软件足够的熟悉，这点我做的还不