“網絡開發視頻大講堂”叢書系清華社“視頻大講堂”重點大系之一。該大系包括多個子系列,每個子系列的圖書在其同品種的圖書中銷售名列前茅,其中:
4個品種榮獲“全行業暢銷品種”
1個品種榮獲2012年清華大學出版社“專業熱銷書”一等獎
絕大多數品種在“計算機零售圖書排行榜”同品種排行中名列前茅
截至目前該大系累計銷售超過55萬冊
該大系已成為近年來清華社計算機專業基礎類零售圖書熱銷的品牌之一
“網絡開發視頻大講堂”系列作為清華社“視頻大講堂”大系的子系列之一,繼承和創新了清華社“視頻大講堂”大系的編寫模式、寫作風格和優良品質。本書突出了以下內容:
322節大型高清同步視頻演示講解,可反復觀摩,讓學習更為快捷、高效
83個典型中小實例,通過實例學習更深入,更有趣,更有動力
4個綜合實戰案例,展現工作過程,積累工作經驗
?實用網頁模板380套,網頁配色辭典1部,協調色配色參考7套,網頁色彩搭配圖43張,不同色系實物配色卡540張,實用配色參考18部,網頁設計素材13類
?PS分層模板10套,PS樣式8類,PS濾鏡46個,PS漸變樣式6類,PS筆刷樣式9類,PS填充圖案5類,PS字體集合1000個
?HTML工具集6部,CSS工具集8部,JavaScript工具集16部,PS幫助手冊1部
?HTML應用案例360個,CSS3應用案例510個,JavaScript+jQuery應用案例900個,網頁交互設計案例1000個
?Web前端開發規范手冊1部,JavaScript知識點思維導圖10張,HTML+CSS面試題351道,JavaScript面試題685道,網頁欣賞
前言:
CSS作為Web標準的一部分,已經成為現代網頁設計中必不可少的基本語言。CSS3是在CSS2.1基礎上擴展而來,可以說是眾望所歸,這也是技術革新的必然趨勢。在實際Web應用中新標準的采納程度正在以令人目眩的速度不斷地進行著,眾多瀏覽器廠商也在不斷加快對CSS3新特性的支持。
到目前為止,CSS3還沒有一套成熟的規范,其中的模塊也在不斷更新,特別是瀏覽器對CSS3特性的支持也在不斷變化,同時沒有足夠的時間去學習和研究W3C官方文檔和規范,致使我們學習CSS3變得更為困難。CSS看似簡單,但真正精通CSS絕非易事。在使用CSS開發網站時,會遇到形形色色的瀏覽器Bug和不一致問題,而解決方案又五花八門,往往讓使用者感覺千頭萬緒,不知從何著手。
本書將詳細介紹各種有用的CSS技術,總結了CSS設計中的最佳實踐,討論了解決各種實際問題的技術。幫助開發者更好地掌握CSS3的特性,并且將新技術運用到實際的開發中,提高自己開發Web程序的水平。
本書特色
?系統的基礎知識
本書系統地講解了CSS層疊樣式表技術在網頁設計中各個方面應用的知識,從為什么要用CSS開始講解,循序漸進,配合大量實例,幫助讀者奠定堅實的理論基礎,做到知其所以然。
?大量的案例實戰
書中設置大量應用實例,重點強調具體技術的靈活應用,并且全書結合了作者長期的網頁設計制作和教學經驗,使讀者真正做到學以致用。
?深入解剖CSS布局
本書用相當多的篇幅重點介紹了使用CSS進行網頁布局的方法和技巧,配合經典的布局案例,幫助讀者掌握CSS最核心的應用技術。
?高級混合應用技術
真正的網頁除了外觀表現之外,還需要結構標準語言和行為標準的結合,因此本書還特別講解了CSS與JavaScript、Ajax和XML的混合應用,詳細講解了CSS3中的熱點技術和應用,這些都是最新的Web技術,使讀者掌握高級的網頁制作能力。
?精選綜合實例
在本書的最后部分,還精選了4個常見類型的網頁綜合實例,包括企業網站、新聞網站、旅游網站、時尚網站等,幫助讀者總結前面所學知識,綜合應用各種技術、方法和技巧,提高讀者綜合應用的能力。
?超值多媒體教學,海量資源贈送
本書所附光盤的內容為書中介紹的范例的同步視頻講解、源文件及大量參考素材,供讀者學習時參考和對照使用。掃描圖書封底的二維碼,可在手機中在線學習教學視頻。
本書內容
本書共24章,具體結構劃分如下。
第1部分:CSS基礎知識部分,包括第1章~第13章。這部分內容主要介紹了CSS的相關基礎知識,包括CSS語言基礎、字體和文本樣式、圖片樣式、背景圖像樣式、列表樣式、表格樣式、表單樣式、超鏈接樣式、DIV+CSS網頁排版、CSS定位與網頁布局、CSS常見問題與解決。
第2部分:CSS3及其擴展應用,包括第14章~第20章。這部分內容主要介紹了CSS3的新特性,以及使用最新CSS3拓展技術解決復雜的網頁設計問題,包括CSS動畫、CSS框架、Bootstrap擴展、CSS柵格系統、響應式設計、動態樣式等。
第3部分:典型實例,包括第21章~第24章。這部分內容主要通過對4個各具特色的網站制作過程的講解,由淺入深地介紹了如何將層布局與層疊樣式表相結合來完成不同的網頁效果。即使是初學者也可以輕松掌握DIV+CSS布局方式,制作出精美的網頁并搭建功能強大的網站。
本書讀者
?希望系統學習網頁設計、網站制作的初學者和進階者。
?從事網頁設計制作和網站建設的專業人士。
?各大、中專院校相關專業的老師、學生。
?相關培訓機構的學員。
本書約定
為了方便閱讀,本書使用了下面幾個約定:
?W3C表示萬維網聯盟(WorldWideWebConsortium),是制定Web官方標準和規范(如CSS3)的組織。
?初始值(即默認值)是用戶不顯示聲明時元素所具有的屬性值。需特別指明的是,屬性是元素的本質,而不是用戶自定義的屬性。
?HTML指HTML和XHTML這兩種語言。
?除非特別聲明,CSS是指CSS2.1規范。
?IE6及更低版本指Windows的IE5.0~6.0。
?IE8及以下版本代表IE8、IE7和IE6。
?現代瀏覽器或標準瀏覽器是指最新版的Firefox、Safari、Opera、IE7以及IE7以上版本。
?Webkit引擎的瀏覽器是指Safari(包括移動版本和桌面版本)、GoogleChrome和其他近期使用版本的Webkit頁面渲染引擎的瀏覽器,其私有屬性的前綴是-webkit-。
?Gecko引擎的瀏覽器是指Mozilla,常指的是Firefox瀏覽器,其私有屬性的前綴是-moz-。
?Presto引擎的瀏覽器是指Opera,其私有屬性的前綴是-o-。
?KHTML引擎的瀏覽器是指Konqueror,其私有屬性的前綴是-khtml-。
?Trident引擎的瀏覽器是指InternetExplorer,其私有屬性的前綴是-ms-。
?在沒有特別聲明的情況下,本書所指的瀏覽器僅適用于Windows系統,不適用于Mac系統和移動端。
?所有瀏覽器僅代表目前所有廣泛使用的瀏覽器,而非字面意義所涵蓋的那些可能僅占零星市場份額的不知名的瀏覽器。
本書所有HTML示例都應該嵌套在一個有效文檔的標簽中,同時,CSS包含在內部或外部樣式表中。偶爾為了盡量簡短,HTML和CSS放在了同一個代碼示例中。但是在真實的文檔中,這些代碼需要放在各自的位置上才能正常工作。
對于包含重復內容的HTML示例,本書可能不會列出每一行,而是適時地使用省略號表示部分代碼,詳細代碼需要參閱本書光盤示例。
為了給讀者提供更多的學習資源,同時彌補本書篇幅有限的遺憾,本書提供了很多參考鏈接,許多本書無法詳細介紹的問題都可以通過這些鏈接找到答案。由于這些鏈接地址會因時間而有所變動或調整,所以在此說明,這些鏈接地址僅供參考,本書無法保證所有地址是長期有效的。
本書所列出的插圖可能與讀者實際環境中的操作界面有所差別,這可能是由于操作系統平臺、瀏覽器版本等不同而引起的,在此特別說明,讀者應該以實際情況為準。
本書實例設計圖都是在PhotoshopCC中設計制作,在學習本書實例之前需要安裝PhotoshopCC,如果要查看本書源代碼,建議使用DreamweaverCC。
本書所有案例代碼都是在HTML5類型的文檔中編寫的。但這僅表示使用短小精悍的HTML5文檔聲明(!DOCTYPEhtml),沒有使用任何HTML5的新標簽,如section、header、nav和article,所以頁面可以在IE8及以下版本正常運行,可以在自己的頁面中將其更換為喜歡的標簽。所有示例也同樣兼容HTML4.01和XHTML1.0。
由于CSS3技術還在不斷地完善與更新中,建議根據本書提供的參考地址,獲取有關CSS3的最新信息與更新。
編者
13.1CSS文檔統籌
構建CSS系統的第一步是要規劃好CSS文件結構。一般網站CSS樣式文件會被分為主文件和分類文件,在CSS主文件中可以定義所有頁面公共屬性,如網站默認字體、鏈接、頁眉、頁腳和公共類等,同時還會包含各種被分離的CSS文件鏈接。下面介紹如何合理地分離樣式表文件,實現科學分類并優化CSS文件。
13.1.1根據頁面類型分離文件
這種思路是根據不同類型頁面分離CSS樣式表文件。例如,根據網站的首頁、頻道頁面和詳細頁設計不同的樣式表文件。這樣每個頁面都會有屬于自己的CSS文件。當網站頁面類型比較單純,顯示樣式又比較統一時,選擇這種方案非常理想,它簡單明了、行之有效,如一些企業網站就比較適合,基本上用幾個網頁模板就可以實現網站的整體建設。
當頁面結構比較復雜、頁面類型不統一時,例如每個頻道頁的樣式都不盡相同,頻道頁、詳細頁顯示效果千變萬化,使用這種思路分離CSS文件就會很麻煩。
t解決途經
把不同的頁面公共樣式存放在主樣式表文件中,然后分別為不同頁面定義屬于自己的樣式表文件,雖然這不是最佳方案,但卻比較適用。
t存在風險
如果網站系統龐大,這種解決途經會存在一定風險,因為系統龐大,公共樣式必定很多,把如此多的樣式都放在CSS主文件中,會造成主文件非常龐大,違背了CSS文件分離的初衷,當頁面被加載時,會下載很多用不上的樣式代碼。
同時在不同類型的頁面內分別編寫代碼,CSS文件中各放一份樣式代碼,也容易產生代碼冗余,對后期維護不利。
13.1.2根據功能模塊分離文件
這種思路是根據頁面中不同模塊來分離CSS文件。例如,根據頁眉、頁腳、導航條、功能塊、新聞塊等分別設計不同的CSS文件,這樣就可以根據頁面模塊組成分別導入不同的樣式表文件,這個方法比較簡單,編寫的代碼會很干凈,導入文件時有的放矢,下載速度比較塊。
但這種方法也會產生很多個很小的CSS文件。例如,導航條可能只需要十幾行CSS代碼,這樣單獨創建一個樣式表會顯得有點多余。而且每個頁面可能包含很多模塊,這樣就導致每個頁面都包含一堆CSS文件,給管理帶來一定麻煩。
13.1.3根據標簽類型分離文件
這種思路是根據HTML標簽的不同類型來分離CSS文件。例如,把與Form表單相關的樣式代碼放在一個文件中,把與a相關的鏈接樣式放在另一個文件中,如此等等。
這個方法比較直觀、實用。與根據模塊分類類似。如果網站共有50個頁面,其中12個含有Form,那么可以創建一個CSS文件專門處理Form的樣式,只在這12個頁面導入它。如果另外20個頁面含有列表,就創建一個文件專門處理列表樣式。
根據標簽類型分離文件會使樣式表文件變得很細碎,一個頁面有時會導入很多個樣式表文件,顯得比較繁瑣。
13.1.4根據設備類型分離文件
隨著樣式在打印、手提設備等方面的不斷普及應用,這種分類方式逐漸被設計師所青睞。例如,可以根據打印、手持設備和屏幕等多種媒體類型設計不同的樣式文件,這樣能夠使頁面適用不同設備類型,設計師也可以快速轉換頁面,以適用網頁從屏幕到其他設備的延伸,同時將為設計師節省大量的時間和精力。例如在上面示例中就可以看到Adobe公司網站設計師就是根據不同設備分離樣式表的。
13.1.5根據代碼規模分離文件
這種方法是對前面幾種方法的綜合,設計師可以根據代碼規模和意圖,綜合利用上面介紹的方法,實現CSS代碼的有機分離。例如,如果網站表單的樣式比較多,可以把它單獨放在一個CSS文件中,如果某個功能模塊使用頻率比較高,且樣式比較多時,可以考慮把它存放在一個文件中,如果頻道頁面樣式統一,不妨定義一個頻道樣式文件,如此等等。
當然,這種方法也會使網站樣式文件結構顯得比較凌亂,有時會妨礙設計師之間的交流和理解。
關于CSS文件分離技術,讀者也可以根據實際情況適當變通或創新。另外,使用@import語句可以在一個CSS文件或HTML文檔中包含很多其他樣式表文件。因此,設計師就可以細致分離樣式文件,再通過組合并用@import語句把需要的文件導入到一個新的CSS文件,這樣就只需要把這個新的包含文件導入到不同網頁中就可以實現統一管理。用這種方法可以創建網站的主CSS文件,或者實現CSS文件的多種組合,實現代碼的充分利用。當網站每個頁面都導入很多個不同的CSS文件,應該考慮使用這種方法。
……