網(wǎng)上書店網(wǎng)站設(shè)計(jì)課件.ppt

《網(wǎng)上書店網(wǎng)站設(shè)計(jì)課件.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、網(wǎng)上書店網(wǎng)站設(shè)計(jì)講解和分析需求講解和分析需求（20分鐘）學(xué)員首先閱讀項(xiàng)目案例需求和實(shí)現(xiàn)步驟教員講解需求，學(xué)員理解需求并分析問(wèn)題描述用戶注冊(cè)用戶登錄首頁(yè)（網(wǎng)站內(nèi)容的綜合展示）某類商品展示詳細(xì)商品展示商品購(gòu)買購(gòu)物車用戶注冊(cè)幫助中心網(wǎng)上書店網(wǎng)站設(shè)計(jì)，實(shí)現(xiàn)如下功能：網(wǎng)站整體效果查看問(wèn)題分析創(chuàng)建模板頁(yè)：index.dwt（網(wǎng)頁(yè)頭部及底部）用戶注冊(cè)頁(yè)：register.html用戶登錄頁(yè)：login.html幫助中心：help.html網(wǎng)站首頁(yè)：index.html圖書分類頁(yè)：class.html商品詳細(xì)頁(yè)：product.html百貨

2、/化妝品/玩具分類頁(yè)：class1.html我的當(dāng)當(dāng)（購(gòu)買結(jié)算頁(yè)面）：shopping.html網(wǎng)上書店網(wǎng)站設(shè)計(jì)共有以下幾個(gè)頁(yè)面：難點(diǎn)分析-1模板頁(yè)用DIV套表格實(shí)現(xiàn)網(wǎng)頁(yè)布局網(wǎng)站頭部網(wǎng)站可編輯區(qū)域網(wǎng)站底部難點(diǎn)分析-2超鏈接隨鼠標(biāo)懸停背景圖改變.A{background-image:url(top-bg11.jpg);width:131px;height:31px;}.A:hover{background-image:url(top-bg12.jpg);width:131px;height:31px;}鼠標(biāo)離開時(shí)超鏈接背景圖鼠

3、標(biāo)停留在超鏈接上時(shí)背景圖超鏈接背景圖寬度超鏈接背景圖高度超鏈接背景圖寬度超鏈接背景圖高度查看鏈接效果難點(diǎn)分析-3用戶注冊(cè)、登錄頁(yè)面表單中的文本框細(xì)邊框樣式input{border:1#D3EAF3solid;width:160px;文本框?qū)挾?、顏色、樣式設(shè)定文本框?qū)挾入y點(diǎn)分析-4.submit{border-bottom:1#ccccccsolid;border-right:1#ccccccsolid;border-top:0#ccccccsolid;border-left:0#ccccccsolid;background-

4、color:#D3EAF3;width:80px;height:25px;}提交按鈕四個(gè)邊框的寬度、顏色、樣式設(shè)定提交按鈕背景色、寬、高設(shè)定用戶注冊(cè)、登錄頁(yè)面表單中的提交按鈕邊框樣式難點(diǎn)分析-5提交按鈕用圖片實(shí)現(xiàn)，下面以商品購(gòu)買按鈕為例提交按鈕代碼：.sale{background-image:url(sale.gif);width:84px;height:24px;border:0;}實(shí)現(xiàn)圖片提交按扭樣式：按鈕背景圖按鈕樣式按鈕背景圖的寬、高設(shè)定按鈕背景圖無(wú)邊框

5、lue=" “class="sale”>階段劃分第一階段（40分鐘）制作模板頁(yè)：index.dwt第二階段（40分鐘）用戶注冊(cè)及登錄頁(yè)面：register.html、login.html第三階段（40分鐘）網(wǎng)站首頁(yè)：index.html第四階段（60分鐘）商品分類頁(yè)面class.html及class1.html網(wǎng)頁(yè)第五階段（30分鐘）商品詳細(xì)頁(yè)面product.html第六階段（30分鐘）商品購(gòu)買結(jié)算頁(yè)面：shopping.html第七階段（20分鐘）幫助中心頁(yè)面：help.html第一階段第一階段（40分鐘）利用

6、Dreamweaver制作模板頁(yè)：index.dwt要求學(xué)員自己動(dòng)手操作，教員巡視，解答學(xué)員提出的問(wèn)題階段檢查針對(duì)第一階段抽查學(xué)員的操作結(jié)果教員給出點(diǎn)評(píng)或集中演示難點(diǎn)部分第二階段第二階段（40分鐘）利用Dreamweaver制作用戶注冊(cè)頁(yè)面及登錄頁(yè)面：register.html、login.html要求學(xué)員自己動(dòng)手設(shè)計(jì)制作網(wǎng)頁(yè)，教員巡視，解答學(xué)員提出的問(wèn)題注冊(cè)頁(yè)面效果查看登錄頁(yè)面效果查看階段檢查針對(duì)第二階段抽查學(xué)員的網(wǎng)頁(yè)設(shè)計(jì)制作結(jié)果教員給出點(diǎn)評(píng)或集中演示難點(diǎn)部分注冊(cè)頁(yè)面效果查看登錄頁(yè)面效果查看第三階段第三階段（40分鐘）利用

7、Dreamweaver制作網(wǎng)站首頁(yè)：index.html要求學(xué)員自己動(dòng)手進(jìn)行網(wǎng)頁(yè)整體布局，制作網(wǎng)頁(yè)，教員巡視，解答學(xué)員提出的問(wèn)題首頁(yè)效果查看階段檢查針對(duì)第三階段抽查學(xué)員的網(wǎng)頁(yè)制作結(jié)果抽查學(xué)員制作的整體頁(yè)面，要求學(xué)員上臺(tái)演示制作的網(wǎng)頁(yè)并進(jìn)行講解教員給出點(diǎn)評(píng)，集中問(wèn)題講解首頁(yè)效果查看第四階段第四階段（60分鐘）利用Dreamweaver制作分類頁(yè)面class.html及class1.html網(wǎng)頁(yè)要求學(xué)員自己設(shè)計(jì)頁(yè)面布局進(jìn)行網(wǎng)頁(yè)制作，教員巡視，解答學(xué)員提出的問(wèn)題圖書分類頁(yè)面效果查看百貨商品分類頁(yè)面效果查看階段檢查針對(duì)第四階段抽查學(xué)

8、員的網(wǎng)頁(yè)制作結(jié)果抽查學(xué)員制作的整體網(wǎng)頁(yè)，要求學(xué)員上臺(tái)演示制作的網(wǎng)頁(yè)并進(jìn)行講解教員給出點(diǎn)評(píng)，集中問(wèn)題講解圖書分類頁(yè)面效果查看百貨商品分類頁(yè)面效果查看第五階段第五階段（30分鐘）：利用Dreamweaver制作商品詳細(xì)頁(yè)面product.html要求學(xué)員自己設(shè)計(jì)制作頁(yè)面，教員巡視，解答學(xué)員提出