四、实验小结
通过这次试验,我掌握了许许多多以前不知道的代码细节,让我对网页设计与制作有了更深层次的了解,同时我对编写代码也渐渐的熟悉了。
刚开始编写的时候有点漫无目的,但是慢慢的就找到了感觉,最高兴的是最后当自己的代码在网页中显示出来的时候,自己的努力是值得的,越来越喜欢网页制作了!
实验二:
FireWorks和CSS实验
一、实验目的
1、掌握为给定效果图规划切图方式的能力;
2、掌握利用FireWorks切图的能力;
3、掌握利用CSS+DIV制作网页的能力。
二、实验课时
2课时
三、实验内容
1、规划切图方式的思路
首先,将网页的布局了解清楚,然后,根据不同的模块分类,导航条分为一类,其余的各归各类,之后利用FireWorks切图。
2、利用FireWorks切图的步骤
运用FireWorks将图片切为自己所需要的部分和比例,如图所示:
3、CSS+DIV制作网页的结果
效果图.jpg
body{}
.top{margin:
0pxauto;border:
0px;text-align:
center;}
.topmain{margin:
0pxauto;width:
940px;height:
25px;padding:
0px;text-align:
cente;}
.topmainul{margin:
0px;padding:
0px;list-style-type:
none;text-align:
center;}
.topmainulli{width:
72px;float:
left;height:
25px;text-align:
center;}
.topmainullia{width:
72px;height:
25px;text-align:
center;}
.content1{margin:
0pxauto;border:
0px;text-align:
center;}
.content2{margin:
0pxauto;border:
0px;text-align:
left;position:
absolute;left:
168px;top:
352px;width:
301px;height:
533px}
.content3{margin:
0pxauto;border:
0px;text-align:
left;position:
absolute;left:
468px;top:
352px;width:
465px;height:
533px}
.content4{margin:
0pxauto;border:
0px;text-align:
left;position:
absolute;left:
933px;top:
352px;width:
211px;height:
529px;}
.bottom{margin:
0pxauto;border:
0px;position:
absolute;left:
168px;top:
885px;width:
977px;height:
105px;text-align:
center;}
四、实验小结
通过这次试验,让我懂得了如何利用软件工具来实现网页的编制,通过对图的切割和组合,经过了多次的失败,但最总通过不懈的坚持终于小获成功,体验到成功的快乐。
也对网页制作加深了认识和兴趣。
实验三:
JavaScript实验
一、实验目的
1、掌握利用JavaScript编写网页动态效果的能力;
2、掌握在网页中使用JavaScript脚本的两种方法。
二、实验课时
2课时
三、实验内容
1、计算整数阶乘实验的结果
JavaScript实验1
--
functionjieCheng()
{varnum=document.getElementById("shuzi").value;
if(num=="")
{alert("请输入数据");}
else
varfac=1;
for(vari=1;i<=num;i++)
{fac*=i;}
alert(num+"的阶乘为"+fac);}}
//-->
请在文本框中输入一个整数,然后单击“计算”按钮,计算该整数的阶乘。
2、下拉菜单实验的结果
实现下拉菜单效果
#sddm{margin:
0pxauto;border:
0px;text-align:
center;margin:
0pxauto;width:
940px;height:
35px;padding:
0px;text-align:
center;}
#sddmli{width:
72px;float:
left;height:
25px;text-align:
center;}
#sddmlia{width:
72px;height:
25px;text-align:
center;}
#sddmlia:
hover{background:
#49A3FF}
#sddmdiv{position:
absolute;
visibility:
hidden;
margin:
0;
padding:
0;
background:
#EAEBD8;
border:
1pxsolid#5970B2}
#sddmdiva{position:
relative;
display:
block;
margin:
0;
padding:
5px10px;
width:
auto;
white-space:
nowrap;
text-align:
left;
text-decoration:
none;
background:
#EAEBD8;
color:
#2875DE;
font:
12pxarial}
#sddmdiva:
hover{background:
#49A3FF;
color:
#FFF}
--
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;
//-->
center">
最新更新
职业培训
科学研究
学生工作
继续教育
党建工作
招生就业
社会服务
社会服务
在线阅读
教务系统
学历教育
学历咨询
教务系统
学历教育
学历咨询
教务系统
学历教育
学历咨询
教务系统
学历教育
学历咨询
教务系统
学历教育
学历咨询
教务系统
学历教育
学历咨询
展开阅读全文
相关搜索
|