1、計(jì)算機(jī)應(yīng)用訓(xùn)練實(shí)習(xí)報(bào)告題目： 仿1號(hào)店官網(wǎng) 院系： 數(shù)理學(xué)院應(yīng)用物理系 專業(yè)年級(jí)： 應(yīng)用物理學(xué)專業(yè)2015級(jí) 學(xué)生姓名：姬 振 宇 學(xué)號(hào)： 201519162016年7月6日一、 網(wǎng)站設(shè)計(jì)的主體思想 首先該網(wǎng)站建設(shè)的需求呢，肯定是贏得客戶的喜歡，迎合大多數(shù)賣家對(duì)網(wǎng)站的欣賞，使得他們?cè)跒g覽的時(shí)候有一種愉快的心情，從而更有利于商品的銷售，為公司得到更多的盈利。最終的目的就是吸引更多的顧客，從而創(chuàng)造更多的營(yíng)業(yè)額設(shè)計(jì)風(fēng)格: 1、整體頁(yè)面設(shè)計(jì)側(cè)重于展示企業(yè)形象和項(xiàng)目展示的網(wǎng)站結(jié)構(gòu)，理順各種信息資源，使網(wǎng)站頻道內(nèi)容豐富、分類合理、層次分明、結(jié)構(gòu)緊湊，且使信息展示更為靈活方便。2、設(shè)計(jì)合理化的操作流程，導(dǎo)航

2、清晰，顏色和結(jié)構(gòu)符合企業(yè)VI視覺(jué)形象合理，突出企業(yè)文化的同時(shí)，加強(qiáng)視覺(jué)藝術(shù)感受。3、綜合主流網(wǎng)站成功經(jīng)驗(yàn)，將更新快的、重要的信息放置在網(wǎng)站首頁(yè)，即“一步提優(yōu)”，使用戶可以查看網(wǎng)站的最優(yōu)內(nèi)容、最佳信息（如熱銷產(chǎn)品等）。4、追求用戶使用便捷，考慮不同互聯(lián)網(wǎng)接入條件，頁(yè)面力求簡(jiǎn)潔，三次鏈接獲得服務(wù)，另外還將提供多種用戶輔助功能。5、采用圖片、文字等多種展示形式，豐富多彩的展示企業(yè)服務(wù)的重要內(nèi)容、重要信息。6在網(wǎng)站架構(gòu)方面，我們從網(wǎng)站的性質(zhì)、功能和擴(kuò)展性出發(fā)，合理安排結(jié)構(gòu)，層次清晰，使用方便，整體感強(qiáng)。充分考慮網(wǎng)站頁(yè)面結(jié)構(gòu)的擴(kuò)展性，使網(wǎng)站的增加和刪減不影響頁(yè)面的風(fēng)格。網(wǎng)站的各頻道板塊布置有張有弛，延續(xù)

3、并貫穿了網(wǎng)站的風(fēng)格，形成協(xié)調(diào)、統(tǒng)一的網(wǎng)站系統(tǒng)。 二、 網(wǎng)站主要內(nèi)容介紹圖1 網(wǎng)站內(nèi)容結(jié)構(gòu)圖我們的網(wǎng)頁(yè)分為十個(gè)部分，它們分別是：官方首頁(yè)、聯(lián)系客服頁(yè)面、購(gòu)物車頁(yè)面、注冊(cè)頁(yè)面、登錄頁(yè)面、會(huì)員專享頁(yè)面 。有我們小組十位成員分工完成。我負(fù)責(zé)的是購(gòu)物車頁(yè)面和用戶體驗(yàn)提升問(wèn)卷頁(yè)面。“購(gòu)物車”是每一個(gè)網(wǎng)絡(luò)購(gòu)物網(wǎng)站所必需的頁(yè)面，客戶可以將自己心儀但卻尚未決定購(gòu)買的商品放入購(gòu)物車?yán)铮@樣客戶就可以有充分的時(shí)間考慮是否購(gòu)買該商品且可以快速找到該商品，而且購(gòu)物車還具有一鍵支付功能。該網(wǎng)頁(yè)主要內(nèi)容為：標(biāo)題部分（返回、導(dǎo)航、登錄、注冊(cè)、我的訂單等11個(gè)購(gòu)物車常用鏈接），幫助客戶快速返回或?yàn)g覽與購(gòu)物車相關(guān)聯(lián)的網(wǎng)頁(yè)。支付步

4、驟顯示，幫助顧客了解支付所需要的所有步驟。猜你喜歡商品介紹頁(yè)面，為顧客推薦正在進(jìn)行活動(dòng)的減價(jià)商品。腳標(biāo)，為顧客提供快捷的網(wǎng)站鏈接以及各種證書(shū)。“用戶體驗(yàn)提升問(wèn)卷頁(yè)面”是為了優(yōu)化用戶購(gòu)物體驗(yàn)而開(kāi)設(shè)的頁(yè)面，對(duì)于官網(wǎng)的優(yōu)化有著極大的促進(jìn)作用。主要內(nèi)容為：?jiǎn)柧碚f(shuō)明，讓用戶了解用戶體驗(yàn)提升問(wèn)卷的目的，以及獎(jiǎng)勵(lì)、承諾和聯(lián)系方式。正文（問(wèn)卷）部分，羅列出需要用戶回答的一系列問(wèn)題。腳標(biāo)，為顧客提供快捷的網(wǎng)站鏈接以及各種證書(shū)。三、 頁(yè)面介紹1.“購(gòu)物車”頁(yè)面介紹 “購(gòu)物車”頁(yè)面主要分為header，article，footer三大部分，每一個(gè)大的部分都定義了一個(gè)div。每個(gè)div里面都含有若干個(gè)小div。并通過(guò)

5、css界面的調(diào)整來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)效果和版面的制作。由于網(wǎng)站頁(yè)面大小受限的原因，我分為若干個(gè)小配圖介紹。（1）、header：圖2 header（圖上方）頁(yè)面（含JS效果）圖3 header（圖上方）頁(yè)面（含JS效果）該網(wǎng)頁(yè)的“header”適用于存放各種標(biāo)題鏈接的，因此因存放文字和鏈接為主。其中的幾個(gè)大標(biāo)題為：返回易購(gòu)首頁(yè)、網(wǎng)站導(dǎo)航、商家入駐、登錄、注冊(cè)、我的訂單、我的易購(gòu)、手機(jī)蘇寧、易付寶、政企采購(gòu)、客戶服務(wù)共11段文字。為了達(dá)到排版美觀的要求和鼠標(biāo)放上去后改變顏色的效果，我放置了一個(gè)總div“header”，在css界面里調(diào)整好大小和背景作為整個(gè)的范圍。在“header”div內(nèi)部放置一個(gè)div

6、“header_middle”，同樣在css界面內(nèi)調(diào)整好大小和背景。在“header_middle”里面輸入我所需要的各個(gè)標(biāo)題。為了完美的放置文字，我用了無(wú)序列表來(lái)做這幾段文字。先建立一個(gè)無(wú)序列表，定義class為list，在css界面中調(diào)整好列表中文字的字體，字號(hào)、字色等細(xì)節(jié)，這樣一個(gè)大的無(wú)序列表框架就完成了。然后，在無(wú)序列表這個(gè)div中建立li，并用a標(biāo)簽和href作出超鏈接的樣式。然后通過(guò)輸入 代碼來(lái)進(jìn)行文字間距的控制，以此美化頁(yè)面。并在css界面中對(duì)整個(gè)無(wú)序列表用hover作出偽類效果，到此為止，header的大體就完成了。由于在部分大標(biāo)題下有一些小標(biāo)題，所以我運(yùn)用用了JS來(lái)制

7、作出下拉框的動(dòng)態(tài)樣式及進(jìn)度條樣式。在HTML中定義一個(gè)class為down，并在css界面中調(diào)整好細(xì)節(jié)，同樣用hover做成偽類。這樣，當(dāng)鼠標(biāo)停留在大標(biāo)題上時(shí)，就會(huì)出現(xiàn)一個(gè)下拉框，里面包含著小標(biāo)題。最后通過(guò)img標(biāo)簽引入兩張圖片便完成了。（2）、article：圖4 article頁(yè)面（一）圖5 article頁(yè)面（二）該網(wǎng)頁(yè)的“article”主要是整個(gè)網(wǎng)頁(yè)的主體，里面包含的是整個(gè)網(wǎng)頁(yè)的主要內(nèi)容。首先建立一個(gè)div為“article_top”，在該div下使用img標(biāo)簽，將事先預(yù)存的圖片導(dǎo)入到網(wǎng)頁(yè)中，并在css界面調(diào)整好參數(shù)，通過(guò)調(diào)整margin的值來(lái)將圖片調(diào)整到合適的位置。之后新建一個(gè)di

8、v并用font標(biāo)簽做好文字，同樣在css界面調(diào)整好字體、字色等參數(shù)，并調(diào)整margin的值將文字移動(dòng)到合適位置。之后再建一個(gè)新的大div“article”作為框架。在其下建立一個(gè)新div“article_middle”用于存放內(nèi)容。并在該div下建立若干小div用于存放文字和圖片，并在css界面中調(diào)整參數(shù)并用border制作一個(gè)邊框，以及使用hover制作偽類，將圖片與文字放到合適的位置，“article”便完成了。（3）、footer：圖6 footer頁(yè)面（一）“footer”主要是用來(lái)存放腳標(biāo)及腳標(biāo)各種文字鏈接的。首先是新建一個(gè)大div為“footer”作為大的框架，在css界面調(diào)整好參

9、數(shù)。然后在“footer”下建立一個(gè)小div為“footeer_middle”用于存放內(nèi)容。使用ul標(biāo)簽制作一個(gè)無(wú)序列表，同樣的，在css界面調(diào)整好參數(shù)，并調(diào)整margin值將文字調(diào)整到合適位置。之后使用img標(biāo)簽引入圖片，同樣在css界面調(diào)整參數(shù)并移動(dòng)到合適位置。這樣腳標(biāo)便完成了。之后使用script標(biāo)簽引入JS動(dòng)態(tài)效果，使得網(wǎng)頁(yè)更加有趣。至此，“footer”便完成了。2.“用戶體驗(yàn)提升問(wèn)卷”頁(yè)面介紹（1）、header：圖7 header頁(yè)面（含JS）該網(wǎng)頁(yè)的“header”頁(yè)面主要以存放圖片和少量文字為主。首先建立一個(gè)大div“header”為大框架，在其中建立一個(gè)“header_mi

10、ddle”的小div用于存放內(nèi)容。用img標(biāo)簽引入圖片，在css界面調(diào)整參數(shù)和margin值將圖片移到合適位置。之后用a標(biāo)簽和pre標(biāo)簽制作文字，并在css界面中用hover制作成偽類并移動(dòng)到合適位置。最后引入JS文件，制作動(dòng)態(tài)效果，便完成了整個(gè)“header”的制作。（2）、article：圖8 article頁(yè)面（一）圖9 articler頁(yè)面（二）圖9 articler頁(yè)面（三）“article”是整個(gè)網(wǎng)頁(yè)的主體，制作比較簡(jiǎn)單，只是其中包含了大量的文字。首先建立一個(gè)大div“article”作為大框架，在css界面調(diào)整好參數(shù)。之后在“article”里面加上若干個(gè)小div在每個(gè)div里面

11、輸入一個(gè)問(wèn)題，文字由span標(biāo)簽和pre標(biāo)簽制作，同樣在css界面調(diào)整好字號(hào)、字色等，并調(diào)整margin值將文字移動(dòng)到合適位置。并在該小div下用input標(biāo)簽制作勾選框，并調(diào)整name做出單選框或者多選框。因?yàn)榇恕癮rticle”中含有大量的文字，所以我用了 來(lái)調(diào)整文字與文字之間的距離以及段落與段落之間的距離。然后用input標(biāo)簽制作輸入框，并在一個(gè)小div下制作提交按鈕。這樣整個(gè)“article”就完成了。圖10 footer頁(yè)面(下方)該“footer”存放的內(nèi)容各種腳標(biāo)。制作過(guò)程也與前一個(gè)網(wǎng)頁(yè)相同。也是先建立一個(gè)大div作為大范圍，在該div下建立一個(gè)小div“footer_m

12、iddle”用于存放文字和圖片。然后在“footer_middle”下使ul標(biāo)簽制作無(wú)序列表，并在css界面調(diào)整字號(hào)、字色等參數(shù)，并調(diào)整margin值來(lái)調(diào)節(jié)文字的位置，將其放到合適的位置便OK了，至此，“footer”便完成了。四、體會(huì)與收獲時(shí)間總是過(guò)得那么快，一轉(zhuǎn)眼，大作業(yè)馬上要結(jié)束了。在這幾天中，我受益匪淺。大作業(yè)第一天，老師便開(kāi)始向我們介紹HTML的用法和其他內(nèi)容，那也是我第一次接觸到HTML。從第一天開(kāi)始，老師就在詳細(xì)的為我們講解HTML的做法，各種代碼，各種嵌套。說(shuō)實(shí)話，第一天聽(tīng)課真的很吃力，因?yàn)槭堑谝淮谓佑|到HTML所以是0基礎(chǔ)開(kāi)始學(xué)習(xí)。不過(guò)，當(dāng)?shù)搅说诙臁⒌谌斓臅r(shí)候，我發(fā)現(xiàn)我聽(tīng)

13、課已經(jīng)沒(méi)有第一節(jié)課那樣吃力了，已經(jīng)能夠運(yùn)用簡(jiǎn)單的HTML代碼編寫網(wǎng)頁(yè)了。當(dāng)課聽(tīng)得多了之后，其實(shí)發(fā)現(xiàn)HTML也沒(méi)想象中的那么難。后來(lái)我們又學(xué)習(xí)了JS動(dòng)態(tài)效果，使我們的網(wǎng)頁(yè)變得更加有趣。在網(wǎng)頁(yè)制作過(guò)程中，剛開(kāi)始遇到的問(wèn)題是很大的，因?yàn)榈谝淮谓佑|，不熟悉代碼，所以做的特別慢也出現(xiàn)了很多錯(cuò)誤。比如在剛開(kāi)始的時(shí)候，邏輯比價(jià)混亂，導(dǎo)致多處嵌套錯(cuò)誤，是的網(wǎng)頁(yè)不得不刪掉重做。不過(guò)這個(gè)問(wèn)題在熟悉結(jié)構(gòu)邏輯后很快便解決了。在網(wǎng)頁(yè)制作過(guò)程中，也會(huì)經(jīng)常出現(xiàn)我想要移動(dòng)的圖片和我不想移動(dòng)的圖片一起動(dòng)的情況，這個(gè)時(shí)候我會(huì)重新理一遍我的邏輯，找到錯(cuò)誤的地方并改正它。此外，在制作過(guò)程中，偶爾也會(huì)出現(xiàn)亂碼的問(wèn)題，后來(lái)詢問(wèn)過(guò)老師后，也完美解決了這個(gè)問(wèn)題。其實(shí)在整個(gè)制作過(guò)程中，出現(xiàn)的錯(cuò)誤雖然不少，但是都不是什么大錯(cuò)誤，只要仔細(xì)檢查，便能改正這些錯(cuò)誤。通過(guò)這幾天的大作業(yè)網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)，我發(fā)現(xiàn)了HTML的重要作用。網(wǎng)頁(yè)是