CSS+XHTML+JavaScript網(wǎng)頁設計與布局從入門到精通

前言

隨著Web 2.0標準的迅速普及，如何開發(fā)一套符合標準要求的網(wǎng)站，已經(jīng)成為每一個網(wǎng)頁設計者所必須面對的話題。在過去的表格式布局時代，設計者已經(jīng)習慣于以結構與表現(xiàn)結合的模式來開發(fā)網(wǎng)站。而Web 2.0標準最主要的特點就是結構與表現(xiàn)分離，因此作為一個網(wǎng)頁設計師，必須改變現(xiàn)有的設計思路。長期以來，很多網(wǎng)站開發(fā)者采用所見即所得的可視化編輯環(huán)境，利用各種網(wǎng)頁制作軟件開發(fā)網(wǎng)站。雖然該方式簡便易學，但由于其在共用代碼方面存在不足，所以很多成熟的網(wǎng)頁設計已經(jīng)采用手寫代碼。而實際上，不管是利用網(wǎng)頁制作軟件的可視化編輯環(huán)境，還是手寫代碼，最終都是要轉化成網(wǎng)頁文件進行存儲并供用戶瀏覽。因此，網(wǎng)站是否符合Web標準是最主要的。綜上所述，一個符合Web 2.0標準的網(wǎng)站與普通的表格式布局相比，有如下幾個優(yōu)點：一、網(wǎng)頁在多種設備上的可用性由于符合Web 2.0標準的網(wǎng)站，在布局時其結構與表現(xiàn)是分離的，使得能夠通過修改樣式表文件。從而允許同一頁面適應不同設備的屏幕。二、實現(xiàn)網(wǎng)站開發(fā)與維護的低成本在網(wǎng)站的開發(fā)過程中，大量的子頁使網(wǎng)頁設計人員的工作量大幅度增加。而傳統(tǒng)的設計方式是，每一個網(wǎng)頁的樣式設計都是獨立的。試想一下，如果在網(wǎng)站中有1000個子頁，而在設計時給每一個頁面都寫相同的用于定義樣式的代碼，那就會有大量的重復輸入代碼的工作。而應用Web標準可以將所有用于定義樣式的信息都放到一個統(tǒng)一的文件當中，就可以不必為每一個頁面都輸入相同的用于定義樣式的代碼。不管是有100或是有1000個頁面需要指定樣式的代碼，只需要輸入一次代碼就可以了。網(wǎng)站開發(fā)完成后，如果要修改，這時Web標準的優(yōu)勢就更加突顯了。樣式代碼的重用方法，可以使設計者通過修改同一個代碼段，實現(xiàn)修改所有應用此代碼段區(qū)域的元素樣式。正是由于樣式代碼的重用，使得開發(fā)人員可以專注于網(wǎng)站結構與表現(xiàn)的設計，而無須將大量的精力放在重復輸入用于指定樣式的代碼上。三、節(jié)省大量帶寬假如用表格來布局，即便是一個最簡單的單行單列布局，也要table、tr、td等標簽齊上陣，層層嵌套才能完成?？上攵绻瓿梢粋€大型的網(wǎng)站設計，會在頁面中嵌套多少表格才能完成。這樣一來就會在頁面上增加大量的冗余代碼，而且每一個頁面中表現(xiàn)樣式的代碼還都是獨立的，不可重用，從而進一步增大網(wǎng)站的代碼量。而利用Web標準制作網(wǎng)站，可以重用大量的用于定義樣式的代碼，使整個網(wǎng)站的代碼量大幅減小。對于一些大流量的網(wǎng)站來說，網(wǎng)站的代碼量減小意味著可以節(jié)省大量帶寬。四、網(wǎng)頁解析速度大幅提高符合Web標準的網(wǎng)站，其解析速度較傳統(tǒng)的結構與表現(xiàn)混合在一起的編碼方式而言，要快得多。因為瀏覽器在解析時能夠以更好的解析方式分析結構元素與表現(xiàn)元素，從而提高網(wǎng)頁的瀏覽速度。

內(nèi)容概要

隨著Web 2．0標準的迅速普及，如何開發(fā)一套符合標準要求的網(wǎng)站，已經(jīng)成為每一個網(wǎng)頁設計者所必須面對的話題。在過去的表格式布局時代，設計者已經(jīng)習慣于以結構與表現(xiàn)結合的模式來開發(fā)網(wǎng)站。而Web 2.0標準最主要的特點就是結構與表現(xiàn)分離，因此作為一個網(wǎng)頁設計師，必須改變現(xiàn)有的設計思路。    長期以來，很多網(wǎng)站開發(fā)者采用所見即所得的可視化編輯環(huán)境，利用各種網(wǎng)頁制作軟件開發(fā)網(wǎng)站。雖然該方式簡便易學，但由于其在共用代碼方面存在不足，所以很多成熟的網(wǎng)頁設計已經(jīng)采用手寫代碼的方式。而實際上，不管是利用網(wǎng)頁制作軟件的可視化編輯環(huán)境，還是手寫代碼，最終都是要轉化成網(wǎng)頁文件進行存儲并供用戶瀏覽的。因此，網(wǎng)站是否符合Web標準是最主要的。    本書重點講解了Web標準中規(guī)定的各種語言；讓多瀏覽器兼容自己的網(wǎng)頁的方法；有關JavaScript的常用技巧以及CSS濾鏡的使用等。采用通俗易懂的實例化講解方式，讓每一個零基礎的初學者都可以容易地學會利用CSS開發(fā)網(wǎng)站。    本書適合網(wǎng)站開發(fā)人員及愛好者閱讀。

書籍目錄

Chapter 1 Web 標準與XHTM1 概述  1.1　Web標準的概述    1.1.1　Web標準的定義    1.1.2　Web標準的歷史  1.2　Web標準的基本組成    1 2.1　結構標準語言    1.2.2　表現(xiàn)標準語言    1.2.3　行為標準語言  1.3　Web標準的優(yōu)點    1.3.1  網(wǎng)頁在多種設備上的可用性    1.3.2　實現(xiàn)網(wǎng)站開發(fā)與維護的低成本    1.3.3　節(jié)省大量帶寬    1.3.4　網(wǎng)頁解析速度大幅提高  1.4　XHTM1基礎    1.4.1　定義文檔類型    1.4.2　什么是DTD    1.4.3　聲明命名空間  1.5 XHTM1語法規(guī)范  1.6 XHTM1的元素分類    1.6.1　塊級元素（disp1ay：b1ock）    1 6.2　內(nèi)聯(lián)元素（disp1ay：in1ine）    1.6.3　列表項元素（disp1ay：1ist—item）    1.6.4　隱藏元素（disp1ay：none）  1.7 XHTM1中常用的元素    1.7.1　布局元素    1.7.2　文本元素    1.7.3　列表元素    1.7.4　圖像元素    1.7.5　表格元素    1.7.6　表單元素    1.7.7　a元素Chapter 2　CSS　基礎  2.1 CSS布局和Tab1e布局    2.1.1  為什么要用CSS布局    2.1.2　Tab1e布局與CSS布局演示  2.2　CSS布局的初探  2.3　制作第一個XHTM1-I-CSS頁面  2.4　如何在網(wǎng)頁中應用CSS定義    2.4.1　內(nèi)嵌樣式表    2.4.2　內(nèi)部樣式表    2.4.3　外部樣式表  2.5　CSS語法  2.6　選擇符詳解    2.6.1　類型選擇符    2.6.2　id選擇符    2.6.3　Class選擇符    2.6.4　群組選擇符    2.6.5　包含選擇符    2.6.6　元素指定選擇符    2.6.7　子對象選擇符    2.6.8　通用選擇符    2.6.9　偽類及偽對象    2.6.10　屬性選擇符    2.6.11　相鄰選擇符  2.7 CSS常用屬性介紹    2.7.1　字體屬性    2.7.2　文本屬性    2.7.3　背景屬性    2.7.4　內(nèi)邊距    2.7.5　外邊距    2.7.6　邊框屬性  2.8 CSS常用數(shù)據(jù)單位    2.8.1　絕對單位    2.8.2　相對單位    2.8.3　顏色值    2.8.4　UR1  2.9　樣式優(yōu)先權    2.9.1  寫法上的優(yōu)先級    2.9.2　id和Class哪個優(yōu)先權高    2.9.3　層疊樣式定義    2.9.4　Limportant語句改變優(yōu)先權  2.10樣式的繼承　……Chapter 3 CSS 代碼優(yōu)化與文檔統(tǒng)籌Chapter 4 CSS 調(diào)試與開發(fā)工具Chapter 5 CSS 布局與定位Chapter 6 CSS 網(wǎng)頁內(nèi)容排版Chapter 7 CSS 頁面元件設計Chapter 8 CSS 濾鏡詳解Chapter 9 CSS 瀏覽器兼容性解決方案Chapter 10 JavaScript 應用Chapter 11 個人博客網(wǎng)站布局Chapter 12 中小型企業(yè)網(wǎng)站布局Chapter 13 化妝品網(wǎng)站Appendix A SEO 搜索引擎優(yōu)化

章節(jié)摘錄

插圖：

編輯推薦

《CSS+XHTML+JavaScript網(wǎng)頁設計與布局:從入門到精通》中介紹的網(wǎng)站設計方法符合Web2.0標準，可實現(xiàn)低成本開發(fā)與維護網(wǎng)站 ，知識講解配合實際案例，并以多媒體視頻演示作為輔助，網(wǎng)站開發(fā)輕松搞定。超值贈送書中重點，重點內(nèi)容的多媒體教程，光盤中收錄書中所有實例文件，贈送近100頁大型實戰(zhàn)案例電子書。

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

    CSS+XHTML+JavaScript網(wǎng)頁設計與布局從入門到精通 PDF格式下載

---