CSS與Dreamweaver CS3完美網(wǎng)頁(yè)設(shè)計(jì)

內(nèi)容概要

　　《CSS與Dreamweaver CS3完美網(wǎng)頁(yè)設(shè)計(jì)》以將CSS與Dreamweaver兩個(gè)軟件的功能相結(jié)合的方式，通過大量實(shí)例介紹了CSS基礎(chǔ)知識(shí)，然后從固定起始頁(yè)面和居中起始頁(yè)面開始，逐步深入地介紹從基于表格的布局轉(zhuǎn)向CSS、使用液態(tài)CSS的布局，以及利用彈性布局創(chuàng)建更復(fù)雜的頁(yè)面，最后介紹如何利用CSS和Spry構(gòu)建圖片庫(kù)站點(diǎn)?！禖SS與Dreamweaver CS3完美網(wǎng)頁(yè)設(shè)計(jì)》由經(jīng)驗(yàn)豐富的技術(shù)專家撰寫，具有較強(qiáng)的專業(yè)性和針對(duì)性。

書籍目錄

第1章 CSS基礎(chǔ)知識(shí)1.1 （X）HTML文檔1.1.1 文檔類型1.1.2 字符編碼1.1.3 自然的文檔流1.1.4 行內(nèi)元素和塊元素1.1.5 用div構(gòu)建頁(yè)面1.2 CSS文檔1.2.1 CSS語(yǔ)法1.2.2 CSS選擇符類型1.2.3 層疊1.2.4 一些真正混淆的內(nèi)容——優(yōu)先級(jí)1.2.5 繼承1.2.6 box模型1.2.7 瀏覽器怪異現(xiàn)象1.2.8 hasLayout屬性1.2.9 定位技術(shù)1.3 操縱自然流1.3.1 浮動(dòng)圖像1.3.2 應(yīng)用清除元素1.3.3 插入div標(biāo)簽1.3.4 絕對(duì)定位的列1.3.5 清除浮動(dòng)列1.3.6 進(jìn)入布局第2章 使用固定起始頁(yè)面和居中起始頁(yè)面2.1 開始創(chuàng)建2.1.1 準(zhǔn)備HTML文檔2.1.2 準(zhǔn)備比較圖2.1.3 為body元素設(shè)置樣式2.2 在CSS中使用速記屬性2.3 使用背景圖像2.3.1 創(chuàng)建"偽造"的右列2.3.2 創(chuàng)建外發(fā)光效果2.4 創(chuàng)建標(biāo)題2.4.1 絕對(duì)定位：并非一無(wú)是處2.4.2 添加標(biāo)志2.5 使側(cè)邊列圓角化2.5.1 首先設(shè)置頂部2.5.2 創(chuàng)建偽底2.6 添加頁(yè)面底部2.6.1 添加外部頁(yè)面包裝器2.6.2 定位底部花朵圖形2.6.3 要不要使用PNG格式，這是個(gè)問題2.7 關(guān)于浮動(dòng)和清除的一點(diǎn)說明2.7.1 在頁(yè)面中創(chuàng)建Pod2.7.2 避免浮動(dòng)蔓延——如何迫使div包含自己的浮動(dòng)2.7.3 空白——最后的處女地2.8 源代碼順序的問題2.9 字體與最終的樣式化2.9.1 命名錨記和鏈接2.9.2 樣式化標(biāo)題2.9.3 平均化側(cè)邊列2.10 首字放大——簡(jiǎn)單的頁(yè)面修飾技巧2.11 完成腳注2.12 消除錯(cuò)誤2.12.1 針對(duì)IES調(diào)整數(shù)值——怪異模式2.12.2 hasLayout問題2.12.3 使用"檢查瀏覽器兼容性"功能2.13 聲明媒體類型2.14 小結(jié)第3章 從基于表格的布局轉(zhuǎn)向CSS3.1 CSS問題3.1.1 利用"查找和替換"確定現(xiàn)有規(guī)則3.1.2 組織CSS規(guī)則3.1.3 建立順序3.1.4 合并屬性3.1.5 完成合并3.2 清理混亂的table標(biāo)簽3.2.1 利用"查找和替換"清除表格代碼3.2.2 使用CSS樣式化列表3.2.3 取消表格的嵌套狀態(tài)3.2.4 利用AdobeFireworksCS3修改圖形3.2.5 利用Div封裝內(nèi)容3.2.6 微調(diào)列表3.2.7 加快速度3.2.8 實(shí)踐所學(xué)的內(nèi)容3.3 重建頁(yè)面標(biāo)題3.3.1 在標(biāo)題中添加背景圖形3.3.2 定位導(dǎo)航圖像3.4 繼續(xù)清理過程3.5 刪除最后的表格標(biāo)記3.6 小結(jié)第4章 使用液態(tài)CSS布局4.1 簡(jiǎn)化CSS選擇符4.2 創(chuàng)建標(biāo)題4.2.1 插入背景圖像4.2.2 插入徽標(biāo)圖像4.3 創(chuàng)建水平導(dǎo)航條4.3.1 為水平導(dǎo)航條創(chuàng)建CSS4.3.2 將命名錨記樣式化為按鈕4.3.3 使用設(shè)計(jì)時(shí)樣式表4.3.4 水平導(dǎo)航條的最后微調(diào)4.3.5 解決水平滾動(dòng)問題4.3.6 創(chuàng)建hover和當(dāng)前頁(yè)面指示器狀態(tài)4.4 布局主內(nèi)容區(qū)域4.4.1 修改列4.4.2 處理邊界4.4.3 列的假象4.4.4 定位背景4.4.5 微調(diào)列4.4.6 添加徽章 圖像4.4.7 創(chuàng)建左手導(dǎo)航條4.4.8 樣式化菜單鏈接4.4.9 在垂直菜單中放置頁(yè)面指示器4.4.10 樣式化mainContent區(qū)域4.5 處理底部：樣式化腳注4.5.1 浮動(dòng)左側(cè)元素和右側(cè)元素4.5.2 最后的修飾第5章 利用彈性布局創(chuàng)建更復(fù)雜的頁(yè)面5.1 新文檔5.1.1 重新設(shè)置CSS默認(rèn)值5.1.2 創(chuàng)建一個(gè)重設(shè)代碼片段5.1.3 跳到左邊5.1.4 調(diào)整重設(shè)5.2 em單位的重要性5.2.1 em是相對(duì)的5.2.2 對(duì)文字進(jìn)行一些調(diào)整5.3 視覺變換5.3.1 樣式化標(biāo)題5.3.2 標(biāo)題假象5.3.3 添加行內(nèi)導(dǎo)航5.3.4 改善Dreamweaver的性能5.4 主要內(nèi)容5.5 主站點(diǎn)導(dǎo)航條5.5.1 為列表項(xiàng)添加背景5.5.2 樣式化鏈接本身5.5.3 使用cite元素5.5.4 處理右邊側(cè)欄5.5.5 腳注是最后一個(gè)元素，但內(nèi)容并非最少5.5.6 快速處理IECC5.6 創(chuàng)建并樣式化基于em的表單5.6.1 編寫表單代碼5.6.2 樣式化表單5.6.3 添加表單驗(yàn)證5.7 創(chuàng)建及樣式化可存取的數(shù)據(jù)表格5.7.1 將重活交給Dreamweaver5.7.2 指定表格尺寸5.7.3 提供附加反饋以提高可訪問性5.7.4 樣式化數(shù)據(jù)表格5.7.5 您有成就感嗎第6章 利用CSS和Spry構(gòu)建圖片庫(kù)站點(diǎn)6.1 選擇適當(dāng)?shù)钠鹗柬?yè)布局6.2 構(gòu)建初始框架6.3 光線、相機(jī)、內(nèi)容……6.3.1 使用max-width和min-width6.3.2 解決IE問題——min/max寬度增強(qiáng)6.3.3 約束IE的內(nèi)容區(qū)域6.3.4 擴(kuò)展圖片6.4 找準(zhǔn)方向6.4.1 何謂Spry框架6.4.2 創(chuàng)建基于Spry的導(dǎo)航6.4.3 用CSS為Spry菜單欄應(yīng)用樣式6.4.4 在菜單欄上進(jìn)行最后的修改6.4.5 我在哪里？通過菜單欄給出反饋6.5 在單個(gè)站點(diǎn)中組合使用兩個(gè)CSS布局6.5.1 簡(jiǎn)要介紹公共頁(yè)面元素6.5.2 為Sidebar2添加樣式6.6 構(gòu)建圖片庫(kù)——第一部分6.7 漸進(jìn)增強(qiáng)——使圖片庫(kù)很酷6.7.1 創(chuàng)建HTML數(shù)據(jù)集6.7.2 快速檢查6.7.3 Spry滾動(dòng)面板構(gòu)件6.7.4 為Spry滾動(dòng)面板構(gòu)件創(chuàng)建結(jié)構(gòu)6.7.5 在滾動(dòng)面板中導(dǎo)航6.7.6 添加詳細(xì)圖像6.8 完美地通過驗(yàn)證6.8.1 創(chuàng)建不唐突的JavaScript文件6.8.2 考慮周全6.8.3 最后的完善

章節(jié)摘錄

　　第1章 CSS基礎(chǔ)知識(shí)　　本書的目標(biāo)是通過介紹大量方便的技術(shù)，幫助讀者使用Dreamweaver CS3的CSS布局和CSS工具，快速創(chuàng)建漂亮的、遵循Web標(biāo)準(zhǔn)且每個(gè)人都可訪問的站點(diǎn)。但是在真正開始進(jìn)入項(xiàng)目之前，要確保大家都站到同一起跑線上，讓讀者對(duì)CSS的術(shù)語(yǔ)和Dreamweaver的界面有一個(gè)基本的了解。因此，本章是一個(gè)精簡(jiǎn)的CSS初級(jí)教程，包括一些Dreamweaver實(shí)踐練習(xí)，目的是讓您初步了解并熟悉Dreamweaver的CSS工具和CSS布局?！　∽⒁狻　∪绻呀?jīng)非常了解基本的CSS概念，那么可以直接閱讀第2章，或者只是把本章作為復(fù)習(xí)，找出自己CSS知識(shí)中的欠缺。另一方面，如果您是CSS新手，覺得本章內(nèi)容很難理解，沒關(guān)系，請(qǐng)讀完全書再回到本章，您將發(fā)現(xiàn)自己對(duì)這里討論的所有概念都會(huì)茅塞頓開。　　本章首先介紹CSS的基本概念，然后將創(chuàng)建一個(gè)等高的兩列布局，帶有標(biāo)題和腳注，類似于Dreamweaver中的一個(gè)CSS布局——基本上經(jīng)歷了Stephanie編寫CSS布局時(shí)使用的相同過程。閱讀完本章，您應(yīng)該能夠查看Dreamweaver包含的任何CSS布局的代碼，并基本了解所看到的內(nèi)容?！　≡陂_始之前，首先基于“新建文檔”對(duì)話框中CSS布局列表中的“2列固定，左側(cè)欄、標(biāo)題和腳注”布局，保存一個(gè)新頁(yè)面。介紹Web標(biāo)準(zhǔn)的概念時(shí)，將使用該文檔作為示例，如圖1.1所示?！　。?）啟動(dòng)Dreamweaver并選擇“文件”>“新建”。選擇“空白頁(yè)”類別。選擇“頁(yè)面類型”類別下的“HTML”。從“布局”類別選擇“2列固定，左側(cè)欄、標(biāo)題和腳注”。在對(duì)話框最右邊，可以看到布局的圖形表示，以及其規(guī)格的描述?！　。?）將“文檔類型”保持為默認(rèn)的“XHTML 1.0 Transitional”。將“布局CSS位置”保持為默認(rèn)的“添加到文檔頭”。單擊“創(chuàng)建”按鈕?！　。?）將文檔作為concepts.html保存在站點(diǎn)的根文件夾中。

編輯推薦

　　《CSS與Dreamweaver CS3完美網(wǎng)頁(yè)設(shè)計(jì)》特色：　　Adobe Dreamweaver是最優(yōu)秀的Web設(shè)計(jì)工具之一，CSS（CascadingStyleSheets）是非常受歡迎的創(chuàng)建可訪問、遵循標(biāo)準(zhǔn)的Web頁(yè)面的方法。但是，人們常會(huì)錯(cuò)誤地認(rèn)為，像Dreamweaver這樣的可視化設(shè)計(jì)工具不能完成面向標(biāo)準(zhǔn)的設(shè)計(jì)者或開發(fā)者工作流。在《CSS與DreamweaverCS3完美網(wǎng)頁(yè)設(shè)計(jì)》中，作者演示了實(shí)用、高效的技巧和技術(shù)，展現(xiàn)了Dreamweaver和CSS這個(gè)強(qiáng)大組合的魅力。在一系列詳細(xì)的實(shí)例項(xiàng)目中，手把手指導(dǎo)設(shè)計(jì)者出色地完成Web設(shè)計(jì)工作。　　使用Drearmweaver用于構(gòu)建基于CSS的網(wǎng)站的最新工具，您將學(xué)習(xí)到：　　CSS的核心概念；　　如何使用、定制和擴(kuò)展Dreamweaver中包含的CSS布局：　　創(chuàng)建可訪問網(wǎng)站過程中涉及的問題；　　如何使用CSS樣式和定位將一個(gè)現(xiàn)有的基于表的網(wǎng)站變成遵循標(biāo)準(zhǔn)的網(wǎng)站；　　用于解決常見問題的技術(shù)；　　CSS中挑戰(zhàn)性問題的實(shí)際解決方案：　　如何實(shí)現(xiàn)最新的Ajax的Spry框架，以漸進(jìn)增強(qiáng)基于標(biāo)準(zhǔn)的和可訪問的CSS布局。

圖書封面

圖書標(biāo)簽Tags

無(wú)

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

---

    CSS與Dreamweaver CS3完美網(wǎng)頁(yè)設(shè)計(jì) PDF格式下載

---