電子商務(wù)網(wǎng)站設(shè)計(jì)報(bào)告樣本

網(wǎng)站設(shè)計(jì)匯報(bào)一、設(shè)計(jì)目標(biāo)：經(jīng)過(guò)電子商務(wù)網(wǎng)站設(shè)計(jì)學(xué)習(xí)，學(xué)會(huì)用dreamweaver等軟件來(lái)對(duì)一個(gè)網(wǎng)站進(jìn)行系統(tǒng)設(shè)計(jì)，從理論知識(shí)掌握，轉(zhuǎn)向操作技能提升，進(jìn)而提升個(gè)人總體計(jì)算機(jī)網(wǎng)絡(luò)水平提升。二、理論知識(shí)準(zhǔn)備：1.為了滿足爺面制作目標(biāo)，應(yīng)該注意哪些問(wèn)題？A網(wǎng)頁(yè)結(jié)構(gòu)

網(wǎng)頁(yè)結(jié)構(gòu)要清楚，易于導(dǎo)航，思緒和脈絡(luò)要符合訪問(wèn)者想法?？刹扇》椒ㄓ校翰扇】蚣芙Y(jié)構(gòu)表現(xiàn)專題，索影和正文；網(wǎng)頁(yè)大小通常控制在50KB以內(nèi)；在網(wǎng)頁(yè)尾部放上聯(lián)絡(luò)方法，如E-MAIL，以方便訪問(wèn)者能建立聯(lián)絡(luò)，反饋必需信息

B頁(yè)面內(nèi)容通常情況下，網(wǎng)頁(yè)全部要以內(nèi)容為主，無(wú)須過(guò)分追求復(fù)雜表現(xiàn)形式，但必需寫好介紹，要有特色，避免太空，泛泛而談。頁(yè)面本身要簡(jiǎn)單，結(jié)構(gòu)復(fù)雜網(wǎng)頁(yè)不僅要花費(fèi)很多精力，而且因?yàn)槌B接復(fù)雜，讓瀏覽者閱讀時(shí)也感覺(jué)困難C文字在以內(nèi)容為主前提下，應(yīng)該盡可能把形式和內(nèi)容結(jié)合起來(lái)。既不要把頁(yè)面弄花哨，也不呀只講內(nèi)容完全不講究文字和圖片安排，要輕易閱讀。要注意：網(wǎng)頁(yè)標(biāo)題要簡(jiǎn)練，明確，能反應(yīng)整個(gè)文檔內(nèi)容；在文本敘述部分使用水平線分割不一樣部分；對(duì)關(guān)鍵文章和段落要使用強(qiáng)調(diào)字體表示D圖形設(shè)計(jì)好圖形并合理使用能給網(wǎng)頁(yè)增色。網(wǎng)頁(yè)中插入圖形盡可能要小，網(wǎng)頁(yè)中圖形要附加文字說(shuō)明，使人在圖形出來(lái)之前了解相關(guān)內(nèi)容；不要為圖形加太長(zhǎng)交互文本，也不要把全部超連接放在圖上；控制頁(yè)面中圖數(shù)量，不要濫用圖象GIF2.網(wǎng)站設(shè)計(jì)過(guò)程中，最中要一個(gè)標(biāo)準(zhǔn)是什么？為何？網(wǎng)站最關(guān)鍵標(biāo)準(zhǔn)是創(chuàng)意。即使網(wǎng)站關(guān)鍵目標(biāo)是傳送給大家它信息，但在傳輸信息同時(shí)還把她文化傳輸給獲取信息這些人。軟件掌握是短期就能速成，而且新軟件成出不窮，功效越來(lái)越強(qiáng)大，不過(guò)使用這些軟件必需要有良好網(wǎng)站設(shè)計(jì)概念才能發(fā)明優(yōu)異網(wǎng)站，這是網(wǎng)站制作關(guān)鍵。網(wǎng)站制作是按一定步驟進(jìn)行，不一樣網(wǎng)站設(shè)計(jì)著對(duì)網(wǎng)站有不一樣見(jiàn)解和見(jiàn)解，不過(guò)有個(gè)共同見(jiàn)解：僅會(huì)輸入文本，制作超級(jí)連接，排列圖片不是真正意義上網(wǎng)頁(yè)制作，因?yàn)榫W(wǎng)頁(yè)制作最關(guān)鍵一個(gè)標(biāo)準(zhǔn)是創(chuàng)意。3.動(dòng)態(tài)網(wǎng)頁(yè)工作原理動(dòng)態(tài)網(wǎng)頁(yè)是和靜態(tài)網(wǎng)頁(yè)相對(duì)應(yīng)，也就是說(shuō)，網(wǎng)頁(yè)URL后綴是.htm、.html、.shtml、.xml等靜態(tài)網(wǎng)頁(yè)常見(jiàn)形動(dòng)態(tài)網(wǎng)頁(yè)制作教授式，而是以.aspx.asp、.jsp、.php、.perl、.cgi等形式為后綴，而且在動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)址中有一個(gè)標(biāo)志性符號(hào)——“?”。動(dòng)態(tài)網(wǎng)頁(yè)工作原理和靜態(tài)網(wǎng)頁(yè)比較類似，不過(guò)在服務(wù)器端有很大差異。服務(wù)器端接到用戶端發(fā)出請(qǐng)求后，首先會(huì)找到所要瀏覽動(dòng)態(tài)網(wǎng)頁(yè)文件，然后解釋實(shí)施其中程序代碼，將含有程序代碼動(dòng)態(tài)網(wǎng)頁(yè)轉(zhuǎn)化為標(biāo)準(zhǔn)靜態(tài)網(wǎng)頁(yè)，然后將靜態(tài)網(wǎng)頁(yè)發(fā)送給用戶端。三、軟硬件需求準(zhǔn)備（1）計(jì)算機(jī)一臺(tái)（2）Dreamweaver開(kāi)發(fā)工具和運(yùn)行環(huán)境（3）此網(wǎng)頁(yè)用360安全瀏覽器進(jìn)行預(yù)覽（4）圖形處理工具，如photoshop。四、網(wǎng)站總體分析和設(shè)計(jì)1.網(wǎng)站介紹1.1網(wǎng)站專題：柔軟時(shí)光小店暖手寶1.2網(wǎng)站風(fēng)格：粉色溫暖1.3網(wǎng)站頁(yè)面結(jié)構(gòu)和相關(guān)功效介紹本網(wǎng)頁(yè)提供者消費(fèi)者相比同類網(wǎng)站品種較多暖手寶選擇。消費(fèi)者能在我們網(wǎng)站上查看新品，熱賣和超值特賣等多種為消費(fèi)者量身打造寶貝。本網(wǎng)站設(shè)計(jì)結(jié)構(gòu)包含導(dǎo)航欄、Globallink模塊、left模塊、main模塊、tips模塊等。具體設(shè)計(jì)：導(dǎo)航欄模塊展示我們店名Globallink模塊：關(guān)鍵是為了消費(fèi)者能在各類商品之間進(jìn)行切換Left模塊：提供者消費(fèi)者一個(gè)登錄界面和多種不一樣用途、風(fēng)格、價(jià)位寶貝選擇Main模塊：依據(jù)具體需要設(shè)計(jì)不一樣界面2.網(wǎng)站大約設(shè)計(jì)綱要：1.首頁(yè)2.店鋪介紹給消費(fèi)者部分我們店鋪基礎(chǔ)介紹3.新品上市把新品全部展示出來(lái)供消費(fèi)者選擇4熱賣商品展示熱賣中商品5超值特賣給消費(fèi)者提供部分性價(jià)比高產(chǎn)品6.買家評(píng)價(jià)展示給消費(fèi)者全部其它買家對(duì)我們?cè)u(píng)價(jià)，更含有真實(shí)性，另外提供一個(gè)供消費(fèi)者和我們溝通和提出意見(jiàn)平臺(tái)。關(guān)鍵代碼有7.聯(lián)絡(luò)我們提供給消費(fèi)者我們聯(lián)絡(luò)方法，方便于愈加好溝通和提供用戶更優(yōu)質(zhì)服務(wù)。代碼設(shè)計(jì)：<divid="lianxi"> <p>親,你能夠二十四小時(shí)聯(lián)絡(luò)我們客服哦，我們會(huì)隨時(shí)為您解答您想知道我們店鋪和產(chǎn)品相關(guān)問(wèn)題哦。。<br/> 我們客服電話是：<br/> 您還能夠訪問(wèn)我們網(wǎng)站留言<ahref="">店長(zhǎng)空間</a><br/> 回復(fù)很簡(jiǎn)單問(wèn)題就能訪問(wèn)哦。。 </div> <divid="main"> <imgsrc="phone.jpg"><br/> <imgsrc="QQ.jpg"> </div>8.網(wǎng)站CSS部分設(shè)計(jì)：本站CSS部分設(shè)計(jì)關(guān)鍵作用：利用對(duì)應(yīng)代碼來(lái)組織各模塊之間布局。提供一個(gè)整體上比較美觀網(wǎng)頁(yè)設(shè)計(jì)。省去主頁(yè)中藥用代碼寫入才能改變復(fù)雜工作。關(guān)鍵代碼：（1）margin關(guān)鍵用于控制模塊之間間距（2）padding關(guān)鍵用于模塊內(nèi)部元素漂移（3）background用來(lái)控制模塊背景（4）border關(guān)鍵控制塊邊緣和圖片等邊框（5）font-family控制字體（6）#關(guān)鍵用于CSS中，用來(lái)找到網(wǎng)頁(yè)模塊位置，從而進(jìn)行控制9..MicrosoftAccess數(shù)據(jù)庫(kù)建立。9.1依次選擇菜單命令【開(kāi)始】—【程序】—【MicrosoftAccess】就能夠開(kāi)啟Access,點(diǎn)擊“文件”在下拉菜單中選擇“新建”，選擇“空數(shù)據(jù)庫(kù)”，指定后保留路徑后出現(xiàn)以下所表示對(duì)話框：9.2【實(shí)用設(shè)計(jì)器創(chuàng)建表】選項(xiàng)，出現(xiàn)下圖所表示對(duì)話框：說(shuō)明:（1）字段名稱能夠用漢字，也能夠用字母、數(shù)字和下劃線，命名規(guī)則和變量類似，考慮系統(tǒng)兼容問(wèn)題，提議不要用漢字。（2）至于數(shù)據(jù)類型，常見(jiàn)有“文本”、“備注”、“數(shù)字”、“日期/時(shí)間”、“是/否”和“自動(dòng)編號(hào)”等。其中“文本”用于比較短字符串（最長(zhǎng)255個(gè)字符）；“備注”用于比較長(zhǎng)字符串，最長(zhǎng)能夠容納65535個(gè)而字符；“是/否”用于布爾類型，只有True（真）或False（假）；“自動(dòng)編號(hào)”是個(gè)特殊類型，它能夠自動(dòng)遞增或隨機(jī)產(chǎn)生一個(gè)數(shù)字，常常見(jiàn)它產(chǎn)生一個(gè)唯一編號(hào)。9.3正確輸入全部字段后，單擊Access主窗口【保留】按鈕，就會(huì)彈出下圖所表示【另存為】對(duì)話框，在其中輸入表名稱，然后單擊【確定】按鈕即可。9.4保留表9.5雙擊【表1】能夠在表中輸入數(shù)據(jù)，當(dāng)你建表完成后，認(rèn)為數(shù)據(jù)不合理，想修改數(shù)據(jù)也能夠雙擊【表1】進(jìn)行修改，假如想修改表字段，就右擊【表1】，選擇“設(shè)計(jì)視圖”，就能夠進(jìn)行修改10.存取數(shù)據(jù)庫(kù)。存取數(shù)據(jù)庫(kù)是開(kāi)發(fā)網(wǎng)絡(luò)程序中最關(guān)鍵也最常見(jiàn)部分，.NET框架提供了，利用它就能夠方便存取數(shù)據(jù)庫(kù)。正確說(shuō)，是由很多類組成一類庫(kù)。這些類庫(kù)提供了很多對(duì)象，分別用來(lái)完成和數(shù)據(jù)庫(kù)連接、查詢統(tǒng)計(jì)、插入統(tǒng)計(jì)、更新統(tǒng)計(jì)和刪除統(tǒng)計(jì)等操作。其中關(guān)鍵包含以下5個(gè)對(duì)象。（1）Connection對(duì)象：用來(lái)連接到數(shù)據(jù)庫(kù)。（2）Command對(duì)象：用來(lái)對(duì)數(shù)據(jù)庫(kù)實(shí)施SQL命令。（3）DataReader對(duì)象：用來(lái)從數(shù)據(jù)庫(kù)返回只讀數(shù)據(jù)。（4）DataAdapter對(duì)象：用來(lái)從數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)，并送到DataSet對(duì)象中，還要負(fù)責(zé)確保DataSet對(duì)象中數(shù)據(jù)和數(shù)據(jù)庫(kù)中數(shù)據(jù)保持一致。（5）DataSet對(duì)象：它能夠看做是內(nèi)存中數(shù)據(jù)庫(kù)。實(shí)用OLEDB數(shù)據(jù)庫(kù)，需要在頁(yè)面中導(dǎo)入相關(guān)名稱空間：<%@ImportNamespace=""%><%@ImportNamespace=".OleDb"%>存取數(shù)據(jù)庫(kù)：（1）首先利用Connection對(duì)象建立和數(shù)據(jù)庫(kù)連接。語(yǔ)法為：“Provider=OLEDB

驅(qū)動(dòng)程序；DataSource=數(shù)據(jù)庫(kù)文件物理路徑”（2）然后建立Command對(duì)象，實(shí)施SQL語(yǔ)句命令。（3）利用Command對(duì)象ExecuteReader方法建立DataReader對(duì)象，從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)。（4）DataReader對(duì)象返回?cái)?shù)據(jù)在統(tǒng)計(jì)集移動(dòng)指針就可依次顯示全部統(tǒng)計(jì)。（5）利用Command對(duì)象Executenonquery()方法可插入統(tǒng)計(jì)和更新統(tǒng)計(jì)。（6）和數(shù)據(jù)庫(kù)相連登陸程序，當(dāng)?shù)顷懗晒r(shí)則直接跳轉(zhuǎn)到網(wǎng)站主頁(yè)，其關(guān)鍵代碼以下：<%@ImportNamespace=""%><%@ImportNamespace=".OleDb"%>

DimconnAsNewOleDbConnection("Provider=.4.0;DataSource="+(""))

DimstrSqlAsString

strSql="Select*FromlinkWhereusername='"&&"'Andmypassword='"&&"'"

DimcmdAsNewOleDbCommand(strSql,conn)

()

DimdrAsOleDbDataReader=()

If()=TrueThen

()

("主頁(yè).aspx")

Else

()

="您必需輸入有效用戶名和密碼，還沒(méi)注冊(cè)？"

EndIf

當(dāng)點(diǎn)擊注冊(cè)按鈕時(shí)，跳轉(zhuǎn)到注冊(cè)頁(yè)面，關(guān)鍵程序代碼以下：

ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAs)

("注冊(cè).aspx")

EndSub注冊(cè)界面在數(shù)據(jù)庫(kù)中插入新注冊(cè)用戶信息關(guān)鍵代碼以下：

DimstrSqlAsString

strSql="InsertIntolink(username,mypassword,age,email,submit_date)Values('"&user_&"','"&&"','"&&"','"&&"',#"&Now()&"#)"

當(dāng)注冊(cè)成功時(shí)，則跳回登陸界面，關(guān)鍵代碼以下：

DimcmdAsNewOleDbCommand(strSql,conn)

DimExpAsException

Try

()

()

()

("登陸.aspx")

CatchExp

="<palign='center'>發(fā)生錯(cuò)誤，可能是用戶名已經(jīng)被人使用。"

EndTry五、網(wǎng)站運(yùn)行和實(shí)現(xiàn)安裝Dreamweaver后，打開(kāi)軟件，新建一個(gè)網(wǎng)站，將制作好文件（后綴為html）包含建設(shè)好css和需要添加圖片，全部復(fù)制放到一個(gè)文件夾中，用360安全瀏覽器進(jìn)行預(yù)覽。六、網(wǎng)站建設(shè)心得體會(huì)即使之前有上過(guò)類似課程不過(guò)用dreamweaver制作還是第一次，可能剛開(kāi)始會(huì)感覺(jué)很困難，不過(guò)其實(shí)只要多去琢磨一段時(shí)間，把書(shū)本上知識(shí)和老師講知識(shí)結(jié)合起來(lái)，并進(jìn)行數(shù)次實(shí)際操作，就能比很好利用這門知識(shí)。經(jīng)過(guò)對(duì)這個(gè)網(wǎng)頁(yè)設(shè)計(jì)，了解到本身還存在很多不足，