Designing Web Templates for Sliced Bread
Download Project Files
In this tutorial we have designed a basic centred template with a left hand menu and a block out homepage. The template has a footer, header an accessible CSS styled Drop Down Menu, and a CSS side menu. The template uses only CSS for formatting and has been tested for IE6, IE 7, FireFox, Safari and Opera.
Click the image to view the template in a web browser.
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>Section templates do not have to be the same as each other and in fact they are extremely powerful when used well, for example the Hompage design uses a totally different Section Template. Also by using Section Templates you can'lock' casual users out of parts of the page so they can only edit the content you as a designer want them to.
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
at
1:24 PM
2 Comments:
ITemplatez.com offers professional web templates,css templates,professional templates,psd templates, flash templates ,swish templates, dreamweaver templates, and other web design products available for immediate download.
Thanks for the templates....
Post a Comment
Links to this post:
Create a Link
<< Home