計算機應用訓練報告

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

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

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

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

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

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

7、eader的大體就完成了。由于在部分大標題下有一些小標題，所以我運用用了 JS 來制作出下拉框的動態(tài)樣式及進度條樣式。在HTML 中定義一個class為down，并在 css界面中調整好細節(jié)，同樣用hover做成偽類。這樣，當鼠標停留在大標題上時， 就會出現(xiàn)一個下拉框，里面包含著小標題。最后通過 img標簽引入兩張圖片便完成了。（ 2）、article ：4圖 4 article頁面（一）圖 5 article頁面（二）該網(wǎng)頁的 “article”主要是整個網(wǎng)頁的主體，里面包含的是整個網(wǎng)頁的主要內容。首先建立一個div 為“article_”top，在該 div下使用img標簽，將事先預存的圖

8、片導入到網(wǎng)頁中， 并在 css界面調整好參數(shù)，通過調整margin的值來將圖片調整到合適的位置。之后新建一個div并用 font標簽做好文字，同樣在css界面調整好字體、字色等參數(shù)，并調整margin的值將文字移動到合適位置。之后再建一個新的大div“ article”作為框架。在其下建立一個新 div“ article_middle”用于存放內容。 并在該 div下建立若干小 div用于存放文字和圖片， 并在 css界面中調整參數(shù)并用 border制作一個邊框，以及使用hover制作偽類，將圖片與文字放到合適的位置，“ article”便完成了。（ 3）、footer：5圖 6 footer

9、頁面（一）“ footer”主要是用來存放腳標及腳標各種文字鏈接的。首先是新建一個大div為“footer”作為大的框架，在css界面調整好參數(shù)。然后在“footer”下建立一個小div 為 “footeer_middle”用于存放內容。使用ul 標簽制作一個無序列表，同樣的，在css界面調整好參數(shù)，并調整margin值將文字調整到合適位置。之后使用img標簽引入圖片，同樣在css界面調整參數(shù)并移動到合適位置。這樣腳標便完成了。之后使用script標簽引入JS動態(tài)效果，使得網(wǎng)頁更加有趣。至此，“ footer”便完成了。2.“用戶體驗提升問卷 ”頁面介紹（ 1）、header：6圖 7 hea

10、der頁面（含 JS）該網(wǎng)頁的 “ header”頁面主要以存放圖片和少量文字為主。首先建立一個大div“ header”為大框架，在其中建立一個“header_middle”的小div 用于存放內容。用img標簽引入圖片，在css界面調整參數(shù)和margin值將圖片移到合適位置。之后用a標簽和pre標簽制作文字，并在css界面中用hover制作成偽類并移動到合適位置。最后引入JS文件，制作動態(tài)效果，便完成了整個“header”的制作。（ 2）、article ：圖 8 article頁面（一）7圖 9 articler頁面（二）圖 9 articler頁面（三）“ article”是整個網(wǎng)頁的

11、主體，制作比較簡單，只是其中包含了大量的文字。首先建立一個大div“ article”作為大框架，在css界面調整好參數(shù)。之后在“article”里面加上若干個小div在每個div里面輸入一個問題，文字由span標簽和 pre標簽制作，同樣在css界面調整好字號、字色等，并調整margin值將文字移動到合適位置。并在該小div下用 input標簽制作勾選框，并調整 name做出單選框或者多選框。因為此“article”中含有大量的文字，所以我用了&nbsp來調整文字與文字之間的距離以及段落與段落之間的距離。然后用input標簽制作輸入框，并在一個小div下制作提交按鈕。這樣整個 “ar

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

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