零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計(jì)

經(jīng)典word整理文檔，僅參考，雙擊此處可刪除頁眉頁腳。本資料屬于網(wǎng)絡(luò)整理，如有侵權(quán)，請聯(lián)系刪除，謝謝！課程設(shè)計(jì)報(bào)告書課程名稱：網(wǎng)頁設(shè)計(jì)與制作題目：系名：專業(yè)班級：零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計(jì)信息工程系姓名：學(xué)號：指導(dǎo)教師:年月日課程設(shè)計(jì)任務(wù)書學(xué)生姓名：指導(dǎo)教師：專業(yè)班級：工作單位：設(shè)計(jì)題目：零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計(jì)初始條件:Dreamweaver要求完成的主要任務(wù):主要任務(wù)：運(yùn)用HTML、CSS、Dreamweaver為主，以JavaScript、VBScript、、ADO、IIS、ODBC訪問Access數(shù)據(jù)庫等技術(shù)為輔，設(shè)計(jì)一個(gè)以靜態(tài)網(wǎng)站為主的系統(tǒng)，實(shí)現(xiàn)信息的瀏覽、查詢等基本功能。具體要求為：(1)網(wǎng)站要有一個(gè)明確的主題，界面友好美觀，主題從參考題目中選擇或自選，同一個(gè)題目最多只能3人使用。(2)主頁要求有用戶登錄顯示，實(shí)現(xiàn)網(wǎng)頁的瀏覽，信息的查詢等基本功能，50個(gè)以上的超鏈接。(3)網(wǎng)站內(nèi)容不能雷同，雷同者全部以0分記載。每個(gè)人需要檢查設(shè)計(jì)的網(wǎng)站，設(shè)計(jì)報(bào)告文檔，并提交紙質(zhì)版的課程報(bào)告和電子版的網(wǎng)站設(shè)計(jì)資料，包括：源程序，網(wǎng)站運(yùn)行效果截圖，電子版的資料以班為單位刻成光盤后由班長統(tǒng)一提交。設(shè)計(jì)報(bào)告撰寫格式要求：1設(shè)計(jì)題目與要求2設(shè)計(jì)思想3系統(tǒng)結(jié)構(gòu)4系統(tǒng)詳細(xì)設(shè)計(jì)，內(nèi)容包括各個(gè)模塊的設(shè)計(jì)，數(shù)據(jù)庫的設(shè)計(jì)，數(shù)據(jù)庫連接設(shè)計(jì)。5調(diào)試過程和運(yùn)行結(jié)果及結(jié)果分析（其中包括網(wǎng)站各個(gè)模塊的運(yùn)行結(jié)果和結(jié)果數(shù)據(jù)分析）6自我評價(jià)與總結(jié)7時(shí)間安排1月21日布置課程設(shè)計(jì)任務(wù)；分配題目后，查閱資料、準(zhǔn)備程序；1月22～1月25日上機(jī)調(diào)試程序、書寫課程設(shè)計(jì)報(bào)告；1月25日提交課程設(shè)計(jì)報(bào)告及相關(guān)文檔。指導(dǎo)教師簽字：年月日系主任簽字：年月日1設(shè)計(jì)題目與要求零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計(jì)運(yùn)用CSSDreamweaverJavaScript、、ODBC訪問Access數(shù)據(jù)庫等技術(shù)為輔，設(shè)計(jì)一個(gè)以靜態(tài)網(wǎng)站為主的系統(tǒng)，實(shí)現(xiàn)信息的瀏覽等基本功能。具體要求為：(1)網(wǎng)站要有一個(gè)明確的主題，界面友好美觀。(2)主頁要求有用戶登錄顯示，實(shí)現(xiàn)網(wǎng)頁的瀏覽，信息的查詢等基本功能，50個(gè)以上的超鏈接。(3)網(wǎng)站內(nèi)容不能雷同。每個(gè)人需要檢查設(shè)計(jì)的網(wǎng)站，設(shè)計(jì)報(bào)告文檔，并提交等。2設(shè)計(jì)思想2制作一個(gè)零食銷售網(wǎng)站，能夠滿足用戶的基本需求。網(wǎng)站的界面應(yīng)該具有用戶選取商品后應(yīng)該有支付的頁面，支付頁面需要有用戶支付方式等相關(guān)的信息，用戶確認(rèn)商品后應(yīng)該可以做出取消的操作。以及部分商品的信息情況。打開商品大體分類的鏈接后，可以看到具體的商品，每個(gè)商品有圖片介紹，在圖片的下方有該商品的價(jià)格，點(diǎn)擊商品的圖片鏈接后，輸入信息后，如果輸入的信息有誤，可以重新填寫，確認(rèn)輸入無誤后可以登陸。3系統(tǒng)結(jié)構(gòu)從首頁可以進(jìn)入用戶注冊、商品分類以及用戶登陸頁面，進(jìn)入用戶登陸頁后，可以看到相關(guān)的商品明細(xì)，確認(rèn)商品后，進(jìn)入結(jié)賬頁面，確認(rèn)結(jié)賬后，返回支付成功信息，并返回首頁。系統(tǒng)流程圖3-14詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)打開dreamweaver8站點(diǎn)的名稱，如下圖所示。圖4-1站點(diǎn)建立dreamweaver8的右下角看到，如圖圖4-2文件夾視圖在右下角的零食網(wǎng)文件夾出，右鍵點(diǎn)擊該文件夾，選擇新建文件夾，命名為CSSCSSimages來保存建立網(wǎng)頁所需要的相關(guān)媒體文件。點(diǎn)擊左上角的新建選項(xiàng)，然后新建一個(gè)網(wǎng)頁。在設(shè)計(jì)樣式中，選擇插入然后選擇表格，在出現(xiàn)的界面中設(shè)置如下圖4-3表格設(shè)置表格建立完成后，效果如下圖所示圖4-4頁面布局然后在每個(gè)表格中插入先前準(zhǔn)備好的背景圖片即可。表格背景設(shè)置完成后，選擇插入—布局對象—層，然后在出現(xiàn)的層中插入一張表格，用來設(shè)置主頁中商品的“全部分類”選項(xiàng)。插入的表格設(shè)置為9行1列即可。在新建的這張表格中，填入需要設(shè)置的商品名稱。然后將該層移動到最左photoshop283*283,接著插入3photoshop畫窗口新建3入的第三張圖，效果如圖所示圖4-5GIF圖片制作然后設(shè)置播放動畫的時(shí)間為1秒，如圖所示圖4-6動畫最后，保存為gif格式，同理，創(chuàng)建其他需要的圖片即可。在首頁相應(yīng)的位置插入制作好的圖片，然后在最右邊的大表格中填入商品CSS代碼如下.STYLE1{font-size:xx-large;color:#FF0000;}.STYLE3{font-size:xx-large;color:#FF0000;font-family:"方正舒體";}.STYLE5{font-size:medium;color:#333333;}然后設(shè)置3個(gè)熱點(diǎn)區(qū)域，分別在登陸、注冊和聯(lián)系的位置并設(shè)置到鏈接，mailto:test@163.com如圖所示圖4-7首頁截圖商品展示頁面我們可以利用dreamweaver:選擇新建一個(gè)頁面，在彈出的窗口中選擇如下圖所示圖4-8模板然后我們對新建的頁面進(jìn)行修改。首先將背景顏色更改為符合我們網(wǎng)站風(fēng)格的顏色，用鼠標(biāo)點(diǎn)擊背景的空白dreamweaver將里面的屬性修改為我們需要的屬性即可，具體的參數(shù)設(shè)置如下圖所示圖4-9屬性然后建立一個(gè)頁面，在代碼欄中我們寫入需要設(shè)置的CSS樣式代碼，里面包括網(wǎng)頁中文字的樣式和部分背景圖片的樣式。然后保存為CSS后綴的文件即CSS的代碼如下<linkrel="stylesheet"href="css/mm_restaurant1.css"type="text/css"/>接著，我們在頁面下方的表格中設(shè)置滾動提示文字，輸入的代碼如下<P><MARQUEEclass="pageName">更多商品，添加中Ing...</MARQUEE></P>在網(wǎng)頁頂部的位置，我們添加一個(gè)導(dǎo)航條，用于其他分類商品的鏈接和返回首頁，從左到右輸入的文字如下圖4-10導(dǎo)航欄進(jìn)行一些小的修整，完成后的頁面如下圖4-11商品展示頁面首先插入表格并進(jìn)行分割，然后在分割好后的表格中插入事先準(zhǔn)備好的圖一個(gè)用于填寫用戶密碼，并將這兩個(gè)表單分別命名為t1和t2，接著在這兩個(gè)表圖4-12登陸框接著我們編寫一個(gè)簡單的javascript程序，用于提示用戶的登陸情況。代碼如下<scriptlanguage="javascript">functionfun1(){alert("登陸成功！");}</script>最后，我們在網(wǎng)頁的左下角設(shè)置一個(gè)返回首頁的鏈接，完成后的效果如圖圖4-13登陸頁面插入一張表格設(shè)置為1列5行，在第一行中我們設(shè)置一個(gè)用于返回首頁的3在第55所示圖4-14注冊頁面接著我們編寫用于驗(yàn)證用戶輸入的信息是否合理的javascript程序代碼，部分代碼如下functioncheckSubmit()//用于驗(yàn)證用戶輸入的信息是否正確{if(document.form2.userid.value=="")//判斷用戶是否輸入了用戶名{document.form2.userid.focus();alert("用戶名不能為空！");returnfalse;}if(document.form2.userpwd.value=="")//判斷兩次輸入的密碼是否一致{document.form2.userpwd.focus();alert("登陸密碼不能為空！");returnfalse;}if(document.form2.userpwdok.value!=document.form2.userpwd.value){document.form2.userpwdok.focus();alert("兩次密碼不一致！");returnfalse;}if(document.form2.email.value=="")//判斷用戶是否輸入了EMAIL地址{}document.form2.email.focus();alert("Email不能為空！");returnfalse;if(document.form2.uname.value=="")//判斷用戶是否輸入了昵稱{document.form2.uname.focus();alert("用戶昵稱不能為空！");returnfalse;}}插入一張表格并進(jìn)行分割，插入事先準(zhǔn)備好的圖片并設(shè)置好CSS樣式，然個(gè)用于取消當(dāng)前的操作，完成后的頁面如圖所示圖4-15結(jié)賬頁面5調(diào)試運(yùn)行將站點(diǎn)文件移動到別的文件夾，進(jìn)行測試，這樣可以檢測網(wǎng)頁中的鏈接是否添加正確。首先進(jìn)入站點(diǎn)文件夾，打開index.html文件，在瀏覽器中顯示如下圖所示圖5-1首頁測試我們可以發(fā)現(xiàn)部分圖片顯示不正常，因此可以判定有部分圖片的鏈接添加當(dāng)文件夾的位置改變后，發(fā)生了圖片顯示不正常的情況。修改后的結(jié)果如下圖所示圖5-2首頁鏈接修改后可以看到網(wǎng)頁已經(jīng)可以正常顯示。在打開的首頁中，我們點(diǎn)擊左側(cè)導(dǎo)航欄中的“進(jìn)口零食”鏈接，進(jìn)入如下頁面圖5-3進(jìn)口零食頁面發(fā)現(xiàn)一切正常，然后在該頁面中，我們點(diǎn)擊頂部導(dǎo)航欄中特產(chǎn)零食鏈接圖5-4導(dǎo)航欄測試發(fā)現(xiàn)一切正常，然后我們在任意點(diǎn)擊頂部的其他任意鏈接圖5-5其他鏈接測試發(fā)現(xiàn)一切正常，并且我們可以看到，下部的滾動文字提示運(yùn)行正常，如圖所示圖5-6底部效果,進(jìn)入頁面后，我們可以看到頁面顯示正示圖5-7用戶名提示圖5-8密碼提示明注冊成功。果如圖所示圖5-9登陸提示空”按鈕，可以看到用戶輸入的數(shù)據(jù)已經(jīng)清空。頁面中，我們可以看到默認(rèn)的商品數(shù)量為1，接著修改商品數(shù)量，如圖所示圖5-10商品數(shù)量點(diǎn)擊取消后圖5-11成功提示彈出取消成功的提示并且商品的數(shù)量重置為1，如圖所示圖5-12重置結(jié)果當(dāng)我們輸入商品數(shù)量后，點(diǎn)擊提交后圖5-13成功提示彈出購買成功提示，并且返回首頁。6自我評價(jià)與總結(jié)在編寫javascript程序的時(shí)候，一些語法掌握的不夠好，運(yùn)行網(wǎng)頁的時(shí)候的左下收了不少的知識。在這次網(wǎng)頁制作我的總結(jié)有下面幾點(diǎn)，首先對于一個(gè)網(wǎng)站來說，首頁設(shè)計(jì)、是一個(gè)很好的布局工具，另外div層的應(yīng)用更能夠錦上添花。