Chapter 4, Building Websites with ExpressionEngine

Chapter 4: Creating an Easy to Maintain Website

Chapter 4 walks you through the concept of using a weblog to build an entire website, including a menu and 404 pages.

Updates/Errata

There are no updates or errata at this time.

Template Downloads

toast/index

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Toast for Sale: {exp:channel:entries channel="toastwebsite" limit="1" disable="categories|custom_fields|member_data|pagination|trackbacks"}{title}{/exp:channel:entries}</title> <link rel='stylesheet' type='text/css' media='all' href='{path=toast/toast_css}' /> <style type='text/css' media='screen'>@import "{path=toast/toast_css}";</style> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <h1>Toast for Sale!</h1> <h2>{exp:channel:entries channel="toastwebsite" limit="1" disable="categories|custom_fields|member_data|pagination|trackbacks"}{title}{/exp:channel:entries}</h2> </div> <div id="content"> {exp:channel:entries channel="toastwebsite" limit="1"} {if toastwebsite_introduction} <div class="contentinner">{toastwebsite_introduction}</div> {/if} {if toastwebsite_heading1} <h3>{toastwebsite_heading1}</h3> {/if} {if toastwebsite_text1} <div class="contentinner">{toastwebsite_text1}</div> {/if} {if toastwebsite_heading2} <h3>{toastwebsite_heading2}</h3> {/if} {if toastwebsite_text2} <div class="contentinner">{toastwebsite_text2}</div> {/if} <p class="footnote">Written by {author} on {entry_date format="%F %j%S"}</p> {/exp:channel:entries} </div> <div id="menu"> {embed="toast/.menu"} </div> </body> </html>

toast/toast_css

body{ background: #8B4513; font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 5% auto; width: 770px; } a{ color: red; text-decoration: none; font-weight: bold; } a:hover{ border-top: 1px solid #FFEFD5; border-bottom: 1px solid #FFEFD5; } a:visited{ color: #A52A2A; } #header{ background: url('{site_url}images/square.png') no-repeat top left; background-color: #DEB887; height: 151px; margin-bottom: 30px; } #header h1{ color: black; font-family: Arial, Helvetica, sans-serif; font-size: 300%; font-weight: bold; text-align: left; margin-top: 25px; margin-left: 225px; } #header h2{ color: #8B4513; font-family: Arial, Helvetica, sans-serif; font-size: 200%; font-weight: bold; text-align: left; margin-left: 225px; } #content{ font-size: 80%; width: 70%; float: left; } #content h3{ color: #F0E68C; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #content p{ margin: 1%; } #menu{ width: 25%; float: right; margin-top: 50px; border: 2px dotted #FFEFD5; background: #DEB887; font-size: 70%; } #menu h4{ border-bottom: 1px solid #FFEFD5; margin: 10px; } #menu ul{ list-style: none; } #menu ul li{ margin-left: -25px; padding-left: -25px; margin-bottom: 5px; } .contentinner{ background: #DEB887; border: 2px dotted #FFEFD5; } .footnote{ color: #F0E68C; font-size: 75%; text-align: right; }

toast/404

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Toast for Sale: Page not Found</title> <link rel='stylesheet' type='text/css' media='all' href='{path=toast/toast_css}' /> <style type='text/css' media='screen'>@import "{path=toast/toast_css}";</style> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <h1>Toast for Sale!</h1> <h2>Page not Found (404)</h2> </div> <div id="content"> <h3>We're Sorry</h3> <div class="contentinner"><p>The page you were looking for does not exist. There may be a spelling mistake in the URL in the address bar, or we may have removed this page inadvertently. Please use the menu on the right to visit a page that does exist.</p></div> </div> </body> </html>

toast/.menu

<h4>Menu</h4> <ul> <li> <a href="{site_url}" title="Welcome page ">Welcome</a> <div>Introduction to our business</div> </li> <li> <a href="{site_url}about" title="About our company ">More About our Company</a> <div>Is online toast the best thing since sliced bread? We think so</div> </li> <li> <a href="{site_url}news" title="News from the President">News from the President</a> <div>The latest news our President deems worthy of sharing</div> </li> </ul>

leonardmurphy.com

Building Websites with ExpressionEngine 1.6

Chapter 4: Creating an Easy to Maintain Website

Updates/Errata

Template Downloads

toast/index

toast/toast_css

toast/404

toast/.menu

Relevant Links

Book Chapters

Menu

Buy My Book!