快捷導(dǎo)航

學(xué)習(xí)dreamweaver cs3新功能之直接生成div+css頁(yè)面

更新時(shí)間：2007年09月14日 21:24:45 作者：

dreamweaver cs3在新建文件時(shí)比以前版本有了較大改變，分為了四列形，有點(diǎn)類(lèi)似于golive的樣式了。最大的改觀(guān)就算它能自動(dòng)創(chuàng)建div+css布局，基本上涵蓋了所有的常用布局形式?？梢詾槲覀?cè)O(shè)計(jì)頁(yè)面時(shí)節(jié)省很大一部分時(shí)間，值得表?yè)P(yáng)。

下面的是自動(dòng)生成的頁(yè)面，里邊還帶注釋呢

<!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>二列固定、左側(cè)欄、標(biāo)題和腳注www.aa25.cn</title> <style type="text/css">    </style></head> <body class="twoColFixRtHdr"> <div   class="wppm3vysvbp"   id="container">   <div   class="wppm3vysvbp"   id="header"> <h1>標(biāo)題</h1>   </div>   <div   class="wppm3vysvbp"   id="sidebar1"> <h3>Sidebar1 內(nèi)容</h3> <p>此 div 上所顯示的背景色剛好與內(nèi)容等寬。如果您喜歡改用分界線(xiàn)，而且 #mainContent div 將始終包含較多的內(nèi)容，請(qǐng)?jiān)?#mainContent div 的右邊緣放置一個(gè)邊框。 </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>   </div>   <div   class="wppm3vysvbp"   id="mainContent"> <h1> 主要內(nèi)容 </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 級(jí)別的標(biāo)題 </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>     </div>     <br class="clearfloat" />   <div   class="wppm3vysvbp"   id="footer"> <p>腳注</p>   </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]