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

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

1.1任務(wù)描述

1.2相關(guān)知識(shí)

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)站項(xiàng)目需求分析的流程

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

1.3.1頁(yè)面級(jí)設(shè)計(jì)需求

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

1.4任務(wù)拓展

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

1.6能力評(píng)估

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

2.1任務(wù)描述

2.2相關(guān)知識(shí)

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

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

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

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

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

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

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

2.4任務(wù)拓展

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

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

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

2.6能力評(píng)估

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

3.1任務(wù)描述

3.2相關(guān)知識(shí)

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動(dòng)畫

3.2.10蒙版

3.3任務(wù)實(shí)施

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

3.3.2“購(gòu)買”按鈕圖片制作

3.3.3頭部高級(jí)搜索按鈕背景的制作

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

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

3.3.6GIF動(dòng)畫設(shè)計(jì)制作

3.3.7蒙版Banner圖制作

3.4任務(wù)拓展

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

3.6能力評(píng)估

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

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

4.1任務(wù)描述

4.2相關(guān)知識(shí)

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ù)實(shí)現(xiàn)

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

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

4.4任務(wù)拓展

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

4.4.2head三標(biāo)簽SEO

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

4.6能力評(píng)估

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

5.1任務(wù)描述

5.2相關(guān)知識(shí)

5.2.1div標(biāo)簽

5.2.2span標(biāo)簽

5.3任務(wù)實(shí)施

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

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

5.4任務(wù)拓展

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

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

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

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

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

5.6能力評(píng)估

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

6．1任務(wù)描述

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

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ù)實(shí)現(xiàn)

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

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

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

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

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

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

6．4任務(wù)拓展

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

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

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

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

6.6能力評(píng)估

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

7．1任務(wù)描述

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

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

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

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

7．3．1購(gòu)物車主體部分整體結(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注冊(cè)頁(yè)XHTML總體結(jié)構(gòu)

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

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

7.6能力評(píng)估

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

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

8．1任務(wù)描述

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

8．2．1CSS樣式表

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

8．2．3盒子模型

8．2．4浮動(dòng)布局

8．2．5定位布局

8．3任務(wù)實(shí)施

8．3．1首頁(yè)布局與定位

8．3．2圖書分類頁(yè)布局與定位

8．3．3購(gòu)物車頁(yè)布局與定位

8．4任務(wù)拓展

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

8.6能力評(píng)估

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

9．1任務(wù)描述

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

9．2．1使用列表元素

9．2．2背景控制

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

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

9．3任務(wù)實(shí)施

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

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

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

9．4任務(wù)拓展

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

9.6能力評(píng)估

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

10．1任務(wù)描述

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

10．2．1圓角背景控制

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

10．3任務(wù)實(shí)施

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

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

10．4任務(wù)拓展

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

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

10．4．3用戶注冊(cè)頁(yè)樣式

10．4．4用戶登錄頁(yè)樣式

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

10.6能力評(píng)估

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

11．1任務(wù)描述

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

11．2．1CSS縮寫

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

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

11．2．4容器不擴(kuò)展問題

11．3任務(wù)實(shí)施

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

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

11．4任務(wù)拓展

11．4．1首頁(yè)main_center區(qū)媒體熱點(diǎn)區(qū)樣式

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

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

11.6能力評(píng)估

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

12．1任務(wù)描述

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

12．2．1細(xì)線表格

12．2．2表格隔行變色

12．3任務(wù)實(shí)施

12．3．1購(gòu)物車頁(yè)表格列表效果

12．3．2購(gòu)物車頁(yè)表格隔行變色效果

12．4任務(wù)拓展

12．4．1用戶登錄頁(yè)樣式

12．4．2用戶注冊(cè)頁(yè)樣式

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

12.6能力評(píng)估

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

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

13．1任務(wù)描述

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

13．2．1jQuery概述

13．2．2jQuery文件下載

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

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

13．2．5jQuery樣式效果

13．3任務(wù)實(shí)施

13．3．1表單不為空的驗(yàn)證

13．3．2表單郵箱格式驗(yàn)證

13．3．3表單兩次密碼相同驗(yàn)證

13．4任務(wù)拓展

13．4．1用戶自定義jQuery方法驗(yàn)證

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

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

13.6能力評(píng)估

參考文獻(xiàn)