Dreamweaver - Slice & Frames, Frames & Slices

Author

Slice & Frames, Frames & Slices

bexineffex

2006-04-18, 10:29 pm

I'm diving into a web design that needs to incorporate both of these. Are they
tough to balance? I'm creating a site layout in Photoshop, then slicing it up
in Image Ready and brining it into Dreamweaver as tables & images. How would I
make some of these sections frames?

darrel

2006-04-18, 10:29 pm

> I'm diving into a web design that needs to incorporate both of these.

Why? ;o)

> Are they
> tough to balance?

They're separate concepts.

> I'm creating a site layout in Photoshop, then slicing it up
> in Image Ready and brining it into Dreamweaver as tables & images. How
> would I
> make some of these sections frames?

You don't. Frames are actually separate pages. Slices are merely a big photo
sliced into smaller parts.

In general, it's best to NOT design web sites this way, as sites sliced from
photoshop tend to be inflexible, a pain to update, and bloated.

Not that you can't do it, it just takes a lot of care and understanding of
the underlying HTML imageready is making.

-Darrel

bexineffex

2006-04-18, 10:29 pm

i feel you darrel. that totally makes sense. i understand them as separate
concepts, but for some reason i wasn't thinking of it that way. thank you for
pointing it out! well, can i ask you for some advice? i want to create a site
with the basic layout design that you see at www.badazsite.com. Where the
buttons on the left, control the content in the mainframe and the section right
above that includes the heading. it's a little graphically complex, which is
what made me think of slicing it to begin with. What approach do you think
should I take to execute this design? Any suggestions would be greatly
appreciated.

bregent

2006-04-18, 10:29 pm

>www.badazsite.com

I would not use frames to build this site - just link flat pages.

bexineffex

2006-04-18, 10:29 pm

so you mean, make every web page a single unit, repeat the buttons on the left
and change the content on the right? isn't that going to be a heavy file for
the browser to have to download for every time a user wants to view a page?

darrel

2006-04-18, 10:29 pm

>i feel you darrel. that totally makes sense. i understand them as
>separate
> concepts, but for some reason i wasn't thinking of it that way. thank you
> for
> pointing it out! well, can i ask you for some advice? i want to create a
> site
> with the basic layout design that you see at www.badazsite.com. Where the
> buttons on the left, control the content in the mainframe and the section
> right
> above that includes the heading. it's a little graphically complex, which
> is
> what made me think of slicing it to begin with. What approach do you
> think
> should I take to execute this design?

That page looks great as a poster. But it may not be ideal for a web
interface.

That said, I'd make the entire left side (all the buttons and tabs) as a
sliced table if you want to use rollovers. It will be messy, and bloated,
but to accomodate that layout, that's what you'd need to do.

Then, the right side could be 3 divs:

- top (logo)
- middle (Your content)
- bottom (your footer)

Create a page for each link and then link them all together.

No need for frames on the page at all.

-Darrel

darrel

2006-04-18, 10:29 pm

> so you mean, make every web page a single unit, repeat the buttons on the
> left
> and change the content on the right? isn't that going to be a heavy file
> for
> the browser to have to download for every time a user wants to view a
> page?

The images are only downloaded once. Then reused on every other page.

That is provided you're not slicing up a unique Photoshop file for each
individual page...which you certainly don't want to do.

-Darrel

CSI Bruce

2006-04-18, 10:29 pm

The browser will only have to download anything that hasn't already been
downloaded, as it caches everything. For instance, say you have button1,
button2, button3, button4 on each page, then on the first page you have
miscimage1 and on the second page you have miscimage2. When someone goes to the
second page the browser only has to download miscimage2. When they go back to
the first page nothing is downloaded since it's in the cache.

bexineffex

2006-04-18, 10:29 pm

so...just to be clear...

i should slice up the page as planned so that the graphics all stay lined up.

i should slice each of the pages up the same and name the slices the same
things, that way the repeated segments only have to be downloaded once.

i know you said not to slice up the page, but that seems to make the most
sense in terms of loading speed, right?

does that all sound good?

CSI Bruce

2006-04-18, 10:29 pm

"i should slice each of the pages up the same and name the slices the same
things, that way the repeated segments only have to be downloaded once."

Do you have a different graphic for each page, or will each page use the same
graphic?

bexineffex

2006-04-18, 10:29 pm

for the most part, the navigation circles on the left side of the page are
going to remain the same for all the sections. the content in the box on the
right is going to change. the way i'm laying it out right now, is that it's
all in one photoshop document with separate layers for the headings and the
page content that are being turned on and off. the stuff on the left is always
on.

darrel

2006-04-18, 10:29 pm

> all in one photoshop document with separate layers for the headings and
> the
> page content

Usually you don't want your 'content' to also be images. If it's text based
content, make it text.

-Darrel

darrel

2006-04-18, 10:29 pm

> i should slice up the page as planned so that the graphics all stay lined
> up.

The left half, yes.

The right half doesn't need to be a bunch of slices, though.

> i should slice each of the pages up the same and name the slices the same
> things, that way the repeated segments only have to be downloaded once.

No. You just slice up ONE page, and then use that as your template for all
the others. You shouldn't have more than one Photoshop file.

> i know you said not to slice up the page, but that seems to make the most
> sense in terms of loading speed, right?

Slicing typically slows down the page load as it adds multiple image request
and a lot of bulky HTML.

-Darrel

bexineffex

2006-04-18, 10:29 pm

some of our content is going to be text, but for the most part it will be images because we are using specific fonts and selling jewelry, so a lot of photos are inevidable.

Michael Fesser

2006-04-18, 10:29 pm

..oO(bexineffex)

>some of our content is going to be text, but for the most part it will
>be images because we are using specific fonts and selling jewelry, so a
>lot of photos are inevidable.

Text in images will be inaccessible for many people and can't be read by
search engines. It's only acceptable (if at all) for headings, but never
for the normal text.

Micha