XHTML+CSS网页布局与美化案例教程

出版时间：2010-8  出版社：高等教育出版社  作者：陈承欢  页数：394  

前言

　　Web标准是由W3C（World Wide Web Consortium）组织和其他标准组织制定的一套规范集合。如今，Web标准逐渐被业内人士接受和推行，很多网站都在采用Web标准进行开发与重构。Web标准能够实现网站内容、结构与表现的分离，使XHTML文档具有良好的语义化结构。遵循Web标准开发网站可以使网页的代码更为简洁，网站维护和改版更加方便，更容易被搜索引擎搜索到，降低了网站的开发与维护成本，提高了网站的易用性；文件下载与页面显示速度更快，网页内容能被更多的用户和更多的设备所访问；用户还能够通过样式定制自己喜爱的表现页面。　　开发网站时遵循和使用Web标准的关键是使用XHTML+CSS方式布局与美化网页，即使用结构化标准语言XHTML设计网页的结构，使用XHTML+CSS布局方式替代传统的表格布局方式，使用表现标准语言CSS控制网页的表现。XHTML和CSS分工合作、相互协作完成网页的布局与美化，XHTML主要负责搭建页面框架，CSS主要负责控制页面显示效果。　　本书具有如下特色。　　（1）遵循技能形成规律、合理设计教学内容　　教学实施以“体验网页的布局与美化一网页元素的应用与美化一网页的布局与美化”为主线划分为9个单元。第l阶段只包含1个单元：体验网页的布局与美化，教学重点是掌握XHTML和CSS的基本知识，体验使用XHTML+CSS方式布局与美化网页的优势。第2阶段包含5个单元：文本与列表的美化、图像与背景的应用与美化、超级链接与导航栏的美化、表格的应用与美化以及表单的应用与美化，教学重点是熟悉网页元素的应用，掌握使用CSS美化网页元素的方法和技巧。第3阶段包含3个单元：两列式网页的布局与美化、三列式网页的布局与美化以及多列式网页的布局与美化，教学重点是综合应用XHTML+CSS布局与美化网页，全面掌握网页布局的各种方法和技巧。　　（2）遵循学生认知规律、科学设置教学环节　　面向教学全过程设置必要的教学单元，其设置遵循由局部到整体、由简单到复杂、由具体到抽象的认知规律，每个单元都设置了5个教学环节，即前导训练、操作实战、拓展实践、技术点睛、知识拓展。每个单元围绕2个网页设计任务展开，第1个网页设计任务在前导训练和操作实践2个环节完成。为了降低网页设计的复杂度和难度，将一个完整网页合理地分割为多个局部结构，在前导训练环节完成那些相对简单的局部网页设计，重点训练网页元素的应用与美化，网页局部结构的布局；在操作实战阶段将网页的局部结构整合为一个完整的网页，重点训练完整网页的布局。第2个网页设计任务在拓展实践环节完成。技术点睛环节主要归纳相关技术要点，综合讲述网页布局与美化的常用技术。知识拓展环节主要归纳相关知识要点，使读者系统掌握相关理论知识。

内容概要

　　《XHTML+CSS网页布局与美化案例教程（附光盘1张）》围绕18个真实的网页设计任务展开。教学任务以完成网页设计任务为主线，其主要目的是让读者了解并使用Web标准，熟悉XHTML和CSS，学会应用CSS美化网页与网页元素，掌握使用XHTML+CSS布局网页的方法。教学实施以“体验网页的布局与美化－网页元素的应用与美化－网页的布局与美化”为主线划分为9个单元（体验网页的布局与美化、文本与列表的美化、图像与背景的应用与美化、超级链接与导航栏的美化、表格的应用与美化、表单的应用与美化、两列式网页的布局与美化、三列式网页的布局与美化、多列式网页的布局与美化）。　　《XHTML+CSS网页布局与美化案例教程（附光盘1张）》以训练网页的布局与美化技能为中心，在完成多个难易程度不同的网页设计任务过程中，逐步体会网页布局与美化的各种技巧，掌握XHTML和CSS的理论知识，熟悉CSS在美化与布局网页方面的优势，学会遵循Web标准设计网页，逐步形成应用CSS美化和布局网页的专业能力。　　《XHTML+CSS网页布局与美化案例教程（附光盘1张）》可以作为各相关专业的网页布局与美化教材，也可以作为培训教材和开发网站的参考书。

书籍目录

单元1 体验网页的布局与美化教学要点1.1 前导训练【任务1-1-1】创建本地站点【任务1-1-2】建立网页0101.html【任务1-1-3】准备网页0102.html且浏览其效果【任务1-1-4】准备网页0103.html且浏览其效果【任务1-1-5】准备网页0104.html且浏览其效果1.2 操作实战【任务1-2-1】体验网页中结构与表现的分离【任务1-2-2】体验符合web标准的网页设计规则【任务1-2-3】体验DreamweaVerCS3对CSS的支持【任务1-2-4】体验CSS的盒模型【任务1-2-5】体验CSS的选择符及属性设置【任务1-2-6】体验CSS属性值的缩写【任务1-2-7】体验DreamweaverCS3中CSS的属性设置【任务1-2-8】体验使用xHTML+CSS布局网页1.3 拓展实践【任务1-3】分析网页index0102.html1.4 技术点睛1.4.1 盒模型尺寸的计算实例分析1.4.2 盒模型的兼容性问题1.5 知识拓展单元2 文本与列表的美化教学要点2.1 前导训练准备工作【任务2-1-1】创建网页0201.html【任务2-1-2】创建网页0202.html【任务2-1-3】创建网页0203.html【任务2-1-4】创建网页0204.html2.2 操作实战【任务2-2】创建网页index0201.html2.3 拓展实践【任务2-3】创建网页index0202.html2.4 技术点睛2.4.1 设置段落首字下沉效果2.4.2 控制列表项行内显示2.4.3 控制列表符号的个性化显示2.4.4 应用CSS样式实现列表的截字效果2.4.5 利用定义列表实现图像切换和选项卡切换2.5 知识拓展单元3 图像与背景的应用与美化教学要点3.1 前导训练准备工作【任务3-1-1】创建网页0301.html【任务3-1-2】创建网页0302.html【任务3-1-3】创建网页0303【任务3-1-4】创建网页0304.html3.2 操作实战创建网页index0301.html3.3 拓展实践创建网页index0302.html3.4 技术点睛3.4.1 图文混排布局3.4.2 制作全图排版网页3.4.3 实现“图片替代文本效果3.4.4 利用CSS Sprites原理合成图片3.4.5 利用背景图像实现圆布局3.4.6 利用CSS样式控制圆角布局3.4.7 利用CSS样式设置图像的阴影效果3.5 知识拓展单元4 超级链接与导航栏的美化教学要点4.1 前导训练准备工作【任务4-1-1】创建网页0401.html【任务4-1-2】创建网页0402.html【任务4-1-3】创建网页0403.html【任务4-1-4】创建网页0404.html4.2 操作实战创建网页index0401.html4.3 拓展实践创建网页index0402.html4.4 技术点睛4.4.1 利用CSS样式定义各种不同形式的超级链接4.4.2 利用定义列表制作垂直导航栏4.4.3 利用CSS样式实现水平导航栏及分隔小竖条4.4.4 利用背景图像制作立体导航菜单4.4.5 实现导航栏菜单自动伸缩和超级链接的悬停交换效果4.5 知识拓展单元5 表格的应用与美化教学要点5.1 前导训练准备工作【任务5-1-1】创建网页0501.hmal【任务5-1-2】创建网页0502.html【任务5-1-3】创建网页0503.html5.2 操作实战创建网页index0501.html5.3 拓展实践创建网页index0502.html5.4 技术点睛应用JavaScript代码在网页中插人Hash动画5.5 知识拓展单元6 表单的应用与美化教学要点6.1 前导训练准备工作【任务6-1-1】创建网页0601.html【任务6-1-2】创建网页0602.html【任务6-1-3】创建网页0603.html【任务6-1-4】创建网页0604.html6.2 操作实战创建网页index0601.html6.3 拓展实践【任务6-3-1】创建网页index0602.html【任务6-3-2】创建网页index0603.html6.4 技术点睛表单按钮与单行文本域的美化6.5 知识拓展单元7 两列式网页的布局与美化教学要点7.1 前导训练准备工作【任务7-1-1】创建网页0701.html【任务7-1-2】创建网页0702.html【任务7-1-3】创建网页0703.html7.2 操作实战创建网页index0701.html7.3 拓展实践创建网页index0702.html7.4 技术点睛7.4.1 网页的单列式布局与元素的自适应7.4.2 网页元素的嵌套布局7.4.3 网页的两列式布局7.5 知识拓展7.5.1 如何使用CSS的定位属性控制元素的位置7.5.2 CSS布局网页的基本布局模型及各自的特点7.5.3 浮动清除属性clear的取值及其含义单元8 三列式网页的布局与美化教学要点8.1 前导训练准备工作【任务8-1-1】创建网页0801.html【任务8-1-2】创建网页0802.html【任务8-1-3】创建网页0803.html8.2 操作实战创建网页index0801.html8.3 拓展实践创建网页index0802.html8.4 技术点睛三列式网页布局8.5 知识拓展单元9 多列式网页的布局与美化教学要点9.1 前导训练准备工作【任务9-1-1】创建网页0901.html【任务9-1-2】创建网页0902.html【任务9-1-3】创建网页0903.html9.2 操作实战创建网页index0901.html9.3 拓展实践创建网页indeXt09012.html9.4 技术点睛多行多列式网页布局9.5 知识拓展参考文献

章节摘录

　　（2）文字大小　　当不显式定义网页的字体大小时，网页文档标准字体大小的默认值为16px，并且在不同浏览器中显示的效果是一致的。考虑到网页的可读性将字体大小的默认值设置为16px，但是16px的字体大小容易破坏页面布局，影响页面的美观度。在实际设计中，习惯适当减小字体大小，目前国内很多网站都将正文字体的大小设置为12px。由于屏幕分辨率越来越大，现在有些网站将正文字体大小设置为14px。　　定义字体大小有多种方法，包括使用数值大小、关键字、百分比等。其中使用数值大小表示字体大小时，需要使用长度单位，如px、pt、em、ex等，一般常用的是像素（px）。　　①使用像素（px）为单位的字体大小定义示例代码如下：　　p（font-size：12px；）　　目前许多网站都选用像素作为字体大小的单位，常用的字体大小有9px、10px、12px、14px、16px、18px、24px、36px等。对于图文混排的网页，使用像素更容易实现图文协调显示，因为图像也是以像素为单位的。