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