Developing Webs logo
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Remember to book mark this site!

Request a Tutorial

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:

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!

"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2020 All Rights Reserved
Privacy and Legal