網(wǎng)設(shè)計(jì)與制作課程設(shè)計(jì)報(bào)告_第1頁
網(wǎng)設(shè)計(jì)與制作課程設(shè)計(jì)報(bào)告_第2頁
網(wǎng)設(shè)計(jì)與制作課程設(shè)計(jì)報(bào)告_第3頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、«網(wǎng)頁設(shè)計(jì)與制作課程設(shè)計(jì)實(shí)驗(yàn)報(bào)告院系名稱：管理學(xué)院專業(yè)班級(jí): 電子商務(wù)XXX學(xué)生姓名： XXX 學(xué) 號(hào)： XXXXXXX網(wǎng)頁界面網(wǎng)站欄目網(wǎng)站功能（JS程序）合計(jì)50分10分40分100分2016年06月、實(shí)驗(yàn)?zāi)康谋緦?shí)驗(yàn)屬于設(shè)計(jì)性實(shí)驗(yàn)，在學(xué)習(xí)完網(wǎng)頁設(shè)計(jì)與制作課程的基礎(chǔ)上，通過實(shí)驗(yàn)學(xué) 習(xí)網(wǎng)頁制作的步驟與方法，使用 CSS+DIV制作一個(gè)簡單的網(wǎng)站，能夠?qū)W(wǎng)站有一個(gè)清晰 的認(rèn)知和規(guī)劃。進(jìn)一步熟悉和領(lǐng)悟HTM語言、CSS樣式表和JAVASCRIP語言的語法結(jié)構(gòu) 將理論與實(shí)踐相結(jié)合，加深對(duì)本課程的理解。、實(shí)驗(yàn)步驟1、進(jìn)行網(wǎng)站整體規(guī)劃，包括網(wǎng)站主題、欄目以及界面的構(gòu)思，確定網(wǎng)站結(jié)構(gòu)，形成 初步設(shè)

2、計(jì)思路。2、設(shè)計(jì)網(wǎng)站的主頁以及欄目，利用 CSS+DIV制作網(wǎng)站主頁和彈出式導(dǎo)航條菜單，利 用JavaScript制作動(dòng)態(tài)效果，并用firework軟件對(duì)主頁進(jìn)行切圖。3、設(shè)計(jì)并利用CSS+DIV制作列表頁，并用firework軟件對(duì)列表頁進(jìn)行切圖。4、設(shè)計(jì)并利用CSS+DIV制作內(nèi)容頁，并用firework軟件對(duì)內(nèi)容頁進(jìn)行切圖。5、進(jìn)行調(diào)試和修改已形成最終實(shí)驗(yàn)結(jié)果。三、網(wǎng)站設(shè)計(jì)思路1、參照“唯品會(huì)” “折800”等電商網(wǎng)站，確定網(wǎng)站主題為“輕奢電商”。2、設(shè)計(jì)網(wǎng)站主頁，主頁設(shè)置首頁、美妝、服飾、零食、母嬰、關(guān)于我們、在售分類 等七個(gè)一級(jí)欄目。其中美妝、服飾、零食、母嬰四個(gè)欄目含有二級(jí)欄目。3

3、、首頁設(shè)置品牌熱賣、限量搶購等圖片展示，并利用 Javascript 設(shè)置用戶名和密 碼的表單驗(yàn)證，在圖片之下設(shè)置一個(gè)新聞列表提供有關(guān)網(wǎng)站的最新消息，右側(cè)設(shè)置賬戶、 密碼的表單驗(yàn)證，并在網(wǎng)頁結(jié)尾處寫上官方微信和版權(quán)信息。4、由主頁導(dǎo)航欄上的的在售分類引出列表頁，在列表頁中采用新聞列表樣式具體展 示本企業(yè)的全部商品分類并設(shè)置超鏈接。5、由列表頁中美妝 | 女士護(hù)膚 | 潔面彈出具體的內(nèi)容頁面，主要由圖片以及相應(yīng)的文 字介紹組成。四、網(wǎng)站的核心代碼1、主頁<head><meta http-equiv="Content-Type" content="t

4、ext/html; charset=utf-8" /><title> 輕奢電商 </title><style type="text/css">bodymin-width:1080px;color:#006e89;font-family:微軟雅黑 ;background-image:url（images/ 輕奢背景 .jpg）;#outermost #titlemargin: 0 auto;width: 1080px;#navwidth: 1080px;margin:0 auto#nav ul lipadding:0 5px

5、;color:#CCC;margin:10px 0 0 0;float:right;list-style: none#nav ul li acolor:#666;text-decoration: none#nav ul li a:hovercolor:#F00;text-decoration: underline#outermostclear:both;width:1080;margin-left:auto;margin-right:auto#topfont-family: 隸書 ;font-size: 55px;margin:0#outermost #titlemargin: 0 auto;

6、width: 1080px#outermost #sddmmargin:0 auto;padding: 0;width: 1080px;z-index: 30;background-color:#030303; height:40px#sddm limargin:50;padding:0;list-style: none;float: left;font: bold 20px arial#sddm li adisplay: block;margin: 0 1px 0 0; padding: 4px 10px;width: 120px; background:#030303;color: #FF

7、F; text-decoration: none#sddm li a:hover background: #030303#sddm divposition: absolute; visibility: hidden; margin: 0 35 0 0;padding: 0 35 0 0; background: #030303; border: 1px solid #030303#sddm div a position: relative; display: block;margin: 0; padding: 5px 10px;width: 120; white-space: nowrap;

8、text-align: left; text-decoration: none; background: #030303; color: #2875DE;font: 20px arial#sddm div a:hover background: #030303; color: #FFF#mainmargin:auto; font-size:30px; width:1000px; text-align:center#contentmagin-left:20px; font-size:22px; width:auto;height:200px; float:left#content1float:l

9、eft;#content2magin:auto 0 auto auto; font-size:18px;height:200px;float:right#bottommagin:auto auto 0 auto;text-align:center;font-size:18px;clear:left</style><script type="text/javascript">$(function()$("#KinSlideshow").KinSlideshow(moveStyle:"down",intervalT

10、ime:8,mouseEvent:"mouseover", titleFont:TitleFont_size:14,TitleFont_color:"#FF0000" );)</script><script type="text/javascript"><!-var timeout = 500;var closetimer= 0;var ddmenuitem = 0;function mopen(id) mcancelclosetime();ddmenuitem = (id);function mclos

11、e()function mclosetime() closetimer = (mclose,timeout); function mcancelclosetime() if(closetimer) (closetimer);closetimer = null;= mclose;pg" border="0"> 輕奢電商 </p><p align="right"><img src="images/ 正品保障 .jpg" border="0"> 正品保障 <img

12、 src="images/7 天退換 .jpg" border="0">7 天退換 </p></div><ul id="sddm"><li><a href="#" onmouseover="mopen('m1')"onmouseout="mclosetime()">首頁 v/a>v/ii><li><a href="#" onmouseover=&

13、quot;mopen('m2')" onmouseout="mclosetime()">美妝 </a><div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">女士護(hù)膚 </a><a href="#">男士護(hù)膚 </a></div></li>

14、<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()"> 服 飾 </a><divid="m3"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href="#"> 精品女裝 </a><a href="#

15、"> 潮流男裝 </a></div></li><li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()"> 零 食 </a><divid="m4"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href=&q

16、uot;#"> <a href="#"> <a href="#"> </div></li>國內(nèi)美食 </a>進(jìn)口美食 </a>酒水專區(qū) </a><li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()"> 母 嬰 v/a><div id="m5" on

17、mouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">嬰幼兒專區(qū) </a><a href="#">孕媽專區(qū) </a><a href="#">玩具/文具/教育</a></div></li><li><a href="#" onmouseover="mopen('

18、;m6')" onmouseout="mclosetime()">關(guān)于我們 </a></li><li><a href="" onmouseover="mopen('m7')" onmouseout="mclosetime()">在售分類 </a></li></ul><div id="main"><p><hr size="1"

19、> 品牌熱賣 <hr size="1"><br><div id="KinSlideshow" style=""><a href="/" target="_blank"><img src="images/" ></a><a href="/" target="_blank"><img src="images/" ><

20、;/a></div></p><p><hr size="1"> 限量搶購 <hr size="1"><br><img src="images/ 限量搶購 .jpg" border="0"></p></div><div> <div id="content"> 輕奢電商輕奢新主義，只為懂你的人 <br><ul><li>輕奢國際尖貨

21、，跟蹤國際一流品牌，提供超一流服務(wù)</li><li>輕奢母嬰專享，提供超豪華護(hù)理套餐，限時(shí)一折搶購</li><li>輕奢化妝品專柜，超乎實(shí)體店的感官體驗(yàn)，限時(shí)特賣</li><li>輕奢零食主會(huì)場，進(jìn)口零食傾情享受，酒水七折特賣</li></ul></div><div id="content1"><img src="images/ 登錄 .jpg" border="0"><div id="c

22、ontent2"><br><br><form method="post" action="" name="myform"> 用戶： <input type="text" name="username" size="20" onblur="a(this)"><span id="a" style="color:red;font-size:12px;"&

23、gt;</span><br> 密碼： <input type="password" name="pword" size="20" onblur="p(this)"><span id="p"style="color:red;font-size:12px;"></span></br> <p><input type="submit" value="登錄 "

24、;><input name="" type="button" class="userpsubmit" value=" 注冊(cè)" id="add" onclick="check_all"> </p></form> </div></div><div id="bottom" style="text-align:center"><hr width="80

25、%"></div></div></body></html>2、列表頁<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 在售分類 </title><style type="text/css">bodycolor:#006e89;font-family: 微 軟 雅 黑 ;background-imag

26、e:url(images/ 輕 奢 背 景.jpg)#sddmpadding:0;z-index: 30;background-color:#030303;height:40px;color:#FFF#sddm lipadding:10px 30px 5px 30px; list-style: none;float: left; width:130px;font: bold 20px arial; color:#FFF#sddm1background-color:#006e89#topfont-family:隸書 ;font-size:45px;text-align:center#conten

27、tfont-size:24px;padding:10px auto auto 20px;magin:auto auto auto 30px #content ul firstfont-size:24px;margin-left:50px#content ul secondfont-size:18px;margin-left:60px afont-size:18px;text-decoration:underline;color:#006e89 a:hoverfont-size:18px;text-decoration:underline;color:#000#bottommagin:auto

28、auto 0 auto;text-align:center;font-size:18px;clear:left</style></head><body><div><p align="center" id="top"><img src="images/ 輕奢品牌 .jpg" border="0"> 輕奢電商 </p><p align="right"><img src="images/ 正

29、品保障 .jpg" border="0"> 正品保障 <img src="images/7 天退換 .jpg" border="0">7 天退換 </p></div><ul id="sddm"><li>首頁<li>美妝<li>服飾<li>零食<li>母嬰<li>關(guān)于我們<li id="sddm1"> 在 售分類 </ul><div

30、id="content"><div align="center"><hr width="80%"> 商 品 分 類 <hr width="80%"></div><ul id="first"><li> 美妝<div><ul id="second"><li><img src="images/ 女士護(hù)膚 .jpg" border="0

31、"> 女士護(hù)膚： <a href=""> 潔面</a>|<a href="#"> 護(hù)膚套餐 </a>|<a href="#"> 爽膚 </a>|<a href="#"> 去 角質(zhì) </a>|<a href='"#">T區(qū)護(hù)理 </a>|<a href="#"> 面膜 </a>|<a href="

32、#">身體護(hù)理</a>|<a href="#"> 彩妝 </a>|<a href="#"> 隔離防曬 </a>|<a href="#"> 精華 </a>|<a href="#"> 眼膜 </a>|<a href="#"> 香水 </a>|<a href="#"> 啫喱 </a>|<a href=&qu

33、ot;#"> 噴霧 </a>|<a href="#"> 隔離防曬 </a><li><img src="images/ 男士護(hù)膚 .jpg" border="0"> 男士護(hù)膚： <a href="#"> 潔 面</a>|<a href="#"> 剃須 </a>|<a href="#"> 面膜 </a>|<a href=&quo

34、t;#"> 面部護(hù)理 </a>|<a href="#"> 護(hù)膚套餐</a>|<a href="#"> 須后水</a>|<a href="#"> 眼部護(hù)理</a>|<a href="#"> 身體護(hù)理 </a>|<a href="#"> 祛痘</a></ul></div><li> 服飾<div><ul

35、 id="second"><li><img src="images/ 精品女裝 .jpg" border="0"> 精品女裝:<a href="#"> 針織衫</a>|<a href="#">polo 衫 </a>|<a href="#"> 連衣裙</a>|<a href="#"> 牛仔褲 </a>|<a href="

36、;#"> 風(fēng)衣 </a>|<a href="#"> 短裙 </a>|<a href="#"> 松 糕鞋 </a>|<a href="#"> 棉衣 </a>|<a href="#"> 涼鞋 </a>|<a href="#"> 打底衫 </a>|<a href="#"> 夾克 </a><li><

37、;img src="images/ 潮流男裝 .jpg" border="0"> 潮流男裝:<a href="#">T恤 </a>|<a href="#"> 背心 </a>|<a href="#"> 襯衫 </a>|<a href="#">西裝 </a>|<a href="#"> 皮鞋 </a>|<a href="#

38、"> 泳褲 </a>|<a href="#"> 帽子 </a>|<a href="#"> 睡衣 </a>|<a href="#"> 袖扣 </a>|<a href="#"> 領(lǐng)帶 </a>|<a href="#"> 休閑 褲 </a></ul></div><li> 零食<div><ul id=&q

39、uot;second"><li><img src="images/ 國內(nèi)美食 .jpg" border="0"> 國內(nèi)美食:<a href="#"> 堅(jiān)果 </a>|<a href="#"> 肉脯 </a>|<a href="#"> 果脯 </a>|<a href="#"> 餅干 </a>|<a href="#"&g

40、t; 特產(chǎn) </a>|<a href="#"> 炒貨 </a>|<a href="#"> 茗茶 </a><li><img src="images/ 進(jìn)口美食 .jpg" border="0"> 進(jìn)口美食:<a href="#"> 巧克力 </a>|<a href="#"> 糖果 </a>|<a href="#">

41、糕點(diǎn) </a>|<a href="#"> 咖啡 </a>|<a href="#">健康沖飲 </a>|<a href="#">咖啡伴侶 </a>mg srcH二mages、HZK4岡.jpg= bodeH=o=vHZK4岡 Aa hrelr-tt-v冷湖AavAa hrelr-tt-v«HAavAa hrelr-tt-v®HAavAa hrelr-tt-v 凹口RAavAa hrelr-tt-v-frsAavAa helr-tt=v

42、aaHAavAa hrelr-tt-v湖異 AavAa helr-tt=v 錨losAavAa hrelr-tt-v>#Aav4u_v4divviv*嵋Ao=< id"=m3=vAU-idH=second=x=ximg sCH-_.mages、港4岡.jpg= bordenQv®J4岡 入 a hrelr破-vssAavAa helr=#=v 書壷>AavAa hrelr-爸 v<«AavAa helr=tt=va#AavAa helr=tt=vsAavmg srcH二mages、®4岡 jpg= bodeH=o=v®4

43、岡入a helr=tt=v 滸®洲旦AavAa hrelr=tt=v®#er4avAa hrelr=tt=v>3ffl4avAa hrelr破vwsnAavmg srcH二mages、 5£*.jpg= bordenQv*、H*、舞M Aa helr=tt=v A4I4avAa helr=tt=v 労器AavAa helr=tt=vssAavAa helr=tt=v 弟芳AavAa hrelr-ttv岀曲AavAa hrelr-ttv«»AavAa hrelr-ttvAavAa helr=tt=v<vl串AavAa helr=tt=

44、vMAavAo=< idH=bofforrr sfy-eH=(Dxfa-ig=?cen(D=xhr widfhH=80%=vAdivvAbodyv4hfm-vw習(xí)<列AheadvAmesrh#pequ<-H=con(Dnr-Type= confenHJexuhfmr chaselluffoo=mevmHAm-evAsfy-e fypeH=(Dxt/css=vbody 宀Co-Ott006e89 八 fonffami-ws»Ji»八 (Dxr-a-ignoenfec backgroundimageur-amages、®*.jpg)八#topfont

45、-family: 隸書 ;font-size:45px;text-align:center #sddmmargin:0 ;padding: 0;z-index: 30;background-color:#030303;height:40px;color:#FFF#sddm lipadding:10px 30px 5px 30px;list-style: none;float: left;font: bold 20px arial;width:130px;color:#FFF#sddm1 background-color:#006e89;#contentwidth:100%#content1wi

46、dth:25%;float:left#content2width:25%;float:left#content3width:25%;float:left#content4width:25%;float:left#bottommagin:auto auto 0 auto; text-align:center;font-size:18px;clear:left</style></head><body><div><p align="center" id="top"><img src="images/ 輕奢品牌 .jpg" border="0"> 輕 奢電商 </p><p align="right"><img src="images/ 正 品 保 障 .jpg" border="0"> 正 品 保 障 <img src="images/7 天退換 .jpg" border="0">7 天退換 </p></div><ul id="sddm"&

溫馨提示

  • 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)論