第一階段網(wǎng)站的前期準(zhǔn)備

任務(wù)1“叮當(dāng)網(wǎng)上書店”項目需求分析

1.1任務(wù)描述

1.2相關(guān)知識

1.2.1什么是Web標(biāo)準(zhǔn)

1.2.2Web標(biāo)準(zhǔn)的歷史

1.2.3Web標(biāo)準(zhǔn)的構(gòu)成

1.2.4網(wǎng)站項目需求分析的流程

1.3任務(wù)實現(xiàn)

1.3.1頁面級設(shè)計需求

1.3.2網(wǎng)站功能級的需求

1.4任務(wù)拓展

1.5任務(wù)小結(jié)

1.6能力評估

任務(wù)2“叮當(dāng)網(wǎng)上書店”前臺版面設(shè)計稿

2.1任務(wù)描述

2.2相關(guān)知識

2.2.1網(wǎng)站常用的布局結(jié)構(gòu)

2.2.2網(wǎng)站常用的頁面版式

2.3任務(wù)實現(xiàn)

2.3.1“叮當(dāng)網(wǎng)上書店”首頁版面設(shè)計稿

2.3.2“叮當(dāng)網(wǎng)上書店”登錄頁版面設(shè)計稿

2.3.3“叮當(dāng)網(wǎng)上書店”圖書分類頁版面設(shè)計稿

2.3.4“叮當(dāng)網(wǎng)上書店”購物車頁版面設(shè)計稿

2.4任務(wù)拓展

2.4.1“叮當(dāng)網(wǎng)上書店”注冊頁版面設(shè)計稿

2.4.2“叮當(dāng)網(wǎng)上書店”圖書詳細頁版面設(shè)計

2.5任務(wù)小結(jié)

2.6能力評估

任務(wù)3“叮當(dāng)網(wǎng)上書店”圖片素材設(shè)計

3.1任務(wù)描述

3.2相關(guān)知識

3.2.1Photoshop工作環(huán)境

3.2.2像素與分辨率

3.2.3位圖和矢量圖

3.2.4圖像的顏色模式

3.2.5圖像的格式

3.2.6圖層

3.2.7Photoshop常用工具

3.2.8參考線

3.2.9Photoshop與GIF動畫

3.2.10蒙版

3.3任務(wù)實施

3.3.1“叮當(dāng)網(wǎng)上書店”Logo制作

3.3.2“購買”按鈕圖片制作

3.3.3頭部高級搜索按鈕背景的制作

3.3.4導(dǎo)航按鈕背景圖片制作

3.3.5分類導(dǎo)航條背景的制作

3.3.6GIF動畫設(shè)計制作

3.3.7蒙版Banner圖制作

3.4任務(wù)拓展

3.5任務(wù)小結(jié)

3.6能力評估

第二階段網(wǎng)站的結(jié)構(gòu)架設(shè)

任務(wù)4“叮當(dāng)網(wǎng)上書店”項目建站

4.1任務(wù)描述

4.2相關(guān)知識

4.2.1Dreamweaver CS6工作環(huán)境

4.2.2什么是XHTML

4.2.3XHTML文件結(jié)構(gòu)

4.2.4DTD文件

4.2.5XHTML編碼規(guī)則

4.2.6頭部標(biāo)簽head

4.3任務(wù)實現(xiàn)

4.3.1“叮當(dāng)網(wǎng)上書店”項目建站

4.3.2“叮當(dāng)網(wǎng)上書店”新建首頁

4.4任務(wù)拓展

4.4.1SEO——讓你的網(wǎng)站排名靠前

4.4.2head三標(biāo)簽SEO

4.5任務(wù)小結(jié)

4.6能力評估

任務(wù)5“叮當(dāng)網(wǎng)上書店”頁面框架結(jié)構(gòu)

5.1任務(wù)描述

5.2相關(guān)知識

5.2.1div標(biāo)簽

5.2.2span標(biāo)簽

5.3任務(wù)實施

5.3.1“叮當(dāng)網(wǎng)上書店”首頁XHTML框架結(jié)構(gòu)

5.3.2“叮當(dāng)網(wǎng)上書店”購物車頁XHTML框架結(jié)構(gòu)

5.4任務(wù)拓展

5.4.1“叮當(dāng)網(wǎng)上書店”登錄頁XHTML框架結(jié)構(gòu)

5.4.2“叮當(dāng)網(wǎng)上書店”注冊頁XHTML框架結(jié)構(gòu)

5.4.3“叮當(dāng)網(wǎng)上書店”圖書分類頁XHTML框架結(jié)構(gòu)

5.4.4“叮當(dāng)網(wǎng)上書店”圖書詳細頁XHTML框架結(jié)構(gòu)

5.5任務(wù)小結(jié)

5.6能力評估

任務(wù)6“叮當(dāng)網(wǎng)上書店”首頁總體結(jié)構(gòu)

6．1任務(wù)描述

6．2相關(guān)知識

6．2．1插入圖片——img標(biāo)簽

6．2．2列表——ul、ol和li標(biāo)簽

6．2．3超鏈接——a標(biāo)簽

6．2．4表單類標(biāo)簽

6．2．5hn和p標(biāo)簽

6．3任務(wù)實現(xiàn)

6．3．1首頁header區(qū)域XHTML模塊結(jié)構(gòu)

6．3．2首頁search區(qū)域XHTML模塊結(jié)構(gòu)

6．3．3首頁中間left區(qū)域XHTML模塊結(jié)構(gòu)

6．3．4首頁中間right區(qū)域XHTML模塊結(jié)構(gòu)

6．3．5首頁中間center區(qū)域XHTML模塊結(jié)構(gòu)

6．3．6首頁footer區(qū)域XHTML模塊結(jié)構(gòu)

6．4任務(wù)拓展

6．4．1圖書分類頁XHTML總體結(jié)構(gòu)

6．4．2圖書詳細頁XHTML總體結(jié)構(gòu)

6．4．3登錄頁XHTML總體結(jié)構(gòu)

6.5任務(wù)小結(jié)

6.6能力評估

任務(wù)7“叮當(dāng)網(wǎng)上書店”購物車頁整體結(jié)構(gòu)

7．1任務(wù)描述

7．2相關(guān)知識

7．2．1table、tr、th和td標(biāo)簽

7．2．2thead、tbody和tfoot標(biāo)簽

7．3任務(wù)實現(xiàn)

7．3．1購物車主體部分整體結(jié)構(gòu)

7．3．2標(biāo)題shoppingtitle結(jié)構(gòu)

7．3．3表頭shoppingtabletop結(jié)構(gòu)

7．3．4中間表格區(qū)shoppingtablecenter結(jié)構(gòu)

7．3．5底部shoppingtablefooter結(jié)構(gòu)

7．4任務(wù)拓展

7．4．1注冊頁XHTML總體結(jié)構(gòu)

7.4.2登錄頁XHTML總體結(jié)構(gòu)

7.5任務(wù)小結(jié)

7.6能力評估

第三階段網(wǎng)站的效果設(shè)計

任務(wù)8“叮當(dāng)網(wǎng)上書店”頁面布局與定位

8．1任務(wù)描述

8．2相關(guān)知識

8．2．1CSS樣式表

8．2．2應(yīng)用CSS到網(wǎng)頁中

8．2．3盒子模型

8．2．4浮動布局

8．2．5定位布局

8．3任務(wù)實施

8．3．1首頁布局與定位

8．3．2圖書分類頁布局與定位

8．3．3購物車頁布局與定位

8．4任務(wù)拓展

8.5任務(wù)小結(jié)

8.6能力評估

任務(wù)9“叮當(dāng)網(wǎng)上書店”首頁navlink區(qū)樣式

9．1任務(wù)描述

9．2相關(guān)知識

9．2．1使用列表元素

9．2．2背景控制

9．2．3文本與段落樣式

9．2．4超鏈接樣式控制

9．3任務(wù)實施

9．3．1首頁navlink區(qū)Logo圖片樣式

9．3．2首頁navlink區(qū)導(dǎo)航菜單樣式

9．3．3首頁navlink區(qū)用戶快速導(dǎo)航樣式

9．4任務(wù)拓展

9.5任務(wù)小結(jié)

9.6能力評估

任務(wù)10“叮當(dāng)網(wǎng)上書店”首頁search區(qū)樣式

10．1任務(wù)描述

10．2相關(guān)知識

10．2．1圓角背景控制

10．2．2表單UI設(shè)計效果

10．3任務(wù)實施

10．3．1首頁search區(qū)圓角背景樣式

10．3．2首頁search區(qū)表單設(shè)計樣式

10．4任務(wù)拓展

10．4．1首頁main_left、main_right兩側(cè)樣式

10．4．2首頁main_right用戶登錄區(qū)樣式

10．4．3用戶注冊頁樣式

10．4．4用戶登錄頁樣式

10.5任務(wù)小結(jié)

10.6能力評估

任務(wù)11“叮當(dāng)網(wǎng)上書店”首頁main_center區(qū)樣式

11．1任務(wù)描述

11．2相關(guān)知識

11．2．1CSS縮寫

11．2．2CSS Hack技術(shù)

11．2．3ul的不同表現(xiàn)

11．2．4容器不擴展問題

11．3任務(wù)實施

11．3．1首頁main_center區(qū)主編推薦區(qū)樣式

11．3．2首頁main_center區(qū)本月新出版區(qū)樣式

11．4任務(wù)拓展

11．4．1首頁main_center區(qū)媒體熱點區(qū)樣式

11．4．2首頁footer區(qū)樣式

11.5任務(wù)小結(jié)

11.6能力評估

任務(wù)12“叮當(dāng)網(wǎng)上書店”購物車頁樣式

12．1任務(wù)描述

12．2相關(guān)知識

12．2．1細線表格

12．2．2表格隔行變色

12．3任務(wù)實施

12．3．1購物車頁表格列表效果

12．3．2購物車頁表格隔行變色效果

12．4任務(wù)拓展

12．4．1用戶登錄頁樣式

12．4．2用戶注冊頁樣式

12.5任務(wù)小結(jié)

12.6能力評估

第四階段網(wǎng)站的人機交互

任務(wù)13“叮當(dāng)網(wǎng)上書店”表單驗證交互

13．1任務(wù)描述

13．2相關(guān)知識

13．2．1jQuery概述

13．2．2jQuery文件下載

13．2．3jQuery驗證函數(shù)

13．2．4jQuery驗證代碼結(jié)構(gòu)

13．2．5jQuery樣式效果

13．3任務(wù)實施

13．3．1表單不為空的驗證

13．3．2表單郵箱格式驗證

13．3．3表單兩次密碼相同驗證

13．4任務(wù)拓展

13．4．1用戶自定義jQuery方法驗證

13．4．2采用jQuery和Ajax實現(xiàn)無刷新驗證

13.5任務(wù)小結(jié)

13.6能力評估

參考文獻