21 rules for converting PSD webpage templates into XHTML

1. There are three color schemes for each PSD source image. You must cut the source image according to the same specifications, and the names of the images in the same region must be the same. 2. Create three folders named by color according to the color scheme, and place the "Color Scheme" in each folder to make the required materials for the webpage.
3. Required content in each color scheme Folder: images, CSS, headers, buttons folder, two HTML files, and two large and small webpages. All the names are shown in the following example, custom content can be freely named.
4. webpage layout. All webpages are composed of the following parts:
· Page header (logo, headers)
· Level 1 navigation bar (buttons)
· Level 2 navigation bar (buttons)
· Page content area (content area is used to display English webpages)
· Footer (bottom menu, copyright)
Based on the PSD file, the area drawn from the source image must be created. areas that do not exist (some do not have Level 2 navigation bars, and some do not have footer) do not need to be created.
5. The first HTML file must be named html.html. Make the entire page in a table.
Page header: You can make the header into a background, or some header images are irregular images. You can also cut them into several parts to minimize the number of cutting times. The logo area is made in a single table (the width of the table can be limited). The logo is divided into three parts: logo image, company name, and company slogan. The company name on the page needs to enter 40 uppercase W characters, company slogans also require 40 uppercase W characters;
Level-1 navigation: the content in the level-1 menu (navigation) must be made in an independent table; the width and height of cells must not be set; six level-1 menu items must be created on the page, enter 20 uppercase W characters in each project (6 W can be entered with one space); the button image requires three state changes of the hyperconnection (according to the PSD diagram, some may only have two statuses). The image and text in each item must be made in one row. You can use the BR to make the Display Effect of the branch.
Secondary navigation (vertical navigation): the content in the secondary menu (navigation) must be created in an independent table. The height of the table cannot be set. The content should be created according to the sample; 10 level-2 menus must be created on the page. Each project must contain 20 uppercase W characters (6 W can be entered with one space ); the text link requires at least two state changes of the hyperconnection.
Page Content Area: Enter enough English characters to open the page (the IE browser that is used on the screen of 1024 × 768 will show up and down stretch lines)
Footer: Enter 40 uppercase W characters in the copyright information area. For the appearance of the page, you must keep a certain distance between the upper and lower areas.
Bottom menu: the content in the secondary menu (navigation) must be made in an independent table. The height of the table cannot be set. Make the content according to the example; on the page, you must create a project with six level-2 menus. Enter 20 uppercase W characters for each project (6 W can be entered with one space ); the text link requires at least two State Changes of hyper-connections; it requires a certain distance between the upper and lower areas for beautiful pages.
6. Requirements for creating the second HTML file: html2.html. Copy the first HTML file, delete part of the content, and retain three first-level navigation, two second-level navigation (vertical navigation), and three bottom menus. Each item contains 6 characters; the content area of the page contains two lines of English characters (do not open the page ).
7. In the above cases, the two pages must have a uniform effect, and the background can be recycled. the header image is displayed in the center or can be expanded (the background can be created in some header areas ).
8. The company name, company slogan, content area page title, and level 1 and level 2 menu fonts should be in standard system fonts, such as tahoma or Arial.
9. When creating a template directory, select "Do not cache thumbnails" in "Tools"> "Folder Options"> "View, in this way, the template zip package does not contain any excess cached files.
The 10、style.css file cannot contain any image connection (instance: Background-image: URL ('.. /images/bg.gif ');), cannot contain the HTML tags definition (for example, CSS should not be applied. If you want to apply the definition, you can directly write it in the HTML Tag ).
11. The charset encoding of HTML must be UTF-8.
12. All (including style sheets and HTML) font sizes must use points (PT) instead of pixels (pixels). The minimum size is 8pt, for example, font-size: 8pt.
13. Elements in the template (DIV, etc.) cannot use absolute positioning or contain JavaScript.
14. All templates have the same effect on Browser IE, Mozilla, and opera.
15. All image paths in the template file must be relative paths. Relative to the "color" path, for example, the file in images under blue should be written as instead of .
16. Some of the special PSD files cannot contain 40 W letters, but the company name and slogan fonts can be reduced, but cannot be smaller than 8 PT.
17. The whole screen must be filled with the template height. The same applies to non-content (vertical extension of content ).
18. The background color must be added to all areas (based on the PSD ).
19. A space character is not allowed.
20. All attribute values must be added.
21. Add "/" to tags that appear unpaired. For example, should be written as