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

1、課程設(shè)計報告書網(wǎng)頁設(shè)計與制作課程名稱：零食網(wǎng)系統(tǒng)的題 目網(wǎng)頁設(shè)計：系 名：信息工程系專業(yè)班級：姓 名：I學(xué) 號：指導(dǎo)教師：年 月 日課程設(shè)計任務(wù)書學(xué)生姓名：專業(yè)班級：指導(dǎo)教師：工作單位：設(shè)計題目：零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計初始條件:Dreamweaver要求完成的主要任務(wù)：主要任務(wù)：運用 HTML、CSS、Dreamweaver 為主，以 JavaScript 、VBScript 、ASP、ADO、IIS、ODBC訪問Access數(shù)據(jù)庫等技術(shù)為輔，設(shè)計一個以靜態(tài)網(wǎng)站為主的系統(tǒng)，實現(xiàn)信息的瀏覽、查詢等基本功能。具體要求為：(1) 網(wǎng)站要有一個明確的主題，界面友好美觀，主題從參考題目中選擇或 自選，同一

2、個題目最多只能 3 人使用。主頁要求有用戶登錄顯示， 實現(xiàn)網(wǎng)頁的瀏覽， 信息的查詢等基本功能， (2)50 個以上的超鏈接。(3) 網(wǎng)站內(nèi)容不能雷同，雷同者全部以 0 分記載。每個人需要檢查設(shè)計的 網(wǎng)站，設(shè)計報告文檔， 并提交紙質(zhì)版的課程報告和電子版的網(wǎng)站設(shè)計資料， 包括：源程序，網(wǎng)站運行效果截圖，電子版的資料以班為單位刻成光盤后 由班長統(tǒng)一提交。設(shè)計報告撰寫格式要求：1 設(shè)計題目與要求2 設(shè)計思想3 系統(tǒng)結(jié)構(gòu)4 系統(tǒng)詳細設(shè)計，內(nèi)容包括各個模塊的設(shè)計，數(shù)據(jù)庫的設(shè)計，數(shù)據(jù)庫 連接設(shè)計。5 調(diào)試過程和運行結(jié)果及結(jié)果分析(其中包括網(wǎng)站各個模塊的運行結(jié)果和 結(jié)果數(shù)據(jù)分析)6 自我評價與總結(jié)7 附錄：程

3、序清單，注意加注釋(包括關(guān)鍵字、方法、變量等) ，在每個模時間安排塊前加注釋；1月 21日 布置課程設(shè)計任務(wù)；分配題目后，查閱資料、 準備程序；1月221月25日上機調(diào)試程序、書寫課程設(shè)計報告;1月 25 日 提交課程設(shè)計報告及相關(guān)文檔。指 導(dǎo) 教 師 簽 字： 年 月 日日 月 年字： 簽 任 主 系1 設(shè)計題目與要求1.1 設(shè)計題目零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計1.2 要求運用 HTMLCSS Dreamweaver為主，以 JavaScript、VBScript、ASP ADO IIS、 ODB訪問Access數(shù)據(jù)庫等技術(shù)為輔，設(shè)計一個以靜態(tài)網(wǎng)站為主的系統(tǒng)，實現(xiàn)信 息的瀏覽等基本功能。具體要求為：

4、(1) 網(wǎng)站要有一個明確的主題，界面友好美觀。(2) 主頁要求有用戶登錄顯示，實現(xiàn)網(wǎng)頁的瀏覽，信息的查詢等基本功能， 50 個以上的超鏈接。(3) 網(wǎng)站內(nèi)容不能雷同。 每個人需要檢查設(shè)計的網(wǎng)站， 設(shè)計報告文檔， 并提交紙 質(zhì)版的課程報告和電子版的網(wǎng)站設(shè)計資料， 包括：源程序，網(wǎng)站運行效果截圖等。2 設(shè)計思想2.1 需求分析制作一個零食銷售網(wǎng)站， 能夠滿足用戶的基本需求。 網(wǎng)站的界面應(yīng)該具有人性化， 美觀大方。網(wǎng)站應(yīng)具有商品的分類，分類應(yīng)包括商品的大體分類和詳細的分類， 對于商品應(yīng)該具有一定的介紹， 商品最好有一定的圖輔助介紹， 以便用戶能夠更 好的了解自己購買的商品。 除了對于商品方面的類容外

5、， 網(wǎng)站還應(yīng)該擁有對用戶 服務(wù)的界面，因此，網(wǎng)站需要有用戶注冊和登陸的界面。對于用戶注冊界面，需 要判斷用戶名稱是否重復(fù)和相關(guān)密碼的驗證。 登陸界面以簡單實用為主。 用戶選 取商品后應(yīng)該有支付的頁面， 支付頁面需要有用戶支付方式等相關(guān)的信息， 用戶 確認商品后應(yīng)該可以做出取消的操作。2.2 設(shè)計思想建立一個主頁面， 主頁面有商品分類的鏈接 用戶注冊鏈接 用戶登錄鏈接以及 部分商品的信息情況。 打開商品大體分類的鏈接后， 可以看到具體的商品， 每個 商品有圖片介紹， 在圖片的下方有該商品的價格， 點擊商品的圖片鏈接后， 可以 進入支付頁面。 在支付頁面中用戶可以輸入需要訂購的商品數(shù)量， 然后可以

6、確認 支付和取消操作。在進入用戶注冊頁面后，用戶填寫信息后可以進行核對操作， 例如：核對用戶名稱是否重復(fù) 密碼是否填寫正確等。 用戶進入登陸頁面后， 輸 入信息后，如果輸入的信息有誤，可以重新填寫，確認輸入無誤后可以登陸。3系統(tǒng)結(jié)構(gòu)從首頁可以進入用戶注冊、商品分類以及用戶登陸頁面，進入用戶登陸頁面后， 用戶填寫賬戶密碼后，進行驗證操作，成功后登陸并返回首頁。進入注冊頁面后, 用戶填寫注冊資料，驗證成功后，注冊成功并返回首頁。進入商品分類后，可以 看到相關(guān)的商品明細，確認商品后，進入結(jié)賬頁面，確認結(jié)賬后，返回支付成功 信息，并返回首頁。.首頁是是商品分類用戶注冊用戶登陸否 否驗證 驗證進特飲糖膨

7、肉餅堅果料果干化類口支付網(wǎng)驗3-1系統(tǒng)流程圖4詳細設(shè)計與實現(xiàn)4.1首頁制作打開dreamweaver8選擇站點，然后點擊新建站點，在顯示出來的頁面輸入站點 的名稱，如下圖所示。圖4-1站點建立然后點擊確認，就會建立一個叫“零食網(wǎng)”的站點文件夾，可以在dreamweaver8 的右下角看到，如圖圖4-2文件夾視圖在右下角的零食網(wǎng)文件夾出，右鍵點擊該文件夾，選擇新建文件夾，命名為CSS 用來存放建立的CSS羊式文件。然后同理新建文件夾命名為images，用來保存 建立網(wǎng)頁所需要的相關(guān)媒體文件。點擊左上角的新建選項，然后新建一個網(wǎng)頁。在設(shè)計樣式中，選擇插入然后選擇 表格，在出現(xiàn)的界面中設(shè)置如下表格建

8、立完成后，效果如下圖所示圖 4-4 頁面布局然后在每個表格中插入先前準備好的背景圖片即可。表格背景設(shè)置完成后， 選擇插入布局對象層， 然后在出現(xiàn)的層中插入一張表 格，用來設(shè)置主頁中商品的 “全部分類”選項。插入的表格設(shè)置為 9 行 1 列即可。 在新建的這張表格中， 填入需要設(shè)置的商品名稱。 然后將該層移動到最左邊的大 表格中即可。接著制作在主頁中需要顯示的部分商品的展示圖片， 制作方法如下： 打開 photoshop 工具，新建一張圖片，大小設(shè)置為 283*283, 接著插入 3 張靜態(tài) 的圖片， 在 photoshop 中找到導(dǎo)航欄中的窗口選項， 然后選中動畫， 在動畫窗口 新建 3張新的

9、動畫圖片， 在第一張新建動畫中只顯示插入的第一張圖， 然后，在 第二張新建動畫中只顯示第二張插入的圖片， 最后，在第三張中只顯示插入的第 三張圖，效果如圖所示圖 4-5GIF 圖片制作然后設(shè)置播放動畫的時間為 1 秒，如圖所示圖 4-6 動畫格式，同理，創(chuàng)建其他需要的圖片即可。 gif 最后，保存為 在首頁相應(yīng)的位置插入制作好的圖片， 然后在最右邊的大表格中填入商品的名稱 和資料，完善頁面的布局。接著對字體和頁面的背景設(shè)置 csS羊式，部分代碼如 下 .sTYLE1 font-size: xx-large;color: #FF0000; 方正舒體 ; color: font-size: xx-

10、large; #FF0000; font-family: .sTYLE3 .sTYLE5 font-size: medium; color: #333333; 個熱點區(qū)域，分別在登陸、注冊和聯(lián)系的位置并設(shè)置到鏈接，然后設(shè)置 3 其中 在聯(lián)系的鏈接中，我們輸入用于測試。完成后的頁面如圖所示 圖 4-7 首頁截圖4.2 商品展示頁面制作商品展示頁面我們可以利用dreamweaver自帶的模板進行修改，方法如下： 選擇新建一個頁面，在彈出的窗口中選擇如下圖所示圖 4-8 模板然后我們對新建的頁面進行修改。 首先將背景顏色更改為符合我們網(wǎng)站風格的顏色， 用鼠標點擊背景的空白處， 我 們可以再dream

11、weaver的下方看見背景的屬性設(shè)置菜單，然后我們只需要將里面 的屬性修改為我們需要的屬性即可，具體的參數(shù)設(shè)置如下圖所示然后建立一個頁面，在代碼欄中我們寫入需要設(shè)置的 csS羊式代碼，里面包括網(wǎng) 頁中文字的樣式和部分背景圖片的樣式。然后保存為CSS后綴的文件即可。返回 之前所建立的商品展示頁面，在網(wǎng)頁代碼中應(yīng)用建好的csS羊式，輸入的代碼如 下<link rel=stylesheet href=css/mm_restaurant1.css type=ext/css />接著，我們在頁面下方的表格中設(shè)置滾動提示文字，輸入的代碼如下<P>vMARQUEE class=pag

12、eNam更多商品，添加中 In g.v/MARQUEE>v/p> 在網(wǎng)頁頂部的位置，我們添加一個導(dǎo)航條， 用于其他分類商品的鏈接和返回首頁， 從左到右輸入的文字如下圖 4-10 導(dǎo)航欄最后對網(wǎng)頁然后在下方的屬性欄中添加需要連接到的地址頁面。接著選中文字， 進行一些小的修整，完成后的頁面如下圖 4-11 商品展示頁面4.3 登陸界面的制作首先插入表格并進行分割， 然后在分割好后的表格中插入事先準備好的圖片， 完 成界面的基本制作。 接著對網(wǎng)頁的細節(jié)進行制作， 在右側(cè)的表格中， 我們選擇插 入表單文本域， 在此我們需要插入兩個表單， 一個用于填寫用戶名稱， 一個 用于填寫用戶密碼，并將

13、這兩個表單分別命名為 t1 和 t2 ，接著在這兩個表單的 上方添加上文字提示。 然后在兩個表格的最下方添加兩個按鈕， 一個命名為提交， 用于提交表單內(nèi)容，命名為取消，用于重置表單。完成后的效果如圖所示圖 4-12 登陸框接著我們編寫一個簡單的 javascript 程序，用于提示用戶的登陸情況。代碼如 下<script language=javascript>function fun1() 污牥?登陸成功！ );</script> 最后，我們在網(wǎng)頁的左下角設(shè)置一個返回首頁的鏈接，完成后的效果如圖圖 4-13 登陸頁面4.4 注冊頁面的制作插入一張表格設(shè)置為 1列 5行

14、，在第一行中我們設(shè)置一個用于返回首頁的鏈接并 設(shè)置為向右對齊， 在第 3行中我們輸入部分的文字， 用于提醒注冊的用戶。 在第 5行中，我們插入 5 個文本域，分別用作輸入用戶名稱，用戶密碼，驗證密碼， 用戶郵箱，用戶昵稱，然后在下面插入連個單選按鈕用于用戶設(shè)置性別。最后， 在最下方設(shè)置兩個按鈕， 用于用戶提交表單和重置表單， 完成的效果如下圖所示 圖 4-14 注冊頁面接著我們編寫用于驗證用戶輸入的信息是否合理的 javascript 程序代碼，部分代碼如下function checkSubmit() /用于驗證用戶輸入的信息是否正確/ 判斷用戶是否輸入了用戶名慍敬瑲尨用戶名不能為空！ );r

15、eturn false;/ 判斷兩次輸入的密碼是否一致慍敬瑲尨登陸密碼不能為空！ );return false;慍敬瑲尨兩次密碼不一致！ );return false;/判斷用戶是否輸入了 EMAIL地址alert(Email 不能為空！ );return false;/ 判斷用戶是否輸入了昵稱慍敬瑲尨用戶昵稱不能為空！ );return false;4.5 結(jié)賬頁面的制作插入一張表格并進行分割，插入事先準備好的圖片并設(shè)置好 CSS羊式，然后在頁 面表格中左側(cè)插入一個文本域， 用于輸入購買的商品數(shù)量， 接著在商品數(shù)量表單 下面插入兩個按鈕， 一個用于提交輸入的數(shù)量并提示購買成功操作， 另一個用

16、于 取消當前的操作，完成后的頁面如圖所示圖 4-15 結(jié)賬頁面5 調(diào)試運行5.1 調(diào)試將站點文件移動到別的文件夾，進行測試，這羊可以檢測網(wǎng)頁中的鏈接是文件， 在瀏覽器中顯示如 index.html 否添加正確。首先進入站點文件夾，打開 下圖所示圖 5-1 首頁測試我們可以發(fā)現(xiàn)部分圖片顯示不正常， 因此可以判定有部分圖片的鏈接添加的不正 確，檢查后發(fā)現(xiàn)無法顯示的圖片是因為圖片的地址設(shè)置為絕對路徑， 因此，當文 件夾的位置改變后，發(fā)生了圖片顯示不正常的情況。修改后的結(jié)果如下圖所示 圖 5-2 首頁鏈接修改后 可以看到網(wǎng)頁已經(jīng)可以正常顯示。在打開的首頁中，我們點擊左側(cè)導(dǎo)航欄中的“進口零食”鏈接，進入

17、如下頁面 圖 5-3 進口零食頁面 發(fā)現(xiàn)一切正常，然后在該頁面中，我們點擊頂部導(dǎo)航欄中特產(chǎn)零食鏈接 圖 5-4 導(dǎo)航欄測試 發(fā)現(xiàn)一切正常，然后我們在任意點擊頂部的其他任意鏈接 圖 5-5 其他鏈接測試發(fā)現(xiàn)一切正常，并且我們可以看到，下部的滾動文字提示運行正常，如圖所示 圖 5-6 底部效果5.2 數(shù)據(jù)測試 返回首頁，然后我們進入注冊頁面 , 進入頁面后，我們可以看到頁面顯示正常， 然后我們輸入數(shù)據(jù)進行測試，當我們不輸入信息是，點擊提交按鈕，如圖所示 圖 5-7 用戶名提示 彈出提示“用戶名不能為空” ，接著我們輸入兩組不同的密碼數(shù)據(jù)，如圖所示 圖 5-8 密碼提示 彈出提示“兩次密碼不一致”

18、，接著我們輸入正確的數(shù)據(jù)，成功跳轉(zhuǎn)回首頁，證 明注冊成功。 在首頁中，我們點擊登錄鏈接，輸入任意用戶賬戶和密碼后，點擊登錄按鈕，結(jié) 果如圖所示 圖 5-9 登陸提示 ，點擊確認后，返回首頁。當輸入用戶數(shù)據(jù)后，我們點擊“清提示“登錄成功” 空”按鈕，可以看到用戶輸入的數(shù)據(jù)已經(jīng)清空。在結(jié)賬點擊任意我們想要購買 的商品后，進入結(jié)賬頁面，我們在商品展示頁面， ，接著修改商品數(shù)量，如圖 所示頁面中，我們可以看到默認的商品數(shù)量為 1 圖 5-10 商品數(shù)量 點擊取消后 成功提示 5-11 圖 1 彈出取消成功的提示并且商品的數(shù)量重置為， 如圖所示 圖5-12 重置結(jié)果 當我們輸入商品數(shù)量后，點擊提交后 成功提示圖 5-13 彈出 購買成功提示，并且返回首頁。 6 自我評價與總結(jié) ?經(jīng)過此次的課程設(shè)計，我對網(wǎng)頁制作又有了更深一步的了解，對自己這次比制作的網(wǎng)頁感覺還是不錯的。 但是，在制作過程中我還是遇到了不少的麻煩， 程序的時候，一些語法掌握的不 夠好，運行網(wǎng)頁的時候的左如在編寫javascript，并且點擊觸發(fā)事件的按鈕時， 總是得不到想要的效下角總是顯示“網(wǎng)頁錯誤”果，于是，我借助網(wǎng)絡(luò)、書籍和 周圍同學(xué)額的幫