How to Code a DIV Using Photoshop

Photoshop includes a "Slice" tool that you can use to create a Web page structured with "<div>" tags. While the default settings for creating an HTML page in Photoshop structure your page with "<table>" tags, the settings can be adjusted to incorporate a "<div>" structure instead. This option allows you to create Web pages from images and documents without requiring a lot of additional coding, as would be necessary if you were attempting to recreate your page from scratch.

Instructions

1. • 1
     Right-click the file that you want to edit in Photoshop, click "Open With," and then click "Adobe Photoshop."
   • 2
     Right-click the "Crop Tool" icon in the toolbox at the left side of the window, and then click the "Slice Tool."
   • 3
     Click on the canvas at the center of the screen, and then drag your mouse to select a section of the image that you want to set as a "<div>" object. Repeat this step for each section of the canvas.
   • 4
     Click "File" at the top of the window, and then click "Save For Web And Devices."
   • 5
     Click the "Save" button.
   • 6
     Click the drop-down menu to the right of "Format," and then click "HTML and Images."
   • 7
     Click the drop-down menu to the right of "Settings," and then click "Other." This will open a new window.
   • 8
     Click the drop-down menu to the right of "Settings," and then click "XHTML."
   • 9
     Click the "Next" button.
   • 10
     Click the "Generate CSS" option in the "Slice Output" section of the window.
   • 11
     Click "OK" and then click "Save."