DIV+CSS網(wǎng)站布局實(shí)錄

前言

　　隨著Web標(biāo)準(zhǔn)在國內(nèi)的逐漸普及以及業(yè)內(nèi)人士的大力推行，Web標(biāo)準(zhǔn)越來越受到網(wǎng)頁設(shè)計人員重視，很多網(wǎng)站開始重構(gòu)，以使網(wǎng)站中的網(wǎng)頁能夠符合Web標(biāo)準(zhǔn)?！　IV+CSS作為一種網(wǎng)頁的布局方法有別于傳統(tǒng)的表格（table）布局，它能夠真正做到W3C提出的內(nèi)容與表現(xiàn)相分離的Web標(biāo)準(zhǔn)，使站點(diǎn)的訪問及維護(hù)更加容易。所以DIV+CSS的學(xué)習(xí)成為了網(wǎng)頁設(shè)計人員的必修課。　　本書從基礎(chǔ)開始介紹CSS布局所涉及的XHTML與css的基本知識，使讀者更加深入全面地了解XHTML和CSS的相關(guān)信息。希望能夠通過本書的內(nèi)容，幫助讀者改變傳統(tǒng)的網(wǎng)站設(shè)計思維，進(jìn)入基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計領(lǐng)域?！　”緯奶攸c(diǎn)與內(nèi)容安排　　本書全面展現(xiàn)了運(yùn)用DIV+Css進(jìn)行網(wǎng)頁設(shè)計布局的方法，詳細(xì)的講解步驟配合圖示，使得每個步驟清晰易懂、一目了然。書中不但應(yīng)用大量實(shí)例對重點(diǎn)難點(diǎn)進(jìn)行深入的剖析，而且還結(jié)合作者長期的網(wǎng)頁設(shè)計與教學(xué)經(jīng)驗進(jìn)行點(diǎn)撥，使讀者學(xué)以致用?！　”緯舶?2章，每章的主要內(nèi)容如下：　　第1章“網(wǎng)頁和網(wǎng)站的基礎(chǔ)知識”，介紹了網(wǎng)頁的基本類型、基本構(gòu)成元素以及網(wǎng)頁設(shè)計的基本要求和網(wǎng)站整體的制作流程?！　〉?章“使用Web標(biāo)準(zhǔn)設(shè)計和制作”介紹了Web標(biāo)準(zhǔn)及其的優(yōu)勢、建立網(wǎng)站標(biāo)準(zhǔn)的必要性、運(yùn)用網(wǎng)站標(biāo)準(zhǔn)的優(yōu)缺點(diǎn)、理解Web標(biāo)準(zhǔn)及Web標(biāo)誰的誤區(qū)?！　〉?章“HTML、XHTML和XML基礎(chǔ)”，介紹了HTML、XHTML、XML的基礎(chǔ)用法以及為什么要使用XHTML語言編輯頁面，并將HTML與XML進(jìn)行了比較?！　〉?章“CSS樣式入門”，介紹了如何在HTML內(nèi)插入樣式表，還介紹了CSS樣式規(guī)則、內(nèi)聯(lián)樣式、內(nèi)部樣式表、外部樣式表、CSS文檔結(jié)構(gòu)、CSS樣式定義單位和值及CSS樣式定義屬性等概念。　　第5章“CSS布局入門”，介紹了Div的概念及其應(yīng)用、可視化模型、基本定位機(jī)制的使用、CSS布局方式、居中的布局設(shè)計和浮動的布局設(shè)計，并通過實(shí)例對本章的知識點(diǎn)加以鞏固?！　〉?章“設(shè)置頁面圖片”，介紹了如何使用CSS樣式實(shí)現(xiàn)圖片的邊框效果，還介紹了圖片的定位、圖片的縮放操作及圖片的對齊方式，并通過實(shí)例對本章的知識點(diǎn)加以鞏固。　　第7章“設(shè)置頁面背景圖像”，介紹了控制頁面背景顏色、設(shè)置背景圖像、背景圖像定位、控制背景圖像滾動、用背景顏色為頁面分塊和添加多個背景圖像的方法，并通過實(shí)例對本章的知識點(diǎn)加以鞏固。　　第8章“CSS文本內(nèi)容排版”，介紹了使用DIV+CSS對頁面中的內(nèi)容進(jìn)行排版的方法，包括文字排版、圖文混排等，并通過實(shí)例對本章的知識點(diǎn)加以鞏固。　　第9章“設(shè)置頁面超鏈接樣式”，介紹了如何使用CSS樣式對文字鏈接進(jìn)行控制，如何使用CSS樣式實(shí)現(xiàn)按鈕式超鏈接以及其他的一些基本鏈接方式，并通過實(shí)例對本章的知識點(diǎn)加以鞏固。

內(nèi)容概要

本書介紹了Web標(biāo)準(zhǔn)以及目前流行的DIV+CSS布局的概念，提供多個實(shí)例以及大量的圖片來講解DIV+CSS布局制作頁面的方法。    本書系統(tǒng)地介紹了CSS樣式的基礎(chǔ)理論和實(shí)際運(yùn)用技術(shù)，并結(jié)合實(shí)例來講解層疊樣式表與層布局相結(jié)合制作網(wǎng)頁的方法。在實(shí)例的制作過程中介紹CSS樣式設(shè)計各方面知識的同時，還結(jié)合實(shí)際網(wǎng)頁制作中可能遇到的問題提供解決問題的思路、方法和技巧，使初學(xué)者也可以輕松掌握DIV+CSS布局的方式，制作出精美的網(wǎng)頁并搭建功能強(qiáng)大的網(wǎng)站。    全書力求以最簡單的方法探討Web標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁設(shè)計的方方面面，幫助讀者了解Web標(biāo)準(zhǔn)、CSS布局以及表現(xiàn)與內(nèi)容分離的相關(guān)知識。希望通過本書的學(xué)習(xí)，幫助讀者改變傳統(tǒng)的網(wǎng)站設(shè)計思維，進(jìn)入基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計領(lǐng)域。本書內(nèi)容豐富、結(jié)構(gòu)清晰，注重思維鍛煉與實(shí)踐應(yīng)用，適合初、中級網(wǎng)頁設(shè)計愛好者以及希望學(xué)習(xí)Web標(biāo)準(zhǔn)對原有網(wǎng)站進(jìn)行重構(gòu)的網(wǎng)頁設(shè)計者。本書配套光盤中還提供了書中部分實(shí)例的文件和相關(guān)視頻教程，供讀者學(xué)習(xí)和參考。

書籍目錄

第1章  網(wǎng)頁和網(wǎng)站的基礎(chǔ)知識  1.1  認(rèn)識網(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)頁的基本構(gòu)成元素  1.2  如何設(shè)計網(wǎng)頁    1.2.1  網(wǎng)頁設(shè)計的基本原則    1.2.2  網(wǎng)頁設(shè)計成功要素    1.2.3  網(wǎng)頁的設(shè)計風(fēng)格及色彩搭配    1.2.4  網(wǎng)頁設(shè)計的實(shí)現(xiàn)  1.3  網(wǎng)站整體制作流程    1.3.1  前期策劃    1.3.2  頁面細(xì)化及實(shí)施    1.3.3  后期維護(hù)  1.4  本章小結(jié)第2章  使用Web標(biāo)準(zhǔn)設(shè)計和制作  2.1  表格布局    2.1.1  表格布局的特點(diǎn)    2.1.2  混亂的邏輯結(jié)構(gòu)和冗余的嵌套表格  2.2  了解Web標(biāo)準(zhǔn)    2.2.1  什么是Web標(biāo)準(zhǔn)    2.2.2  什么是W3C    2.2.3  W3C發(fā)布的標(biāo)準(zhǔn)    2.2.4  什么是Ecma國際    2.2.5  Web標(biāo)準(zhǔn)的優(yōu)勢  2.3  網(wǎng)站設(shè)計的標(biāo)準(zhǔn)時代    2.3.1  為什么要建立網(wǎng)站標(biāo)準(zhǔn)    2.3.2  遵循標(biāo)準(zhǔn)的網(wǎng)站與傳統(tǒng)網(wǎng)站的區(qū)別    2.3.3  采用網(wǎng)站標(biāo)準(zhǔn)的優(yōu)點(diǎn)與缺點(diǎn)  2.4  Web標(biāo)準(zhǔn)三劍客    2.4.1  什么是內(nèi)容、結(jié)構(gòu)、表現(xiàn)和行為    2.4.2  Div與CSS結(jié)合的優(yōu)勢    2.4.3  如何改善現(xiàn)有網(wǎng)站  2.5  關(guān)于Web標(biāo)準(zhǔn)的思考與爭論    2.5.l  關(guān)于Web標(biāo)準(zhǔn)的優(yōu)勢    2.5.2  關(guān)于布局    2.5.3  關(guān)于瀏覽器兼容  2.6  關(guān)于Web標(biāo)準(zhǔn)的誤區(qū)    2.6.1  拋棄表格布局的思維方式    2.6.2  正確使用XHTML標(biāo)簽    2.6.3  善于利用CSS    2.6.4  “通過驗證”并不是最終目的  2.7  本章小結(jié)第3章  HTML、XHTML和XML基礎(chǔ)  3.1  HTML的基礎(chǔ)用法    3.1.1  HTML文件的基本結(jié)構(gòu)    3.1.2  HTML的主要功能    3.1.3  HTML的基本語法    3.1.4  常用的HTML標(biāo)簽    3.1.5  段落和文字標(biāo)簽    3.1.6  超鏈接標(biāo)簽    3.1.7  圖像標(biāo)簽  3.2  轉(zhuǎn)換到XHTML    3.2.1  升級到XHTML的好處    3.2.2  XHTML的頁面結(jié)構(gòu)    3.2.3  xHTML代碼規(guī)范    3.2.4  選擇文檔類型    3.2.5  XHTML和HTML的比較    3.2.4  名字空間  3.3  XML的概述    3.3.1  XML的概念    3.3.2  HTML與XML的比較    3.3.3  為什么要使用XML    3.3.4  什么是“形式良好的”XML文件    3.3.5  XML的結(jié)構(gòu)    3.3.6  DTD的基本結(jié)構(gòu)    3.3.7  定義元素及其后代    3.3.8  定義元素屬性  3.4  本章小結(jié)第4章  CSS樣式入門  4.1  CSS概述  4.2  CSS的基本用法    4.2.1  在HTML內(nèi)插入樣式表    4.2.2  CSS規(guī)則  4.3  CSS樣式分類    4.3.1  內(nèi)聯(lián)樣式    4.3.2  內(nèi)部樣式表    4.3.3  外部樣式表  4.4  CSS文檔結(jié)構(gòu)    4.4.1  結(jié)構(gòu)    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  屬性    4.6.1  類型    4.6.2  背景    4.6.3  區(qū)塊    4.6.4  方框    4.6.5  邊框    4.6.6  列表    4.6.7  定位  4.7  本章小結(jié)第5章  CSS布局入門——個性類網(wǎng)站設(shè)計  5.1  定義Div    5.1.1  什么是Div    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  居中的布局設(shè)計    5.3.2  浮動的布局設(shè)計    5.3.3  高度自適應(yīng)  5.4  實(shí)例——設(shè)計制作個性類網(wǎng)站頁面    5.4.1  設(shè)計分析    5.4.2  布局分析    5.4.3  制作流程    5.4.4  制作步驟    5.4.5  案例小結(jié)  5.5  舉一反三  5.6  本章小結(jié)第6章  設(shè)置頁面圖片——企業(yè)網(wǎng)站設(shè)計  6.1  圖片樣式控制    6.1.1  圖片邊框    6.1.2  圖片定位    6.1.3  圖片縮放    6.1.4  圖片對齊方式  6.2  實(shí)例——設(shè)計制作企業(yè)網(wǎng)站    6.2.1  設(shè)計分析    6.2.2  布局分析    6.2.3  制作流程    6.2.4  制作步驟    6.2.5  案例總結(jié)  6.3  舉一反三  6.4  本章小結(jié)第7章  設(shè)置頁面背景圖像——兒童類網(wǎng)站設(shè)計  7.1  背景控制概述    7.1.1  背景控制原則    7.1.2  背景控制屬性  7.2  背景顏色控制    7.2.1  控制頁面背景顏色    7.2.2  用背景顏色為頁面分塊  7.3  背景圖片控制    7.3.1  設(shè)置背景圖像    7.3.2  背景圖像的定位    7.3.3  背景圖像的滾動    7.3.4  添加多個背景圖像  7.4  實(shí)OQ——設(shè)計制作兒童教育類網(wǎng)站    7.4.1  設(shè)計分析    7.4.2  布局分析    7.4.3  制作流程    7.4.4  制作步驟    7.4.5  實(shí)例小結(jié)  7.5  舉一反三  7.6  本章小結(jié)第8章  CSS文本內(nèi)容排版——美容時尚網(wǎng)站設(shè)計  8.1  文本排版概述    8.1.1  文本排版原則    8.1.2  文本控制屬性  8.2  CSS文本樣式    8.2.1  字體    8.2.2  大小    8.2.3  粗細(xì)    8.2.4  樣式    8.2.5  顏色    8.2.6  修飾    8.2.7  英文字母大小寫  8.3  文本排版    8.3.1  通欄排版    8.3.2  分欄排版    8.3‘3  圖文混排    8.3.4  不規(guī)則文本繞圖  8.4  實(shí)例——設(shè)計制作美容類網(wǎng)站    8.4.1  設(shè)計分析    8.4.2  布局分析    8.4.3  制作流程    8.4.4  制作步驟    8.4.5  案例小結(jié)  8.5  舉一反三  8.6  本章小結(jié)第9章  控制頁面超鏈接樣式——醫(yī)療保健網(wǎng)站設(shè)計  9.1  超鏈接概述    9.1.1  超鏈接樣式控制原則    9.1.2  超鏈接控制屬性  9.2  超鏈接樣式    9.2.1  文字鏈接    9.2.2  按鈕式鏈接  9.3  實(shí)例——設(shè)計制作醫(yī)療保健類網(wǎng)站    9.3.1  設(shè)計分析    9.3.2  布局分析    9.3.3  制作流程    9.3.4  制作步驟    9.3.5  案例總結(jié)  9.4  舉一反三  9.5  本章小結(jié)第10章  設(shè)置頁面表單樣式——生活購物網(wǎng)站設(shè)計  10.1  表單設(shè)計概述    10.1.1  網(wǎng)頁表單設(shè)計原則    10.1.2  表單應(yīng)用分類  10.2  表單設(shè)計    10.2.1  標(biāo)簽的作用    10.2.2  文本框樣式設(shè)計    10.2.3  下拉列表樣式設(shè)計    10.2.4  復(fù)選框和單選按鈕設(shè)計  10.3  實(shí)例——設(shè)計制作生活購物類網(wǎng)站    10.3.1  設(shè)計分析    10.3.2  布局分析    10.3.3  制作流程    10.3.4  制作步驟    10.3.5  案例小結(jié)  10.4  舉一反三  10.5  本章小結(jié)第11章  設(shè)置頁面列表樣式——影視音樂網(wǎng)站設(shè)計  11.1  列表控制概述  11.2  列表樣式控制    11.2.1  UL無序列表    11.2.2  OL有序列表    11.2.3  定義列表    11.2.4  更改列表項目樣式  11.3  實(shí)例——設(shè)計制作影視音樂類網(wǎng)站    11.3.1  設(shè)計分析    11.3.2  布局分析    11.3.3  制作流程    11.3.4  制作步驟    11.3.5  案例總結(jié)  11.4  舉一反三  11.5  本章小結(jié)第12章  CSS布局高級運(yùn)用——休閑游戲網(wǎng)站設(shè)計  12.1  關(guān)于CSS選擇符    12.1.1  CSS選擇符    12.1.2  CSS選擇符的命名  12.2  id與class    12.2.1  id是什么    12.2.2  什么情況下使用id    12.2.3  class是什么    12.2.4  什么情況下使用class  12.3  Div與Span對象  12.4  實(shí)例——設(shè)計制作休閑游戲網(wǎng)站    12.4.1  設(shè)計分析    12.4.2  布局分析    12.4.3  制作流程    12.4.4  制作步驟    12.4.5  案例小結(jié)  12.5  舉一反三  12.6  本章小結(jié)第13章  CSS布局技巧  13.1  CSS代碼優(yōu)化    13.1.1  增加代碼重用串    13.1.2  使用樣式覆蓋進(jìn)行簡化  13.2  CSS代碼的簡寫    13.2.1  font樣式簡寫    13.2.2  color樣式簡寫    13.2.3  background樣式簡寫    13.2.4  margin和padding樣式簡寫    13.2.5  border樣式簡寫    13.2.6  list樣式簡寫  13.3  輔助圖片一律用背景處理  13.4  常見的瀏覽器兼容問題  13.5  本章小結(jié)

章節(jié)摘錄

　　第1章　網(wǎng)頁和網(wǎng)站的基礎(chǔ)知識　　1.2　如何設(shè)計網(wǎng)頁　　1.2.1　網(wǎng)頁設(shè)計的基本原則　　建立網(wǎng)站的目的是為了給瀏覽者提供所需要的信息，這樣瀏覽者才會愿意光顧，網(wǎng)站才有真實(shí)的意義，以下是網(wǎng)頁設(shè)計的幾條基本原則?！　?明確主題：一個優(yōu)秀的網(wǎng)站要有一個明確的主題，整個網(wǎng)站設(shè)計要圍繞這個主題進(jìn)行制作。也就是說在網(wǎng)頁設(shè)計之前要明確建站目的，所有頁面都是圍繞著這個內(nèi)容來制作?！　?首頁很重要：首頁設(shè)計的如何是整個網(wǎng)站成功與否的關(guān)鍵，是反映整個網(wǎng)站給人的整體感覺。能否吸引訪問者，全在于首頁的設(shè)計效果。首頁的內(nèi)容要條理清晰，人性化地設(shè)計類別選項，讓訪問者可以快速地找到自己想要找的內(nèi)容?！　?分類：網(wǎng)站內(nèi)容的分類也十分的重要，可以按主題、性質(zhì)、組織結(jié)構(gòu)，或者按人們的思考方式分類，等等。不論是哪一種分類方法，都要讓訪問者很容易地找到。目標(biāo)。　　?互動性：互聯(lián)網(wǎng)的另一個特色就是互動性了。好的網(wǎng)站首頁必須與訪問者有良好的互動關(guān)系，包括整個設(shè)計的呈現(xiàn)、使用界面的引導(dǎo)等，都應(yīng)掌握互動的原財，讓訪問者感覺他的每一步都確實(shí)得到恰當(dāng)?shù)幕貞?yīng)?！　?圖像應(yīng)用技巧：圖像是網(wǎng)站中的特色之一，它具有醒目、吸引人的特點(diǎn)以及傳達(dá)信息的功能。好的圖像應(yīng)用可給網(wǎng)頁增色，不恰當(dāng)?shù)膱D像應(yīng)用則會適得其反。運(yùn)用圖像時一定要注意圖像下載時間的問題。在圖像運(yùn)用上盡可能采用一般瀏覽器均支持的壓縮格式，如果需要放置大型圖像的文件，最好將圖像文件與網(wǎng)頁分隔開，在頁面中先顯示一個具備鏈接的縮小圖像或者是說明文字，然后加上該圖像的大小說明，這樣不但可加快網(wǎng)頁的傳輸速度，而且還可以讓瀏覽者自己判斷是否要繼續(xù)打開放大后的圖片。

編輯推薦

　　從零開始，詳細(xì)介紹頁面布局的語法規(guī)則　　打破傳統(tǒng)布局思維方式，采用新的DlV+CSS方法布局　　8類商業(yè)網(wǎng)站的DlV+CSS布局與美化方案　　全面展示CSS應(yīng)用于各類網(wǎng)頁元素的方法與技巧　　以Web2．0標(biāo)；住為制作規(guī)范．分步指導(dǎo)16個商業(yè)綜合實(shí)例的頁面布局　　以全新的視角詮釋網(wǎng)站布局的理念！　　16個商業(yè)案例源文件和素材　　4個行業(yè)操作實(shí)例　　200分鐘商業(yè)案例的視頻教程　　8種常見網(wǎng)站的布局方式

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

    DIV+CSS網(wǎng)站布局實(shí)錄 PDF格式下載

---