Tone and style are key elements to Web page design. All text and graphics should be consisitent in mood and theme. To make buttons and banners for our Page Builder pages we need to combine the materials we were given, the materials we brought to our pages and our own creativity.

Follow along with me as I break apart each Page Builder style to make buttons and banners. Feel free to use what I have created or use the materials to make your own.

Buttons	Banner	Background	Colors	Page Art
Sample Page	View Source	Notes	Make Button	Make Banner
Annotate Button	Annotate Banner	Make Clickable	E-Mail Corner	Bottom of page

Buttons:

Banner:

Background Image:

Color Swatches:

BGcolor: eeeeee 490 bytes

TDbgcolor: 669999 462 bytes

Page Artwork:

Button Art H:60 W:50 2,075 bytes

E-Mail Art H:141 W:112 4,913 bytes

Banner Art H:107 W:84 3,275 bytes

• Go to your Mailbox
• Click on Settings
• Select Signature
• Type or paste this into the large box:

• Replace the 3 letters URL (but leave the quotes) wth the actual URL of your scrapbook image.
• If you need help with linking to your scrapbook images:
  http://www.oocities.org/webtvbeth/toscrapbook.html#linking
• Press the Done button

Sample Page:

View HTML Source Code:

Notes & Nuances:

• Images added from your scrapbook are Centered.
• The only attribute in the body tag is the bgcolor. That means we can over-ride the text, link, vlink and background within a 2nd body tag.

How I made the buttons:

• I went to: Image Magick
• Clicked on "Use Magick Studio"
• Entered the TD bgcolor URL:
  http://www.oocities.org/webtvbeth/pb/catstdbgcolor.jpg
• Pressed the "view" button
• Clicked on the "Resize" tab
• typed in: 160x40! in the image size box
• Pressed the "resize" button
• Clicked on the "Decorate" tab
• Changed the 15x15 to 10x10
• Put #000000 in the Color: box (to match the page style art)
• Frame was already selected
• Pressed the "decorate" button
• Then I clicked on he "composite" tab
• I entered the URL of one of the cat I took from the page and reduced (ignore Filename):
  http://www.oocities.org/webtvbeth/pb/catscat.gif
• I typed +0+0 in the location
• I left "center" as the default location
• I left "Over" as the Composite operation
• and pressed the "composite" button
• All done. Next I pushed the "output" tab
• I select "jpg" in the format because that is what I started with
• Then I Pressed the "output" button.
• Clicked on thumbnail of my image
• Went to: My Uploader
• Pressed the "upload" button and was done.

How I made the Banner:

• I went to: Image Magick
• Clicked on "Use Magick Studio"
• Entered the bgcolor URL:
  http://www.oocities.org/webtvbeth/pb/catsbgcolor.jpg
• Pressed the "view" button
• Clicked on the "Resize" tab
• typed in: 400x112! in the image size box
• Pressed the "resize" button
• Clicked on the "Decorate" tab
• Changed the 15x15 to 10x10
• Put #669999 in the Color: box (to match the page style td bgcolor)
• Frame was already selected
• Pressed the "decorate" button
• Then I clicked on the "composite" tab
• I entered the URL of the cropped cat on the page (ignored Filename):
  http://www.oocities.org/webtvbeth/pb/catscat.gif
• I typed +0+0 in the location
• I left "center" as the default location
• I left "Over" as the Composite operaton
• and pressed the "composite" button
• All done. Next I pushed the "output" tab
• I select "jpg" in the format because that is what I started with
• Then I Pressed the "output" button.
• Clicked on thumbnail of my image
• Went to: My Uploader
• Pressed the "upload" button and was done.

How to write on the blank Button:

• Goto: Image Magick
• Click on "Use Magick Studio"
• Enter the URL of the blank button:
  http://www.oocities.org/webtvbeth/pb/catsblank.jpg
• Press the "view" button
• Press the "Annotate" tab
• In the text box I put the word I wanted on my button. i.e; Home
• For location and gravity I changed the +0+9 to +8+16 and left "Northwest"
• In the "Fill" box I used the text color that matched the page art.
• For the the Cats page style I selected the font: Eraser
• Point size: 32
• Then I went back up and pressed the "annotate" button.
• Sometimes I would put a space in front of the word (i.e; Home) to get it where I wanted on the button. Other times I had to adjust the location and gravity. I also had to adjust the point size. Most buttons were made with font size 36, but the larger words were made with size 34, 32 or even 30. Let's just say I used the "back" button a lot.
• Press the "Output" tab
• Select the Format you started with (gif or jpg)
• Press the "output" button
• Click on the thumbnail of your image (it has a 0 under it)
• Immediately goto an Uploader
• Press the "upload" button.

How to write on the Blank Banner:

• Goto: Image Magick
• Click on "Use Magick Studio"
• Enter the URL of the blank banner:
  http://www.oocities.org/webtvbeth/pb/catsbanner.gif
• Press the "view" button
• Press the "Annotate" tab
• In the text box I put the word I wanted on my banner. i.e; BethCandy.com
• For location and gravity I changed the +0+9 to +90+50 and left "Northwest"
• In the "Fill" box I used the text color that matched the page td bgcolor.
• For the the Cats page style I selected the font: Eraser
• Pointsize: 40
• Then I went back up and pressed the "annotate" button.
• Sometimes I would put spaces in front of the words (i.e; BethCandy.com in the text box) to get it where I wanted on the banner. Other times I had to adjust the location and gravity. I also had to adjust the point size. Most banners were made with font size 50. Let's just say I used the "back" button a lot.
• Press the "Output" tab
• Select the Format you started with (gif or jpg)
• Press the "output" button
• Click on the thumbnail of your image (it has a O under it)
• Immediately goto an Uploader
• Press the "upload" button.
• Here's a sample banner

How to make Clickable:

• Go to your Page Builder Index
• Click on your Page
• Click on Change page
• Click on Add an item
• Click on Text
• Type this in the large box:

• Replace URL1 (but leave the quotes) with the URL of where you want the visitor to go.
• Replace URL2 (but leave the quotes) with the URL of your image.
• If you need help with getting the URL of your scrapbook image:
  http://www.oocities.org/webtvbeth/toscrapbook.html#linking
• Press the Done button
• Press the Publish button

Index of the Page Builder Page Styles

Page Builder Questions? Post them here.

Check out My Site map of Page Builder Help pages.