Site Layout with CSS

Document Sample
Site Layout with CSS Powered By Docstoc
					Site Layout with CSS

Preparatory Page Layout
Add the XHTML structure below:

Add a heading to the page (if you are using images you can just put in the image;
remember to add alt text).

Change the tag that the image is in to be a heading 1 (h1 tag) using the format option in
the properties pane; it will most likely be in a paragraph tag by default.

General Note: If you are using two or more images in your banner, be sure the <img>
tags don't have space in between them.

Add a list for your primary navigation

      Add horizontal buttons (with rollovers) inside of the list (one button to each li)

Add a little blob to temporarily fill the content area (Something like "This is the content
area of my page and can have paragraphs, lists, tables and images")

Add a list for your secondary navigation at the bottom of the page

      Can just type them and then make them a list or make a list and then type them all
       (one to each li)

For your last paragraph add some footer type information (Copyright, contact
information, whatever else you want)

Now let's make it look like something good


Body Style

Create a Tag style for body

      Select a background color
      Set the font size (in pixels)
      Set the default font for your document


Container Div

Create a div tag with the ID container that surrounds all of the content
      Select all of the text in the document
      Click on the Insert Div Tag button or go to Insert/Layout object/Div Tag to add
       the div tag.
      Specify the id.

Create an ID Selector style for the div tag (a style for #container)

      Set the width (common size is 744px)
      Set margin-left and margin-right to auto (this centers block level elements live div
       tags)
      Set the background color


Horizontal Navigation

Give your first list an ID of navigation

      Select the whole list by clicking in the list and then clicking on the <ul> on the
       bottom of the main pane
      Once the tag is selected go to Modify/Edit Tag in the menu bar or hit Shift-F5
      When the dialog box opens select Style Sheet/Accessibility on the left and then
       add the ID in the ID field (do not leave spaces in ids or they will not work)

Create an ID Selector style for your top navigation list (#navigation)

      Set the background color
      Align the elements (text align)
      Set a width
      Set the list style type to none (to remove the bullets)
      Zero the margin (and padding but this is not needed for Firefox)

Create an Advanced Selector style for the list items in your navigation (#navigation li)

      Set the display to inline (it defaults to block)
      If the links are text: set the left and right margins and give them both the same
       value, adjust to your liking


Possible Problem: List not on one line

      To correct:
          o Remove the spaces between your images
                    Note: This can sometimes be easier if you do it in split view and
                     just delete the space between </li> from one list item and the <li>
                     from the next
            o   This problem happens because any white space (no matter the length)
                creates a single space when the page is loaded, that single space means the
                your buttons which take up exactly all the space now take up a little space
                more which they cannot do and still fit

        Save and preview the page again. It should work just fine, if not go back and
         check for spaces again.


Possible Problem: Gap between the Banner and the navigation

        To correct:
            o Make sure that the banner image is inside of a h1 tag (if not already)
            o Give the h1 tag an id (same as done with the <ul> list above)
                      You cannot name the banner image "banner" and the heading
                       “banner”, it will invalidate the page (you can only have one banner
                       id)
            o Create a style that removes the margins



Footer

Footers can be done many different ways (this is just one way) so think about what you
want before starting

Place a div tag around the bottom navigation and the footer paragraph.

Give the div tag the id of footer.

Create Advanced Selector Styles for the bottom navigation list (#footer ul)

        Set the background color
        Align the elements (text align)
        Set a width
        Set the list style type to none (to remove the bullets)
        Zero the margin (and padding but this is not needed for Firefox)

Create an Advanced Selector style for the list items (li) in the div tag (#footer li)

        Set the display to inline (it defaults to block)
        If the links are text: set the left and right margins and give them both the same
         value, adjust to your liking

Create an Advanced Selector style for the paragraph in the div tag (#footer p)

        Align it to the center
      Set the background color (if you want it different)
      Zero the margins
      Add padding if desired


Content

Highlight the previously created "Temporary content" and add a div tag with the ID
content.

And create a style for it that gives it padding. (#content)

Preview with Mozilla Firefox and enjoy or make changes as needed

Templates
Add editable regions to the page that will be the template first

      Select or put your cursor where you want the editable region to be
      Click on Insert/Template Objects/Editable Region on the menu bar
      Specify a name for the editable region

To make a page into a template go to File/Save as Template

In the dialogue box specify the name that you want to save the template as and provide a
description (this is optional)

Creating a page from a Template

Two ways:

   1. Creating a page where a template already exists

           o   Click File/New on the menu bar
           o   Select the Templates tab
           o   Select the Template that you want to page based on

   2. Applying a Template to a page

           o   Create a new blank page (File/New on the Menu Bar)
           o   Go to Modify/Templates/Apply Template to Page
           o   Select the template that you want to apply

Editing Template
To edit the template (or locked portions of pages based on the template) go back to the
template file (.dwt)

Make the needed changes and save the template

When it prompts if you want to update associated files select update and the change will
be made to all the pages that are based on the template

Importing Word Files
Pages do not have to be created in Dreamweaver, you can create the basic text in any
word processor (like Microsoft Word)

Place your cursor where you want the imported text to show up

Click File/Import/Word Document

Specify that it only bring in Text with Structure since formatting is better defined using
proper CSS

Browse to the file and once you have it selected choose okay

Dreamweaver will take a moment to change the formats, but when it is done you will
have the Word document now inside of Dreamweaver.

Links
Create links on your template to each of the pages that you have made

      Select the element that you want to make a link (text, image or other wise)
      Find the link option in the properties pane
      Drag the cross-hair over the file that you want the link to call

Other uses for links

Image maps – if you do not want the whole image to be a link you can make just a
portion of an image into a link

      Select the image
      Select the type of shape you want to use from the bottom left of the properties
       pane
      Draw the shape on top of the image
      With the shape selected add a link as done before

Email – Email links will open up the default email program of the computer and provided
the email address in that way
       Select what you want to be the email link (what they click on to email you)
       In the link option on the properties pane type “mailto:” and follow it with your
        email address.

Section Links – If you want to jump to a certain location on the current page (or another)

       First create a named anchor for where you want to jump to

           o   Place your cursor on the line that you want to jump to
           o   Click on the named anchor symbol in the tool bar or go to Insert/Named
               Anchor on the menu bar
           o   Give the anchor a name (do not use spaces!!!)

       Return to where you want the link to be and select the text
       On the link option in the properties pane type “#” followed by the name of your
        anchor (this is case sensitive)

           o   If you want to jump to a section on a different page then specify the page
               and then the anchor (ie family.html#me)
           o   You can link this way using images and image maps also

CSS Content Style
This section requires that you already have content on your pages!

Headings

Create Advanced selector styles for your headings in your content area (#content h1,
#content h2 … #content h6; only create styles for the ones that you will use)

Links

Create pseudo-selector styles to style your links. Options include:

       a:link
       a:visited
       a:hover
       a:active

If you want to be more specific they you can create combine Advanced Selector styles
and pseudo-selector styles and create things like:

       #footer a:link
       #footer a:hover
       #footer a:visited
       #content a:link
       #content a:hover
       #content a:visited

Paragraphs

Create a tag style for your paragraphs that will remove the unwanted margins, double
space them.

       You may also want to add a text-indent to have the first line indented on each
        paragraph (p:first-letter or #content p:first-letter and add a left margin)


Text

Create a class style that will emphasize important text (bold, italic, different colors etc
being options for it)

Apply Style where emphasis is needed/wanted


Pictures/Flash Objects

Create a class style with a float right and another with a float left.

These styles will allow for text wrap around an image (or similar object: ie flash files)

Apply appropriately by selecting the image or flash file and under class on the properties
panel selecting from the drop down menu the class that you want applied