Tableless PSD to HTML 3

Preping your PSD for tabless Web design (part3)

This week we will be doing another video tutorial on CSS construction of our sample page.

Troubleshooting

Before watching this week's tutorial, there are a few common mistakes that I've been seeing that I would like to correct:

  1. It seems that the most common error is for students to have issues with their links.
    • Some students have written out their file paths starting with their computers route directory, rather than having it be relative to the HTML file. For example, I've seen something like this:
      users/Macintosh HD/desktop/minimal_site/assets/images/image.jpg

      In this case, the link is beginning of that the users folder level and going down level by level until it finally reaches the images.jpg file. Having a file path like this is going to cause problems later on when your website is hosted remotely where the file structure is not the same as it is on your hard drive.

      The file path should read instead:
      assets/images/image.jpg

      By doing it this way, no matter where you host your website, as long as your image file is in the same relative location to your HTML file, you shouldn't have any problems.
  2. Another common mistake I see a lot of students make is having spaces and capital letters in their filenames and folder names. Although this will work technically in many cases, it is best practice not to have spaces or capital letters since HTML is case-sensitive and also may not recognize spaces, since this is a form of "white space", which is the various types of spacing indentations and line breaks in code that doesn't necessarily show up for your website visitors.

    For instance, I've seen some people type their paths like this:
    Assets/Images/image name.JPG

    This will only work if your folder names and image names are also spelled with capital letters. Otherwise, if either the code or the filename are inconsistent, your link will be broken.
  3. Another mistake by Saul was the placement of the ID outside of the <div> tag, so that it looked like this: <div> id="header"

    It should look more like this: <div id="header">

    So, pay close attention to where your closing tag is. Remember that the opening and closing tags wrap around whatever content is between them. A very common practice is to have a <div> tag with an ID of "wrapper" that wraps around the entire content of the webpage. In this case, you want to make sure that the </div> is at the end of all of your visible HTML content, inside the opening and closing <body> tags.

That being addressed, let's continue onto this week's lesson, which is a continuation of the CSS construction for our sample site.

Note: this video is in HD. To view it at full resolution, press the Full Screen icon in the bottom right corner of the player.

HOMEWORK:

  1. Save the folder name containing all your files for your minmal site as you first initial, last name - wk 7. For example: jearley-wk7.
  2. Download and install a copy of Filezilla (go to filezilla-project.org).
  3. Open Filezilla and log in as the following:
    Host: c-buz.com Username: student@c-buz.com Password: IvyTechRules
  4. Drag your folder into the right column side. You should see a bunch of text wizzing by, showing all the files being uploaded.
  5. At that point, you should see your folder name in the right column. Go to a web browser, such as Firefox, and type in the following address:
    jetuts.com/students/(type the name that you gave your folder here)
    Example: jetuts.com/students/jearley-wk7

    In order for this to work, your main HTML file must be named index.html (LOWER CASE ONLY!)
  6. Email me this remote link, as well as a zipped version of your site.
  7. DON'T CHEAT, SINCE YOU WILL EVENTUALLY BE CREATING YOUR OWN WEBSITE, AND WILL NEED TO KNOW HOW TO DO ALL THIS ON YOUR OWN.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu