HTMLCSSJS大作业.docx

上传人:b****8 文档编号:9674911 上传时间:2023-05-20 格式:DOCX 页数:50 大小:7.81MB
下载 相关 举报
HTMLCSSJS大作业.docx_第1页
第1页 / 共50页
HTMLCSSJS大作业.docx_第2页
第2页 / 共50页
HTMLCSSJS大作业.docx_第3页
第3页 / 共50页
HTMLCSSJS大作业.docx_第4页
第4页 / 共50页
HTMLCSSJS大作业.docx_第5页
第5页 / 共50页
HTMLCSSJS大作业.docx_第6页
第6页 / 共50页
HTMLCSSJS大作业.docx_第7页
第7页 / 共50页
HTMLCSSJS大作业.docx_第8页
第8页 / 共50页
HTMLCSSJS大作业.docx_第9页
第9页 / 共50页
HTMLCSSJS大作业.docx_第10页
第10页 / 共50页
HTMLCSSJS大作业.docx_第11页
第11页 / 共50页
HTMLCSSJS大作业.docx_第12页
第12页 / 共50页
HTMLCSSJS大作业.docx_第13页
第13页 / 共50页
HTMLCSSJS大作业.docx_第14页
第14页 / 共50页
HTMLCSSJS大作业.docx_第15页
第15页 / 共50页
HTMLCSSJS大作业.docx_第16页
第16页 / 共50页
HTMLCSSJS大作业.docx_第17页
第17页 / 共50页
HTMLCSSJS大作业.docx_第18页
第18页 / 共50页
HTMLCSSJS大作业.docx_第19页
第19页 / 共50页
HTMLCSSJS大作业.docx_第20页
第20页 / 共50页
亲,该文档总共50页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

HTMLCSSJS大作业.docx

《HTMLCSSJS大作业.docx》由会员分享,可在线阅读,更多相关《HTMLCSSJS大作业.docx(50页珍藏版)》请在冰点文库上搜索。

HTMLCSSJS大作业.docx

HTMLCSSJS大作业

网页设计与开发——HTMLCSSJavaScript结业设计大作业

第一章序言

本学期学习了HTML,CSS,JavaScript最基本的语法。

学习了如何设计最基础的网页,如何设置网页中文字属性,如何插入表格,利用表格控制页面格局,如何插入背景图片,设置背景颜色,,利用JavaScript脚本技术插入一些动画等等。

在自己尝试着做一些小网页时,深深感受到制作时的乐趣。

HTML所扮演的角色:

HTML是Internet上用于设计网页的主要语言。

网页包括动画、多媒体、图形等各种复杂的元素,其基础架构都是HTML。

HTML的英文是“HyperTextMarkkupLanguage”,翻译为“超文本标记语言”用它就可以设计出一个标准的网页。

不仅可以爱记事本中编写HTML代码,任何文本编辑器都可以编写HTML,都可以用来制作网页。

比如写字板、Word、WPS等编辑程序,不过在保存时要存为.htm或.html格式。

不仅用IE浏览器可以查看网页(.html文件)效果,NetscapNavigator也可以浏览。

HTML具有跨平台性,即是说,只要有合适的浏览器,不管在那个操作系统下,都可以浏览HTML文件。

只有通过HTML文档进行相应的解析。

CSS就是CascadingStyleSheets,译为“层叠样式表”,简称样式表,它是一种制作网业的新技术。

“样式”就是指网页中文字的颜色、大小、图片位置等格式,“层叠”的意思是,当在HTML中引用了数个样式文件(CSS文件)时,当样式文件中的样式发生冲突时,浏览器会依据层叠顺序处理。

CSS是目前唯一的网页页面排版样式标准。

它能使任何浏览器都能听从指令,知道该以何种布局、格式显示各种元素及其内容。

JavaScript是一种基于对象的脚本语言,他用于开发Internet客户端的应用程序。

它可以结合HTML、CSS,实现一个Web页面中与Web客户交互的功能。

它可以直接对用户或客户的输入做出响应,无须经过Web服务程序。

因此,可以实现类似弹出提示框这样的交互性网页功能。

它对用于的响应是以“事件”做驱动的,比如,“单击网页中的按钮”这个时间可以引发对应的响应。

JavaScript依赖于浏览器,与操作系统无关。

因此,只要在浏览器的计算机上,且浏览器支持JavaScript,就可以对其正确执行。

第二章题目立意

利用HTML,CSS,JavaScript技术设计一个简单的网页。

通过链接方法,把每个网页连接起来。

我主要设计一个文学天地,介绍包括古代诗人(李白,苏轼等)以及现代文学家(徐志摩,林徽因)的作品以及一些简介。

其中用CSS技术编排页面布局,用JavaScript技术插入动画等特效。

第三章作品简介

首页为简单的欢饮界面,包括一张日历,欢迎进入的字样,以及跟随鼠标移动的上升气泡。

点击链接进入第一页,主要是导航,引导读者进入各个页面。

其中插入了滚动字体“欢迎进入文学天地!

”。

根据导航读者将进入各个页面,包括李白,杜甫,苏轼,陆游等古代诗人的简介,作品介绍等,以及现代文学家的一些作品,某些页面插入了背景音乐以及一些特效。

最后一个页面为迎接即将到来的圣诞节插入的一个欢快的圣诞快乐的flash动画。

第四章作品详解

首页效果如下图1所示:

图1

首页设计代码如下:

陈文华的网页设计

--

body{background-image:

url(欢迎.jpg);

background-repeat:

no-repeat;

background-position:

50%100%;

}

#Layer1{

position:

absolute;

width:

262px;

height:

115px;

z-index:

1;

left:

789px;

top:

406px;}

.STYLE1{

font-size:

xx-large;

font-family:

"楷体";

color:

#33FF99;}

a:

link{

text-decoration:

none;

color:

#00FFFF;}

a:

visited{

text-decoration:

none;

color:

#FF0000;}

a:

hover{

text-decoration:

underline;

color:

#FF66FF;}

a:

active{

text-decoration:

none;}-->

欢迎进入

文学天地

--

varbsYear;

varbsDate;

varbsWeek;

vararrLen=8;

varsValue=0;

vardayiy=0;

varmiy=0;

variyear=0;

vardayim=0;

varspd=86400;

varyear1999="30;29;29;30;29;29;30;29;30;30;30;29";//354

varyear2000="30;30;29;29;30;29;29;30;29;30;30;29";//354

varyear2001="30;30;29;30;29;30;29;29;30;29;30;29;30";//384

varyear2002="30;30;29;30;29;30;29;29;30;29;30;29";//354

varyear2003="30;30;29;30;30;29;30;29;29;30;29;30";//355

varyear2004="29;30;29;30;30;29;30;29;30;29;30;29;30";//384

varyear2005="29;30;29;30;29;30;30;29;30;29;30;29";//354

varyear2006="30;29;30;29;30;30;29;29;30;30;29;29;30";

varmonth1999="正月;二月;三月;四月;五月;六月;七月;八月;九月;十月;十一月;十二月"

varmonth2001="正月;二月;三月;四月;闰四月;五月;六月;七月;八月;九月;十月;十一月;十二月"

varmonth2004="正月;二月;闰二月;三月;四月;五月;六月;七月;八月;九月;十月;十一月;十二月"

varmonth2006="正月;二月;三月;四月;五月;六月;七月;闰七月;八月;九月;十月;十一月;十二月"

varDn="初一;初二;初三;初四;初五;初六;初七;初八;初九;初十;十一;十二;十三;十四;十五;十六;十七;十八;十九;二十;廿一;廿二;廿三;廿四;廿五;廿六;廿七;廿八;廿九;三十";

varYs=newArray(arrLen);

Ys[0]=919094400;Ys[1]=949680000;Ys[2]=980265600;

Ys[3]=1013443200;Ys[4]=1044028800;Ys[5]=1074700800;

Ys[6]=1107878400;Ys[7]=1138464000;

varYn=newArray(arrLen);

Yn[0]="己卯年";Yn[1]="庚辰年";Yn[2]="辛巳年";

Yn[3]="壬午年";Yn[4]="癸未年";Yn[5]="甲申年";

Yn[6]="乙酉年";Yn[7]="丙戌年";

varD=newDate();

varyy=D.getYear();

varmm=D.getMonth()+1;

vardd=D.getDate();

varww=D.getDay();

if(ww==0)ww="星期日";

if(ww==1)ww="星期一";

if(ww==2)ww="星期二";

if(ww==3)ww="星期三";

if(ww==4)ww="星期四";

if(ww==5)ww="星期五";

if(ww==6)ww="星期六";

ww=ww;

varss=parseInt(D.getTime()/1000);

if(yy<100)yy="19"+yy;

for(i=0;i

if(ss>=Ys[i]){

iyear=i;

sValue=ss-Ys[i];//当年的秒数}

dayiy=parseInt(sValue/spd)+1;//当年的天数

vardpm=year1999;

if(iyear==1)dpm=year2000;

if(iyear==2)dpm=year2001;

if(iyear==3)dpm=year2002;

if(iyear==4)dpm=year2003;

if(iyear==5)dpm=year2004;

if(iyear==6)dpm=year2005;

if(iyear==7)dpm=year2006;

dpm=dpm.split(";");

varMn=month1999;

if(iyear==2)Mn=month2001;

if(iyear==5)Mn=month2004;

if(iyear==7)Mn=month2006;

Mn=Mn.split(";");

varDn="初一;初二;初三;初四;初五;初六;初七;初八;初九;初十;十一;十二;十三;十四;十五;十六;十七;十八;十九;二十;廿一;廿二;廿三;廿四;廿五;廿六;廿七;廿八;廿九;三十";

Dn=Dn.split(";");

dayim=dayiy;

vartotal=newArray(13);

total[0]=parseInt(dpm[0]);

for(i=1;i

for(i=dpm.length-1;i>0;i--)

if(dayim>total[i-1]){

dayim=dayim-total[i-1];

miy=i;}

bsWeek=ww;

bsDate=yy+"年"+mm+"月";

bsDate2=dd;

bsYear="农历"+Yn[iyear];

bsYear2=Mn[miy]+Dn[dayim-1];

if(ss>=Ys[7]||ss

functionCAL(){

document.write("

document.write(""+bsDate+"
"+bsDate2+"

10.5pt'>");

document.write(bsWeek+"
"+"
");

document.write(bsYear+"
"+bsYear2+"");}

//-->

CAL();

--Begin

Image0=newImage();

Image0.src="qipao.jpg";

Amount=20;

Ymouse=-50;

Xmouse=-50;

Ypos=newArray();

Xpos=newArray();

Speed=newArray();

rate=newArray();

grow=newArray();

Step=newArray();

Cstep=newArray();

nsSize=newArray();

ns=(document.layers)?

1:

0;

(document.layers)?

window.captureEvents(Event.MOUSEMOVE):

0;

functionMouse(evnt){

Ymouse=(document.layers)?

evnt.pageY-20:

event.y-20;

Xmouse=(document.layers)?

evnt.pageX:

event.x;}

(document.layers)?

window.onMouseMove=Mouse:

document.onmousemove=Mouse;

for(i=0;i

Ypos[i]=Ymouse;

Xpos[i]=Xmouse;

Speed[i]=Math.random()*4+1;

Cstep[i]=0;

Step[i]=Math.random()*0.1+0.05;

grow[i]=8;

nsSize[i]=Math.random()*15+5;

rate[i]=Math.random()*0.5+0.1;}

if(ns){

for(i=0;i

document.write("");}}

else{

document.write('

absolute;top:

0px;left:

0px">

relative">');

for(i=0;i

document.write('

absolute;top:

0px;left:

0px;filter:

alpha(opacity=90)">');}

document.write('

');}

functionMouseBubbles(){

varhscrll=(document.layers)?

window.pageYOffset:

document.body.scrollTop;

varwscrll=(document.layers)?

window.pageXOffset:

document.body.scrollLeft;

for(i=0;i

sy=Speed[i]*Math.sin(270*Math.PI/180);

sx=Speed[i]*Math.cos(Cstep[i]*4);

Ypos[i]+=sy;

Xpos[i]+=sx;

if(Ypos[i]<-40){

Ypos[i]=Ymouse;

Xpos[i]=Xmouse;

Speed[i]=Math.random()*6+4;

grow[i]=8;

nsSize[i]=Math.random()*15+5;}

if(ns){

document.layers['sn'+i].left=Xpos[i]+wscrll;

document.layers['sn'+i].top=Ypos[i]+hscrll;}

else{

si[i].style.pixelLeft=Xpos[i]+wscrll;

si[i].style.pixelTop=Ypos[i]+hscrll;

si[i].style.width=grow[i];

si[i].style.height=grow[i];}

grow[i]+=rate[i];

Cstep[i]+=Step[i];

if(grow[i]>24)grow[i]=25;}

setTimeout('MouseBubbles()',10);}

MouseBubbles();

首页设计利用了脚本技术,在首页展示了一幅日历,设计了随鼠标移动的上升气泡。

利用层技术,在图片上加了链接字体“欢迎进入文学天地”。

其中插入了背景音乐“哈辉-葬花”。

点击链接字体后进入第一页网页。

页面效果如下图2所示:

图2

具体代码如下:

文学天地

--

body{

margin:

0;

padding:

0;

font:

bold11px/1.5emVerdana;

}

h2{

font:

bold14pxVerdana,Arial,Helvetica,sans-serif;

color:

#000;

margin:

0px;

padding:

0px0px0px15px;}

img{

border:

none;}

#tabs8{

float:

left;

width:

100%;

background:

#FCF1F6;

font-size:

20;

line-height:

normal;

border-bottom:

1pxsolid#E276A7;}

#tabs8ul{

margin:

0;

padding:

10px10px0350px;

list-style:

none;

}

#tabs8li{

display:

inline;

margin:

0;

padding:

0;

}

#tabs8a{

float:

left;

background:

url("tableft8.gif")no-repeatlefttop;

margin:

0;

padding:

0004px;

text-decoration:

none;}

#tabs8aspan{

float:

left;

display:

block;

background:

url("tabright8.gif")no-repeatrighttop;

padding:

5px15px4px6px;

color:

#333;}

#tabs8aspan{float:

none;}

#tabs8a:

hoverspan{

color:

#591333;}

#tabs8a:

hover{

background-position:

0%-42px;}

#tabs8a:

hoverspan{

background-position:

100%-42px;}

#tabs8#currenta{

background-position:

0%-42px;}

#tabs8#currentaspan{

background-position:

100%-42px;

}-->

欢迎进入文学天地!

其中顶上的女孩以及欢迎进入文学天地字样是利用滚动技术(marquee)。

下面为导航栏。

分为七个导航,分别进入七个页面,其中退出按钮时进入首页。

导航下面插入了一张淡雅的图片。

其中插入了背景音乐“子衿”。

点击李白进入下一页面,如图3所示:

图3

具体代码如下:

李白简介

--

body{background-image:

url(山水1.jpg);

background-repeat:

no-repeat;

background-position:

50%50%;

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 法律文书

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2