電商系統(tǒng)設(shè)計報告-資料下載頁
2025-08-03 05:42本頁面
【正文】 中，我們輸入mailto:test@。完成后的頁面如圖所示圖47首頁截圖商品展示頁面我們可以利用dreamweaver自帶的模板進行修改，方法如下:選擇新建一個頁面，在彈出的窗口中選擇如下圖所示圖48模板然后我們對新建的頁面進行修改。首先將背景顏色更改為符合我們網(wǎng)站風格的顏色，用鼠標點擊背景的空白處，我們可以再dreamweaver的下方看見背景的屬性設(shè)置菜單，然后我們只需要將里面的屬性修改為我們需要的屬性即可，具體的參數(shù)設(shè)置如下圖所示圖49屬性然后建立一個頁面，在代碼欄中我們寫入需要設(shè)置的CSS樣式代碼，里面包括網(wǎng)頁中文字的樣式和部分背景圖片的樣式。然后保存為CSS后綴的文件即可。返回之前所建立的商品展示頁面，在網(wǎng)頁代碼中應用建好的CSS樣式，輸入的代碼如下link rel=stylesheet href=css/ type=text/css /接著，我們在頁面下方的表格中設(shè)置滾動提示文字，輸入的代碼如下PMARQUEE class=pageName更多商品，添加中Ing.../MARQUEE/P在網(wǎng)頁頂部的位置，我們添加一個導航條，用于其他分類商品的鏈接和返回首頁，從左到右輸入的文字如下圖410導航欄接著選中文字，然后在下方的屬性欄中添加需要連接到的地址頁面。最后對網(wǎng)頁進行一些小的修整，完成后的頁面如下圖411商品展示頁面首先插入表格并進行分割，然后在分割好后的表格中插入事先準備好的圖片，完成界面的基本制作。接著對網(wǎng)頁的細節(jié)進行制作，在右側(cè)的表格中，我們選擇插入—表單—文本域，在此我們需要插入兩個表單，一個用于填寫用戶名稱，一個用于填寫用戶密碼，并將這兩個表單分別命名為t1和t2，接著在這兩個表單的上方添加上文字提示。然后在兩個表格的最下方添加兩個按鈕，一個命名為提交，用于提交表單內(nèi)容，命名為取消，用于重置表單。完成后的效果如圖所示圖412登陸框接著我們編寫一個簡單的javascript程序，用于提示用戶的登陸情況。代碼如下script language=javascriptfunction fun1(){alert(登陸成功！)。}/script最后，我們在網(wǎng)頁的左下角設(shè)置一個返回首頁的鏈接，完成后的效果如圖圖413登陸頁面插入一張表格設(shè)置為1列5行，在第一行中我們設(shè)置一個用于返回首頁的鏈接并設(shè)置為向右對齊，在第3行中我們輸入部分的文字，用于提醒注冊的用戶。在第5行中，我們插入5個文本域，分別用作輸入用戶名稱，用戶密碼，驗證密碼，用戶郵箱，用戶昵稱，然后在下面插入連個單選按鈕用于用戶設(shè)置性別。最后，在最下方設(shè)置兩個按鈕，用于用戶提交表單和重置表單，完成的效果如下圖所示圖414注冊頁面接著我們編寫用于驗證用戶輸入的信息是否合理的javascript程序代碼，部分代碼如下function checkSubmit() //用于驗證用戶輸入的信息是否正確{if(==)//判斷用戶是否輸入了用戶名{ ()。 alert(用戶名不能為空！)。 return false。}if(==)//判斷兩次輸入的密碼是否一致{ ()。 alert(登陸密碼不能為空！)。 return false。}if(!=){ ()。 alert(兩次密碼不一致！)。 return false。}if(==)//判斷用戶是否輸入了EMAIL地址{ ()。 alert(Email 不能為空！)。 return false。}if(==)//判斷用戶是否輸入了昵稱{ ()。 alert(用戶昵稱不能為空！)。 return false。}}插入一張表格并進行分割，插入事先準備好的圖片并設(shè)置好CSS樣式，然后在頁面表格中左側(cè)插入一個文本域，用于輸入購買的商品數(shù)量，接著在商品數(shù)量表單下面插入兩個按鈕，一個用于提交輸入的數(shù)量并提示購買成功操作，另一個用于取消當前的操作，完成后的頁面如圖所示圖415結(jié)賬頁面調(diào)試運行調(diào)試將站點文件移動到別的文件夾，進行測試，這樣可以檢測網(wǎng)頁中的鏈接是否添加正確。首先進入站點文件夾，在瀏覽器中顯示如下圖所示圖51首頁測試我們可以發(fā)現(xiàn)部分圖片顯示不正常，因此可以判定有部分圖片的鏈接添加的不正確，檢查后發(fā)現(xiàn)無法顯示的圖片是因為圖片的地址設(shè)置為絕對路徑，因此，當文件夾的位置改變后，發(fā)生了圖片顯示不正常的情況。修改后的結(jié)果如下圖所示圖52首頁鏈接修改后可以看到網(wǎng)頁已經(jīng)可以正常顯示。在打開的首頁中，我們點擊左側(cè)導航欄中的“進口零食”鏈接，進入如下頁面圖53進口零食頁面發(fā)現(xiàn)一切正常，然后在該頁面中，我們點擊頂部導航欄中特產(chǎn)零食鏈接圖54導航欄測試發(fā)現(xiàn)一切正常，然后我們在任意點擊頂部的其他任意鏈接圖55其他鏈接測試發(fā)現(xiàn)一切正常，并且我們可以看到，下部的滾動文字提示運行正常，如圖所示圖56底部效果 數(shù)據(jù)測試返回首頁，然后我們進入注冊頁面,進入頁面后，我們可以看到頁面顯示正常，然后我們輸入數(shù)據(jù)進行測試，當我們不輸入信息是，點擊提交按鈕，如圖所示圖57用戶名提示彈出提示“用戶名不能為空”，接著我們輸入兩組不同的密碼數(shù)據(jù)，如圖所示圖58密碼提示彈出提示“兩次密碼不一致”，接著我們輸入正確的數(shù)據(jù)，成功跳轉(zhuǎn)回首頁，證明注冊成功。在首頁中，我們點擊登錄鏈接，輸入任意用戶賬戶和密碼后，點擊登錄按鈕，結(jié)果如圖所示圖59登陸提示提示“登錄成功”，點擊確認后，返回首頁。當輸入用戶數(shù)據(jù)后，我們點擊“清空”按鈕，可以看到用戶輸入的數(shù)據(jù)已經(jīng)清空。我們在商品展示頁面，點擊任意我們想要購買的商品后，進入結(jié)賬頁面，在結(jié)賬頁面中，我們可以看到默認的商品數(shù)量為1，接著修改商品數(shù)量，如圖所示圖510商品數(shù)量點擊取消后圖511成功提示彈出取消成功的提示并且商品的數(shù)量重置為1，如圖所示圖512重置結(jié)果當我們輸入商品數(shù)量后，點擊提交后圖513成功提示彈出購買成功提示，并且返回首頁。39 / 39
教學課件相關(guān)推薦
鄂ICP備17016276號-1