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:

Text Color: FFFFFF 273 bytes

Link Color: 00FFFF 463 bytes

Vlink Color: CCFFFF 462 bytes

BGcolor: 7189ae 490 bytes

Page Artwork:

Page Art H:69 W:69 926 bytes

Page Art H:69 W:78 1262 bytes

Button Art H:34 W:34 1185 bytes

Button Art H:34 W:39 1474 bytes

Divider H:61 W:91 1094 bytes

Bullet H:68 W:32 249 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.
• If you add anything to your page through the Heading a bullet will be generated:
  http://www.oocities.org/webtvbeth/pb/oceanbullet.gif
• If you add a second item through the Heading a divider will be generated:
  http://www.oocities.org/webtvbeth/pb/oceandivider.gif

How I made the buttons:

• I went to: Image Magick
• Clicked on "Use Magick Studio"
• Entered the background URL:
  http://www.oocities.org/webtvbeth/pb/oceanbackground.gif
• Pressed the "view" button
• Clicked on the "Resize" tab
• typed in: 120x40! in the image size box
• Pressed the "resize" button
• Clicked on the "Decorate" tab
• Changed the 15x15 to 10x10
• Put #00FFFF in the Color: box (to match the page style link color)
• Frame was already selected
• Pressed the "decorate" button
• Then I clicked on he "composite" tab
• I entered the URL of one of the shells I took from the page and reduced (ignore Filename):
  http://www.oocities.org/webtvbeth/pb/oceanshellleftsm.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 "gif" 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 background URL:
  http://www.oocities.org/webtvbeth/pb/oceanbackground.gif
• Pressed the "view" button
• Clicked on the "Resize" tab
• typed in: 350x75! in the image size box
• Pressed the "resize" button
• Clicked on the "Decorate" tab
• Changed the 15x15 to 10x10
• Put #00FFFF in the Color: box (to match the page style link color)
• Frame was already selected
• Pressed the "decorate" button
• Then I clicked on the "composite" tab
• I entered the URL of one of the shells on the page (ignored Filename):
  http://www.oocities.org/webtvbeth/pb/oceanshellleft.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 "gif" 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/oceanblank.gif
• 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 +0+0 and changed "Northwest" to "Center"
• In the "Fill" box I used the text color that matched the page.
• For the the Ocean page style I selected 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/oceanbanner.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 +0+0 and changed "Northwest" to "Center"
• In the "Fill" box I used the text color that matched the page text color.
• For the the Ocean page style I selected the font: Signet Roundhand ATT Italic
• 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.