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:

Traditional:

Contemporary:

Banner:

Color Swatches:

Link: 6a298c 490 bytes

vlink: 6a298c 462 bytes

Text: 3f3a89 462 bytes

bgcolor: 97bfbb 462 bytes

Page Artwork:

Page Art H:122 W:123 5,039 bytes

E-Mail Art H:100 W:99 3,019 bytes

Bullet H:76 W:92 874 bytes

Divider H:51 W:87 723 bytes

Button Art H:39 W:59 1,971 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.
• Whenever you add an item through the Heading a bullet will be generated:
  http://www.oocities.org/webtvbeth/pb/weddingbullet.gif
• Originally this Page Style did not work. The Wedding cake appeared in preview but not on the page. It works now.
• There is no background attribute in the body tag, so it can be over-ridden by adding a second body tag with the background attribute.
• The link and vlink are the same color: 6a298c

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/weddingtdbgcolor.jpg
• Pressed the "view" button
• Clicked on the "Resize" tab
• typed in: 165x40! in the image size box
• Pressed the "resize" button
• Clicked on the "Decorate" tab
• Changed the 15x15 to 10x10
• Put #3f3a89 in the Color: box (to match the page text)
• Frame was already selected
• Pressed the "decorate" button
• Then I clicked on he "composite" tab
• I entered the URL of the Divider I took from the page and reduced (ignore Filename):
  http://www.oocities.org/webtvbeth/pb/weddingdividersm.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/weddingbgcolor.jpg
• Pressed the "view" button
• Clicked on the "Resize" tab
• typed in: 390x90! in the image size box
• Pressed the "resize" button
• Clicked on the "Decorate" tab
• Changed the 15x15 to 5x5
• Put #3f3a89 in the Color: box (to match the page text)
• Frame was already selected
• Pressed the "decorate" button
• Then I clicked on the "composite" tab
• I entered the URL of the Bullet from the page (ignored Filename):
  http://www.oocities.org/webtvbeth/pb/weddingbullet.gif
• I typed +5+5 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 "gif" in the format because it gave me less bytes in the output (jpg gave me 5,000 but gif gave me 1,558)
• 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/weddingblank.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 +20+17 and left "Northwest"
• In the "Fill" box I used the text color that matched the page: #3f3a89.
• For the the Wedding page style I made two sets. For the Traditional, I use the font: Marriage. For the Contemporary, I used the font: Signet Roundhand ATT Italic.
• Point size: 36
• 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/weddingbanner.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 +100+30 and left "Northwest"
• In the "Fill" box I used the text color that matched the page text: #3f3a89.
• For the the Wedding page style I selected the font: Marriage
• Pointsize: 50
• 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.