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

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

內(nèi)容介紹

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

章節(jié)目錄

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

1.1 回眸Web標(biāo)準(zhǔn)發(fā)展之路

1.1.1 第一個(gè)吃螃蟹的是誰(shuí)？

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

1.1.3 歸去來(lái)兮

1.1.4 傳統(tǒng)布局與標(biāo)準(zhǔn)布局比較

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

1.2 Web標(biāo)準(zhǔn)：開(kāi)發(fā)者必知技術(shù)規(guī)范

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

1.2.2 網(wǎng)頁(yè)布局

1.2.3 網(wǎng)頁(yè)行為

1.3 CSS布局的基本思路

1.3.1 語(yǔ)義含義與實(shí)例解釋

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

1.3.3 CSS布局的基本思路及實(shí)例

1.4 CSS其實(shí)不難

1.5 制作第一個(gè)XHTML+CSS頁(yè)面

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

2.1 認(rèn)識(shí)CSS

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

2.1.2 編輯簡(jiǎn)單的CSS樣式

2.1.3 編輯簡(jiǎn)單CSS樣式具體操作步驟

2.1.4 CSS與瀏覽器

2.1.5 CSS樣式表文件

2.1.6 CSS注釋

2.2 CSS類型

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

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

2.2.3 鏈接式解釋及實(shí)例展示

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

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

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

2.4 CSS基本選擇器

2.4.1 標(biāo)記選擇器解釋與實(shí)例展示

2.4.2 類別選擇器解釋與實(shí)例展示

2.4.3 ID選擇器解釋與實(shí)例展示

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

3.1 復(fù)合選擇器

3.1.1 包含選擇器解釋及實(shí)例展示

3.1.2 子選擇器解釋及實(shí)例展示

3.1.3 相鄰選擇器解釋及實(shí)例展示

3.1.4 屬性選擇器解釋及實(shí)例展示

3.1.5 偽選擇器解釋及實(shí)例展示

3.1.6 集體聲明解釋及實(shí)例展示

3.2 層疊與繼承

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

3.2.2 層疊性實(shí)例測(cè)試具體操作步驟

3.2.3 CSS的繼承性圖解及實(shí)例

3.2.4 CSS繼承與層疊的運(yùn)用實(shí)例

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

4.1 認(rèn)識(shí)網(wǎng)頁(yè)結(jié)構(gòu)

4.1.1 XHTML文檔

4.1.2 定義文檔類型

4.1.3 DTD文檔類型

4.1.4 聲明命名空間

4.1.5 XHTML語(yǔ)法

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)的語(yǔ)義性

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

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

4.2 DIV和Span應(yīng)用

4.2.1 比較DIV和Span

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

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

4.2.4 案例實(shí)戰(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 認(rèn)識(shí)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 恰當(dāng)選擇邊界值

5.3.2 警惕元素邊界重疊

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

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

5.5 IE解析與盒模型的誤解

5.5.1 IE6元素浮動(dòng)時(shí)邊界錯(cuò)位

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

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

5.5.4 IE6的子元素溢出

……

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

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

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

第9章 CSS團(tuán)隊(duì)合作與開(kāi)發(fā)

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

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

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

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

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

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

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

1.1

回眸 Web 標(biāo)準(zhǔn)發(fā)展之路

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

而我們的 Web 設(shè)計(jì)師們?cè)谛率兰o(jì)鐘聲之后，才慢慢感覺(jué)到 CSS 技術(shù)的先進(jìn)性，并開(kāi)始在網(wǎng)站中小心翼翼地進(jìn)行嘗試。

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

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

1.1.1 第一個(gè)吃螃蟹的是誰(shuí)?

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

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

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

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

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

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

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

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

表格為誰(shuí)而生?

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

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

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

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

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

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

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

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

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

1.1.3歸去來(lái)兮

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

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

使用說(shuō)明

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

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

3、安裝后，在打開(kāi)解壓得出的pdf文件

4、雙擊進(jìn)行閱讀