(1)啟動 Dreamweaver,新建HTML 文件,儲存為 index.html.md
阿新 • • 發佈：2018-12-11
(1)啟動 Dreamweaver,新建HTML 文件,儲存為 index.html
(2)切換到程式碼檢視,在標籤內輸入以下程式碼,構建本頁面主體結構,設計本例頁面一級框架.
<!--[一級框架]-->
<!--頂部-->
<div id="top"></div>
<div id="top1"></div>
<!--主體-->
<div id="main"></div>
<!--底部-->
<div id="footer"></div>
< 在標準佈局中,每個div框架元素定義 d屬性,這些屬性如同人的身份證一樣,方便css 能夠準確控制每個div 佈局塊.所以,為了閱讀和維護的需要,我們應該為它們起一個有意義的名字.
(3)進一步細化頁面結構,設計頁面內部層次框架.由於本例頁面比較簡單,巢狀框架不會很深,頂部和底部佈局塊可能就不要巢狀框架.
輸入完整的 HTML 結構程式碼:
<!--[完整HTML 框架]-->
<!--頂部-->
<div id="top"></div>
<div id="top1" (4)豐富結構內容,使用
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
h1 {
color: #FF0000;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World! </h1>
</body>
</html>
</pre>
</div>
</div>
</div>
</div>
</div>
<div id="gotop">
<a title="跳到頁首" href="#top">
返回頂部
</a>
</div>
</div>
</div>
<!--底部 -->
<div id="footer"></div>
<div id="copyright">
©2017
<a href="#" target="_black" >
mysite.cn
</a>
all rights reserved
</div>
上面所用 的HTML框架程式碼巢狀層次只有3層，其中為了實現圓角區域的顯示效果而單獨巢狀的多層div元素除外
(5)按Ctrl+S快捷鍵儲存文件，按F12鍵在瀏覽器中預覽
(6)編寫 CSS程式碼可以在一個單獨的檔案中進行.新建CSS文件,儲存為 style.css,副檔名為.CSS. (7)不急於編寫 CSS程式碼,開啟 index.html文件,然後在標籤內部插入一個標籤,輸入以下程式碼匯入上一步新建的外部樣式表文件.
<!--[在網頁中連結外部樣式表文件]-->
<LINK href="images/style.css"type=text/css rel=stylesheet>
(8)開啟style.css 文件,在其中輸入CSS程式碼如下:
<!--公共屬性-->
html{ min-width:776px;}
<!--頁面屬性:邊距0,字型顏色為黑色,字型大小14畫素,行高為字型大小的1.6倍,居中對齊,背景色為天藍色,字型為宋體等-->
body {
margin:0px;
padding:0px;
border:Opx;color:#000;
font-size:14px;
line-height:160%;
text-align:center;
background:#6D89DD;
font-family:'宋體','新宋體',arial,verdana,sans-serif;
}
<!--超連結屬性:無邊距,無邊框,無下劃線,然後定義正常狀態下的顏色,訪問過的顏色和滑鼠經過時的顏色並顯示下劃線-->
a {
margin:0px;
padding:0px;
border:0px;
text-decoration:none;
}
a:link{ color:#E66133;}
a:visited{ color:#E66133;}
a:hover{ color:#637DBC; text-decoration:underline;}
<!--預定義格式屬性:淺灰色背景,無首行縮排,內邊距大小,外邊距為0,右縮排為一個字型大小,字型顏色為藍色-->
pre { text-indent:0;background:#DDDDDD;padding:0;margin:0;color:blue;}
<!--頂部佈局-->
#top{
width:776px;
margin-right:auto;
margin-left:auto;
padding:Opx;
height:12px;
background:url(images/bg_top1.gif) #fff repeat-x left top;
overflow:hidden;
}
#top1{
width:776px;
margin-right:auto;
margin-left:auto;
padding:Opx;
height:121px;
}
<!--主體佈局-->
<!--外層定義背景影象,實現麻點顯示效果-->
#main{
width:776px;
margin-right:auto;
margin-left:auto;
padding:1.2em 0px;
background:ur1(images/bg dot1.gif) #fff repeat left top;
text-align:left;
}
<!--內層定義背景顏色為白色,實現中間內容區域遮蓋麻點顯示-->
#content{
width:710px;
margin-right:auto;
margin-left:auto;
padding:lem;
background:#fff;
}
<!--大標題區域屬性-->
#title{
font-weight:bold;
margin:0px 0px 0.5em 0px;
padding:0.5em 0px 0.5em 1em;
font-size:24px;
color:#00A06B;
text-align:left;
border-bottom:solid #9EA3C1 2px;
}
<!--小標題區域屬性-->
.sub {
color:#00A06B;
font-weight:bold;
font-size:13px;
text-align:left;
padding:1em 2em 0;
background:url(images/0.gif) #fff no-repeat 1em 74%;
}
<!--內容區域顯示屬性-->
.content{
text-indent:2em;
font-size:13px;
margin-left:2em;
padding:1em 6px;
}
<!--頁內連結區域屬性-->
#gotop{
width:100%;
margin:0px;
padding:0px;
background:#ffff
height:2em;
font-size:12px;
text-align:right;
}
<!--底部佈局-->
<!--頁尾裝修圖-->
#footer{
clear:both;
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
background:url(images/bg_ bottom.gif) #fff repeat left top;
text-align:center;
height:39px;
color:#ddd;
}
<!--版權資訊-->
#copyright{
width:776px;
margin-right:auto;
margin-left:auto;
padding:5px 0px 0px 0px;
background:#fff;
text-align:center;
height:60px;
line-height:13px;
font-size:12px;
color:#9EAOBB;
}
#copyright a{ color:#667EBE;}
<!--圓角特效-->
.box{ background:url(images/nt.gif)repeat;}
.tl{ background:url(images/tl.gif)no-repeat top left;}
.tr { background:url(images/tr.gif)no-repeat top right;}
.b1{ background:url(images/bl.gif) no-repeat bottom left;}
.br { background:url(images/br.gif) no-repeat bottom right;}
width 屬性用來定義寬度,background:url(images/bg_bottom.gif)#fff repeat left top;規則用來定義背景影象重複鋪展顯示,其中指定背景影象的地址,repeat 屬性定義鋪展顯示,left top表示背景影象的起始位置為左上角.