Dreamweaver CS3 has changed a lot from the previous version when it was created, and it is divided into four columns, somewhat similar to the golive style. The biggest change, even if it automatically creates div+css layouts, basically covers all of the usual layout forms. Can save a lot of time for us to design the page, it is worth praising.
The following is an automatically generated page with a note inside it
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> two column fixed, left column, title and footnote www.aa25.cn</title> <style type=" Text/css "> <!--body {font:100% Verdana, Arial, Helvetica, Sans-serif; Background: #666666; margin:0; /* It is best to set the padding and padding of the body element to 0 to cover different browser defaults/padding:0; Text-align:center; /* In IE 5* browser, this will center the container. The text is then set to the default left-aligned/color in the #container selector: #000000; }. twocolfixrthdr #container {width:780px; /* Use the width of the maximum width (800px) of small 20px to display the browser interface elements, and avoid a horizontal scroll bar * * background: #FFFFFF; margin:0 Auto; /* automatic margins (along with width) will center the page * * border:1px solid #000000; Text-align:left; /* This will overwrite the "text-align:center" on the BODY element. */}. TWOCOLFIXRTHDR #header {background: #DDDDDD; padding:0 10px 0 20px; /* This fill will align the elements left in the div that appear after it. If you are using images (rather than text) #header, you may want to remove the fill. /}. TWOCOLFIXRTHDR #header h1 {margin:0;/* Sets the margin of the last element in the #header div to zero to avoid overlapping margins (that is, unexplained whitespace between the div). If a DIV has a border around it, you do not have to set the margin to zero because the border also avoids margin overlap/padding:10px 0; /* Use padding instead of margins to keep elements away from the edges of the div/}. TWOCOLFIXRTHDR #sidebar1 {Float:right]/* Because this element is floating, you must specify a width of */width:2 00px; /* The actual width of this div, in addition to its width, includes padding and borders in standard browsers or in standard mode in Internet Explorer * * background: #EBEBEB; /* will display the background color, its width is equal to the length of the contents of the column, * * padding:15px 10px; }. TWOCOLFIXRTHDR #mainContent {margin:0 250px 0 0;/* The right margin of this div element creates a column at the bottom right of the page-the column space is preserved regardless of how much content is contained in the Sidebar1 Div. If you want to fill #sidebar1 white space with #mainContent div text when the content in the #sidebar1 ends, you can delete the margin. * * padding:0 20px; * Remember that padding is the space inside the Div box, and the margin is the space outside the Div box/}. TWOCOLFIXRTHDR #footer {padding:0 10px 0 20px;/* This fill will put the All elements are left-aligned. * * Background: #DDDDDD; }. Twocolfixrthdr #footer p {margin:0/* Sets the margin of the first element in the footnote to zero to avoid possible margin overlaps (that is, gaps between the div) * * padding:10px 0; /* Just as margins can result in white space, the padding on this element will also produce white space, but there will be no margin overlap problem/}. FLTRT {/* This class can be used to float elements in a page to the right. The floating element must precede the element on the page that is adjacent to it. * * Float:right; margin-left:8px; FLTLFT {/* This class can be used to make elements on the page float to the left/float:left; margin-right:8px; Clearfloat {/* This class should be placed on a div or break element, and the element should be the last element before the container that contains the float is closed * * * CLEAR:BOTH; height:0; font-size:1px; line-height:0px; --> </style><!--[if IE 5]> <style type= "TEXT/CSS" > * * put the CSS box model correction for IE 5* in this condition note * *. TWOC Olfixrthdr #sidebar1 {width:220px;} </style> <! [endif]--><!--[If ie]> <style type= "TEXT/CSS" >/* Please put all versions of IE CSS fixes in this conditional comment. Twocolfixrthdr #side bar1 {padding-top:30px;} . TWOCOLFIXRTHDR #mainContent {zoom:1;} /* The above dedicated zoom property for IE to provide the necessary to avoid errors haslayout * * * </style> <! [endif]--></pead> <body class= "Twocolfixrthdr" > <div id= "container" > <div id= "Header" > <p> title </p> <!--End #Header--></div> <div id= "sidebar1" > <p>sidebar1 content </p> <p> The background color shown on this div is just as wide as the content. If you prefer to use the dividing line and #mainContent div will always contain more content, place a border on the right edge of the #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" > <p> main Content & lt;/h1> <p>lorem ipsum dolor sit amet consectetuer adipiscing. 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> <p>h2 level title </p> <p>lorem ipsum dolor sit amet, consectetuer adi Piscing 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--></di V> <!--The element used to clear the float should follow #mainConteAfter the NT Div is forced #container div contains all the child floats--><br class= "clearfloat"/> <div id= "Footer" > <p> footnote </p > <!--end #footer--></div> <!--end #container--></div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
