Creating A Site Template in CSS Using Photoshop Image Ready
Image ready will write an html page using CSS. Please download
this image to use as a guideline.
The first part of this tutorial is creating the layout in Image Ready. Image
Ready will produce an HTML document that will have the CSS coded inline or
at the top, depending on your output settings.
The second part of this tutorial will teach you how to move the CSS from
the head of your document and create a separate or external style sheet page
so that you will have one style sheet for all your pages made from the
resulting template. The external style sheet will give you the flexibility
to change colors, dimensions, and locations of your entire site page
contents on the fly by just changing one style sheet.
Part 1: Creating the layout in styles Using Image ready
1. Open the image in image ready. Choose your slice tool and one by one
slice each colored area. There will be 7 slices when you have completed
this.
2. Use the slice select tool to select each of the 7 slices and set on
the slice panel the Type to No Image and set the BG
(background color) to a close color on the image.
3. Open your output settings by clicking file=> output settings=> slices.
Set the Slice output to Generate CSS.
4. Change the output settings to Background and set the color of the
background to the desired color.
5.
Click File=> save optimized as. Set the file type to HTML since there should
be no images left. Save the document. You have completed createing an HTML
layout done with CSS, with no tables whatsoever.
Part 2:
Moving the CSS from the head of your page to an external style sheet.
 6. Open your html in a notepad. Open another notepad document. Copy the
Style sheet contents from the HTML in the head of the document that is
between the comment tag represented as the broken shaded area in the
image below.
7. Paste the style sheet contents in the blank notepad. click File=>Save
as. Set the file type to all files and save as bugs.css.
8. On the HTML doc delete the style tags in the head of the document that
are surrounded by
<!-- ImageReady Styles -->
<!-- End ImageReady Styles -->
9. In the head of the HTML doc place this statement and save:
<link rel="stylesheet" type="text/css" href="bugs.css">
10. Copy the style in quotes from the body tag in the html.
11. Insert a space on the top of your style sheet and type:
body {
}
12. Paste your style in on the line between the brackets:
body{
background-color:#000000; margin-top: 0px; margin-bottom: 0px;
margin-left: 0px; margin-right: 0px;
}
13. Replace the body tag on your HTML doc so it now appears as <body>
14. Save your HTML and your CSS. You are read to place content, menus and
more into the different div (divisions) tags! Edit your CSS to change colors
and placement! |
