SSW Web Template

Home > SSW Standards > Templates > SSW Web Template - Test Dreamweaver MX

New THIS IS NEW web pages are to be consistent with the SSW Template. All new pages must also abide by the rules set out in SSW Rules to Better Websites. Please also read the standard on SSW Branding before you create a new page...

Sample Heading to look like this

This document has pretty good HTML (as per Jelliot). Note these rules:

Add this Include file for all SSW Products:

Demonstration Options

If you are in Sydney, call today for a free no-obligation demonstration at your office!
If you are not in Sydney, please take advantage of our SSW Phone Walkthrough. The SSW Phone Walkthrough is a service where we will call you, anywhere in the world and once you have installed our product we will guide you over the important features of the software. Saves you time, playing around with the software trying to work out all the useful features, please email us today.

Verdana is our standard Web font. This text is written in Verdana. By using our ssw.css you will automatically be using this font. Dont use the font tags eg. <font face="Verdana, Arial,Helvetica, sans-serif" size="2"> Instead this line is used in our css font-family: Verdana, Arial, Helvetica

Formatting should not be in a HTML file, as an example this should be in the CSS, not the HTML file
style="{font-weight: bold; color: #ffffff; background-color: #7d7d7d}

WhenTHIS IS NEW you have large blocks of text, it's imporant to break up the page to make it visually appealling. Using text boxes like this is a good idea... eg. <table class="clsSSWTable" cellspacing="2" cellpadding="2" summary="Formatting Table" align="right" style="{width:40%;}">

When you have tables on your pages use the ssw colours ie. a red border (as below). Don't specify these colours in your HTML

BAD <table bgcolor=white cellpadding=0 cellspacing=0 width="100%" border=0>

GOOD <table class="clsSSWTable" cellspacing="2" cellpadding="2" summary="Tips On How to Show a Table" style="{width:90%;}">

Don't specify anything your <tr> or <td> tags

BAD <tr bordercolor="#cccccc" bgcolor="#cccccc">

GOOD <tr>

The heading is in a div tag ie. <div id="topTextShadow"> Note: We no longer use the Adobe Photoshop template for the Heading, located at //roo/ssw/ImagesPsd/hd_short.psd *** This image to be deleted ***

Table Headings

1. When you use named achors in a table, use meaningful names

Orders of rules/lists often change. If you use named anchors like "#13" they become meaningless when the list order changes. Always use a meaningul anchor name.

When you have tables on your pages use the SSW colours i.e. a red border (as below). Just include the Table style by adding "class="clsSSWTable"" into the Table tag.

Header Column	Header Column	Header Column	Header Column
varchar, nvarchar	pstr	@pstrEmail	varchar(150)
int	pint	@pintContactID	int
bit	pbit	@bitPrimaryContact	bit

When you have tables that are displaying data (like a DataGrid) then use this color scheme.

ProdName	Downloads
Simple Table Documentor	233
SSW Performance PRO!	155
SSW SQL Script Wizard	128
SSW Data Renovator	122

Always write code in the CODE tag...

BAD <font face="Courier New, Courier, mono" size="2">

GOOD <code>Code in Here</code>

Option Explicit Function Isloaded() End Function

You should always close a lot of tags that offically need closing eg. <p>, <li>.
You also may want to close tags such as <br/>, <img/> as it will make it easier to go to XHTML in a couple of years.

Now that we are using a .NET template there are a couple things you should be aware of.

The Header and Footer tags. These are required on all pages so that you only need to keep the main body of the page and the heading html on the aspx page. The heading, menu, side, footer, table structure is all taken care of for you in the includes.
At the top of your page you must tell the page to use the templates. You do this by inserting these 2 lines:
<%@ Register TagPrefix="SSW" TagName="incBottom" Src="/ssw/Include/incBottom.ascx" %> <%@ Register TagPrefix="SSW" TagName="incTop" Src="/ssw/Include/incTop.ascx" %> Now you can call the header template: <SSW:INCTOP id="Inctop" runat="server" PageTitle="SSW Template"></SSW:INCTOP> At the end of your page you call the footer that will close the table structure and put the footer image on the page: <SSW:INCBOTTOM id="incBottom" runat="server"></SSW:INCBOTTOM>


  The page heading is now only text not an image.

    You can change the heading in the IncTop tag at the top of the page.

     <SSW:INCTOP id="Inctop" runat="server" PageTitle="Page 
    Title Here"></SSW:INCTOP>

    

  
  To use this template, you can just copy this file or if you want 
    to include custom backend scripting you will be required to copy 2 files for 
    this template. By default the webpage is using a custom code behind page to 
    populate the side html in the template. When you use this template you have 
    to rename the 2 files so they are similar. This is for ease of maintenance 
    more than anything.

    eg. Login.aspx and Login.aspx.vb

    

  
  You also have to change the Class name. You must pick a totally unique class 
    name than has not been used on the rest of the site.

    Eg. LoginMaintancePage

    

    This class name must be changed at the top of the aspx page:

    <%@ Page Language="vb" src="Login.aspx.vb" AutoEventWireup="false" 
    Inherits="SSW. LoginMaintancePage " %>

    

    And at the top of the aspx.vb page:

    Public Class LoginMaintancePage

    

  
  There are now two methods of placing some HTML in the left hand side bar 
    in the template. 
    
      Make a txt file in the same directory called .txt

        If this file exists when the page loads, it will display the html in the 
        txt file in the side nav.

        i.e. If you call the page Default.aspx then you will have to make a default.txt 
        file.

      
       If you have a page where the side content changes depending on different 
        query strings on the page then you can enter the URL into the database 
        and when the page loads, it will check the database for that URL and display 
        the corresponding HTML.

        Eg. If I have a products aspx page (the product is dependant on the query 
        string passed into the page) then I would use this method.


   The Nav Bar is edited using by altering the appropriate table in SQL Server on Joey. Then you need to 
use a special web page on Seal to generate a new static text file from this table.
        You should acknowledge any contributers in accordance with standard 
        convention. If you are quoting another author directly you should use 
        direct quotes - for example: As Cameron Shaw says in the SSW Web Template 
        "You should acknowledge any contributers". OR, if you are just 
        referring to another persons idea don't quote the author directly, but 
        mention that it is his idea - for example: Adam Cogan recommends on his 
        site (www.ssw.com.au) that every coding 
        company should have a series of rules and standards that every developer 
        must adhere to." Following this standard will ensure we don't get 
        accused of plagiarism.
  
 Finally if you are not sure then see www.w3.org 
THIS IS NEW