From the page template to the page to create a full introduction

From the page template to the page to create a full introduction

Since many friends ask how to cut the problem, and given that this problem can be very small, one or two words are absolutely unclear, so there is free at home today to give a simple example to illustrate this problem! OK, let's get started:

Step1: Open the design in Photoshop, such as

Select the slice slicing tool on the tool board to make a bold cut! Tip: A large area of the color block is cut into pieces separately, as far as possible to maintain the horizontal level of neat (this question you in the production page in the back of the deep feeling) cut the picture as follows:

Step2: Select File-save for Web in Photoshop ... To output, here are some parameters to choose from:

Let's take a look at the three-way section identified by the Red line, select the Slice tool shown in 1, then click on the image shown in 2, select the color value in 3, and if the color is single, choose the small color value bit; Answer: This will greatly reduce the size of the file, but also better to maintain the color of the picture; set the OK output file, where the file includes an HTM and Images folder,

Your page is half done here, and then you build the site in Dreamweaver:

Step3: Define a site:

A name for the site, such as example, in Site name on the left side of the diagram

Then in the following local root folder to select the site we just exported, so the folder, after the site was built in the site map we see:

(Why build a site?) Set up a site can make us a good habit, is to put a site contains files, folders organized together, and we easily move this site to other places without any rewriting of the file path! (Of course, if you really do not want to set up a site and no one to ask you, I encountered such colleagues in the inter-work, no habit 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 file is not directly used, because some places in the actual use to make adjustments, such as where there is dynamic text, we need to enter pages in the page is not to use the picture, then the picture will take it away, If you take unwanted pictures in the directly generated HTM and add what you want, you find the page will be miserable and the entire page may be completely messed up!

OK, let's start by analyzing the exported HTM file:

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

Note that it is important to set the Cellpadding,cellspacing,border three value to 0, because we do not want to see gaps and dislocations in the image, and then insert a three-row, two-column table in the first row, and merge the table with the three columns on the left.

When inserting a table, be careful to compare the contents of the original HTM file and think about why;

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

Finally, insert a three-row, two-column table in the following line and merge each of the figures in the illustration:

The last page to get is this:

Well, now our task is to add content to the table! Here is not to repeat it! (In fact, it has been more than enough to repeat!)

It is also important to note that when adding pictures and content, the align,valign of the table cells is very significant, and you should spare no effort to use them to help you do things! OK, Practice it yourself!

From the page template to the page to create a full introduction