網頁設計與布局項目化教程(HTML+CSS+DIV)

《網頁設計與布局項目化教程(HTML+CSS+DIV)》是2013年9月人民郵電出版社出版的圖書，作者是溫謙、周建國、練源。

基本介紹

• 書名：網頁設計與布局項目化教程(HTML+CSS+DIV)
• 作者：溫謙、周建國、練源
• 出版社：人民郵電出版社
• 出版時間：2013年9月
• ISBN：9787115318671

編輯推薦

HTML+CSS+JavaScript三大網頁設計技術

　　項目式寫法

內容簡介

本書以六大完整案例為線索，緊密圍繞在使用CSS +DIV布局製作網頁過程中遇到的實際需要和應該掌握的技術，全面介紹了CSS布局網頁各方面的內容和技巧。 　　

　　書中摒棄了案例書常見的一味羅列步驟，輕視技術原理的做法，把案例作為學習手段，不但側重講解CSS盒子模型、標準流、浮動、定位四大核心技術原理，更側重講解如何在實踐中套用它們。讀者通過案例，既可以掌握CSS的核心技術要點，也可以了解相關技術和工作流程，從而做到不但知其然，還知其所以然。　　

　　此外，本書還結合流行的CMS內容管理系統，講解了使用CSS進行模板設計的方法，使讀者可以舉一反三地掌握為各種內容管理系統設計模板的方法。　　

　　本書可作為高等職業院校網頁設計類課程教材，也適合具備一定HTML和網頁設計製作基礎的需要使用CSS的愛好者、Web設計人員和開發人員閱讀。

圖書目錄

第1章　從基礎開始　

1.1　(X)HTML與CSS　

1.1.1　DOCTYPE(文檔類型)的含義與選擇　

1.1.2　XHTML與HTML的重要區別　

1.1.3　CSS的基本思想　

1.1.4　CSS的引入　

1.1.5　瀏覽器與CSS　

1.2　CSS的基本選擇器　

1.2.1　理解CSS選擇器的思想　

1.2.2　標記選擇器　

1.2.3　類別選擇器　

1.2.4　ID選擇器　

1.3　在HTML中引入CSS的方法　

1.3.1　行內樣式　

1.3.2　內嵌式　

1.3.3　外部樣式表　

1.3.4　連結式　

1.3.5　各種方式的優先權問題　

1.4　動手體驗CSS　

1.4.1　從零開始　

1.4.2　使用CSS設定標題　

1.4.3　控制圖片　

1.4.4　設定正文　

1.4.5　設定整體頁面　

1.4.6　對段落分別進行設定　

1.4.7　兼容性檢查　

1.4.8　CSS的注釋　

1.5　網頁使用的編輯軟體　

1.5.1　可視化網頁製作軟體的優點　

1.5.2　可視化軟體的局限性　

1.5.3　善於使用代碼視圖的功能　

1.6　CSS的複合選擇器　

1.6.1　交集選擇器　

1.6.2　並集選擇器　

1.6.3　後代選擇器　

1.7　CSS的繼承特性　

1.7.1　繼承關係　

1.7.2　CSS繼承的運用　

1.8　CSS的層疊特性　

1.9　本章小結　

第2章　攝影師個人網站布局　

2.1　案例描述　

2.2　內容分析　

2.3　HTML結構設計　

2.4　原型設計　

2.5　頁面方案設計　

2.6　布局設計　

2.7　CSS技術準備——盒子模型　

2.8　設定頁面的整體背景　

2.9　製作照片展示區域　

2.10　設定網頁標題的圖像替換　

2.11　CSS技術準備——定位　

2.11.1　理解標準文檔流　

2.11.2　認識定位屬性　

2.11.3　絕對定位　

2.12　設定網頁標題的位置　

2.13　設定網頁文本內容　

2.14　本章小結　

第3章　生物研究中心網站布局　

3.1　案例描述　

3.2　內容分析　

3.3　原型設計　

3.4　頁面方案設計　

3.5　CSS技術準備——盒子的浮動　

3.5.1　設定浮動　

3.5.2　浮動的方向　

3.5.3　使用clear屬性清除浮動的影響　

3.5.4　擴展盒子的高度　

3.6　布局設計　

3.7　CSS技術準備——在CSS中設定框線　

3.7.1　對不同的框線設定不同的屬性值　

3.7.2　在一行中同時設定框線的寬度、顏色和樣式　

3.7.3　對一條框線設定與其他框線不同的屬性　

3.7.4　同時指定一條框線的一種屬性　

3.8　製作頁頭部分　

3.9　製作主體部分　

3.9.1　主體的左側部分　

3.9.2　主要內容區　

3.10　CSS技術擴展——擴充布局　

3.11　本章小結　

第4章　教育公司網站布局　

4.1　兩列布局　

4.2　案例描述　

4.3　內容分析　

4.4　原型設計　

4.5　CSS技術準備——在CSS中使用背景圖像　

4.5.1　設定平鋪方式　

4.5.2　設定背景圖像的位置　

4.5.3　背景的簡寫　

4.5.4　圖像的固定設定　

4.6　製作標題圖像　

4.7　CSS技術準備——實現圓角設計　

4.8　製作頁頭部分　

4.8.1　搭建頁頭部分的HTML結構　

4.8.2　頁面標題的圖像替換　

4.8.3　頂部選單　

4.8.4　主選單　

4.8.5　搜尋框　

4.8.6　頁頭部分的圓角框　

4.9　製作主體部分　

4.9.1　結構分析　

4.9.2　麵包屑導航　

4.9.3　設定正文標題　

4.9.4　設定頁腳

4.9.5　添加頁面內容

4.10　本章小結

第5章　網上書店布局　

5.1　案例描述　

5.2　內容分析　

5.3　HTML結構設計　

5.4　原型設計　

5.5　頁面方案設計　

5.5.1　配色的技巧　

5.5.2　切片的技巧　

5.6　使用滑動門技術製作導航選單　

5.7　製作主體部分　

5.7.1　整體樣式設計　

5.7.2　內容部分的結構分析　

5.7.3　設定右側的主要內容列　

5.7.4　製作左邊欄　

5.8　總結CSS布局的優點　

5.9　製作可以適應變化寬度的圓角框　

5.10　CSS技術擴展——從“網頁”到“網站”　

5.10.1　歷史回顧　

5.10.2　不完善的辦法　

5.10.3　伺服器出場　

5.10.4　CMS出現　

5.10.5　具體操作　

5.10.6　CMS的弊端　

5.11　本章小結　

第6章　汽車服務公司網站布局　

6.1　案例描述　

6.2　內容分析　

6.3　HTML結構設計　

6.4　原型設計　

6.5　頁面方案設計與切圖　

6.6　頁面布局　

6.6.1　切片　

6.6.2　CSS技術準備——行內元素與塊級元素　

6.6.3　布局　

6.6.4　製作頂部選單　

6.6.5　製作標題圖像　

6.6.6　製作主體部分　

6.7　實現超連結特效　

6.7.1　技術準備——設定超連結的CSS樣式　

6.7.2　超連結效果　

6.8　兼容性檢查　

6.9　本章小結　

第7章　橘汁仙劍遊戲網站(靜態)布局　

7.1　構思設計　

7.1.1　站點分析定位　

7.1.2　學習考察同類站點　

7.1.3　構思規劃站點　

7.2　切片製作和生成　

7.2.1　切片的製作　

7.2.2　切片的生成　

7.3　頁面製作　

7.3.1　整體框架的構建　

7.3.2　頭部的製作　

7.3.3　首頁左側信息欄的製作　

7.3.4　首頁中部內容欄的製作　

7.3.5　在頁面右側添加百度搜尋　

7.3.6　在頁面右側添加廣告位　

7.3.7　分類目錄中導航的製作　

7.3.8　文章瀏覽區域的製作　

7.3.9　頁腳的製作　

7.3.10　用戶面板的製作　

7.4　本章小結　

第8章　橘汁仙劍遊戲網站(動態)布局　

8.1　SupeSite和Discuz!系統簡介　

8.2　系統安裝　

8.3　使用SupeSite系統　

8.3.1　登錄SupeSite後台設定　

8.3.2　基本設定　

8.3.3　資訊的發布和管理　

8.3.4　資訊等級審核　

8.3.5　資訊自定義欄位　

8.3.6　其他設定　

8.4　製作SupeSite模板　

8.4.1　SupeSite模板系統　

8.4.2　選擇需要製作的模板　

8.4.3　製作前的準備　

8.4.4　首頁頭部信息的製作　

8.4.5　首頁頭部導航的製作　

8.4.6　體驗SupeSite模組設定　

8.4.7　在頭部導航中加入資訊分類　

8.4.8　首頁主體內容的製作　

8.4.9　深入探究SupeSite模組系統　

8.4.10　首頁頁腳的製作　

8.4.11　站點頭部及頁腳檔案的製作　

8.4.12　分類目錄頁的製作　

8.4.13　文章瀏覽頁面的製作　

8.4.14　用戶面板的製作　

8.4.15　SupeSite模板製作小結　

8.5　模組系統的高級套用　

8.5.1　SupeSite模組系統的語法格式　

8.5.2　條件判斷語句　

8.5.3　自定義廣告顯示函式　

8.6　完成測試　

8.7　Discuz!模板系統簡介　

8.8　本章小結