上QQ阅读APP看书，第一时间看更新
1.4 本章实训：创建一个响应式网页
1.4.1 使用HTML 5标签建立页面基本结构
打开Adobe Dreamweaver CC，新建一个空白页面。为了使得网页代码更高效，我们将使用HTML 5的标签来定义页面元素。
按以下代码建立页面结构：
<body> <div id="container" > <nav>导航</nav> <main>内容</main> <aside>侧边</aside> </div> </body>
1.4.2 布局与定位
接下来设置每个页面部件的基本样式定义。为满足响应式网页的需求，我们使用百分比取代固定像素来设置宽度。在这里只设置了宽度、背景颜色等几个样式属性，读者可根据需要扩充其他属性。
把以下代码添加到<head>标签内：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#container {
width:80%;
margin:auto;
}
nav {
background:silver;
width:100%;
}
main {
width:80%;
background:lightblue;
float:left;
}
aside{
width:18%;
padding-left:2%;
float:left;
background:yellow;
}
</style>
1.4.3 网页内容呈现
在页面中增加媒体查询的设置。媒体查询可以直接通过编写HTML代码来实现，对于初学者还可以使用Adobe Dreamweaver CC中的“CSS设计器”面板进行添加。在Adobe DreamweaverCC界面右侧的“CSS设计器”面板中的相应位置单击加号+，即可添加媒体查询规则，如图1-11所示。
图1-11 CSS设计器面板中添加媒体查询规则的按钮
单击添加媒体查询的按钮后，将弹出定义媒体查询的对话框。在此对话框里可以增加、删除媒体查询设置的条件，如图1-12所示。
图1-12 “定义媒体查询”对话框
按以下代码在<style>标签内增加媒体查询规则：
@media screen and (max-width:480px){
main{
width:100%;
}
aside{
width:100%;
padding-left:0;
}
}
@media (min-width:769px){
nav{
width:30%;
float:left;}
main{
width:60%;
float:left;
}
aside{
width:9%
padding-left:1%;
}
媒体查询条件设置完成后就可以通过调整Dreamweaver的实时视图宽度来查看条件下页面的不同显示了，也可以保存网页并在浏览器中测试页面的显示效果。