1.4 案例实战
视频讲解
本节将学习设计一个完整的页面，体验标准网页的制作过程。案例页面设计效果如图1.12所示。
图1.12 使用CSS设计的第一个页面
【操作步骤】
第1步，启动Dreamweaver，新建HTML文档，保存为index.html。
提示：本页面所需要的图片等素材可以参考附赠的源代码。考虑到很多初学者是第一次接触CSS，本案例稍显复杂，因此建议读者可根据实际情况有选择性学习，或直接跳过本节操作练习。
第2步，切换到代码视图，在<body>标签内输入下面代码，构建本页面主体结构，设计本例页面一级框架。
<!--[一级框架]-->
<!--顶部-->
<div id="top"></div>
<div id="top1"></div>
<!--主体-->
<div id="main"></div>
<!--底部-->
<div id="footer"></div>
<div id="copyright"></div>
在标准布局中，读者应该为每个div框架元素定义id属性，这些id属性如同人的身份证一样，方便CSS准确地控制每个div布局块。所以，为了阅读和维护的需要，我们应该为它们起一个有意义的名字。
第3步，进一步细化页面结构，设计页面内部层次框架。由于本例页面比较简单，嵌套框架不会很深，顶部和底部布局块可能不需要嵌套框架。输入以下完整的HTML结构代码。
第4步，丰富结构内容。使用<pre>标签显示代码内容，使用<a>设计超链接文本，整个页面内容显示如下，代码内容是在网页中居中显示红色字符“Hello World!”。
上面所用的HTML框架代码嵌套层次只有3层，其中为了实现圆角区域的显示效果而单独嵌套多层div元素除外。
第5步，按Ctrl+S快捷键保存文档，按F12键在浏览器中预览，显示效果如图1.13所示，现在还没有定义CSS代码，所以看到的还不是最终效果。
图1.13 页面的HTML结构预览效果
第6步，在一个单独的文件中编写CSS。新建CSS文档，保存为style.css，文件扩展名为.css。
第7步，（不急于编写CSS代码）打开index.html文档，在<head>标签内插入一个<link>标签，输入下面代码，导入上一步新建的外部样式表文件。
<!--[在网页中链接外部样式表文件]-->
<LINK href="images/style.css" type=text/css rel=stylesheet>
第8步，打开style.css文档，在其中输入下面的CSS代码。
读者可能看不懂上面的CSS代码，不过没关系，根据上面的提示简单了解即可。其中width属性用来定义宽度，background: url(images/bg_bottom.gif) #fff repeat left top;规则用来定义背景图像重复铺展显示，其中url指定背景图像的地址，repeat属性定义铺展显示，left top表示背景图像的起始位置为左上角。
对于其他属性，上面代码中已有解释，读者可以尝试阅读一下，读不懂也没有关系，毕竟现在仅是开始。相信随着学习的深入，一定会明白上面代码的意思。
另外，本节实例没有使用CSS3圆角属性定义区块圆角，而是使用传统方法进行设计，主要考虑初学者的学习门槛，后面章节我们会详细介绍。
第9步，按Ctrl+S快捷键保存文档，然后在浏览器中再次预览页面，则可以看到最终效果。