Dreamweaver CS3超酷網(wǎng)頁設(shè)計(jì)CSS篇

前言

　　目前Web標(biāo)準(zhǔn)大潮已經(jīng)席卷了國(guó)內(nèi)的網(wǎng)站設(shè)計(jì)領(lǐng)域，許多網(wǎng)站設(shè)計(jì)師學(xué)習(xí)并應(yīng)用Web標(biāo)準(zhǔn)，本書就是在這一時(shí)期推出的一本利用Web標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁設(shè)計(jì)制作的指導(dǎo)書，適用于所有網(wǎng)站設(shè)計(jì)師以及網(wǎng)站開發(fā)人員。Web標(biāo)準(zhǔn)的推出將網(wǎng)站的內(nèi)容與表現(xiàn)分離，同時(shí)XHTML文檔要具有良好的結(jié)構(gòu)，因此需要拋棄傳統(tǒng)的表格布局方式，采用Div布局，并且使用CSS層疊樣式表來實(shí)現(xiàn)頁面的外觀。CSS＋Div是網(wǎng)站標(biāo)準(zhǔn)中常用的術(shù)語之一，CSS和Div的結(jié)構(gòu)被越來越多的人采用，很多人都拋棄了表格而使用CSS來布局頁面，它的好處很多，可以使結(jié)構(gòu)簡(jiǎn)潔，定位更靈活，CSS布局的最終目的是搭建完善的頁面架構(gòu)。通常XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用CSS+Div的方式實(shí)現(xiàn)各種定位?！　”緯饕獌?nèi)容　　本書編者中既有多年網(wǎng)頁教學(xué)經(jīng)驗(yàn)的教師，也有多年實(shí)際商業(yè)網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)師，積累了大量網(wǎng)頁設(shè)計(jì)制作方面的經(jīng)驗(yàn)，精通網(wǎng)頁布局的多種技巧。本書基于Dreamweaver CS3等常用網(wǎng)頁設(shè)計(jì)制作軟件，按照從簡(jiǎn)單到復(fù)雜、從入門到精通的寫作思路，結(jié)合了多個(gè)典型的網(wǎng)站實(shí)例，使讀者不但可以學(xué)會(huì)使用多種網(wǎng)頁制作工具制作出精美的網(wǎng)頁，還進(jìn)一步告訴大家如何設(shè)計(jì)符合Web標(biāo)準(zhǔn)的CSS布局。本書的編寫重點(diǎn)將通過實(shí)例講解如何運(yùn)用Div+CSS對(duì)頁面進(jìn)行布局制作。　　本書共包括15章，主要內(nèi)容如下?！　〉?章和第2章主要講解HTML文件的基本結(jié)構(gòu)、為什么要建立Web標(biāo)準(zhǔn)、為什么要在網(wǎng)頁中加入CSS、CSS基本語法、使用Dreamweaver編輯CSS、設(shè)置CSS屬性?！　〉?～8章主要講解設(shè)計(jì)豐富的文字效果、用CSS設(shè)計(jì)圖像和背景、設(shè)計(jì)更富靈活性的表格、設(shè)計(jì)更酷更炫的表單、用CSS制作實(shí)用的菜單和網(wǎng)站導(dǎo)航、設(shè)計(jì)具有特色的超鏈接效果。　　第9～11章主要講解CSS+DIV布局定位基礎(chǔ)、CSS+DIV布局方法、CSS與JavaScript的綜合　　　應(yīng)用。　　第12～15章主要講解個(gè)人網(wǎng)站的布局設(shè)計(jì)、公司宣傳網(wǎng)站的布局、購(gòu)物網(wǎng)站的布局、留學(xué)網(wǎng)站的布局。　　附錄主要講解RGB網(wǎng)頁配色表、216種網(wǎng)頁安全顏色、CSS屬性一覽表、HTML常用標(biāo)簽等知識(shí)。　　本書特色　　* 循序漸進(jìn)，由淺入深　　為方便讀者學(xué)習(xí)，本書首先介紹網(wǎng)頁的概念，然后講解HTML的基本結(jié)構(gòu)，使讀者對(duì)網(wǎng)頁制作和制作工具有一個(gè)初步認(rèn)識(shí)。在此基礎(chǔ)上，通過Dreamweaver的可視化操作，簡(jiǎn)單地實(shí)現(xiàn)網(wǎng)頁效果，提高讀者的興趣；再結(jié)合CSS進(jìn)行語法講解，使讀者牢牢地掌握這些基本要素?！　? 技術(shù)全面，內(nèi)容充實(shí)　　本書系統(tǒng)地講解了CSS層疊樣式表的基礎(chǔ)理論和實(shí)際運(yùn)用技術(shù)，通過大量實(shí)例對(duì)CSS進(jìn)行深入淺出的分析，并且講解了相關(guān)的Dreamweaver操作?！　? 講解詳細(xì)，圖文并茂　　本書從實(shí)例出發(fā)，通過詳細(xì)的步驟把知識(shí)介紹給讀者。同時(shí)配有實(shí)例圖片，使操作更為直觀，從而避免了單一文字的枯燥學(xué)習(xí)。再根據(jù)操作的結(jié)果講解語法，讓讀者更容易理解?！　? 本書的一個(gè)重要特點(diǎn)就是讓那些不懂CSS語法的讀者也能利用Dreamweaver在不需要或者只需要修改少量代碼的情況下就能使用CSS布局美化網(wǎng)頁。而對(duì)于熟悉CSS的讀者也可以參考本書使用Dreamweaver來可視化地設(shè)計(jì)網(wǎng)頁?！　? 書盤結(jié)合，交互學(xué)習(xí)　　本書配套光盤中含有全書的全部實(shí)例文件，內(nèi)容豐富多彩，簡(jiǎn)潔實(shí)用?！　”緯x者對(duì)象　　本書既適合于CSS初中級(jí)讀者、網(wǎng)站設(shè)計(jì)與制作人員、網(wǎng)站開發(fā)與程序設(shè)計(jì)人員及個(gè)人網(wǎng)站愛好者閱讀，又可以作為大中專院?；蛘呱鐣?huì)各類培訓(xùn)班的培訓(xùn)教材，同時(shí)對(duì)CSS高級(jí)用戶也有很高的參考價(jià)值?！　”緯尚滤嚳萍冀M織編寫，參加編寫和提供素材的還有馮雷雷、鄧靜靜、李銀修、劉宇星、劉貴國(guó)、王東柱、范青藍(lán)、喬海麗、郭娜、張曉亮、葛偉、楊愛艷、郭鵬、孫起云、呂志彬、鄧方方、何秀明、張禮明、孫文成、李平生、何新起、孫素華、何立、吳秀紅等?！　∮捎谧髡咚接邢?，加之創(chuàng)作時(shí)間倉(cāng)促，本書不足之處在所難免，歡迎廣大讀者批評(píng)指正。

內(nèi)容概要

本書系統(tǒng)地講解了CSS層疊樣式表的基礎(chǔ)理論和實(shí)際運(yùn)用技術(shù)，通過大量實(shí)例對(duì)CSS進(jìn)行深入淺出的分析，主要包括CSS的基本語法和概念，設(shè)置文字、圖片、背景、表格、表單和菜單等網(wǎng)頁元素的方法，以及CSS濾鏡的使用。本書著重講解如何用CSS+DIV進(jìn)行網(wǎng)頁布局，注重實(shí)際操作，使讀者在學(xué)習(xí)CSS應(yīng)用技術(shù)的同時(shí)，掌握CSS+DIV的精髓。　　本書內(nèi)容翔實(shí)，結(jié)構(gòu)清晰，循序漸進(jìn)，并注意各個(gè)章節(jié)與實(shí)例之間的呼應(yīng)和對(duì)照，既可作為CSS初學(xué)者的入門教材，也適合中高級(jí)用戶進(jìn)一步學(xué)習(xí)和參考。

書籍目錄

第1章  Dreamweaver+CSS入門　1.1  HTML文件的基本結(jié)構(gòu)　　1.1.1  HTML文件結(jié)構(gòu)　　1.1.2  使用記事本手工編寫HTML頁面　　1.1.3  使用Dreamweaver編寫HTML頁面　1.2  XHTML入門　1.3  網(wǎng)站與Web標(biāo)準(zhǔn)　　1.3.1  什么是Web標(biāo)準(zhǔn)　　1.3.2  為什么要建立Web標(biāo)準(zhǔn)　　1.3.3  怎樣改善現(xiàn)有網(wǎng)站　1.4  為什么要在網(wǎng)頁中加入CSS　　1.4.1  什么是CSS　　1.4.2  如何編寫CSS第2章  CSS基礎(chǔ)知識(shí)　2.1  CSS基礎(chǔ)　　2.1.1  CSS基本概念　　2.1.2  CSS的優(yōu)點(diǎn)　2.2  使用CSS　　2.2.1  外聯(lián)樣式表　　2.2.2  內(nèi)嵌樣式表　　2.2.3  導(dǎo)入樣式表　　2.2.4  內(nèi)聯(lián)樣式表　2.3  選擇器類型　　2.3.1  標(biāo)簽選擇器　　2.3.2  類選擇器　　2.3.3  ID選擇器　2.4  使用Dreamweaver編輯CSS　　2.4.1  CSS面板　　2.4.2  鏈接外部樣式表　2.5  設(shè)置CSS屬性　　2.5.1  設(shè)置CSS樣式類型　　2.5.2  設(shè)置CSS樣式背景　　2.5.3  設(shè)置CSS樣式區(qū)塊　　2.5.4  設(shè)置CSS樣式方框　　2.5.5  設(shè)置CSS樣式邊框　　2.5.6  設(shè)置CSS樣式列表　　2.5.7  設(shè)置CSS樣式定位　　2.5.8  設(shè)置CSS樣式擴(kuò)展　2.6  實(shí)戰(zhàn)演練——對(duì)網(wǎng)頁添加CSS樣式第3章  設(shè)計(jì)豐富的文字效果　3.1  設(shè)計(jì)網(wǎng)頁中的文字樣式　　3.1.1  字體　　3.1.2  字號(hào)　　3.1.3  加粗　　3.1.4  樣式　　3.1.5  變體屬性　　3.1.6  文字修飾　3.2  設(shè)計(jì)文本的段落樣式　　3.2.1  行高　　3.2.2  對(duì)齊　　3.2.3  縮進(jìn)　　3.2.4  單詞間距　　3.2.5  首字下沉　　3.2.6  大小寫轉(zhuǎn)換　3.3  CSS濾鏡設(shè)計(jì)特效文字　　3.3.1  濾鏡概述　　3.3.2  光暈（Glow）　　3.3.3  模糊（Blur）　　3.3.4  遮罩（Mask）　　3.3.5  透明色（Chroma）　　3.3.6  陰影（DropShadow）　　3.3.7  波浪（Wave）　　3.3.8  X射線（Xray）　3.4  實(shí)戰(zhàn)演練　　3.4.1  用CSS排版網(wǎng)頁文字　　3.4.2  創(chuàng)建動(dòng)感文字第4章  用CSS設(shè)計(jì)圖像和背景　4.1  設(shè)置網(wǎng)頁的背景　　4.1.1  背景顏色　　4.1.2  背景圖像　4.2  設(shè)置背景圖像的屬性　　4.2.1  設(shè)置背景重復(fù)　　4.2.2  設(shè)置固定背景　　4.2.3  設(shè)置背景定位　4.3  設(shè)置網(wǎng)頁圖像的樣式　　4.3.1  設(shè)置圖像邊框　　4.3.2  圖文混合排版　4.4  應(yīng)用CSS濾鏡設(shè)計(jì)圖像特效　　4.4.1  控制圖像和背景的透明度（Alpha）　　4.4.2  灰度（Gray）　　4.4.3  反色（Invert）　4.5  實(shí)戰(zhàn)演練　　4.5.1  給圖片添加邊框　　4.5.2  圖文繞排效果　　4.5.3  鼠標(biāo)指針移到圖片時(shí)產(chǎn)生漸變效果第5章  設(shè)計(jì)更富靈活性的表格　5.1  網(wǎng)頁中的表格　　5.1.1  表格對(duì)象標(biāo)記　　5.1.2  在Dreamweaver中插入表格　　5.1.3  設(shè)置表格的顏色　　5.1.4  設(shè)置表格的邊框樣式　　5.1.5  設(shè)置表格的陰影　　5.1.6  設(shè)置表格的漸變背景　5.2  實(shí)戰(zhàn)演練　　5.2.1  制作變換背景色的表格　　5.2.2  用CSS制作漂亮的彩色背景表格　　5.2.3  制作陰影表格　　5.2.4  制作圓角表格　　5.2.5  制作半透明的表格第6章  設(shè)計(jì)更酷更炫的表單　6.1  網(wǎng)頁中的表單　　6.1.1  表單對(duì)象　　6.1.2  表單標(biāo)記　　6.1.3  表單的布局設(shè)計(jì)　　6.1.4  設(shè)置邊框樣式　　6.1.5  設(shè)置背景樣式　　6.1.6  設(shè)置輸入文本的樣式　　6.1.7  用CSS+DIV設(shè)計(jì)表單　6.2  實(shí)戰(zhàn)演練　　6.2.1  改變按鈕的背景顏色和文字顏色　　6.2.2  設(shè)計(jì)文本框的樣式　　6.2.3  設(shè)計(jì)文本框中的文字樣式　　6.2.4  制作透明的表單背景　　6.2.5  為下拉菜單變換顏色　　6.2.6  設(shè)置Form表單內(nèi)textarea背景圖片第7章  制作實(shí)用的菜單和網(wǎng)站導(dǎo)航　7.1  項(xiàng)目列表　　7.1.1  有序列表　　7.1.2  無序列表　7.2  橫排導(dǎo)航　　7.2.1  文本導(dǎo)航　　7.2.2  標(biāo)簽式導(dǎo)航　7.3  豎排導(dǎo)航　7.4  實(shí)戰(zhàn)演練　　7.4.1  實(shí)現(xiàn)背景變換的導(dǎo)航菜單　　7.4.2  利用CSS制作橫向?qū)Ш健　?.4.3  制作網(wǎng)頁下拉菜單第8章  設(shè)計(jì)具有特色的超鏈接效果　8.1  超鏈接基礎(chǔ)　　8.1.1  超鏈接的基本概念　　8.1.2  使用“頁面屬性”設(shè)置超鏈接　8.2  鏈接標(biāo)記　　8.2.1  a:link　　8.2.2  a:visited　　8.2.3  a:active　　8.2.4  a:hover　8.3  各種形式的超鏈接　　8.3.1  背景色變換鏈接　　8.3.2  多姿多彩的下劃線鏈接　　8.3.3  圖像翻轉(zhuǎn)鏈接　　8.3.4  邊框變換鏈接　8.4  實(shí)戰(zhàn)演練　　8.4.1  使用CSS實(shí)現(xiàn)鼠標(biāo)指針形狀改變　　8.4.2  為超鏈接文字加上質(zhì)感邊框　　8.4.3  鼠標(biāo)指針移到鏈接文字上時(shí)改變文字大小或顏色　　8.4.4  給超鏈接添加提示文字　　8.4.5  文本超鏈接模擬按鈕效果第9章  CSS+DIV布局定位基礎(chǔ)　9.1  Div標(biāo)記與Span標(biāo)記　　9.1.1  Div概述　　9.1.2  Div與Span的區(qū)別　9.2  在Dreamweaver中使用Div　9.3  盒子模型　　9.3.1  盒子模型的概念　　9.3.2  border　　9.3.3  padding　　9.3.4  margin　9.4  元素的定位方式　　9.4.1  float定位　　9.4.2  position定位　　9.4.3  z-index空間位置第10章  CSS+DIV布局方法　10.1  CSS布局理念　　10.1.1  將頁面用Div分塊　　10.1.2  設(shè)計(jì)各塊的位置　　10.1.3  用CSS定位　10.2  常見的布局類型　　10.2.1  一列固定寬度　　10.2.2  一列自適應(yīng)　　10.2.3  兩列固定寬度　　10.2.4  兩列寬度自適應(yīng)　　10.2.5  兩列右列寬度自適應(yīng)　　10.2.6  三列浮動(dòng)中間寬度自適應(yīng)　　10.2.7  三行二列居中高度自適應(yīng)布局　10.3  CSS布局與傳統(tǒng)的表格方式布局分析　10.4  使用CSS布局模板第11章  CSS與JavaScript的綜合應(yīng)用　11.1  JavaScript簡(jiǎn)介　　11.1.1  什么是JavaScript　　11.1.2  JavaScript特點(diǎn)　11.2  JavaScript的基本語法　　11.2.1  常量和變量　　11.2.2  表達(dá)式和運(yùn)算符　　11.2.3  基本語句　　11.2.4  函數(shù)　11.3  JavaScript事件　11.4  JavaScript內(nèi)部對(duì)象　　11.4.1  navigator對(duì)象　　11.4.2  document對(duì)象　　11.4.3  Windows對(duì)象　　11.4.4  location對(duì)象　　11.4.5  history對(duì)象　11.5  實(shí)戰(zhàn)演練　　11.5.1  隨鼠標(biāo)移動(dòng)的圖像　　11.5.2  制作圖片循環(huán)隱現(xiàn)效果　　11.5.3  制作幻燈片效果　　11.5.4  制作燈光效果　　11.5.5  任意選擇網(wǎng)頁中內(nèi)容的文字顏色、背景顏色、字號(hào)第12章  設(shè)計(jì)布局富有個(gè)性的個(gè)人網(wǎng)站　12.1  個(gè)人網(wǎng)站設(shè)計(jì)概述　12.2  個(gè)人網(wǎng)站色彩搭配和結(jié)構(gòu)設(shè)計(jì)　12.3  網(wǎng)站前期策劃　　12.3.1  確定網(wǎng)站主題　　12.3.2  確定目錄結(jié)構(gòu)　　12.3.3  網(wǎng)站藍(lán)圖的規(guī)劃　12.4  制作網(wǎng)站主頁　　12.4.1  導(dǎo)入外部CSS　　12.4.2  制作頂部文件　　12.4.3  制作個(gè)人簡(jiǎn)介　　12.4.4  制作個(gè)人相冊(cè)　　12.4.5  制作最新動(dòng)態(tài)　　12.4.6  制作底部文件第13章  公司宣傳網(wǎng)站的布局　13.1  企業(yè)網(wǎng)站設(shè)計(jì)概述　13.2  分析架構(gòu)　　13.2.1  設(shè)計(jì)分析　　13.2.2  排版構(gòu)架　13.3  各模塊設(shè)計(jì)　　13.3.1  布局設(shè)計(jì)　　13.3.2  頁面的通用規(guī)則　　13.3.3  制作#header對(duì)象部分　　13.3.4  制作導(dǎo)航#nav對(duì)象部分　　13.3.5  公司介紹和圖片展示部分　　13.3.6  制作我們的服務(wù)部分　　13.3.7  制作#aside對(duì)象部分　　13.3.8  制作底部版權(quán)信息部分第14章  購(gòu)物網(wǎng)站布局　14.1  購(gòu)物網(wǎng)站設(shè)計(jì)概述　　14.1.1  購(gòu)物網(wǎng)站分析　　14.1.2  排版構(gòu)架　14.2  各部分設(shè)計(jì)　　14.2.1  導(dǎo)入外部CSS　　14.2.2  制作頭部文件　　14.2.3  設(shè)計(jì)新品上架區(qū)　　14.2.4  設(shè)計(jì)熱門商品區(qū)　　14.2.5  設(shè)計(jì)會(huì)員登錄區(qū)　　14.2.6  設(shè)計(jì)商品分類區(qū)　　14.2.7  設(shè)計(jì)新品排行區(qū)　　14.2.8  插入底部文件第15章  留學(xué)網(wǎng)站的布局　15.1  分析架構(gòu)　　15.1.1  設(shè)計(jì)分析　　15.1.2  排版構(gòu)架　15.2  各模塊設(shè)計(jì)　　15.2.1  頁面的通用規(guī)則　　15.2.2  頂部logo、banner部分　　15.2.3  制作導(dǎo)航菜單部分　　15.2.4  制作xinyi_content1部分　　15.2.5  制作xinyi_bigad部分　　15.2.6  制作xinyi_content2部分　　15.2.7  制作xinyi_content3部分　　15.2.8  制作xinyi_bigad2部分　　15.2.9  制作xinyi_content4部分　　15.2.10  友情鏈接xinyi_link部分　　15.2.11  版權(quán)xinyi_copyright部分附錄A  CSS屬性一覽表附錄B  216種網(wǎng)頁安全顏色附錄C  RGB網(wǎng)頁配色表附錄D  HTML常用標(biāo)簽

章節(jié)摘錄

　　第1章　Dreamweaver+CSS入門　　本章導(dǎo)讀　　對(duì)一個(gè)網(wǎng)頁設(shè)計(jì)者來說，HTML語言一定不陌生，因?yàn)樗蔷W(wǎng)頁制作的基礎(chǔ)，但是如果希望網(wǎng)頁能夠美觀、大方，并且升級(jí)維護(hù)方便，那么僅僅知道HTML還是不夠的，還需要了解CSS。本章講解HTML的基本語法結(jié)構(gòu)，HTML文件的編寫方式，什么是Web標(biāo)準(zhǔn)，為什么要建立Web標(biāo)準(zhǔn)，為什么要在網(wǎng)頁中加入CSS。了解這些基礎(chǔ)知識(shí)，可以為后面的學(xué)習(xí)打下基礎(chǔ)?！　〖夹g(shù)要點(diǎn)　　HTML文件的基本結(jié)構(gòu)　　HTML頁面的編寫方法　　什么是Web標(biāo)準(zhǔn)　　為什么要建立Web標(biāo)準(zhǔn)　　什么是CSS　　如何編寫CSS

編輯推薦

　　《Dreamweaver CS3超酷網(wǎng)頁設(shè)計(jì)：CSS篇》內(nèi)容翔實(shí)，結(jié)構(gòu)清晰，循序漸進(jìn)，并注意各個(gè)章節(jié)與實(shí)例之間的呼應(yīng)和對(duì)照，既可作為CSS初學(xué)者的入門教材，也適合中高級(jí)用戶進(jìn)一步學(xué)習(xí)和參考。　　《Dreamweaver CS3超酷網(wǎng)頁設(shè)計(jì)：CSS篇》內(nèi)含80個(gè)公司網(wǎng)站模板，近100項(xiàng)軟件功能的詳細(xì)講解，贈(zèng)送460多個(gè)相關(guān)的矢量圖標(biāo)文件。

圖書封面

圖書標(biāo)簽Tags

無

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

---

    Dreamweaver CS3超酷網(wǎng)頁設(shè)計(jì)CSS篇 PDF格式下載

---