1. The document outlines 10 steps to convert a PSD file to XHTML and CSS: separate content from decoration, make a webpage layout, create XHTML markup, validate XHTML, slice the PSD, export slices as images, apply CSS, validate CSS, test for bugs, and test for cross-browser bugs. 2. Key aspects of the conversion include examining the design to separate information content from decorative elements, creating XHTML divs for content sections, slicing images from the PSD and exporting them, and applying CSS styles while validating the code and testing for bugs across browsers. 3. The goal is to have the XHTML match the PSD design while keeping file sizes small through optimized images and efficient code.

1. Cut PSD to XTHML TrầnKhảiHoàng

2. Prepare folder to contain your work Recommend : / index.html images/ js/ css/ Step 0

3. Examine design to separate content & decoration : Content is what brings readers INFORMATION Decoration is art that makes content BEAUTIFUL, OUTSTANDING, EMPHATIC… INFORMATION isn’t lost when removing decoration INFORMATION = XHTML DECORATION = CSS Step 1

4. Make webpage layout Group content together, wrap each group with an rectangle Name each rectangle An typical layout : Step 2

5. Create XHTML markup : Create a <div> to wrap all rectangles Each rectangle becomes a <div> Change content to XHTML : Link uses <a> List uses <ol> or <li> Paragraph uses <p>…. If content has images, uses fake images (we will replace them later) Remember : Use !DOCTYPE & XHTML Step 3

7. Slice the PSD Begin with a rectangle, then go to another Which to slice ? Content image : logos, illustration images, text with special font, … Background image : menus, borders, page background , rounded corners, hover background… Bullet : list bullet,icon… Step 5

8. Don’t slice too small Name each slice based on its role not its content Be consistent when naming slice (use a convention). Ex : logo, bullet1,bullet2,headerBg,leftTop … Ex : logo, bullet_1,bullet_2,header_bg,left_top … Step 5 - Notice

9. Export slice to image Choose the right image type : JPG : good for photo, gradient or image with many colors. No transparency GIF : good for chart, drawing, bullet, text image with less colors(<256 color). Preserve transparency PNG : good when we need to preserve transparency and large amount of colors or partial transparency JPG : lossy , GIF, PNG lossless Step 6

10. Choose JPG quality to reduce image size : Quality = Medium, Low for background Quality = High for important content or decoration Quality = High for artwork Popular optimization around 50%-75% Step 6 - Notice

11. Apply CSS to markup : Reset CSS Add typography Determine using fixed or fluid layout then apply it Begin decoration from top -> bottom Step 7

12. Validate your CSS Step 8

13. Test & fix bugs Compare your XHTML vs PSD side by side to identify bugs Zoom in, out your HTML Test with different web page size Check links and hover effect Step 9

14. Test & fix cross-browser bugs Identify your target : >IE6,>FF2,>Opera9… Use IE Tester or Virtual box to test on multiple IE Check all know IE6 bugs Place browsers side by side to find bugs Step 10

15. First : XHTML is identical to the PSD Second : XHTML, CSS, JS validated Third : Less images, less size (image, css, js) and less divs, less id, less classes Good cut