Creating a Web Site Layout and Template

This will put together all of your previous examples and information such as adding links, adding images, controlling text, etc. Think of this as putting a puzzle together.

This is a step by step guide to build and layout your website.

Pre-Production Phase

This has already been done to some degree for your first web project. It includes the following needs.

• determine the reason for your website (to get a grade is good enough in this case – businesses need better reasons)
• determine what pages you need
• determine your site’s style
  • color
  • font usage
  • now navigation will work
  • etc.
• determine the required pages
• create a basic layout (sketch it out first – then build)

Production Phase

Take your layout and figure out how to break it into boxes to contain the style and content

Figure out a good style to use. There are many CSS layout samples you can use. Layout Gala has some sample layouts that all use the same structure. But for our example, we will build something even simpler.

<header>
<navigation>
<content>
<footer>

with a <container> to wrap it all in.

Note: We can always make more complicated layouts, but this is what is needed here, and what we can do in a 3 hour class.

1. Create a Blank HTML Page
2. Change the pages title to be empty (or something other than “Untitled Document“
3. Add div tag with an id of container
4. Place cursor inside of container
5. Create a div with an id of header
6. Place your cursor after each of the following divs
7. Create a div with an id of nav (short for navigation – menu also works)
8. Create a div with an id of content
9. Create a div with an id of footer

Notice each of the divs get an id with a relevant and meaningful name.

Inside your header:

1. Remove placeholder text
2. Place your logo image
3. Add a tag line

Inside your navigation bar:

1. Remove placeholder text
2. Add links for your different pages
   • I added home, credentials, in the news, and contact me
   • Notice the separator used – this is so the links are easier to read

Note: Creating a link to “#” is easy enough to generate the link – just don’t forget to go back and fix the link

Main Content Section

This will be replaced for each new page. Therefore don’t worry about the text. I grabbed some text for lipsum.com This text is in a separate file provided.

Footer

Add the proper text to the footer. I created a text and link to Copy Left. This is a response to copy right. Feel free to read. (Technically I prefer Creative Commons.)

Styling the Page

At this point you should know what it is your page is going to look like. Be careful of using busy background images, etc.

I like to style myself from the outside in…

1. Body
   • Set background image
   • Set background color – so they see something close while the image downloads
   • Set default font
   • Set other tertiary things…
   • If you want to center the container – set text align to center (this is for an IE fix)
2. Container
   • Set width if it will be fixed or you can set it to ems (proportional to font size) or % if you want it set in relation to screen width. If left blank, it will take up the full width.
   • If you want it centered – set the left and right margins to auto – set text align to left to fix the IE fix.
   • If you want a border – add it at this point.
     • 1px solid black border
     • added a 1em padding all the way around

Now that the outside and containers are handled, we can start working on the inner elements. At this point I like to work my way from the top to the bottom.

1. Header
   • The big thing to do is to edit the tag line: change font, color, etc
2. Navigation
   • Set the font & style for links inside the header
   • Set the font & style for links inside the header with pseudo classes (“:hover”)
   • Set the font & style for other text inside the header if you feel it is necessary
   • (Note: remember to use ems to set font size – that way it is proportional if people re-size the font)
3. Content
   • Lots of things could be edited such as
     • hyper links
     • paragraph spacing (margins)
     • header tag fonts and styles
4. Footer
   • Usually I make footer font sizes a little smaller (.85 ems for example)
   • I also might need to edit the link for the footers

Creating a Web Site Layout and Template was originally found on Access 2 Learn