Tableless PSD to HTML 2

Preping your PSD for tableless Web design (part2)

This week's lesson will be a continuation of last week's were rebuilt out an HTML page based on a Photoshop template. We will be using some of the CSS principles from week four in addition to some new ones. In week three and four we spent our time primarily coding straight text, but this week we will be using some of Dreamweaver's tools to help us code faster. For those of you who do not have Dreamweaver, I will be showing the code as well. I will also be using the firebug occasionally to help me test out some of the CSS changes in Firefox.

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:

This week's lesson will be a continuation of last week's were rebuilt out an HTML page based on a Photoshop template. We will be using some of the CSS principles from week four in addition to some new ones. In week three and four we spent our time primarily coding straight text, but this week we will be using some of Dreamweaver's tools to help us code faster. For those of you who do not have Dreamweaver, I will be showing the code as well. I will also be using the firebug occasionally to help me test out some of the CSS changes in Firefox.

CSS Code Used:

color
This is applied to the text color, not the background or any other element. Enter either the color name (basic colors only, ie. red), a 6-digit hexidecimal color color code (ie. #fafafa) or a 3-digit hexidecimal color code (ie. #333).

Usage:
color: #ccc;
background-color
This is applied to the element background. Same color options as above.

Usage:
background-color: #afafaf;
font-family
List in order of importance, the fonts that you would like to use. We list multiple fonts in case some are not installed on a certain computers. Web-standard fonts are Arial, Courier, Times, Times New Roman, Geneva, Comic Sans, Verdana, and Georgia.

Usage:
font-family: Arial, Helvetica, sans-serif;
font-size
This determins how big the text is. I prefer to use px (pixels) as a unit rather than pt (point) or em, since pixels are more universal across screens.

Usage:
font-size: 12px;
font-weight
This determs whether the text is bold or regular.

Usage:
font-weight: bold;
text-decoration
This determines whether the text is underlined, struck out, blinking, or overlined. <a> are underlined by default.
Usage:
text-decoration: none;
height
This determines the height in pixels of any element.

Usage:
height: 200px;
width
This determines the width in pixels of any element.
Usage:
width: 940px;
border
This is the line around the edge of an element. With this, you can determine the style of the border (solid, dotted, dashed, or none) the thickness (in pixels) and the color.
Usage:
border: solid 1px #ccc;
margin
The space around the outside of an element. Use the TRBL method (Top Right Bottom Left). Auto is used on the left and right to center the element on the page without center aligning all the contents of it.
Usage:
margin: 20px auto 30px auto;
padding
The space on the inside of an element, between the border and the content.
Usage:
padding: 20px;
float
Causes all other elements to wrap around an element while it sticks to one side or the other of its containing element. For example, if the float is set to "left", the element will stick to the left and everything else will wrap to the right of it.
Usage:
float: left;
line-height
This is like kerning in typography. It is the total height of the text itself and the space below it.
Usage:
line-height: 22px;
clear
Ends a float element. Generally you will create an id of "clear" and place a <div id="clear"></div> after a float that you want to clear.
Usage:
clear: both;
:last-child
Specifies only the last element from a list. For example, if you have a stack of paragraphs with a border along the bottom, but you don't want the last item to have a bottom border, you would style that one using this selector.

Usage:
#list li:last-child {border-bottom: none;}
:hover
This ads a new style to an element only when the mouse is over it. For example, if you want a link to change color or get underlined when mousing over it, you would use this selector.

Usage:
a:hover {text-decoration:none;}
list-style
This determins whether a list item has a bullet next to it or a square or a disc or nothing at all. I use this attribute to create a nav bar by removing the bullets.

Usage:
#nav li {list-style:none;}

Homework:

  1. Read the article "Should Web Designers Know How to Code?". Go ahead and participate in the poll to see what others are saying about this question. This article is more to give you a better knowledge of what the current circumstances are surrounding web design.
  2. Follow along with the video and code out as much CSS as is demonstrated in the video. You will not have to turn this in, but you will need to turn in the finished version the following week with a full code. So, in order to pace yourself, I strongly recommend following along with this week's tutorial, so you do not fall behind.
  3. Go to the discussion board that has been posted, and answer the following questions:
    After having gone through the process of coding the HTML and CSS of a page from a Photoshop document, how has your opinion or perception of what design change?
    From the article "Should Web Designers Know How to Code?", list out your arguments for why you are for or against Web Designers having to learn code.
  4. Post a comment on at least two other people's answers.

Questions?

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