What does SiteGrinder CSS & HTML look like?
SiteGrinder Output Explained.
The HTML.
SiteGrinder HTML is all XHTML 1.1 compliant. XHTML 1.1 is the latest standard for HTML and browsers, but unlike previous standards which added more and more features and only the latest browsers could support them, XHTML 1.1 is the opposite. It is the standardization of core HTML syntax with very strict definitions on what sort of HTML is acceptable. Therefore, XHTML 1.1 runs in more browsers, not fewer. Every modern browser (Netscape, Internet Explorer, Safari, Opera, Firefox, Mozilla, Conquest) will correctly display SiteGrinder pages. Even older versions of these same browsers (Internet Explorer 4, Netscape 6, Opera 5, for example) will display SiteGrinder pages correctly.
Separating Design from Content
One of the Holy Grails of HTML production is to separate design from content. This means that SiteGrinder outputs into the HTML file only the actual content of the page - it's text, with as little other markup as possible.The details of layout, fonts, and other details of the visual display of the content are placed into the CSS file. Ideally, a web page created this way can be converted to have a completely different look with a trivial amount of effort.
For this reason SiteGrinder HTML tends to look like this:
<div id="textcontainer"><p>Try our new <span>Bacon Bites</span>. You won't regret it.</p></div>
As opposed to this:
<div id="textcontainer" style="position:absolute;z-index:4; left:100px; top:140px; width:400px; height 600px; overflow:scroll; margin-left:2px; margin-top:10px; margin-right: 10px; margin-bottom:5px;"><p style="font-variant:normal; font-size:12px/18px; font-family:Verdana; text-align:center">Try our new <span style="font-variant:small-caps; font-weight:bold">Bacon Bites</span> You won't regret it.</p></div>
We feel that the former is much easier to read and edit, and the details of layout, fonts, text styling are relegated to the CSS file. Additionally, SiteGrinder outputs only one CSS file for all of your pages, collecting and re-using design details across many pages.
Where are the <img> tags?
When translating a web page design from Photoshop most graphics in a Photoshop file are design elements and not content elements. Therefore SiteGrinder Basic, in the interest of preserving the separation between design and content, places all images into the CSS portion of the web page, leaving them out of the HTML. Thus, there are no <img> tags in the standard SiteGrinder Basic output. This is a boon to anyone viewing your web page from a mobile phone or similar limited-display device. SiteGrinder 2 Pro allows users to designate certain content layers to use the <img> tag with the -img hint.
Javascript?
SiteGrinder employs javascript for performing popups, i.e. for making an element newly appear or disappear from the page. Hierarchical popup menus, obviously, fit this description. Additionally, the Open Link In New Window is achieved through javascript to maintain XHTML 1.1 compliance. Also, SiteGrinder uses javascript to generate the HTML for Flash and QuickTime movies to avoid the dreaded IE double click problem that was introduced with their loss in the Eolas patent suit. But that is it. All other page effects are achieved with normal CSS. Rollover effects of graphic buttons, text buttons and text menus are achieved with no javascript. Likewise, page centering and alignment is done without using any javascript.
Therefore, most SiteGrinder created pages will not use any javascript at all.
Anatomy of a SiteGrinder HTML File.
| HTML | Analysis |
|---|---|
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> |
Introduces this web page as XHTML 1.1 |
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="generator" content="SiteGrinder 2 http://www.medialab.com/sitegrinder" /> <title>Events</title> <link rel="stylesheet" type="text/css" media="screen" href="common.css"></link> <script type="text/javascript" src="popmenu.js"></script> </head> | <head> section of document. After some basic document information we have its title, and inclusions for the CSS stylesheet and javascript file, if needed. |
|
<body>
|
Begin the main body of the document. Note that the first <div> tag called background is open. It is closed at the end of the document. If anything besides left alignment is used, the entire document will be nested into the first <div>. These <div> tags with ids only are document placeholders for graphic elements. Their id names are derived from the original Photoshop layer name. There is not much here to edit. If you wished to alter any of these items, do so in the CSS file. |
|
<div id="joinpopup" class="PMjoinbutton"></div> <div id="mapspopup" class="PMmapsbutton"></div> <div id="historypopup" class="PMhistorybutton"></div> <div id="eventspopup" class="PMeventsbutton"></div> |
As you might guess from their ids, these are popup elements. The class name indicates which button will cause them to appear. Again, there is nothing really very editable here. |
<div id="joinbutton"><a href="join.html"></a></div> <div id="masterbutton"><a href="master.html">Master</a></div> <div id="teachersbutton"><a href="teachers.html"><ins>Teachers</ins></a></div> <div id="eventsbutton"><a href="events.html" onmouseout="P2H_StartClock();" onmouseover="P2H_Menu('PMeventsbutton', 0, 0);"><ins>Events</ins></a></div> |
These four items to the left are each buttons. The first, since it has no text content within the <a> tag is a graphic button. The second is a text button. The third a hybrid button. And the fourth is a hybrid button that triggers a popup or menu. The text displayed on the text or hybrid buttons can be edited here, although the size of the container is set in the CSS. |
|
<div id="eventshaslinks"> <p>Dear Members and Friends of Tango Colorado,</p> <p>This Tuesday night at the practica we look forward to welcoming Tomas Howlin, a fabulous teacher from Buenos Aires, now living in Montreal. Brought to us by Dance of the Heart, he will begin a series of classes and privates beginning on Wednesday. We are pleased that he's planning to come direct from the airport to meet and greet old friends and make new ones at the practica. Welcome "home," Tomas!</p> <p>Another busy month is coming to an end. I would like to thank Chas Gale for teaching the fundamental class at the Denver Practica, Tom Stermitz for teaching the fundamental class at the Boulder Practica and Nick Jones for leading the guided practica in Denver this month.</p> <p>We value you and appreciate that you take the time to share your dancing skills with us. If you have not had the opportunity to take lessons from these fantastic teachers you still have this week to do so.</p> <p>The DJ at the Denver practica this week will be Chas Gale and in Boulder the DJ will be Robert Dodier.</p> <p>If you have an item for the calendar please send it to me by Saturday, Charlie Hymer, Vice President TC </p> <p><span style="color:#2916E5; text-decoration:underline; padding-top:0px;">someone@somewhere.net</span> 555-555-5555 (cell)</p> <p>Current week</p> <p>Coming up for OCTOBER 2004</p> <p>Coming up for NOVEMBER 2004</p> </div> |
Here is the main text content of this page. It is very editable. |
|
<div id="bottommenu"> <ul> <li style="width:109px; border-left:0px;"><a href="events.html" style="color:#B8071A; background-color:#D6CD2E;">Events </a></li> <li>|</li> <li style="width:102px;"><a href="join.html"> Join </a></li> <li>|</li> <li style="width:125px;"><a href="history.html"> History </a></li> <li>|</li> <li style="width:131px;"><a href="teachers.html"> Teachers </a></li> <li>|</li> <li style="width:89px;"><a href="djs.html"> DJ’s</a></li> <li>|</li> <li style="width:102px;"><a href="maps.html"> Maps </a></li> <li>|</li> <li style="width:96px;"><a href="index.html"> Home</a></li> </ul> </div> </div> </body> </html> |
This is a text menu at the end of our document. The individual entries can easily be edited. |
The CSS
When outputting a website, SiteGrinder puts the style and layout information into one CSS file named common.css As its name suggests, the common.css file contains the CSS that is shared between the different pages of the website. As pages diverge from each other, the unique CSS properties will be moved to the <head> section of the individual files. And, in some cases, be put inline with the HTML.
If an item is used only one time on only one page in the entire site you will still find its CSS representation in the common.css file. This is because many users are building templates for part or all of their site and SiteGrinder wants to place no limitations on future re-use of that element.
Class or ID?
SiteGrinder uses the id attribute to uniquely identify each element output to the web page. ID names are derived from the original layer name in the Photoshop file.
As much as possible SiteGrinder tries to leave the class attribute unused in the XHTML and CSS it generates. There are exceptions for popups and menus, but otherwise the class attribute is left available.
Anatomy of a SiteGrinder CSS file
| CSS | Analysis |
|---|---|
| a { text-decoration: none; color: #000000; } html, body { |
Global site wide CSS settings are typically at the beginning o the document. |
|
#background { |
When documents use any alignment besides left alignment then they are nested within a div. Typically, that div will be named after the page itself, or the background layer. Note the position:relative. |
|
#redtop { #eventspopup { |
These are typical graphic element entries. The second one is for a popup graphic (visibility:hidden). |
|
#wowtextbutton { #wowtextbutton a { #wowtextbutton a:hover { |
These three entries are typical for a text button. |
|
#normalbutton { #normalbutton a { #normalbutton a:hover { |
These three entries are typical for a graphic button. Note that we don't swap graphics for buttons, we merely change the viewing port (#normalbutton a:hover{ background-position: -87px 0%;...) |
|
#emailbutton { #emailbutton a { #emailbutton a ins { #emailbutton a:hover { |
These four entries are typical for a hybrid button. The HTML for it would be like so:
|
|
#maintexthaslinks { #maintexthaslinks p { #maintexthaslinks p a { #maintexthaslinks p a:hover { |
A normal text layer would consist of something like the first two entries. A -haslinks layer would normally be all four. |
| #id38supportmenu { visibility: hidden; position: absolute; left: 260px; top: 258px; z-index: 38; width: 127px; height: 38px; } #id38supportmenu ul { #id38supportmenu ul li { #id38supportmenu ul li a { #id38supportmenu ul li a:hover { |
The entries to the left are for a horizontal text menu. (One with a border and several other customizations.) |
The Graphics
SiteGrinder uses Photoshop's Save For Web settings to output graphics. Therefore it can output GIF, JPEG, and PNG and by using the Save For Web option in Photoshop users can set up custom compression profiles which will then be available to SiteGrinder.
If PNG-24 is chosen, graphics will be output with their alpha channel. But otherwise their semi-transparent sections will be composited with the background elements behind them. The entire graphic rectangle of a JPEG is composited into a JPEG, which may reduce their re-usability.
Normally, there is one graphic output for every graphic layer in the Photoshop file. Button graphics have the normal and rollover state placed into the same graphic.