tel: + 61 2 9267 4166
I have uploaded a tutorial for creating a CSS Two Column Template with a header and a footer. Click the image above to view the tutorial or download the template as a Zip file below:
http://www.enflexion.com.au/support/2columnleft/2columnleft.zip
The code below shows the full template with an internal page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hompeage</title>
<link rel="stylesheet" media="all" href="styles/styleone.css" type="text/css">
<link rel="stylesheet" media="print" href="styles/print.css" type="text/css">
<link rel="stylesheet" media="screen" href="styles/screen.css" type="text/css">
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<div id="maincontainer">
<div id="header"> </div>
<div id="menu">
<ul id="nav">
<li><a href="/index.shtml">HOME</a></li>
<li><a href="/company/index.shtml">COMPANY</a><ul>
<li><a href="/company/history.shtml">HISTORY</a></li>
<li><a href="/company/staff.shtml">STAFF</a></li>
<li><a href="/news/index.shtml">NEWS</a></li>
<li><a href="/employment/index.shtml">EMPLOYMENT</a></li>
</ul></li>
<li><a href="/services/index.shtml">SERVICES</a></li>
<li><a href="/clients/index.shtml">CLIENTS</a></li>
<li><a href="/contact/index.shtml">CONTACT</a></li>
</ul>
</div>
<a name="top"></a>
<div id="one">
<div id="advert"> </div>
<div id="advertside"> </div>
</div>
<div id="two">
<div id="box_one"> </div>
<div id="box_two"> </div>
<div id="box_three"> </div>
</div>
<br clear="all" />
<div id="footer"><div id="left"><a href="#top">^Return to Top</a></div>
<div id="right"><a href="/docs/copyright.shtml">Copyright</a> <a href="/docs/privacy.shtml">Privacy</a> <a href="/docs/legal.shtml">Legal</a></div></div>
</div>
</body>
</html>
How Sliced Bread Templates Work
Designing a web template or converting a design to use Sliced Bread is pretty easy. You just have to remember that Sliced Bread requires you to split up a webpage design into parts. There are three main parts to a design:
The Main Template which is common to the whole website is quite often the header and footer of a website, although your design will have whatever you need in the main template.
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<div id="maincontainer">
<div id="header"> </div>
<div id="menu">
<ul id="nav">
<li><a href="/index.shtml">HOME</a></li>
<li><a href="/company/index.shtml">COMPANY</a>
<ul>
<li><a href="/company/history.shtml">HISTORY</a></li>
<li><a href="/company/staff.shtml">STAFF</a></li>
<li><a href="/news/index.shtml">NEWS</a></li>
<li><a href="/employment/index.shtml">EMPLOYMENT</a></li>
</ul>
</li>
<li><a href="/services/index.shtml">SERVICES</a></li>
<li><a href="/clients/index.shtml">CLIENTS</a></li>
<li><a href="/contact/index.shtml">CONTACT</a></li>
</ul>
</div>
<a name="top"></a>
<$maincontent>
<br clear="all" />
<div id="footer"><div id="left"><a href="#top">^Return to Top</a></div>
<div id="right"><a href="/docs/copyright.shtml">Copyright</a> <a href="/docs/privacy.shtml">Privacy</a> <a href="/docs/legal.shtml">Legal</a></div></div>
</div>
Don't call the stylesheets, they are called when the page is assembled by Sliced Bread. Where the Section Template is inserted into the template use the code <$maincontent>.
Save this file as template.txt
Section Templates
The Section Templates which are the groups of pages that are uniquely linked together and those you want to have menu's automaticaly created for. Just think of the Section Template as like tags or chapters of a book.
Where the page content is inserted into the template use the code <$maincontent>.
Internal Page Section Template
<div id="main">
<div id="side">
<div id="sidemenu">
<ul>
<$menu>
</ul>
</div>
</div>
<div id="content">
<div id="crumbs">You are here » <a href="/index.shtml">Home</a> » <$title></div>
<$maincontent>
</div>
</div>
Homepage Section Template
<div id="one">
<div id="advert"><$maincontent></div>
<div id="advertside"> </div>
</div>
<div id="two">
<div id="box_one"> </div>
<div id="box_two"> </div>
<div id="box_three"> </div>
</div>
Then finally we have the unique page content which you manage in Sliced Bread and is totally unique.
Stylesheets
There are three stylesheets that are inserted into Sliced Bread:
screen.css - The styleshet called for web broswers, generally has all main strucural elements and anythingwe don't want when we print the page.
styleone.css - The common stylesheet across the website.
print.css - The stylesheet called when the page is printed.
Inserting section menus
Using Sliced Bread you can automatically inserts lists of pages within sections by using the code:
<$list> or <$menu>
<$list> inserts a full formed unordered list, wheras <$menu> inserts onlye the list items.
There are lots more advanced features in Sliced Bread but this is an introduction to designing a template for Sliced Bread.
Labels: CSS, Sliced Bread, Web Design
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
<ul id="nav">
<li><a href="/index.shtml">HOME</a></li>
<li><a href="/about/index.shtml">ABOUT US</a><ul>
<li><a href="/about/ourphilosophy.shtml">OUR PHILOSOPHY</a></li>
<li><a href="/about/methodologies.shtml">OUR METHODOLOGY</a></li>
<li><a href="/about/news/index.shtml">ENFLEXION NEWS</a></li>
</ul>
</li>
<li><a href="/packages/index.shtml">WEBSITES</a>
<ul>
<li> <a href="/packages/index.shtml">PACKAGE SOLUTIONS</a></li>
<li> <a href="/packages/quickstart.shtml">QUICK START PACKAGE</a></li>
<li> <a href="/packages/standard.shtml">STANDARD PACKAGE</a></li>
<li> <a href="/packages/business.shtml">BUSINESS PACKAGE</a></li>
<li> <a href="/packages/ecommerce.shtml">ECOMMERCE PACKAGE</a></li>
<li> <a href="/packages/faqs/index.shtml">PACKAGES FAQ</a></li>
</ul>
</li>
<li><a href="/services/index.shtml">SERVICES</a>
<ul>
<li><a href="/services/design.shtml">DESIGN & DEVELOPMENT</a></li>
<li><a href="/services/consulting.shtml">CONSULTING & ADVICE</a></li>
<li><a href="/services/project.shtml">PROJECT MANAGEMENT</a></li>
</ul>
</li>
<li><a href="/products/index.shtml">PRODUCTS</a>
<ul>
<li><a href="/products/sliced/index.shtml">SLICED BREAD CONTENT MANAGEMENT</a></li>
<li><a href="/products/intranet/index.shtml">INTRANET IN A BOX</a></li>
<li><a href="/products/sliced/commerce/shopping.shtml">SHOPPING CART</a></li>
</ul>
</li>
<li><a href="/research/index.shtml">RESEARCH</a>
<ul>
<li><a href="/research/index.shtml">WEBFLEXION OVERVIEW</a></li>
<li><a href="/research/archive.shtml">ARCHIVED ARTICLES</a></li>
<li><a href="/research/blog/index.shtml">TECHNOLOGY BLOG</a></li>
</ul></li>
<li><a href="/clients/index.shtml">CLIENTS</a>
<ul>
<li><a href="/clients/testimonials.shtml">TESTIMONIALS</a></li>
<li><a href="/clients/case.shtml" >CASE STUDIES</a></li>
</ul></li>
<li><a href="/contact/index.shtml">CONTACT</a></li>
</ul>
#nav, #nav ul {
float:left;
list-style: none;
background: #5fc601;
font-weight: bold;
padding: 0px;
margin: 0;
font-size:13px;
font-family: arial;
}
#nav a {
display: block;
width: 72px;
color: #fff;
text-decoration: none;
padding: 8px;
font-family: arial;
text-align: center;
border-right: 2px solid #fff;
height: 14px;
}
#nav li {
float: left;
padding: 0;
width: 90px;
margin-right: 0px;
font-family: arial;
}
#nav li ul {
position: absolute;
left: -1000px;
height: auto;
width: 150px;
font-weight: bold;
border: 1px solid #fff;
margin: 0;
}
#nav li li {
width: 150px;
font-size:11px;
border-top: 1px solid #fff;
padding: 0;
margin:0;
}
#nav li ul a {
width: 140px;
height: auto;
font-size:11px;
padding: 5px;
font-family: arial;
text-align: left;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: #ad0925;
}
You can see the entire code in operation here at the enflexion Website Design website.
Labels: CSS, Javascript, Menus, Web Design
Labels: CSS, Javascript, Web Design
<script>
(function(){
/*Use Object Detection to detect IE6*/
var m = document.uniqueID /*IE*/
&& document.compatMode /*>=IE6*/
&& !window.XMLHttpRequest /*<=IE6*/
&& document.execCommand ;
try{
if(!!m){
m("BackgroundImageCache", false, true) /* = IE6 only */
}
}catch(oh){};
})();
</script>Labels: CSS, IE6 Bug, Web Design
|
Address:
St James Trust, Suite 102, Level 1 Sydney NSW 2000 Tel: (02) 9267 4166 Fax: (02) 9267 0422 Email: info@enflexion.com.au |
