Design Guide

In this Design Guide I will be using a website which we have setup already called, TD Autos (www.tdautos.co.uk).

Stage 1: Design Restrictions

As part of being a Franchisee you will received a CD which contains PSD to our WebsiteTemapltes. In this guide we will be looking at WebsiteTemplateA, which follows the following design layout:-

(Click on image to show the full version)

As you can see the whole width of the page is fixed to 750 pixels, the menu width is 200 pixels, the content frame is 525 pixels, with a 25 pixel border between the menu and the main content frame.

Key points to bare-in-mind, before you start designing:-

• Where your main content will go, this area will grow and shrink with the amount of data, so don't used complex images for the background of this section
• Each menu item will have the same style applied to each button, therefore you will only need to design 1 button.
• The provided templates follow these design restrictions, it is possible to ignore these design restrictions but this is not covered within this tutorial.
• If you require text placeholder, i.e. menu text or some demo content text, you can put it in during the design stage, but before you slice your image disable this text, but making it invisible in Photoshop.
• Do not destory the sliced area's, as these will be required for the next stage.

Now you know you these restrictions, go ahead an open one of the provided templates and design yourself a new website.

Stage 2: Slicing the website template in Photoshop

So now you should have your completed PSD of your new website which is ready to be sliced up for the web. To initiate the slicing processes within Photoshop, click on "File" and then select "Save for Web & Devices....":-


Once you have clicked this menu item you should see something similar to the following:-


The main part of this screen we are interested in is the right hand panel underneath the 3 buttons, make sure the following items are done:-

• "JPEG" is selected from drop down list
• "Optimized checkbox is checked
• & that the quality is set to 80

Similar to this:-


Next click on the button "Save", which is located on the top right hand side of this screen.

Before you click save you must navigate to the appropriate folder, or create a new folder. As this is where you sliced images are going to be saved to. Make sure that the "Slices" drop down box reads "All Users Slices", as we are not interested in the automatically created slices and that the "Settings" drop down box reads "Default Settings":-



Now you have successfully sliced up your PSD design, which is now ready to be uploaded to the website.

Stage 3: Create the Cascading Style Sheet in StartASite 3.0

For each site you create a different cascading style sheet (CSS) will be used. To create a new CSS for this site, login into StartASite Administration Section for this current site, this can be done by appending "admin" onto the end of the url, so for example:-

http://www.tdautos.co.uk's Administration Section would be
http://www.tdautos.co.uk/admin

Now login using your Franchisee's Username and Password.

Once in, click on "Style Sheet Management".

Now click on "Create A New Style Sheet"

You will be asked what Template do you wan this cascading style sheet to be based on, for this example we have used "TemplateA", but if you have based you design on something different, select it from the drop down box.

Now click on "Create" to create and configure this new Style Sheet.

This newly created cascading style sheet will not set as the default style, to set it as the default click on "Set As Default"

Stage 4: Uploading the images

For this stage you will need a FTP Client, this allows you to upload your images to your site.