CSS與Dreamweaver CS3完美網(wǎng)頁設計

內(nèi)容概要

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

書籍目錄

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

章節(jié)摘錄

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

編輯推薦

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

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

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

---