cuLTURE cHANNEL Webtech Website Templates 101

cULTURE Style Home Style Guide Templates Simple 100% Table Deprecated HTML Tags Best Practice Design External CSS	cULTURE cHANNEL Webtech \| Website Templates 101

	These are some examples of content layout on a webpage using html Tables, styles sheets (CSS) and a few standard tricks. The term "templates" is used here as meaning "a master formatted page that can be used as a foundation for a site's webpages". Dreamweaver and other web publishing packages have their own version of a template (e.g. mypage.dwt) and this is separate and in addition to the templates discussed here.
	This page - and the templates - are simplified so that you can follow the html code more easily. The fonts, general layout, nav, etc. are unfinished - that's your bit! Modify the template to suit.
	This format is current best practise web design. It uses a central content Table to hold the text and images, nested inside a "master" Table set to 100% browser width and height.
	To view html source of this webpage, in your browser go to View > Source and the source view box appears - as a text (.txt) file that can be saved. Double click on the blue menu bar of the source view box to expand.
	Now, from the source view box menu, select Format and ensure "word wrap" is ticked. You're ready to go; to analyse the code.
	There's some setup info and site examples below. There's many more examples on the web and of course most good open source software (OSS) content management systems (CMS) use this standard format.
	The Example Templates
	There is one example of a simple 100% Table and three webpage templates: this template with comments in the html, a template using deprecated html tags (tags that are usable but being replaced), and a best practice template using CSS.
	Template with comments (this page)
	This template uses a "master" one cell grey Table and has a white Table nested in its centre, dividing the two grey "wings" at the sides.
	The master Table is set to 100% width with a grey background colour. The "content" Table is set to 725 pixels width, centred, with a white background that overrides (and overwrites) the master grey Table colour.
	The content Table stays formatted and centred - no matter how wide the user's browser is set or how wide the user's display screen (e.g. see how bad left-positioned sites look on large monitors).
	The content Table has 2 columns and a number of rows in the second column. The left column is set to 125 width for navigation elements. The right table contains the content.
	To tuck the master Table neatly top and left in the browser window (with no gap) set to the magic (deprecated) code:
	<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> or you can set a similar thing in the CSS (using margin:0 on a generic html body style)
	(To see this in its simplest form, here's a page with the Table set to width 100% and height 100% of browser window).
	Using Templates
	The white content Table contains all site content.
	Sadly, once the master Table is set to 100% height, a nested (inside another table) or sub-Table can't then have a 100% height. To get the content Table to fit to browser bottom requires tricks (e.g. extra space or cells at Table bottom, or adding a one pixel "shim" gif set to fill the area, etc.. These tricks will be detailed at a later time, search online in the meantime.
	Now you need a good layout for your content Table. First design your common or shared page layout for the main site pages using the template, and adding the common nav bar, logo, copy, images, etc. No need to use content specific or unique to a page in a template!
	Once you have a good "master template" layout with the elements that will appear on all pages, and before you put in any content specific or unique to a page (e.g. page html <title>), save the master page as your "template" (e.g. save as mytemplate.htm).
	Note that the home page(the index.htm page), like the front page of a book or magazine, can have quite a different layout to the layout "inside", or one those pages linked to the home page.
	Then create and name each new page from the template, using Save As.. (e.g. newfilename.htm). Alternatively, (in Dreamweaver or Front Page) you can create their special Templates (saving as mytemplate.dwt - see manual for details on creating and using proprietary versions of templates)
	A version of this template is also available in Dreamweaver - from File > New > Page Designs (CSS). For most purposes this is the best starting point! It is the basic design used for the main macromedia/adobe website (see below).
	Now, with the template page as your guide, all your webpages will have consistent layout, and elements won't jump about as you click between pages.
	You can also add a fade or background image to the master Table (the grey "wings" areas at either side), with the fades done in CSS code (e.g. Macromedia/Adobe {note: advanced site use of multiple CSSs!} and Gleebooks), or designs can be added by using a background image that then "tiles" or repeats. e.g. Serpent, Capital.
	To see a site's CSS, view html source and locate the style sheet link path, then copy and paste the link into your browser following the main URL (e.g. http://www.website.com/styles/my.css). You can save this CSS file. modify and use it. Many blog and larger content management systems (CMSs) such as Mambo, Typepa d or Postnuke use this layout standard.
	Almost any design element (colour, borders, Tables, position, etc) can now be handled by CSS.
	However use of sophisticated CSS functions is difficult, requiring high level skills. Because of this most site designers use a hybrid or mixture of older Table tags and newer CSS formatting features.
	CSS editors are appearing, and will one day be part of editors such as Dreamweaver. Some are WYSIWYG and these will revolutionise web design in 2007 and 2008.
	See web search for more details on CSSs. And the Zen Garden of CSS.

	cULTURE cHANNEL Webtech