《网页设计与制作》实验报告.docx

四、实验小结

在这次试验中，用fireworks切图以及用CSS+DIV布局看似简单实则不易。

切图是否细致严重影响着页面布局，而对于网页的布局又要细化到各个部分的宽高。

用CSS+DIV布局时不能使用绝对定位，文字布局可以使用新闻列表，要注意padding、border以及margin属性的区别与联系。

尽管试了很多次，也失败了很多次，但在这个过程中我对CSS+DIV规划网页有了更深刻的认知和体验。

实验三：

JavaScript实验

一、实验目的

1、掌握利用JavaScript编写网页动态效果的能力；

2、掌握在网页中使用JavaScript脚本的两种方法。

二、实验课时

2学时

三、实验内容

1、计算整数阶乘实验的结果

--

functionabc（）{

varsum=1;

varre;

re=document.getElementById（"name"）.value;

for（vari=1;i<=re;i++）{

sum*=i;

}

alert（sum）;

}

//-->

请在文本框中输入一个整数，然后单击“计算”按钮，计算该整数的阶乘。

2、下拉菜单实验的结果

--

vartimeout=500;

varclosetimer=0;

varddmenuitem=0;

functionmopen（id）

{mcancelclosetime（）;

if（ddmenuitem）ddmenuitem.style.visibility='hidden';

ddmenuitem=document.getElementById（id）;

ddmenuitem.style.visibility='visible';

}

functionmclose（）

{if（ddmenuitem）ddmenuitem.style.visibility='hidden';}

functionmclosetime（）

{closetimer=window.setTimeout（mclose,timeout）;}

functionmcancelclosetime（）

{if（closetimer）

{window.clearTimeout（closetimer）;

closetimer=null;}

}

document.onclick=mclose;

//-->

#sddm{margin:

0auto;

padding:

0;

z-index:

30;

background-color:

#1e4f9c;

height:

25px;}

#sddmli{margin:

0;

padding:

0;

list-style:

none;

float:

left;

font:

bold12pxarial}

#sddmlia

{display:

block;

margin:

01px00;

padding:

4px10px;

width:

60px;

background:

#1e4f9c;

color:

#FFF;

text-align:

center;

text-decoration:

none}

#sddmlia:

hover

{background:

#1e4f9c}

#sddmdiv

{position:

absolute;

visibility:

hidden;

margin:

0;

padding:

0;

background:

#1e4f9c;

border:

1pxsolid#1e4f9c}

#sddmdiva{position:

relative;

display:

block;

margin:

0;

padding:

5px10px;

width:

auto;

white-space:

nowrap;

text-align:

left;

text-decoration:

none;

background:

#1e4f9c;

color:

#2875DE;

font:

12pxarial}

#sddmdiva:

hover{background:

#1e4f9c;

color:

#FFF}

center">