《个人网页设计》课程设计报告Word格式文档下载.docx
《《个人网页设计》课程设计报告Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《《个人网页设计》课程设计报告Word格式文档下载.docx（36页珍藏版）》请在冰豆网上搜索。
故在介绍我首页的结果后就不一一详细介绍其他页面的结构，而只是将各个页面中<
的代码写下来。
每张网页所用到的脚本文件有所不同，故也会将所用到的脚本文件代码写下来。
脚本文件是用javascript写的，而且是用外部链接形式调入网页的，以便于网页代码的优化、修改和维护。
受某些博客的影响，我非常喜欢导航栏的动态效果和音频效果。
所在，在导航栏上我和搭档一直在写动态抖动的js代码。
当然好的网页是通过好的布局、绚丽的层叠样式表CSS的使用、动态的实现等很多因素共同作用的结果。
有些简单的脚本代码自己实现的，当然有些比较复杂的脚本代码参考过网络资源，像日历这个脚本代码是参考网络上的资源。
（一）首页
1、整体框架代码：
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
title>
郑伟的空间<
/title>
linktype="
text/css"
rel="
stylesheet"
href="
js和css/touming.css"
scriptlanguage="
javascript"
src="
js和css/index.js"
/script>
styletype="
--
#apDiv3{
position:
absolute;
left:
367px;
top:
104px;
width:
199px;
height:
231px;
z-index:
5;
}
#apDiv4{
36px;
415px;
175px;
208px;
#gengxin{
804px;
608px;
333px;
259px;
#show{
87px;
309px;
258px;
6;
#apDiv5{
442px;
943px;
609px;
56px;
-->
/style>
/head>
body>
divid="
warp1"
<
kongjian"
fontface="
华文隶书"
>
h1>
心醉公社<
/h1>
/font>
index"
ahref="
homepage.html"
d1"
onmouseover="
dis
（1）;
shake（）"
style="
border:
#FFF"
fontid="
xuan"
首页<
/a>
log.html"
d2"
dis
（2）;
日志<
comment.html"
d3"
dis（3）;
留言<
photoalbum.html"
d4"
dis（4）;
相册<
aboutme.html"
d5"
dis（5）;
关于我<
divclass="
zz"
introduce"
h2>
个人中心<
/h2>
me"
imgsrc="
image/portrait.jpg"
width="
125"
height="
131"
align="
middle"
/>
--以下是主板块内容-->
content"
contents"
id="
content1"
content2"
content3"
content4"
content5"
FONTcolor="
#351DBE"
face=隶书size=5>
&
nbsp;
MARQUEEdirection="
left"
height=50width=240>
欢迎加盟心醉公社<
/MARQUEE>
/FONT>
#5BA0DF"
face=隶书size=5>
right"
社公醉心盟加迎欢<
apDiv3"
background-image:
url（image/15.jpg）"
apDiv4"
url（image/16.jpg）"
show"
幼圆"
color="
#000000"
;
size="
+1"
闭上眼睛，我看到了我的前途……<
br/>
好朋友是一本书可以打开一个世界，<
br/>
开创一个好生活；
朋友是一面镜子，<
可以照见自己的影子。
左手边的温度半边床的幸福, <
你的温柔我仍然记得那么清楚, <
幸福就在不远处。
<
午后阳光覆盖的金黄色沙滩掩埋不掉心头沁出的甜；
海与天湛蓝相爱的分界线分不出尽头究竟有多远。
<
--以下是日历代码-->
rili"
--日历脚本内容-->
media"
embedsrc="
sound/自然卷-坐在巷口的那对男女（原版）.mp3"
284"
28"
autostart="
true"
/embed>
xiaodaohang"
center>
<
image/talk.gif"
absmiddle"
|
image/message.gif"
|<
<
image/team.gif"
image/addto.gif"
/center>
gengxin"
fontcolor="
#0c2f86"
;
font-weight:
bold"
最近更新<
tablewidth="
100%"
border="
0"
cellspacing="
2"
cellpadding="
10"
tr>
td>
fontsize="
#0000CC"
用心诠释着?
不是幸福的幸福<
不知道从什么时候开始寻找一种叫幸福的东西```<
hrcolor="
#999999"
/td>
/tr>
td>
log-副本.html"
小生活，小幸福<
我常常在想，我究竟是一个```<
log-副本
（2）.html"
拥有你，我好幸福<
曾经看过这么一段话：
爱情是追到手的吗？
/table>
apDiv5"
class="
Copyrightzhengwei0601web-SomeRightsReserved.<
hralign="
center"
#0066CC"
75%"
DesignBy<
ahttp:
//zhengwei0601.web-target="
_blank"
心醉湾<
scriptsrc="
language="
JavaScript"
/body>
/html>
2、导航栏动态跳动效果的脚本代码：
varcurrunt=0;
functiondis（menu_number）{
currunt=menu_number;
width=30;
speed=5;
positionX=0;
preSpeed=0;
flag=1;
document.getElementById（"
+menu_number）.style.display="
block"
hidRest（menu_number）;
}
functionhidRest（menu_clicked）{
varMENU_LENGTH=5;
for（i=1;
i<
=MENU_LENGTH;
i++）{
if（i!
=menu_clicked）{
+i）.style.display="
none"
functionshake（）{
if（flag==1）{
speed=1-speed*0.8
positionX+=speed;
positionX-=preSpeed;
d"
+currunt）.style.top=positionX
if（Math.abs（speed）<
1.0）{
+currunt）.style.top=0;
flag=0;
preSpeed=speed;
setTimeout（"
50）
3、日历脚本代码和日历CSS属性设置：
日历效果图
ScriptLANGUAGE="
varmonths=newArray（"
一"
"
二"
三"
"
四"
五"
六"
七"
八"
九"
十"
十一"
十二"
）;
vardaysInMonth=newArray（31,28,31,30,31,30,31,31,30,31,30,31）;
vardays=newArray（"
日"
varclassTemp;
vartoday=newgetToday（）;
varyear=today.year;
varmonth=today.month;
varnewCal;
functiongetDays（month,year）{
if（1==month）
return（（0==year%4）&
（0!
=（year%100）））||（0==year%400）?
29:
28;
elsereturndaysInMonth[month];
functiongetToday（）{
this.now=newDate（）;
this.year=this.now.getFullYear（）;
this.month=this.now.getMonth（）;
this.day=this.now.getDate（）;
functionCalendar（）{
newCal=newDate（year,month,1）;
today=newgetToday（）;
varday=-1;
varstartDay=newCal.getDay（）;
varendDay=getDays（newCal.getMonth（）,newCal.getFullYear（））;
vardaily=0;
if（（today.year==newCal.getFullYear（））&
（today.month==newCal.getMonth（）））
{
day=today.day;
varcaltable=document.all.caltable.tBodies.calendar;
varintDaysInMonth=getDays（newCal.getMonth（）,newCal.getFullYear（））;
for（varintWeek=0;
intWeek<
caltable.rows.length;
intWeek++）
for（varintDay=0;
intDay<
caltable.rows[intWeek].cells.length;
intDay++）
varcell=caltable.rows[intWeek].cells[intDay];
varmontemp=（newCal.getMonth（）+1）<
10?
（"
+（newCal.getMonth（）+1））:
（newCal.getMonth（）+1）;
if（（intDay==startDay）&
（0==daily））{daily=1;
vardaytemp=daily<
+daily）:
（daily）;
vard="
"
+newCal.getFullYear（）+"
-"
+montemp+"
+daytemp+"
if（day==daily）cell.className="
DayNow"
elseif（intDay==6）cell.className="
DaySat"
elseif（intDay==0）cell.className="
DaySun"
elsecell.className="
Day"
if（（daily>
0）&
（daily<
=intDaysInMonth））
cell.innerText=daily;
daily++;
}else
cell.className="
CalendarTD"
cell.innerText="
document.all.year.value=year;
document.all.month.value=month+1;
functionsubMonth（）
if（（month-1）<
0）
month=11;
year=year-1;
month=month-1;
Calendar（）;
functionaddMonth（）
if（（month+1）>
11）
month=0;
year=year+1;
month=month+1;
functionsetDate（）
if（document.all.month.value<
1||document.all.month.value>
12）
alert（"
月的有效范围在1-12之间!
return;
year=Math.ceil（document.all.year.value）;
month=Math.ceil（document.all.month.value-1）;
/Script>
Script>
functionbuttonOver（）
{
varobj=window.event.srcElement;
obj.runtimeStyle.cssText="
background-color:
#FFFFFF"
//obj.className="
Hover"
functionbuttonOut（）
window.setTimeout（function（）{obj.runtimeStyle.cssText="
},300）;
Style>
Input{font-family:
verdana;
font-size:
9pt;
text-decoration:
none;
#FFFFFF;
height:
20px;
1pxsolid#666666;
color:
#000000;
.Calendar{font-family:
width:
170;
#C0D0E8;
0pxdotted#1C6FA5;
.CalendarTD{font-family:
7pt;
#000000;
#f6f6f6;
11%;
text-align:
center;
.Title{font-family:
11pt;
normal;
24px;
#333333;
#A4B9D7
升级会员 