《个人网页设计》课程设计报告Word格式文档下载.docx
- 文档编号:17962278
- 上传时间:2022-12-12
- 格式:DOCX
- 页数:36
- 大小:2.86MB
《个人网页设计》课程设计报告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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人网页设计 个人 网页 设计 课程设计 报告