《个人网页设计》课程设计报告.docx
- 文档编号：5008841
- 上传时间：2022-12-12
- 格式：DOCX
- 页数：36
- 大小：2.86MB
《个人网页设计》课程设计报告.docx
《《个人网页设计》课程设计报告.docx》由会员分享，可在线阅读，更多相关《《个人网页设计》课程设计报告.docx（36页珍藏版）》请在冰豆网上搜索。
《个人网页设计》课程设计报告
目录
一、概述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
一、概述
现在网络越来越趋于平常化，网络一是生活正不可或缺的一部分。
自己平时上博客、刷微博的时候就觉得有些网页自己可尝试着写出来。
自己也在网页和脚本这方面学过一点知识，因此可能上手比较块，故本次课程设计课题我和李运强选的题目是个人网页的设计。
在整个网页设计过程中主要是在模仿，模仿个人博客，个人空间的相关模块设置和功能实现。
个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。
内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。
在网页制作中，我借鉴了网络上个人网页的设计风格，采用博客的形式来做整体框架。
整个网页的架构是由DreamwaveCS4完成的。
二、结构图
三、网页主题选择
以博客的形式展现自我已成为当前最为时髦和时尚的方式了。
主题我是参考我自己的免费空间里的网站唧唧歪歪网的博客形式。
例如整个背景的透明色设置就是受到它的启发。
所以，我的关注的便是怎样让自己的网页更具有个性魅力，使个人擅长的信息更全面的反映于浏览者。
我的博客形式的个人主页比较喜欢，所以主要是用博客的思想来展开我的设计思路。
作品做好后我会上传于我的空间，届时大家可以来访问。
访问地址是：
四、模块介绍
以博客的形式展示自我，所以每张网页的整体框架是一样的，只是在
故在介绍我首页的结果后就不一一详细介绍其他页面的结构，而只是将各个页面中
每张网页所用到的脚本文件有所不同，故也会将所用到的脚本文件代码写下来。
脚本文件是用javascript写的，而且是用外部链接形式调入网页的，以便于网页代码的优化、修改和维护。
受某些博客的影响，我非常喜欢导航栏的动态效果和音频效果。
所在，在导航栏上我和搭档一直在写动态抖动的js代码。
当然好的网页是通过好的布局、绚丽的层叠样式表CSS的使用、动态的实现等很多因素共同作用的结果。
有些简单的脚本代码自己实现的，当然有些比较复杂的脚本代码参考过网络资源，像日历这个脚本代码是参考网络上的资源。
（一）首页
1、整体框架代码：
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
--
#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;
}
-->
心醉公社
（1）;shake（）"style="border: #FFF">
（2）;shake（）"style="border: #FFF">