“网络开发视频大讲堂”丛书系清华社“视频大讲堂”重点大系之一。该大系包括多个子系列,每个子系列的图书在其同品种的图书中销售名列前茅,其中:
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文件,应该考虑使用这种方法。
……