How to use Photoshop to output HTML (div + CSS) webpages

After modifying the corresponding text and image, we will output the PSD file (x) HTML file.

First, slice the PSD file. There are two methods:

① Use the "slicing tool" on the toolbar ",

 

Then draw a block of area on the image.

 

② Use the reference line-based slicing and press Ctrl + R to bring up the ruler bar,

 

Move the mouse over the ruler, hold down the left mouse button, and move it to the image. A green reference line is displayed,

 

Arrange the reference line, click the slicing tool chart on the toolbar, and click the above

"Reference Line-based slicing" in the option bar ". As a result, it became a piece of slice on the original reference line.

 

Next we can output:
① Select "file"> "storage as Web format"> "Storage" on the menu bar in sequence ".

② Next, a window "store optimization results as" will pop up,

 

You can select a drop-down box in the "Save type" field. Because we want to store the file as a webpage, select "HTML and image (* html )", select "save" to output an HTML file in Webpage format and a folder named "Images" containing images.

 

③ If we need to output "Div + CSS webpage", we can also do this:
In the drop-down box of "Settings", select "others"

 

A "output settings" window will pop up.

Select "slice" in the 2nd drop-down list"

 

Select "generate CSS"

Click "OK"> "save" to output an HTML webpage that is currently popular with "Div + CSS.