Div+CSS網站布局套用教程

《Div+CSS網站布局套用教程》是2019年12月人民郵電出版社出版的圖書，作者是張曉景、曹路舟。

基本介紹

• 中文名：Div+CSS網站布局套用教程
• 作者：張曉景、曹路舟
• 出版社：人民郵電出版社
• 出版時間：2019年12月
• 頁數：264 頁
• 定價：42 元
• 開本：16 開
• 裝幀：平裝
• ISBN：9787115423177

內容簡介

DIV+CSS是WEB設計標準，它是一種網頁的布局方法。與傳統中的通過表格布局定位的方式不同，它可以實現網頁內容與表現相分離，這種布局方法越來越普遍、也越來越受設計師的喜愛。

本書是一本介紹DIV+CSS網站建設的經典製作，系統地介紹了CSS樣式的基礎理論和實際套用技術，配合大量精美的網頁製作案例，講解了有關使用DIV+CSS布局製作網頁的相關知識和技巧。讓讀者能夠清晰明了地理解DIV+CSS布局製作網頁的相關技術內容，從而達到學以致用的目的。

本書共分為11章，從初學者的角度出發，全面講解DIV+CSS布局製作網頁的相關知識，第 1章　網頁和網站的基礎知識，第 2章　HTML和HTML5基礎，第3章　CSS樣式基礎，第4章　DIV+CSS網頁布局，第5章　使用CSS樣式設定網頁文本，第6章　設定頁面背景圖像，第7章 使用CSS樣式設定圖片效果，第8章 使用CSS樣式設定列表效果，第9章 使用CSS樣式設定超連結效果，第 10章　使用CSS樣式設定表單和表格效果，第 11章　商業網站實戰。

本書適合網頁製作初學者和愛好者自學，並可幫助從業人員提高技術水平，同時也是計算機培訓班和各院校相關專業理想的教輔用書。

本書配套光碟中提供了所有實例的源檔案和素材，以及相關的視頻教程。

圖書目錄

第 1章　網頁和網站的基礎知識

1.1　認識網頁

1.1.1　網頁和網站

1.1.2　網頁的基本構成元素

1.2　如何設計網頁

1.2.1　什麼是網頁設計

1.2.2　網頁設計的特點

1.2.3　網頁設計的相關術語

1.3　表格布局與Div+CSS布局

1.3.1　表格布局的特點

1.3.2　冗餘的嵌套表格和混亂的結構

1.3.3　Div+CSS布局的特點

1.3.4　Div+CSS布局的優勢

1.4　了解Web標準

1.4.1　Web標準是什麼

1.4.2　什麼是W3C

1.4.3　結構、表現、行為和內容

1.4.4　遵循Web標準的好處

1.5　本章小結

1.6　課後測試題

第 2章　HTML和HTML5基礎

2.1　HTML基礎

2.1.1　HTML概述

2.1.2　HTML的主要功能

2.1.3　HTML的基本語法

2.1.4　HTML中的3種標籤形式

2.2　HTML標籤

2.2.1　基本標籤

2.2.2　文本標籤

2.2.3　格式標籤

2.2.4　超連結標籤

2.2.5　圖像標籤

2.2.6　表格標籤

2.2.7　區塊標籤

2.3　HTML5基礎

2.3.1　了解HTML5

2.3.2　HTML5的簡化操作

2.3.3　HTML5中的新增標籤

2.3.4　HTML5中廢棄的標籤

2.3.5　HTML5的優勢

2.4　HTML5的套用

2.4.1

標籤

自測1：在網頁中實現圓形圖像效果

2.4.2

標籤

自測2：在網頁中嵌入音頻播放

2.4.3　標籤

自測3：在網頁中嵌入視頻播放

2.5　本章小結

2.6　課後測試題

第3章　CSS樣式基礎

3.1　CSS概述

3.1.1　CSS的特點

3.1.2　CSS的類型

3.1.3　CSS的基本語法

3.1.4　CSS樣式的構成

3.2　4種使用CSS樣式的方法

3.2.1　內聯樣式

自測1：使用style屬性添加內聯樣式

3.2.2　內部樣式

自測2：使用內部CSS樣式

3.2.3　外部樣式表檔案

自測3：連結外部CSS樣式表檔案

3.2.4　導入樣式表檔案

自測4：導入外部CSS樣式表檔案

3.3　CSS選擇器

3.3.1　通配選擇器

自測5：控制頁面邊距

3.3.2　標籤選擇器

自測6：控制網頁整體效果

3.3.3　ID選擇器

自測7：控制網頁中的元素

3.3.4　類選擇器

自測8：創建並套用類CSS樣式

3.3.5　偽類和偽對象選擇器

自測9：控制網頁中超連結文字效果

3.3.6　群選擇器

自測10：製作產品列表頁面

3.3.7　派生選擇器

自測11：控制所包含元素的效果

3.4　CSS樣式中的顏色設定和單位

3.4.1　CSS樣式中的多種顏色設定方式

3.4.2　CSS樣式中的單位

3.4.3　CSS樣式中的相對單位

3.5　本章小結

3.6　課後測試題

第4章　Div+CSS網頁布局

4.1　定義Div

4.1.1　什麼是Div

4.1.2　插入Div

4.2　id與class

4.2.1　什麼是id

4.2.2　什麼時候使用id

4.2.3　什麼是class

4.2.4　什麼時候使用class

4.3　CSS盒模型

4.3.1　認識CSS盒模型

4.3.2　CSS盒模型的要點

4.3.3　margin（邊距）屬性

自測1：控制網頁元素外邊距

4.3.4　border（框線）屬性

自測2：為網頁元素設定框線效果

4.3.5　padding（填充）屬性

自測3：設定網頁元素的填充

4.3.6　content（內容）部分

4.3.7　理解空白邊疊加

自測4：控制網頁元素之間的間距

4.4　網頁元素定位

4.4.1　理解position屬性

4.4.2　relative（相對）定位方式

自測5：實現網頁元素的相對定位

4.4.3　absolute定位方式

自測6：實現網頁元素的定位

4.4.4　fixed（固定）定位方式

自測7：設定網頁中固定的定位方式

4.4.5　float（浮動）定位方式

自測8：製作圖像列表

4.5　常用Div+CSS布局方式

4.5.1　居中的布局

4.5.2　浮動的布局

4.5.3　高度自適應的方法

4.6　本章小結

4.7　課後測試題

第5章　使用CSS樣式設定網頁文本

5.1　使用CSS樣式控制文本

5.1.1　font-family屬性

自測1：設定網頁中的字型

5.1.2　font-size屬性

自測2：設定網頁中的字型大小

5.1.3　color屬性

自測3：設定網頁中的字型顏色

5.1.4　font-weight屬性

自測4：設定網頁中的字型加粗

5.1.5　font-style屬性

自測5：設定網頁中的字型傾斜

5.1.6　text-transform屬性

自測6：設定網頁中英文大小寫

5.1.7　text-decoration屬性

自測7：為網頁中的文字添加修飾

5.2　使用CSS樣式控制段落

5.2.1　letter-spacing屬性

自測8：設定文本字元間距

5.2.2　line-height屬性

自測9：設定文本行間距

5.2.3　text-indent屬性

自測10：設定段落文本首行縮進

5.2.4　text-align屬性

自測11：設定文本水平對齊

5.2.5　vertical-align屬性

自測12：設定文本垂直對齊

5.2.6　段落首字下沉

自測13：實現段落文本首字下沉效果

5.3　實現特殊的文本效果

5.3.1　Web字型

自測14：在網頁中實現特殊字型效果

5.3.2　CSS類選區

自測15：為文字同時運用多個類CSS樣式

5.4　CSS 3.0新增文本控制屬性

5.4.1　控制文本換行word-wrap屬性

5.4.2　文本溢出處理text-overflow屬性

5.4.3　文字陰影text-shadow屬性

自測16：實現網頁文本的陰影效果

5.5　本章小結

5.6　課後測試題

第6章　設定頁面背景效果

6.1　使用CSS樣式設定背景顏色

6.1.1　background-color屬性

自測1：設定網頁背景顏色

6.1.2　為網頁元素設定不同的背景顏色

自測2：為網頁元素設定不同的背景顏色

6.2　CSS 3.0新增顏色設定方式

6.2.1　HSL顏色方式

6.2.2　HSLA顏色方式

6.2.3　RGBA顏色方式

自測3：使用RGBA顏色方式設定半透明背景色

6.3　使用CSS樣式設定背景圖像

6.3.1　background-image屬性

自測4：為網頁設定背景圖像

6.3.2　background-repeat屬性

自測5：設定背景圖像的重複方式

6.3.3　background-attachment屬性

自測6：實現固定不動的背景圖像

6.3.4　background-position屬性

自測7：控制背景圖像的位置

6.4　CSS3.0新增背景控制屬性

6.4.1　背景圖像顯示區域background-origin屬性

6.4.2　背景圖像裁剪區域background-clip屬性

6.4.3　背景圖像大小background-size屬性

自測8：設定網頁中背景圖像的大小

6.5　本章小結

6.6　課後測試題

第7章　使用CSS樣式設定圖片效果

7.1　使用CSS樣式設定圖片

7.1.1　控制圖片縮放

自測1：實現自適應瀏覽器視窗寬度的圖片

7.1.2　圖片水平對齊

自測2：設定網頁中圖片水平對齊效果

7.1.3　圖片垂直對齊

自測3：設定網頁中圖片垂直對齊效果

7.1.4　圖片框線效果

自測4：設定網頁中圖片的框線效果

7.2　實現圖文混排效果

7.2.1　使用CSS樣式實現圖文混排效果

自測5：製作網頁中的圖文混排效果

7.2.2　控制文本繞圖間距

自測6：控制圖文混排圖片與文字間距

7.3　CSS3.0新增框線控制屬性

7.3.1　多重框線顏色border-colors屬性

7.3.2　圖像框線border-image屬性

7.3.3　圓角框線border-radius屬性

自測7：在網頁中實現圓角框線效果

7.4　本章小結

7.5　課後測試題

第8章　使用CSS樣式設定列表效果

8.1　認識網頁中的列表

8.2　使用CSS樣式控制列表

8.2.1　ul無序列表

自測1：製作新聞列表

8.2.2　list-style-type屬性

自測2：設定列表符號

8.2.3　list-style-image屬性

自測3：自定義列表項符號

8.2.4　ol有序列表

自測4：製作有序排行列表

8.2.5　dl定義列表

自測5：製作複雜新聞列表

8.3　使用列表製作網頁導航

8.3.1　橫向網頁導航

自測6：使用CSS樣式製作橫向網頁導航

8.3.2　垂直網頁導航

自測7：使用CSS樣式製作垂直網頁導航

8.4　CSS3.0新增內容和透明度屬性

8.4.1　內容content屬性

自測8：為網頁元素賦予內容

8.4.2　透明度opacity屬性

自測9：設定網頁元素的半透明效果

8.5　本章小結

8.6　課後測試題

第9章　使用CSS樣式設定超連結效果

9.1　了解網頁超連結

9.1.1　什麼是超連結

9.1.2　關於連結路徑

9.1.3　超連結對象

9.2　CSS樣式偽類

9.2.1　:link偽類

9.2.2　:hover偽類

9.2.3　:active偽類

9.2.4　:visited偽類

9.3　使用CSS樣式實現網頁中超連結效果

9.3.1　設定網頁中連結文字效果

自測1：美化網頁超連結文字

9.3.2　按鈕式超連結

自測2：製作網頁導航選單

9.3.3　為超連結添加背景

自測3：製作背景翻轉導航選單

9.4　設定網頁中的游標效果

自測4：自定義網頁中的游標效果

9.5　CSS 3.0新增的多列布局屬性

9.5.1　列寬度column-width屬性

9.5.2　列數column-count屬性

9.5.3　列間距column-gap屬性

9.5.4　列框線column-rule屬性

自測5：在網頁中實現文本分欄效果

9.6　本章小結

9.7　課後測試題

第 10章　使用CSS樣式設定表單和表格效果

10.1　認識表單標籤

10.1.1　表單標籤

10.1.2　輸入標籤