《个人网页设计》课程设计报告汇.doc

目录 一、概述 2 二、结构图 2 三、网页主题选择 2 四、模块介绍 3 （一）首页 4 1、整体框架代码 5 2、导航栏动态跳动效果的脚本代码 8 3、日历脚本代码和日历CSS属性设置 9 4、每张网页都通过同一个层叠样式表touming.css来控制属性，框架CSS代码如下 14 （二）日志 19 1、日志局部代码实现 19 2、相关日至导航图和代码 20 （三）留言 21 1、留言局部代码实现 21 2、评论脚本代码实现通过点击事件onclick来实现 22 （四）相册 23 1、相册局部代码实现 23 2、实现相册翻页的脚本代码如下 24 3、图片滚动效果图和代码 25 （五）关于我 27 1、关于我局部代码实现： 27 五、总结 29 六、制作平台 29 一、概述 故本次 在整个网页设计过程中主要是在模仿，模仿个人博客，个人空间的相关模块设置和功能实现。个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。 在网页制作中，我借鉴了个人网的设计风格，整个网的架构是由Dreamwave完成的。 结构图 三、所以，我的关注的便是怎样让自己的网更具有个性魅力，使个人擅长的信息更全面的反映于浏览者。 四、模块介绍 （一）首页 1、整体框架代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title郑伟的空间/title link type=text/css rel=stylesheet href=js和css/touming.css / script language=javascript src=js和css/index.js/script style type=text/css !-- #apDiv3 { position:absolute; left:367px; top:104px; width:199px; height:231px; z-index:5; } #apDiv4{ position:absolute; left:36px; top:415px; width:175px; height:208px; z-index:5; } #gengxin{ position:absolute; left:804px; top:608px; width:333px; height:259px; z-index:5; } #show{ position:absolute; left:36px; top:87px; width:309px; height:258px; z-index:6; } #apDiv5 { position:absolute; left:442px; top:943px; width:609px; height:56px; z-index:6; } -- /style /head body div id=warp1 div id=kongjianfont face=华文隶书 h1心醉公社/h1/font/div div id=index a href=homepage.htmldiv id=d1 onmouseover=dis(1);shake() style=border:#FFF font id=xuan 首页/font/div/a a href=log .htmldiv id=d2 onmouseover=dis(2);shake() style=border:#FFFfont id=xuan 日志/font/div/a a href=comment.htmldiv id=d3 onmouseover=dis(3);shake() style=border:#FFFfont id=xuan 留言/font/div/a a href=photoalbum.htmldiv id=d4 onmouseover=dis(4);shake() style=border:#FFFfont id=xuan 相册/font/div/a a href=aboutme .htmldiv id=d5 onmouseover=dis(5);shake()