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

下載本文檔

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

文檔簡(jiǎn)介

1、網(wǎng)頁(yè)設(shè)計(jì)與制作課程設(shè)計(jì)實(shí)驗(yàn)報(bào)告院系名稱： 管理學(xué)院 專業(yè)班級(jí)： 電子商務(wù) XXX學(xué)生姓名： XXX 學(xué) 號(hào)： XXXXXXX網(wǎng)頁(yè)界面網(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)頁(yè)設(shè)計(jì)與制作課程的基礎(chǔ)上，通過(guò)實(shí)驗(yàn)學(xué)習(xí) 網(wǎng)頁(yè)制作的步驟與方法，使用 CSS+DIV制作一個(gè)簡(jiǎn)單的網(wǎng)站，能夠?qū)W(wǎng)站有一個(gè)清晰的認(rèn) 知和規(guī)劃。進(jìn)一步熟悉和領(lǐng)悟 HTML語(yǔ)言、 CSS樣式表和 JAVASCRIPT語(yǔ)言的語(yǔ)法結(jié)構(gòu)。將 理論與實(shí)踐相結(jié)合，加深對(duì)本課程的理解。二、實(shí)驗(yàn)步驟1、進(jìn)行網(wǎng)站整體規(guī)劃，包括網(wǎng)站主題、欄目以及界面的構(gòu)思，確定網(wǎng)站結(jié)

2、構(gòu)，形成初步設(shè)計(jì)思路2、設(shè)計(jì)網(wǎng)站的主頁(yè)以及欄目，利用 CSS+DIV制作網(wǎng)站主頁(yè)和彈出式導(dǎo)航條菜單，利用JavaScript 制作動(dòng)態(tài)效果，并用 firework 軟件對(duì)主頁(yè)進(jìn)行切圖。3、設(shè)計(jì)并利用 CSS+DIV制作列表頁(yè)，并用 firework 軟件對(duì)列表頁(yè)進(jìn)行切圖。4、設(shè)計(jì)并利用 CSS+DIV制作內(nèi)容頁(yè)，并用 firework 軟件對(duì)內(nèi)容頁(yè)進(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)站主頁(yè) , 主頁(yè)設(shè)置首頁(yè)、美妝、服飾、零食、母嬰、關(guān)于我們、在售分類等 七個(gè)一級(jí)欄目。其中美妝、服飾、

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

4、ot; content="text/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#n

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

6、t #titlemargin: 0 auto;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;backgroun

7、d:#030303;color: #FFF;text-decoration: none#sddm li a:hoverbackground: #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-spa

8、ce: nowrap;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#content

9、1float:left;#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",

10、intervalTime: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 = document.ge

11、tElementById(id);function mclose()function mclosetime() closetimer = window.setTimeout(mclose,timeout); function mcancelclosetime() if(closetimer) window.clearTimeout(closetimer);closetimer = null;document.onclick = mclose;/ -></script><script type="text/javascript">function

12、 a(obj)var zhi=document.getElementById('a');zhi.innerHTML=''zhi.innerHTML=' 賬號(hào)不能為空 'return false;exit;elsezhi.innerHTML=' 'return true;alert("aaa");<!- 驗(yàn)證密碼 ->function p(obj)var zhi=document.getElementById('p');zhi.innerHTML=' 密碼不能為空 'r

13、eturn false;exit;else zhi.innerHTML=' 'return true;</script></head><body><div id="outermost"><div><p align="center" id="top"><img src="images/輕奢品牌 .jpg" border="0"> 輕奢電商</p><p align="rig

14、ht"><img src="images/ 正品保障 .jpg" border="0"> 正品保 障<img src="images/7 天退換 .jpg" border="0">7 天退換 </p></div><ul id="sddm"><li><a href="#" onmouseover="mopen('m1')"onmouseout=&qu

15、ot;mclosetime()">首頁(yè)</a></li><li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">美妝</a><div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href=&qu

16、ot;#">女士護(hù)膚 </a><a href="#">男士護(hù)膚 </a></div></li><li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()"> 服飾 </a><div id="m3" onmouseover="mcancelclosetime()" onmo

17、useout="mclosetime()"><a href="#"> 精品女裝 </a><a href="#"> 潮流男裝 </a></div></li><li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()"> 零食 </a><div id="m4&qu

18、ot;onmouseout="mclosetime()">onmouseover="mcancelclosetime()"<a href="#"> 國(guó)內(nèi)美食 </a><a href="#">進(jìn)口美食 </a><a href="#">酒水專區(qū) </a> </div></li><li><a href="#" onmouseover="mopen(

19、9;m5')" onmouseout="mclosetime()">母嬰</a><div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">嬰幼兒專區(qū) </a><a href="#">孕媽專區(qū) </a><a href="#">玩具/ 文具/教育

20、</a></div></li><li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">關(guān)于我們 </a></li><li><ahref="list.htm" onmouseover="mopen('m7')"onmouseout="mclosetime()">

21、 在售分類 </a></li></ul><div id="main"><p><hr size="1"> 品牌熱賣 <hr size="1"><br><div id="KinSlideshow" style=""><a href="/" target="_blank"><img src="images/pic1.jpg&qu

22、ot; ></a> <a href="/" target="_blank"><img src="images/pic2.jpg" ></a></div></p><p><hr size="1"> 限量搶購(gòu) <hr size="1"><br><img src="images/ 限量搶購(gòu) .jpg" border="0">&l

23、t;/p></div><div> <div id="content">輕奢電商輕奢新主義，只為懂你的人 <br><ul><li>輕奢國(guó)際尖貨，跟蹤國(guó)際一流品牌，提供超一流服務(wù)</li><li>輕奢母嬰專享，提供超豪華護(hù)理套餐，限時(shí)一折搶購(gòu)</li><li>輕奢化妝品專柜，超乎實(shí)體店的感官體驗(yàn)，限時(shí)特賣</li><li>輕奢零食主會(huì)場(chǎng)，進(jìn)口零食傾情享受，酒水七折特賣</li></ul></div&g

24、t;<div id="content1"><img src="images/ 登錄 .jpg" border="0"><div id="content2"><br><br><form method="post" action="" name="myform">用戶： <input type="text" name="username" si

25、ze="20" onblur="a(this)"><span id="a" style="color:red;font-size:12px;"></span><br>密碼： <input type="password" name="pword" size="20" onblur="p(this)"><span id="p" style="color

26、:red;font-size:12px;"></span></br> <p><input type="submit" value=" 登錄 ">id="add"<input name="" type="button" class="userpsubmit" value=" 注冊(cè)onclick="check_all(document.myform)"> </p>

27、</form> </div></div><div id="bottom" style="text-align:center"><hr width="80%"></div></div></body></html>2、列表頁(yè) <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

28、t; <title> 在售分類 </title><style type="text/css">輕奢背bodycolor:#006e89;font-family: 微 軟 雅 黑 ;background-image: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:130

29、px;font: bold 20px arial;color:#FFF#sddm1background-color:#006e89#topfont-family:隸書 ;font-size:45px;text-align:center#contentfont-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-siz

30、e:18px;text-decoration:underline;color:#006e89 a:hoverfont-size:18px;text-decoration:underline;color:#000#bottommagin:auto auto 0 auto;text-align:center;font-size:18px;clear:left</style></head>輕奢品牌 .jpg" border="0"><body><div><p align="center" i

31、d="top"><img src="images/輕奢電商 </p><p align="right"><img src="images/ 正品保障 .jpg" border="0"> 正品保障 <img src="images/7 天退換 .jpg" border="0">7 天退換 </p></div><ul id="sddm"><li>

32、 首頁(yè)<li> 美妝<li> 服飾<li> 零食<li> 母嬰<li> 關(guān)于我們 <li id="sddm1"> 在售 分類 </ul><div id="content"><div align="center"><hr width="80%"> 商 品 分 類 <hr width="80%"></div><ul id="first&quo

33、t;><li> 美妝<div><ul id="second"><li><img src="images/女士護(hù)膚 .jpg" border="0"> 女士護(hù)膚： <ahref="content.htm"> 潔面 </a>|<a href="#"> 護(hù)膚套餐 </a>|<a href="#"> 爽膚 </a>|<a href="

34、;#"> 去角質(zhì) </a>|<a href="#">T 區(qū)護(hù)理 </a>|<a href="#"> 面膜 </a>|<a href="#"> 身體護(hù)理 </a>|<a href="#"> 彩妝 </a>|<a href="#"> 隔離防曬 </a>|<a href="#"> 精華 </a>|<a hr

35、ef="#"> 眼膜 </a>|<a href="#"> 香水</a>|<a href="#"> 啫喱</a>|<a href="#"> 噴霧</a>|<a href="#"> 隔離防曬 </a><li><img src="images/ 男士護(hù)膚 .jpg" border="0"> 男士護(hù)膚： <a href=&

36、quot;#"> 潔面 </a>|<a href="#"> 剃 須 </a>|<a href="#"> 面 膜 </a>|<a href="#"> 面 部 護(hù) 理 </a>|<a href="#"> 護(hù)膚 套餐</a>|<a href="#"> 須后 水</a>|<a href="#"> 眼部 護(hù)理 </a>

37、;|<a href="#"> 身體護(hù)理 </a>|<a href="#"> 祛痘 </a></ul></div><li> 服飾<div><ul id="second"><li><img src="images/ 精品女裝 .jpg" border="0"> 精品女裝:<a href="#"> 針 織 衫 </a>|<

38、a href="#">polo 衫 </a>|<a href="#"> 連 衣 裙 </a>|<a href="#"> 牛仔褲 </a>|<a href="#"> 風(fēng)衣</a>|<a href="#"> 短裙</a>|<a href="#"> 松糕 鞋 </a>|<a href="#"> 棉 衣 </a

39、>|<a href="#"> 涼 鞋 </a>|<a href="#"> 打 底 衫 </a>|<a href="#"> 夾克 </a><li><img src="images/ 潮流男裝 .jpg" border="0"> 潮流男裝:<a href="#">T 恤</a>|<a href="#"> 背心</a&g

40、t;|<a href="#"> 襯衫</a>|<a href="#"> 西 裝 </a>|<a href="#"> 皮 鞋 </a>|<a href="#"> 泳 褲 </a>|<a href="#"> 帽 子 </a>|<a href="#"> 睡衣 </a>|<a href="#"> 袖扣 <

41、/a>|<a href="#"> 領(lǐng)帶 </a>|<a href="#"> 休閑褲 </a></ul></div><li> 零食<div><ul id="second"><li><img src="images/國(guó)內(nèi)美食 .jpg" border="0"> 國(guó)內(nèi)美食:<a href="#"> 堅(jiān)果</a>|<a

42、 href="#"> 肉脯</a>|<a href="#"> 果脯</a>|<a href="#"> 餅 干</a>|<a href="#"> 特產(chǎn)</a>|<a href="#"> 炒貨</a>|<a href="#"> 茗茶</a><li><img src="images/ 進(jìn)口美食 .jpg" b

43、order="0"> 進(jìn)口美食:<a href="#"> 巧克力 </a>|<a href="#"> 糖果 </a>|<a href="#"> 糕點(diǎn) </a>|<a href="#"> 咖啡</a>|<a href="#"> 健康沖飲</a>|<a href="#"> 咖啡伴侶 </a><li>&

44、lt;img src="images/ 酒水專區(qū) .jpg" border="0"> 酒水專區(qū):<a href="#"> 花茶</a>|<a href="#"> 洋酒</a>|<a href="#"> 啤酒</a>|<a href="#"> 可 口可樂 </a>|<a href="#"> 牛奶 </a>|<a href=&qu

45、ot;#"> 葡萄酒 </a>|<a href="#"> 茶葉 </a>|<a href="#"> 雞尾酒</a>|<a href="#"> 果汁</a></ul></div><li> 母嬰<div id="m3"><ul id="second"><li><img src="images/嬰幼兒專區(qū) .jpg&

46、quot; border="0"> 嬰幼兒專區(qū):<a href="#"> 奶粉</a>|<a href="#"> 手推車 </a>|<a href="#"> 學(xué)步鞋 </a>|<a href="#"> 紙尿褲 </a>|<a href="#"> 抱毯 </a><li><img src="images/ 孕媽專區(qū) .jpg&q

47、uot; border="0"> 孕媽專區(qū):<a href="#"> 防輻射系列 </a>|<a href="#"> 媽咪包 </a>|<a href="#"> 家居服 </a>|<ahref="#"> 營(yíng)養(yǎng)品 </a><li><img src="images/ 玩具.jpg" border="0"> 玩具/ 文具/ 教育:<

48、a href="#"> 公仔</a>|<a href="#"> 樂器</a>|<a href="#"> 棋牌</a>|<a href="#"> 積 木 </a>|<a href="#"> 書 包 </a>|<a href="#"> 筆 類 </a>|<a href="#"> 連 環(huán) 畫 </a>|

49、<a href="#"> 練習(xí)冊(cè) </a>|<a href="#"> 樂高 </a></ul></div></ul></div><div id="bottom" style="text-align:center"><hr width="80%"></div></body></html>3、內(nèi)容頁(yè)<head><meta htt

50、p-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 潔面 </title><style type="text/css">bodycolor:#006e89;font-family: 微軟雅黑 ;text-align:center;background-image:url（images/ 輕奢背景 .jpg）;#topfont-family: 隸書 ;font-size:45px;text-align:cente

51、r#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#sddm1background-color:#006e89;#contentwidth:100%#content1width:25%;float:left#content2width:25%;float:lef

52、t#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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝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)論