静态网站设计报告模板.docx

静态网站设计报告模板.docx

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

静态网站设计报告模板

网页设计报告

学部：

课程名称：

网页设计基础

专业：

学号：

姓名：

指导老师：

一、简介

1.1介绍

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

首页部分：

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

个人中心：

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

朋友：

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

作品：

运用SPAY放置了自己的五篇随便，平时很喜欢写随便，一段时间不写，就觉得少了写什么。

当然，还包括自己喜欢的一些作家，很喜欢小娴，喜欢她的文字，很真实，因此也用了一个页面专门介绍小娴。

学校：

这一部分我仅仅介绍了大学和高中，因为资源有限，没有一些关于小学和初中的照片，也就没办法详细介绍。

相册这页，是花了最多心思去做的一个页面，其中的一个“鼠标经过图片移动”是在平时自学CSS的时候学到的知识，因为对制造有很大的兴趣，所以，在平时有时间的时候，会在网上下载一些视频和资料，用来自学。

相册：

包含两个子网页，分别是班级相册和家人相册。

在下面的介绍中，会仔细介绍。

1.2制作工具

Dreamweaver8.0

1.3站点介绍

1.4文件夹摆放简介

在文件夹0琴里面分为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

图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的确很强大。

需要学习的去运用的东西还有很多，想要做出一份好的，必须对软件足够的熟悉，这点我做的还不够，有些效果想要实现却不知道如何去写代码，希望，在以后的学习过程中，能够很好的运用那些没用过的代码，了解CSS的强大。

在这里，很感激王老师的教导。

不足之处：

制作一份完整的，还需要登录系统等后台数据库的连接，可是，因为时间还有技术原因，我的没有插入登录系统，我们有学习关于登陆页面的制作，在课堂上我也有认真的完成相关的作业，可是，因为个人没有必要用户登录和注册，而且数据库的也不完善，因此，选择了放弃登录页面的插入。

如果有必要，在学习了动态网页制作后，我会在插入相关的登录页面，这样，才算一个完整的。

通过这次的制作，我学到了很多，不仅仅是知识与技术方面，还有其他很多，如色彩搭配，整体协调，集体精神等。

这些，对于以后的学习生活，都会有帮助，毕竟这样的机会不多，还是应该好好珍惜的。

五、参考书籍：

[1]CSS布局实录第二版.：

科学，2007

[2]网页设计与制作.：

人民邮电，2007

[3]网页设计与制作实例教程.:

清华大学，2008

[4]锋等著.网页制作教程.：

清华大学，2009

[5]Flash动画设计与制作.：

清华大学，2009

[6]PhotoshopCS2图像处理教程.：

机械工业，2007