版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
經(jīng)典word整理文檔,僅參考,雙擊此處可刪除頁眉頁腳。本資料屬于網(wǎng)絡(luò)整理,如有侵權(quán),請聯(lián)系刪除,謝謝!課程設(shè)計報告書課程名稱:網(wǎng)頁設(shè)計與制作題目:系名:專業(yè)班級:零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計信息工程系姓名:學號:指導教師:年月日課程設(shè)計任務(wù)書學生姓名:指導教師:專業(yè)班級:工作單位:設(shè)計題目:零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計初始條件:Dreamweaver要求完成的主要任務(wù):主要任務(wù):運用HTML、CSS、Dreamweaver為主,以JavaScript、VBScript、、ADO、IIS、ODBC訪問Access數(shù)據(jù)庫等技術(shù)為輔,設(shè)計一個以靜態(tài)網(wǎng)站為主的系統(tǒng),實現(xiàn)信息的瀏覽、查詢等基本功能。具體要求為:(1)網(wǎng)站要有一個明確的主題,界面友好美觀,主題從參考題目中選擇或自選,同一個題目最多只能3人使用。(2)主頁要求有用戶登錄顯示,實現(xiàn)網(wǎng)頁的瀏覽,信息的查詢等基本功能,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時間安排1月21日布置課程設(shè)計任務(wù);分配題目后,查閱資料、準備程序;1月22~1月25日上機調(diào)試程序、書寫課程設(shè)計報告;1月25日提交課程設(shè)計報告及相關(guān)文檔。指導教師簽字:年月日系主任簽字:年月日1設(shè)計題目與要求零食網(wǎng)系統(tǒng)的網(wǎng)頁設(shè)計運用CSSDreamweaverJavaScript、、ODBC訪問Access數(shù)據(jù)庫等技術(shù)為輔,設(shè)計一個以靜態(tài)網(wǎng)站為主的系統(tǒng),實現(xiàn)信息的瀏覽等基本功能。具體要求為:(1)網(wǎng)站要有一個明確的主題,界面友好美觀。(2)主頁要求有用戶登錄顯示,實現(xiàn)網(wǎng)頁的瀏覽,信息的查詢等基本功能,50個以上的超鏈接。(3)網(wǎng)站內(nèi)容不能雷同。每個人需要檢查設(shè)計的網(wǎng)站,設(shè)計報告文檔,并提交等。2設(shè)計思想2制作一個零食銷售網(wǎng)站,能夠滿足用戶的基本需求。網(wǎng)站的界面應(yīng)該具有用戶選取商品后應(yīng)該有支付的頁面,支付頁面需要有用戶支付方式等相關(guān)的信息,用戶確認商品后應(yīng)該可以做出取消的操作。以及部分商品的信息情況。打開商品大體分類的鏈接后,可以看到具體的商品,每個商品有圖片介紹,在圖片的下方有該商品的價格,點擊商品的圖片鏈接后,輸入信息后,如果輸入的信息有誤,可以重新填寫,確認輸入無誤后可以登陸。3系統(tǒng)結(jié)構(gòu)從首頁可以進入用戶注冊、商品分類以及用戶登陸頁面,進入用戶登陸頁后,可以看到相關(guān)的商品明細,確認商品后,進入結(jié)賬頁面,確認結(jié)賬后,返回支付成功信息,并返回首頁。系統(tǒng)流程圖3-14詳細設(shè)計與實現(xiàn)打開dreamweaver8站點的名稱,如下圖所示。圖4-1站點建立dreamweaver8的右下角看到,如圖圖4-2文件夾視圖在右下角的零食網(wǎng)文件夾出,右鍵點擊該文件夾,選擇新建文件夾,命名為CSSCSSimages來保存建立網(wǎng)頁所需要的相關(guān)媒體文件。點擊左上角的新建選項,然后新建一個網(wǎng)頁。在設(shè)計樣式中,選擇插入然后選擇表格,在出現(xiàn)的界面中設(shè)置如下圖4-3表格設(shè)置表格建立完成后,效果如下圖所示圖4-4頁面布局然后在每個表格中插入先前準備好的背景圖片即可。表格背景設(shè)置完成后,選擇插入—布局對象—層,然后在出現(xiàn)的層中插入一張表格,用來設(shè)置主頁中商品的“全部分類”選項。插入的表格設(shè)置為9行1列即可。在新建的這張表格中,填入需要設(shè)置的商品名稱。然后將該層移動到最左photoshop283*283,接著插入3photoshop畫窗口新建3入的第三張圖,效果如圖所示圖4-5GIF圖片制作然后設(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個熱點區(qū)域,分別在登陸、注冊和聯(lián)系的位置并設(shè)置到鏈接,mailto:test@163.com如圖所示圖4-7首頁截圖商品展示頁面我們可以利用dreamweaver:選擇新建一個頁面,在彈出的窗口中選擇如下圖所示圖4-8模板然后我們對新建的頁面進行修改。首先將背景顏色更改為符合我們網(wǎng)站風格的顏色,用鼠標點擊背景的空白dreamweaver將里面的屬性修改為我們需要的屬性即可,具體的參數(shù)設(shè)置如下圖所示圖4-9屬性然后建立一個頁面,在代碼欄中我們寫入需要設(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)頁頂部的位置,我們添加一個導航條,用于其他分類商品的鏈接和返回首頁,從左到右輸入的文字如下圖4-10導航欄進行一些小的修整,完成后的頁面如下圖4-11商品展示頁面首先插入表格并進行分割,然后在分割好后的表格中插入事先準備好的圖一個用于填寫用戶密碼,并將這兩個表單分別命名為t1和t2,接著在這兩個表圖4-12登陸框接著我們編寫一個簡單的javascript程序,用于提示用戶的登陸情況。代碼如下<scriptlanguage="javascript">functionfun1(){alert("登陸成功!");}</script>最后,我們在網(wǎng)頁的左下角設(shè)置一個返回首頁的鏈接,完成后的效果如圖圖4-13登陸頁面插入一張表格設(shè)置為1列5行,在第一行中我們設(shè)置一個用于返回首頁的3在第55所示圖4-14注冊頁面接著我們編寫用于驗證用戶輸入的信息是否合理的javascript程序代碼,部分代碼如下functioncheckSubmit()//用于驗證用戶輸入的信息是否正確{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;}}插入一張表格并進行分割,插入事先準備好的圖片并設(shè)置好CSS樣式,然個用于取消當前的操作,完成后的頁面如圖所示圖4-15結(jié)賬頁面5調(diào)試運行將站點文件移動到別的文件夾,進行測試,這樣可以檢測網(wǎng)頁中的鏈接是否添加正確。首先進入站點文件夾,打開index.html文件,在瀏覽器中顯示如下圖所示圖5-1首頁測試我們可以發(fā)現(xiàn)部分圖片顯示不正常,因此可以判定有部分圖片的鏈接添加當文件夾的位置改變后,發(fā)生了圖片顯示不正常的情況。修改后的結(jié)果如下圖所示圖5-2首頁鏈接修改后可以看到網(wǎng)頁已經(jīng)可以正常顯示。在打開的首頁中,我們點擊左側(cè)導航欄中的“進口零食”鏈接,進入如下頁面圖5-3進口零食頁面發(fā)現(xiàn)一切正常,然后在該頁面中,我們點擊頂部導航欄中特產(chǎn)零食鏈接圖5-4導航欄測試發(fā)現(xiàn)一切正常,然后我們在任意點擊頂部的其他任意鏈接圖5-5其他鏈接測試發(fā)現(xiàn)一切正常,并且我們可以看到,下部的滾動文字提示運行正常,如圖所示圖5-6底部效果,進入頁面后,我們可以看到頁面顯示正示圖5-7用戶名提示圖5-8密碼提示明注冊成功。果如圖所示圖5-9登陸提示空”按鈕,可以看到用戶輸入的數(shù)據(jù)已經(jīng)清空。頁面中,我們可以看到默認的商品數(shù)量為1,接著修改商品數(shù)量,如圖所示圖5-10商品數(shù)量點擊取消后圖5-11成功提示彈出取消成功的提示并且商品的數(shù)量重置為1,如圖所示圖5-12重置結(jié)果當我們輸入商品數(shù)量后,點擊提交后圖5-13成功提示彈出購買成功提示,并且返回首頁。6自我評價與總結(jié)在編寫javascript程序的時候,一些語法掌握的不夠好,運行網(wǎng)頁的時候的左下收了不少的知識。在這次網(wǎng)頁制作我的總結(jié)有下面幾點,首先對于一個網(wǎng)站來說,首頁設(shè)計、是一個很好的布局工具,另外div層的應(yīng)用更能夠錦上添花。
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 房屋買賣合同范本精簡版3篇
- 教育機構(gòu)奠基儀式合同3篇
- 整改方案檢察建議書版3篇
- 擋水墻施工合同樣本3篇
- 地鐵建設(shè)挖掘機操作合同
- 購物中心醫(yī)生招聘合同
- 水庫管道鋪設(shè)改造非開挖施工合同
- 試駕車輛環(huán)保標準協(xié)議
- 混凝土工程分包施工合同
- 置業(yè)指南二手住宅合同樣本
- 《基業(yè)長青》讀書心得總結(jié)
- 無功補償安裝施工技術(shù)措施
- 課程設(shè)計-設(shè)計一臺上料機液壓系統(tǒng)
- 內(nèi)科學萬能公式
- 雙減背景下小學語文作業(yè)的有效設(shè)計課件
- 國開成本會計第15章綜合練習試題及答案
- DB31-T 836-2021 制冷劑使用技術(shù)通則
- 服裝類供貨服務(wù)方案
- 基坑土方施工方案評審意見
- 會陰阻滯麻醉完整版PPT課件
- 四輥不可逆鋁板冷軋機的設(shè)計
評論
0/150
提交評論