CSS设计-第三部分:不使用表格的设计 (转)
本系列教程旨在教您如何在Dreamweaver MX 2004中使用CSS进行页面设计.现在我们开始第三部分,学习使用CSS布局.我们将设计一个固定宽度的页面并允许内容浮动.另外我们将使用列表创建水平导航系统.最近我们将在Fireworks MX 2004中制作一个banner（横幅）并应用到页面中去.
我强烈建议您首先阅读一下我介绍相对,绝对,静态定位的文章Introduction to CSS Positioning in Dreamweaver MX 2004,这会使您对定位的一些术语有更清楚的了解.
学会本章后您将学会使用CSS布局.完成后的页面结构如图1所示:
图1:完成后的页面结构
点击下载本章例子
使用正确的文档类型
在第一部分我说明了使用正确的文档类型的重要性.不完整的文档类型或是没有文档类型会使浏览器陷入”quirks mode”,这将将CSS显示不正常而您会陷入无尽地修改与困惑中.请保证文档类型的正确性.本系列我将采用XHTML 传统文档类型.
创建符合标准的页面
为了达到图1显示的结构效果,请使布局符合标准模式:
1.选择Dreamweaver菜单中的”文件->新建…”,打开新建文档对话框.
2.选择”常规”标签.
3.在”类型”中选择”基本页”.
4.基本页选项中选择”HTML”.
5.选中右下方的”使文档与XHTML兼容”.
6.点击”创建”按钮.
7.将新文档保存到您定义的站点中,命名为basiclayout1.html.
页面的代码应如下图所示.这就是我所说的”完美起点”,因为Dreamweaver MX 2004创建了一个最基本的XHMTL页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
现在在您的站点下新建一个名为CssFiles的文件夹用来存放CSS样式表文件.请根据第一部分我讲的步骤新建一个CSS文件.保存该文件为basiclayout.css,并将此文件链接到basiclayout1.html中.完成后该HTML源代码应如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CssFiles/basiclayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
您可以看到我们已经将CSS链接到页面中了.记住之前我们讨论过使用外部链接CSS文件的好处吗?
提示:请避免使用行内的或嵌入式的CSS.
编写body选择器规则
在第一部分,我们学会了如何在body选择器中定义边界与填充属性.在第二部分我们学会了如何尽量设置一些默认属性以便其它选择器可以直接继承.这样做可以减小CSS文件大小并减轻维护工作.
现在请在basiclayout.css文件中编写body选择器.请至少使body选择器包括以下几点属性/值:
* 背景色为#666666
* 字体类型为”Verdana… sans-serif”.
* 默认字体颜色为#666666
* 所有边界设为0.
* 所有填充设为0.
* 默认尺寸设为100%
完成之后body选择器的代码应如下所示:
body{
background-color:#666666;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 100%;
}
提示:如果您使用Dreamweaver CSS对话框创建以上属性,您会发现margin(边界)与padding(填充)属性值为0px,而不是0.这没有关系,0是可以不需要单位的.
我曾经讨论过我们有两种方式向CSS文件中添加选择器规则:
1.使用Dreamweaver对话框.
2.直接手写.
如果您有信心,直接手写更有效率.请记得检查语法以便尽快掌握CSS的一些语法细节.我已习惯利用代码提示手写代码.
编写Wrapper选择器
我习惯编写一个div作为wrapper(外壳).wrapper作用是包含页面中所有的设计元素并决定在body元素中的位置.
在本例中wrapper的位置——也是所有元素的位置——将在浏览器的中间,离上下窗口各10像边界.(如果您还记得之前我们讲过的,您会设置左右边界值为auto以使wrapper位于水平正中.)如果有不清楚的请回顾一下第一部分的”创建ID选择器”.
在创建wrapper ID 选择器时请记住以下属性值的设置:
* 背景色为#FFFFFF
* 四边的边框设为solid line,1像素宽,黑色(#000000).
* 宽度为770像素——这样使800*600的屏幕显示没有横向滚动条.
* 边界值上下设为10像素.
* 边界值左右设为auto(自动).
完成之后代码可能如下所示:
#wrapper{
width: 770px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
}
下面的视频演示将告诉您如何将wrapper应用到basiclayout1.html中去.
点击观看应用Wrapper Div的视频
在Firefox browser中预览(见图2).
图2:Firefox中预览
注意到下边界值看起来超过了10像素.这是因为wrapper没有内容而”压扁”了.您可以加上min-height属性来设定最小高度.但我觉得这样做没什么用,我喜欢div将其中的内容”压紧”一点.
如果您使用的是IE5.x,那么很可能您会看到如图3所示的情景:
图3:IE5.01下的情景,看起来并不如我们所想的那样!
正如您看到的,IE5.x浏览器有个问题:它并不能很好地执行左右边界的auto值.别担心,有个办法可以弥补.您还将看到IE5.x关于居中的别一个BUG.
将以下属性/值代码添加到body选择器中:
text-align: center;
再次预览:
图4:wrapper div在IE5.01中显示¬——好多了!
IE5.x对tex-align:center;属性执行得有问题.它将wrapper div居中了!虽然错误却还能满足设计需要.现在回到wrapper规则并将以下代码加入其中:
text-align:left
完成后整个CSS文件中代码应如下所示:
body{
background-color:#666666;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper{
width: 770px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align:left;
}
继续.
创建BANNER图片
现在创建一个BANNER:
1.打开Fireworks MX 2004.
2.新建一个770*100的空白图片.
3.在工具栏中选择矩形工具.
4.画一个与场景同大小的矩形.
5.将其颜色调为#212A51.
6.在Fireworks MX 2004中打开汽车图片并选中.
7.复制图片.
8.粘贴到新建的空白图片中并使之处于右侧(见图5).
图5:BANNER
9.选中粘贴到空白图片中的汽车图片.
10.选择”命令->创意->图片渐隐”,打开图片渐隐对话框.(见图6)
图6:渐隐选项.
11.选择左上的选项,点击确定.
现在BANNER的外观应如图7所示:
图7:BANNER
现在我们再添加一些文字:
1.选择工具面板中的文字工具,在场景中任意位置点击一下.
2.然后双击工具面板中的文字工具,打开文本编辑器.
3.键入如图8所示的文本并点击确定.
图8:添加文字
4.为文字加上移动效果.选中文本,再选择菜单栏中”遮镜->Eye Candy 4000 LE->Motion Trail”.(在弹出将矢量图转换为位图的警告框时点击确定”.
5.将Motion Trail对话框中的设置如图9所示填写:
图9:设置Motion Trail
6.点击确定,完成图应如图10所示:
图10:完成效果
7.选择”文件->导出预览”.
8.在导出预览对话框中将”Format(格式)”选为JPEG,品质选为68.(见图11)
图11:导出预览对话框
9.设置好后,点击”导出”按钮导出图片到您的站点中.
现在我们该创建Banner div规则的代码了.
创建Banner选择器
现在我们来创建banner div.因为wrapper中的内容是从上至下浮动的,所以我们应先创建banner div,然后是content(内容) div,最后是footer(底栏) div.页面将会很自然地浮动在一起,我们不会添加任何确定性的定位属性.所以我们得排好wrapper中内容的位置.第一个元素是banner.现在我们创建banner选择器.
Banner div是一个ID类型的选择器,记得它是放入wrapper中的第一个元素.因为元素是浮动的,所以banner div得紧跟着wrapper div打开标签后.banner选择器中唯一属性就是height.因为没有文本,不必担心用户在改变浏览器窗口时文本会被截断,所以height属性可以放心使用.这里我们定义为110像素.
完成后的代码应如下所示:
#banner{
height: 110px;
}
我们已经创建好Banner选择器,现在我们来学习怎样将背景图片加入其中.这次我们直接使用Dreamweaver代码提示在CSS文件中手写代码,您会发现这一切都非常简单.
点击观看添加背景图片视频
1.将光标定位到basiclayout.css中的banner选择器.
2.移动光标到高度属性值后,回车插入一新行,代码提示列表就会出现.
3.选择background-image,插入.
4.选中弹出的”浏览”,打开选择文件对话框.
5.选中刚刚制作的图片,双击以插入其链接.
6.插入一个分号(;),结束本段.
7.回车插入新行,代码提示列表又会出现.
8.选择background-repeat,在弹出提示中选择no-repeat.
9.插入一个分号.
10.保存.
现在banner选择器应如下所示:
#banner{
height: 110px;
background-image: url(../images/banner_bg.jpg);
background-repeat: no-repeat;
}
我们现在将banner div添加到文档中.切换到代码视图,用上面所讲的方法手工插入到wrapper div中:
<body>
<div id="wrapper">
<div id="banner"></div>
</div>
</body>
代码显示了banner div的显示位置,请注意在wrapper div开始标签后紧接着插入banner,其显示状况是怎样的.现在预览一下(见图12).
图12:预览
创建Navigation(导航条)选择器
下一个该创建的元素是导航条.我们使用nav做为ID名,这该是轻车熟路了吧?
将该nav ID 选择器设为黑色边框,1像素宽,只有底边.
点击观看创建Nav ID 选择器视频
1.将光标定位于#banner选择器后.
2.键入”#nav”,回车.
3.在代码提示中选择border-bottom,回车.
4.键入简写代码:1px solid #000000;
5.加上”}”结束.
整个代码如下所示:
#nav{
border-bottom: 1px solid #000000;
}
添加ul元素
您需要为导航条添加行内列表.首先必须定义ul元素来装载列表元素.早先我曾说过最好将边界设默认值为0.主要原因是浏览器各异,有的使用了填充,有的使用了边界.所以最好将ul元素中该属性均设为0.
1.打开basiclayout.css.
2.在末行加车两下并键入”#nav ul{“.
该句代码声明了只在使用nav为ID的选择器中ul元素的属性.如果只用”ul{“声明,那么所有的ul元素都会应用于该规则.这是另一个特征性的例子.简单来说,浏览器会首先找到nav div,然后查找其中有无ul,有则应用.
提示:在第一部分我讲过选择器的继承关系.
4.键入padding:0;
5.键入margin:0;
6.键入background-color:#00FF99;
7.回车,键入”}”结束.
您不必完整输入属性,可以直接在代码提示中选择正确的即可.要学会使用手写代码,这会使您的工作事半功倍.记得行末加上分号”;”.
#nav ul选择器应如下所示:
#nav ul{
padding: 0;
margin: 0;
background-color:#00FF99;
}
(未完待续)
我强烈建议您首先阅读一下我介绍相对,绝对,静态定位的文章Introduction to CSS Positioning in Dreamweaver MX 2004,这会使您对定位的一些术语有更清楚的了解.
学会本章后您将学会使用CSS布局.完成后的页面结构如图1所示:
图1:完成后的页面结构
点击下载本章例子
使用正确的文档类型
在第一部分我说明了使用正确的文档类型的重要性.不完整的文档类型或是没有文档类型会使浏览器陷入”quirks mode”,这将将CSS显示不正常而您会陷入无尽地修改与困惑中.请保证文档类型的正确性.本系列我将采用XHTML 传统文档类型.
创建符合标准的页面
为了达到图1显示的结构效果,请使布局符合标准模式:
1.选择Dreamweaver菜单中的”文件->新建…”,打开新建文档对话框.
2.选择”常规”标签.
3.在”类型”中选择”基本页”.
4.基本页选项中选择”HTML”.
5.选中右下方的”使文档与XHTML兼容”.
6.点击”创建”按钮.
7.将新文档保存到您定义的站点中,命名为basiclayout1.html.
页面的代码应如下图所示.这就是我所说的”完美起点”,因为Dreamweaver MX 2004创建了一个最基本的XHMTL页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
现在在您的站点下新建一个名为CssFiles的文件夹用来存放CSS样式表文件.请根据第一部分我讲的步骤新建一个CSS文件.保存该文件为basiclayout.css,并将此文件链接到basiclayout1.html中.完成后该HTML源代码应如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CssFiles/basiclayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
您可以看到我们已经将CSS链接到页面中了.记住之前我们讨论过使用外部链接CSS文件的好处吗?
提示:请避免使用行内的或嵌入式的CSS.
编写body选择器规则
在第一部分,我们学会了如何在body选择器中定义边界与填充属性.在第二部分我们学会了如何尽量设置一些默认属性以便其它选择器可以直接继承.这样做可以减小CSS文件大小并减轻维护工作.
现在请在basiclayout.css文件中编写body选择器.请至少使body选择器包括以下几点属性/值:
* 背景色为#666666
* 字体类型为”Verdana… sans-serif”.
* 默认字体颜色为#666666
* 所有边界设为0.
* 所有填充设为0.
* 默认尺寸设为100%
完成之后body选择器的代码应如下所示:
body{
background-color:#666666;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
font-size: 100%;
}
提示:如果您使用Dreamweaver CSS对话框创建以上属性,您会发现margin(边界)与padding(填充)属性值为0px,而不是0.这没有关系,0是可以不需要单位的.
我曾经讨论过我们有两种方式向CSS文件中添加选择器规则:
1.使用Dreamweaver对话框.
2.直接手写.
如果您有信心,直接手写更有效率.请记得检查语法以便尽快掌握CSS的一些语法细节.我已习惯利用代码提示手写代码.
编写Wrapper选择器
我习惯编写一个div作为wrapper(外壳).wrapper作用是包含页面中所有的设计元素并决定在body元素中的位置.
在本例中wrapper的位置——也是所有元素的位置——将在浏览器的中间,离上下窗口各10像边界.(如果您还记得之前我们讲过的,您会设置左右边界值为auto以使wrapper位于水平正中.)如果有不清楚的请回顾一下第一部分的”创建ID选择器”.
在创建wrapper ID 选择器时请记住以下属性值的设置:
* 背景色为#FFFFFF
* 四边的边框设为solid line,1像素宽,黑色(#000000).
* 宽度为770像素——这样使800*600的屏幕显示没有横向滚动条.
* 边界值上下设为10像素.
* 边界值左右设为auto(自动).
完成之后代码可能如下所示:
#wrapper{
width: 770px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
}
下面的视频演示将告诉您如何将wrapper应用到basiclayout1.html中去.
点击观看应用Wrapper Div的视频
在Firefox browser中预览(见图2).
图2:Firefox中预览
注意到下边界值看起来超过了10像素.这是因为wrapper没有内容而”压扁”了.您可以加上min-height属性来设定最小高度.但我觉得这样做没什么用,我喜欢div将其中的内容”压紧”一点.
如果您使用的是IE5.x,那么很可能您会看到如图3所示的情景:
图3:IE5.01下的情景,看起来并不如我们所想的那样!
正如您看到的,IE5.x浏览器有个问题:它并不能很好地执行左右边界的auto值.别担心,有个办法可以弥补.您还将看到IE5.x关于居中的别一个BUG.
将以下属性/值代码添加到body选择器中:
text-align: center;
再次预览:
图4:wrapper div在IE5.01中显示¬——好多了!
IE5.x对tex-align:center;属性执行得有问题.它将wrapper div居中了!虽然错误却还能满足设计需要.现在回到wrapper规则并将以下代码加入其中:
text-align:left
完成后整个CSS文件中代码应如下所示:
body{
background-color:#666666;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper{
width: 770px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align:left;
}
继续.
创建BANNER图片
现在创建一个BANNER:
1.打开Fireworks MX 2004.
2.新建一个770*100的空白图片.
3.在工具栏中选择矩形工具.
4.画一个与场景同大小的矩形.
5.将其颜色调为#212A51.
6.在Fireworks MX 2004中打开汽车图片并选中.
7.复制图片.
8.粘贴到新建的空白图片中并使之处于右侧(见图5).
图5:BANNER
9.选中粘贴到空白图片中的汽车图片.
10.选择”命令->创意->图片渐隐”,打开图片渐隐对话框.(见图6)
图6:渐隐选项.
11.选择左上的选项,点击确定.
现在BANNER的外观应如图7所示:
图7:BANNER
现在我们再添加一些文字:
1.选择工具面板中的文字工具,在场景中任意位置点击一下.
2.然后双击工具面板中的文字工具,打开文本编辑器.
3.键入如图8所示的文本并点击确定.
图8:添加文字
4.为文字加上移动效果.选中文本,再选择菜单栏中”遮镜->Eye Candy 4000 LE->Motion Trail”.(在弹出将矢量图转换为位图的警告框时点击确定”.
5.将Motion Trail对话框中的设置如图9所示填写:
图9:设置Motion Trail
6.点击确定,完成图应如图10所示:
图10:完成效果
7.选择”文件->导出预览”.
8.在导出预览对话框中将”Format(格式)”选为JPEG,品质选为68.(见图11)
图11:导出预览对话框
9.设置好后,点击”导出”按钮导出图片到您的站点中.
现在我们该创建Banner div规则的代码了.
创建Banner选择器
现在我们来创建banner div.因为wrapper中的内容是从上至下浮动的,所以我们应先创建banner div,然后是content(内容) div,最后是footer(底栏) div.页面将会很自然地浮动在一起,我们不会添加任何确定性的定位属性.所以我们得排好wrapper中内容的位置.第一个元素是banner.现在我们创建banner选择器.
Banner div是一个ID类型的选择器,记得它是放入wrapper中的第一个元素.因为元素是浮动的,所以banner div得紧跟着wrapper div打开标签后.banner选择器中唯一属性就是height.因为没有文本,不必担心用户在改变浏览器窗口时文本会被截断,所以height属性可以放心使用.这里我们定义为110像素.
完成后的代码应如下所示:
#banner{
height: 110px;
}
我们已经创建好Banner选择器,现在我们来学习怎样将背景图片加入其中.这次我们直接使用Dreamweaver代码提示在CSS文件中手写代码,您会发现这一切都非常简单.
点击观看添加背景图片视频
1.将光标定位到basiclayout.css中的banner选择器.
2.移动光标到高度属性值后,回车插入一新行,代码提示列表就会出现.
3.选择background-image,插入.
4.选中弹出的”浏览”,打开选择文件对话框.
5.选中刚刚制作的图片,双击以插入其链接.
6.插入一个分号(;),结束本段.
7.回车插入新行,代码提示列表又会出现.
8.选择background-repeat,在弹出提示中选择no-repeat.
9.插入一个分号.
10.保存.
现在banner选择器应如下所示:
#banner{
height: 110px;
background-image: url(../images/banner_bg.jpg);
background-repeat: no-repeat;
}
我们现在将banner div添加到文档中.切换到代码视图,用上面所讲的方法手工插入到wrapper div中:
<body>
<div id="wrapper">
<div id="banner"></div>
</div>
</body>
代码显示了banner div的显示位置,请注意在wrapper div开始标签后紧接着插入banner,其显示状况是怎样的.现在预览一下(见图12).
图12:预览
创建Navigation(导航条)选择器
下一个该创建的元素是导航条.我们使用nav做为ID名,这该是轻车熟路了吧?
将该nav ID 选择器设为黑色边框,1像素宽,只有底边.
点击观看创建Nav ID 选择器视频
1.将光标定位于#banner选择器后.
2.键入”#nav”,回车.
3.在代码提示中选择border-bottom,回车.
4.键入简写代码:1px solid #000000;
5.加上”}”结束.
整个代码如下所示:
#nav{
border-bottom: 1px solid #000000;
}
添加ul元素
您需要为导航条添加行内列表.首先必须定义ul元素来装载列表元素.早先我曾说过最好将边界设默认值为0.主要原因是浏览器各异,有的使用了填充,有的使用了边界.所以最好将ul元素中该属性均设为0.
1.打开basiclayout.css.
2.在末行加车两下并键入”#nav ul{“.
该句代码声明了只在使用nav为ID的选择器中ul元素的属性.如果只用”ul{“声明,那么所有的ul元素都会应用于该规则.这是另一个特征性的例子.简单来说,浏览器会首先找到nav div,然后查找其中有无ul,有则应用.
提示:在第一部分我讲过选择器的继承关系.
4.键入padding:0;
5.键入margin:0;
6.键入background-color:#00FF99;
7.回车,键入”}”结束.
您不必完整输入属性,可以直接在代码提示中选择正确的即可.要学会使用手写代码,这会使您的工作事半功倍.记得行末加上分号”;”.
#nav ul选择器应如下所示:
#nav ul{
padding: 0;
margin: 0;
background-color:#00FF99;
}
(未完待续)
浙公网安备 33010602011771号