DIV+CSS 3.0網(wǎng)頁樣式與布局全程揭秘

內容概要

　　《div+css
3.0網(wǎng)頁樣式與布局全程揭秘》是一本介紹div+css網(wǎng)頁樣式與布局的經典之作，通過“系統(tǒng)的專業(yè)理論+詳細的實戰(zhàn)操作+真實的商業(yè)案例”全面系統(tǒng)地介紹了div+css布局制作網(wǎng)頁的方法和技巧。
　　全書一共分為14章，內容包括網(wǎng)頁和網(wǎng)站的基礎知識、使用web標準設計和制作、html和xhtml基礎、css樣式基礎、div+css布局入門、設置頁面背景圖像、設置頁面中的圖像、css文本內容排版、設置表單樣式、設置列表樣式、設置頁面超鏈接樣式、使用javascript搭建動態(tài)效果、css與xml和ajax的綜合使用、html
5.0與css高級運用。
　　書中不僅應用大量的實例對重點、難點進行了深入的剖析，而且還結合作者多年的網(wǎng)頁設計和教學經驗進行了點撥，使讀者能夠學以致用。另外，書中還穿插介紹了css
3.0和html 5.0的相關知識，力求使讀者了解最新的網(wǎng)頁設計制作技術。
　　《div+css
3.0網(wǎng)頁樣式與布局全程揭秘》適合初中級網(wǎng)頁設計愛好者，以及希望學習web標準和對原有網(wǎng)站進行重構的網(wǎng)頁設計者，同時也可以作為高等院校相關專業(yè)的參考用書。

書籍目錄

第1章 網(wǎng)頁和網(wǎng)站的基礎知識
　1.1 認識網(wǎng)頁
　1.1.1 網(wǎng)頁和網(wǎng)站
　1.1.2 網(wǎng)頁的類型
　1.1.3 靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁
　1.1.4 網(wǎng)頁的基本構成元素
　1.2 如何設計網(wǎng)頁
　1.2.1 網(wǎng)頁設計的基本原則
　1.2.2 網(wǎng)頁設計成功要素
　1.2.3 網(wǎng)頁的設計風格及色彩搭配
　1.2.4 網(wǎng)頁設計的實現(xiàn)
　1.3 網(wǎng)頁設計的要點
　1.3.1 為用戶考慮
　1.3.2 主題突出
　1.3.3 整體原則
　1.3.4 內容與形式相統(tǒng)一
　1.3.5 更新和維護
　1.4 網(wǎng)頁布局設計流程
　1.4.1 前期策劃
　1.4.2 收集素材
　1.4.3 頁面的版式與布局分析
　1.4.4 確定網(wǎng)站的主色調
　1.4.5 設計頁面整體
　1.4.6 其他頁面元素的設計
　1.4.7 切割和優(yōu)化頁面
　1.4.8 制作html頁面
　1.4.9 添加網(wǎng)頁后臺程序
　1.4.10 測試并上傳網(wǎng)站
　1.5 本章小結
第2章 使用web標準設計和制作
　2.1 html基礎
　2.1.1 表格布局的優(yōu)點
　2.1.2 表格布局的缺點
　2.2 了解web標準
　2.2.1 什么是web標準
　2.2.2 什么是w3c
　2.2.3 w3c發(fā)布的標準
　2.2.4 web標準的優(yōu)勢
　2.3 網(wǎng)絡設計的標準時代
　2.3.1 為什么要建立網(wǎng)站標準
　2.3.2 遵循標準的網(wǎng)站與傳統(tǒng)網(wǎng)站的區(qū)別
　2.3.3 采用網(wǎng)站標準的優(yōu)缺點
　2.4 web標準三劍客
　2.4.1 什么是內容、結構、表現(xiàn)和行為
　2.4.2 div與css結合的優(yōu)勢
　2.4.3 如何改善現(xiàn)有網(wǎng)站
　2.5 關于web標準的思考與爭論
　2.5.1 關于web標準的優(yōu)點
　2.5.2 關于布局
　2.5.3 關于瀏覽器兼容
　2.6 關于web標準的誤區(qū)
　2.6.1 拋棄表格布局的思維方式
　2.6.2 正確使用xhtml標簽
　2.6.3 善于利用css
　2.6.4 “通過驗證”并不是最終目的
　2.7 本章小結
第3章 html和xhtml基礎
　3.1 html基礎
　3.1.1 html概述
　3.1.2 html文件的基本結構
　3.1.3 html的主要功能
　3.1.4 html的基本語法
　3.2 html標簽
　3.2.1 基本標簽
　3.2.2 格式標簽
　3.2.3 文本標簽
　3.2.4 超鏈接標簽
　3.2.5 圖像標簽
　3.2.6 表格標簽
　3.2.7 分區(qū)標簽
　3.3 xhtml介紹
　3.3.1 什么是xhtml
　3.3.2 升級到xhtml的好處
　3.3.3 xhtml的頁面結構
　3.3.4 xhtml的代碼規(guī)范
　3.3.5 選擇文檔類型
　3.3.6 xhtml和html的比較
　3.3.7 名字空間
　3.4 本章小結
第4章 css樣式基礎
　4.1 css概述
　4.1.1 css的特點
　4.1.2 css的類型
　4.1.3 css的基本語法
　4.2 css樣式表的基本用法
　4.2.1 在xhtml內插入樣式表
　4.2.2 css樣式表的規(guī)則
　4.3 css樣式表的分類
　4.3.1 內聯(lián)樣式
　4.3.2 內聯(lián)樣式
　4.3.3 外部樣式表
　4.4 css文檔結構
　4.4.1 結構
　4.4.2 繼承
　4.4.3 特殊性
　4.4.4 層疊
　4.4.5 重要性
　4.5 單位和值
　4.5.1 顏色值
　4.5.2 定義字體
　4.5.3 群選擇符
　4.5.4 派生選擇符
　4.5.5 id選擇符
　4.5.6 類選擇符
　4.5.7 定義鏈接的樣式表
　4.6 本章小結
第5章 div+css布局入門
　5.1 定義div
　5.1.1 css的特點
　5.1.2 插入div
　5.1.3 div的嵌套和固定格式
　5.2 可視化模型
　5.2.1 盒模型
　5.2.2 視覺可視化模型
　5.2.3 相對定位
　5.2.4 絕對定位
　5.2.5 浮動定位
　5.2.6 空白變疊加
　5.3 css布局方式
　5.3.1 居中的布局設計
　5.3.2 浮動的布局設計
　5.3.3 高度自適應
　5.4 css 3.0中盒模型的新增屬性
　5.4.1 實戰(zhàn)1：overflow
　5.4.2 實戰(zhàn)2：overflow-x
　5.4.3 實戰(zhàn)3：overflow-y
　5.4.4 實戰(zhàn)4：使用css 3.0實現(xiàn)鼠標經過變換效果
　5.5 商業(yè)案例——設計制作咖啡店網(wǎng)站頁面
　5.5.1 設計分析
　5.5.2 布局分析
　5.5.3 制作流程
　5.5.4 制作流程
　5.5.5 案例小結
　5.6 課后作業(yè)——制作個人網(wǎng)站頁面
　5.6.1 案例分析
　5.6.2 技能剖析
　5.7 本章小結
第6章 設置頁面背景圖像
　6.1 背景控制概述
　6.1.1 背景控制原則
　6.1.2 背景控制屬性
　6.2 背景顏色控制
　6.2.1 實戰(zhàn)5：控制頁面背景顏色
　6.2.2 實戰(zhàn)6：設置塊背景顏色
　6.3 背景圖像控制
　6.3.1 實戰(zhàn)7：設置背景圖像
　6.3.2 實戰(zhàn)8：背景圖像的重復方式
　6.3.3 實戰(zhàn)9：背景圖像的定位
　6.3.4 實戰(zhàn)10：背景圖像的滾動
　6.4 css 3.0中背景的新增屬性
　6.4.1 實戰(zhàn)11：background-origin
　6.4.2 實戰(zhàn)12：background-clip
　6.4.3 實戰(zhàn)13：background-size
　6.4.4 multiple backgrounds
　6.4.5 實戰(zhàn)14：使用css 3.0實現(xiàn)動態(tài)背景
　6.5 商業(yè)案例——設計制作汽車租賃網(wǎng)站
　6.5.1 設計分析
　6.5.2 布局分析
　6.5.3 制作流程
　6.5.4 制作步驟
　6.5.5 實例小結
　6.6 課后作業(yè)——設計制作通信服務宣傳頁面
　6.6.1 實例分析
　6.6.2 技能剖析
　6.7 本章小結
第7章 設置頁面中的圖像
　7.1 背景控制概述
　7.1.1 實戰(zhàn)15：圖像邊框
　7.1.2 實戰(zhàn)16：圖像定位
　7.1.3 實戰(zhàn)17：圖像縮放
　7.1.4 實戰(zhàn)18：圖像對齊方式
　7.2 圖文混排
　7.2.1 實戰(zhàn)19：文本混排
　7.2.2 實戰(zhàn)20：設置混排間距
　7.3 css 3.0中邊框的新增屬性
　7.3.1 實戰(zhàn)21：border-image
　7.3.2 實戰(zhàn)22：border-radius
　7.3.3 實戰(zhàn)23：border-color
　7.3.4 實戰(zhàn)24：box-shadow
　7.3.5 實戰(zhàn)25：使用css 3.0實現(xiàn)圖像滑過動畫效果
　7.4 商業(yè)案例——設計制作休閑游戲網(wǎng)站
　7.4.1 設計分析
　7.4.2 布局分析
　7.4.3 制作流程
　7.4.4 制作步驟
　7.4.5 實例小結
　7.5 課后作業(yè)——設計制作企業(yè)英文網(wǎng)站
　7.5.1 案例分析
　7.5.2 技能剖析
　7.6 本章小結
第8章 css文本內容排版
　8.1 文本排版概述
　8.1.1 文本排版原則
　8.1.2 文本控制屬性
　8.2 css文本樣式
　8.2.1 實戰(zhàn)26：字體
　8.2.2 實戰(zhàn)27：大小
　8.2.3 實戰(zhàn)28：粗細
　8.2.4 實戰(zhàn)29：樣式
　8.2.5 實戰(zhàn)30：顏色
　8.2.6 實戰(zhàn)31：修飾
　8.2.7 實戰(zhàn)32：英文字母大小寫
　8.3 css段落樣式
　8.3.1 實戰(zhàn)33：段落水平對齊
　8.3.2 實戰(zhàn)34：段落垂直對齊
　8.3.3 實戰(zhàn)35：行間距和字間距
　8.3.4 實戰(zhàn)36：首字下沉
　8.4 css 3.0中文字的新增屬性
　8.4.1 實戰(zhàn)37：text-shadow
　8.4.2 實戰(zhàn)38：text-overflow
　8.4.3 實戰(zhàn)39：word-wrap
　8.4.4 實戰(zhàn)40：使用css 3.0實現(xiàn)可折疊欄目
　8.5 商業(yè)案例——設計制作企業(yè)網(wǎng)站頁面
　8.5.1 設計分析
　8.5.2 布局分析
　8.5.3 制作流程
　8.5.4 制作步驟
　8.5.5 案例小結
　8.6 課后作業(yè)——制作美容時尚網(wǎng)站頁面
　8.6.1 案例分析
　8.6.2 技能剖析
　8.7 本章小結
第9章 設置表單樣式
　9.1 表單設計概述
　9.1.1 網(wǎng)頁表單設計的原則
　9.1.2 表單應用分類
　9.2 表單設計
　9.2.1 表單和表單元素
　9.2.2 實戰(zhàn)41：(label)標簽的作用
　9.2.3 實戰(zhàn)42：文本框樣式設計
　9.2.4 實戰(zhàn)43：下拉列表樣式設計
　9.3 實戰(zhàn)44：css 3.0中控制內容的新增屬性
　9.4 css 3.0中顏色的新增屬性
　9.4.1 實戰(zhàn)45：hsl colors
　9.4.2 實戰(zhàn)46：hsla colors
　9.4.3 實戰(zhàn)47：opacity
　9.4.4 實戰(zhàn)48：rgba colors
　9.4.5 實戰(zhàn)49：使用css 3.
　實現(xiàn)動態(tài)堆疊卡效果
　9.5 商業(yè)案例——設計制作游戲網(wǎng)站的登錄頁
　9.5.1 設計分析
　9.5.2 布局分析
　9.5.3 制作流程
　9.5.4 制作步驟
　9.5.5 案例小結
　9.6 課后作業(yè)——制作網(wǎng)站搜索欄
　9.6.1 案例分析
　9.6.2 技能剖析
　9.7 本章小結
第10章 設置列表樣式
　10.1 列表控制概述
　10.1.1 列表控制的原則
　10.1.2 列表標簽的使用
　10.2 列表樣式控制
　10.2.1 實戰(zhàn)50：ul無序列表
　10.2.2 實戰(zhàn)51：ol有序列表
　10.2.3 實戰(zhàn)52：dl定義列表
　10.2.4 實戰(zhàn)53：更改列表項目樣式
　10.3 使用列表制作菜單
　10.3.1 實戰(zhàn)54：無需表格的菜單
　10.3.2 實戰(zhàn)55：菜單的橫豎轉換
　10.4 css 3.0中其他模塊的新增屬性
　10.4.1 實戰(zhàn)56：@media
　10.4.2 @font-face
　10.4.3 實戰(zhàn)57：columns
　10.4.4 speech
　10.4.5 實戰(zhàn)58：使用css 3.0實現(xiàn)選項卡式新聞塊
　10.5 商業(yè)案例——設計制作音樂網(wǎng)站頁面
　10.5.1 設計分析
　10.5.2 布局分析
　10.5.3 制作流程
　10.5.4 制作步驟
　10.5.5 實例小結
　10.6 課后作業(yè)——設計制作娛樂網(wǎng)站頁面
　10.6.1 案例分析
　10.6.2 技能剖析
　10.7 本章小結
第11章 設置頁面超鏈接樣式
　11.1 超鏈接概述
　11.1.1 超鏈接樣式控制的原則
　11.1.2 超鏈接控制的屬性
　11.2 超鏈接特效
　11.2.1 實戰(zhàn)59：文字式超鏈接
　11.2.2 實戰(zhàn)60：按鈕式超鏈接
　11.2.3 實戰(zhàn)61：浮雕式超鏈接
　11.3 css 3.0中用戶界面的新增屬性
　11.3.1 實戰(zhàn)62：box-sizing
　11.3.2 實戰(zhàn)63：resize
　11.3.3 實戰(zhàn)64：outline
　11.3.4 nav-index
　11.3.5 實戰(zhàn)65：使用css 3.0實現(xiàn)動態(tài)菜單效果
　11.4 商業(yè)案例——設計制作電子商務網(wǎng)站
　11.4.1 設計分析
　11.4.2 布局分析
　11.4.3 制作流程
　11.4.4 制作步驟
　11.4.5 案例小結
　11.5 課后作業(yè)——設計制作健康類網(wǎng)站頁面
　11.5.1 案例分析
　11.5.2 技能剖析
　11.6 本章小結
第12章 使用javascript搭建動態(tài)效果
　12.1 列表控制概述
　12.1.1 列表控制的原則
　12.1.2 javascript的特點
　12.1.3 javascript的應用范圍
　12.1.4 css與javascript
　12.2 使用javascript設置圖像效果
　12.2.1 實戰(zhàn)66：實現(xiàn)相冊效果
　12.2.2 實戰(zhàn)67：實現(xiàn)圖像滑動切換效果
　12.3 針對菜單的javascript效果
　12.3.1 實戰(zhàn)68：實現(xiàn)彈性快速導航效果
　12.3.2 實戰(zhàn)69：制作動態(tài)十足的菜單效果
　12.4 針對文字的javascript效果
　12.4.1 實戰(zhàn)70：選擇字體大小
　12.4.2 實戰(zhàn)71：實現(xiàn)打字效果
　12.5 商業(yè)案例——設計制作游戲網(wǎng)站頁面
　12.5.1 設計分析
　12.5.2 布局分析
　12.5.3 制作流程
　12.5.4 制作步驟
　12.5.5 案例小結
　12.6 課后作業(yè)——設計制作購物網(wǎng)站頁面
　12.6.1 案例分析
　12.6.2 技能剖析
　12.7 本章小結
第13章 css與xml和ajax的綜合使用
　13.1 xml基礎
　13.1.1 xml概念
　13.1.2 xml的特點
　13.1.3 xml的結構和基本語法
　13.1.4 實戰(zhàn)72：html與xml
　13.1.5 什么是“形式良好的”xml文件
　13.2 xml與css的應用
　13.2.1 實戰(zhàn)73：在xml中鏈接css樣式
　13.2.2 實戰(zhàn)74：實現(xiàn)隔行變色的表格
　13.3 ajax基礎
　13.3.1 ajax簡介
　13.3.2 ajax的關鍵元素
　13.3.3 ajax的優(yōu)勢
　13.3.4 實現(xiàn)ajax的步驟
　13.3.5 使用css的必要性
　13.4 實戰(zhàn)75：ajax與css的綜合運用
　13.5 商業(yè)案例——設計制作休閑樂園網(wǎng)站
　13.5.1 設計分析
　13.5.2 布局分析
　13.5.3 制作流程
　13.5.4 制作步驟
　13.5.5 案例小結
　13.6 課后作業(yè)——設計制作社區(qū)網(wǎng)站
　13.6.1 案例分析
　13.6.2 案例剖析
　13.7 本章小結
第14章 html 5.0與css高級運用
　14.1 html 5.0概述
　14.1.1 html 5.0標簽
　14.1.2 html 5.0事件屬性
　14.1.3 html 5.0標準屬性
　14.1.4 實戰(zhàn)76：使用html 5.0實現(xiàn)動感頁面效果
　14.2 id與class
　14.2.1 id是什么
　14.2.2 什么情況下使用id
　14.2.3 class是什么
　14.2.4 什么情況下使用class
　14.3 div與span對象
　14.4 css代碼簡寫
　14.4.1 font樣式簡寫
　14.4.2 color樣式簡寫
　14.4.3 background樣式簡寫
　14.4.4 margin和padding樣式簡寫
　14.4.5 border樣式簡寫
　14.4.6 list樣式簡寫
　14.5 商業(yè)案例——設計制作游戲網(wǎng)站
　14.5.1 設計分析
　14.5.2 布局分析
　14.5.3 制作流程
　14.5.4 制作步驟
　14.5.5 案例小結
　14.6 課后作業(yè)——設計制作企業(yè)網(wǎng)站頁面
　14.6.1 案例分析
　14.6.2 技能剖析
　14.7 本章小結

章節(jié)摘錄

版權頁：   插圖：   第1章 網(wǎng)頁和網(wǎng)站的基礎知識 隨著互聯(lián)網(wǎng)的日益成熟，越來越多的人開始自己制作網(wǎng)頁。要制作出精美的網(wǎng)頁，不僅要能夠熟練地使用軟件，而且還要掌握制作網(wǎng)頁的一些基本概念和基本原則。只有對網(wǎng)頁的基礎知識進行深入地學習，才能夠快速地掌握網(wǎng)頁設計的技巧。本章主要介紹網(wǎng)頁設計制作的基本知識，包括網(wǎng)頁的基本構成元素、設計的基本原則和制作流程等內容。 1．1 認識網(wǎng)頁 網(wǎng)頁是互聯(lián)網(wǎng)展示信息的一種形式。一般網(wǎng)頁都會有文本和圖像信息，復雜一些的網(wǎng)頁還會有聲音、視頻、動畫等多媒體。 1．1．1 網(wǎng)頁和網(wǎng)站 當瀏覽者輸入一個網(wǎng)址或者單擊某個鏈接，在瀏覽器中就會看到文字、圖像、動畫、視頻、音頻等內容，能夠承載這些內容的頁面被稱為網(wǎng)頁。瀏覽網(wǎng)頁是互聯(lián)網(wǎng)應用最廣的功能，網(wǎng)頁是網(wǎng)絡的基本組成部分。 網(wǎng)站則是各種內容網(wǎng)頁的集合，按照其功能和大小來分，目前主要有門戶類網(wǎng)站和公司網(wǎng)站兩種。門戶類網(wǎng)站內容龐大而又復雜，例如新浪、搜狐、網(wǎng)易等門戶網(wǎng)站。公司網(wǎng)站一般只有幾個頁面，例如小型公司的網(wǎng)站。但是，都是由最基本的網(wǎng)頁元素組合到一起的。 在這些網(wǎng)站中有一個特殊的頁面，它是瀏覽者輸入某個網(wǎng)站的網(wǎng)址后，首先看到的頁面，因此這樣的一個頁面通常被稱為“主頁（Homepage）”，也稱為“首頁”。首頁承載了一個網(wǎng)站中所有的主要內容，訪問者可以按照首頁中的分類，來精確、快速地找到自己想要的信息內容，如圖1—1所示就是一家公司的網(wǎng)站。 1．1．2 網(wǎng)頁的類型 通常我們看到的網(wǎng)頁，都是以htm或html后綴結尾的文件，俗稱HTML文件。不同的后綴，分別代表不同類型的網(wǎng)頁文件，例如CGI、ASP、PHP、JSP、VRML等，下面就對各種類型的網(wǎng)頁文件進行簡單的講解，如表1—1所示。

編輯推薦

《DIV+CSS 3.0網(wǎng)頁樣式與布局全程揭秘》編輯推薦：在過去很長一段時間里，表格布局曾經一統(tǒng)天下，很多網(wǎng)頁設計制作人員養(yǎng)成了通過表格對網(wǎng)頁內容進行布局定位的習慣。隨著Web標準時代的來臨，大家已經認識到表格布局的缺點與不足，大多數(shù)網(wǎng)站已經開始使用DIV+CSS進行網(wǎng)頁布局。暢利紅編著的《DIV+CSS3.0網(wǎng)頁樣式與布局全程揭秘》就是力求通過最簡單的方法與大家一起探討使用Web標準進行網(wǎng)頁設計制作的指導用書，適用于所有網(wǎng)頁設計制作人員、尤其是初中級網(wǎng)頁設計愛好者，以及希望學習web標準和對原有網(wǎng)站進行重構的網(wǎng)頁設計者，同時也可以作為高等院校相關專業(yè)的參考用書。

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

    DIV+CSS 3.0網(wǎng)頁樣式與布局全程揭秘 PDF格式下載

---