静态网站设计报告Word格式文档下载.docx
- 文档编号:8218563
- 上传时间:2023-05-10
- 格式:DOCX
- 页数:14
- 大小:1.46MB
静态网站设计报告Word格式文档下载.docx
《静态网站设计报告Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《静态网站设计报告Word格式文档下载.docx(14页珍藏版)》请在冰点文库上搜索。
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部分主要是文字及图片,这里就不重点介绍。
下面是首页部分的一小段代码:
<
title>
首页<
/title>
linkhref="
css/css1.css"
rel="
stylesheet"
type="
text/css"
/>
/head>
body>
divid="
header"
>
<
imgsrc="
image/wenzi3.png"
/>
ulid="
nav"
li>
ahref="
page/index.html"
b>
/b>
/a>
/li>
page/gerenzhongxin.html"
个人中心<
page/pengyou.html"
朋友<
page/zuoping.html"
作品<
page/daxue.html"
学校<
page/xiangce.html"
相册<
/ul>
/div>
在后面的网页制作中,根据不同的需要设置不同的id,再在CSS中更改为自己需要的效果。
再来看看相册中,鼠标经过滑动的效果,DIV部分的代码是如何布局的。
ulclass="
hg"
target="
_blank"
../image/left.png"
alt="
"
spanclass="
title"
笑笑的空间<
/span>
address"
liclass="
bottom"
../image/b.png"
立芝的空间<
left"
../image/d.png"
哥哥的空间<
../image/g.png"
雪的空间<
../image/c.png"
徒弟的空间<
../image/j.png"
丽婷的空间<
下面是CSS值得设置,这里只有一个hg这一个id,因此,代码部分虽然长,却很清晰,一目了然。
.hg{
width:
610px;
overflow:
hidden;
}
.hgli{
background:
white;
padding:
8px;
border:
1pxsolidblack;
float:
left;
margin:
10px13px00;
.hglia{
250px;
height:
161px;
display:
block;
position:
relative;
.hgliimg{
absolute;
left:
0;
top:
251px;
}
.hglispan{
5px10px;
text-align:
center;
.hglispan.title{
font:
bold18px"
TimesNewRoman"
Times,serif;
color:
#06F;
padding-top:
50px;
.hglispan.address{
12px"
PalatinoLinotype"
"
BookAntiqua"
Palatino,serif;
blue;
*html.hgli{
inline;
*html.hg{
1%;
这里,就简单介绍这两段代码,在充分了解到CSS与DIV分离的好处之后,在制作网页的时候,我都会选择分离。
这样,不仅方便链接,而且方便更改,在不满意某一部分的布局的时候,可以直接打开CSS文件,直接更改,保存后,文件也会自己更新链接。
这种方式,在页面布局较为复杂的时候,运用较为方便。
4、网站内容介绍
先看几组关于网站的图片
这是网站的导航部分,我的整个个人网站都采用的同一个导航,导航条运用的是滑动门技术,即块状链接部分,不是颜色填充,是背景图片的位置移动,达到一种移动的视觉效果。
这是运用的Flash相册制作,左右有两个按钮,可以点击看大图,在Flash学习过程中,就明白,在以后的网站制作中,必然少不了动画的运用。
我的网站运用了三个SWF文件,分别在朋友、相册、家人相册里面,但是运用的确不是同一种方式。
这是直接运用的CSS,在鼠标滑过的时候,会有另一个页面出现,可以在连网的情况下进入改好友的空间。
上面的代码介绍中,有关于这部分实现的代码。
这个是直接运用添加媒体SWF文件,图片是整个div的背景。
运用PS直接对图片添加文字,达到的这样的效果。
这是个人中心里面的布局,介绍了我大学三年来的一些改变,因为大四还没经过,不知道会是什么样子,所以,用一个问号来代替,以后,会在大四来临后,改变图片。
整个网站一介绍自己和自己的亲朋好友为主,同时介绍自己的高中和大学,都是一些与自己最相关的资料,当时选择制作个人网站的时候,主要是考虑到,制作个人网站能够突出自己的特点,毕竟从收集图片到网站布局和制作都是自己的思维方式在控制,在网上找不到布局的灵感和使用的素材。
从站点我们可以看出来,我的网站布局采取的是最深三级的布局模式,这样的布局个人觉得比较清晰,对整个网站的布局可以一目了然。
五制作心得
这次的网站制作,是来打大学后的第二份网站,可是我觉得依然学到了很多知识,相比前一份网站,这一份不仅仅制作的时间较久,而且花了更多的心思,做一份关于自己的网站,相对而言,没那么简单,需要的素材是自己的,所做的布局要自己想,网上的个人网站,要么太复杂,要么太简单,都不适合自己。
在制作前,本来以为在课堂上学习的知识远远不够我们做一份完整的网站,但是后来我发现我错了,一个网站做下来,发现所用到的全是老师上课讲过的。
当然,还有些没有用到的知识和自己在课外学到的知识。
在制作网站的时候发现,Dreamweaver的确很强大。
需要学习的去运用的东西还有很多,想要做出一份好的网站,必须对软件足够的熟悉,这点我做的还不够,有些效果想要实现却不知道如何去写代码,希望,在以后的学习过程中,能够很好的运用那些没用过的代码,了解CSS的强大。
在这里,很感激王老师的教导。
网站不足之处:
制作一份完整的网站,还需要登录系统等后台数据库的连接,可是,因为时间还有技术原因,我的网站没有插入登录系统,我们有学习关于登陆页面的制作,在课堂上我也有认真的完成相关的作业,可是,因为个人网站没有必要用户登录和注册,而且数据库的链接也不完善,因此,选择了放弃登录页面的插入。
如果有必要,在学习了动态网页制作后,我会在网站插入相关的登录页面,这样,才算一个完整的网站。
通过这次网站的制作,我学到了很多,不仅仅是知识与技术方面,还有其他很多,如色彩搭配,整体协调,集体精神等。
这些,对于以后的学习生活,都会有帮助,毕竟这样的机会不多,还是应该好好珍惜的。
六、参考书籍:
[1]CSS网站布局实录第二版.北京:
科学出版社,2007
[2]网页设计与制作.北京:
人民邮电出版社,2007
[3]网页设计与制作实例教程.北京:
清华大学出版社,2008
[4]赵锋等著.网页制作教程.北京:
清华大学出版社,2009
[5]Flash动画设计与制作.北京:
[6]PhotoshopCS2图像处理教程.北京:
机械工业出版社,2007
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 静态 网站 设计 报告