Steps in Creating a Web Site

Following is a brief outline of the steps needed to create a Web site. This article, Following a Web Design Process, from Smashing Magazine, offers a good overview of the process and links to great tools. Take a look. This article's focus includes processes for working with clients and team members.

1. With client, determine the scope and content

  1. Purpose and goal of the site
  2. Features needed on the site
  3. Discuss design
  4. Get any photos and logos the client wants to use
  5. Establish a contact to provide content
  6. Determine whether the content needs to be rewritten (usually it does)
  7. Determine whether new content needs to be created and determine who will do this.

2. Keywords

  1. Create a list of keywords
  2. Use the keywords in
    1. Page titles <title> tag
    2. Meta tags - description, keywords
    3. H1 (only one h1 per page)
    4. H2-h6
    5. Copy (text on the page)
    6. File names
    7. Navigation links
  3. Usage
    1. Select words or phrases people would most likely search on
    2. Use a minimum one per page; maximum 15-20 per page
    3. Can repeat keywords on other pages

Keyword generators

  1. SEO Tools
  2. Google's Keyword Tool

3. Basic layout of your Web pages

  1. Determine what the basic layout of the Web page (header, navigation style, content, sidebars, footer)
  2. Determine the width of your pages w3schools.com
  3. Decide on the number of pages
  4. Decide on the page name (giving you the name for the site navigation link)
  5. Color scheme

4. Determine the color scheme

Use a logo or a photo and let kuler create a color scheme for you based on the colors in the image. Use the color scheme generator to hone in on color scheme.

    1. Kuler kuler.adobe.com
      1. Create your own scheme
      2. Use ones already created
      3. Create a color scheme from an image
      4. Download the color scheme
        kulor example
    2. Color Scheme Designer http://colorschemedesigner.com/

      It has a sophisticated user interface; it also shows color schemes as seen by people who are color blind. You are able to see the color scheme applied to a mock web page.

      color scheme designer screen shot

    3. Color Combos http://www.colorcombos.com/
      1. Has a color grabber that grabs colors from a web site
        color grabber example
        example of colors grabbed
    4. Palette from a Color Wheel http://wellstyled.com/tools/colorscheme2/index-en.html
      1. Allows you to try out many color combinations
      2. Shows how colors look to people who are color blind
        example of colors using s color wheel
    5. Easy RBG http://www.easyrgb.com/index.php?X=HARM
      1. Builds harmonies of a base color you supply
      2. Site also has a lot of information on color for decorating and printing
        ease rgb example
        easy rgb example of colors
    6. Firefox Add-ons
      1. Colorzilla
      2. Colorsuckr

5. Choosing your fonts

Until now you had to use fonts on your webpage that resided on the viewers computer. Now, you can add a CSS link to fonts that reside on the Internet. Read more.

Here are a couple of links to information and code to link your pages to fonts on the Internet.

6. Root folder

Create your root folder and create an assets folder inside.

  1. All files need to be inside your root folder.
    1. html files
    2. image files
    3. CSS files
    4. media files such as video, audio, Flash, etc.
  2. The root folder will be uploaded to the Web hosting server to make your site available on the Web.

7. Define your site in Dreamweaver

DO NOT SKIP THIS STEP!

  1. Open Dreamweaver
  2. Define your site SITE>NEW SITE command
    1. Link to your root folder
    2. Link to your assets folder, which needs to be inside the root folder

Reason for this step: Dreamweaver needs to be able to keep track of all your links to images and other pages so if you change the name of a folder or file or move a file or folder, Dreamweaver is able to update all the links for you. If you do not do this step, Dreamweaver may not be able to update all your links. Dreamweaver will not be able to manage templates and library items.

8. Gather your content

  1. Gather your images and put them in the assets folder.
  2. Create any multimedia files.
  3. Write the text for each page. It is better not to use Word as Word creates its own html, which can take time to remove.

9. File and folders name correctly

Make sure all your folders and files have proper names.
  1. No spaces or illegal characters in your folder or file names
  2. All files need to have extensions .html, .jpg, .gif, etc.
  3. Meaningful and easy to remember names for your files and folder
  4. If you have images from a digital camera, rename them; do not use the default file name from the camera, which is usually a series of number

10. Create a basic page - name it basicpage.html

Create a new Web page and name it basicpage.html. You will use this basic page to create a template. Use the template to generate all your webpages.

11. Layout using divs, css, floats and clears

In this step, you will create the layout, the framework of the page. You will add divs and CSS to align, float, and clear the divs as needed.

  • Video tutorial - layout 35 megs 9:06 minutes (Optional)
  • Closed captioned versions
  • Layout with html divs and CSS code
  • Closed captioned versions
  • wrapper div (#wrapper for the CSS rule)
    • This div will encase all the other divs
    • To center this, use margin-left:auto; and margin-right: auto;
  • header div (#header for the CSS rule)
    • This div is inside the wrapper div
    • Often a background color or background image is added
    • You may need to give this div a height
  • nav div (#nav for the CSS rule)
    • This div is inside the wrapper div and below the header div
    • Often you give this div a height - the height of your navigation list, spry navigation, or other navigation elements
  • content div (#content for the CSS rule)
    • This div is inside the wrapper div and below the nav div
    • Float this div left
    • Add a width (like 75% for example)
  • content-inner div (#content-inner for the CSS rule)
    • This div needs to be inside the content div
    • Add margin, border, and padding to this div
  • sidebar div (#sidebar for the CSS rule)
    • This div needs to be inside the wrapper and below (outside) the content div
    • Float this div right
    • Add a width (like 25%, for example)
  • sidebar-inner div (#sidebar-inner for the CSS rule)
    • This div needs to be inside the sidebar div
    • Add margin, border, and padding to this div
  • clearfloat div (.clearfloat for the CSS rule)
    • This div needs to be inside the wrapper div and below (outside) the sidebar div
    • Add a class. clearfloat clear:both;
    • This will force the following content to be positioned below the content and the sidebar divs
  • footer div(#footer for the CSS rule)
  • footer-inner (#footer-inner for the CSS rule)
    • Add margin, border, and padding to this div
    • Insert the auto update date INSERT>DATE
    example of layout

12. Add navigation

Remember that you can add background images to the a:link and a:hover to make navigation look like rollover images.

13. CSS rules to format content

Add CSS rules to format your content.

Here is a list of commonly formatted tags.

  • * {margin: 0; padding:0} This will zero out all margins, giving you more control over your formatting
  • body
    • font family
    • base font size (usually 1em or .9em)
    • background-color
  • h1-h6 headings
  • p tag
  • ordered list
  • unordered list
  • list item
  • a:link, a:hover

Remember to target specific regions on your page to have different formatting by section. For example #footer p

14. Create a Dreamweaver template from the basicpage.html

  1. Select the area you want to be able to add new content on pages generated by the template
  2. INSERT>TEMPLATE OBJECTS>EDITABLE REGION
  3. Save the file as a template FILE>SAVE AS TEMPLATE
  4. If you are asked to update links, select YES

Notice these changes:

  • The file name is now basicpage.dwt (Dreamweaver template)
  • There is a folder named Template inside your root folder with a file named basicpage.dwt - use the template to make changes to all the pages created from the template

15. index.html page from the basicpage.dwt template

The index page is your homepage.

  1. It MUST be named index.html
  2. It MUST be at the root level

If you do not follow these rules, you will be sorry. The browser will not know which file you want to be your homepage and will give the user a warning message.

16. Create the rest of the pages from the basicpage.dwt template

To create the pages of your site using the template:

  1. FILE >NEW
  2. On the New Document dialog box, choose
    1. NEW FROM TEMPLATE
    2. Select the template (you may have multiple templates)
    3. Make sure the "Update page when template changes" is checked
    4. Click on the Create button

17. Upload your Website to a hosting service

  1. Get a hosting service.
  2. SITE>MANAGE SITE click on your Website name
  3. Fill out the Site Definition dialog box. (Call your hosting service's tech support if you need help.)

remote info for hosting dialog box