发布时间 : 星期三 文章静态网站设计报告 - 图文更新完毕开始阅读9c984279a26925c52cc5bf29
}
.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