Example Static HTML FIle
This appendix shows an example static HTML file that is ready to be uploaded into Squiz Matrix. Placeholders (i.e. HTML comments and dummy content) are used within the design to indicate where the Squiz Matrix design tags need to be placed.
<!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" xml:lang='en' lang='en'>
<head>
<!-- Global Variables -->
<link href="mysource_files/style.css" rel="stylesheet" type="text/css" />
<!-- Declared Vars to go here -->
<style type="text/css" media="all">
#breadcrumb { background: url(mysource_files/breadcrumb_bg.jpg) left top no-repeat; }
#breadcrumb a { background: url(mysource_files/breadcrumb_divider.jpg) right top no-repeat; }
#page-content { background: url(mysource_files/content_page_edges.gif) top left no-repeat; }
#promo-wrapper .content { background: url(mysource_files/content_page_top.gif) left bottom no-repeat; }
#header-wrapper { background: url(mysource_files/header_bg.jpg) repeat-x top left; }
#section-nav ul li ul li.current a { background: url(mysource_files/menu_bullet_arrow.gif) 0 10px no-repeat; }
#main-nav a { background-image: url(mysource_files/nav_tab_left_off.gif); }
#main-nav li:hover a { background-image: url(mysource_files/nav_tab_left_on.jpg); }
#main-nav ul li.current { background-image: url(mysource_files/nav_tab_right_on.jpg); }
#main-nav li { background-image: url(mysource_files/nav_tab_right_off.gif); }
#promo-wrapper { background: url(mysource_files/promo_inside_bg.jpg) repeat-x top left; }
</style>
<!-- Metadata lives here -->
</head>
<body>
<div id="header-wrapper">
<div id="header">
<div id="main-nav">
<!-- Main Navigation Menu -->
</div>
<div id="promo-figures"><img src="mysource_files/promo_figures.png" style="padding-top: 10px; padding-left: 250px"/></div>
</div>
</div>
<div id="promo-wrapper">
<div class="content"><img src="mysource_files/squiz-logo.png" style="padding-top: 10px;" id="squiz-logo"/></div>
</div>
<div id="page-content">
<div id="breadcrumb">
<!-- Asset Lineage to go here -->
<div><MySource_PRINT var="asset_short_name" /></div>
</div>
<!-- Main Menu -->
<div id="section-nav">
<!-- main navigation items -->
<a href="#" class="">Main Menu Item</a>
<!-- Sub navigation items -->
<div class="subnav"><a href="#" class="">Sub Item</a></div>
</div>
<!-- End Main Menu -->
<div id="body-content">
<div id="right-column">
<h2>Login</h2>
<!-- Login Section -->
<h2>Search</h2>
<!-- Search Section -->
<!-- Nest right column area -->
</div><!-- end right-col -->
<div id="main-column">
<strong>History:</strong>
<!-- Access History -->
<h1><MySource_PRINT var="asset_name" /></h1>
<!-- Design Body -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis
pellentesque nunc et pharetra. Suspendisse vehicula turpis ac orci interdum
mollis. Vestibulum malesuada, urna sed pharetra suscipit, enim est placerat
mauris, vitae elementum nunc dui quis purus. Suspendisse suscipit leo ut mi
consectetur malesuada. Sed tincidunt erat ac massa imperdiet at tristique sem
egestas. Maecenas vestibulum, elit ac interdum vulputate, lectus magna tempus
tortor, ut malesuada nunc lorem ut dolor. Nunc orci quam, aliquam eu rhoncus
a, congue et enim. Phasellus lacus turpis, adipiscing ut tincidunt in, aliquam id
orci. Vivamus ullamcorper, ipsum quis tempus sagittis, mi risus placerat risus,
quis volutpat eros nisi vel nunc. Aenean convallis ligula vel arcu blandit
imperdiet. Praesent id justo ut lacus sodales ornare. Vestibulum sit amet auctor
ipsum. Duis volutpat, lacus hendrerit vulputate convallis, ipsum nunc euismod
ante, sed convallis justo tellus eleifend ipsum. </p>
<div> </div>
<!-- Show If to go here -->
</div>
</div>
</div>
<div id="footer">
<p class="right">
Last Updated: <!-- Last updated design area to go here-->
</p>
<p>Copyright © 2010 Squiz Pty Ltd<br/>
<!-- Constant area buttons to go here -->
<a>Privacy Policy</a>
|
<a>Copyright</a>
</p>
</div>
</body>
</html>