網(wǎng)頁設(shè)計與制作課程設(shè)計報告

《網(wǎng)頁設(shè)計與制作課程設(shè)計》實驗報告院系名稱：管理學(xué)院專業(yè)班級:電子商務(wù)XXX學(xué)生姓名：XXX學(xué)號：XXXXXXX網(wǎng)頁界面網(wǎng)站欄目網(wǎng)站功能（JS程序）合計50分10分40分100分2019年06月一、實驗?zāi)康谋緦嶒瀸儆谠O(shè)計性實驗，在學(xué)習(xí)完《網(wǎng)頁設(shè)計與制作》課程的基礎(chǔ)上，通過實驗學(xué)習(xí)網(wǎng)頁制作的步驟與方法，使用CSS+DIV制作一個簡單的網(wǎng)站，能夠?qū)W(wǎng)站有一個清晰的認(rèn)知和規(guī)劃。進(jìn)一步熟悉和領(lǐng)悟HTML語言、CSS樣式表和JAVASCRIPT語言的語法結(jié)構(gòu)。將理論與實踐相結(jié)合，加深對本課程的理解。二、實驗步驟1、進(jìn)行網(wǎng)站整體規(guī)劃，包括網(wǎng)站主題、欄目以和界面的構(gòu)思，確定網(wǎng)站結(jié)構(gòu)，形成初步設(shè)計思路。2、設(shè)計網(wǎng)站的主頁以和欄目，利用CSS+DIV制作網(wǎng)站主頁和彈出式導(dǎo)航條菜單，利用JavaScript制作動態(tài)效果，并用firework軟件對主頁進(jìn)行第第#頁<ulid=〃sddm”>li>首頁<li>美妝<li>服飾<li>零食<li>母嬰<廿>關(guān)于我們<liid二〃sddm1〃>在售分類</ul>palign=〃left〃>您的位置>美妝>女士護(hù)膚>潔面<hrsize=〃1〃></p>div id二〃content〃 align二〃center〃><div id二〃content1〃><imgsrc二〃images/list1.png〃border=〃0〃><br>潔面膏<br>尺碼：100g<br>潔面膏徹底清除堆積在毛孔里的污垢和角質(zhì)細(xì)胞，用后清爽無比</div>divid二〃content2〃><imgsrc二〃images/list2.png〃border=〃0〃><br>草本青春潔面慕斯<br>規(guī)格：150mL<br>草本青春潔面慕斯150mL,蘊含有豐富的植物油和植物萃取，質(zhì)地溫和綿密，能夠溫和的清潔皮膚</div><divid二〃content3〃><imgsrc二〃images/list3.png〃border=〃0〃><br>玫瑰衡膚保濕潔面乳<br>尺碼：80g<br>玫瑰衡膚保濕潔面乳80g,蘊含豐富的玫瑰果油，可提升肌膚水分含量<br></div><divid="content4"><imgsrc="images/list4.png"border="0"><br>衡膚泡沫潔面液^丫>尺碼：200mL<br>衡膚泡沫潔面液，玫瑰、綠茶和藥蜀葵和多種植物活性成份可以輕柔的去肌膚表面污垢<br></div></div><divid="bottom"style="text-align:center"><hr><p>官方微信：4783952zxx<br>©版權(quán)所有  <aherf="mailto:"></a></p></body></html>五、實驗總結(jié)在本次網(wǎng)站頁面設(shè)計中，首先要整理清楚構(gòu)思，根據(jù)CSS樣式以和DIV塊化設(shè)計完成代碼設(shè)計。其中對于Javascript的應(yīng)用主要體現(xiàn)在三個方面：下拉菜單的動態(tài)效果，用戶登錄的表單驗證以和圖片輪播的動態(tài)效果。我在本次試驗中最大的困難是有關(guān)盒子的寬高、邊界以和懸浮等屬性，如何利用DIV模塊將內(nèi)容懸浮至水平排列，以和如何將用項目編號嵌套的新聞列表排列展示等。伴隨著這些問題的解決，我對CSS中的寬高屬性以和邊框?qū)傩杂辛艘粋€更為清晰的認(rèn)知。另外，由于網(wǎng)站的主題選定為“輕奢電商”，因此，圖片的展示要多于文字的展示，圖片的作用更為重要，在此過程中，可以用Fireworks軟件進(jìn)行切圖，這是網(wǎng)頁必不可少的元素。網(wǎng)頁設(shè)計是一個前端的操作，對界面的設(shè)計和把握主要要求我