书籍:《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)链入外部样式表,基本语法:;(2)内部样式表,基本语法:;(3)内嵌样式,基本语法:;(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注释的方法为:/*需要注释的内容*/。
最后,应用王者阅读法阅读本书,我是做不到了,至少第三部分,我花了快两个小时看完,仍然看得很粗略,不过重点内容应该是抓住了,感觉经过王者阅读法的训练,阅读效率还是很不错的。
关于王者阅读法的实践,还可以阅读以下文章:
1.阅读笔记 | 《「微信+」时代:再小的个体也有自己的品牌》
2.阅读笔记 | 《引爆社群:移动互联网时代的新4C法则》
3.阅读笔记 | 《草根自媒体达人运营实战》
4.阅读笔记 | 《玩转微信》
5.阅读笔记 | 《HTML网页设计参考手册》