Marc Funaro wrote:
> What about the rounded corners that make up the what and light green
> areas? Do I still need to use images to create that effect? I'm
> really not sure where to start with this Photoshop file... I just
> don't know "the process". It sounds like I need to export practically
> each layer as a separate image, and then place each "by hand".... Is
> this correct?
Focus on each, main, container, and give it the top rounded-corner part
as a non-repeated background-image. Use the proper background-color on
the container, and add a div (or other block-element) at the bottom to
carry the bottom rounded-corner part.
Repeat process/source-code for the white 'Body Content' column.
> And for the background, simply set the color of the entire background
> of the page to the dark green?
In short: yes.
> Is this all done "by hand", or is there such a thing as a "drag and
> drop" type of CSS editor that would allow me to place images in a
> space and work with them visually? Not wanting to cut corners, just
> work most efficiently if there are better tools out there for me than
> TopStyle or StyleMaster...
No suitable html/css "drag and drop" editor capable of doing a good job
and provide compact and efficient source-code/CSS yet - AFAIK.
I arrange my source-code on 'hand coding' level - using Opera in
'accessibility - text browser' style mode, and rarely ever bother to
look at it in a graphical browser until the source-code is around 90%
finished.
I use Notepad for CSS - *because* it doesn't disturb my creativity by
doing anything on its own, and watch things take shape directly in the
full-blown browser of choice - which to me is Opera 9beta at the moment.
Firefox, Safari and IE6 are also up on screens, in case I want a
"preview" in any of those.
>> [... ]In short: avoid "divitis".
>
> Again, I understand this in theory... I have read a great deal, but I
> think my biggest issue at the moment is "where to start" - if a
> direct export of the entire template from Photoshop is not the way to
> go, or if there's not an "easier way" to split out each layer in PS,
> then what are the recommended next steps, starting with just a .psd
> file?
Skip all "design stages", as you already have a design. Keep that design
in your head, and move on.
Choose a Doctype - preferably a Strict one, and start "sketching"
the layout as well sequenced source-code.
The usual html basics, followed by...
1: Header container-div [
include all images, but don't style any of them yet.
]
2: Main container-div [
3: Body Content container-div (fill in some paragraphs here)
4: Added stuff container-div (the left-side one. Fill in some stuff here
- preferably in an unordered list since that's what the present content
seems to fit best into.)
]
5: Footer container-div (which can also carry the rounded-corner part of
Main Container).
Those 5 container-divs can then be roughly dimensioned, floated, cleared
where necessary, and trimmed into positions - using in-flow and
'negative margins' methods.
That's the basics, but it will look "pretty rough" to begin with :-)
A few more elements must be added for styling, but leave them out until
you run out of style-options with the basic ones. Never mind the
details... for now.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
