Create CSS file with Web Slices in Photoshop

For one of my web site assignments i was playing around with the web slices features in photoshop and found that when you create your web slices you can have photoshop make all the slices float in DIV tags insted of putting everything into tables.

To do this create your webslices in photoshop like you normally would but when you go to save for web and devices and you click save in the pop up box where you can name what you want to save your slices as: go to the setting drop down list and choose "Other..." from the choices.

Another dialogue window will pop up called 'Output Settings' will open in here you can change a multiple number of options but since the CSS is what we're concerned with you want to click on the second drop down menu from the top and select 'Slices'. Click the radio button that says 'Generate CSS' and in the 'Referenced' drop down menu choose 'By ID'.

Go head and click OK and name your file (if you already haven't) and click save. This will generate an HTML file and a folder called 'images' where all the slices are saved.

Next you need to open dreamweaver if you don't already have it open, and open up the HTML file that you just created. This is where is gets a little tricky because photoshop combines the CSS with the DIV tags all in the same HTML file. To separate out the CSS to add to a new or existing CSS file you want to open your existing CSS file or go to 'File > New' and in the page type choose CSS.

Now go back to the HTML file you created in Photoshop and click 'Code View' from the display type. In the page code you want to copy everything between the:

brackets, not including the , and paste the code into your CSS file. Then save it in your web site root folder. Now create a new HTML file. Between the '' and the '' brackets insert the code:


If your CSS is in a folder within your root folder your code should look like this:



The '../' denotes your main web root folder, where ever it is located locally. In the body of the new HTML page you just created copy and paste all the DIV tage code from your photoshop HTML file (the code between the and the tags).

Voila! Go back to "Design View" in dreamweaver and refresh your page. Everything should look the way you created it in Photoshop.

Side Note: for good measure you should probably put a container DIV around all your Div slices incase you want to do things like centering your web page within the browser.

Hope this helps!