In this tutorial we will see how to convert a template made in Photoshop to a web site; xhtml with CSS directly from Photoshop.
This method is recommended for designers who do not know a lot of code. It is a simple way to start and play with the code to learn how to modify it.
We start with a basic template for website. I recommend you see the article: Part of a blog to get an idea of how your design should be and which parts should contain.
The first thing we need to do is identify the various parts of our site as a banner, buttons, sidebar, etc. We mark these parts with the guides.
Select the slice tool
With this tool, select the parts marked with the guidelines.
Once we have made every slice, select the slice select tool
With the right button or ctrl. Click select one of the slices.
In the slice menu options proceed to put a particular name, such as banner.
Do it with each of the cuts.
Once you have all the names go to menu file / save for web and devices
Click on save
In the menu select images in HTML format, and settings / other
Then a menu will appear where you specify the options to save as a web page.
On the first window select xhtml
Now select generate CSS and By ID
In the next window you can choose the background color or image
Finally we give ok and save.
The result will be an HTML file with a folder with images.
If we open the HTML file in the upper section we have the CSS code
At the bottom HTML
With small changes in the code can add text to the sections we determined for this. First add the text in the corresponding division
Then modify the CSS rule to determine the font, color, background color, etc..
Now we have a very basic site made with Photoshop. This method is great to create quick templates that you can modify latter.