资源描述
教学单元1 体验网页的布局与美化
教学单元1 体验网页的布局与美化
【教学要点】
（1）熟练创建本地站点
（2）熟悉Web标准的设计规则
（3）熟悉CSS的选择符及属性设置
（4）熟悉CSS属性值的缩写
（5）熟悉Dreamweaver CS3中CSS的属性设置
（6）体验Dreamweaver CS3对CSS的支持
（7）体验网页中结构与表现的分离
（8）体验XHTML+CSS布局网页
（9）了解CSS的盒模型
【1.1 前导训练】
【任务1-1-1】创建本地站点
1．在本地硬盘中创建文件夹
2．启动Dreamweaver CS3
3．创建名称为“01体验XHTML+CSS布局与美化网页”的本地站点
（1）启动建立站点向导
（2）定义站点名称
（3）选择是否使用服务器技术
（4）确定使用文件的方式，设置文件存储位置
（5）设置如何连接到远程服务器
（6）查看站点信息
【任务1-1-2】建立网页0101.html
1．新建网页文档
（1）创建文件夹
（2）设置Dreamweaver CS3“新建文档”的初始参数
（3）新建一个网页文档
（4）保存该网页
（5）分析空白网页的XHTML文档结构
由Dreamweaver CS3生成的空白网页的XHTML代码如图1-15所示。
图1-15 由Dreamweaver CS3生成的空白网页的XHTML代码
2．准备样式文件
3．在网页插入div标签
在网页0101.html代码区域的<body>与</ body>之间插入多个div标签，插入多个div标签后的XHTML代码如表1-3所示。
4．在网页中插入图像和输入文字
在网页0101.htm中插入图像，输入相应的文字，且设置必要的超链接。完整的XHTML代码如表1-4所示。
5．保存网页
6．浏览网页效果
【任务1-1-3】准备网页0102.html且浏览其效果
（1）在Dreamweaver CS3工作界面【文件】面板中的文件夹“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）在Dreamweaver CS3工作界面【文件】面板中的文件夹“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）在Dreamweaver CS3工作界面【文件】面板中的文件夹“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，行为标准主要包括对象模型（例如W3C DOM）、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】体验Dreamweaver CS3对CSS的支持
Dreamweaver CS3在CSS方面提供了更强的支持，能够快捷定义和应用CSS样式。
1．Dreamweaver CS3中的CSS样式面板
Dreamweaver CS3中CSS样式面板提供了两种基本显示模式：全部模式和正在模式。在【CSS样式】面板中，单击面板顶部的【全部】按钮，CSS面板将显示应用到当前文档的所有CSS规则，如图1-21所示，不管这些规则是在外部样式表中，还是在自身文档中。
在【新建CSS规则】对话框中的“选择器类型”单选按钮组中包括3个单选按钮：类、标签和高级。
2．Dreamweaver CS3属性面板的CSS样式列表
Dreamweaver CS3中，当前网页文档中所应用的CSS样式会自动出现在【属性】面板的“CSS样式”下拉列表中，如图1-27所示。
3．Dreamweaver CS3中【CSS样式】菜单
Dreamweaver CS3中，【文本】菜单中有一个【CSS样式】级联菜单，该菜单包括当前网页文档中所应用的CSS样式列表和【新建】、【附加样式表】等命令，如图1-28所示。
4．Dreamweaver CS3中CSS布局的可视化助理
Dreamweaver CS3中，应用CSS样式进行布局设计时，可以使用CSS可视化助理来描画CSS布局边框或为CSS布局加上颜色。单击菜单【查看】→【可视化助理】，可以显示可视化助理级联菜单，如图1-29所示。
Dreamweaver CS3提供了多个可视化助理，主要有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）包含选择符
包含选择符是最有用的一类选择符，它能够简化代码，实现更大范围的样式控制。包含选择符中前后两个对象之间以空格隔开。例如在<div><p></p></div>结构中，包含选择符div p可以定义标签p的样式，表1-16中的“.leadmenu li”和“.leadmenu li a”就是属性包含选择符。
（8）标签指定选择符
有时候我们希望控制某种元素在一定范围内对象的样式，这时可以把元素与类选择符或id选择符结合起来使用。
例如，对于以下几行XHTML代码，div区块中包含了两个子元素h2和p，我们如何精确控制“正文”位置的样式呢？很显然，直接使用news类选择符不合适，而直接使用p标签选择符或者使用p news包含选择符也不是很理想，会影响到其他元素的样式，此时最好的方法就是使用标签指定选择符p.news定义CSS属性。
<div>
<h2 class="news">标题</h2>
<p class="news">正文</p>
</div>
（9）子对象选择符
子对象选择符与标签指定选择符一样都是限定性选择符，即在一定元素范围内定义符合限制条件的元素样式。标签指定选择符是用类或id属性作为限制条件，来定义某种元素中符合条件的元素样式，而子对象选择符是用包含子对象作为限制条件，来定义父对象所包含的部分子元素样式。
（10）相邻选择符
对于以下这段XHTML代码，如果要单独控制正文2位置的p元素，我们可以单独定义一个类或id属性，但是这不是我们所希望的。
<div id="main">
<div id="m_left">
<h2 class="news">标题</h2>
<p class="news">正文1</p>
</div>
<p>正文2</p>
</div>
这里我们可以使用相邻选择符控制其样式，CSS代码如下所示：
m_left+p{
font-size: 14px;
}
【任务1-2-6】体验CSS属性值的缩写
对于CSS样式定义比较熟练的设计者，可以对CSS样式定义进行整理和缩写，使CSS代码简洁、可读性强。CSS属性值的缩写是指将多个CSS属性定义合并到一行中的编写方式，这种编写方式能够精简CSS代码，更加便于阅读。
1．font字体样式的缩写
字体样式缩写包含字体样式、变体、粗细、大小、行高和字体等属性，使用格式如下：
font: font-style（样式） font-variant（变体） font-weight（粗细） font-size（大小） line-height（行高） font-family（字体）
2．color颜色样式的缩写
对于用十六进制数值表示的颜色，CSS也提供了缩写模式。十六进制颜色表示法使用2位十六进制数值表示1种颜色，一个十六进制的颜色值分为三组十六进制的数值，传统写法一般为#ABCDEF，CSS的颜色缩写必须符合一定的需求，当A与B数字相同，C与D数字相同，E与F数字相同，可以使用颜色缩写，如#cc00ff可以缩写为#c0f。除此之外则不能使用缩写模式，例如#ccdeff则不能缩写。
3．background背景样式的缩写
背景样式可以使用复合属性定义替代多个单项属性定义，其格式如下：
background : background-color（背景颜色） background-image（背景图像） background-repeat（重复） background-attachment（附件） background-position（位置）
4．padding填充样式的缩写
padding填充属性只有大小，包括上、右、下、左四个属性值，通常的写法如下：
.b_right {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
}
在CSS样式定义中，可以采用以下的缩写格式（顺时针方向）：
padding: padding-top（上填充） padding-right（右填充） padding-bottom（下填充） padding-left（左填充）
默认情况下，padding填充属性值提供四个参数值，按顺序分别为上、右、下、左。例如：.b_right { padding: 0px 0px 10px 10px }
如果元素的上填充和下填充是相同的值，左填充和右填充是相同的值，可以使用两个参数进行定义，分别表示上下填充和左右填充，可以缩写为：#div1 { padding: 10px 20px ; }
如果元素的左、右填充是相同的值，上、下填充的值不相同，可以使用三个参数进行定义，分别表示上填充、左右填充和下填充，可以缩写为：#div2 { padding: 10px 15px 20px ; }
如果元素的上、右、下、左填充的值都相同，则只需要使用一个参数进行定义，可以缩写为：#div3 { padding: 10px ; }
5．margin边界样式的缩写
margin边界的属性值缩写与padding填充类似。margin边界属性只有大小，包括上、右、下、左四个属性值，通常的写法如下：
.b_right {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 10px;
}
在CSS样式定义中，可以采用以下的缩写格式：
margin: margin-top（上边界） margin-right（右边界） margin-bottom（下边界） margin-left（左边界）
默认情况下，margin边界属性值提供四个参数值，按照上、右、下、左（顺时针方向）的顺序来定义，中间使用空格来分隔。例如：.b_right { margin : 5px 5px 10px 10px }
如果元素的上边界和下边界是相同的值，左边界和右边界是相同的值，可以使用两个参数进行定义，分别表示上下边界和左右边界，可以缩写为：#div1 { margin: 10px 20px ; }
如果元素的左、右边界是相同的值，上、下边界的值不相同，可以使用三个参数进行定义，分别表示上边界、左右边界和下边界，可以缩写为：#div2 { margin: 10px 15px 20px ; }
如果元素的上、右、下、左边界的值都相同，则只需要使用一个参数进行定义，可以缩写为：#div3 { margin: 10px ; }
与padding填充一样，如果元素的上、下边界的值相同，但是左、右边界的值却不同，则不能采用缩写形式，必须使用四个参数定义元素的边界。
6．border边框样式的缩写
边框border对象本身是一个非常复杂的对象，border属性包括样式（type）、大小（size）和颜色（color）三个方面的属性，还分为上、右、下、左四个方向，border对象提供的缩写形式也较多，不仅可以对整个border对象进行缩写，也可以单独对某一边进行缩写。
（1）整个边框（border）属性值的缩写
对于整个border对象而言，使用的缩写格式如下所示，三个属性值的先后顺序可以改变。
border : border-width（边框宽度） border-style（边框样式） color（边框颜色）
（2）边框（border）四条边属性值的缩写
边框（border）对象的四条边的属性值都可以单独应用缩写形式，格式如下：
border-top : border-width（上边框宽度） border-style（上边框样式） color（上边框颜色）
border-right :border-width（右边框宽度） border-style（右边框样式） color（右边框颜色）
border-bottom : border-width（下边框宽度） border-style（下边框样式） color（下边框颜色）
border-left : border-width（左边框宽度） border-style（左边框样式） color（左边框颜色）
（3）边框（border）的样式、宽度和颜色的缩写
如果上、右、下、左边框的样式、宽度或者颜色完全相同，也可以采用缩写形式，格式如下：
border-style : style（边框样式）
border-width: width（边框宽度）
border-color: color（边框颜色）
7．列表样式缩写
列表属性可以使用复合属性定义替代多个单个属性定义，其缩写格式如下：list-style : list-style-type（类型） list-style-position（位置） list-style-image（项目符号图像）。
【任务1-2-7】体验Dreamweaver CS3中CSS的属性设置
利用Dreamweaver CS3的【CSS规则定义】对话框可以很方便地定义、修改CSS样式，【CSS规则定义】对话框将CSS属性分为八类：类型、背景、区块、方框、边框、列表、定位和扩展，每一类中都多个相应的属性进行设置，但是有些CSS的属性无法通过【CSS规则定义】对话框进行设置，例如min-width就不能使用【CSS规则定义】对话框进行设置，必须手工输入CSS代码设置该属性。
1．类型
【类型】主要对文字属性进行定义，包括字体、文字大小、行高、颜色等。
2．背景
灵活使用背景，可以使页面美观且显示速度快，后面各章制作的网页，装饰性图片都是通过设置背景图像实现的。
3．区块
【区块】中经常使用的属性是文本对齐、文字首行缩进和显示（display）。
4．方框
【方框】包括宽度、高度、浮动、填充和边界等属性的设置。
5．边框
【边框】主要定义边框的样式、宽度和颜色，如图1-49所示。
6．列表
【列表】只定义列表标签的属性，对于非列表标签不起作用。
7．定位
【定位】是实现网页布局的重要手段之一，主要包括定位类型、定位尺寸、剪辑等属性的设置。
8．扩展
【扩展】主要包括分页、视觉效果等属性的设置。
【任务1-2-8】体验XHTML+CSS布局网页
观察、分析网页0103.html和0104.html的布局方式，体验XHTML+CSS布局网页的方法。
1．分析网页0103.html的布局
（1）分析网页整体的上、中、下布局结构
（2）分析网页局部的左、中、右布局结构
2．分析网页0104.html的布局
（1）分析网页整体的左、右布局结构
（2）分析网页局部的左、右布局结构
【1.3 拓展实践】
【任务1-3-1】分析网页index0102.html
【任务描述】
（1）仔细阅读网页index0102.html的XHTML代码和对应的外部样式文件的CSS代码，
① 分析该网页的结构与表现相分离的特性。
② 分析XHTML代码是否符合Web标准的设计规则。
（2）分析网页index0102.html的布局结构及盒模型。
（3）利用Dreamweaver CS3的【CSS规则定义】对话框分析外部样式文件中各选择符属性设置的含义及功能。
（4）利用本章所学习的CSS属性值的缩写规则，对外部样式文件中的属性设置值进行精简与合并。
【效果展示】
网页index0102.html浏览效果如图1-57所示。
图1-57 网页index0102.html的浏览效果
教学单元2 文本与列表的美化
【教学要点】
（1）学会新建与保存网页文档
（2）学会利用【新建文档】对话框中创建CSS文件
（3）学会利用【新建 CSS 规则】对话框定义样式
（4）学会利用【CSS 规则定义】对话框设置样式属性
（5）学会创建代码片断和插入代码片断
（6）熟练利用CSS样式属性设置网页文本的字体属性
（7）熟练利用CSS样式实现文字排版和段落排版
（8）熟练利用CSS样式实现列表样式
【2.1 前导训练】
【准备工作】
（1）在本地硬盘中创建文件夹
（2）启动Dreamweaver CS3
（3）创建名称为“02文本与列表的美化”的本地站点
【任务2-1-1】创建网页0201.html
【任务描述】
（1）创建样式文件main0201.css，在该样式文件中定义标签body、h3和div的属性。
（2）在样式文件main0201.css中定义类选择符main1的属性。
（3）创建网页文档0201.html，且链接外部样式文件main0201.css。
（4）在网页0201.html中输入文字、插入图像。
网页0201.html的浏览效果如图2-1所示。
图2-1 网页0201.html的浏览效果
【页面设计】
675px
10px
10px
5px
5px
.main1
网页0201.html设计视图的外观效果如图2-2所示，整体区块的类选择符名称是“main1”。
图2-2 网页0201.html设计视图的外观效果
【实施过程】
1．操作准备
（1）创建文件夹
（2）Dreamweaver CS3初始参数设置
（3）新建一个网页文档
（4）设置网页标题
（5）保存该网页
2．创建样式文件
3．定义标签body的样式属性
4．定义标签h3的样式属性
（1）显示【CSS样式】面板
（2）打开【新建 CSS 规则】对话框
（3）选择标签h3
（4）设置标签h3的样式属性
5．定义标签div的样式属性
（1）打开【新建 CSS 规则】对话框
（2）选择标签div
（3）设置标签div的样式属性
6．定义类选择符main1
（1）打开【新建 CSS 规则】对话框
（2）定义样式名称
（3）设置样式main1的属性
（4）查看样式的属性设置
7．链接外部样式文件main0201.css
8．查看链接外部样式表的代码
9．对网页0201.html的页面进行布局
10．在网页0201.html中输入标题和正文文字
11．在网页0201.html中插入图片
【任务2-1-2】创建网页0202.html
【任务描述】
（1）创建样式文件main0202.css，在该样式文件中定义标签ul、li以及其他类选择符的样式属性。
（2）创建网页文档0202.html，且链接外部样式文件main0202.css。
（3）在网页0202.html中插入图像和列表。
网页0202.html的浏览效果如图2-31所示。
【页面设计】
网页0202.html设计视图的外观效果如图2-32所示，整体区块的类选择符名称是“leftbox”，宽度为“200px”，其中上半部分的类选择符名称是“navigate”，下半部分的类选择符名称是“box”。
图2-31 网页0202.html的浏览效果
200px
.navigate
. box
.leftbox
图2-32 网页0202.html设计视图的外观效果
【实施过程】
1．操作准备
（1）创建文件夹
（2）新建一个网页文档
（3）设置网页标题
（4）保存该网页
2．新建样式文件main0202.css和定义类选择符leftbox
（1）新建样式
（2）定义样式名称
（3）设置样式属性
3．定义类选择符navigate
4．定义标签ul和li的样式属性
5．定义其他类选择符属性
6．链接外部样式表文件main0202.css
切换到网页文档0202.html的【代码视图】，在标签“</head>”的前面输入一行链接外部样式表的代码，如下所示：
<link href="css/main0202.css" rel="stylesheet" type="text/css" />
7．对网页0202.html的页面进行布局
将光标移至网页0202.html的设计视图中，在Dreamweaver CS3主界面，单击“插入”工具栏“布局”选项卡中单击【插入 div 标签】按钮，如图2-40所示。弹出【插入Div标签】对话框，在该对话框中的“插入”下拉列表框中选择“在插入点”选项，在“类”下拉列表框中选择“leftbox”选项，如图2-41所示，然后单击【确定】按钮，关闭该对话框。
8．在网页0202.html中插入图像和列表
在网页0202.html名称为“box_name”的两个区块中分别插入GIF图像0201icon02.gif和0201navigate.gif。接下来分别在两个区块“box_list”中插入项目列表及其列表项，输入相应的文字。
【任务2-1-3】创建网页0203.html
【任务描述】
任务2-3为考核项目，请独立完成以下操作任务：
利用div区块、ul项目列表和li列表项制作如图2-42所示的导航栏。
图2-42 导航栏的浏览效果
【页面设计】
网页0202.html的整体布局结构如图2-43所示，类选择符名称是“channel”。
#channel
图2-43 网页0202.html的整体布局结构
网页0202.html的局部布局结构如图2-44所示，分为左、中、右三个区块，其类选择符名称分别是“left”、“list”和“right”。
#left
#list
#right
图2-44 网页0202.html的局部布局结构
【实施过程】
1．新建文件夹，准备图像文件
2．建立样式文件，定义样式
3．新建网页文档0203.html
在子文件夹“任务2-3”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0203.ht
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
