Course Syllabus

Intro

Design

Slicing

CSS

Template

Content

Scripts

Meta-Tags

Uploading

Website Hosting

Animated Gifs

Requested Elements

Further Readings

Interesting Designs

Before adding content...

Before adding content onto the different pages of your website you will want to make sure that you have all of your layout items finished and looking the way you will want them on the live website. This will mean that the template file you have created should be ready to go. A final step in the template file that will save you time and effort later on is to establish and setup all the links for your navigation. To do this go through the navigation part of your site and enter in a link location for each button that you have. You can make up the names for the files to link to for each different page. Then just remember the file names you have specified and name that actual page for that link accordingly. For example say you have the following links

• about
• contact
• links

you could setup the links on your template page to link to similarly named pages:

• about.html
• contact.html
• links.html

now when you proceed onto the next step for creating each of these pages you will want to name them accordingly in the file name.

Creating the different pages of your website

Once you have a template file that is looking good, you can create all your different pages for the site using a simple save as function. Start from the top of your list of pages you have from your site map and work your way down through the following steps

• open your template
• select file --> save as
• specify the file name for this page (about.html from the previous example)
• save the file to your site root folder
• change the Title of the page
• Save the file and move onto your next page

once you have a separate file created for each one of your pages you can go through them one at a time and add your content to them.

The Homepage

Servers across the internet you the standard index.html for a website's homepage. When a user types in google.com your browser is actually displaying the page google.com/index.html . This means that for whichever page you want to be your homepage it should be called index.html or index.php if you are anticipating using php scripts.

Sizing images

Images that are on your site should be made as small as posible while maintaining the resolution nessesary for the image to look right. It is importain to know that all images on a website are displayed at 72 dpi resolution. No mater what dpi they are saved at they will be displayed at 72 dpi. This applys also to the graphic template that we made for the site. This being the case we can size an image we put on the web according to the space alloted for that picture in the design.

We designed our websites at 800 pixles wide to begin with, so we shouldn't ever need an image greater than 800 px wide. Most designs will further reduce this amount because the main content area has been made smaller. So to establish the maximum size of your images you should measure the total width of your main content box. This size can be further reduced if you figure that the image should not be the full width of the main content box on your design.

To re-size an image an optomise it for the web follow these steps

• open your image in photoshop
• go to image --> image size
• with the Constrain Proportions box checked change the pixle width of your image to the width you plan to use the image for on your website.
• Select OK
• go to File --> Save for Web
• You can set the image type to either .jpg or .gif this will not make much differance
• Hit Save
• Specify the image name so you can remember
• set the format to images only on the bottom
• hit save
• you can now close this image without saveing your changes. you already saved them with the save for web.
• Repeate this for all images to be included on the website.

Using tables for layout

Tables are a very good tool to use in order to place your content where you want it on a page. Using multi-cell tables and specifying a width or alignment for different cells will give you full control over exactly how your pages are displayed to the end user. Remember to always chack how your page looks in a internet browser window. Sometimes you will find differences in how a page displays in dreamweaver vs how it looks on the internet so it is importaint to check yourself regularly.