XHTML+CSS网页布局与美化01体验网页的布局与美化.docx

XHTML+CSS网页布局与美化01体验网页的布局与美化.docx

《XHTML+CSS网页布局与美化01体验网页的布局与美化.docx》由会员分享，可在线阅读，更多相关《XHTML+CSS网页布局与美化01体验网页的布局与美化.docx（18页珍藏版）》请在冰点文库上搜索。

XHTML+CSS网页布局与美化01体验网页的布局与美化

教学单元1　体验网页的布局与美化

【教学要点】

（1）熟练创建本地站点

（2）熟悉Web标准的设计规则

（3）熟悉CSS的选择符及属性设置

（4）熟悉CSS属性值的缩写

（5）熟悉DreamweaverCS3中CSS的属性设置

（6）体验DreamweaverCS3对CSS的支持

（7）体验网页中结构与表现的分离

（8）体验XHTML+CSS布局网页

（9）了解CSS的盒模型

【1.1　前导训练】

【任务1-1-1】创建本地站点

1．在本地硬盘中创建文件夹

2．启动DreamweaverCS3

3．创建名称为“01体验XHTML+CSS布局与美化网页”的本地站点

（1）启动建立站点向导

（2）定义站点名称（3）选择是否使用服务器技术（4）确定使用文件的方式，设置文件存储位置（5）设置如何连接到远程服务器（6）查看站点信息

【任务1-1-2】建立网页0101.html

1．新建网页文档

（1）创建文件夹

（2）设置DreamweaverCS3“新建文档”的初始参数（3）新建一个网页文档（4）保存该网页（5）分析空白网页的XHTML文档结构

由DreamweaverCS3生成的空白网页的XHTML代码如图1-15所示。

图1-15　由DreamweaverCS3生成的空白网页的XHTML代码

2．准备样式文件

3．在网页插入div标签

在网页0101.html代码区域的与之间插入多个div标签，插入多个div标签后的XHTML代码如表1-3所示。

4．在网页中插入图像和输入文字

在网页0101.htm中插入图像，输入相应的文字，且设置必要的超链接。

完整的XHTML代码如表1-4所示。

5．保存网页

6．浏览网页效果

【任务1-1-3】准备网页0102.html且浏览其效果

（1）在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-2”，然后在文件夹“任务1-2”中建立子文件夹“css”和“images”。

（2）将样式文件main0102.css拷贝到“css”文件夹中，将所需要的图像文件拷贝到“images”文件夹中。

（3）将网页文档0102.html拷贝到“任务1-2”文件夹中。

（4）打开网页文档0102.html。

（5）按快捷键F12浏览网页0102.html，其浏览效果如图1-17所示。

【任务1-1-4】准备网页0103.html且浏览其效果

（1）在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-3”，然后在文件夹“任务1-3”中建立子文件夹“css”和“images”。

（2）将样式文件0101common.css、main0103.css、top0103.css和bottom0103.css拷贝到“css”文件夹中，将所需要的图像文件拷贝到“images”文件夹中。

（3）将网页文档0103.html拷贝到“任务1-3”文件夹中。

（4）打开网页文档0103.html。

（5）按快捷键F12浏览网页0103.html，其浏览效果如图1-18所示。

【任务1-1-5】准备网页0104.html且浏览其效果

（1）在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-4”，然后在文件夹“任务1-4”中建立子文件夹“css”和“images”。

（2）将样式文件0101common.css和main0104.css拷贝到“css”文件夹中，将所需要的图像文件拷贝到“images”文件夹中。

（3）将网页文档0104.html拷贝到“任务1-4”文件夹中。

（4）打开网页文档0104.html。

（5）按快捷键F12浏览网页0104.html，其浏览效果如图1-19所示。

【1.2　操作实战】

【任务1-2-1】体验网页中结构与表现的分离

网页主要由三个部分组成：

结构（Structure）、表现（Presentation）和行为（Behavior），对应Web标准也分为三个方面：

结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（例如W3CDOM）、ECMAScript等。

网页index0101.html中内容、结构、表现和行为综合作用的XHTML代码如图1-20所示。

所有网页都是由“内容、结构、表现和行为”这四个方面组成的，其中内容是基础，然后是结构和表现，最后再加点“行为”。

内容是浏览者所关注的信息，设计者使用XHTML标签控制网页的结构，使用CSS代码控制网页的表现，使用JavaScript代码及其他方式控制网页的行为，三者综合作用保证网页美观、实用。

【任务1-2-2】体验符合Web标准的网页设计规则

观察、分析图1-20所示的网页index0101.html的XHTML代码，我们可以归纳出多条符合Web标准的网页设计规则，在设计网页时一定遵循这些设计规则，从而达到事半功倍之效果。

（1）在网页文档的head之前正确声明DOCTYPE

（2）正确定义语言编码（3）所有的标签及属性名称都使用小写字母，属性值可以使用大写字母（4）为所有的图片设置alt属性（5）所有的属性值必须添加引号（6）不允许简写属性（7）所有标签都必须闭合

（8）所有的标签都必须合理嵌套

（9）使用id属性代替name属性

【任务1-2-3】体验DreamweaverCS3对CSS的支持

DreamweaverCS3在CSS方面提供了更强的支持，能够快捷定义和应用CSS样式。

1．DreamweaverCS3中的CSS样式面板

DreamweaverCS3中CSS样式面板提供了两种基本显示模式：

全部模式和正在模式。

在【CSS样式】面板中，单击面板顶部的【全部】按钮，CSS面板将显示应用到当前文档的所有CSS规则，如图1-21所示，不管这些规则是在外部样式表中，还是在自身文档中。

在【新建CSS规则】对话框中的“选择器类型”单选按钮组中包括3个单选按钮：

类、标签和高级。

2．DreamweaverCS3属性面板的CSS样式列表

DreamweaverCS3中，当前网页文档中所应用的CSS样式会自动出现在【属性】面板的“CSS样式”下拉列表中，如图1-27所示。

3．DreamweaverCS3中【CSS样式】菜单

DreamweaverCS3中，【文本】菜单中有一个【CSS样式】级联菜单，该菜单包括当前网页文档中所应用的CSS样式列表和【新建】、【附加样式表】等命令，如图1-28所示。

4．DreamweaverCS3中CSS布局的可视化助理

DreamweaverCS3中，应用CSS样式进行布局设计时，可以使用CSS可视化助理来描画CSS布局边框或为CSS布局加上颜色。

单击菜单【查看】→【可视化助理】，可以显示可视化助理级联菜单，如图1-29所示。

DreamweaverCS3提供了多个可视化助理，主要有CSS布局背景、CSS布局框模型、CSS布局外框和AP元素轮廓线四种。

【任务1-2-4】体验CSS的盒模型

1．CSS的盒模型结构

所谓盒模型，就是把每个XHTML元素看作一个装了东西的盒子，盒子里面的内容到盒子的边框这间的距离即为填充（padding），盒子本身有边框（border），盒子边框外和其他盒子之间还有边界（margin），CSS代码所定义的宽度（width）和高度（height）是指填充以内的内容区域的宽度和高度，增加边界、边框和填充不会影响内容区域的宽度和高度，但是会增加盒模型的总尺寸。

CSS盒模型包括六个基本属性，其中width和height属性定义内容区域的宽度和高度，在内容区域的外面包裹了三层“外衣”：

padding、border和margin，盒内使用background属性设置padding区域和内容区域的背景。

2．CSS盒模型尺寸的计算

从图1-35可以看出box02区块的实际宽度=40px+10px+30px+400px+30px+10px+40px=560px，虽然该区块的实际宽度为560px，但是由于内容宽度只有400px，所以该区块中所插入的图像的宽度只能为400px。

同样从图1-35可以看出box02区块的实际高度=60px+10px+50px+70px+50px+10px+60px=310px，虽然该区块的实际高度为310px，但于由于内容高度只有70px，所以该区块中所插入的图像的高度只能为70px。

前面通过对示例的分析，我们可以得出盒模型的计算公式：

一个区块的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界=margin-left+border-left+padding-left+width+margin-right+border-right+padding-right

一个区块的实际高度=上边界+上边框+上填充+内容高度+下边界+下边框+下填充=margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom

3．盒模型的边界

盒模型的边界是网页布局中一个重要属性，合理地设置边界可以使网页布局疏密有致，整体上看起来优美得体。

设置边界可以使用margin属性，也可以margin-top、margin-right、margin-bottom、margin-left属性独立设置上、右、下、左边界的大小。

4．盒模型的边框

盒模型的边框也是网页布局的一个重要属性，网页中许多修饰性线条都是由边框来实现的。

（1）每个元素都包含四个方向上的边框：

border-top、border-right、border-bottom、border-left，可以单独定义它们的属性，也可以使用border属性统一定义边框效果。

默认状态下，边框的宽度为medium（中型），这是一个相对宽度，通常为2～3像素。

边框样式的默认值是none，即隐藏了边框，不受任何指定的border-width值影响。

边框的默认颜色为前景色，即元素中包含文本的颜色。

（2）可以独立定义边框的样式：

border-top-style（顶边框样式）、border-right-style（右边框样式）、border-bottom-style（底边框样式）、border-left-style（左边框样式），也可以使用border-style（边框样式）属性统一定义边框的样式。

（3）可以独立定义边框的宽度：

border-top-width（顶边框宽度）、border-right-width（右边框宽度）、border-bottom-width（底边框宽度）、border-left-width（左边框宽度），也可以使用border-width（边框宽度）属性统一定义边框的宽度。

（4）可以独立定义边框的颜色：

border-top-color（顶边框颜色）、border-right-color（右边框颜色）、border-bottom-color（底边框颜色）、border-left-color（左边框颜色），也可以使用border-color（边框颜色）属性统一定义边框的颜色。

（5）内联元素也可以定义边框，但是内联元素的上下边框高度不会影响行高，而且不受段落和行高的约束，内联元素的左右边框宽度会挤占左右相邻文本的位置，而不会压住左右两侧文本。

5．盒模型的填充

盒模型的填充位于元素边框和内容之间，类似于Word文档中的页边距。

设置填充可以使用padding属性，也可以使用padding-top、padding-right、padding-bottom、padding-left属性独立设置上、右、下、左填充的大小。

6．元素间距的计算

（1）元素间水平间距的计算

当两个或多个元素并列分布时，元素内容之间的水平间距由边界、边框和填充多个因素共同控制。

页面设计视图的显示外观如图1-39所示，左、右两个元素内容之间的实际间距=左边元素的右边界+左边元素的右边框+左边元素的右填充+右边元素的左边界+右边元素的左边框+右边元素的左填充=20px+20px+5px+20px+20px+5px=90px。

图1-39　左、右元素之间水平间距的计算

（2）元素间垂直间距的计算

计算上、下两个元素之间的垂直间距要比计算左、右元素之间的水平间距要复杂一些，计算方式也不同。

当元素浮动时，相邻元素的边界不会出现重叠现象，此时需要将上下边界、上下边框和上下填充全部计算进去。

关于盒模型小结如下：

（1）margin、padding、border三个属性都是可选的，并不是每个元素都必须全部设置，如果我们不设置这些属性，其默认值为0，边框的默认样式（border-style）为不显示（none）。

我们可以单独定义一边或统一定义四边的属性值。

如果需要，每一边的可见边框可以定义为不同的宽度。

我们也可以设置网页元素的margin和padding为0清除其预定义样式。

（2）margin属性可以定义为负值，padding属性和border属性不能定义为负值。

（3）margin总是透明的，padding也是透明的，但padding受背景影响，如果元素设置了背景颜色和图像，padding区域可以显示背景色或背景图像。

border不透明，盒模型背景可以深入到padding和border区域，但有的浏览器不支持border区域背景显示。

（4）对于非浮动的块状元素，纵向相邻元素的下边界和上边界会发生重叠，例如，有上、下两个非浮动的块状元素，上边元素的下边界为10px，下边元素的上边界为5px，则两个元素之间的间距实际为10px，即两个边界值中较大的，而不是两个边界之和。

浮动块状元素的边界不会被压缩，如果浮动块状元素没有声明宽度，则压缩到其内容区域的最小宽度。

在水平方向，两个块状元素之间的边界不会重叠。

（5）内联元素的上下边界不会影响行高，行高只能由line-height、font-size和vertical-align属性改变。

7．嵌套div尺寸的计算

在网页布局中经常使用div嵌套结构，即一个元素中包含另一个元素，从结构上讲属于嵌套或包含关系，外边的元素称为父元素，里面的元素称为子元素。

嵌套div内容部分尺寸的计算受div边界、边框和填充宽度的影响，子元素的边界、边框和填充都被包含在父元素的内容框里面。

【任务1-2-5】体验CSS的选择符及属性设置

打开网页0103.html，观察、分析该网页的XHTML代码和CSS代码，认识XHTML的元素类型、CSS的样式规则、CSS的选择符、CSS的属性定义及属性值的单位。

1．CSS样式规则

CSS由一些样式规则组成，浏览器将这些规则应用到相应的元素中。

每个CSS样式（或者称为规则）都由两个部分组成：

选择符（selector）和声明（declaration）。

声明又由“属性”（property）和“值”（value）组成。

基本格式如下：

选择符{

属性：

值;

}

例如：

.main{

width:

960px;

}

2．CSS的选择符

（1）标签选择符

标签选择符也称为类型选择符，XHTML中的所有标签都可以作为标签选择符。

【新建CSS规则】对话框中的“标签”下拉列表中的选项正是XHTML的标签，如图1-44所示。

可以将XHTML的标签选择符重新定义，重新定义这些标签的属性和值。

（2）id选择符

id选择符可以将网页文档中同一个元素定义成不同的样式，定义id选择符时，要在id选择符名称前面加上一个半角的“#”符号。

id可以理解为一个标识，在网页中每个id名称只能使用一次，一个id选择符只能对应于网页文档中一个具体的元素对象，id属性只能定义页面中某个惟一的元素对象。

（3）类选择符

类选择符可以把XHTM文档中具有相同样式的不同元素合并为一类，在同一个网页文档中可以为不同类型的元素定义相同的类名，这样大大节省了CSS代码的编写，增强了代码的可读性。

定义类选择符时，在类选择符名称前面加上一个半角“.”符号，在网页代码中使用类选择符的形式是“class="类选择符名称"”。

（4）通用选择符

通用选择符是一种特殊的选择符，它用符号“*”表示，是一个非常实用，也容易被忽略的选择符。

通用选择符可以定义所有网页元素的样式，例如：

*{/*定义网页文档中所有字体大小为12px*/

font-size:

12px;

}

（5）伪类与伪元素选择符

伪类可以看作是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。

之所以成为“伪”类，是因为它们所指定的对象在网页文档中并不存在，它们指定的是元素的某种状态。

定义伪类选择符的形式如下所示：

选择符名称:

伪类名称{属性:

值}

（6）分组选择符

分组选择符并不是一种选择符的类型，而是一种选择符的使用方法。

当多个选择符定义了相同的样式时，我们可以将选择符以半角逗号“,”分隔的方式合并为一组，这样能够简化代码，例如：

h1,h2,h3,p{/*定义标题h1,h2,h3和段落的行高都为字体大小的1.6倍*/

line-height:

1.6em;

}

（7）包含选择符

包含选择符是最有用的一类选择符，它能够简化代码，实现更大范围的样式控制。

包含选择符中前后两个对象之间以空格隔开。

例如在

（8）标签指定选择符

有时候我们希望控制某种元素在一定范围内对象的样式，这时可以把元素与类选择符或id选择符结合起来使用。

例如，对于以下几行XHTML代码，div区块中包含了两个子元素h2和p，我们如何精确控制“正文”位置的样式呢？

很显然，直接使用news类选择符不合适，而直接使用p标签选择符或者使用pnews包含选择符也不是很理想，会影响到其他元素的样式，此时最好的方法就是使用标签指定选择符p.news定义CSS属性。

（9）子对象选择符

子对象选择符与标签指定选择符一样都是限定性选择符，即在一定元素范围内定义符合限制条件的元素样式。

标签指定选择符是用类或id属性作为限制条件，来定义某种元素中符合条件的元素样式，而子对象选择符是用包含子对象作为限制条件，来定义父对象所包含的部分子元素样式。

（10）相邻选择符

对于以下这段XHTML代码，如果要单独控制正文2位置的p元素，我们可以单独定义一个类或id属性，但是这不是我们所希望的。

标题

正文1