Since many friends have asked about how to cut pictures, and since this problem can be big or small, it is absolutely impossible to explain it clearly in one or two sentences, so I will give a simple example to illustrate this problem when I have free time at home today! OK , let’s start:
step1: Open the design draft in PhotoShop, as shown below
Select the slice tool on the tool board, and make a bold cut first! Tips: Cut a large area of color block into one piece separately, and keep it as neat as possible on the horizontal line (you will learn more about this issue in the later production page) Feeling) The cut picture is as follows:
step2: Select file-save for web... in PhotoShop to output. Pay attention to the selection of some parameters here:
Let's take a look at the parts 1, 2, and 3 marked by the red line. Select the slicing tool shown in 1, then click on the picture shown in 2, and select the color value in the place shown in 3. If the color is single, you can choose as small as possible. The color value bit; (Why is this??) Answer: This will greatly reduce the size of the file and at the same time better maintain the color of the picture; after setting it, click OK to output the file. The file here includes an htm and images folder, as shown in the figure:
Your page is only half completed at this point. Next, create the site in Dreamweaver:
step3: Define the site:
Give the site a name in the site name on the left side of the image, such as example
Then select all the folders of the site we just exported in the local root folder below; after the site is built, we will see in the site map:
(Why build a website?) Building a website allows us to develop a good habit, which is to put the files and folders contained in a website together in an orderly manner. At the same time, we can easily move the site to other places. place without any rewriting of the file path! (Of course, if you really don’t want to build a site, no one will force you. I have encountered such colleagues in my work. They are not used to building sites for pages. Of course, the consequences will be a lot of trouble. )
step4: Re-create the page table (why?) Usually the htm file exported directly in photoshop cannot be used directly, because some places need to be adjusted during actual use, such as places with dynamic text, we need to add them to the page If the input page does not use pictures, then the pictures must be taken away. If you take away the unwanted pictures and add the things you want in the directly generated htm, you will find that the page will become terrible, and the entire page may Total chaos!
Okay, let’s first analyze the exported htm file:
According to the table on this page, we create a table with three rows and one column in the new page:
Note that it is very important to set the cellpadding, cellspacing, and border values to 0; because we do not want to see gaps and misalignments in the picture; then insert a table with three rows and two columns in the first row, and merge the left A three-column table, as shown in the figure:
When inserting a table, you should pay attention to comparing the content in the original htm file and think about why you do this;
Next, insert a table with two rows and two columns in the second row, merge the left grid as above, and insert a one-row, five-column table in the first row of the right grid as shown:
Finally, insert a table with three rows and two columns in the lower row, and merge the items 1 and 2 in the picture:
Okay, now our task is to add pictures and content to the table! I won’t go into details here! (In fact, it’s already been said enough!)
I also want to remind everyone that when adding pictures and content, the table unit The two attributes of align and valign are very important. You should spare no effort to use them to help you do things! OK, practice it yourself!