電子商務(wù)專業(yè)網(wǎng)頁制作實驗報告_第1頁
電子商務(wù)專業(yè)網(wǎng)頁制作實驗報告_第2頁
電子商務(wù)專業(yè)網(wǎng)頁制作實驗報告_第3頁
電子商務(wù)專業(yè)網(wǎng)頁制作實驗報告_第4頁
電子商務(wù)專業(yè)網(wǎng)頁制作實驗報告_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、網(wǎng)頁設(shè)計與制作實 驗 報 告院系名稱： 管理學(xué)院 專業(yè)班級： 電子商務(wù) 10級02班 學(xué)生姓名： 相栓霞 學(xué) 號： 201046900629 2012年 5 月 11 日實驗一：HTML語言實驗一、實驗?zāi)康?、掌握利用HTML語言編寫網(wǎng)頁的能力；2、掌握利用HTML語言編寫表格的能力；3、掌握利用HTML語言編寫表單的能力。二、實驗課時2學(xué)時三、實驗內(nèi)容1、表格實驗的結(jié)果（1）實驗步驟編制代碼如下：<html><head><titel>表格示例</titel><body><table border="1"&g

2、t;<tr><td bgcolor="#ff0000" width="200" height="50" rowspan="2" colspan="2">A</td><td width="100" height="25">B</td><td width="100" height="25" align="center">C<

3、/td></tr><tr><td colspan="2" align="center">D</td></tr><tr><td rowspan="2" align="right">E</td><td rowspan="2" align="right">F</td><td rowspan="2">G</td>&l

4、t;td>H</td></tr><tr><td>I</td></tr></body></head></html>（2） 運行結(jié)果：2、 表單實驗的結(jié)果（1）實驗步驟編制代碼如下：<html><head><title>表單</title></head><body> <form method="POST" action="URL"> <table borde

5、r="1"> <p><tr> <td width="100" height="30" align="center">姓名：</td> <td width="200" height="30" > <input type="text" name="xingming" size="20"></td> </tr></p

6、><p><tr> <td width="100" height="30" align="center"> 密碼：</td> <td width="200" height="30" ><input type="password" name="mima" size="20"></td> </tr></p><p><

7、;tr> <td width="100" height="30" align="center">性別：</td> <td width="200" height="30" > <input type="radio" name="xingbie" value="remale" checked >女 <input type="radio" value="

8、male" name="xingbie">男</td> </tr></p><p><tr> <td width="100" height="30" align="center">愛好：</td> <td width="200" height="30" > <input type="checkbox" name="checkbox&q

9、uot; value="basketble" checked>籃球 <input type="checkbox" name="aihao" value="footble">足球 <input type="checkbox" name="aihao" value="pingpang">乒乓</td> </tr></p><p><tr> <td width="

10、;100" height="30" align="center">籍貫：</td> <td width="200" height="30" ><select size="1" name="jiguan"> <option selected>開封</option> <option>鄭州</option> <option>駐馬店</option> <o

11、ption>信陽</option></select></td> </tr></p><p><tr> <td width="100" height="30" ></td> <td width="200" height="30" ><input type="submit" value="提交" name="tijiao"> &

12、lt;input type="reset" value="重置" name="chongzhi"></td> </tr></p></table></form></body></html>（2）運行結(jié)果：四、實驗小結(jié)通過本次試驗讓我感覺到實踐的重要性，書本知識固然重要，但如果不把它轉(zhuǎn)化為實踐，就會成為一紙空談。在這次試驗中，我通過不斷地編寫，調(diào)試終于掌握了編寫表格，表單、表單的能力，讓我對html有了初步了解。實驗二：FireWorks和CSS實驗

13、一、實驗?zāi)康?、掌握為給定效果圖規(guī)劃切圖方式的能力；2、掌握利用FireWorks切圖的能力；3、掌握利用CSS+DIV制作網(wǎng)頁的能力。二、實驗課時2課時三、實驗內(nèi)容 1、規(guī)劃切圖方式的思路（1）選中一個圖片作為將要切割的對象 （2）仔細(xì)觀察圖片結(jié)構(gòu)，將其分為Logo 圖案、導(dǎo)航欄、正文和版權(quán)信息幾個區(qū)域 （3）觀察圖片中色彩單調(diào)的圖片區(qū)域的規(guī)律2、 利用切圖的步驟運用FireWorks將圖片切為自己所需要的部分和比例，如圖所示：3、 CSS+DIV制作網(wǎng)頁的結(jié)果 （1）在dreamweaver里面編制代碼如下<!DOCTYPE html PUBLIC "-/W3C/DTD X

14、HTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>網(wǎng)頁設(shè)計</title>

15、<style type="text/css"><!-#apDiv1 position:absolute; left:9px; top:15px; width:1352px; height:82px; z-index:1; #apDiv2 position:absolute; left:15px; top:139px; width:250px; height:287px; z-index:2;#apDiv3 position:absolute; left:19px; top:101px; width:1342px; height:33px; z-index:

16、3;#apDiv4 position:absolute; left:1112px; top:137px; width:250px; height:345px; z-index:4;#apDiv5 position:absolute; left:268px; top:329px; width:844px; height:135px; z-index:5;#apDiv6 position:absolute; left:269px; top:139px; width:842px; height:192px; z-index:6; #apDiv7 position:absolute; left:3px

17、; top:485px; width:1365px; height:89px; z-index:7;-></style></head><body> <div id="apDiv1"></div> <div id="apDiv2"><img src="images/效果圖_r4_c1.png" width="253" height="344" /></div> <div id="a

18、pDiv3"><img src="images/圖片1_r4_c3.png" width="243" height="35" /><img src="images/效果圖_r3_c2.png" width="105" height="35" /> <img src="images/效果圖_r3_c3.png" width="106" height="35" />&l

19、t;img src="images/效果圖_r3_c4.png" width="106" height="35" /><img src="images/效果圖_r3_c5.png" width="106" height="35" /><img src="images/效果圖_r3_c6.png" width="106" height="35" /><img src="im

20、ages/效果圖_r3_c7.png" width="106" height="36" /><img src="images/效果圖_r3_c7.png" width="106" height="35" /><img src="images/效果圖_r3_c8.png" width="106" height="35" /><img src="images/圖片1_r4_c3.png

21、" width="247" height="35" /></div><div id="apDiv4"> <img src="images/效果圖_r4_c1.png" width="253" height="344" /></div><div id="apDiv5"> <p> 課程簡介</p> <p>電氣工程學(xué)院是高等工業(yè)學(xué)校本科非電工科類的一門

22、重要的技術(shù)基礎(chǔ)課，通過本課程的學(xué)習(xí)使學(xué)生受到辯證唯物主義和愛國主義教育，獲得電氣技術(shù)領(lǐng)域中有關(guān)電工技術(shù)、電子技術(shù)的必要基本理論、基本知識和基本技能，了解他們的應(yīng)用和發(fā)展趨勢，為學(xué)習(xí)后續(xù)課程以及從事與本專業(yè)有關(guān)的工程技術(shù)科學(xué)研究工作打下一定基礎(chǔ)。 河南工業(yè)大學(xué)電氣學(xué)院電工學(xué)課程組廣大教師團(tuán)結(jié)合作、嚴(yán)謹(jǐn)治學(xué)、教書育人.</p></div><div id="apDiv6"><img src="圖片8.jpg" width="842" height="190" /></

23、div><div id="apDiv7"><img src="images/untitled.jpg" width="1367" height="101" /></div><img src="images/效果圖_r1_c1.png" width="1352" height="83" /><li></li></body></html>（2） 效果顯示圖如下

24、：四、實驗小結(jié) 通過這次試驗，讓我懂得了如何利用軟件工具來實現(xiàn)網(wǎng)頁的編制，通過對圖的切割和組合，經(jīng)過了多次的失敗，但最總通過不懈的堅持終于小獲成功，體驗到成功的快樂。也對網(wǎng)頁制作加深了認(rèn)識和興趣。實驗三： JavaScript實驗一、實驗?zāi)康?、掌握利用JavaScript編寫網(wǎng)頁動態(tài)效果的能力；2、掌握在網(wǎng)頁中使用JavaScript腳本的兩種方法。二、實驗課時2課時三、實驗內(nèi)容1、計算整數(shù)階乘實驗的結(jié)果（1）編制代碼如下：<html><head><title>求數(shù)值的階乘</title><script language="ja

25、vascript" type="text/javascript"><!- function factorial(anumber) anumber=Math.floor(anumber); if (anumber<0) return -1; if (anumber=0) return 1; else return(anumber*factorial(anumber-1); function ss() var va=document.myform.factorial.value; var s=factorial(va); alert(s); /-&g

26、t;</script></head><body><h2>請在文本框中輸入一個整數(shù)，然后單擊“計算”<br>按鈕，計算該整數(shù)的階乘。</h2><form name="myform"><input name="factorial" value=""><p><input type="button" value="計算" onclick="ss()"><p&g

27、t;</form></body></ html>（2）效果如下：2、 下拉菜單實驗的結(jié)果(1) 編寫hthl代碼如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta h

28、ttp-equiv="Content-Type" content="text/html; charset=utf-8" /><title>河南工業(yè)大學(xué)</title><link rel="stylesheet" href="header.css" type="text/css" /></head><body><div id="header"> <div id="logo"&

29、gt; <img src="image/logo.jpg" alt="河南工業(yè)大學(xué)" width="857" height="82"/> </div> <div id="menu"> <ul> <li><a href="#">網(wǎng)站首頁</a></li> <li><a href="#">課程簡介</a></li> &

30、lt;li> <a>課程大綱</a> <ul> <li><a href="#">教學(xué)大綱</a></li> <li><a href="#">授課計劃</a></li> <li><a href="#">實踐實訓(xùn)</a></li> </ul> </li> <li> <a>電子課堂</a> <

31、ul> <li><a href="#">電子課件</a></li> <li><a href="#">電子教材</a></li> <li><a href="#">電子教案</a></li> </ul> </li> <li> <a>師資隊伍</a> <ul> <li><a href="#&qu

32、ot;>課程負(fù)責(zé)人</a></li> <li><a href="#">師資隊伍</a></li> <li><a href="#">課題研究</a></li> </ul> </li> <li><a href="#">教學(xué)錄像</a></li> <li> <a>習(xí)題試題</a> <ul> <

33、li><a href="#">習(xí)題集錦</a></li> <li><a href="#">自測題</a></li> <li><a href="#">試題庫</a></li> <li><a href="#">例題精講</a></li> </ul> </li> <li><a href="

34、;#">參考文獻(xiàn)</a></li> <li><a href="#">課程申報</a></li> </ul> </div> <div id="pic"> <img src="image/pic.jpg" width="951" height="222" alt="" /> </div> </div> <div cl

35、ass="middle"> <p align="center"> 課程簡介</p> <p>本課程作為學(xué)校校級精品課程，學(xué)校在政策、資金方面都給與本課程相應(yīng)支持，并已推薦本課程申報省級級精品課程。</p> <p>本課程作為學(xué)校校級精品課程已得到1萬元的建設(shè)經(jīng)費，在所申報課程被評為精品課程后，從經(jīng)費投入、技術(shù)平臺支持等方面繼續(xù)加大對精品課程建設(shè)的過程管理和質(zhì)量監(jiān)督，同時鼓勵品課程優(yōu)質(zhì)資源的開放和共享，并結(jié)合教育高地、特色專業(yè)與優(yōu)秀教學(xué)團(tuán)隊建設(shè)，整合相關(guān)資源形成真正特色鮮明、隊伍結(jié)構(gòu)合理、教學(xué)水

36、平一流、輻射效果好的示范課程。</p></div><div class="bottom"><img src="image/bottom.png" border="0"/ ></div></div></body></html>(2) 編寫css文件如下：charset "utf-8"/* CSS Document */*font-size:16px; font-family:微軟雅黑; color:#333; margin

37、:0; padding:0; Body background:url(image/pd_r7_c2.png) repeat-y; width: 100%; height:auto a:link,a:visited,a:active,a:hover text-decoration:none; cursor:pointer; .clear clear:both; /*header部分*/#logowidth:100%; height:83px; background:url(image/head_bg.gif) repeat-x; text-align:center; #logo img marg

38、in:0 auto; #menu height:41px; width:100%; background:url(image/nav_bg2.gif) repeat-x; #menu ul list-style:none; margin-left:auto; margin-right:auto; width:954px; #menu ul li float:left;width:106px; height:34px; margin-top:7px; position:relative; #menu ul li a background:url(image/nav_bg1.gif) no-rep

39、eat bottom; font: bold 16px "微軟雅黑" line-height:30px; color:#fff; display:block; text-align:center; #menu ul li a:hover background:url(image/nav_hover.gif) no-repeat;#menu ul li ul display:none;#menu ul li:hover ul display:block; position:absolute; #menu ul li:hover ul li float:none; width:

40、105px; height:28px; margin:0px;#menu ul li:hover ul li a background:url(image/sec_navbg.gif) no-repeat; font:14px "微軟雅黑" color:#FFCC00; display:block; line-height:28px;#menu ul li:hover ul li a:hoverbackground:url(image/nav_hover.gif) no-repeat;#pic width:100%; height:222px; background:#02

41、5893; text-align:center;#pic img margin:0 auto; .middlemargin: 0px auto; padding-top: 26px; width: 70%; height: auto;text-align: left; color: #CC0000; font-size: 18px; line-height: 1.5;text-indent:30px; .bottommargin: 0px auto; width: 1351px; height:80px;（3）效果如下：3、表單驗證實驗的結(jié)果（1）代碼如下：<html><he

42、ad><title>登記表</title><script language="javascript"> function checkIt()var email = document.getElementById("email");var mobileNo = document.getElementById("mobileNo"); var phoneNo=document.getElementById("phoneNo"); var IDNo=document.getEle

43、mentById("IDNo");/郵箱驗證 if(email.value=null|email.value="") document.getElementById("emailError").innerHTML="<font color=red>請輸入E-mail地址！</font>" email.focus(); return false; else document.getElementById("emailError").innerHTML=""

44、; var regExpression = /w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/; var objExp = new RegExp(regExpression); if(objExp.test(email.value)=false) document.getElementById("emailError").innerHTML="<font color=red>您輸入的E-mail地址不正確！</font>" email.focus(); return false; else document.getEl

45、ementById("emailError").innerHTML="" /手機號碼驗證 var regExpression = /(86)?(13d9)|(150,1,2,3,5,6,7,8,9d8)|(180,5,6,7,8,9d8)$/; if(!regExpression.test(mobileNo.value) document.getElementById("mobileNoError").innerHTML="<font color=red>您輸入的手機號碼有誤！</font>"

46、; mobileNo.focus(); return false; else document.getElementById("mobileNoError").innerHTML="" /固話驗證 var regExpression=/(d3)-)?(d7)|(d8)$/; if(!regExpression.test(phoneNo.value) document.getElementById("phoneNoError").innerHTML="<font color=red>您輸入的固定號碼有誤！</

47、font>" phoneNo.focus(); return false; else document.getElementById("phoneNoError").innerHTML="" /身份證驗證 var regExpression=/1-9d51-9d3(0d)|(10-2)(0|1|2d)|30-1)(d4)|d3A-Z)$/; if(!regExpression.test(IDNo.value) document.getElementById("IDNoError").innerHTML="<font color=red>您輸入的身份證號碼有誤!</font>" IDNo.focus(); return false; else document.getElementById("IDNoError").innerHTML="" </script></head><body><form action="" id="myform"><table align="center"&

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論