《網(wǎng)頁設(shè)計(jì)與制作》實(shí)驗(yàn)報(bào)告劉志華_第1頁
《網(wǎng)頁設(shè)計(jì)與制作》實(shí)驗(yàn)報(bào)告劉志華_第2頁
《網(wǎng)頁設(shè)計(jì)與制作》實(shí)驗(yàn)報(bào)告劉志華_第3頁
《網(wǎng)頁設(shè)計(jì)與制作》實(shí)驗(yàn)報(bào)告劉志華_第4頁
《網(wǎng)頁設(shè)計(jì)與制作》實(shí)驗(yàn)報(bào)告劉志華_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、期河擊r火摩網(wǎng)頁設(shè)計(jì)與制作實(shí)驗(yàn)報(bào)告院系名稱：管理學(xué)院專業(yè)班級(jí): 電子商務(wù)13級(jí)3班學(xué)生姓名：劉志華 學(xué) 號(hào)： 201317050302項(xiàng)目實(shí)驗(yàn)一（25 分）實(shí)驗(yàn)二（35 分）實(shí)驗(yàn)三（40 分）總分（100 分）得分2015年5月實(shí)驗(yàn)一：HTM晤言實(shí)驗(yàn)、實(shí)驗(yàn)?zāi)康?、掌握利用HTMI®言編寫網(wǎng)頁的能力；2、掌握利用HTMI®言編寫表格的能力；3、掌握利用HTMI®言編寫表單的能力。、實(shí)驗(yàn)課時(shí)2學(xué)時(shí)、實(shí)驗(yàn)內(nèi)容1、表格實(shí)驗(yàn)的結(jié)果網(wǎng)頁源代碼：<html><head><title> 電商 201317050302LZH</title&

2、gt;</head><body><table border align="center"><caption style="height:40px;margin-bottom:10px;"><h2> 實(shí)驗(yàn)一表格實(shí)驗(yàn)</h2></caption><tr><tdrowspan="2"colspan="2"width="200"bgcolor="#FF0000">A<td

3、width="200">B<td width="200" align="center”>C<tr><td colspan="2" align="center">D<tr><tdrowspan="2"align="right">E<tdrowspan="2"align="right">F<tdrowspan="2">G&

4、lt;td>H<tr><td>I</body></html>電商 I。1 317050302LZHx +實(shí)驗(yàn)一表格實(shí)驗(yàn)BCDEFGH I2、表單實(shí)驗(yàn)的結(jié)果網(wǎng)頁源代碼：<html><head><title> 電商 201317050302LZH</title></head><body><table border width="500" align="center"><div align="center&q

5、uot;><卜2>實(shí)驗(yàn)一表單實(shí)驗(yàn)</h2><hR><form><tr><td align="center"> 姓名：<td><input name="name"><tr><td align="center"> 密碼：<td><input type="password" name=""value=""size=""m

6、axlength=""><tr><td align="center”> 性別：<td><input type="radio" name="gender" valeu="1" checked> 女<input type="radio" name="gender" valeu="2"> 男<tr><td align="center"> 愛好：

7、<td><input type="checkbox" name="check1" value="yes">籃球<input type="checkbox" name="check2" value="yes" checked> 足球<input type="checkbox" name="check3" value="yes">乒乓球<tr><td al

8、ign="center"> 籍貫:<td><select name="jiguan"><option> 開封 <option> 關(guān)B州 <option> 洛陽</select><tr><TD colspan="2" align="center"><input type="submit" name="submit_button” value="提交”><inp

9、ut type="reset" name="reset_button" value="重置"></table></body></html>電有 2(H31705(B02LZH實(shí)驗(yàn)一表單實(shí)驗(yàn)姓名工1密碼；j-性別，1女口男愛好：1巴籃球 正足球 巴乒乓球籍貫：開封H1提到重匿11*四、實(shí)驗(yàn)小結(jié)這次的實(shí)驗(yàn)是設(shè)計(jì)表格和表單，跟表格相比，表單可能更復(fù)雜一點(diǎn)，同時(shí)表單制作 時(shí)還需要表格的一些基礎(chǔ)，在實(shí)驗(yàn)中，主要是參考課本上的代碼，然后自己動(dòng)手輸入到 記事本中。通過這次的實(shí)驗(yàn)，我簡(jiǎn)單了解了 TR、TD等代

10、碼的用法，對(duì)網(wǎng)頁制作也有了 簡(jiǎn)單的認(rèn)知。ffl斯耳雌型:碎中山L謨知/"1*將第匕年上牛年左廉 wi?Trt-c，|5*«±aira苧隹北M冶骯里臉也 I!干而Q，JF期颯i主相網(wǎng)GUfE明月。安子，杏巾口見串者1杵鎖您-1r3萍抑十筋翡手笠總皆澳沖厚型：北新I#事兄住震節(jié)理窄通他防 二管雷用工0步河巖意氏.玄在察上空北生E知情爵 。事:小犀看某巧,簟心獻(xiàn)元帶于一i 方管用裝電*些i電±72J|-心里*百田樹博Q H5T制圈由聲力1年fliEM丁?？ξ⒖诠ぶ欣甂桁升013，期忡生在話十一啕1次于空飛度袤中廠沙盤：寸師生互選0就要指導(dǎo)/校友赭百骨科下翌3r

11、.mnaxif拈利更A I教學(xué)科修啷mi區(qū)4/府趣.工兩 HE書演題llffl得士所m 魄州鳥？工麗*歡樂#:弗注開之快動(dòng)慎抽神工11網(wǎng)演票髯娜&叁基小才理拓晴至所片才i匹儲(chǔ)-m-”左省t/l的I觸以上MH題!油川必二尋際照*修班看用蕓-管好幣電筋喇r法區(qū)避唱完生竽*班，用虎腐砸術(shù)卷安也推斜電l&=DEF后岐回申軍工ft :蜃管卷卻禺工班之電子南舞他St展與人刀墉靜M -工火府壇用1研暨F圈 看期張市蚓的愜口到在用伶 IfflW早測(cè)PXK戢:麗|!a Ifflm 蠡:她第尬 泥卻花： 簟3山和十二端之EM本物杭黑國內(nèi)禹樓左甯戰(zhàn)帙叫白麻品不5 土才！1霸眸 野忘：士詢 設(shè)i+藝中

12、淋 做于固口外曰事府骸河與恬叁航閶斯幽邈嬖理i解隋J f88 I «BH4wnnHMn9nnm”3*31? flUMENanigemericrhnvcgey'M ：光球】甩fll停二 gsaiMfllwi/ted實(shí)驗(yàn)二：FireWorks和CSS實(shí)驗(yàn)、實(shí)驗(yàn)?zāi)康?、掌握為給定效果圖規(guī)劃切圖方式的能力;2、掌握利用FireWorks切圖的能力；3、掌握利用CSS+DVJ作網(wǎng)頁的能力。、實(shí)驗(yàn)課時(shí)2課時(shí)、實(shí)驗(yàn)內(nèi)容1、規(guī)劃切圖方式的思路河由求比學(xué)膂理學(xué)院9CIIW3L OP MANAGCHENT tflHAN UniVEIHTr Qf TDCHMLOCFET爭(zhēng)曬掰Mg伍人才地并冏主礎(chǔ)M

13、工柞HITI* 母故西校坪I采社僉網(wǎng)咧電母藤以管理學(xué)院的網(wǎng)站主頁為例，根據(jù)網(wǎng)站結(jié)構(gòu)，可以將網(wǎng)頁分為學(xué)院LOGO導(dǎo)航區(qū)、圖文部分、友情鏈接和版權(quán)信息幾部分組成2、利用FireWorks切圖的步驟在fireworks中打開之前選定的網(wǎng)頁的圖片，按照所需內(nèi)容進(jìn)行切圖，切圖結(jié)果如 下圖所示：理由7家夫,學(xué)管理學(xué)院SCHOOL OFMAMAGEMEM HEhAS UNIVERSITY Ol TECHNOLOGEV*師生互選就業(yè)指導(dǎo)th資料下載圖片新詞遨口公告3、CSS+DI®J作網(wǎng)頁的結(jié)果網(wǎng)頁源代碼：<html><head><meta charset="

14、GBK"><title> 電商 201317050302LZH</title><style>div,ul,li,a,p,hmargin:0;padding:0;.top .mennuwidth:100&height:45px;background:#164896;.top .logoborder:none;.top .mennu ulwidth:900px;margin:0 auto;.top .mennu liwidth:150px;list-style:none;float:left;height:45px;line-height

15、:45px;text-align:center;.top .mennu li adisplay:block;color:#FFF;text-decoration:none; width:150px;height:45px;.top .mennu li divwidth:150px;background:#164896;visibility:hidden;z-index:2;position:relative;.mainwidth:992px;margin:0 auto;position:absolute;left:180px;.main .bannerfloat:left;width:764p

16、x;height:248px;z-index:1;background:u rl(images/banner.png);.main .rightfloat:left;width:228px;height:248px;.main .right imgfloat:left;.main .contentwidth:992px;height:500px;padding-top:30px;</style><script type="text/javascript"><!-var timeout = 500;var closetimer= 0;var dd

17、menuitem = 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 mclosetime()

18、 closetimer = window.setTimeout(mclose, timeout); function mcancelclosetime() if(closetimer) window.clearTimeout(closetimer);closetimer = null;)document.onclick = mclose; 一></script></head><body><div class="top"><div class="logo"><img src="

19、;images/logo.jpg'7></div><div class="mennu"><ul><li onmouseover="mopen('m1')" onmouseout="mclosetime()"><a href='7"> 學(xué)院概況 </a><div id="m1" onmouseover="mcancelclosetime()">< a href=

20、'7">學(xué)院簡(jiǎn)介 </a>< a href='7">學(xué)科建設(shè) </a>< a href='7">機(jī)構(gòu)設(shè)置 </a>< a href='7">發(fā)展規(guī)劃 </a></div></li><li onmouseover="mopen(,m2')" onmouseout="mclosetime()"><a href='7"> 黨建工

21、作 </a><div id="m2" onmouseover="mcancelclosetime()">< a href='7">教工之家 </a>< a href='7">黨校建設(shè) </a>< a href='7">組織建設(shè) </a>< a href='7">黨的活動(dòng) </a></div></li> <li onmouseover=&

22、quot;mopen(,m3')" onmouseout="mclosetime()"><a href='7"> 招生就業(yè) </a><div id="m3" onmouseover="mcancelclosetime()">< a href='7">招生計(jì)劃 </a>< a href='7">就業(yè)指導(dǎo) </a>< a href='7">畢業(yè)信息

23、</a></div></li><li><a href='7"> <li onmouseover="mopen('m5')" onmouseout=,mclosetime(),><a href='7"> 合作交流 </a><div id="m5" onmouseover="mcancelclosetime()">< a href='7">合作研究 &

24、lt;/a>< a href='7">教師互訪 </a></div></li><li><a href="/">校友風(fēng)采</a></li></ul></div></div><div class="main"><div class="banner"></div><div class="right"><img sr

25、c="images/jiuye.jpg"/><img src="images/shisheng.jpg"/><img src="images/xiaoyou.jpg"/><img src="images/ziliao.jpg"/></div><div class="content"><p>河南工業(yè)大學(xué)管理學(xué)院現(xiàn)有教職工102人，其中教授、副教授46人，博士、在讀博士 31 人。教師隊(duì)伍中，擁有河南省學(xué)術(shù)技術(shù)帶頭人1 人

26、，河南省優(yōu)秀專家1 人，河南省創(chuàng)新人才培養(yǎng)工程資助對(duì)象1 人，河南省高校新世紀(jì)優(yōu)秀人才支持計(jì)劃資助對(duì)象2人，河南省優(yōu)秀中青年骨干教師6 人，河南省教育廳學(xué)術(shù)科技帶頭人5 人。設(shè)有4 個(gè)行政辦公室、1個(gè)資料中心、1個(gè)MB儆育中心、5個(gè)專業(yè)系和3個(gè)研究所以及1個(gè)管理學(xué)科綜合實(shí)驗(yàn)中心。</p><p>河南工業(yè)大學(xué)管理學(xué)院目前共有電子商務(wù)、物流管理、工商管理、旅游管理、財(cái)務(wù)管理等五個(gè)專業(yè)，電子商務(wù)為一本招生專業(yè)，同時(shí)也是國家特色重點(diǎn)專業(yè)。管理學(xué)院每年向社會(huì)輸送近四百余名應(yīng)屆畢業(yè)生。</p></div></div></body><

27、;/html>IM NQ笊及軍管理學(xué)院SCHOOL Of 的，1加工冏£/門IDMAN UHFVERMTT Of TtClINOUXiET省優(yōu)秀專冢1人，河南首創(chuàng)新大找養(yǎng)工程資助沛象1大r河南省高瞞世婦優(yōu)秀Ak支持計(jì)劃資助對(duì)象£.兒河南首付青巾青年骨干教師6人， 河南省歌育廳學(xué)本科技帶頭人$人.我有4個(gè)行政辦公室.1個(gè)資料中心、1個(gè)F附敦肓巾心,5個(gè)專業(yè)素和3個(gè)研宣所見娟個(gè)管理學(xué)科綜合實(shí)驗(yàn)中心*河南工業(yè)丈學(xué)管理學(xué)院目前共有電子商務(wù).物漆管理、工荷首理.施髓腐、財(cái)務(wù)管理等五個(gè)專1L電子商務(wù)為一本貂生專業(yè)，同時(shí)也是國家 特色重點(diǎn)專1L管理學(xué)院每軍向社會(huì)編送近四百解r應(yīng)屆畢

28、業(yè)生.四、實(shí)驗(yàn)小結(jié)這次是我第一次使用fireworks這個(gè)軟件，使用它切圖并不算太難，只是要切的美觀 需要十分的細(xì)心。切完圖后，需要利用 css+html將其制作成網(wǎng)頁，這個(gè)還是有一定難度 的，原本是想仿一個(gè)學(xué)院的網(wǎng)站出來的，但是其中的代碼太多，而且時(shí)間也比較緊張， 所以只能盡可能多的利用切出來的圖，做出一個(gè)簡(jiǎn)單的模型出來，結(jié)果圖其實(shí)與原圖的 出入還是有點(diǎn)大的，自己做過之后，才知道做一個(gè)精致的網(wǎng)站是多么的不容易。還是要 好好學(xué)習(xí)網(wǎng)頁設(shè)計(jì)，爭(zhēng)取自己能早日做出高水平的網(wǎng)站。實(shí)驗(yàn)三：JavaScript 實(shí)驗(yàn)、實(shí)驗(yàn)?zāi)康?、掌握利用JavaScript 編寫網(wǎng)頁動(dòng)態(tài)效果的能力；2、掌握在網(wǎng)頁中使用Ja

29、vaScript 腳本的兩種方法。、實(shí)驗(yàn)課時(shí)2 課時(shí)、實(shí)驗(yàn)內(nèi)容1、計(jì)算整數(shù)階乘實(shí)驗(yàn)的結(jié)果網(wǎng)頁源代碼：<html><head><title> 電商 201317050302LZH</title><script type="text/javascript" language="javascript">function a()var shuzi=document.all.shuzi.value;var jc=shuzi;while(shuzi>1)shuzi-;jc=shuzi*jc;alert

30、(jc);</script></head><body></P><P>青在文本框內(nèi)輸入一個(gè)整數(shù)，然后點(diǎn)擊“計(jì)算”按鈕，計(jì)算該整數(shù)的階乘<input type="text" name="shuzi" value=""/><br><input type="button" name="jisuan" value=" 計(jì)算 " onclick="a()"/></bo

31、dy></html>|> O D 電商2O1317O5O3O2LZH X +請(qǐng)?jiān)谖谋究騼?nèi)輸入一個(gè)整數(shù)，然后點(diǎn)擊“計(jì)算”按鈕，計(jì)算該整數(shù)的階乘-1 JavaScript 提醯訐算I1202、下拉菜單實(shí)驗(yàn)的結(jié)果網(wǎng)頁源代碼：<html><head><meta charset="GBK"><title> 電商 201317050302LZH</title><style>div,ul,li,amargin:0;padding:0;.top .mennuwidth:100&heigh

32、t:45px;background:#164896;.top .mennu ulwidth:900px;margin:0 auto;.top .mennu liwidth:150px;list-style:none;float:left;height:45px;line-height:45px;text-align:center;.top .mennu li adisplay:block;color:#FFF;text-decoration:none;width:150px;height:45px;.top .mennu li divwidth:150px;background:#164896

33、;visibility:hidden; z-index:2;position:relative;</style><script type="text/javascript"><!-var timeout = 500;var closetimer= 0;var ddmenuitem = 0;function mopen(id) mcancelclosetime();if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'ddmenuitem = document.getElemen

34、tById(id);ddmenuitem.style.visibility = 'visible'function mclose() if(ddmenuitem) ddmenuitem.style.visibility ='hidden' function mclosetime() closetimer = window.setTimeout(mclose, timeout); function mcancelclosetime() if(closetimer) window.clearTimeout(closetimer); closetimer = null

35、;document.onclick = mclose;/ -></script></head><body><div class="top"><div class="mennu"><ul><li onmouseover="mopen('m1')" onmouseout="mclosetime()"><a href="/"> 學(xué)院概況 </a><div id=&qu

36、ot;m1" onmouseover="mcancelclosetime()"><a href="/"><a href="/"><a href="/"><a href="/">學(xué)院簡(jiǎn)介</a> 學(xué)科建設(shè)</a> 機(jī)構(gòu)設(shè)置</a> 發(fā)展規(guī)劃</a></div></li><li onmouseover="mopen('m2')&quo

37、t; onmouseout="mclosetime()"><a href="/"> 黨建工作 </a><div id="m2" onmouseover="mcancelclosetime()">< a href="/">教工之家 </a>< a href="/">黨校建設(shè) </a>< a href="/">組織建設(shè) </a>< a hre

38、f="/">黨的活動(dòng) </a></div></li><li onmouseover="mopen('m3')" onmouseout="mclosetime()"><a href="/"> 招生就業(yè) </a><div id="m3" onmouseover="mcancelclosetime()"><a href="/">招生計(jì)劃 <

39、/a><a href="/">就業(yè)指導(dǎo) </a><a href="/">畢業(yè)信息 </a></div>社會(huì)月艮務(wù)</a></li></li><li><a href="/"><li onmouseover="mopen('m5')" onmouseout="mclosetime()"><a href="/"> 合作

40、交流 </a><div id="m5" onmouseover="mcancelclosetime()"><a href="/"><a href="/">合作研究</a>教師互訪</a></div></li><li><a href="/">校友風(fēng)采</a></li></ul></div></div></body&

41、gt;</html>學(xué)院柢況黨建工作招生就業(yè)社會(huì)服用合作交福ID20131T05l13tKLZH學(xué)院簡(jiǎn)介學(xué)科嶷設(shè)機(jī)構(gòu)設(shè)置發(fā)展規(guī)劃學(xué)諦概況黨建工作招生就業(yè)社會(huì)服務(wù)校友風(fēng)來載工之家黨才遴設(shè)組織建設(shè)黨的活動(dòng)學(xué)院概沅黨建工作招生就業(yè)社會(huì)眼將合作頰校友同果3、表單驗(yàn)證實(shí)驗(yàn)的結(jié)果網(wǎng)頁源代碼：<html><head><title> 電商 201317050302LZH</title><script language="javascript" type="text/javascript">funct

42、ion yzdianhua()var dianhua=zhuce.dianhua.value;var obj=/A0d2,3-?d7,8$/;if(obj.test(dianhua)=false)alert(" 您輸入的電話號(hào)碼格式有誤, 請(qǐng)重新輸入！");document.all.zhuce.dianhua.value=""function yzshenfen()var shenfen=zhuce.shenfen.value;var obj=/d6(12d3)(01d)(0123d)d4/;if(obj.test(shenfen)=false)aler

43、t(" 您輸入的身份證號(hào)碼格式有誤, 請(qǐng)重新輸入！");document.all.zhuce.shenfen.value=""function yzshouji()var shouji=document.all.shouji.value;var obj=/A1d10$/;if(obj.test(shouji)=false)alert(" 您輸入的手機(jī)號(hào)碼格式有誤, 請(qǐng)重新輸入！");document.all.shouji.value=""function yzyouxiang()var youxiang=document.all.youxiang.valuevar obj=/A(w-*.*)+(w-?)+(.w2,)+$/;if(obj.test(youxiang)=false)alert(" 您輸入的電子郵箱格式有誤, 請(qǐng)重新輸入！");document.all.youxiang.value=""</script></head><body><form action="" method=&qu

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論