Tutorial 3b: Editing the xhtml and css (part 2)

This section of the tutorial is intended for those who wish to make the minimal amount of changes even if it means losing some of the benefits of more advanced css.

  1. Open the html file you created in a browser of your choice and select the option to edit the file. Although the file is in xhtml format the extension is still html. In Internet Explorer 7 go to Page -> Edit in Notepad. In Firefox go to View -> Page Source. You can then close the html file if you wish.
  2. You will see both a css header section and an xhtml body section. First we will be editing the css header section.
  3. In the header section you will see the css for the layout. The first css you will see is
    #Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:XXXpx;
    }
    To make things easier change "#Table_01" to #wrapper. This is the section that covers the entire layout you designed.
    Change position:absolute; to position:relative; and add display:block;.
    Below height:XXXpx; add background-image: url(filename.jpg);.
  4. Below you will see several sections that begin with #filename-XX_ . Delete all of them except the ones that will be the sections where you are adding content. If your navigation section is section 5 and your content section is section 7 delete all of them except #filename-05 and #filename-07.
  5. For your content section(s) below height:XXXpx; add overflow:auto;. This will add a scrollbar if you add more content than can fit in the section.
  6. Sometimes if you aren't careful the slice tool can leave a thin white line when you view your layout as an html file. If this happens you can either go back to Photoshop and fix it or you can adjust the css code in the affected section(s).
    #filename-05_ {
    position:absolute;
    left:2px;
    top:107px;
    width:19px;
    height:XXXpx;
    }
     If you see a horizontal white line you can subtract one from the space from the top. In this example you would replace top:107px; with top:106px;.
  7. You will want to add a background image for visitors with monitor resolutions larger then the layout you designed. In the css section after the layout sections add the code below. Change backgroundfilename to the file name of your background. Also, if your background file is a jpg or png image change gif to the correct extension. The color is currently set to white. You can change it to a different websafe color (see note 3).
    body
    {
    background-image: url(backgroundfilename.gif);
    background-color: #ffffff
    }
  8. Now that you have created the layout you will want to add additional customizations to the css including font size, color, etc (see note 3).
  9. Near the top you will see <title>filename </title>. Change the title to the title for your website.
  10. Scroll down to the xhtml section. Change Table_01 to wrapper.
  11. The next two steps are optional (the page will load correctly even if you don't do it), but it is good coding and makes editing and adding content much easier. Highlight everything from <style type="text/css"> and </style>.
  12. Copy the css you just highlighted and paste it into a blank Notepad document. Choose a name, preferably one with style in it, and save it. Then save it again with the extension .css . For example, stylesheet1.css . Make sure that "save as type" is set to "All files". Go back to your original and delete the section you highlighted. Save the file with a new name so that you still have the original. You are now done with the stylesheet unless you want to make changes later.
  13. Save the html file as a text file so that you can easily edit it. From "save type as" choose "Text documents" Then save the file again with the extension .html . As with saving the stylesheet portion you need to make sure that the "save as type" is set to "All files".
  14. Since you removed the stylesheet from the html file you now need a way for the html file to know to load it. In the <head> section after the title add <link rel="stylesheet" href="stylesheetname.css" type="text/css" />. Change stylesheetname to the name of your stylesheet.
  15. In your html document delete all sections where you are not adding content. While this step is not absolutely necessary it will make things a lot easier. Each section is in the format:
    <div id="filename-05_">
    <img id="filename_05" src="images/filename_05.gif" width="XX" height="XXX" alt="" />
    </div>
     If your navigation section is section 5 and your content section is section 7 you want to delete all of them except <img id="filename_05" src="images/filename_05.gif" width="XX" height="XXX" alt="" /> and <img id="filename_07" src="images/filename_07.gif" width="XX" height="XXX" alt="" />.
  16. Below the head section delete <body-syle="background-color=#FFFFFF">.
  17. Now you want to add the navigation section (assuming that your navigation selection is the same throughout your site). Scroll to the xhtml section where your navigation will be. For example, if your navigation is in slice 5 you would scroll to <div id="filename-06_"> <img id="filename_056" src="images/filename_05.gif" width="XXX" height="XXX" alt="" /> </div>
    Delete
    <img id="filename_05" src="images/filename_05.gif" width="XXX" height="XXX" alt="" />.
    Important note: Make sure that you do not delete <div id="filename-07_"> and </div>
  18. Add the xhtml or javascript for your navigation. The xhtml code for a simple navigation bar could be
    Menu
    <ul>
    <li>My Blog
    </li><li>My Links
    </li><li>Contact Me
    </li></ul>
  19. You now have your template. Save the file first as a text file with the name template or something that will let you know that it is a template.
  20. Now you want to delete the image for your content section. If your content section is slice 7 you want to delete
    <img id="filename_07" src="images/filename_07.gif" width="XXX" height="XXX" alt="" />
    Important note: Make sure that you do not delete <div id="filename-07_"> and </div>
  21. Now add some content. Right now you are testing your layout so you can add any content you want. Save it as a text file under a new name (for example, testinglayout.txt). Now save it as an html file. Make sure that "save as type" is set to "All files".
  22. Open your html file and check to see if everything looks right. If everything looks right, open your template and add real content. Save the file under another name. Everytime you want to add a new page open your template, add the content, and save under a new name.
  23. If there are any errors or something doesn't look right check your xhtml and css. One common problem is forgetting to close a tag (ie <b>bold instead of <b>bold</b> ).
Notes
  1. XX or XXX stands for the appropriate numbers for your layout.
  2. As an alternate as soon as you go to edit in Notepad you can save the file under a different name and save it periodically while making your changes.
  3. Lissa Explains has a good beginning explanation of css and a color chart.