Home
》》》》》》》1![[IR]ImageReady Tutorial CSS Using Photoshop Image Ready Empty](https://2img.net/i/empty.gif)
[IR]ImageReady Tutorial CSS Using Photoshop Image Ready Tue Sep 21, 2010 8:40 pm
Admin
Admin
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.
[You must be registered and logged in to see this image.]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
<BLOCKQUOTE>
<BLOCKQUOTE>
<!-- ImageReady Styles -->
<!-- End ImageReady Styles --></BLOCKQUOTE></BLOCKQUOTE>
9. In the head of the HTML doc place this statement and save:
<BLOCKQUOTE>
<link rel="stylesheet" type="text/css" href="bugs.css"></BLOCKQUOTE>
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:
<BLOCKQUOTE>
<BLOCKQUOTE>
body {
}</BLOCKQUOTE></BLOCKQUOTE>
12. Paste your style in on the line between the brackets:
<BLOCKQUOTE>
<BLOCKQUOTE>
body{
background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
}</BLOCKQUOTE></BLOCKQUOTE>
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!]
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.
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
3. Open your output settings by clicking file=> output settings=> slices. Set the Slice output to Generate CSS.
[You must be registered and logged in to see this image.]
4. Change the output settings to Background and set the color of the background to the desired color.
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]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
<BLOCKQUOTE>
<BLOCKQUOTE>
<!-- ImageReady Styles -->
<!-- End ImageReady Styles --></BLOCKQUOTE></BLOCKQUOTE>
9. In the head of the HTML doc place this statement and save:
<BLOCKQUOTE>
<link rel="stylesheet" type="text/css" href="bugs.css"></BLOCKQUOTE>
10. Copy the style in quotes from the body tag in the html.
[You must be registered and logged in to see this image.]
11. Insert a space on the top of your style sheet and type:
<BLOCKQUOTE>
<BLOCKQUOTE>
body {
}</BLOCKQUOTE></BLOCKQUOTE>
12. Paste your style in on the line between the brackets:
<BLOCKQUOTE>
<BLOCKQUOTE>
body{
background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
}</BLOCKQUOTE></BLOCKQUOTE>
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!]
