編輯推薦
前端設計人員必備教程
圖文並茂,輕鬆掌握全新設計技術
全麵應用HTML5和CSS3,一步跨入最前沿
內容簡介
隨著iPad mini的發布,又一個新的屏幕尺寸誕生瞭。用不著全麵統計,你就會發現移動互聯網時代眾多的屏幕規格,從智能手機的3、4、5英寸,到平闆電腦的7、8、9、10英寸,再到筆記本和颱式機的13至30英寸,絕非目前單一的固定或流式布局所能應付。於是,響應式設計應運而生,而且它也將成為移動互聯網時代前端設計與開發人員的一門必修課。
《響應式Web設計:HTML5和CSS3實戰》堪稱學習響應式Web設計的難得佳作。它不僅全麵、細緻、圖文並茂地介紹瞭響應式設計相關的技術,比如媒體查詢、流式布局、彈性媒體和彈性字體等,還把近幾年來Web設計領域公認的設計理念有機地融入到瞭實例當中,比如移動先行(Mobile First)、漸進增強、平穩退化、無障礙設計等。更加難得的是,本書以設計跨屏幕的網頁(響應式設計)為齣發點,以點帶麵,把如今Web設計領域兩大標準的新版本HTML5和CSS3也納入其中,讀者在掌握先進設計方法的同時也能掌握新的設計技術(比如使用新的HTML5結構化語義標記、嵌入媒體、響應式視頻,以及CSS3的新選擇器、特效、過渡、變形和動畫等),從而可以免除重復學習新標準之苦,讓自己一步跨入Web設計領域的前沿。無論你想學習響應式Web設計,還是學習HTML5和CSS3的實際應用,《響應式Web設計:HTML5和CSS3實戰》都能滿足你的需要,是毋庸置疑的明智之選。
說到底,響應式Web設計並非一門獨立的技術,而隻是現有技術的一個組閤應用。隻要有一點HTML和CSS基礎的讀者都能順利地掌握它。對於中、高級的前端設計和開發人員,翻閱《響應式Web設計:HTML5和CSS3實戰》也有助於理清自己的知識脈絡,對這個新的設計理念獲得更全麵、深入的理解和把握。
作者簡介
Ben Frain,是一名具有十多年經驗的網頁設計師和前端工程師,直接與世界各地的客戶和設計機構並肩工作。同時他還是一名技術記者,定期為一些關注Mac平颱、前沿科技、網頁設計和航空技術的刊物撰稿。
在此之前,他曾是一名懷纔不遇的(而且謙虛謹慎的)電視演員,畢業於索爾福德大學的媒體與錶演專業。他寫瞭四部(自認為)同樣被低估的劇本,而且始終心懷能賣齣一部的信念(盡管不那麼強烈瞭)。
工作之餘,在身體(和妻子)允許的情況下,他喜歡玩室內足球。
精彩書評
“看完這本書,我必須得說,這時間花得太值瞭。作者通過一個虛構的網站,讓我們掌握所有細節。”
“響應式Web設計具有巨大的潛在商業價值,這本書把響應式Web設計講得非常透徹。”
——讀者評論
目錄
第1章 HTML5、CSS3及響應式設計入門
1.1 為什麼智能手機很重要(而老版的IE不再重要)
1.2 響應式設計一定是最佳選擇嗎
1.3 響應式網頁設計的定義
1.4 為什麼要在響應式設計上停滯不前
1.5 響應式網頁設計示例
1.5.1 下載視口調試工具
1.5.2 在綫創意源泉
1.6 為什麼HTML5很優秀
1.6.1 省時省力
1.6.2 新增瞭語義化標簽元素
1.7 CSS3為響應式設計和更多創新奠定瞭基礎
1.7.1 底綫:CSS3不破壞任何東西
1.7.2 CSS3如何解決日常設計問題
1.8 看呐,不用圖片
1.9 HTML5和CSS3現在就能用嗎
1.10 響應式網頁設計不是靈丹妙藥
1.11 引導客戶:網站不必在所有瀏覽器中錶現一緻
1.12 小結
第2章 媒體查詢:支持不同的視口
2.1 現在就能使用媒體查詢
2.2 為什麼響應式設計需要媒體查詢
2.2.1 媒體查詢語法
2.2.2 媒體查詢能檢測那些特性
2.2.3 用媒體查詢改造我們的設計
2.2.4 加載媒體查詢的最佳方法
2.3 我們的第一個響應式設計
2.3.1 我們的設計是固定寬度的,不要驚訝
2.3.2 響應式設計中要保證圖片盡可能精簡
2.3.3 小視口下的內容剪切
2.4 阻止移動瀏覽器自動調整頁麵大小
2.5 針對不同視口寬度修正設計
2.6 響應式設計中內容始終優先
2.7 媒體查詢隻是必要條件之一
2.8 小結
第3章 擁抱流式布局
3.1 固定布局經不起未來考驗
3.2 為什麼響應式設計需要百分比布局
3.3 將網頁從固定布局修改為百分比布局
3.3.1 需要牢記的公式
3.3.2 設置百分比元素的上下文
3.3.3 必須時刻牢記上下文
3.4 用em替換px
3.5 彈性圖片
3.5.1 讓圖片隨視口縮放
3.5.2 為特定圖片指定特定規則
3.5.3 給彈性圖片設置閾值
3.5.4 超級全能的max-width屬性
3.6 為不同的屏幕尺寸提供不同的圖片
3.7 流動網格布局和媒體查詢的默契配閤
3.8 CSS網格係統
3.9 小結
第4章 響應式設計中的HTML5
4.1 HTML5的哪些部分現在就能用
4.1.1 大多數網站可以用HTML5編寫
4.1.2 膩子腳本和Modernizr
4.2 如何編寫HTML5網頁
4.2.1 HTML5的精簡之道
4.2.2 HTML5標簽的閤理寫法
4.2.3 偉大的標簽萬歲
4.2.4 HTML的廢棄零件
4.3 HTML5的全新語義化元素
……
第5章 CSS3:選擇器、字體和顔色模式
5.1 CSS3給前端開發人員帶來瞭什麼
5.1.1 Internet Explorer 6到8對CSS3的支持
5.1.2 使用CSS3設計和開發頁麵
5.2 CSS規則解析
5.3 私有前綴及其用法
5.4 快速而有效的CSS技巧
5.4.1 CSS3多欄布局
5.4.2 文字換行
5.5 CSS3的新增選擇器及其用法
5.5.1 CSS3屬性選擇器
5.5.2 CSS3結構僞類
5.5.3 對僞元素的修正
5.6 自定義網頁字體
5.6.1 @font-face規則
5.6.2 使用@font-face嵌入網頁字體
5.7 幫幫我,標題模糊怎麼辦
5.8 新的CSS3顔色格式和透明度
5.8.1 RGB顔色
5.8.2 HSL顔色
5.8.3 針對IE6、IE7和IE8提供備用顔色值
5.8.4 透明通道
5.9 小結
第6章 用CSS3創造令人驚艷的美
6.1 文字陰影
6.1.1 HEX、HSL或RGB顔色都可以
6.1.2 px、em或rem都行
6.1.3 取消文字陰影
6.1.4 製作浮雕文字陰影效果
6.1.5 多重文字陰影
6.2 盒陰影
6.2.1 內陰影
6.2.2 多重陰影
6.3 背景漸變
6.3.1 綫性背景漸變
6.3.2 徑嚮背景漸變
6.3.3 重復漸變
6.4 背景漸變圖案
6.5 CSS3的響應性
6.6 組閤使用CSS3屬性
6.7 多重背景圖片
6.7.1 背景圖片大小
6.7.2 背景圖片位置
6.7.3 背景屬性的縮寫語法
6.8 更多CSS特性
6.9 可縮放圖標:響應式設計中的完美選擇
6.10 小結
第7章 CSS3過渡、變形和動畫
7.1 什麼是CSS3過渡以及如何使用它
7.1.1 過渡相關的屬性
7.1.2 響應式網站中的有趣過渡
7.2 CSS3的2D變形
7.3 嘗試CSS3的3D變形
7.3.1 分析3D變形效果
7.3.2 3D變形尚未成熟
7.4 CSS3動畫效果
7.5 小結
第8章 用HTML5和CSS3徵服錶單
8.1 HTML5錶單
8.1.1 理解HTML5錶單中的元素
8.1.2 placeholder
8.1.3 required
8.1.4 autofocus
8.1.5 autocomplete
8.1.6 list(及對應的datalist元素)
8.1.7 HTML5的新輸入類型
8.1.8 日期和時間輸入類型
8.2 如何給不支持新特性的瀏覽器打補丁
8.3 使用CSS3美化HTML5錶單
8.4 小結
第9章 解決跨瀏覽器問題
9.1 漸進增強與優雅降級
9.2 該不該修復老版本IE
9.2.1 統計數據(再看看世界的變化)
9.2.2 個人選擇
9.3 前端的瑞士軍刀:Modernizr
9.3.1 使用Modernizr輔助修正樣式問題
9.3.2 使用Modernizr讓老版本IE支持HTML5元素
9.3.3 給IE6、7、8追加min/max媒體查詢功能
9.3.4 使用Modernizr按需加載資源
9.4 必要時將導航鏈接轉換為下拉菜單
9.5 高分辨率設備(未來趨勢)
9.6 小結
精彩書摘
在上述所有特性中,除scan和grid之外,都可使用min和max前綴來創建一個查詢範圍。例如,分析如下所示的代碼片段:
@import url(”phone.css") screen and (min-width:200px) and (max-width:360px);
這裏對width應用瞭min和max來設定查詢範圍。這樣phone.css文件隻會引入視口寬度介於200像素至360像素的顯示屏設備。
2.2.3用媒體查詢改造我們的設計
毫無疑問,你肯定知道CSS代錶層疊樣式錶。所謂層疊,就是指樣式錶中後麵的樣式會覆蓋前麵相同的樣式(除非前麵的樣式具有更高的針對性)。因此我們可以在樣式錶的開頭設置基本樣式,以便適應所有設計,然後使用媒體查詢來進一步重寫相應的部分。例如,先針對大視口設計(用戶大多數情況下使用鼠標),將導航鏈接設計成簡單的文字鏈接;然後再針對較小的視口,使用媒體查詢重寫這部分樣式,為拇指一族提供更大的點擊區域。
2.2.4加載媒體查詢的最佳方法
現代瀏覽器雖然可以智能地忽略與自身不匹配的樣式文件,但它卻不一定不下載這些文件。因此,將不同媒體查詢的樣式保存到獨立的文件中沒有太大好處(個人喜好或為便於組織代碼除外)。使用多個獨立的文件會增加用於頁麵渲染的HTTP請求數量,從而導緻頁麵加載變慢。
Respond.js是為Intemet Explorer 8及更低版本增加媒體查詢支持的最快的JavaScript工具,但它目前無法解析CSS的@imp。rt命令。因此,建議在已有的樣式錶中追加媒體查詢樣式。使用如下語法即可在已有樣式錶中加入媒體查詢:
@media screen .and (max-width: 768px) {/*樣式*/}
2.3我們的第一個響應式設計
不知道你此刻怎麼想,但我熱切地渴望開始設計一個響應式網頁!我們已經理解瞭媒體查詢的原理,那就讓我們試著駕馭它們,看看它們在實際工作中如何發揮作用。而且我正好有用來測試的項目。下麵請允許我說點題外話……
我喜歡電影。但是,我常常發現自己和彆人的觀點不同(或許這就是我日復一日獨居一室寫代碼的原因之一),尤其是關於什麼是好電影什麼是爛電影。每當奧斯卡奬提名宣布的時候,我經常會有一種強烈的惡心反胃感。我總覺得各種類型的電影都應獲得嘉奬。
前言/序言
如果你想給自己的網站做一個單獨的“手機版”,請三思而後行!響應式網頁設計提供瞭一種設計方法,可以使同一網站在智能手機、桌麵電腦,以及介於這兩者之間的任意設備上完美顯示。這種方法能夠根據用戶的屏幕尺寸,閤理地為現有及將來的各種設備提供最佳的瀏覽體驗。
本書提供瞭一整套方法,用來將一個現有的固定寬度的網站設計變成響應式的。此外,本書應用HTML5和CSS3提供的最新最有用的技術,擴展瞭響應式網頁設計的方法論,以便網站更簡潔、更易於維護。本書還講解瞭編寫和發布代碼、圖片、文件的最佳實踐。
隻要你懂HTML和CSS,你就能製作響應式網站。
本書內容
第1章,HTML5、CSS3及響應式設計入門,定義瞭什麼是響應式網頁設計,展示瞭一些響應式設計的網站示例,重點強調瞭使用HTML5和CSS3的優勢。
第2章,媒體查詢:支持不同的視口,講解瞭什麼是媒體查詢,如何實現媒體查詢,以及如何針對設備能力匹配CSS樣式,將其應用於任意設計。
第3章,擁抱流式布局,講解瞭流式布局的優點,以及如何將一個現有的固定寬度設計輕鬆地轉換為流式布局,怎樣使用CSS框架快速搭建響應式網頁。
第4章,響應式設計中的HTML5,探討瞭使用HTML5技術的諸多好處,比如更簡潔的代碼、語義化標簽、離綫存儲,以及無障礙網頁應用輔助技術。
第5章,CSS3:選擇器、字體和顔色模式,展示瞭CSS3選擇器的強大威力,可以讓你輕鬆地指定和改變任何元素。還講解瞭通過@font-face聲明來使用漂亮的網絡字體,另外講解瞭新的CSS3顔色模式如RGB(A)和HSL(A)。
第6章,用CSS3創造令人驚艷的美,展示瞭如何使用純粹的CSS3代碼實現文字陰影、盒陰影和漸變效果。還涵蓋瞭如何使用多重背景圖片,以及如何通過字體文件創建圖標。
第7章,CSS3的過渡、變形和動畫,講解如何僅使用CSS3來創建和轉換屏幕上的元素,並製作動畫效果。
第8章,用HTML5和CSS3徵服錶單,闡述瞭在所有設備上(從最新的智能手機到桌麵版瀏覽器)都能良好運行的跨瀏覽器錶單開發技巧。
第9章,解決跨瀏覽器問題,講解瞭如何保證老版本的Internet Explorer可響應,如何將一組鏈接修改成移動設備上的一個菜單,如何為高分辨率顯示器提供不同內容,以及如何使用Modernizr框架分條件地加載資源文件。
準備工作
你必須對HTML和CSS很熟悉。有一點JavaScript基礎會很有幫助。良好的電影品味也很有益處。
本書讀者
你是否正在開發兩套網站,一套給移動設備,一套給大顯示器?又或者你已聽說過“響應式網頁設計”但卻不確定如何將HTML5、CSS3和響應式設計融閤在一起?如果是,那麼本書可以讓你在所有競爭對手之前,將你的網站提升到一個更高層次。
本書麵嚮那些正在使用HTML 4.01和CSS 2.1開發固定寬度網站的網頁設計師和開發人員,講解瞭如何使用HTML5和CSS3製作可適應任意屏幕尺寸設備的響應式網站。
本書約定
本書中使用幾種不同的文字樣式來區分不同類型的信息,具體約定如下。
正文中的代碼使用如下格式:
“HTML5接受寬鬆語法,例如 這樣的語句也是有效的。”
代碼段使用如下格式:
……
新術語,以及重要詞匯也使用粗體。文中提到的那些菜單、對話框中的文字,會使用粗體或大寫來標注,如:“導航按鈕不再做背景色切換,內容區的THESE SHOULD HAVE WON按鈕和側邊欄的詳細信息按鈕消失瞭,而字體也與設計文檔相差甚遠。”
這個圖標錶示警告或重要提醒。
這個圖標錶示提示或技巧。
讀者反饋
我們時刻歡迎你的反饋,以便瞭解你對本書的看法。你的寶貴意見有助於我們提升書籍的質量。
一般的閱讀反饋,可直接發送電子郵件,請在郵件標題中注明書名。
如果你在某個領域內有專長且有興趣編寫相關書籍,請訪問網站查看作者指南。
客戶支持
現在你已是Packt圖書的尊貴讀者瞭,我們有一係列的售後支持,保證你的消費物有所值。
錯誤
盡管我們已經對書籍作瞭仔細校對以保證內容準確,但錯誤在所難免。如果在書中發現任何的文字或代碼錯誤,非常歡迎你將這些錯誤提交給我們,這樣可以幫助我們在後續版本中改正錯誤,避免其他讀者産生不必要的誤解。一旦發現錯誤,請登錄網站,選擇書名,點擊errata submission form(提交勘誤)鏈接,然後填寫具體的錯誤信息即可。隻要你提交的勘誤通過驗證,勘誤信息就會上傳到我們的網站,或者追加到已有勘誤列錶中,顯示在該書的勘誤頁麵 。
盜版
對所有媒體來說,互聯網盜版都是一個棘手的問題。Packt很重視版權保護。如果你在互聯網上發現我們公司齣版物的任何非法復製品,請及時告知我們相關網址或網站名稱,以便我們采取補救措施。
如果發現可疑盜版材料,請通過網站聯係我們。對您幫助我們保護作者權益、確保我們持續提供高品質圖書的行為錶示敬意。
問題
如果你對本書有任何問題,請聯係我們,我們會盡力解決。
響應式Web設計 HTML5和CSS3實戰 [Responsive Web Design with HTML5 and] 下載 mobi epub pdf txt 電子書 格式
響應式Web設計 HTML5和CSS3實戰 [Responsive Web Design with HTML5 and] 下載 mobi pdf epub txt 電子書 格式 2024
響應式Web設計 HTML5和CSS3實戰 [Responsive Web Design with HTML5 and] 下載 mobi epub pdf 電子書
響應式Web設計 HTML5和CSS3實戰 [Responsive Web Design with HTML5 and] mobi epub pdf txt 電子書 格式下載 2024