Design effects

  • Thread starter Thread starter C Tate
  • Start date Start date
C

C Tate

Hi

I am new to web design and even newer to Front Page. I've been having a look
at various websites to try and see what sort of effects people achieve. I am
interested in trying to get beyond tables and the absolute basics. I was
looking at this site: http://www.connexionsdancestudio.com/ and was
wondering how they achieve the wavy line effect. You often see things like
this in websites but the books I've seen never explain how to do it! Another
site is: http://www.robertstonetherapeutics.co.uk/. It also has a kind of
wavy line. I don't know if either has been done in Front Page, I suspect
not, but I just wondered if it is possible to replicate the effect in Front
Page. If so, how?! Any pointers to tutorials, websites etc that give an
idiot-style explanation would be much appreciated. Thanks.
 
Images used as a background to table cells.

<tr>
<td width="250" background="images/left_bar.gif">&nbsp;</td>
<td background="images/right_bar.gif">&nbsp;</td>
</tr>
 
It's done by slicing images in a image editor like Photoshop etc. Then
placing images into table cells. In other words you'd create a big image in
Photoshop (or whatever) for the size of the webpage (lets say 800 x 600)
then slice it where you want it, save the pieces you need and ditch the ones
you don't need.

An easy way of seeing how a site has done something your interested in, is
to browse to the site, then click on Edit in FrontPage (the button on your
toolbar if you're using IE) then when prompted for password just click
Cancel. It will open that page in FP.



| Hi
|
| I am new to web design and even newer to Front Page. I've been having a
look
| at various websites to try and see what sort of effects people achieve. I
am
| interested in trying to get beyond tables and the absolute basics. I was
| looking at this site: http://www.connexionsdancestudio.com/ and was
| wondering how they achieve the wavy line effect. You often see things like
| this in websites but the books I've seen never explain how to do it!
Another
| site is: http://www.robertstonetherapeutics.co.uk/. It also has a kind of
| wavy line. I don't know if either has been done in Front Page, I suspect
| not, but I just wondered if it is possible to replicate the effect in
Front
| Page. If so, how?! Any pointers to tutorials, websites etc that give an
| idiot-style explanation would be much appreciated. Thanks.
|
|
 
Many thanks. When you say 'slicing' is this like cutting and pasting the
image? Are you aware of any good books or online tutorials that could take
me through the whole process in a sort of sample site?
 
Yer Welcome.

Each image editor capable of slicing an image does it in slightly different
ways.

Do a Google search for "image slicer" I think there was a small trial
program called Image Splitter that I had tried once that worked pretty
good...but the output was watermarked so you really cant use it for real
unless you buy it, which I didn't.

Some programs that I know do slicing, but there's sure to be way more than
this:
Photoshop
Xara
Ulead
http://www.ulead.com/learning/web8/page1.htm

I don't use slicing to supposedly speed up downloads or foil image
thieves...I the technique for design, exactly what you were asking abt.


| Many thanks. When you say 'slicing' is this like cutting and pasting the
| image? Are you aware of any good books or online tutorials that could take
| me through the whole process in a sort of sample site?
| | > It's done by slicing images in a image editor like Photoshop etc. Then
| > placing images into table cells. In other words you'd create a big image
| > in
| > Photoshop (or whatever) for the size of the webpage (lets say 800 x 600)
| > then slice it where you want it, save the pieces you need and ditch the
| > ones
| > you don't need.
| >
| > An easy way of seeing how a site has done something your interested in,
is
| > to browse to the site, then click on Edit in FrontPage (the button on
your
| > toolbar if you're using IE) then when prompted for password just click
| > Cancel. It will open that page in FP.
| >
| >
| >
| > | > | Hi
| > |
| > | I am new to web design and even newer to Front Page. I've been having
a
| > look
| > | at various websites to try and see what sort of effects people
achieve.
| > I
| > am
| > | interested in trying to get beyond tables and the absolute basics. I
was
| > | looking at this site: http://www.connexionsdancestudio.com/ and was
| > | wondering how they achieve the wavy line effect. You often see things
| > like
| > | this in websites but the books I've seen never explain how to do it!
| > Another
| > | site is: http://www.robertstonetherapeutics.co.uk/. It also has a kind
| > of
| > | wavy line. I don't know if either has been done in Front Page, I
suspect
| > | not, but I just wondered if it is possible to replicate the effect in
| > Front
| > | Page. If so, how?! Any pointers to tutorials, websites etc that give
an
| > | idiot-style explanation would be much appreciated. Thanks.
| > |
| > |
| >
| >
|
|
 
No, it's like cutting the image in to pieces - to use an analogy, start with
the whole pie, cut it into slices - but you still have a "whole pie" - then
you reassemble the whole image made up of the pieces in a table the graphics
program usually exports the slices and creates the html for you.

Photoshop (or whatever you use) may have such a "slicing" tool. Has nothing
to do with "cut and paste".

I use this simple application - http://www.iron-fe-works.com/ - all it does
is allows you to slice up the image and export to an HTML table.
 
I like Macromedia Fireworks because it does everything -- graphics, slicing ,
rollovers etc. Does most everything Photoshop does but is a completely
integrated program that was made specifically for web designers. And its help
menus show you how to do everything.

It is cheaper than Photoshop, but I'm sure there are other graphics programs
cheaper than Fireworks also.
 
Back
Top