CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo)

前言

　　因特網(wǎng)的誕生改變了人們的工作和生活方式，而各種網(wǎng)站的盛行也給網(wǎng)頁設(shè)計(jì)者帶來了機(jī)遇與挑戰(zhàn)。HTML語言是整個(gè)網(wǎng)站設(shè)計(jì)和開發(fā)的核心。它是網(wǎng)頁開發(fā)所基于的標(biāo)準(zhǔn)的結(jié)構(gòu)化語言。它包含的各種結(jié)構(gòu)標(biāo)記的基本功能是控制網(wǎng)頁內(nèi)容的結(jié)構(gòu)劃分。但是在網(wǎng)頁開發(fā)之初，在網(wǎng)頁開發(fā)的標(biāo)準(zhǔn)不完善的情況下，HTML實(shí)際上肩負(fù)了網(wǎng)頁外觀的呈現(xiàn)。例如，(B)、(I)等標(biāo)記元素的出現(xiàn)，這使得網(wǎng)頁內(nèi)容和結(jié)構(gòu)混雜在一起，代碼異常冗長和繁復(fù)，極大地增加了網(wǎng)頁設(shè)計(jì)和開發(fā)者的工作量。CSS的出現(xiàn)完美地解決了這個(gè)問題。CSS是英文Cascading Style Sheets的縮寫，即層疊樣式表。CSS是一種簡單的標(biāo)準(zhǔn)化語法。它可以讓網(wǎng)站設(shè)計(jì)者方便靈活地控制Web頁面的外觀表現(xiàn)，使網(wǎng)站設(shè)計(jì)變得更加簡單。最重要的是，它與HTML語言中的DIV標(biāo)記的結(jié)合，完美地實(shí)現(xiàn)了網(wǎng)頁的內(nèi)容與結(jié)構(gòu)的分離，簡化了HTML語言，并且減輕了HTML對(duì)表現(xiàn)形式的責(zé)任。同時(shí)使網(wǎng)頁開發(fā)者的分工更加明確，從而大大減少了創(chuàng)建和維護(hù)網(wǎng)站所花費(fèi)的時(shí)間。如今，HTML和CSS共同擔(dān)負(fù)著網(wǎng)頁前臺(tái)設(shè)計(jì)的責(zé)任，一起構(gòu)成了網(wǎng)頁設(shè)計(jì)與開發(fā)的基石。　　本書由淺入深地對(duì)CSS+DIV網(wǎng)頁布局進(jìn)行了全面的介紹。首先是對(duì)CSS必備的基礎(chǔ)知識(shí)的詳細(xì)講解，分章節(jié)介紹了CSS對(duì)網(wǎng)頁各組成部分的控制的技術(shù)要點(diǎn)與參數(shù)設(shè)定，為深入學(xué)習(xí)CSS+DIV網(wǎng)頁布局做好鋪墊。在此基礎(chǔ)上，以實(shí)例講解的方式進(jìn)一步介紹了CSS+DIV網(wǎng)頁布局的觀念及其實(shí)際應(yīng)用。最后的綜合案例讓讀者真正體會(huì)到網(wǎng)頁設(shè)計(jì)與開發(fā)的整個(gè)思路與過程，加深讀者對(duì)CSS+DIV網(wǎng)頁布局觀念的理解。在本書中，每個(gè)知識(shí)要點(diǎn)處都安排了詳細(xì)的范例解析來幫助讀者理解與掌握知識(shí)要點(diǎn)。同時(shí)精心設(shè)計(jì)了“舉一反三”供讀者實(shí)踐，幫助讀者對(duì)所學(xué)知識(shí)真正做到學(xué)以致用。全書的章節(jié)安排條理清晰，技術(shù)講解循序漸進(jìn)，與大家的學(xué)習(xí)習(xí)慣相吻合，使讀者通過本書的學(xué)習(xí)能真正地掌握CSS+DIV網(wǎng)頁布局的相關(guān)技術(shù)，并能夠在實(shí)際中應(yīng)用?！　∪珪凑諏W(xué)習(xí)進(jìn)程分成3大部分。第1部分是CSS基礎(chǔ)知識(shí)篇，共分為11章。第1章是網(wǎng)站制作流程與布局概念的介紹，幫助讀者理解CSS層疊樣式表的布局觀念及其在網(wǎng)站制作中的地位。第2章和第3章是對(duì)網(wǎng)站制作的相關(guān)知識(shí)的擴(kuò)展介紹，包括HTML、XHTML、JavaScript網(wǎng)站制作的基礎(chǔ)技術(shù)，幫助讀者從網(wǎng)站開發(fā)的層次理解CSS+DIV網(wǎng)頁布局，不會(huì)因?yàn)楣铝⒌貙W(xué)習(xí)CSS而無法在實(shí)際的網(wǎng)站開發(fā)中應(yīng)用。同時(shí)指導(dǎo)讀者制作符合Web標(biāo)準(zhǔn)的網(wǎng)頁，為以后從事網(wǎng)站設(shè)計(jì)開發(fā)工作打下良好的基礎(chǔ)，這也是本書的一大特色。第4章到第11章以分類介紹的方式，比較細(xì)致全面地講解CSS相關(guān)的基本語法知識(shí)以及使用技巧，針對(duì)每一個(gè)知識(shí)點(diǎn)都有相應(yīng)的范例講解，以幫助讀者更好地理解和掌握。　　第2部分是CSS+DIV布局篇，共分為3章。該部分是整體提高篇。它是在掌握了第1部分的CSS基礎(chǔ)知識(shí)的前提下，從更高的網(wǎng)頁整體布局的層次上講解CSS和DIV的整體應(yīng)用。　　第3部分是綜合案例篇，共分為3章。每章都詳細(xì)地講解一個(gè)完整的網(wǎng)站開發(fā)的綜合實(shí)例。其中，第15章是小型企業(yè)網(wǎng)站，第16章是購物網(wǎng)站，第17章是觀光旅游導(dǎo)航網(wǎng)站。這3個(gè)典型網(wǎng)站制作實(shí)例覆蓋了常用的網(wǎng)頁設(shè)計(jì)與制作知識(shí)，在書中都有詳細(xì)的分析與講解。該部分讓讀者可以掌握實(shí)用的網(wǎng)站開發(fā)的思路、方法、技巧，最終能夠獨(dú)立地完成網(wǎng)頁的開發(fā)?！　”緯鴥?nèi)容涵蓋了從Web排版到頁面布局的所有元素，內(nèi)容全面、條理清晰、深入淺出，注重范例講解與實(shí)用性，是一本簡單易學(xué)的CSS+DIV布局技術(shù)的參考手冊(cè)，既適合CSS初學(xué)者入門，又適合中高級(jí)使用者鞏固提高?！　”緯赏鮾€敏、方強(qiáng)、李靜等編寫，本書致力于讓多層次的讀者閱讀后能有所收獲，但是由于編者的水平有限，書中難免有疏漏之處，歡迎廣大讀者與專家批評(píng)指正。

內(nèi)容概要

　　網(wǎng)頁設(shè)計(jì)的一大改革。DIV分塊實(shí)現(xiàn)了HTML文檔內(nèi)部結(jié)構(gòu)的劃分，CSS層疊樣式表則為網(wǎng)頁提供了豐富的設(shè)計(jì)樣式，并控制HTML文檔的外在表現(xiàn)。兩者各盡其職，實(shí)現(xiàn)了樣式與內(nèi)容的分離，從而大大簡化了HTML代碼。CSS+DIV網(wǎng)頁布局技術(shù)可以保證網(wǎng)頁風(fēng)格的一致性，對(duì)網(wǎng)頁的樣式進(jìn)行統(tǒng)一的管理，給網(wǎng)頁的開發(fā)與維護(hù)帶來了極大的方便。當(dāng)我們想要修改網(wǎng)頁的風(fēng)格設(shè)置時(shí)，只需要修改CSS樣式表就能使所有的網(wǎng)頁樣式隨之發(fā)生變動(dòng)，而不必一頁一頁地修改網(wǎng)頁。《CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo)》以實(shí)用為前提，提供了大量網(wǎng)頁設(shè)計(jì)與制作的范例，并輔以細(xì)致的講解與圖示，對(duì)網(wǎng)頁制作的步驟與方法都有具體的示例，是一本簡單易學(xué)的CSS+DIV布局技術(shù)的參考手冊(cè)。

書籍目錄

第1章 網(wǎng)站制作流程與布局概念1.1 網(wǎng)站和網(wǎng)頁1.1.1 網(wǎng)站與網(wǎng)頁的關(guān)系1.1.2 域名1.2 網(wǎng)站的制作流程1.2.1 前期策劃1.2.2 頁面實(shí)施1.2.3 后期維護(hù)1.3 布局方式1.3.1 網(wǎng)站建設(shè)標(biāo)準(zhǔn)1.3.2 頁面布局1.3.3 標(biāo)準(zhǔn)與表格布局第2章 HTML與XHTML2.1 HTML基礎(chǔ)2.1.1 HTML概述2.1.2 HTML基本結(jié)構(gòu)2.2 HTML基本標(biāo)簽2.2.1 基本標(biāo)簽2.2.2 格式標(biāo)簽2.2.3 文本標(biāo)簽2.2.4 超鏈接標(biāo)簽2.2.5 圖像標(biāo)簽2.2.6 表格標(biāo)簽2.2.7 框架標(biāo)簽2.2.8 表單標(biāo)簽2.2.9 分區(qū)標(biāo)簽2.3 XHTML2.3.1 XHTML概述2.3.2 HTML轉(zhuǎn)換為XHTML第3章 JavaScript腳本語言概述3.1 JavaScript概述3.1.1 JavaScript發(fā)展3.1.2 編寫JavaScript腳本代碼3.1.3 JavaScript程序結(jié)構(gòu)3.1.4 JavaScript代碼嵌入HTML文檔3.2 JavaScript效果的實(shí)現(xiàn)3.2.1 事件處理器3.2.2 表單驗(yàn)證3.2.3 JavaScript窗口3.3 JavaScript與CSS3.3.1 在CSS中使用JavaScript3.3.2 JavaScript控制CSS樣式切換3.3.2 JavaScript與CSS實(shí)現(xiàn)雕刻菜單效果第4章 CSS概述4.1 CSS的基本概念4.2 CSS的頁面設(shè)置4.2.1 內(nèi)聯(lián)樣式表4.2.2 嵌入樣式表4.2.3 外部樣式表4.2.4 輸入樣式表4.3 CSS與HTML4.4 CSS的選擇器和繼承4.4.1 CSS選擇器4.4.2 CSS的繼承4.5 編輯CSS4.6 瀏覽器與CSS第5章 CSS語法介紹5.1 CSS選擇器5.1.1 標(biāo)記選擇器5.1.2 類選擇器5.1.3 ID選擇器5.1.4 選擇器的聲明5.2 CSS的繼承5.2.1 父子關(guān)系5.2.2 CSS繼承的運(yùn)用5.3 單位和值5.3.1 顏色5.3.2 長度單位5.3.3 URL第6章 CSS文本編輯效果6.1 文字樣式6.1.1 字體的樣式6.1.2 文字的大小6.1.3 文字的顏色6.1.4 字體的粗細(xì)與斜體6.1.5 下畫線、頂畫線和刪除線6.2 段落設(shè)置6.2.1 對(duì)齊方式6.2.2 行間距6.2.3 字間距6.2.4 首字放大效果第7章 CSS表格和表單效果7.1 表格樣式7.1.1 表格屬性7.1.2 表格的邊框樣式7.1.3 表格的文本樣式7.1.4 表格嵌套7.1.5 表格背景變色7.2 表單樣式7.2.1 表單屬性7.2.2 表單邊框閃爍第8章 CSS與頁面結(jié)構(gòu)8.1 邊框8.1.1 邊界8.1.2 邊框8.1.3 補(bǔ)白8.1.4 浮動(dòng)與清除8.2 分塊格式編排8.2.1 塊元素8.2.2 內(nèi)聯(lián)元素8.2.3 可變?cè)氐?章 用CSS設(shè)置網(wǎng)頁效果9.1 用CSS設(shè)置圖片樣式9.1.1 圖片邊框的設(shè)置9.1.2 圖片大小的設(shè)置9.1.3 圖片自動(dòng)等比例縮小9.1.4 圖片陰影的設(shè)置9.1.5 圖片透明的設(shè)置9.1.6 圖片的對(duì)齊方式的設(shè)置9.1.7 文字環(huán)繞的效果9.1.8 浮動(dòng)廣告的制作9.2 用CSS設(shè)置網(wǎng)頁中的背景9.2.1 頁面的背景色9.2.2 頁面的背景圖的設(shè)置9.2.3 背景圖片的位置9.2.4 固定背景圖片9.2.5 添加多個(gè)背景圖片第10章 用CSS設(shè)置頁面10.1 設(shè)置頁面格式10.1.1 設(shè)置超鏈接10.1.2 設(shè)置導(dǎo)航欄10.1.3 設(shè)置鼠標(biāo)特效10.1.4 設(shè)置滾動(dòng)條10.1.5 設(shè)置選項(xiàng)卡10.2 特殊效果10.2.1 鼠標(biāo)提示10.2.2 導(dǎo)航欄的隱藏和展開10.2.3 設(shè)置滑動(dòng)文本選項(xiàng)卡第11章 CSS濾鏡的應(yīng)用11.1 濾鏡介紹11.2 通道（alpha）11.3 模糊（blur）11.4 透明色（chroma）11.5 陰影（shadow）11.6 光暈（glow）11.7 波浪（wave）11.8 X射線（x-ray）11.9 灰度（gray）11.1 0反色（invert）11.1 1遮罩（mask）11.1 2翻轉(zhuǎn)（FlipH&FlipV）第12章 理解CSS定位與div布局12.1 div標(biāo)簽與span標(biāo)簽12.1.1 概述12.1.2 元素的分類和標(biāo)識(shí)（class和id）12.1.3 組織元素（div和span）12.2 盒子模型12.2.1 盒子模型的概念12.2.2 border屬性12.2.3 padding屬性12.2.4 margin屬性12.2.5 寬度和高度12.3 元素的定位12.3.1 CSS的定位原理12.3.2 定位方式12.3.3 float定位12.3.4 z-index定位第13章 CSS+DIV布局13.1 CSS+DIV布局方法13.1.1 網(wǎng)站的制作規(guī)范13.1.2 將頁面用div分塊13.1.3 對(duì)分布的塊進(jìn)行定位13.2 CSS排版觀念13.2.1 對(duì)段落進(jìn)行排版13.2.2 對(duì)圖片進(jìn)行排版13.2.3 對(duì)表格進(jìn)行排版13.2.4 “固定寬度且居中”的版式13.2.5 “左中右”版式第14章 調(diào)用樣式表14.1 關(guān)于CSS14.1.1 CSS樣式表的功能14.1.2 CSS樣式表的分類14.2 調(diào)用樣式表的方法14.2.1 外部調(diào)用CSS樣式表14.2.2 雙表法調(diào)用樣式表14.2.3 樣式表的切換14.2.4 樣式表的優(yōu)先級(jí)14.2.5 根據(jù)時(shí)段改變網(wǎng)站風(fēng)格第15章 小型企業(yè)網(wǎng)站15.1 設(shè)計(jì)分析15.2 布局分析15.3 模塊分析與設(shè)計(jì)實(shí)現(xiàn)15.3.1 Logo與菜單效果15.3.2 導(dǎo)航與搜索功能的設(shè)計(jì)15.3.3 公司咨詢15.3.4 主體實(shí)現(xiàn)15.3.5 業(yè)內(nèi)新聞15.4 CSS整理與調(diào)整第16章 購物網(wǎng)站16.1 設(shè)計(jì)分析16.2 布局分析16.3 模塊分析與設(shè)計(jì)實(shí)現(xiàn)16.3.1 Logo與菜單效果16.3.2 分類搜索功能設(shè)計(jì)16.3.3 商品導(dǎo)購功能設(shè)計(jì)16.3.4 交易功能設(shè)計(jì)16.4 CSS整理與調(diào)整第17章 觀光旅游導(dǎo)航網(wǎng)站17.1 設(shè)計(jì)分析17.2 布局分析17.3 模塊分析與設(shè)計(jì)實(shí)現(xiàn)17.3.1 CSS基本設(shè)置17.3.2 標(biāo)題欄與banner圖片的實(shí)現(xiàn)17.3.3 左側(cè)分欄與導(dǎo)航菜單實(shí)現(xiàn)17.3.4 主體實(shí)現(xiàn)17.3.5 腳注（footer）17.4 CSS整理與調(diào)整

章節(jié)摘錄

　　第1章　網(wǎng)站制作流程與布局概念	　　1.1　網(wǎng)站和網(wǎng)頁	　　網(wǎng)站（Website）是在國際網(wǎng)絡(luò)中根據(jù)一定的規(guī)范，使用超文本標(biāo)記語言或其他工具軟件制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是網(wǎng)絡(luò)中的通信工具。像布告欄一樣，網(wǎng)站擁有者可以通過網(wǎng)站發(fā)布資訊或提供相關(guān)的網(wǎng)絡(luò)服務(wù)。用戶可以通過瀏覽器訪問網(wǎng)絡(luò)中的網(wǎng)站，獲取需要的資訊或接受網(wǎng)絡(luò)服務(wù)。　　網(wǎng)頁（Website）是一個(gè)文件，存儲(chǔ)在某一臺(tái)與因特網(wǎng)相連的計(jì)算機(jī)或服務(wù)器中。網(wǎng)頁經(jīng)由統(tǒng)一資源定位器（uRL）來識(shí)別與存取，當(dāng)用戶在瀏覽器中輸入網(wǎng)址（即URL）后，服務(wù)器端程序處理后，網(wǎng)頁文件傳送到用戶的計(jì)算機(jī)，然后通過瀏覽器解釋網(wǎng)頁的內(nèi)容之后再展示給用戶。　　1.1.1　網(wǎng)站與網(wǎng)頁的關(guān)系　　許多企業(yè)和公司都擁有自己的網(wǎng)站，并利用網(wǎng)站進(jìn)行宣傳、發(fā)布產(chǎn)品資訊和招聘信息。隨著網(wǎng)頁制作技術(shù)的流行，很多個(gè)人也開始制作個(gè)人主頁，這些網(wǎng)頁通常是作者用來自我介紹、展現(xiàn)個(gè)性的地方。同時(shí)也出現(xiàn)了很多以提供網(wǎng)絡(luò)資訊為營利手段的網(wǎng)絡(luò)公司，通常這些公司的網(wǎng)站會(huì)提供生活各個(gè)方面的資訊，如時(shí)事新聞、旅游、娛樂、經(jīng)濟(jì)等?！　≡谝蛱鼐W(wǎng)的早期，網(wǎng)站還只能保存單純的文本。經(jīng)過幾年的發(fā)展，當(dāng)萬維網(wǎng)出現(xiàn)之后，圖像、聲音、動(dòng)畫、視頻，甚至3D技術(shù)開始在因特網(wǎng)上流行起來，網(wǎng)站也慢慢地發(fā)展成人們現(xiàn)在看到的圖文并茂的樣子。通過動(dòng)態(tài)網(wǎng)頁技術(shù)，用戶也可以與其他用戶或者網(wǎng)站管理者進(jìn)行交流，也有一些網(wǎng)站為用戶提供電子郵件服務(wù)?！　【W(wǎng)頁是網(wǎng)站中的一“頁”，通常是HTML格式（文件擴(kuò)展名為.html或.htm、.asp、.aspx、.php、.jsp等），需要通過Web頁面瀏覽器閱讀。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。可以說，網(wǎng)站就是由網(wǎng)頁組成的。如果只有域名和虛擬主機(jī)，而沒有制作任何網(wǎng)頁的話，用戶仍舊無法訪問網(wǎng)站。

圖書封面

圖書標(biāo)簽Tags

無

評(píng)論、評(píng)分、閱讀與下載

---

    CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo) PDF格式下載

---