Here's a few simple steps to publishing your web layouts CSS (Cascading Style
Sheet) driven directly with ImageReady before it even reaches your favorite html
editor.
For more information on these CSS (Cascading Style Sheet) web standard consult
W3C CSS Recommendations
for further information.
To begin this process without embarking on the making of a full layout (Like I
did for the XHTML tutorial). Lets open up ImageReady CS, start a new document of
any preset size.
Next, go 'Window/Actions' to bring the Actions Palette to the foreground, if it
isn't already.
Now, create a simple layout from a 'Make Website' action preset from the
actions list.
Activate the 'Make Website' then hit the 'Play' action playback button on the
bottom of the Actions Palette, as I have captured below.
Note: Make sure you have a blank document open as mentioned earlier,
otherwise you will be prompted with a serious of error messages related to the
action.(Which requires to be run on an active document)
Once the 'Make Website' action is finished, you should have a document like the
capture below.
Click above image for a larger view!
This action creates a ready made layout design, complete with 2-state roll-over navigational buttons and with slices. (As indicated by the blue/green border areas)
An Important Note with this template to be aware of is that once you
'Save Optimized As' to generate the html file for the browser, this template
generates not only one html file, but 6 html files. One for the 'File Name'
preference you give it in the 'Save Optimized As' dialog box. The remaining 5
html files are automatically created for each button navigational item.
This is a preference item that has to be set before you go to the 'Save
Optimized As' command feature.
To locate this preference, go to the far upper right of the 'Optimized View'
document window, and click the 'Output Settings' menu button (Highlighted in Red
below), and from the list choose 'Other'. (Notice I have my own output settings
in the list 'heathrowe1')
Hit the 'Next' button on the right to go to the 'Saving Html Files'
preference (As captured below), and the option to 'Output Multiple Files' is
what produces the above extra navigational bottoms on the fly.
Note: Untick the 'Use Long Filename extension (*.html) will generate just the
three letter .htm file name extension on output.
Back to the web layout and creating the .css elements for the html pages. You may have noticed it already if you wondered through the above settings. To set up for css compatibility, go back to that same 'Output Settings' menu button (Highlighted in Red), and from the list choose 'Other'. (As I have captured below)
Hit the 'Next' button until you get to the 'Slices' options. Then simply,
then simply activate the 'Generate CSS' feature, choosing one of the three style
options(ID, Inline, By Class). (As I have captured below)
I recommend the by 'Id' or 'By Class' options so that when you get to your html
editor you can easily copy the entire style to an external style sheet file.
Now with this feature active, the next time you go to 'Save Optimized As',
ImageReady will include all the necessary .css style information embedded into
your html file.
Below is a brief comparison of choosing 'Generate Table vs Generate CSS':
As the above indicates, the 'Generate Table' option produces the standard
Table/Td/Tr tags to the layout scheme based on the template slice positions.
'Generate CSS' however, does not use the table/td/tr scheme, but a div tag with
the appropriate id element (indicated by the red arrow)
for the assigned css style.
It's not perfect, and theres a lot to consider when building a totally css
driven site, which is why I pointed out the W3C Specification link above. But
certainly, a quick way to migrate a tabula layout to css style layout.
If you viewed this action preset web page layout in your default browser with
the 'Generate Table' option activated, everything appears as it should.
But when you activate the 'Generate CSS' option, not everything falls into place
at should appear in the ImageReady Preview window.
This occurred only due to the nature of how this action driven Create Web
page was built. I quickly fixed this problem by going to the 'Table' Palette and
changed the 'W' (Width) parameter from 'Percent to Pixels. (This fixed the top
overlapping Blue Band)
To fix the bottom overlapping blue band, activate the 'Slice Select Tool (O)'
and double click each of slices number 12/13/14 (respectively) and from within
the 'Slice Palette' (which should appear to the foreground upon double clicking
the slice) and change the 'Background Color' parameter from the default dark
blue to 'None'.
Now lets say you want to use this css output capability at any given time.
Simply, go back to the 'Output Settings' menu command and choose 'Other', as I
have captured.
Again browse (hit the 'Next' button, to the 'Slices' area and activate
'Generate CSS'.
Then to the right of the panel, hit the 'Save' command, and upon prompt give it
a user friendly name as I have captured below. (Example heathroweCSS.iros) This
should prompt you to the default 'Output Optimized Settings' folder.
So, now the next time you want to use this css preset, go back to 'Output Settings' menu command and in the list is the new one just created. (As captured below) Select it and 'Save Optimized As' you layout with the new css settings.
Note: Make sure to change the 'Output Settings' from your 'Custom
Name' preset to 'Default' for future layouts that don't require it.
Note: The 'heathrowe1' preset in the list combines the above .css
settings as well as the xhtml settings to achieve both XHTML Transitional & CSS
standards.