Web page production tips: from Chettu to Web page generation full Raiders

Since a lot of friends ask how to cut the problem, and in view of this problem can be very small, one or two words is absolutely not clear, so today have free at home to give a simple example to illustrate this problem! OK, let's get started:

Step1: Open the design draft in Photoshop

Select the slice slicing tool on the tool board, first make a drastic cut! Tip: A large area of color is cut into pieces individually, as far as possible to maintain the neat horizontal line (the problem you are in the back of the production page deep feeling) cut a good picture as follows:

Step2: Select File-save for Web in Photoshop ... To output, here is the choice of some parameters to note:

Let's take a look at the 1,2,3 section identified by the Red line, select the Slice tool shown in 1, then click the picture shown in 2, select the color value in 3, and choose the color value as small as possible; (why?) Answer: This will greatly reduce the size of the file, but also to better maintain the color of the picture; set up after the OK output file, where the file includes an HTM and Images folder, as shown:

This is the end of your page to complete the half, and then set up a site in Dreamweaver:

Step3: Define site:

Name a site in the site name on the left side of the diagram, such as example

Then, in the following local root folder, select the site that we just exported, and then we see in Site map:

(Why do you want to set up a site?) The establishment of a site can make us develop a very good habit, that is, a site contains files, folders organized together, and we are very easy to move the site to other places without the file path for any rewrite! (Of course, if you really do not want to set up a site and no one forced you, I encountered in the work of such colleagues, no custom for the page to establish a site, of course, the consequences of less trouble)

STEP4: Re-create the page table (why?) Usually in Photoshop directly exported HTM files can not be used directly, because some places in the actual use to make adjustments, such as where there is dynamic text, we need to enter the page in the page is not the use of pictures, then the picture will take it away, If you take unwanted pictures in the directly generated HTM and add what you want, you find that the page will be miserable and the entire page may be completely messed up!

OK, let's analyze the exported HTM file first:

As shown in this page table, we create a three-row table in the new page:

Note that it's important to set the value of the Cellpadding,cellspacing,border three to 0, because we don't want to see gaps and dislocations in the picture, and then insert a three row two table in the first row and merge the three columns on the left, as shown:

When inserting a table, be careful to compare the content in the original HTM file and think about why.

Next, insert a table of two rows and two columns in the second row, merge the left grid by the above method, and insert a row of five columns in the first row of the right-hand grid as shown in the chart:

Finally, insert a table of three rows and two columns in the following line and merge the 1,2 out of the diagram separately:

The resulting page should be like this:

All right, now our task is to add the content to the table! No more details here! (In fact, enough has been done!)

Also remind you that in addition to the picture and content, table cell align,valign These two attributes are very important, you should spare no effort to use them to help you do things! OK, Practice for yourself!