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

下載本文檔

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

文檔簡(jiǎn)介

1、燈由E/.孳網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)驗(yàn)報(bào)告院系名稱：管理學(xué)院 專業(yè)班級(jí): 電子商務(wù)10級(jí)02班學(xué)生姓名：相栓霞 學(xué) 號(hào)： 2010469006292012年5 月11 日精品文檔1歡立下載實(shí)驗(yàn)一：HTM晤言實(shí)驗(yàn)一、實(shí)驗(yàn)?zāi)康?、掌握利用HTMli吾言編寫網(wǎng)頁(yè)的能力；2、掌握利用HTMI®言編寫表格的能力；3、掌握利用HTM皚言編寫表單的能力。二、實(shí)驗(yàn)課時(shí)2學(xué)時(shí)三、實(shí)驗(yàn)內(nèi)容1、表格實(shí)驗(yàn)的結(jié)果(1)實(shí)驗(yàn)步驟編制代碼如下：<html><head><titel> 表格示例 </titel><body><table border=&quo

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

3、>C</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<

4、/td><td>H</td></tr><tr><td>l</td></tr></body></head></html>(2)運(yùn)行結(jié)果：精品文檔2、表單實(shí)驗(yàn)的結(jié)果(1)實(shí)驗(yàn)步驟編制代碼如下:<html><head><title> 表單 </title></head><body><form method="POST" action="URL"> <

5、;table border="1"></td><p><tr> <td width="100" height="30" align="center">姓名:<td width="200" height="30" ><input type="text" name="xingming" size="20"></td></tr&g

6、t;</p><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="100

10、" height="30" align="center"> 籍貫：</td><td width="200" height="30" ><select size="1" name="jiguan"><option selected>開封 </option><option>關(guān)B州 </option><option>駐馬店 </option><optio

11、n>信陽(yáng) </option></select></td> </tr></p><p><tr> <td width="100" height="30" ></td><td width="200" height="30" ><input type="submit"value=" 提交"name="tijiao”><input ty

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

13、給定效果圖規(guī)劃切圖方式的能力;2、掌握利用FireWorks切圖的能力；3、掌握利用CSS+DVJ作網(wǎng)頁(yè)的能力。、實(shí)驗(yàn)課時(shí)2課時(shí)、實(shí)驗(yàn)內(nèi)容1、規(guī)劃切圖方式的思路(1)選中一個(gè)圖片作為將要切割的對(duì)象*舞由當(dāng)。工(2)仔細(xì)觀察圖片結(jié)構(gòu)，將其分為 Logo圖案、導(dǎo)航欄、正文和版權(quán)信息幾個(gè)區(qū)域(3)觀察圖片中色彩單調(diào)的圖片區(qū)域的規(guī)律2、利用切圖的步驟運(yùn)用FireWorks將圖片切為自己所需要的部分和比例，如圖所示:喋空大利34466c25&9622i4無5弱Q嚇R效果圄12/1電子霞學(xué)初果圖了3/5替考文獻(xiàn)效果圄_心_田nrti tied網(wǎng)站首頁(yè)效果圖血師費(fèi)隊(duì)fh效果圖_，L田鍵杵申報(bào)效果圜_

14、曰”10圖片1_足一啟就程筒介效果團(tuán)3一國(guó)教學(xué)錄像效果圖工曰效果回一樣”13、CSS+DI®J作網(wǎng)頁(yè)的結(jié)果(1)在dreamweaver里面編制代碼如下<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0TransitionalEN"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-e

15、quiv="Content-Type" content="text/html; charset=utf-8” /><title> 網(wǎng)頁(yè)設(shè)計(jì) </title><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:

16、287px; z-index:2;#apDiv3 position:absolute; left:19px; top:101px; width:1342px;height:33px; z-index:3;#apDiv4 position:absolute; left:1112px; top:137px;width:250px; height:345px; z-index:4;5歡在下載精品文檔#apDiv5 position:absolute; left:268px; top:329px; width:844px;height:135px; z-index:5;#apDiv6 position

17、:absolute; left:269px; top:139px; width:842px;height:192px;z-index:6; #apDiv7 position:absolute; left:3px; top:485px; width:1365px;height:89px; z-index:7;</style></head><body><div id="apDiv1"></div><div id="apDiv2"><img src="images/效果圖

18、_r4_c1.png"width="253" height="344" /></div><div id="apDiv3"><img src="images/1_r4_c3.png"width="243" height="35" /><img src="images/效果圖 _r3_c2.png"width="105" height="35" /><

19、img src="images/效果圖 _r3_c3.png" width="106" height="35" /><img src="images/效果圖 _r3_c4.png" width="106" height="35" /><img src="images/效果圖 _r3_c5.png" width="106" height="35" /><img src="i

20、mages/效果圖 _r3_c6.png" width="106" height="35" /><img src="images/效果圖 _r3_c7.png" width="106" height="36" /><img src="images/效果圖 _r3_c7.png" width="106" height="35" /><img src="images/效果圖 _r3_c

21、8.png" width="106" height="35" /><img src="images/1_r4_c3.png" width="247" height="35" /></div><div id="apDiv4"><img src="images/ 效果圖 _r4_c1.png" width="253" height="344" /></

22、div><div id="apDiv5"><p> 課程簡(jiǎn)介 </p><p> 電氣工程學(xué)院是高等工業(yè)學(xué)校本科非電工科類的一門重要的技術(shù)基礎(chǔ)課， 通過本課程的學(xué)習(xí)使學(xué)生受到辯證唯物主義和愛國(guó)主義教育， 獲得電氣技術(shù)領(lǐng)域中有關(guān)電工技術(shù)、電子技術(shù)的必要基本理論、基本知識(shí)和基本技能，了解他們的應(yīng)用和發(fā)展趨勢(shì)，為學(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="apDi

23、v6"><img src=" 圖片 8.jpg" width="842" height="190" /></div><div id="apDiv7"><img src="images/untitled.jpg" width="1367" height="101"/></div> <img src="images/ 效果圖 _r1_c1.png" width

24、="1352" height="83" /><li></li></body> </html>(2)效果顯示圖如下:招并由，才上學(xué)打"鉞就a60齡糜靜口i錢木陽(yáng)f虹科/hi薪的烈翱鼠畫林麒解珊"對(duì)根由鞋義和臺(tái)向主義軟茁 螂電氣捻*麟中有關(guān)電工/k吁F拉術(shù)娜堇界翌立斜軸翩1基彼能了蒯用應(yīng)用二期般,為物瞬席煙梏錯(cuò)蠟地工齦序鋤EWT一醬U,隔曉老蛤鞠電L學(xué)據(jù)1廣競(jìng)!期磁歸產(chǎn)的學(xué)、翦書肯/一四、實(shí)驗(yàn)小結(jié)通過這次試驗(yàn)，讓我懂得了如何利用軟件工具來實(shí)現(xiàn)網(wǎng)頁(yè)的編制，通過對(duì)圖的切割和 組合，經(jīng)過了多

25、次的失敗，但最總通過不懈的堅(jiān)持終于小獲成功，體驗(yàn)到成功的快樂。 也對(duì)網(wǎng)頁(yè)制作加深了認(rèn)識(shí)和興趣。實(shí)驗(yàn)三： JavaScript 實(shí)驗(yàn)、實(shí)驗(yàn)?zāi)康?、掌握利用 JavaScript 編寫網(wǎng)頁(yè)動(dòng)態(tài)效果的能力；2、掌握在網(wǎng)頁(yè)中使用JavaScript 腳本的兩種方法。、實(shí)驗(yàn)課時(shí)2 課時(shí)、實(shí)驗(yàn)內(nèi)容1、計(jì)算整數(shù)階乘實(shí)驗(yàn)的結(jié)果（ 1）編制代碼如下：<html><head><title> 求數(shù)值的階乘</title><script language="javascript" type="text/javascript"

26、><!-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);/-></script></head><body><h2>i青

27、在文本框中輸入一個(gè)整數(shù)，然后單擊“計(jì)算”<br>按鈕，計(jì)算該整數(shù)的階乘</h2><form name="myform"><input name="factorial" value=""><p><input type="button" value=" 計(jì)算"onclick="ss()”><p></form></body></ html>(2)效果如下：9歡在下載請(qǐng)?jiān)谖谋?/p>

28、框中輸入一個(gè)整數(shù)，然后單擊“計(jì)算外按鈕,計(jì)算該整數(shù)的階乘。計(jì)苴2、下拉菜單實(shí)驗(yàn)的結(jié)果編寫hthl代碼如下：Transitional/EN<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type&quo

29、t; 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"><img src="image/logo.jpg&quo

30、t; alt=</div>河南工業(yè)大學(xué)"width="857" height="82"/><div id="menu"><ul> <li><a href="#">網(wǎng)站首頁(yè) </a></li><li><a href="#">課程簡(jiǎn)介 </a></li><li> <a>課程大綱</a><ul> <li

31、><a href="#">教學(xué)大綱 </a></li><li><a href="#">授課計(jì)劃 </a></li><li><a href="#">實(shí)踐實(shí)訓(xùn) </a></li> </ul> </li><li> <a>電子課堂</a><ul><li><a href="#"></a&g

32、t;</li><li><a href="#"></a></li><li><a href="#"></a></li> </ul> </li><li> <a>師資隊(duì)伍</a><ul>#歡迎下載<li><a href="#">課程負(fù)責(zé)人</a></li><li><a href="#&quo

33、t;>師資隊(duì)伍</a></li><li><a href="#"><li><a href="#"></a></li><li><a href="#"></a></li>課題研究 </a></li> </ul> </li>教學(xué)錄像</a></li><li> <a>習(xí)題試題</a><

34、ul><li><a href="#"><li><a href="#"><li><a href="#">試題庫(kù)</a></li>例題精講 </a></li> </ul> </li><li><a href="#">參考文獻(xiàn)</a></li>精品文檔<li><a href="#">

35、課程申報(bào) </a></li> </ul> </div><div id="pic"><img src="image/pic.jpg" width="951" height="222" alt="" /></div> </div><div class="middle"><p align="center"> 課程簡(jiǎn)介 </p><

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

37、t;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:0; padding:0;Body background:url(image/pd_r7_c2.png) repeat-y; width: 1

38、00%;height:autoa: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 margin:0 auto; # menu height:41px; width:100%; background:url(image/nav_bg2.gi

39、f)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-repeat bottom;font: bold 16px "微軟雅黑 " line-height:30px;color:#fff;

40、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:105px; height:28px; margin:0px;# menu ul li:hover ul li a background:url(im

41、age/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:#025893; text-align:center;# pic img margin:0 auto;.middlemargin: 0px auto

42、; padding-top: 26px; width: 70%; height: auto;text-align: left; color: #CC0000; font-size: 18px; line-height: 1.5;11歡迎下載。精品文檔text-indent:30px;.bottommargin: 0px auto; width: 1351px; height:80px;(3)效果如下：樹麒盟球廊蝶眄蝴媚戳咬e忘翩翱曼籥賽品據(jù)麗旃檄幅幽翹痂H解頸,場(chǎng)憫蠲厥褊瞎,百A,觸裕云舒嬲 曲靖品咽幽麗疆髓,蠲捌瞌獨(dú)臉斷崛捏.掰篦W鼬 馳領(lǐng)勃翻鐲展 貧公擔(dān)超滬aE匏觸d£落舞游抨T

43、額國(guó)睛聰3、表單驗(yàn)證實(shí)驗(yàn)的結(jié)果(1)代碼如下：<html><head><title> 登記表 </title><script language="javascript">function checkIt()var email = document.getElementById("email");var mobileNo = document.getElementById("mobileNo");var phoneNo=document.getElementById("

44、;phoneNo");var IDNo=document.getElementById("IDNo");/ 郵箱驗(yàn)證if(email.value=null|email.value="")document.getElementById("emailError").innerHTML="<fontcolor=red> 請(qǐng)輸入 E-mail 地址！ </font>"email.focus();return false;elsedocument.getElementById("e

45、mailError").innerHTML=""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

46、();return false;elsedocument.getElementById("emailError").innerHTML=""/ 手機(jī)號(hào)碼驗(yàn)證varregExpression/A(86)?(13d9)|(150,1,2,3,5,678,9d8)|(180,5,678,9d8)$/;if(!regExpression.test(mobileNo.value)document.getElementById("mobileNoError").innerHTML="<font color=red> 您輸入的

47、手機(jī)號(hào)碼有誤！ </font>"mobileNo.focus();return false;else document.getElementById("mobileNoError").innerHTML=""/ 固話驗(yàn)證var regExpression=/A(d3)-)?(d7)|(d8)$/;if(!regExpression.test(phoneNo.value)document.getElementById("phoneNoError").innerHTML="<font color=re

48、d> 您輸入的固定號(hào)碼有誤！ </font>"phoneNo.focus();return false;elsedocument.getElementById("phoneNoError").innerHTML=""/ 身份證驗(yàn)證varregExpression=/A1-9d51-9d3(0d)|(10-2)(0|1|2d)|30-1)(d 4)|d3A-Z)$/;if(!regExpression.test(IDNo.value)document.getElementById("IDNoError").i

49、nnerHTML="<font color=red> 您輸入的身份證號(hào)碼有誤!</font>"IDNo.focus(); return false; else document.getElementById("IDNoError").innerHTML=""</script></head><body>15歡迎下載。精品文檔<form action="" id="myform"><table align="center"><tr><td font_size="100"> 登記表 </td&

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論