書籍:《CSS標準網頁布局開發指南》
閱讀方法:王者速讀法
閱讀目的:工作需要;專業性的知識,已經閱讀過幾次,長時間沒用也忘記的差不多了,需要重新拾起來,也想做一個系統性的筆記梳理。
第一階段,預覽
要明確目的的解決問題
第一,想獲得什么信息。專業基礎知識,長時間沒用,從知識、到思維都需要梳理梳理。
第二,能獲得什么信息。基礎而全面的CSS知識,簡單的Web標準及XHTML書寫規范知識,配合Dreamwerver編輯工具,豐富的CSS實例及效果展示。
第三,明確重點內容。CSS核心知識,CSS語法及書寫規范、CSS各種布局和容器屬性等;HTML各種屬性記不住不要緊,CSS核心邏輯及布局、容器原理要弄懂。
具體閱讀
1.封面。「配合W3C的Web標準」,「詳細講解常用CSS屬性」,「實例豐富,難點解決,注意瀏覽器兼容性」;陳剛編著。
2.版權頁。2007年6月出版;內容簡介對全書內容做了概括。
3.編輯寄語及前言。對全書內容及特點做一個概括性闡述。
4.目錄。共13章,目錄已經把內容分為四大部分。第一部分第1章到第3章,CSS布局基礎知識;第二部分第4章到第9章,CSS頁面布局技巧;第三部分第10章和第11章,整站的CSS定義技巧;第四部分第12章和第13章,實例制作。
總結:
對CSS內容有一定的熟悉,以前已經讀過類似的書,不過不夠系統和深入,需要進行專業知識的梳理。5分鐘要瀏覽完所有的封面、前言、目錄有一定的難度,尤其許多知識還不是很熟悉,太多內容都在目錄上了,領會目錄都感覺領會大半本書了。
第二階段,快速翻閱全書
對圖表的印象
翻閱所有的書頁,標題、圖表、照片等最顯眼的內容基本都看不過來,抽樣閱讀統計性整體印象,全書的圖片有圖序,也有標題,圖片基本上是實例效果圖,絕大部分內容來不及看。
對章節內容的印象
全書400多頁,5分鐘翻頁時間都不夠,基本就跟瀏覽目錄差不多,一不小心容易停下來看小標題,就不能按照閱讀法要求快速地翻頁了。要說對章節內容的印象,還真的不好說,因為真的看不完,翻不過來。
總結:
書本內容比較豐富,盡管對內容有一定的熟悉,翻頁閱讀翻都翻不過來,更別說瀏覽閱讀了,這時候已經不是抓取知識,而是通過視覺效果來使腦海的知識浮現出來。可以預見,20分鐘跳讀是沒法做到的了,必須要更多的時間來抓取重點內容,系統性內容,而不只是幾個單獨的知識點。
第三階段,跳讀
第1篇 CSS布局基礎知識
第1章 Web標準布局的本質
Web標準可以分為結構標準語言(如HTML)、表現標準語言(如CSS)和行為標準(如JavaScript)3個方面。
比如對于網頁布局,傳統布局使用table元素進行布局,而Web標準布局則是結構(內容,頁面是HTML等)和表現(外觀效果,使用CSS來實現)。
重點:Web標準。
第2章 XHTML書寫規范
XHTML是HTML的發展,用來呈現網頁內容文檔結構,也是標記語言,由元素和元素屬性組成,語法結構跟HTML差不多。
XHTML主要元素:body元素,文本元素如div、p、標題,修飾元素如hr和img,鏈接元素a,列表元素如ul,表單元素如form,表格元素如table。
XHTML元素的主要屬性:每個元素都有相關的屬性。
第3章 CSS基礎與書寫規范
一個CSS樣式的語法由3部分構成:選擇符(selectors)、屬性(property)和屬性值(value)。基本語法:selector{property:value}。
常用的選擇符:通配選擇符(「*」)、類型選擇符(元素標簽)、包含選擇符(以空格連接)、ID選擇符(以「#」定義)、類選擇符(以「.」定義)、分組選擇符(以「,」分割)。
主要屬性分類:字體屬性、文本屬性、背景屬性、定位屬性、尺寸屬性、布局屬性、邊界屬性、邊框屬性、補白屬性、列表項目屬性、表格屬性。
偽類基本語法:selector:偽類{property:value}。
CSS選擇符的屬性具有繼承性。
注意CSS命名規范和樣式表推薦書寫順序。
理解CSS的塊元素和內聯元素概念,熟記基本的塊元素和內聯元素,記不住要懂得如何驗證一個元素是塊元素還是內聯元素的方法(根據原理反驗證)。在第5章會講到,CSS的塊元素和內聯元素可以通過display屬性進行轉換。
第2篇 CSS頁面布局技巧
第4章 網頁頭部元素的詳細定義
網頁頭部元素的定義重點需要掌握文檔類型(DOCTYPE)的選擇、meta標簽的定義、CSS調用的方法和優先級問題。
在頁面中插入樣式表的方法有4種:(1)鏈入外部樣式表,基本語法:<link rel="stylesheet" type="text/css" href="樣式表文件的地址">;(2)內部樣式表,基本語法:<style type="text/css"> selector{property:value} selector{property:value} </style>;(3)內嵌樣式,基本語法:<HTML標記 style="property:value;…">;(4)導入外部樣式表,使用@import聲明導入,很少使用。
樣式應用的優先級:內嵌樣式>樣式表樣式,其原理是樣式在應用的時候,離標簽越近的樣式優先級越高,即遵循最近最優先原則。這一點,最好多做幾次試驗驗證。
選擇符優先級:ID選擇符>類選擇符>類型選擇符。
第5章 CSS基本布局屬性
理解頁面的流結構(元素默認排列方式),在此基礎上理解浮動屬性定位和定位屬性定位。
浮動屬性定位通過使用float屬性進行定位。注意:float屬性是沒有繼承性的屬性。
定位屬性定位包括3個方面:定位模式(position屬性)、邊偏移(top、right、bottom、left四個屬性)和層疊定位元素(z-index)。position屬性有static、relative、absolute、fixed幾個值,使用定位屬性定位至少要定位模式和邊偏移一起使用。
難點:使用position定位時,水平居中和垂直居中。
頁面的背景設定通過有關背景的綜合屬性(background屬性)設定,也可以分開背景顏色、背景圖像、背景位置、背景重復等屬性進行設定。
CSS的display屬性可以控制內容的顯示,是一個不可繼承的屬性。接第3章,CSS的塊元素和內聯元素可以通過display屬性進行轉換。
實踐:使用CSS和列表(ul和li)制作橫向和縱向的菜單,進而制作頁面的頭部(header,一般包括菜單menu和banner兩個部分)。
第6章 CSS容器屬性
CSS的容器屬性是指CSS盒模型屬性。CSS盒模型是指在CSS中所有的文檔元素都是一個矩形框,就像一個盒子,由內容(width和height定義)、內邊距padding、邊框border和外邊距margin組成。
拓展:盒模型和塊元素、內聯元素的關系;自適應原理及實現。
實踐:根據盒模型,制作頁面的框架。
第7章 CSS定義文本屬性
掌握文本的縮進和對齊、行高(line-height)與間隔、字體的綜合屬性、文本的修飾屬性(text-decoration)、鏈接樣式的定義、水平和垂直居中等。
第8章 元素的修飾和CSS常見應用
掌握圖片、表單、表格等常用元素的修飾,掌握各種圓角框的制作和下拉菜單的實現。
第9章 瀏覽器及兼容問題
掌握解決瀏覽器兼容問題的原理。
解決瀏覽器兼容性問題一般可以遵循兩個原理:使用CSS hack;使用兼容屬性。
第3篇 整站的CSS定義技巧
第10章 關于整站樣式表的分析
主要需要掌握規劃樣式表的方法、重復使用樣式的技巧,簡化頁面結構。
規劃樣式表要遵循使用方便的原則,可以獨立一個樣式表,也可以使用多個樣式表(規劃方法)。
第11章 關于標準的校驗
掌握標準校驗的方法、常見錯誤以及修正的方法。
標準的校驗分為結構(內容)部分的校驗和表現CSS校驗。
標準的校驗可以通過輸入網址、上傳文件等方法在線校驗,也就是通過工具來進行校驗。
第4篇 實例制作
第12章 一個英文網站的制作和第13章使用Dreamweaver制作中文網站,是兩個大的實例,通過實踐掌握編寫代碼的方式、制作站點的流程、站點結構、樣式規劃、Dreamweaver工具的使用等知識。
總結
本書知識全面,內容豐富,知識點多,重點要掌握CSS基本語法、元素屬性、盒模型、定位、布局應用,掌握文本、鏈接等元素的修飾和菜單等網站組件的制作,然后通過大型實例學習網站站點的制作。
特別的,本書每一章都有對一章知識點的說明,以及學習目標和重點內容的提示,對讀者掌握一章的內容起到很好的指導作用。CSS注釋跟HTML注釋不同,CSS注釋的方法為:/*需要注釋的內容*/。
最后,應用王者閱讀法閱讀本書,我是做不到了,至少第三部分,我花了快兩個小時看完,仍然看得很粗略,不過重點內容應該是抓住了,感覺經過王者閱讀法的訓練,閱讀效率還是很不錯的。
關于王者閱讀法的實踐,還可以閱讀以下文章: