新手學(xué)DIV+CSS商業(yè)網(wǎng)站布局從入門到精通(實戰(zhàn)案例版) 朱印宏pdf掃描版

新手學(xué)DIV+CSS商業(yè)網(wǎng)站布局從入門到精通(實戰(zhàn)案例版)是一本講解商業(yè)網(wǎng)站的布局和美化的參考教學(xué)書籍，由朱印宏編著，中國鐵道出版社出版。全書基于Dreamweaver和Photoshop常用軟件，作者按照由淺到深的寫作思路并且結(jié)合了多個典型網(wǎng)站實例，使讀者不但可以學(xué)會應(yīng)用多種工具制作精美網(wǎng)頁，還可以掌握現(xiàn)下最流行的DIV+css網(wǎng)頁布局與美化技能，非常適合css初學(xué)者下載來學(xué)習(xí)參考。

內(nèi)容介紹

《新手學(xué)DIV+CSS商業(yè)網(wǎng)站布局從入門到精通(實戰(zhàn)案例版)》系統(tǒng)地講解了CSS的基礎(chǔ)知識和實際運用技術(shù)，通過大量實例對CSS進行深入淺出的分析，主要包括CSS的基本語法和概念，系統(tǒng)講解CSS布局模型、CSS安全性、CSS重用性、CSS合作開發(fā)、CSS商業(yè)開發(fā)規(guī)范。著重講解如何用CSS+DIV進行網(wǎng)頁布局，注重實際操作，使讀者在學(xué)習(xí)CSS應(yīng)用技術(shù)的同時，掌握CSS+DIV的精髓。除此之外新手學(xué)DIV+CSS商業(yè)網(wǎng)站布局從入門到精通還詳細講解了5個網(wǎng)站綜合布局案例，指導(dǎo)讀者制作符合Web標準的網(wǎng)頁，幫助讀者進一步鞏固所學(xué)到的知識，提高綜合應(yīng)用的能力。在綜合實戰(zhàn)過程中，每章都會穿插講解一項CSS應(yīng)用技術(shù)，如文字、圖片、背景、表格、表單和菜單等網(wǎng)頁元素的樣式設(shè)計技法，可以適用于中高級用戶進一步學(xué)習(xí)的實用教材。

章節(jié)目錄

第1章 初學(xué)者必知的常識

1.1 回眸Web標準發(fā)展之路

1.1.1 第一個吃螃蟹的是誰？

1.1.2 設(shè)計師的表格情結(jié)

1.1.3 歸去來兮

1.1.4 傳統(tǒng)布局與標準布局比較

1.1.5 網(wǎng)頁設(shè)計前瞻

1.2 Web標準：開發(fā)者必知技術(shù)規(guī)范

1.2.1 網(wǎng)頁結(jié)構(gòu)

1.2.2 網(wǎng)頁布局

1.2.3 網(wǎng)頁行為

1.3 CSS布局的基本思路

1.3.1 語義含義與實例解釋

1.3.2 給網(wǎng)頁設(shè)計師推薦的網(wǎng)站：CSS禪意花園

1.3.3 CSS布局的基本思路及實例

1.4 CSS其實不難

1.5 制作第一個XHTML+CSS頁面

第2章 CSS語言基礎(chǔ)1

2.1 認識CSS

2.1.1 為什么學(xué)習(xí)CSS

2.1.2 編輯簡單的CSS樣式

2.1.3 編輯簡單CSS樣式具體操作步驟

2.1.4 CSS與瀏覽器

2.1.5 CSS樣式表文件

2.1.6 CSS注釋

2.2 CSS類型

2.2.1 行內(nèi)樣式解釋及實例展示

2.2.2 內(nèi)嵌式解釋及實例展示

2.2.3 鏈接式解釋及實例展示

2.2.4 導(dǎo)入樣式解釋及實例展示

2.2.5 各種方式的優(yōu)先級實例展示

2.3 CSS樣式結(jié)構(gòu)

2.4 CSS基本選擇器

2.4.1 標記選擇器解釋與實例展示

2.4.2 類別選擇器解釋與實例展示

2.4.3 ID選擇器解釋與實例展示

第3章 CSS語言基礎(chǔ)2

3.1 復(fù)合選擇器

3.1.1 包含選擇器解釋及實例展示

3.1.2 子選擇器解釋及實例展示

3.1.3 相鄰選擇器解釋及實例展示

3.1.4 屬性選擇器解釋及實例展示

3.1.5 偽選擇器解釋及實例展示

3.1.6 集體聲明解釋及實例展示

3.2 層疊與繼承

3.2.1 CSS的層疊性應(yīng)用實例解析

3.2.2 層疊性實例測試具體操作步驟

3.2.3 CSS的繼承性圖解及實例

3.2.4 CSS繼承與層疊的運用實例

第4章 XHTML重構(gòu)基礎(chǔ)

4.1 認識網(wǎng)頁結(jié)構(gòu)

4.1.1 XHTML文檔

4.1.2 定義文檔類型

4.1.3 DTD文檔類型

4.1.4 聲明命名空間

4.1.5 XHTML語法

4.1.6 XHTML元素

4.1.7 XHTML常用結(jié)構(gòu)元素：div

4.1.8 XHTML常用結(jié)構(gòu)元素：span

4.1.9 XHTML帶用結(jié)構(gòu)元素：hl、h2、h3、h4、h5和h6

4.1.1 0XHTML常用結(jié)構(gòu)元素：p

4.1.1 1XHTML常用結(jié)構(gòu)元素：ul、ol、li、dl、dt和dd

4.1.1 2XHTML常用結(jié)構(gòu)元素：table、tr和td

4.1.1 3把握XHTML結(jié)構(gòu)的語義性

4.1.1 4構(gòu)建語義化頁面操作

4.1.1 5案例實戰(zhàn)：構(gòu)建一個符合語義的頁面結(jié)構(gòu)

4.2 DIV和Span應(yīng)用

4.2.1 比較DIV和Span

4.2.2 案例實戰(zhàn)：使用DIV

4.2.3 案例實戰(zhàn)：DIV嵌套

4.2.4 案例實戰(zhàn)：使用Span

4.3 ID和Class應(yīng)用

4.3.1 使用ID

4.3.2 比較ID和Name

4.3.3 使用Class

4.3.4 比較ID和Class

第5章 CSS基本模型

5.1 認識CSS盒模型

5.1.1 為什么要提出盒模型

5.1.2 盒模型結(jié)構(gòu)模擬

5.1.3 盒模型的寬和高

5.1.4 盒模型并列間距

5.1.5 盒模型垂直間距

5.1.6 空盒模型

5.2 盒模型的邊框

5.2.1 定義邊框?qū)挾?/p>

5.2.2 定義邊框顏色

5.2.3 定義邊框樣式

5.2.4 分析內(nèi)聯(lián)元素的邊框

5.3 盒模型的外部空隙

5.3.1 恰當選擇邊界值

5.3.2 警惕元素邊界重疊

5.3.3 內(nèi)聯(lián)元素的邊界

5.4 盒模型的內(nèi)部空隙

5.5 IE解析與盒模型的誤解

5.5.1 IE6元素浮動時邊界錯位

5.5.2 讓父元素自適應(yīng)子元素高度

5.5.3 IE6子元素底邊界不被解析

5.5.4 IE6的子元素溢出

……

第6章 CSS布局基礎(chǔ)和實踐

第7章 設(shè)計更安全的CSS

第8章 設(shè)計可重用的CSS與實例

第9章 CSS團隊合作與開發(fā)

第10章 CSS規(guī)范化商業(yè)開發(fā)

第11章 博客類網(wǎng)站布局與設(shè)計——字體和文本樣式

第12章 企業(yè)類型網(wǎng)站布局與設(shè)計——列表結(jié)構(gòu)與樣式

第13章 生活分類信息網(wǎng)站布局與設(shè)計——超鏈接與導(dǎo)航菜單樣式

第14章 購物類型網(wǎng)站布局與設(shè)計——表單結(jié)構(gòu)與樣式

第15章 社區(qū)類型網(wǎng)站布局與設(shè)計——表格結(jié)構(gòu)與樣式

章節(jié)內(nèi)容

1.1

回眸 Web 標準發(fā)展之路

國內(nèi)信息技術(shù)的發(fā)展似乎總慢于西方半個節(jié)拍，其他不說，單就 CSS 技術(shù)也是一樣。CSS 第個正式規(guī)范早于1996 年就已經(jīng)發(fā)布，也就是說1996 年 W3C 組織(World Wide Web Consortium,萬維網(wǎng)聯(lián)盟)正式推出 CSS 1.0 版本技術(shù)標準，到198 年CSS 2.0 版本又面世

而我們的 Web 設(shè)計師們在新世紀鐘聲之后，才慢慢感覺到 CSS 技術(shù)的先進性，并開始在網(wǎng)站中小心翼翼地進行嘗試。

W3C 組織是一個專門負責(zé)網(wǎng)絡(luò)標準制定的非贏利組織，如 HTML、XHTML、CSS、XML等標準就是由 W3C 制定的根據(jù) W3C 官方網(wǎng)站的介紹，W3C 會員包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商內(nèi)容供應(yīng)商、團體用戶、研究實驗室、標準制定機構(gòu)和政府部門，W3C 會員一起協(xié)同工作，致力在萬維網(wǎng)發(fā)展方向上達成共識。

關(guān)于 W3C 組織的更多信息，請讀者訪問 W3C 官方英文網(wǎng)站 (http:/www.w3c.org)，或者通過萬維網(wǎng)聯(lián)盟中國香港辦事處(成立于 1998 年 11 月，地址在香港科技大學(xué))，以及萬維網(wǎng)聯(lián)盟中國辦事處(http://www.chinaw3c.org/，成立于 2006 年 4 月，地址在北京航空航天大學(xué))獲取有關(guān) W3C的中文介紹。

1.1.1 第一個吃螃蟹的是誰?

CSS 的中國實踐與普及當推《CSS 權(quán)威指南》一書的引進，相信很多早期的 Web 設(shè)計師都看過這本書。時間大致應(yīng)該鎖定在 2001 年  月，此后，前衛(wèi)的設(shè)計師們開始在網(wǎng)頁中局部嘗試 CSS

技術(shù)。2004 年 10 月閃客帝國(現(xiàn)已關(guān)閉)開始用 Web 標準對自己的網(wǎng)站進行重構(gòu)，當時在業(yè)界產(chǎn)生了不小的轟動，因為這是第一個“吃螃蟹”的人。對于一個商業(yè)網(wǎng)站來說，使用未經(jīng)普遍實踐的

技術(shù)是存在很大風(fēng)險的，所幸他們很順利地走過來。用當時網(wǎng)易學(xué)院采訪邊城浪子的話說:“網(wǎng)站重構(gòu)是今后很多網(wǎng)站要面臨的問題，標準化永遠不會是個錯誤，我們知道我們早晚會走這一步。長痛不如短痛，所以，我們就下定決心。閃客帝國網(wǎng)站于 2005 年完成了全部 CSS 布局，作為國內(nèi)第一個大型應(yīng)用案例，雖然在設(shè)計思想和技巧使用上不是最佳案例，但其在 CSS 布局應(yīng)用上帶來了很多寶貴經(jīng)驗

1.1.2 設(shè)計師的表格情結(jié)

表格在網(wǎng)頁布局中應(yīng)用已經(jīng)有很多年，由于多年的技術(shù)發(fā)展和經(jīng)驗積累，Web 設(shè)計工具功能不斷增強，使表格布局在網(wǎng)頁應(yīng)用中達到登峰造極的地步。

一個最典型的例子就是網(wǎng)頁設(shè)計師可以直接使用圖像編輯器畫圖、切圖，最后再由圖像編輯器全自動生成表格布局的頁面，像這樣提供完整而又完善的一條龍服務(wù)的網(wǎng)頁設(shè)計工具實在很多，如設(shè)計師比較熟悉的Adobe Photoshop、ImageReady 和Fireworks等。

這些工具的使用都很簡單，學(xué)習(xí)周期短、制作速度快，而且設(shè)計的頁面效果都很漂亮。如果你是一位富有藝術(shù)感的讀者，相信設(shè)計出來的頁面必定很吸引眼球。

傳統(tǒng)表格布局的快速與便捷加速了網(wǎng)頁設(shè)計師對于頁面創(chuàng)意的激情，而忽視代碼的理性分析,甚至剛學(xué)幾天的初學(xué)者都敢說出“我可以設(shè)計出最完美的網(wǎng)頁”，表格布局就這樣被神話。

表格為誰而生?

提出這個疑問決非偶然，一直以來我就在不斷探尋和思考表格的淵源。假設(shè)我們從網(wǎng)頁設(shè)計這個相對獨立的領(lǐng)域跨入另一個陌生的公司財會世界，你會大悟表格的真正使命。

“表格在手，一清二楚”，這是財會人員的口頭禪，記得以前看過一本書，書中介紹一企業(yè)高級白領(lǐng)，她的最大才干就是擅長設(shè)計表格，針對不同的工作、不同的崗位，設(shè)計出適合不同工作和崗位的表格，讓不同工種和崗位的員工能將各工作更有序更高效地完成，并將管理成本降得更低。何為高級，原來是能夠設(shè)計出各種表格的白領(lǐng)。

也許你會自以為擅長表格設(shè)計的人當屬網(wǎng)頁設(shè)計師，其實這種想法是錯誤的，隨手翻閱高級管理人員案頭的形形色色表格，你才明白什么是真正的表格，表格的真正價值所在。如果當你進入公司管理階層運作時，才發(fā)現(xiàn)若能為公司根據(jù)需要不斷設(shè)計出行之有效的各類表格，那才是很重要的工作。

表格能夠使繁復(fù)的數(shù)據(jù)分門別類，讓人一目了然地清楚數(shù)據(jù)內(nèi)在的整體情況，它比許多文字說明都要簡明、有用得多。

例如,如何將客戶的不同模具的未付款帳單理清,要知道每一次簽訂制作的模具是分期付款的同一客戶的不同模具，因簽訂合同的時間不同，加上其他諸多因素等，其應(yīng)付款和未付款的期數(shù)是各不相同的，只有用表格的形式，才能很清楚地表達不同模具應(yīng)付款和未付款及所有模具總未付款情況。

走出傳統(tǒng)的紙制表格再來看看與網(wǎng)頁毗鄰的電子表格技術(shù)。提起電子表格，你一定會想到微軟的 Excel，但你不會想到 VisiCalc。

1979 年面世的 VisiCal 是歷史上第一個電子表格軟件，是它直接奠定了電子表格軟件的基礎(chǔ),VisiCalc 的發(fā)明人 Dan Bricklin 絕對是一位天才(個人主頁:http:/www.bricklin.com/)，僅用16KB的代碼就改變了整個計算機產(chǎn)業(yè)，直接推進了個人電腦的發(fā)展。

從界面上看，VisiCalc 完全左右現(xiàn)代電子表格軟件的發(fā)展。最早的 VisiCalc 是在 Apple II 系統(tǒng)上運行，因此給蘋果公司帶來了巨額利潤。后來 Mitch Kapor 創(chuàng)辦 Louts 公司，推出 Lotus 1-2-3,電子表格得到更完善的發(fā)展。

如今 Lotus 1-2-3 電子表格軟件也消失在用戶的視野，提起電子表格大家都只知道 Excel，或者國內(nèi)金山公司的電子表格。但不管電子表格軟件如何發(fā)展，它們最終都是為了數(shù)據(jù)管理服務(wù)的，誰也不會想到用表格來進行設(shè)計，或用表格來排版布局。

1.1.3歸去來兮

實際上，表格的功能不是用來進行布局的。最初的網(wǎng)頁沒有今天這么復(fù)雜，僅顯示文本或幾個簡單的圖像，網(wǎng)頁文檔從上而下自然流動分布，不需要考慮版式設(shè)計問題。

后來隨著網(wǎng)頁內(nèi)容的豐富，圖像、聲音、動畫等多媒體不斷充斥網(wǎng)頁，網(wǎng)頁內(nèi)容不斷膨脹，同時用戶對于網(wǎng)頁視覺提出了更高要求，于是如何把傳統(tǒng)印刷中的版式技術(shù)轉(zhuǎn)移到網(wǎng)頁設(shè)計中來就成。

使用說明

1、下載并解壓，得出pdf文件

2、如果打不開本文件，請務(wù)必下載pdf閱讀器

3、安裝后，在打開解壓得出的pdf文件

4、雙擊進行閱讀