静态网站设计报告 - 图文 联系客服

}

.hg li {

background:white; padding:8px;

border:1px solid black; float:left;

margin:10px 13px 0 0; }

.hg li a { width:250px; height:161px; display:block; position:relative; overflow:hidden; }

.hg li img {

position:absolute; left:0; top:0;

width: 251px; } .hg li span { display:block; padding:5px 10px; text-align:center; }

.hg li span.title {

font:bold 18px \ color:#06F; padding-top:50px; }

.hg li span.address {

font:12px \ color:blue; }

*html .hg li{ display:inline; }

*html .hg{ height:1%; }

这里,就简单介绍这两段代码,在充分了解到CSS与DIV分离的好处之后,在制作网页的时候,我都会选择分离。这样,不仅方便链接,而且方便更改,在不满意某一部分的布局的时候,可以直接打开CSS文件,直接更改,保存后,文

8

件也会自己更新链接。这种方式,在页面布局较为复杂的时候,运用较为方便。

四、网站内容介绍

先看几组关于网站的图片

这是网站的导航部分,我的整个个人网站都采用的同一个导航,导航条运用的是滑动门技术,即块状链接部分,不是颜色填充,是背景图片的位置移动,达到一种移动的视觉效果。

这是运用的Flash相册制作,左右有两个按钮,可以点击看大图,在Flash学习过程中,就明白,在以后的网站制作中,必然少不了动画的运用。我的网站运用了三个SWF文件,分别在朋友、相册、家人相册里面,但是运用的确不是同一种方式。

9

这是直接运用的CSS,在鼠标滑过的时候,会有另一个页面出现,可以在连网的情况下进入改好友的空间。上面的代码介绍中,有关于这部分实现的代码。

这个是直接运用添加媒体SWF文件,图片是整个div的背景。运用PS直接对图片添加文字,达到的这样的效果。

10

这是个人中心里面的布局,介绍了我大学三年来的一些改变,因为大四还没经过,不知道会是什么样子,所以,用一个问号来代替,以后,会在大四来临后,改变图片。

整个网站一介绍自己和自己的亲朋好友为主,同时介绍自己的高中和大学,都是一些与自己最相关的资料,当时选择制作个人网站的时候,主要是考虑到,制作个人网站能够突出自己的特点,毕竟从收集图片到网站布局和制作都是自己的思维方式在控制,在网上找不到布局的灵感和使用的素材。

从站点我们可以看出来,我的网站布局采取的是最深三级的布局模式,这样的布局个人觉得比较清晰,对整个网站的布局可以一目了然。

五 制作心得

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

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

在制作网站的时候发现,Dreamweaver的确很强大。需要学习的去运用的东西还有很多,想要做出一份好的网站,必须对软件足够的熟悉,这点我做的还不够,有些效果想要实现却不知道如何去写代码,希望,在以后的 学习过程中,能够很好的运用那些没用过的代码,了解CSS的强大。在这里,很感激王老师的教导。

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

11

通过这次网站的制作,我学到了很多,不仅仅是知识与技术方面,还有其他很多,如色彩搭配,整体协调,集体精神等。这些,对于以后的学习生活,都会有帮助,毕竟这样的机会不多,还是应该好好珍惜的。

六、参考书籍:

[1] CSS网站布局实录第二版.北京:科学出版社,2007 [2] 网页设计与制作.北京:人民邮电出版社,2007 [3] 网页设计与制作实例教程.北京:清华大学出版社,2008 [4] 赵锋等著.网页制作教程.北京:清华大学出版社,2009 [5] Flash动画设计与制作.北京:清华大学出版社,2009 [6] Photoshop CS2图像处理教程.北京:机械工业出版社,2007

12