| 1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
| 2 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
| 3 |
<head>
|
| 4 |
<title tal:content="head_title">andreas01</title>
|
| 5 |
<tal:block condition="php:0">
|
| 6 |
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
|
| 7 |
<meta name="description" content="Your description goes here" />
|
| 8 |
<meta name="keywords" content="your,keywords,goes,here" />
|
| 9 |
<meta name="author" content="Your Name / Original design: Andreas Viklund - http://andreasviklund.com/" />
|
| 10 |
<link rel="stylesheet" type="text/css" href="andreas01.css" media="screen,projection" />
|
| 11 |
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
|
| 12 |
</tal:block>
|
| 13 |
${head}
|
| 14 |
${styles}
|
| 15 |
</head>
|
| 16 |
|
| 17 |
<body><div id="wrap">
|
| 18 |
|
| 19 |
<div id="header">
|
| 20 |
<h1 tal:condition="site_name"><a tal:attributes="href base_path; title php:t('Home')" tal:content="site_name">andreas01</a></h1>
|
| 21 |
<p><strong tal:condition="site_slogan" tal:content="site_slogan">"I can see you fly. You are an angel with wings, high above the ground!"</strong></p>
|
| 22 |
<div style="float:right;" tal:content="php:theme('links', secondary_links)">Link | Link</div>
|
| 23 |
</div>
|
| 24 |
|
| 25 |
<a tal:condition="logo" tal:attributes="href base_path; title php:t('Home')"><img id="frontphoto"
|
| 26 |
tal:attributes="src logo; alt php:t('Home')" width="760" height="175" /></a>
|
| 27 |
|
| 28 |
<div id="sidebar_left">
|
| 29 |
<div id="avmenu">
|
| 30 |
<h2 class="hide">Menu:</h2>
|
| 31 |
<ul tal:condition="primary_links" tal:replace="php:theme('menu_links', primary_links)">
|
| 32 |
<li><a href="#">Welcome!</a></li>
|
| 33 |
<li><a href="#">Current events</a></li>
|
| 34 |
<li><a href="#">Downloads</a></li>
|
| 35 |
<li><a href="#">Art gallery</a></li>
|
| 36 |
<li><a href="#">Collections</a></li>
|
| 37 |
<li><a href="#">Litterature</a></li>
|
| 38 |
<li><a href="#">Newsletter</a></li>
|
| 39 |
</ul>
|
| 40 |
</div>
|
| 41 |
|
| 42 |
<div class="announce" tal:replace="sidebar_left">
|
| 43 |
<h3>Latest news:</h3>
|
| 44 |
<p><strong>Nov 28, 2005:</strong><br />
|
| 45 |
Updated to v1.3, fixed links.</p>
|
| 46 |
<p><strong>Oct 21, 2005:</strong><br />
|
| 47 |
Updated to v1.2, with minor adjustments and corrections.</p>
|
| 48 |
<p><strong>June 25, 2005:</strong><br />
|
| 49 |
v1.0 released on OSWD.org.</p>
|
| 50 |
<p class="textright"><a href="#">Read more...</a></p>
|
| 51 |
</div>
|
| 52 |
</div>
|
| 53 |
|
| 54 |
<div tal:condition="sidebar_right" id="sidebar_right" tal:content="sidebar_right">
|
| 55 |
<h3>More info:</h3>
|
| 56 |
<p>This is the third column, which can be used in many different ways. For example, it can be used for comments, site news, external links, ads or for more navigation links. It is all up to you!</p>
|
| 57 |
|
| 58 |
<h3>Links:</h3>
|
| 59 |
<p>
|
| 60 |
- <a href="http://andreasviklund.com/templates">Free website templates</a><br />
|
| 61 |
- <a href="http://openwebdesign.org/">Open Web Design</a><br />
|
| 62 |
- <a href="http://oswd.org/">OSWD.org</a><br />
|
| 63 |
- <a href="http://validator.w3.org/check/referer">Valid XHTML</a><br />
|
| 64 |
- <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
|
| 65 |
</p>
|
| 66 |
|
| 67 |
<h3>Version:</h3>
|
| 68 |
<p>andreas01 v1.3</p>
|
| 69 |
</div>
|
| 70 |
|
| 71 |
<div id="content">
|
| 72 |
<div tal:condition="exists:breadcrumb" tal:replace="breadcrumb" />
|
| 73 |
<h2 tal:content="title">Welcome to andreas01!</h2>
|
| 74 |
<div class="tabs" tal:content="tabs" />
|
| 75 |
<div tal:condition="exists:help" tal:replace="help" />
|
| 76 |
<div tal:condition="exists:messages" tal:replace="messages" />
|
| 77 |
${content}
|
| 78 |
<tal:block condition="php:0">
|
| 79 |
<p>This is a very simple but also very useful standard web layout: a fixed-width 3-column page with header and footer. There are thousands of variations of this layout, and this is no perfect solution. But it should be a great starting layout that you can customize in many ways and easily give a unique touch to. The layout is made of valid XHTML 1.1 and CSS only, and it has no tables. If you remove all CSS, the page still works great in text mode. I've tested it on my old mobile phone, and it works like a charm!</p>
|
| 80 |
|
| 81 |
<img src="test.jpg" height="100" width="125" class="left" alt="Example content image: left-align" /><p>The layout features one big image (front.jpg) which you can easily replace with your own header. The default image shows a snowy street in Porjus (northern Sweden), where I grew up. The haiku can easily be replaced with an ad banner or a site slogan. There are also CSS classes for aligning text paragraphs and images, and a print stylesheet that you can customize in any way you want to. As default, navigation menus and images are removed, and only the main content text is printed.</p>
|
| 82 |
|
| 83 |
<h3>Submenu example</h3>
|
| 84 |
<p>The main navigation menu is an unsorted list, where each list item has been styled to be a button. There are lots of ways to style lists for navigation, but I've kept things simple for this layout. Adding "that little extra" is up to you! </p>
|
| 85 |
|
| 86 |
<h2>Open source web design</h2>
|
| 87 |
<img src="test.jpg" class="right" height="100" width="125" alt="Example content image: right-align" /><p>If you like this layout and would like to use it in any way, you are free to do so. All I ask for is that you leave the "Design by Andreas Viklund" link in the footer of the site. If you would like to remove that line, or if you are interested in professional services that are related to webdesign or this layout (such as custom design, branding, scripting or programming), please contact me through <a href="http://andreasviklund.com/contact">my website</a> for more information!</p>
|
| 88 |
<p>Good luck with your new website!</p>
|
| 89 |
</tal:block>
|
| 90 |
</div>
|
| 91 |
|
| 92 |
<div id="footer" tal:content="footer_message">
|
| 93 |
Copyright © 2005 Your Name. Design by <a href="http://andreasviklund.com">Andreas Viklund</a>.
|
| 94 |
</div>
|
| 95 |
${closure}
|
| 96 |
</div>
|
| 97 |
</body>
|
| 98 |
</html>
|
Parent Directory
| 
Revision Log
| 
Revision Graph