This is the P2PU Archive. If you want the current site, go to www.p2pu.org!
From GIMP to xHTML and CSS
Course Material
- Syllabus for From GIMP to xHTML and CSS
- Recommended reading
- Images and dimensions for the webpage design (HTML, CSS)
- Image Dimensions for the design (GIMP)
- Chat log for WEEK 1
- Final Design (JPEG attachment)
- HTML file, CSS file, images
- Part 5: making the Central Column full height and making the footer sticky
- Part 4: adding the images to the page
- Part 3 - styling the HTML (no images yet) (DRAFT)
- Part 2 - creating the HTML and applying structure (DRAFT)
- Basic Template we will use (xhtml 1.0 Strict)
- Part 1 - creating the Design in GIMP: links to the Youtube videos
- Coding the page - draft
Image Dimensions for the design (GIMP)
- Entire canvas is 1280px wide and 1024px high
- The central column is 960px wide by 1024px high. It has a 20px padding on the left and right sides (to create room for the borders)
- The header is 960px wide and 204px high
- The navigation bar is 960px wide and 90px high. It has a 30px padding on the left and right (for whitespace)
- The navigation buttons are 171px wide and 58px high
- The body content area is 960px wide, with a 30px padding on the left and right (for whitespace, same as 'menu', so nav buttons and body text will line up). This means the width that is left for the content (the columns and text) is 960-30-30 = 900px.
- We have two columns, meaning each column has a width of 900px/2 = 450px. We also need padding to the right of the first column and to the left of the second column. Let's say we want 30px of padding on each side.
- This means: the LEFT column has a width of 420px (450px width - 30px of padding) and 30px of RIGHT padding. And the RIGHT column has a width of 420px (450px width - 30px of padding) and 30px of LEFT padding.
- The footer background is 960px wide and 105px high.
NOTE: we will deal with font sizes, line-height and vertical space between paragraphs when we start coding (xhtml and css).
