|
David Nannini
post date:
2010-09-29 19:56:16
|
Hi extendstudio,
I use FlexyLayouts with DW CS4 for MAC OS X 10.6.4.
I tried all the categories of templates, I saw that all templates are generated many div.
This is a code of template Category Basic -> 3 column fixed, header and footer.
Can I get a cleaner code?
Sorry for my english.
<!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>Documento senza titolo</title>
<link href="../includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../includes/CSSLayouts/debug_plus.js"></script>
<link href="../includes/CSSLayouts/PageLayout5.css" rel="stylesheet" type="text/css" />
<link href="../includes/CSSLayouts/PageLayout5_user.css" rel="stylesheet" type="text/css" />
</head>
<body class="PageLayout5_body_design">
<div class="PageLayout5">
<!-- (CSSLayouts Begin) #PageLayout5 #build_version=1.0.258;pack=Standard;category=Page;layout=;layoutType=page;scheme=delicious;cssSource=file;assets=;halign=center;minwidth=960px;maxwidth=960px;width=960px;bc=Page;bl=threecolumnsfixedhf-->
<div class='cssLO PageLayout5_wrapper_layout'>
<div class='wrapper cssLI PageLayout5_wrapper_design'>
<div class='cssLO PageLayout5_header_layout'>
<div class='header cssLI PageLayout5_header_design'><!-- header Content Starts Here --><a href="#"><div style="border: 1px solid Black; background-color: #CCC;text-align:center;color: Black;font-weight: bold;font-size: 16px;font-family:Arial, Helvetica, sans-serif; width:178px;height:98px;"><br />Logo (180x100)</div></a> <!-- header Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout5_content_layout'>
<div class='content cssLI PageLayout5_content_design'>
<div class='cssLO PageLayout5_row_2_xtdalignwrapper_layout'>
<div class='row_2_xtdalignwrapper cssLI PageLayout5_row_2_xtdalignwrapper_design'>
<div class='cssLO PageLayout5_leftcolumn_layout'>
<div class='leftcolumn cssLI PageLayout5_leftcolumn_design'>
<div class='cssLO PageLayout5_verticalnav_layout'>
<div class='verticalnav cssLI PageLayout5_verticalnav_design'><!-- verticalnav Content Starts Here -->
<div class="verticalMenu" style="border-top:1px solid #333; width:100%;"> <a class="menuItem" style="border-bottom:1px solid #333; display:block; padding:5px;" href="#firstlink">Link one</a> <a class="menuItem" style="border-bottom:1px solid #333; display:block; padding:5px;" href="#secondlink">Link two</a> <a class="menuItem" style="border-bottom:1px solid #333; display:block; padding:5px;" href="#thirdlink">Link three</a> <a class="menuItem" style="border-bottom:1px solid #333; display:block; padding:5px;" href="#fourthlink">Link four</a> <a class="menuItem" style="border-bottom:1px solid #333; display:block; padding:5px;" href="#fifthlink">Link five</a> </div>
<!-- verticalnav Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout5_leftcontent_layout'>
<div class='leftcontent cssLI PageLayout5_leftcontent_design'><!-- leftcontent Content Starts Here -->
<p>The left sidebar has been populated with a basic CSS vertical menu. All the CSS code for the navigation can be found inside the color scheme css file. </p>
<p>For better looking, customizable Flash menus, check out our extension <a href="http://www.extendstudio.com/">Creative DW Menus</a></p>
<!-- leftcontent Content Ends Here -->
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO PageLayout5_centercolumn_layout'>
<div class='centercolumn cssLI PageLayout5_centercolumn_design'><!-- centercolumn Content Starts Here -->
<h1>Template details (h1)</h1>
<h2>basic layout, 3 column, fixed with header and footer (h2)</h2>
<p>This layout has a basic width of 960 pixels. Each sidebar has a width of 180 pixels and the center column has 600 pixels.</p>
<h2>inserting content (h2)</h2>
<p>You can insert your content inside the layout using both design and code views.</p>
<p> In design view you just need to click on the container you want to change, delete the sample content (if any) and insert your content. </p>
<p>In code view you can easily identify the divs using the comments placed by the extension. This way you know which divs are not supposed to be edited and in which ones you can place your code.</p>
<h2>edit, insert content, edit again, and again... (h2)</h2>
<p>The layout can be modified using the Flexi CSS editor at all times. Even after you have inserted your own content, you can edit the layout without losing the content. If you want to modify the layout, the interface will ask you what you want to do with the content of the divs you want to replace, move it to another div or replace it.</p>
<h2>more info and help (h2)</h2>
<p>Check out the product page for samples, updates and tutorials: <a href="http://www.extendstudio.com/product/tableless-css-layouts-for-dreamweaver.html">http://www.extendstudio.com/product/tableless-css-layouts-for-dreamweaver.html</a></p>
<p>Help and support: <a href="http://www.extendstudio.com/forum.html">http://www.extendstudio.com/forum.html</a></p>
<!-- centercolumn Content Ends Here -->
</div>
</div>
<div class='cssLO PageLayout5_rightcolumn_layout'>
<div class='rightcolumn cssLI PageLayout5_rightcolumn_design'><!-- rightcolumn Content Starts Here -->
<h3>sidebar behavior</h3>
<p>The height of both sidebars is different than the height of the central column. Because of this, the background of the sidebars won't go all the way down to the footer. If you want to change this behavior, use the expand feature from the editor and set the minimum height of the central container.</p>
<!-- rightcolumn Content Ends Here -->
</div>
</div>
<div class='cssLClearC'></div>
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class='cssLO PageLayout5_footer_layout'>
<div class='footer cssLI PageLayout5_footer_design'><!-- footer Content Starts Here --><!-- footer Content Starts Here -->
<p>The height of the cells will auto-expand if you have more content. You can add more rows and columns to any design using the Flexi CSS Layouts</p>
<!-- footer Content Ends Here -->
</div>
</div>
<div class='cssLClearR'></div>
</div>
</div>
<div class="cssLClearL"></div>
<!-- #PageLayout5 (CSSLayouts End) -->
</div>
</body>
</html>
|
|
|
Cristian Dorobantescu [Extend Studio]
post date:
2010-09-30 00:35:35
|
Hi David,
Because the Flexi CSS Layouts let's you edit the templates/layouts anyway you like (adding more cells, changing width etc) and it should work the same on all browsers there is indeed more code than if you would code by hand.
However, these are just simple DIVs with CSS - shouldn't affect the loading time of the page.
Thanks,
Cristian.
|
|
