第一階段網站的前期準備

任務1“叮當網上書店”項目需求分析

1.1任務描述

1.2相關知識

1.2.1什么是Web標準

1.2.2Web標準的歷史

1.2.3Web標準的構成

1.2.4網站項目需求分析的流程

1.3任務實現(xiàn)

1.3.1頁面級設計需求

1.3.2網站功能級的需求

1.4任務拓展

1.5任務小結

1.6能力評估

任務2“叮當網上書店”前臺版面設計稿

2.1任務描述

2.2相關知識

2.2.1網站常用的布局結構

2.2.2網站常用的頁面版式

2.3任務實現(xiàn)

2.3.1“叮當網上書店”首頁版面設計稿

2.3.2“叮當網上書店”登錄頁版面設計稿

2.3.3“叮當網上書店”圖書分類頁版面設計稿

2.3.4“叮當網上書店”購物車頁版面設計稿

2.4任務拓展

2.4.1“叮當網上書店”注冊頁版面設計稿

2.4.2“叮當網上書店”圖書詳細頁版面設計

2.5任務小結

2.6能力評估

任務3“叮當網上書店”圖片素材設計

3.1任務描述

3.2相關知識

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任務實施

3.3.1“叮當網上書店”Logo制作

3.3.2“購買”按鈕圖片制作

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

3.3.4導航按鈕背景圖片制作

3.3.5分類導航條背景的制作

3.3.6GIF動畫設計制作

3.3.7蒙版Banner圖制作

3.4任務拓展

3.5任務小結

3.6能力評估

第二階段網站的結構架設

任務4“叮當網上書店”項目建站

4.1任務描述

4.2相關知識

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

4.2.2什么是XHTML

4.2.3XHTML文件結構

4.2.4DTD文件

4.2.5XHTML編碼規(guī)則

4.2.6頭部標簽head

4.3任務實現(xiàn)

4.3.1“叮當網上書店”項目建站

4.3.2“叮當網上書店”新建首頁

4.4任務拓展

4.4.1SEO——讓你的網站排名靠前

4.4.2head三標簽SEO

4.5任務小結

4.6能力評估

任務5“叮當網上書店”頁面框架結構

5.1任務描述

5.2相關知識

5.2.1div標簽

5.2.2span標簽

5.3任務實施

5.3.1“叮當網上書店”首頁XHTML框架結構

5.3.2“叮當網上書店”購物車頁XHTML框架結構

5.4任務拓展

5.4.1“叮當網上書店”登錄頁XHTML框架結構

5.4.2“叮當網上書店”注冊頁XHTML框架結構

5.4.3“叮當網上書店”圖書分類頁XHTML框架結構

5.4.4“叮當網上書店”圖書詳細頁XHTML框架結構

5.5任務小結

5.6能力評估

任務6“叮當網上書店”首頁總體結構

6．1任務描述

6．2相關知識

6．2．1插入圖片——img標簽

6．2．2列表——ul、ol和li標簽

6．2．3超鏈接——a標簽

6．2．4表單類標簽

6．2．5hn和p標簽

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

6．3．1首頁header區(qū)域XHTML模塊結構

6．3．2首頁search區(qū)域XHTML模塊結構

6．3．3首頁中間left區(qū)域XHTML模塊結構

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

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

6．3．6首頁footer區(qū)域XHTML模塊結構

6．4任務拓展

6．4．1圖書分類頁XHTML總體結構

6．4．2圖書詳細頁XHTML總體結構

6．4．3登錄頁XHTML總體結構

6.5任務小結

6.6能力評估

任務7“叮當網上書店”購物車頁整體結構

7．1任務描述

7．2相關知識

7．2．1table、tr、th和td標簽

7．2．2thead、tbody和tfoot標簽

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

7．3．1購物車主體部分整體結構

7．3．2標題shoppingtitle結構

7．3．3表頭shoppingtabletop結構

7．3．4中間表格區(qū)shoppingtablecenter結構

7．3．5底部shoppingtablefooter結構

7．4任務拓展

7．4．1注冊頁XHTML總體結構

7.4.2登錄頁XHTML總體結構

7.5任務小結

7.6能力評估

第三階段網站的效果設計

任務8“叮當網上書店”頁面布局與定位

8．1任務描述

8．2相關知識

8．2．1CSS樣式表

8．2．2應用CSS到網頁中

8．2．3盒子模型

8．2．4浮動布局

8．2．5定位布局

8．3任務實施

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

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

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

8．4任務拓展

8.5任務小結

8.6能力評估

任務9“叮當網上書店”首頁navlink區(qū)樣式

9．1任務描述

9．2相關知識

9．2．1使用列表元素

9．2．2背景控制

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

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

9．3任務實施

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

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

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

9．4任務拓展

9.5任務小結

9.6能力評估

任務10“叮當網上書店”首頁search區(qū)樣式

10．1任務描述

10．2相關知識

10．2．1圓角背景控制

10．2．2表單UI設計效果

10．3任務實施

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

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

10．4任務拓展

10．4．1首頁main_left、main_right兩側樣式

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

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

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

10.5任務小結

10.6能力評估

任務11“叮當網上書店”首頁main_center區(qū)樣式

11．1任務描述

11．2相關知識

11．2．1CSS縮寫

11．2．2CSS Hack技術

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

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

11．3任務實施

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

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

11．4任務拓展

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

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

11.5任務小結

11.6能力評估

任務12“叮當網上書店”購物車頁樣式

12．1任務描述

12．2相關知識

12．2．1細線表格

12．2．2表格隔行變色

12．3任務實施

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

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

12．4任務拓展

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

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

12.5任務小結

12.6能力評估

第四階段網站的人機交互

任務13“叮當網上書店”表單驗證交互

13．1任務描述

13．2相關知識

13．2．1jQuery概述

13．2．2jQuery文件下載

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

13．2．4jQuery驗證代碼結構

13．2．5jQuery樣式效果

13．3任務實施

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

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

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

13．4任務拓展

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

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

13.5任務小結

13.6能力評估

參考文獻