静态网站设计报告.docx
《静态网站设计报告.docx》由会员分享,可在线阅读,更多相关《静态网站设计报告.docx(14页珍藏版)》请在冰点文库上搜索。
静态网站设计报告
武汉科技大学城市学院
课程设计报告
学部:
信息工程学部
课程名称:
电子商务系统分析与设计
专业:
08级电子商务01班
学号:
200810178140
姓名:
刘琴
指导老师:
王玲
2011年05月02日
目录
一、网站简介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
三、代码简介6
四、网站内容介绍8
五、制作心得11
六、参考文献12
CSS网站布局简介
1、网站简介
1.1网站介绍
我的网站是介绍自己的个人网站,总共15个页面,其中导航上有6个链接,包括首页、个人中心、朋友、作品、学校、相册。
首页部分:
介绍了自己的一些简单的资料,其中有一份电子杂志,是平时的时候为了留作纪念做的,很想与老师和同学们分享。
个人中心:
关于自己的一些详细的信息,以及在大学的一些变化,里面有两个子网页,通过图片链接进入,包括我的家乡和我的专业;我的家乡是介绍荆州和荆州公安的一些信息,而专业就是介绍的电子商务方面的一些信息。
朋友:
包括三个子网页,介绍我的三个好朋友,李梦雪、陈丽婷和何立芝;好朋友有很多,只是因为时间原因,没有多余的时间做更多的页面去介绍,在后期的完善过程,会一一加上,因为网站做好不仅仅是因为它是作业、是考试,还是自己在大学的知识的积累和美好的回忆。
作品:
运用SPAY放置了自己的五篇随便,平时很喜欢写随便,一段时间不写,就觉得少了写什么。
当然,还包括自己喜欢的一些作家,很喜欢张小娴,喜欢她的文字,很真实,因此也用了一个页面专门介绍张小娴。
学校:
这一部分我仅仅介绍了大学和高中,因为资源有限,没有一些关于小学和初中的照片,也就没办法详细介绍。
相册这页,是花了最多心思去做的一个页面,其中的一个“鼠标经过图片移动”是在平时自学CSS的时候学到的知识,因为对制造网站有很大的兴趣,所以,在平时有时间的时候,会在网上下载一些视频和资料,用来自学。
相册:
包含两个子网页,分别是班级相册和家人相册。
在下面的介绍中,会仔细介绍。
1.2制作工具
1.3站点介绍
1.4文件夹摆放简介
在文件夹200810178140刘琴里面分为6个子文件夹,命名如下图所示,为了让读者更快捷的进入我的网站,我将index页放在了外面。
2、布局简介
我的网站包括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、代码简介
为了使源代码看起来更简洁,在制作的过程中更清晰,我的DIV和CSS是分离的,每一个页面对应一个CSS,相同的布局则直接进行链接就可以达到效果,这样的方式不仅省时,还很清晰。
在平时的网页制作过程中,我也会将CSS部分分离。
这里,简单的介绍上面介绍的6种布局的代码,由于DIV部分主要是文字及图片,这里就不重点介绍。
下面是首页部分的一小段代码:
首页
首页个人中心朋友作品学校相册