《網頁設計與制作》課程設計報告()_第1頁
《網頁設計與制作》課程設計報告()_第2頁
《網頁設計與制作》課程設計報告()_第3頁
《網頁設計與制作》課程設計報告()_第4頁
《網頁設計與制作》課程設計報告()_第5頁
免費預覽已結束，剩余11頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、網頁設計與制作課程設計實驗報告院系名稱：管理學院 專業班級: 電子商務XXX學生姓名： XXX 學 號： XXXXXXX網貝界向網站欄目網站功能（JS程序）合計50分10分40分100分2016年06月一、實驗目的本實驗屬于設計性實驗，在學習完網頁設計與制作課程的基礎上，通過實驗學習網頁制作的步驟與方法，使用 CSS+DIV制作一個簡單的網站，能夠對網站有一個 清晰的認知和規劃。進一步熟悉和領悟HTM皚言、CSS羊式表和JAVASCRIP語言的語 法結構。將理論與實踐相結合，加深對本課程的理解。二、實驗步驟1、進行網站整體規劃，包括網站主題、欄目以及界面的構思，確定網站結構，形 成初步設計思路

2、。2、設計網站的主頁以及欄目，利用 CSS+DIV作網站主頁和彈出式導航條菜單， 利用JavaScript制作動態效果，并用firework軟件對主頁進行切圖。3、設計并利用CSS+DI對作歹1表頁，并用firework軟件對列表頁進行切圖。4、設計并利用CSS+DI對作內容頁，并用firework軟件對內容頁進行切圖。5、進行調試和修改已形成最終實驗結果。三、網站設計思路1、參照“唯品會” “折800”等電商網站，確定網站主題為“輕奢電商”。2、設計網站主頁,主頁設置首頁、美妝、服飾、零食、母嬰、關于我們、在售分類等七個一級欄目。其中美妝、服飾、零食、母嬰四個欄目含有二級欄目。3、首頁設置品

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

4、harset=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:。auto#nav ul lipadding:。5px;color:#CCC;margin:10Px

5、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:。#outermost #titlemargin: 0 auto;width: 1080px#outermost #

6、sddmmargin:0 auto;padding: 0;width: 1080px;z-index: 30;background-color:#030303;height:40Px#sddm limargin:50;padding:。；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: #FFF;text-decoration: none#sddm

7、 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-space: nowrap;text-align: left;text-decoration: none

8、;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:left;#content2magin:auto 0 auto auto;font-size:18

9、px;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", intervalTime:8, mouseEvent:"mouseover", titleF

10、ont: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.getElementByld(id);function mclose()function mclosetime() clos

11、etimer = window.setTimeout(mclose,timeout); function mcancelclosetime() if(closetimer) window.clearTimeout(closetimer);closetimer = null;document.onclick = mclose;/ -></script><script type="text/javascript">function a(obj)var zhi=document.getElementById('a');zhi.inne

12、rHTML*zhi.innerHTML='賬號不能為空;return false;exit;elsezhi.innerHTML=' V'return true;alert("aaa");<!-驗證密碼->function p(obj)var zhi=document.getElementById('p');zhi.innerHTML='密碼不能為空'return false;exit;else zhi.innerHTML=' V'return true;</script><

13、/head><body><div id="outermost"><div><p align="center" id="top"><img src="images/ 輕奢品牌.jpg" border="0"> 輕 奢電商</p><p align="right"><img src="images/ 正品保障.jpg" border="0">

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

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

16、><li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()”> 月艮飾</a><divid="m3"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href="#"> 精品女裝 </a><a href="#&q

17、uot;> 潮流男裝 </a></div></li><li><a href="#" onmouseover="mopen(,m4')" onmouseout="mclosetime()"> 零食v/a><divid="m4"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href="#"

18、>國內美食</a><a href="#">進 口 美食</a><a href="#">灑水專區</a></div></li><li><a href="#" onmouseover="mopen(,m5')" onmouseout="mclosetime()"> 母嬰v/a><div id="m5" onmouseover="mcanc

19、elclosetime()" onmouseout="mclosetime()"><a href="#">嬰幼兒專區</a><a href="#">孕媽專區 </a><a href="#">玩具/文具/教育</a></div></li><li><a href="#" onmouseover="mopen(,m6')" onmouseout=

20、"mclosetime()"> 關于我們</a></li><li><ahref="list.htm"onmouseover="mopen(,m7')"onmouseout="mclosetime()"> 在售分類 </a></li></ul><div id="main"><p><hr size="1"> 品牌熱賣 <hr size=&qu

21、ot;1 "><br><div id="KinSlideshow" style=""><a href='7" target="_blank"><img src="images/pic1 jpg" ></a><a href='7" target="_blank"><img src="images/pic2.jpg" ></a><

22、;/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>輕奢國際尖貨，跟蹤國際一流品牌，提供超一流

23、服務</li>< li>輕奢母嬰專享，提供超豪華護理套餐，限時一折搶購</li>< li>輕奢化妝品專柜，超乎實體店的感官體驗，限時特賣</li>< li>輕奢零食主會場，進口零食傾情享受，酒水七折特賣</li></ul></div><div id="content1"><img src="images/ 登錄.jpg" border="0"><div id="content2"

24、><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;"></span>

25、;<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=" 登錄"><input name

26、="" type="button" class="userpsubmit" value="注冊"id="add" onclick="check_all(document.myform)"> </p></form> </div></div><div id="bottom" style="text-align:center"><hr width="80%”&g

27、t;</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-image:url（images/ 輕奢背景.jpg）#

28、sddmpadding:。；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#contentfont-size:24px;padding:10Px au

29、to auto 20px;magin:auto auto auto 30px#content ul firstfont-size:24px;margin-left:50px#content ul secondfont-size:18px;margin-left:60pxafont-size:18px;text-decoration:underline;color:#006e89a:hoverfont-size:18px;text-decoration:underline;color:#000#bottommagin:auto auto 0 auto;text-align:center;font

30、-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"&

31、gt;正品保障<img src="images/7 天退換 jpg" border="0">7 天退換 </p></div><ul id="sddm"><li>首頁v|>美妝v|>服飾v|>零食v|>母嬰v|>關于我們<li id="sddm1"> 在售分類</ul><div id="content"><div align="center">

32、;<hr width="80%"> 商品分類 <hr width="80%"></div><ul id="first"><li> 美妝<div><ul id="second"><li><img src="images/女士護膚 jpg" border="0"> 女士護膚：<a href="content.htm"> 潔面 </a&g

33、t;|<a href="#"> 護膚套餐 </a>|<a href="#"> 爽膚 </a>|<a href="#"> 去角質 v/a>|va href="#">T 區護理 v/a>|va href="#"> 面膜 v/a>|va href="#"> 身體護理 v/a>|va href="#"> 彩妝 v/a>|va href="#&

34、quot;> 隔離防曬 v/a>|va href="#"> 精華 </a>|<a href="#"> 眼膜 </a>|<a href="#"> 香水 </a>|<a href="#"> 喑 ®</a>|<a href="#"> 噴霧 v/a>|va href="#"> 隔離防曬 </a><li><img src=

35、"images/ 男士護膚 jpg" border="0"> 男士護膚：<a href="#"> 潔面 </a>|<a href="#"> 剃須 v/a>|va href="#"> 面膜 </a>|<a href="#"> 面部護理 </a>|<a href="#"> 護膚套餐 </a>|<a href="#">

36、 須后水 </a>|<a href="#"> 眼部護理 </a>|<a href="#"> 身體護理 v/a>|va hre仁"#"> 祛痘 v/a></ul></div><li>服飾<div><ul id="second"><li><img src="images/ 精品女裝 jpg" border="0"> 精品女裝:<

37、;a href="#"> 針織衫 </a>|<a href="#">polo 衫 v/a>|va href="#”> 連衣裙 v/a>|va href="#"> 牛仔褲 v/a>|va hre仁"#">風衣 v/a>|va hre仁"#">短裙 v/a>|va hre仁"#">松糕鞋 </a>|<a href="#"> 棉衣 v/a&

38、gt;|va hre仁"#">涼鞋 v/a>|va href="#"> 打底衫</a>|<a href="#"> 夾克 v/a><li><img src="images/ 潮流男裝 jpg" border="0">潮流男裝:<a href="#">T恤v/a>|va href="#"> 背心 v/a>|va href="#"> 襯

39、衫 v/a>|va href="#">西裝 </a>|<a href="#"> 皮鞋 </a>|<a href="#"> 泳褲 </a>|<a href="#"> 帽子 </a>|<a href="#"> 睡衣 </a>|<a href="#"> 袖扣 </a>|<a href="#"> 領帶 <

40、/a>|<a href="#"> 休 閑褲v/a></ul></div><li>零食<div><ul id="second"><li><img src="images/ 國內美食 jpg" border="0"> 國內美食:<a href="#"> 堅果v/a>|va href="#"> 肉脯 v/a>|va href="#&qu

41、ot;> 果脯 v/a>|va href="#"> 餅干v/a>|va href="#"> 特產 v/a>|va href="#"> 炒貨 v/a>|va href="#"> 茗茶v/a><li><img src="images/ 進 口 美食 jpg" border="0"> 進 口 美食:<a href="#"> 巧克力 </a>|<a h

42、ref="#"> 糖 果 </a>|<a href="#"> 糕 點 </a>|<a href="#"> 咖啡 </a>|<a href="#"> 健康沖飲 </a>|<a href="#"> 咖啡伴侶 </a><li><img src="images/灑水專區.jpg" border="0">灑水專區:<a hr

43、ef="#"> 花茶v/a>|va href="#"> 洋酒 v/a>|va href="#"> 啤酒 v/a>|va href="#"> 可 口可樂 </a>|<a href="#"> 牛奶 </a>|<a href="#"> 葡萄酒 </a>|<a href="#"> 茶葉 </a>|<a href="#&quo

44、t;> 雞尾酒 </a>|<a href="#"> 果汁 v/a></ul></div><li>母嬰<div id="m3"><ul id="second"><li><img src="images/ 嬰幼兒專區 jpg" border="0"> 嬰幼兒專 區:<a href="#"> 奶粉 </a>|<a href="

45、;#"> 手推車 </a>|<a href="#"> 學步鞋 </a>|<a href="#"> 紙尿褲 v/a>|va hre仁"#">抱毯 v/a><li><img src="images/孕媽專區 jpg" border="0"> 孕媽專區:<a href="#"> 防輻射系歹fj v/a>|va href="#"> 媽咪

46、包 v/a>|va href="#"> 家居服 v/a>|va href="#"> 營養品 </a><li><img src="images/ 玩具.jpg” border二玩具/ 文具/教育:<a href="#"> 公仔v/a>|va href="#"> 樂器 v/a>|va href="#"> SW</a>|<a href="#"> 積木v/a&g

47、t;|va href="#"> 書包 v/a>|va href="#"> 筆類 v/a>|va href="#"> 連環畫 v/a>|va href="#"> 練習冊 v/a>|va hre仁"#"> 樂高 v/a> </u I > </d i v> </u I > </d i v><div id="bottom" style="text-align:c

48、enter"><hr width="80%”></div> </body></html>3、內容頁<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8” /><title> 潔面 </title><style type="text/css”>bodycolor:#006e89;font-family:微軟雅黑；text-align:c

49、enter;background-image:url（images/輕奢背景 .jpg）;#topfont-family:隸書;font-size:45px;text-align:center#sddmmargin:。;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)#sddm1back

50、ground-color:#006e89;)#contentwidth:100%#content1 width :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"> 正

溫馨提示

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

評論

0/150

提交評論