Tableless PSD to HTML 1

Preping your PSD for tabless Web design (part1)

This week we're going to be applying the concepts that we learned in CSS and HTML towards converting a Photoshop document into HTML.

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.

This week:

Hello again. Everyone did a very good job with the HTML and CSS assignments. I hope that you found the video tutorial very useful. This week we're going to be applying the concepts that we learned in CSS and HTML towards converting a Photoshop document into HTML.

Before we begin coding though, I recommend that you read through a few online articles that talk about image compression types and all so good Web design habits. Those are listed below.

One quick note though:

I had a few people e-mail me with issues pertaining to the screen capture assignment. If you are using a Mac, here is how you do a screen grab:

  1. Go to the Apple menu in the upper left corner of the screen.
  2. Click System Preferences
  3. Click the keyboard icon.
  4. Click “Screen Shots” in the left column. In the right column you will see a list of the different types of screen shots as well as their shortcut key combinations. You will want to use the first command quote "Save picture of screen as a file"
  5. If you are using Windows, you most likely have a button on your keyboard that says “Print Screen”. By pressing this it will copy an image of the screen to your Clipboard.
    You will need to open some sort of image editing program such as Photoshop or MS Paint and choose Edit > Paste in a new document.
    At that point, you will need to save the document as a JPEG.

I had some people tried to send me an HTML file of the actual page they were attempting to capture. This will not work for several reasons, but mainly because all of the images and stylesheets and other documents that are being linked through HTML documents are not stored locally on your computer, so they will not show up. The second main reason is because if when you make changes in Firebug, it is not actually manipulating the HTML document. It is only changing it in the view.

If the Firebug exercise was confusing to you, I recommend going to getfirebug.com and watching their tutorial videos.

Let's get started

So, let's begin this week's lesson.

Before watching the video tutorial, read the following three articles:

Image Types and Usage in Web Design (REQUIRED)
Great Design Hurts: Striving for Pixel Perfection (REQUIRED)
5 Easy Ways to Prepare Your Web Designs for Coding (recommended)
DOWNLOAD THE PSD TEMPLATE HERE.

These articles will give you a better understanding of what we're about to do.

Homework

  1. Download the Photoshop template.
  2. Slice of the various images in the Photoshop document and save them in assets/images as whether image format you find appropriate, based on what was discussed in the video and also what was described in the image types article.
  3. Create an HTML document called index.html with the overall HTML structure that was shown in the tutorial. It should also include a link to an external CSS document called style.css.
  4. Save your folder structure as a zip file. Here are some links to instructions on how to do this for Windows and Mac.
  5. Give the file name this structure: visc110-(first initial)(last name)-wk5.zip
  6. Email the Zip file to me at jearley1@ivytech.edu.

As always, if you have any issues at any time, feel free to email me.

Thanks,

Jon

Questions?

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