网页制作实验报告

1、网页制作实验报告网页设计与制作实 验 报 告院系名称： 管理学院 专业班级： 电子商务 11级3班 学生姓名： 许世谦 学 号： 2 项目实验一（25分）实验二（35分）实验三(40分)总分（100分)得分2013年 6 月 4 日实验一：html语言实验一、实验目的1、掌握利用html语言编写网页的能力;2、掌握利用html语言编写表格的能力；3、掌握利用html语言编写表单的能力。二、实验课时2学时三、实验内容1、表格实验的结果htmlheadtitle实验一/titletable border align=center height=80” width=600”试验1.1tr a ctr

2、 td colspan=2” align=centerdtr td rowspan=2 align=”right”e f g tdhtr tdi/html2、表单实验的结果/headbody试验1。2 tr td align=”center” width=200”姓名： input tr 密码： tdinput td align=center width=200性别： tdinput type=radio” name=”gender value=1” checked女 input type=”radio name=gender” value=”2”男 爱好： td足球 input type=”

3、checkbox name=”check3” value=”yes”乒乓球 tr 籍贯： 开封option郑州洛阳 /select tr td colspan=2 align=”center” input type=”submit” name=submit_button” value=提交” /table/form/body/html四、实验小结通过这次试验，我掌握了许许多多以前不知道的代码细节，让我对网页设计与制作有了更深层次的了解，同时我对编写代码也渐渐的熟悉了.刚开始编写的时候有点漫无目的，但是慢慢的就找到了感觉,最高兴的是最后当自己的代码在网页中显示出来的时候，自己的努力是值得的，越来

4、越喜欢网页制作了！实验二:fireworks和css实验一、实验目的1、掌握为给定效果图规划切图方式的能力;2、掌握利用fireworks切图的能力；3、掌握利用css+div制作网页的能力。二、实验课时2课时三、实验内容 1、规划切图方式的思路 首先，将网页的布局了解清楚,然后，根据不同的模块分类，导航条分为一类,其余的各归各类，之后利用fireworks切图。2、利用fireworks切图的步骤运用fireworks将图片切为自己所需要的部分和比例，如图所示：3、css+div制作网页的结果效果图。jpg style type=text/css” body .topmargin: 0px

5、auto；border：0px；textalign： center； .topmain margin： 0px auto; width: 940px；height: 25px；padding： 0px；text-align： cente； .topmain ul margin: 0px；padding: 0px;liststyle-type: none；text-align： center； .topmain ul li width: 72px； float: left； height： 25px;textalign: center； .topmain ul li a width： 72px；

6、 height： 25px；text-align： center; 。content1 margin: 0px auto;border:0px;textalign:center； .content2 margin: 0px auto；border：0px;text-align:left;position:absolute; left：168px； top：352px;width:301px；height:533px .content3 margin： 0px auto；border:0px；text-align：left;position:absolute; left：468px；top:35

7、2px;width：465px; height:533px .content4 margin: 0px auto;border:0px；textalign：left;position：absolute; left：933px;top:352px；width:211px; height:529px; 。bottom margin： 0px auto；border：0px;position：absolute； left:168px; top:885px;width:977px； height：105px；text-align： center; /head body div class=top” d

8、iv class=topmain ul lia id=aa2 href=#”img src=”images/效果图_r4_c3。jpg” border=”0/a liimg src=images/效果图_r4_c4.jpg” border=0”/a/li li/li a id=aa5 href=”img src=images/效果图_r4_c6。jpg border=0/a lia id=aa6 href=”img src=”images/效果图_r4_c8。jpg border=”0”/li li/li /a a id=aa9 href=#”/li lia id=aa10 href=”/a/

9、li li/aa id=aa12 href=# lia id=aa13 href=”img src=images/效果图_r4_c16.jpg border=”0/li lia id=aa14 href=”#img src=images/效果图_r4_c17.jpg border=”0” img src=images/效果图_r5_c2.jpg border=”0”/div /div img src=images/效果图_r6_c7.jpg border=”0 div class=”content4img src=images/效果图_r6_c15。jpg border=0”/div div

10、class=bottom/body/html四、实验小结通过这次试验，让我懂得了如何利用软件工具来实现网页的编制，通过对图的切割和组合，经过了多次的失败，但最总通过不懈的坚持终于小获成功，体验到成功的快乐。也对网页制作加深了认识和兴趣。实验三： javascript实验一、实验目的1、掌握利用javascript编写网页动态效果的能力；2、掌握在网页中使用javascript脚本的两种方法。二、实验课时2课时三、实验内容1、计算整数阶乘实验的结果htmlheadjavascript实验1/titlescript language=”javascript” type=text/javascrip

11、t ！- function jiecheng（) var num=document。getelementbyid（shuzi）。value； if(num=) alert(请输入数据”)； elsevar fac=1； for（var i=1；i请在文本框中输入一个整数，然后单击“计算”按钮，计算该整数的阶乘。 pinput type=text id=shuzi nbsp; ；/body/html2、下拉菜单实验的结果htmlheadtitle实现下拉菜单效果/titlesddmmargin： 0px auto；border：0px；text-align: center;ma

12、rgin： 0px auto; width： 940px;height: 35px；padding: 0px；textalign： center;sddm liwidth： 72px； float： left； height： 25px；textalign: center；sddm li awidth: 72px； height: 25px；text-align: center；#sddm li a：hoverbackground: #49a3ff#sddm divposition： absolute;visibility： hidden；margin： 0；padding： 0;backgr

13、ound: eaebd8;border： 1px solid #5970b2#sddm div aposition: relative；display： block；margin: 0；padding： 5px 10px；width： auto;white-space: nowrap；text-align: left；text-decoration: none；background： eaebd8;color: #2875de；font： 12px arialsddm div a:hoverbackground： #49a3ff；color： #fffscript type=”text/jav

14、ascript!-var timeout=500；var closetimer=0；var ddmenuitem=0；function mopen(id）mcancelclosetime（)；if(ddmenuitem) ddmenuitem.style.visibility = hidden;ddmenuitem=document。getelementbyid(id)；ddmenuitem。style.visibility=visible;function mclose(） if（ddmenuitem)ddmenuitem。style。visibility=hidden; function

15、mclosetime（） closetimer=window.settimeout（mclose， timeout)； function mcancelclosetime() if(closetimer） window.cleartimeout(closetimer）;closetimer=null；document。onclick=mclose; / -/script/adiv id=”m1” onmouseover=mcancelclosetime（） onmouseout=”mclosetime（)a href=#最新更新/aa href=#”职业培训/aa href=”#科学研究/ai

16、mg src=”images/效果图_r4_c4.jpg” border=0a href=”#”继续教育党建工作/a/div/lilia href=#” onmouseover=mopen(m3）” onmouseout=mclosetime（）img src=images/效果图_r4_c5。jpg border=”0”/a招生就业/aa href=社会服务/a/div/liimg src=images/效果图_r4_c6。jpg” border=0div id=”m4” onmouseover=mcancelclosetime(） onmouseout=”mclosetime()a hre

17、f=”#”社会服务/aa href=” onmouseover=”mopen（m5）” onmouseout=mclosetime(）”img src=”images/效果图_r4_c8.jpg” border=”0”/adiv id=”m5” onmouseover=mcancelclosetime（)” onmouseout=”mclosetime()a href=”#教务系统学历教育a href=”学历咨询/a/lilia href=”#” onmouseover=”mopen（m6）” onmouseout=”mclosetime（）”img src=images/效果图_r4_c9.

18、jpg border=”0教务系统/aa href=#”学历教育/aa href=#”学历咨询/a/div/li/a学历教育/a/div/liimg src=images/效果图_r4_c11。jpg border=0”div id=”m8” onmouseover=”mcancelclosetime(） onmouseout=mclosetime（）a href=教务系统/a学历教育学历咨询/div/lia href=” onmouseover=”mopen(m9) onmouseout=mclosetime(）”img src=images/效果图_r4_c12。jpg” border=0

19、/adiv id=”m9 onmouseover=”mcancelclosetime（） onmouseout=”mclosetime(）a href=”教务系统/aa href=学历教育/liliimg src=”images/效果图_r4_c13.jpg” border=”0”教务系统/aa href=”学历教育/aa href=#学历咨询li学历咨询/a/adiv id=”m12 onmouseover=mcancelclosetime（) onmouseout=”mclosetime(）a href=”教务系统a href=”学历教育/aa href=”#”学历咨询img src=”i

20、mages/效果图_r4_c17。jpg border=”0”a href=”教务系统/aa href=”#”学历咨询/a/div/li/ul/html3、表单验证实验的结果html验证身份证号 ！- function checkidcard（） var idcard=document。getelementbyid(shenfen); var str=idcard。value；if（str=null|str=”） alert（请输入身份证号）；idcard.focus()； else var regexp=/d6(12d3)(01d）(0123d)(d4|d3xx)/; var arr=regexp.test（str)； if（arr！=true) alert（”身份证号错误）； idcard。focus(）; /-/script/headbodypb请输入身份证号htmlheadtitle验证固定电话/titlescript language=javascript” type=text/javascript” /script/headbodypb请输入电话号码/b/pp input type=”button” value=”测试” onclick=checktel