2022年Div%BCSS布局入门教程 .pdf

《2022年Div%BCSS布局入门教程 .pdf》由会员分享，可在线阅读，更多相关《2022年Div%BCSS布局入门教程 .pdf（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Div+CSS 布局入门教程第 1 页面布局与规划第 2 写入整体层结构与CSS 第 3 页面顶部制作之一第 4 页面顶部制作之二第 5 页面制作 -用好 border和 clear 网页制作中，有许多的术语，例如：CSS、HTML 、DHTML 、XHTML 等等。在下面的文章中我们将会用到一些有关于HTML 的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用 DIV+CSS 进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop 或FireWorks(以下简称 PS 或 FW)等图片处理软件将需要制

2、作的界面布局简单的构画出来，以下是我构思好的界面布局图。下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图， 我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU 和一幅 Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 25 页 - - - - - - - - - 根据上图， 我再画了

3、一个实际的页面布局图，说明一下层的嵌套关系， 这样理解起来就会更简单了。DIV 结构如下：body /*这是一个 HTML 元素，具体我就不说明了 */ #Container /*页面层容器 */ #Header /*页面头部 */ #PageBody /*页面主体 */ #Sidebar /*侧边栏 */ #MainBody /*主体内容 */ #Footer /*页面底部 */ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 25 页 - - - - - - - -

4、- 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML 代码和 CSS。接下来我们在桌面新建一个文件夹，命名为“DIV+CSS 布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 无标题文档 这是 XHTML 的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css 。下面，我们在 标签对中写入 DIV 的基本结构，代码如下：color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaaaa/color color=#aaaa

5、aa/color 为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入 CSS信息，代码如下：/*基本信息 */ body font:12px Tahoma;margin:0px;text-align:center;background:#FFF; /*页面层容器 */ #container width:100% /*页面头部 */ #Header width:800px;margin:0 auto;height:100px;background:#FFCC99 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -

6、- - - 名师精心整理 - - - - - - - 第 3 页，共 25 页 - - - - - - - - - /*页面主体 */ #PageBody width:800px;margin:0 auto;height:400px;background:#CCFF00 /*页面底部 */ #Footer width:800px;margin:0 auto;height:50px;background:#00FFFF 把以上文件保存， 用浏览器打开， 这时我们已经可以看到基础结构了，这个就是页面的框架了。关于以上 CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：1、请养成良好的注释

7、习惯，这是非常重要的；2、body 是一个 HTML 元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；3、讲解一些常用的CSS代码的含义：font:12px Tahoma；这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma ；说明字体为 12 像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px 或margin:0px 0px 0px 0px 顺序是 上 / 右 / 下 /

8、 左，你也可以书写为margin:0(缩写)；以上样式说明 body 部分对上右下左边距为0 像素，如果使用 auto 则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为 0px，左右为自动调整；我们以后将使用到的padding属性和 margin 有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin 是外部距离，而 padding则是内部距离。text-align:center 文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。background:#FFF 设置背景色为白色，这里颜色使用了缩写，完整的应该是backgr

9、ound:#FFFFFF 。background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：background:#ccc url(bg.gif) top left no-repeat ；表示：使用 #CCC(灰度色 )填充整个层，使用bg.gif 做为背景图片，top left 表示图片位于当前层的左上端，no-repeat 表示仅显示图片大小而不填充满整个层。top/right/left/bottom/center 用于定位背景图片，分别表示上 / 右 / 下 / 左 / 中；还可以使用background:url(bg.gif) 20px 100px; 名师资料总结

10、- - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 25 页 - - - - - - - - - 表示 X 座标为 20 像素， Y 座标为 100像素的精确定位；repeat/no-repeat/repeat-x/repeat-y 分别表示填充满整个层/ 不填充 / 沿 X 轴填充 / 沿 Y 轴填充。height / width / color 分别表示高度 (px)、宽度 (px)、字体颜色 (HTML 色系表 )。4、如何使页面居中？大家将代码保存后可以看到， 整个页面是居中显示的

11、， 那么究竟是什么原因使得页面居中显示呢？是因为我们在 #container中使用了以下属性：margin:0 auto; 按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。通过 margin:auto 我们就可以轻易地使层自动居中了。5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。当我们写好了页面大致的DIV 结构后，我们就可以开始细致地对每一个部分进行制作了。在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写

12、入以下样式代码：/*基本信息 */ body font:12px Tahoma;margin:0px;text-align:center;background:#FFF; a:link,a:visited font-size:12px;text-decoration:none; a:hover /*页面层容器 */ #container width:800px;margin:10px auto 样式说明：a:link,a:visited font-size:12px;text-decoration:none; a:hover 这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册

13、。#container width:800px;margin:10px auto 指定整个页面的显示区域。width:800px 指定宽度为 800像素，这里根据实际所需设定。margin:10px auto，则是页面上、下边距为10 个像素，并且居中显示。上一章中我们讲过，对层的margin 属性的左右边距设置为auto可以让层居中显示。接下来，我们开始制作TOP部分， TOP 部分包括了 LOGO、菜单和 Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW 下完成的切片：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -

14、- - - 名师精心整理 - - - - - - - 第 5 页，共 25 页 - - - - - - - - - 我将 TOP 部分切片为两部分，第一部分包括了LOGO 和一条横线。由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF 格式，调色板选择为精确，选择Alpha 透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为 800px。* 为什么要使用 GIF 格式？使用 JPEG不是更好吗？因为 GIF 格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF 格式时，从肉眼上并不能

15、看出图片有什么太大的变化，因此这是可行的。* 接下来的 Banner部分还能使用 GIF 格式吗？答案是不能，因为Banner部分是一个细致的图片，如果使用GIF 格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS 书写的简易程度以及页面载入速度。切好片后，我们还需要对 TOP 部分进行分析并将DIV 结构写入 Header中代码如下： 首页 博客 设计 相册 论坛 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 -

16、- - - - - - 第 6 页，共 25 页 - - - - - - - - - 关于 为什么要这么写呢，因为对菜单使用列表形式，可以在以后方便对菜单定制样式。而为什么要添加以下代码呢？ 插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。然后我们在 css.css中再写入以下样式：/*页面头部 */ #header background:url(logo.gif) no-repeat 样式说明：#header background:url(logo.gif) no-repeat 给页面头部分加入一个背景图片LOGO，并且不作填充。这里，我们没有指定heade

17、r层的高度，为什么不指定呢？因为 header层中还有菜单和banner项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。使用列表 制作菜单开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV 、CSS 到index.htm 和 css.css文件中。这一节我将告诉大家如何用列表来制作菜单。 首页 博客 设计 相册 论坛 关于 以上是这部分的结构， 有关于 、 这两个 HTML 元素大家自己去参考相关的内容吧，它们最主要的作用就是在HTML 中以列表的形式来显示一名师资料总结 - - -精品资料欢迎下载 - - - - - - - - -

18、 - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 25 页 - - - - - - - - - 些信息。还有一点需要大家一定要分清楚的，当在 HTML 中定义为 id=divID 时，在 CSS对应的设置语法则是 #divID ，如果在 HTML 中定义为 class=divID时，则在CSS中对应的设置语法是 .divID。如果 id=divID 这个层中包括了一个 ，则这个 img 在 CSS中对应的设置语法应该是 #divID img ，同样，如果是包含在class=divID 这个层中时，则设置语法应该是 .divID img ，这一点希望

19、大家要分清楚了。另外，HTML 中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input.等等，如果你要在 CSS中设置它们， 则直接写入元素的名称加上一对大括号 就可以了。所有的CSS代码都应该写在大括号 中。按照上面的介绍，我们先在css.css中写入以下代码：#menu ul list-style:none;margin:0px; #menu ul li float:left; 解释一下：#menu ul list-style:none;margin:0px; list-style:none，这一句是取消列表前点，因为我们不需要这些点。margin:0p

20、x，这一句是删除 UL 的缩进，这样做可以使所有的列表内容都不缩进。#menu ul li float:left; 这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：这时，列表内容是排列在一行，我们在#menu ul li 再加入代码 margin:0 10px #menu ul list-style:none;margin:0px; #menu ul li float:left;margin:0 10px margin:0 10px 的作用就是让列表内容之间产生一个20 像素的距

21、离 (左： 10px， 右：10px)，预览的效果如下：现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下：#menu padding:20px 20px 0 0 /*利用 padding:20px 20px 0 0来固定菜单位置 */ #menu ul float:right;list-style:none;margin:0px; /*添加了 float:right 使得菜单位于页面右侧 */ #menu ul li float:left;margin:0 10px 这时，位置已经确定了， 可是构思图中，菜单选项之间还有一条竖线， 怎么办呢？别忘了，我们早就已经留好了一个空的 ，要

22、想加入竖线就使用它了。按照上面说的方法，我们再添加以下代码：.menuDiv width:1px;height:28px;background:#999 保存预览一下， 竖线是否已经出来了？关于这段代码就不多讲了，应该是很容易理解的。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 25 页 - - - - - - - - - 不过，菜单选项的文字却在顶部，我们再修改成以下代码：#menu ul li float:left;margin:0 10px;display:blo

23、ck;line-height:28px 关于 display:block;line-height:28px 大家可以去参阅一下手册，我就不多讲了。效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在css.css中添加以下代码：#menu ul li a:link,#menu ul li a:visited font-weight:bold;color:#666 #menu ul li a:hover 这个也不多说了，没什么好说的了，最后的效果如下：这一节到这里就完毕了，顺便把素材提供给大家：01.rar, 02.rar 这一节里面，主要就是想告诉大家如何使用好border和 clear这

24、两个属性。首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充， 其实我们还有更简单的办法，只要在 中加入这么一段就可以了，你可以试试： 大家可以再次参考手册，然后你就能明白dashed 、solid、dotted.等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。 以上代码便可以实现设计草图中的banner，在 css.css中加入以下样式：#banner background:url(banner.jpg) 0 30px no-repeat; /* 加入背景图片 */ width:730px; /* 设

25、定层的宽度 */ margin:auto; /*层居中 */ height:240px; /*设定高度 */ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线 */ clear:both /*清除浮动 */ 通过 border 很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性： clear:left/right。在这里添加 clear:both是由于之前的 ul、li 元素设置了浮动，如果不清除则会影响banner层位

26、置的设定。 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 25 页 - - - - - - - - - 以上是页面主体部分，我们在css.css中添加以下样式：#pagebody width:730px; /* 设定宽度 */ margin:8px auto; /*居中*/ #sidebar width:160px; /* 设定宽度 */ text-align:left; /* 文字左对齐 */ float:left; /* 浮动居左 */ clear:left; /*

27、不允许左侧存在浮动 */ overflow:hidden; /* 超出宽度部分隐藏 */ #mainbody width:570px; text-align:left; float:right; /* 浮动居右 */ clear:right; /*不允许右侧存在浮动 */ overflow:hidden 为了可以查看到效果，建议在#sidebar和#mainbody 中加入以下代码，预览完成后可以删除这段代码：border:1px solid #E00; height:200px 保存预览效果， 可以发现这两个层完美的浮动，在达到了我们布局的要求， 而两个层的实际宽度应该160+2(borde

28、r)+570+2=734px，已经超出了父层的宽度，由于 clear 的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。而之后添加的overflow:hidden 则可以使内容太长（例如图片）的部份自动被隐名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 25 页 - - - - - - - - - 藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:h

29、idden 就可以解决这个问题。CSS中每一个属性运用得当， 就可以解决许多问题， 或许它们与你在布局的页并没有太大的关系， 但是你必须知道这些属性的作用，在遇到难题的时候， 可以尝试使用这些属性去解决问题。/*基本信息 */ body font:12px Tahoma;margin:0px;text-align:center;background:#FFF; a:link,a:visited font-size:12px;text-decoration:none; a:hover /*页面层容器 */ #container width:800px;margin:10px auto 无标题文档

30、 创建新的样式表首先，您将创建包含CSS 规则(定义段落文本样式 )的外部样式表。在外部样式表中创建样式时， 可以在一个中央位置同时控制多个Web 页面的外观， 而不需要为每个Web 页面分别设置样式。http:/www.dw8.org Dreamweaver cs3 专业网站CSS 规则可以位于以下位置 : 外部 CSS 样式表是存储在一个单独的外部.css 文件(并非 HTML 文件 )中的一系列CSS 规则。利用文档head 部分中的链接，该.css 文件被链接到Web 站点中的一个或多个页面。http:/www.dw8.org dw 专业网站内部(或嵌入式 )CSS 样式表是包含在HT

31、ML 文档 head 部分的style 标签内的一系列CSS 规则。例如，下面的示例为已设置段落标签的文档中的所有文本定义字体大小 : ： p font-size:80px ：http:/www.dw8.org dw 专业网站内联样式是在HTML 文档中的特定标签实例中定义的。例如，p style=font-size: 9px名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 25 页 - - - - - - - - - 仅 对 用 含 有 内 联 样 式 的 标 签 设

32、置 了 格 式 的 段 落 定 义 字 体 大 小 。http:/www.dw8.org dw 专业网站Dreamweaver 会呈现您所应用的大多数样式属性并在文档 窗口中显示它们。您也可以在浏览器窗口中预览文档以查看样式的应用情况。有些CSS 样式属性在 Microsoft Internet Explorer、 Netscape Navigator 、 Opera 和 Apple Safari 中呈现的外观不相同。http:/www.dw8.org Dreamweaver 专业网站选择文件 新建。在新建文档 对话框中的 类别 列中选择 基本页 ，在 基本页 列中选择CSS，然后单击 创建。

33、 http:/www.dw8.org Dreamweaver 专业网站空白样式表将出现在 文档窗口中。设计视图和 代码视图按钮已被禁用。CSS 样式表是纯文本文件，其内容将不会用于在浏览器中查看。将该页保存 (文件 保存)为 cafe_townsend.css 。保存样式表时，请确保将其保存到cafe_townsend folder 文件夹 (您的 Web 站点的根文件夹 )中。 http:/www.dw8.org Dreamweaver cs3 专业网站在样式表中键入以下代码 : http:/www.dw8.org dw 专业网站p font-family: Verdana, sans-se

34、rif; font-size: 11px; color: #000000; line-height: 18px; padding: 3px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 25 页 - - - - - - - - - 当您键入代码时， Dreamweaver 将使用代码提示为您建议一些选项，以帮您完成输入。当看到希望Dreamweaver 为您完成键入的代码时，请按Enter 键(Windows) 或 Return 键 (Macintosh)。不要忘记

35、在每行结尾处的属性值后面加上一个分号。完成后的代码类似于下面的示例: 若要显示该指南， 请选择 帮助 参考，然后从 参考面板的弹出式菜单中选择OReilly CSS 参考。保存样式表。附加样式表当您将样式表附加到Web 页面中时，在样式表中定义的规则将应用到页面上的相应元素。例如， 当您将cafe_townsend.css 样式表附加到index.html 页时，将根据您定义的CSS 规则设置所有段落文本(用 HTML 代码中的标签设置格式的文本 )的格式。在文档窗口中，打开Cafe Townsend 的 index.html 文件。(如果该文件已打开，则请单击它的选项卡。) 选择在教程 :向

36、页面添加内容中粘贴到页面中的第一段文本。在属性检查器中查看，并确保使用段落标签设置了该段落的格式。如果属性检查器中的 格式弹出式菜单显示 段落，则已使用段落标签设置了段落的格式。如果属性检查器中的 格式弹出式菜单显示 无或其它内容，则选择 段落来设置段落的格式。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 25 页 - - - - - - - - - 对第二段重复第3 步。在CSS 样式面板(窗口CSS 样式)中，单击位于面板右下角的 附加样式表按钮。在 附加 外部

37、样 式表 对话框 中， 单 击 浏 览 并 浏览 到上 一节创 建的cafe_townsend.css 文件。单击确定。文档窗口中的文本将根据外部样式表中的CSS 规则来设置格式。研究CSS 样式面板CSS 样式面板可让您跟踪影响当前所选页面元素的CSS 规则和属性，或影响整个文档的规则和属性， 还可以在不打开外部样式表的情况下修改CSS 属性。 http:/www.dw8.org dw 专业网站请确保 index.html 页在文档 窗口中打开。在CSS 样式面板(窗口CSS 样式)中，单击面板顶部的 所有，然后检查您的 CSS 规则。在所有模式下，CSS 面板向您显示应用到当前文档的所有C

38、SS 规则，不管这些规则是在外部样式表中，还是在自身文档中。您应在所有规则 窗格中看到两个主要类别 :一个 标签类别和一个cafe_townsend.css 类别。若未展开标签类别，则请单击加号(+) 展开该类别。单击正文规则。值为 #000000 的 background-color 属性出现在下面的 属性窗格中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 25 页 - - - - - - - - - 注意您可能需要折叠其它面板，如文件面板，以便看到完整的 CSS

39、 样式面板，还可以通过拖 动窗格之 间 的边界 来 更改 CSS 样 式 面 板 的长度。http:/www.dw8.org dw 专业网站您在教程 :创建基于表格的页面布局中通过使用修改页面属性 对话框设置了页面的背景色。 以此方式设置页面属性时， Dreamweaver 会编写一个内置于文档的 CSS 样式。单 击 加 号(+) 展 开cafe_townsend.css 类 别 。http:/www.dw8.org Dreamweaver 专业网站单击 p 规则。在外部样式表中为p 规则定义的所有属性和值将显示在下面的属性窗格中。 http:/www.dw8.org Dreamweaver

40、 cs3 专业网站在文档窗口中，在刚设置格式的两个段落中的任何位置单击一次。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 25 页 - - - - - - - - - 在CSS 样式面板中，单击面板顶部的 当前，然后检查您的CSS 样式。在当前模式中，CSS 面板向您显示当前所选内容的属性的摘要。显示的属性与外部样式表中p 规则的属性相对应。在下一节中，您将使用CSS 样式面板创建新规则。使用CSS 样式面板创建新规则比手动键入规则容易得多，后者如同最初创建外部样式表

41、时的操作一样。创建新的CSS 规则在本节中，您将使用 CSS 样式面板创建自定义的CSS 规则或类样式。 类样式使您可以设置任何范围或文本块的样式属性，并可以应用到任何HTML 标签。有关不同类型的CSS 规则的更多信息，请参见了解CSS。在CSS 样式面板中，单击面板右下角的新建 CSS 规则。在新建 CSS 规则 对话框中，从 选择器类型 选项中选择 类。该选项应该是默认选中的。在名称文本框中输入.bold。确保在单词 bold前键入句点(.)。所有类样式必须以句点开头在定义在 弹出式菜单中，选择cafe_townsend.css 。该文件应该是默认选中的。单击确定。出现CSS 规则定义

42、对话框，表示您正在cafe_townsend.css 文件中创建一个称为 .bold 的类样式。在CSS 规则定义 对话框中，执行下面的操作: 在字体文本框中，输入Verdana, sans-serif 。在大小文本框中，输入11，并在紧靠其右的弹出式菜单中选择像素。在行高文本框中，输入18，并在紧靠其右的弹出式菜单中选择像素。从粗细弹出式菜单中选择 粗体。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 25 页 - - - - - - - - - 在颜色文本框中，输入

43、#990000。提示有关CSS 属性的更多信息，请参见Dreamweaver 中包含的OReilly 参考指南。 若要显示该指南， 请选择 帮助 参考，然后从 参考面板的弹出式菜单中选择 OReilly CSS 参考。单击确定。单击CSS 样式面板顶部的 所有按钮。若未展开cafe_townsend.css 类别，则单击该类别旁边的加号(+) 按钮。您可以看到， Dreamweaver 已将 .bold 类样式添加到在外部样式表中定义的规则列表中。 如果您在 所有规则 窗格中单击.bold 规则，则该规则的属性将出现在 属性窗格中。新规则还出现在 属性检查器的 样式弹出式菜单中。将类样式应用到

44、文本现在，您已经创建了一个类规则，并将该规则应用到某些段落文本。在文档窗口中，选择第一段中文本的前四个单词:Cafe Townsends visionary chef。在属性检查器 (窗口属性 )中，从 样式弹出式菜单中选择 bold。粗体类样式将应用到您的文本。重复第 2 步，将 粗体类样式应用到第二段的前四个单词。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 25 页 - - - - - - - - - 保存页面。设置导航条文本的格式接下来，您将使用CSS 将样式

45、应用到导航条的链接文本。许多Web 页面使用内含文本的彩色矩形图像来创建导航条。但是，如果使用CSS，您所需要设置的只是链接文本和一些格式。通过使用display: block 属性并设置块的宽度，您可以有效地创建矩形，而不需要另外使用图像。为导航创建新规则若未打开cafe_townsend.css 文件，则打开该文件，或单击其选项卡来显示该文件。定义一个新规则，方法是在该文件的.bold 类样式后面键入以下代码 : .navigation 这是一个空规则。文件中的代码应类似于下面的示例: 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

46、 - - 名师精心整理 - - - - - - - 第 18 页，共 25 页 - - - - - - - - - 保存 cafe_townsend.css 文件。接下来，您将使用 CSS 样式面板向规则添加属性。若未打开index.html 文件，则打开该文件。在CSS 样式面板中，确保选中了 全部模式，选择新的.navigation 规则，然后单击面板右下角的 编辑样式 。在CSS 规则定义 对话框中，执行下面的操作: 在字体文本框中，输入Verdana, sans-serif 。从大小弹出式菜单中选择16，然后从紧靠其右的弹出式菜单中选择像素。从样式弹出式菜单中选择 正常。从修饰列表中选

47、择 无。从粗细弹出式菜单中选择 粗体。在颜色文本框中，输入#FFFFFF。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 25 页 - - - - - - - - - 若要显示该指南， 请选择 帮助 参考，然后从 参考面板的弹出式菜单中选择OReilly CSS 参考。单击确定。现在，您将使用 CSS 样式面板向 .navigation 规则添加更多属性。在CSS 样式面板中，确保选中了.navigation 规则，然后单击 显示列表视图。列表视图可使 属性窗格按字母顺

48、序显示所有可用属性(与设置属性 视图不同， 设置属性 视图只显示已设置的属性 )。单击 background-color 属性右边的列。若要查看属性的完整内容，请将鼠标指针停留在该属性上。输入十六进制值#993300，然后按Enter 键(Windows) 或 Return 键(Macintosh)。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 25 页 - - - - - - - - - 提 示 若 要 查 看您 的 工 作 对 外 部 样 式 表 的 影 响 ，

49、请 在 您 工 作 时 保 持cafe_townsend.css 文件在 文档窗口中处于打开状态。 当您在 CSS 样式面板中做出选择时，同时将看到Dreamweaver 在样式表中写入CSS 代码。找到 display 属性(可能需要向下滚动 )，在右边的列中单击一次，然后从弹出式菜单中选择block。找到 padding 属性，在右边的列中单击一次， 输入值 8px，然后按 Enter 键(Windows) 或 Return 键 (Macintosh)。找到 width 属性，在右边的列中单击一次，在第一个文本框中输入140，从 弹 出 式 菜 单 中 选 择 像 素 ， 然 后 按Ent

50、er 键(Windows) 或Return 键(Macintosh)。单击显示设置属性 ，以便在 属性窗格中仅显示您设置的属性。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 25 页 - - - - - - - - - 单击 cafe_townsend.css 文件以显示该文件。您将看到，Dreamweaver 已经将您指定的所有属性添加到该文件中。保存并关闭cafe_townsend.css 文件。现在，您已经创建了一个设置导航条文本格式的规则。接下来，您要将该规则