計(jì)算機(jī)應(yīng)用訓(xùn)練報(bào)告

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、整體頁面設(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 視覺形象合理，突出企業(yè)文化的同時(shí)，加強(qiáng)視覺藝術(shù)感受。3、綜合主流網(wǎng)站成功經(jīng)驗(yàn)，將更新快的、重要的信息放置在網(wǎng)站首頁，即“一步提優(yōu)”，使用戶可以查看網(wǎng)站的最優(yōu)內(nèi)容、最佳信息（如熱銷產(chǎn)品等）。4、追求用戶使用便捷，考慮不同互聯(lián)網(wǎng)接入條件，頁面力求簡(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)站頁面結(jié)構(gòu)的擴(kuò)展性，使網(wǎng)站的增加和刪減不影響頁面的風(fēng)格。網(wǎng)站的各頻道板塊布置有張有弛，延續(xù)并貫穿了

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

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

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

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

7、eader的大體就完成了。由于在部分大標(biāo)題下有一些小標(biāo)題，所以我運(yùn)用用了 JS 來制作出下拉框的動(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)題。最后通過 img標(biāo)簽引入兩張圖片便完成了。（ 2）、article ：4圖 4 article頁面（一）圖 5 article頁面（二）該網(wǎng)頁的 “article”主要是整個(gè)網(wǎng)頁的主體，里面包含的是整個(gè)網(wǎng)頁的主要內(nèi)容。首先建立一個(gè)div 為“article_”top，在該 div下使用img標(biāo)簽，將事先預(yù)存的圖

8、片導(dǎo)入到網(wǎng)頁中， 并在 css界面調(diào)整好參數(shù)，通過調(diào)整margin的值來將圖片調(diào)整到合適的位置。之后新建一個(gè)div并用 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：5圖 6 footer

9、頁面（一）“ footer”主要是用來存放腳標(biāo)及腳標(biāo)各種文字鏈接的。首先是新建一個(gè)大div為“footer”作為大的框架，在css界面調(diào)整好參數(shù)。然后在“footer”下建立一個(gè)小div 為 “footeer_middle”用于存放內(nèi)容。使用ul 標(biāo)簽制作一個(gè)無序列表，同樣的，在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)頁更加有趣。至此，“ footer”便完成了。2.“用戶體驗(yàn)提升問卷 ”頁面介紹（ 1）、header：6圖 7 hea

10、der頁面（含 JS）該網(wǎng)頁的 “ header”頁面主要以存放圖片和少量文字為主。首先建立一個(gè)大div“ header”為大框架，在其中建立一個(gè)“header_middle”的小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頁面（一）7圖 9 articler頁面（二）圖 9 articler頁面（三）“ article”是整個(gè)網(wǎng)頁的

11、主體，制作比較簡(jiǎn)單，只是其中包含了大量的文字。首先建立一個(gè)大div“ article”作為大框架，在css界面調(diào)整好參數(shù)。之后在“article”里面加上若干個(gè)小div在每個(gè)div里面輸入一個(gè)問題，文字由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”中含有大量的文字，所以我用了&nbsp來調(diào)整文字與文字之間的距離以及段落與段落之間的距離。然后用input標(biāo)簽制作輸入框，并在一個(gè)小div下制作提交按鈕。這樣整個(gè) “ar

12、ticle”就完成了。8圖 10 footer頁面 (下方 )該“footer”存放的內(nèi)容各種腳標(biāo)。制作過程也與前一個(gè)網(wǎng)頁相同。也是先建立一個(gè)大div作為大范圍，在該div下建立一個(gè)小div“ footer_middle”用于存放文字和圖片。然后在 “ footer_middle”下使 ul標(biāo)簽制作無序列表，并在css界面調(diào)整字號(hào)、字色等參數(shù)，并調(diào)整margin值來調(diào)節(jié)文字的位置，將其放到合適的位置便OK了，至此，“footer”便完成了。四、體會(huì)與收獲時(shí)間總是過得那么快，一轉(zhuǎn)眼，大作業(yè)馬上要結(jié)束了。在這幾天中， 我受益匪淺。大作業(yè)第一天，老師便開始向我們介紹HTML的用法和其他內(nèi)容，那也是我

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