dreamweaver cs3在建立檔案時比以前版本有了較大改變，分為了四列形，有點類似於golive的樣式了。最大的改觀就算它能自動建立div+css布局，基本上涵蓋了所有的常用布局形式。可以為我們設計頁面時節省很大一部分時間，值得表揚。
下面的是自動產生的頁面，裡邊還帶注釋呢
<!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>二列固定、左側欄、標題和腳註www.aa25.cn</title> <style type="text/css"> <!-- body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; /* 最好將 body 元素的邊距和填充設定為 0 以覆蓋不同的瀏覽器預設值 */ padding: 0; text-align: center; /* 在 IE 5* 瀏覽器中，這會將容器置中。文本隨後將在 #container 選取器中設定為預設靠左對齊 */ color: #000000; } .twoColFixRtHdr #container { width: 780px; /* 使用比最大寬度 (800px) 小 20px 的寬度可顯示瀏覽器介面元素，並避免出現水平捲軸 */ background: #FFFFFF; margin: 0 auto; /* 自動邊距（與寬度一起）會將頁面置中 */ border: 1px solid #000000; text-align: left; /* 這將覆蓋 body 元素上的"text-align: center"。 */ } .twoColFixRtHdr #header { background: #DDDDDD; padding: 0 10px 0 20px; /* 此填充會將出現在它後面的 div 中的元素靠左對齊。如果 #header 中使用的是映像（而不是文本），您最好刪除填充。 */ } .twoColFixRtHdr #header h1 { margin: 0; /* 將 #header div 中最後一個元素的邊距設定為零將避免邊距重疊（即 div 之間出現的無法解釋的空白）。如果 div 周圍有邊框，則不必將邊距設定為零，因為邊框也會避免邊距重疊 */ padding: 10px 0; /* 使用填充而不使用邊距將可以使元素遠離 div 的邊緣 */ } .twoColFixRtHdr #sidebar1 { float: right; /* 由於此元素是浮動的，因此必須指定寬度 */ width: 200px; /* 在符合標準的瀏覽器中或者在 Internet Explorer 中的標準模式下，此 div 的實際寬度除了包括寬度外，還包括填充和邊框 */ background: #EBEBEB; /* 將顯示背景色，其寬度等於欄中內容的長度，*/ padding: 15px 10px; } .twoColFixRtHdr #mainContent { margin: 0 250px 0 0; /* 此 div 元素的右邊距會在頁面的右下方建立欄 — 無論 sidebar1 div 中包含多少內容，都將保留欄空白。如果您希望在 #sidebar1 中的內容結束時，用 #mainContent div 的文本填充 #sidebar1 空白，則可以刪除此邊距。 */ padding: 0 20px; /* 請記住，填充是 div 方塊內部的空間，邊距則是 div 方塊外部的空間 */ } .twoColFixRtHdr #footer { padding: 0 10px 0 20px; /* 此填充會將它上面 div 中的所有元素靠左對齊。 */ background:#DDDDDD; } .twoColFixRtHdr #footer p { margin: 0; /* 將腳註中第一個元素的邊距設定為零將避免出現可能的邊距重疊（即 div 之間出現的空白）*/ padding: 10px 0; /* 就像邊距會產生空白一樣，此元素上的填充也將產生空白，但不會出現邊距重疊問題 */ } .fltrt { /* 此類可用來使頁面中的元素向右浮動。浮動元素必須位於頁面上要與之相鄰的元素之前。 */ float: right; margin-left: 8px; } .fltlft { /* 此類可用來使頁面上的元素向左浮動 */ float: left; margin-right: 8px; } .clearfloat { /* 此類應當放在 div 或 break 元素上，而且該元素應當是完全包含浮動的容器關閉之前的最後一個元素 */ clear:both; height:0; font-size: 1px; line-height: 0px; } --> </style><!--[if IE 5]> <style type="text/css"> /* 將 IE 5* 的 css 方塊模型修正放在這個條件注釋中 */ .twoColFixRtHdr #sidebar1 { width: 220px; } </style> <![endif]--><!--[if IE]> <style type="text/css"> /* 請將所有版本的 IE 的 css 修複放在這個條件注釋中 */ .twoColFixRtHdr #sidebar1 { padding-top: 30px; } .twoColFixRtHdr #mainContent { zoom: 1; } /* 上面的專用 zoom 屬性為 IE 提供避免錯誤所需的 hasLayout */ </style> <![endif]--></head> <body class="twoColFixRtHdr"> <div id="container"> <div id="header"> <h1>標題</h1> <!-- end #header --></div> <div id="sidebar1"> <h3>Sidebar1 內容</h3> <p>此 div 上所顯示的背景色剛好與內容等寬。如果您喜歡改用分界線，而且 #mainContent div 將始終包含較多的內容，請在 #mainContent div 的右邊緣放置一個邊框。 </p> <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <!-- end #sidebar1 --></div> <div id="mainContent"> <h1> 主要內容 </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <h2>H2 層級的標題 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <!-- end #mainContent --></div> <!-- 這個用於清除浮動的元素應當緊跟 #mainContent div 之後，以便強制 #container div 包含所有的子浮動 --><br class="clearfloat" /> <div id="footer"> <p>腳註</p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
