how to arrange pictures on web page

Ronx · May 2, 2007

Upgrade to FP2003 or try the Expression Web trial.
Both of these programs will set up the layers from Design View,
Expression Web will also set up the relatively positioned container in
Design View.

In my opinion, if you are going for the design you want you either need
to get a web designer on your payroll, or learn CSS and HTML and dive
into the code or HTML view.

A simpler design without the overlaps can be made using a simple table -
all from Design or Normal view.

The gallery page at charliesprideponies.com is best described as messy.
You should not place absolutely positioned elements in table cells, and
some are nested pretty deeply.
You will have to get a developer, or some rapid learning, to sort it
out. As it stands, the overall effect in IE7 and Firefox is good, but
resizing the text (as some people will in order to read the navigation
buttons) causes the text to overlap the images. (That relatively
positioned div I mentioned will prevent this). There are also problems
with the page height and width.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp

Ronx said:
Again, info. gratefully received. I checked out my HTML and what I can say
is there 'ain't no way I'm a'goin to touch all that!

Here's the bottom line:- I'm no geek, I deal in "horse-flesh". Website is
charliesprideponies.com and I need to update. Company promotion is dependent
upon it and I've been fighting since early March with it.

I think your last message gave me a clue as to changing the 'code'. It's in
writing directly to the HTML, yes? I can't do that; I can only follow a
routine in FP. There goes any possibility of the "x factor". So, when
you refer to the 'order in the code' are you just saying which pic I place on
the page first?

I'm sure you are exasperated with me, but please, don't leave me yet - I
have only one website, - honest!

Ronx said:

Publisher is even worse than Word. Publisher is the worst ever
application for web pages, but Publisher is very good for what it is
designed for - printed publications.

The code snippet you provided uses absolutely positioned <spans> whereas
I would use <divs>. In practice there will be very little difference
(if any) between either method. Since no z-index is specified, the
images will usually pile on top of each other in the order they appear
in the code, specifying a z-index will guarantee the order.

I would still surround the <spans> with a relatively positioned
container:
<div style="position:relative;"><span ... your images here ..
/span></div>
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp

Again, Ron, my sincere thanks. I went to the 3school links and was suitably
impressed -( read as intimidated!)

Now, having said that, I am ROFLOL! Good thing I'm not paranoid!

First, how do I go about adjusting the code? As in 'where' do I go for
starters.

Second, I checked the HTML of my page and, I swear, there isn't a z on the
entire page!!

Here is an example of a picture on my page:

<img border="0"
src="images/BRYAN%20AND%20HORSE%201.jpg" width="247"
height="226"></span></font><span style="position: absolute; left: 189; top:
417"><img border="0" src="image022.jpg" width="187" height="253"></span><font
size="5"> </font><span style="position: absolute; left: 0; top: 22"><span
style="position: absolute; left: -58; top: 953"><img border="0"
src="images/100_0116.jpg" width="314" height="240"></span></span><font
size="5">

Here's a new thought. I downloaded the trial Publisher 2007 in hopes I
could use it easier. Should I look in there for more current options?

:

I think layers was a feature introduced in FP2003, in FP2002 you will
probably have to move the layers by adjusting the code.

Absolute Positioning is a subject too big for a newsgroup post. Start
here:
http://www.w3schools.com/css/css_positioning.asp

For your page, here is an example showing three images positioned
absolutely, with some deliberate overlaps. Alt attributes and other
niceties like hyperlinks have been omitted.

<div style="position: relative"> 

<div style="position:absolute;top:0;left:0;z-index:0"><img
src="pic1.jpg" width="120" height="50"></div>

<div style="position: absolute; top: 25px; left: 100px; z-index:
3;"><img src="pic3.gif" width="120" height="50"></div>

<div style="position: absolute; top: 40px; left: 20px; z-index: 2;"><img
src="pic3.jpg" width="120" height="50"></div>

</div>

The value of z-index determines which image is on top.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp

THANK YOU! That's all I can say to everyone - each bit adds more knowledge.

I have not made clear that I'm trying to revised a web page already made -
not actually creating one.The document "web page" was for my own facility -
to access FP and to work safely. 'Word' came into it only because it was the
only place I "stumbled" over the 'absolute' feature.

I don't know what version of FP I have (2002?) but there is no mention of
'layers' that I or Help can find. What I DID find was in 'views' then 'tool
bars' then 'pictures'. This gave me access to 'absolute' though not as fluid
as I'd like and with some strange idiosyncracies - appearance of negative,
jerkiness, limits of movements, etc. It seems to be less 'refinded'.

I'm having some success with it but still, would like to ask if there is a
better, more specific way to place photos.

Many thanks, Ron, for influencing me in this direction. Would 'layering' be
better? Have I missed it's location? Also, what dictates which picture gets
'top' level over the others? If I want to cut off a corner of one pic with
another pic, how do I ensure which pic is on top?

Some of my depression "lifts"!! Maybe I'll beat this thing yet.

:

Do not use Word for creating web pages. The HTML produced is bloated
and horrible, and may be the cause of your problems.

In FrontPage 2003, there is a menu option Insert->Layer which will give
you an absolutely positioned box, into which you can place an image, and
position it anywhere in the page.
Repeat for each image.
Read up on layers at http://www.w3schools.com

Also, do not place any text above the layers, or in the layers - doing
this will bite you, since in some circumstances the text will overlap
the images, or the images will obscure the text.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp

Again, I thought I had done that - but maybe I'm missing something.

All the pics I'm using are 1) in "Hopefully Web" document,'loose' as I'm
going to express it, 2) in "Images" folderin "Hopefully Web" document, 3) in
HTP document, again, 'loose' as described above, 4) in "Images" on HTP
document.

Now, I put them into the emptied "Photo Page" folder that I opened with FP
in "Hopefully Web" document. When I have massaged it into the presentation
that I want, I "save" it, and then copy the entire folder from "Hopefully
Web" to HTP.

AND WHAT I GET ARE XXXXXX's!!

Is it the part of my procedure that uses Word? I do it because it's the
only way I can get access to "Absolute" which is what allows me to manouver
the pic about.

I want to cry!!!

:

You have to use File Menu | Import or drag -n- drop the images into your current open FP web / site
prior to actually using the images on a page within the web / site.

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage

http://www.Ecom-Data.com
==============================================

Thanks to both Dave and Trevor. I'm much too much of a neophyte however to
even understand most of your terms.

I thought I HAD put them into FP.

To try to not screw up the webpage, I created a doc. called Hopefully Web. I
made sure all my pics were in a folder here named "Images". I copied "Photo
Page" from FTP, and "cut" out the old photos. Then I put photos, one by one,
into Word, changed the size to suit, used Format and then "Copied and Paste"
them to the empty "Photo Page" that I had opened with FP. If I used
"Absolute" when I got them there, I could move them anywhere I wanted and
everything looked great. However, even though all the same photos were in
Images on FTP, when I copied the entire "Photo Page from "Hopefully Web" to
FTP, all I got were red X's.

I can go and investigate "layers" and hope I can understand that. I know
nothing about HTML and even less about Code. (What's a code?) See what I
mean???

:

Dave wrote:
Hello,

I'm not an MVP, but you might try putting your photos into a "layer"
in FP. By doing this you can manipulate each layer (photo) separately
and arrange them in a collage. By varying the "Z-value", using plus
and minus numbers, you can control which layer appears on top of
another. A "+1" layer appears on top of the "0" layer, while a "-1"
layer appears beneath the "0" layer. See what I mean? I just came
across this yesterday, so this is new to me, too, but it worked for
me.

For more info, check help for "how to use layers". Oh, yes, Photoshop
not needed.

Good luck.

Dave Grenier
An Aspiring Webmaster

:

Is anyone familiar with Photoshop that can help me go on from here?
I have the software but have never used it. I want to change the
appearance of my Photo Gallery web page from individual pictures
that are all lined up to a collection in a "collage' format. Can
anyone help me with this? Thanks, Barb

:

I want to arrange photos on a web page in a "collage" fashion but
the pictures won't go where I want them to unless I put them first
into a "Word" document, format them and then copy them to the web
page and use "absolute". Trouble is, then all I get are squares
with red x's when I check the site. If I skip the "Word" document
portion, I can't access the "absolute" option when I copy them to
the page. This prevents me from arranging them. What am I doing
wrong?

Interesting idea, Dave. I might try it

But, 4footer, what do you mean by a "collage". You can organise the
thumbnails however you want, but if you don't want them in rows and columns,
it could be a bit tricky.

Photoshop is not needed, and using Word is not a good idea. The red squares
are due to not importing the images into FP.

You can set other options by changing the code itself in Code or HTML view.
In fact I find this easier now that I know more about HTML than I did at
first.
--
Cheers,
Trevor Lawrence
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/

Click to expand...

Click to expand...