《个人网页设计》课程设计报告.doc
目录一、概述2二、结构图2三、网页主题选择2四、模块介绍3（一）首页41、整体框架代码52、导航栏动态跳动效果的脚本代码83、日历脚本代码和日历CSS属性设置94、每张网页都通过同一个层叠样式表touming.css来控制属性，框架CSS代码如下14（二）日志191、日志局部代码实现192、相关日至导航图和代码20（三）留言211、留言局部代码实现212、评论脚本代码实现通过点击事件onclick来实现22（四）相册231、相册局部代码实现232、实现相册翻页的脚本代码如下243、图片滚动效果图和代码25（五）关于我271、关于我局部代码实现：27五、总结29六、制作平台29一、概述 现在网络越来越趋于平常化，网络一是生活正不可或缺的一部分。自己平时上博客、刷微博的时候就觉得有些网页自己可尝试着写出来。自己也在网页和脚本这方面学过一点知识，因此可能上手比较块，故本次课程设计课题我和李运强选的题目是个人网页的设计。 在整个网页设计过程中主要是在模仿，模仿个人博客，个人空间的相关模块设置和功能实现。个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。 在网页制作中，我借鉴了网络上个人网页的设计风格，采用博客的形式来做整体框架。整个网页的架构是由DreamwaveCS4完成的。 二、结构图 郑伟的空间日志相册留言关于我首页三、网页主题选择以博客的形式展现自我已成为当前最为时髦和时尚的方式了。主题我是参考我自己的免费空间里的网站唧唧歪歪网的博客形式。例如整个背景的透明色设置就是受到它的启发。所以，我的关注的便是怎样让自己的网页更具有个性魅力，使个人擅长的信息更全面的反映于浏览者。我的博客形式的个人主页比较喜欢，所以主要是用博客的思想来展开我的设计思路。作品做好后我会上传于我的空间，届时大家可以来访问。访问地址是： 四、模块介绍 以博客的形式展示自我，所以每张网页的整体框架是一样的，只是在<div id=content></div>中填充的内容不同。故在介绍我首页的结果后就不一一详细介绍其他页面的结构，而只是将各个页面中<div id=content></div>的代码写下来。每张网页所用到的脚本文件有所不同，故也会将所用到的脚本文件代码写下来。脚本文件是用javascript写的，而且是用外部链接形式调入网页的，以便于网页代码的优化、修改和维护。受某些博客的影响，我非常喜欢导航栏的动态效果和音频效果。所在，在导航栏上我和搭档一直在写动态抖动的js代码。当然好的网页是通过好的布局、绚丽的层叠样式表CSS的使用、动态的实现等很多因素共同作用的结果。有些简单的脚本代码自己实现的，当然有些比较复杂的脚本代码参考过网络资源，像日历这个脚本代码是参考网络上的资源。（一）首页1、整体框架代码：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/www.w3.org/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;#apDiv4position:absolute;left:36px;top:415px;width:175px;height:208px;z-index:5;#gengxinposition:absolute;left:804px;top:608px;width:333px;height:259px;z-index:5;#showposition: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="kongjian"><font face="华文隶书" > <h1>心醉公社</h1></font></div> <div id="index"> <a href="homepage.html"><div id="d1" onmouseover="dis(1);shake()" style="border:#FFF" ><font id="xuan" >首页</font></div></a> <a href="log .html"><div id="d2" onmouseover="dis(2);shake()" style="border:#FFF"><font id="xuan" >日志</font></div></a> <a href="comment.html"><div id="d3" onmouseover="dis(3);shake()" style="border:#FFF"><font id="xuan" >留言</font></div></a> <a href="photoalbum.html"><div id="d4" onmouseover="dis(4);shake()" style="border:#FFF"><font id="xuan" >相册</font></div></a> <a href="aboutme .html"><div id="d5" onmouseover="dis(5);shake()" style="border:#FFF"><font id="xuan">关于我</font></div></a> </div> <div class="zz"> <div id="introduce"> <h2>个人中心</h2></div> <div id="me"> <img src="image/portrait.jpg" width="125" height="131" align="middle"/></div> </div> <!-以下是主板块内容-> <div class="content" > <div class="contents" id="content1"></div> <div class="contents" id="content2"></div> <div class="contents" id="content3"></div> <div class="contents" id="content4"></div> <div class="contents" id="content5"></div><FONT color="#351DBE"face=隶书 size=5> <MARQUEE direction="left" height=50 width=240>欢迎加盟心醉公社</MARQUEE></FONT><FONT color="#5BA0DF" face=隶书 size=5><MARQUEE direction="right" height=50 width=240>社公醉心盟加迎欢</MARQUEE> </FONT> <div id="apDiv3" style="background-image:url(image/15.jpg)" ></div> <div id="apDiv4" style="background-image:url(image/16.jpg)" ></div><div id="show"><font face="幼圆" color="#000000" size="+1">闭上眼睛，我看到了我的前途<br/><br/> 好朋友是一本书可以打开一个世界，<br /> 开创一个好生活； 朋友是一面镜子，<br /> 可以照见自己的影子。<br /> <br />左手边的温度 半边床的幸福,<br /> 你的温柔我仍然记得那么清楚,<br /> 幸福就在不远处。<br /><br />午后阳光覆盖的金黄色沙滩掩埋不掉心头沁出的甜；<br /> 海与天湛蓝相爱的分界线分不出尽头究竟有多远 。<br /> <br /> <br /> </font></div></div> </div><!-以下是日历代码-><div id="rili"> <!-日历脚本内容-></div><div id="media"><embed src="sound/自然卷-坐在巷口的那对男女(原版).mp3" width="284" height="28" autostart="true"></embed></div><div id="xiaodaohang"><center> <img src="image/talk.gif" align="absmiddle"><a href="comment.html">留言</a> | <img src="image/message.gif" align="absmiddle"><a href="aboutme .html">关于我</a> |<br/><br/><img src="image/team.gif" align="absmiddle"><a href="photoalbum.html">相册</a> | <img src="image/addto.gif" align="absmiddle"><a href="log .html">日志</a> </center></div><div id="gengxin"><font color="#0c2f86" ; style="font-weight:bold">最近更新</font><br /> <table width="100%" border="0" cellspacing="2" cellpadding="10" > <tr> <td > <font size="+1" color="#0000CC"><a href="log .html">用心诠释着?不是幸福的幸福</a></font><br/> 不知道从什么时候开始寻找一种叫幸福的东西<hr color="#999999" /></td> </tr> <tr> <td> <font size="+1" color="#0000CC"><a href="log - 副本.html">小生活，小幸福</a></font><br />我常常在想，我究竟是一个 <hr color="#999999" /></td> </tr> <tr> <td> <font size="+1" color="#0000CC"><a href="log - 副本 (2).html">拥有你，我好幸福</a></font><br />曾经看过这么一段话： 爱情是追到手的吗？ <hr color="#999999" /></td> </tr> </table></div><div id="apDiv5" class="content"><center>Copyright zhengwei0601web- Some Rights Reserved.</center><hr align="center" color="#0066CC" width="75%"/><center>Design By <a http:/zhengwei0601.web- target="_blank">心醉湾</a><script src=" language="JavaScript"></script></center></div></body></html>2、导航栏动态跳动效果的脚本代码： var currunt=0; function dis(menu_number) currunt=menu_number; width=30; speed=5; positionX=0; preSpeed=0; flag=1; document.getElementById("content"+menu_number).style.display="block" hidRest(menu_number); function hidRest(menu_clicked) var MENU_LENGTH=5; for(i=1;i<=MENU_LENGTH;i+) if(i!=menu_clicked) document.getElementById("content"+i).style.display="none" function shake() if(flag=1) speed=1-speed*0.8 positionX+=speed; positionX-=preSpeed; document.getElementById("d"+currunt).style.top=positionX if(Math.abs(speed)<1.0) document.getElementById("d"+currunt).style.top=0; flag=0; preSpeed=speed; setTimeout("shake()",50) 3、日历脚本代码和日历CSS属性设置： 日历效果图<Script LANGUAGE="JavaScript"> var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二"); var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31); var days = new Array("日","一", "二", "三","四", "五", "六"); var classTemp; var today=new getToday(); var year=today.year; var month=today.month; var newCal; function getDays(month, year) if (1= month) return (0 = year % 4) && (0 != (year % 100) |(0 = year % 400) ? 29 : 28; else return daysInMonthmonth; function getToday() this.now = new Date(); this.year = this.now.getFullYear(); this.month = this.now.getMonth(); this.day = this.now.getDate(); function Calendar() newCal = new Date(year,month,1); today = new getToday(); var day = -1; var startDay = newCal.getDay(); var endDay=getDays(newCal.getMonth(), newCal.getFullYear(); var daily = 0; if (today.year = newCal.getFullYear() && (today.month = newCal.getMonth() day = today.day; var caltable = document.all.caltable.tBodies.calendar; var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear(); for (var intWeek = 0; intWeek < caltable.rows.length;intWeek+) for (var intDay = 0;intDay < caltable.rowsintWeek.cells.length;intDay+) var cell = caltable.rowsintWeek.cellsintDay; var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1):(newCal.getMonth()+1); if (intDay = startDay) && (0 = daily) daily = 1; var daytemp=daily<10?("0"+daily):(daily); var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">" if(day=daily) cell.className="DayNow" else if(intDay=6) cell.className = "DaySat" else if (intDay=0) cell.className ="DaySun" else cell.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; function subMonth() if (month-1)<0) month=11; year=year-1; else month=month-1; Calendar(); function addMonth() if(month+1)>11) month=0; year=year+1; else month=month+1; Calendar(); function setDate() 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); Calendar(); </Script><Script>function buttonOver() var obj = window.event.srcElement; obj.runtimeStyle.cssText = "background-color:#FFFFFF"/ obj.className="Hover"function buttonOut() var obj = window.event.srcElement; window.setTimeout(function()obj.runtimeStyle.cssText = "",300);</Script><Style>Input font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;.Calendar font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;.CalendarTD font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;.Title font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;.Day font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;.DaySat font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;.DaySun font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;.DayNow font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;.DayTitle font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;.DaySatTitle font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;.DaySunTitle font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;.DayButton font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;</Style><table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable"><thead> <tr align="center" valign="middle"> <td colspan="7" class="Title"> <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode=13)setDate()" onkeyup="this.value=this.value.replace(/0-9/g,'')" onpaste="this.value=this.value.replace(/0-9/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode=13)setDate()" onkeyup="this.value=this.value.replace(/0-9/g,'')" onpaste="this.value=this.value.replace(/0-9/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a> </td> </tr> <tr align="center" valign="middle"> <Script LANGUAGE="JavaScript"> document.write("<TD class=DaySunTitle id=diary >" + days0 + "</TD>"); for (var intLoop = 1; intLoop < days.length-1;intLoop+) document.write("<TD class=DayTitle id=diary>" + daysintLoop + "</TD>"); document.write("<TD class=DaySatTitle id=diary>" + daysintLoop + "</TD>"); </Script> </TR> </thead><TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()"> <Script LANGUAGE="JavaScript"> for (var intWeeks = 0; intWeeks < 6; intWeeks+) document.write("<TR style='cursor:hand'>"); for (var intDays = 0; intDays < days.length;intDays+) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>"); document.write("</TR>"); </Script></TBODY></TABLE><Script LANGUAGE="JavaScript"> Calendar();</Script>4、每张网页都通过同一个层叠样式表touming.css来控制属性，框架CSS代码如下:在这里我用的是外部样式表，因为这样既可以使得网页代码看起来简单又可以方便的同时设置多个网页的属性。外部层叠样式表的连接方式为<link type="text/css" rel="stylesheet" href="js和css/touming.css" />charset "utf-8"/* CSS Document */body background-image:url(./image/background.jpg) .contentfont-size:14px;background-color:#D5DFDC;FILTER: Alpha(opacity=50);width:800px;position:absolute;left:313px;top:184px;width: 586px;height: 712px; .alphafilter:alpha(opacity=50);width:300px; /*设置图片透明*/.zz position:relative;left:30px;width:263px;height:275px;top:155px; font-size:14px;background-color:#D5DFDC;FILTER: Alpha(opacity=50);#guide padding:0; margin:0; border-bottom:1px solid #fff; float:left; width:100%;filter:alpha(opacity=90);-moz-opacity:0.9#warp1 position:relative;left:243px;top:30px;width:900px;height:850px;#kongjian position:absolute;left:28px;top:-61px;width:739px;height:66px;z-index:2;#index position:relative;left:0px;top:110px;width:900px;height:28px;z-index:3;#me position:absolute;left:73.5px;top:42px;width:121px;height:132px;#introduce position:absolute;left:8px;top:-13px;width:260px;height:35px;z-index:1;#xiaodaohang position:absolute;left:285px;top:427px;width:239px;height:5
