I have made a tutorial on how to create the effect you see with
this web page, multiple images surrounding your text area. I wrote it
to show how to obtain this effect with Mozilla but the commands
are also the same with Nvu. Both are free downloads and work with
Windows, Mac,or Linux.
If you want to use this as a template
or a beginning to your page you can open this page with either Mozilla
or Nvu and simply delete the tutorial part and start inserting your
text and images.
However do replace the images with images of your choice that are on your web host.
Please Do Not Link Your Page To Images On My Server!
You may download the background images to your computer and then onto your web host. Please ask before taking any of my other images (photo's) on this or any of my other websites
Creating a page with a background
image and an image around your table with Mozilla
or Creating Nested Tables
First I am going to open a new composer page in Mozilla.
Then we go to format
(4th one over on the tool bar at the top) then Page Colors and Background
in the Background Image Block near the bottom of the menu we are going
to put the location of our background image. In this case i am using
this image http://www.4u2go2.com/ebay/background/pinkbutterfly.gif
Click OK
You should now have a pretty pink background with butterfly's.
Now I am going to insert a table. Along the
tool bar again 6th one over is Table
click table then insert table.
In this case I want 1 row and 1 column with the width being 95% of the window and a border width of 0
So I am changing the values in the Insert table menu that pops up
to correspond with these new values.
Now I want this table to be centered on the page so we now click Advanced Edit. Down in the lower
left of the new Advanced Property
Editor is a box that says Attribute.
We click the little check and we get yet another menu. Go down until
you see Align. Click align and then you will see the Value box to the right. Default
is left but I want this frame to be in the center so we click the
little check on this form and choose center.
While we are in the Attributes
we also want to change our cellpadding
and cellspacing
attributes. This time I am going to change both of these to 20. So we
click on cellspacing and
change the default to to a 20.
Now we are going to do the same for cellpadding click on it and
change it's default 2 into a 20.
Now click OK on the attributes
Click OK again on the
Insert table
In this instance I want to place another image in the background of
this table. Mozilla doesn't handle this too well so we are going to use
a little HTML We go to the tool bar once more and choose View (the 4th one over from the
left) then we choose HTML Source.
Now we are going to look though the HTML Code we have just generated
until we see the table attribute it will be <table We
now place our
mouse cursor at the end of the word table and click enter to get a new
line. Now we are going to place the background-image: attribute in
to
put our image into the table. In our new line we are going to paste
this bit of code. background="http://www.4u2go2.com/ebay/background/babie_breath_rose.jpg"
Click View then Preview
this just gave us a new background image.
Now for one more to give us a nice clean sheet to write into.
Again we go to the toolbar then Table then Insert Table
This time I am going to use the values of Rows 1 Columns
1 Width 85% Border 0
Once again we go to the Advanced
Edit then Attribute.
We choose align
then the Value of Center.
Again we are going to change our cellpadding and cellspacing to 20 each
This time I am going to choose a background color for this table
as it will be the actual table I want to put my description into. So we
choose Attribute then bgcolor then I am going to
choose white
Click OK
Now click Ok on the Insert Table and we have a set
of nested tables to work with.
At this Point I am going to Paste this text into the last table
where our description would go. this will resize the tables automaticly
to fit the text.
Feel free to change the values of this to reflect your own personal
style.
These images were downloaded form Free image sites there are plenty on
the we so don't be afraid to download images to your space on the web
(ie;photobucket or another hosting site)
Also You can download any of the images in my background file
http://www.4u2go2.com/ebay/background/
You do need to upload images to your server
Any of the images on my other sites please ask for first
Coleman
|