14.項(xiàng)目實(shí)戰(zhàn)網(wǎng)上書店網(wǎng)站設(shè)計(jì)v1

1、北風(fēng)網(wǎng)項(xiàng)目培訓(xùn)講師：風(fēng)舞煙北風(fēng)網(wǎng)軟件工程師IT高端培訓(xùn)(BF-TECH1.0)初級階段課程HTML XHTML CS3、JavaScript網(wǎng)頁制作從入門到精通項(xiàng)目實(shí)戰(zhàn)：網(wǎng)上書店網(wǎng)站設(shè)計(jì) 問題描述 用戶注冊 用戶登錄 首頁（網(wǎng)站內(nèi)容的綜合展示） 某類商品展示 詳細(xì)商品展示 商品購買 購物車 用戶注冊幫助中心網(wǎng)上書店網(wǎng)站設(shè)計(jì)，實(shí)現(xiàn)如下功能：網(wǎng)站整體效果查看問題分析創(chuàng)建模板頁：index.dwt（網(wǎng)頁頭部及底部）用戶注冊頁：register.html用戶登錄頁：login.html幫助中心：help.html網(wǎng)站首頁：index.html圖書分類頁：class.html商品詳細(xì)頁：product.

2、html百貨/化妝品/玩具分類頁：class1.html我的當(dāng)當(dāng)（購買結(jié)算頁面）：shopping.html網(wǎng)上書店網(wǎng)站設(shè)計(jì)共有以下幾個(gè)頁面：難點(diǎn)分析-1模板頁用DIV套表格實(shí)現(xiàn)網(wǎng)頁布局網(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í)超鏈接背景圖鼠標(biāo)停留在超鏈接上時(shí)背景圖超鏈接背景圖寬度

3、超鏈接背景圖高度超鏈接背景圖寬度超鏈接背景圖高度查看鏈接效果難點(diǎn)分析-3用戶注冊、登錄頁面表單中的文本框細(xì)邊框樣式input border:1 #D3EAF3 solid; width:160px; 文本框?qū)挾?、顏色、樣式設(shè)定文本框?qū)挾入y點(diǎn)分析-4.submitborder-bottom:1 #cccccc solid;border-right:1 #cccccc solid;border-top:0 #cccccc solid;border-left:0 #cccccc solid;background-color:#D3EAF3;width:80px;height:25px; 提交按鈕四個(gè)

4、邊框的寬度、顏色、樣式設(shè)定提交按鈕背景色、寬、高設(shè)定用戶注冊、登錄頁面表單中的提交按鈕邊框樣式難點(diǎn)分析-5提交按鈕用圖片實(shí)現(xiàn)，下面以商品購買按鈕為例提交按鈕代碼：.sale background-image:url(sale.gif); width:84px;height:24px; border:0; 實(shí)現(xiàn)圖片提交按扭樣式：按鈕背景圖按鈕樣式按鈕背景圖的寬、高設(shè)定按鈕背景圖無邊框階段劃分第一階段（40分鐘） 制作模板頁：index.dwt第二階段（ 40分鐘） 用戶注冊及登錄頁面：register.html、login.html 第三階段（40分鐘） 網(wǎng)站首頁：index.html 第四階段（60分鐘） 商品分類頁面class.html及class1.html網(wǎng)頁 第五階段（30分鐘） 商品詳細(xì)頁面product.html 第六階段（30分鐘） 商品購買結(jié)算頁面：shopping.html 第七階段（20分鐘） 幫助中心頁面：help.html 總結(jié)教員對本次項(xiàng)目案例鞏固的知識點(diǎn)總結(jié)（20分鐘）CSS樣