Custom Titles
 Custom Graphics

 Free Section
 Greeting Cards
 Sims Stuff
 Web Page Sets

 Educational Links
 Linking Buttons
 Site Map
 Terms of Use
 Webmster Rsrces


Updated Monday, March 1, 2010.


Bordered Sets and tables
Browser and Resolution Differences
Buttons  - Adding Text
Buttons  - Borderless
Buttons  - Coding
Buttons  - Open in New Window
Buttons  - Size
Table Sets
Web TV

AOL If you are using AOL, make sure you save the images as .GIFs and .JPGs only (whatever type they are on the set page). 

AOL will force saving the images in the .ART format if you have your settings set to compress web graphics, and these images are not currently visible to all browsers.  I've also found that having the compression on compromises the quality of the pages you see. 

I've been told that Personal Publisher likes to assume you're using .bmp format graphics.  Since I haven't published any graphics in this format, you would have to make sure to specify that they are either .gifs or .jpgs.

Sorry, I can't begin to answer questions on AOL PP because I've never used it!  Whenever I've uploaded pages to AOL, I worked on them offline and then uploaded them at keyword "My Place".

(Page Pet Peeves!)
Most design guides will tell you the worst thing you can do is have a page with long load time.  While this might be the very worst thing, there are other things that might make a visit to a page less than pleasant. 

Dumb Abbreviations - Maybe I'm showing my age here, but what ever happened to proper spelling, punctuation, and grammar?  Whenever I visit a mailing list, web page, newsgroup or other place where I can read what someone else has typed, I have to shake my head and wonder.  As SOON as I see a sentence like, "U hav 2 c it to believe it!", I chalk it up as something that was written by either a very young child, or someone who really doesn't care if he gets his point across.  I've noticed this has become an alarming trend with teens, just like the "mall talk" we hear about.  If web pages have this type of "talk" on them, I usually don't spend much time on them.  I also pity the future workforce.

Automatic Pop-Ups  - This one is a MAJOR annoyance to me - and I'll bet to most of the population!  I just answered a survey about this very thing, and said that I NEVER pay attention to what's in the pop-ups, and close them immediately.  Use them sparingly, if at all.  If you want someone to stay on your page, then don't send out ten pop-ups that will turn them off and possibly crash their browser.  When this happens I never go back!

Music - I'd say a lot of people are probably listening to something while they're on the computer.  For me, if it's not my MP3 collection, then it's either the radio or tv in the room.  Sometimes there is nothing more annoying than having a loud and obnoxious midi blast into my computer and clash with whatever I'm listening to!

Poor Navigation - When I find I have to keep hitting the back button to find another page to see on a site, I get annoyed and usually leave.  It's a good idea to have links to all the other pages (or at least all the other major sections) on every page of your site, if possible. 

Rambling Busy Text - This one turns me off immediately.  If it seems like a job to read the page, I usually won't bother.  Text that's appropriately broken by paragraph breaks, or lines or bars, is much more pleasing to the eye than one long stretch of text that's squished together. 

Bordered Sets See the Border Tips page showing some examples of using tables with bordered sets to make sure your text doesn't show up over the border. 
Browser and Resolution Differences IE vs Netscape

One good tip I can give you - if you have both browsers on your system - view your pages with both to make sure your visitors are seeing what you intended them to see.  I try and do this as often as I can - but I'll bet I forgot a few times and things might look a little funny to IE users.  I find this to be especially true when using tables - and my site is loaded with them.  So, bear with me, as I catch the errors I'll fix them. If you're using Netscape you should be seeing the pages the way I see them, though!

I think there are some utilities that simulate different browsers.  If I find any I'll post their locations here.  While I'd rather use the real Netscape and IE to test my pages, I still would like to find something that simulates WebTV - and hope I don't gasp in horror at my pages once I do!

Screen Resolution

It's also a good idea, if you're able, to check your pages at various resolutions.  My backgrounds will not repeat the borders, even at 1024 x 768. 

I've found that the most common resolution is 800 x 600.   Not realizing this when I started making graphics - I found I was making them way too big for the most common resolution because my monitor was set at 1024 x 768!  While the background borders won't repeat - some of the borders and buttons are huge on the oldest sets.  I now design at 800 x 600 when I decide on my border and button sizes (but still make the backgrounds wide enough for higher resolutions).

Some people browse at yet higher resolutions, and some even use the lower 640 x 480.  While it's impossible to please all of the browsers and resolutions all of the time, you can try to get the best results by testing browsers AND resolutions on your pages.  If you can't do this yourself, try to get a friend to view them and let you know what they see.

There are probably a lot more issues with the difference between these two major browsers.  I'll post them as I think of them. 

Button Coding To code buttons, use the following:

<a href="http://www.chibicreations.com"><img SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>

Of course you'll substitute the correct filenames, urls  and dimensions.

Borderless Buttons

None of my buttons are designed to have borders around them.  However, when you add a link to a graphic, browsers assume there should be a border around it - just as links have underlines.  Borders make the buttons look funny, especially when I've tried to make them look realistic with shadows against the backgrounds.

To avoid the borders and display the buttons as you see them on my set pages, make sure you use the border=0 statement in your code. 

<a href="http://www.chibicreations.com"><img SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>

Image Attributes

It's also important to include the height and width statements as shown in the example above. 

When you code your images using their height and width, browsers will load the pages much more quickly because they don't have to figure out the dimensions for themselves. 

How do you find the correct dimensions for a particular button?  It's easy - simply display a web page with the image on it, and right click to bring up a sub menu.  Choose "View Image" or something similar.  This will bring you to a new browser window showing only that image.  The title at the top of the window should list the dimensions for you. 

<a href="http://www.chibicreations.com"><img SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>

Open in New Window

You might want to code your pages so that clicking on my credit button opens a new window rather than leaving your site.  If so, use the  target="_blank" statement after the Chibi Creations url.  Be sure to put a space between the quotation marks and the start of the target statement, and keep it  within the brackets.

<a href="http://www.chibicreations.com" target="_blank"><img SRC="chibilogo.gif" BORDER=0 height=100 width=100></a>

HTML I get a lot of email from people asking about HTML coding, and a lot of the questions are general things not pertaining to graphics.

While I like to be helpful and I do answer their questions, I'd rather point people to some tutorial pages that can answer these questions far better than I can.  Here are a quite a few links to get started.

Beginner's Guide to HTML
Free Web Utilities
HTML Quick Reference
Sizzling HTML
Web Developer.Com
More Links

Also see my  Webmaster Resources page.

Table Sets When I redesigned the graphics for this site in November 98 with the black/floral design and put them into place, I decided to use a different approach that I had not seen anywhere else before.  More and more graphics are now designed this way, and they give pages a whole new look, away from the customary left-bordered appearance.  I've been trying to design new sets with alternatives - both tiled backgrounds for tables, and left bordered ones as well.  Some even have "framed" pieces for your tables. 

Using a centered table on top of your page background, either with a particular color or a specific secondary background, will give the effect of double borders (top and bottom too!)

This type of set will look like a double bordered set no matter what browser is used - no matter what resolution (if you use a centered table with percentages for the sizing). 

I'm sure we've all seen "double bordered" pages that look awful to us because they were designed by someone using a different resolution - it just doesn't work!

Most table sets must use the table color or secondary background that I used only because the graphics were designed for it (they have bits of the background in them). 

You MUST remember to use the closing table codes or they won't work properly for Netscape browsers!  If you ever stumble upon a page that has only a background and nothing else at all (while you're using Netscape) - view the source code - chances are you'll see all that should be in the page, but the author forgot to use their closing table code! 

Placed just after the content ends (the very last text or picture that will show up on the page - before the /body and  /html statements).  Or, if you have several nested tables, make sure each one has it's own closing table codes.

Text on Buttons Here are some basic instructions for placing text on buttons using MS Paint  (in the Accessories folder) and Windows 98.

Save the blank button on your system, and open MSPaint.

File, Open - and find the blank button in whatever directory you placed it.  You may have to select which file type to look for so it finds the appropriate one.

Once displayed, click on the "Type" button (shown as a capital A).  Down below all the tools there are two buttons with pictures of three different shaped blocks..  The top one shows the green block on a white background, where the bottom one shows it on a transparent background.  This bottom button is the one you should click.  Select white (or whatever other color you choose for the text) at the bottom of the screen.

Place the cursor where you want the text, and click.  If a little font toolbox doesn't pop up, you can right click to select "Text Toolbar".  Here is where you can select your font and start typing the text.  You can size the font, stretch the little text box, etc.

When finished:

File, Save As.

Make sure you're saving as the same file type,  but name the button something else such as mail, photos, next, etc., and move on to make the next.   You should always open and save the files in the formats that they originally came in - and this is especially important with gifs because some of them have transparency and keeping the file type will retain it.

Since your buttons will probably look different than my originals, if you have the time and patience it would be great to make ALL the buttons you'll be using so your pages look cleaner and better.

Web TV If you have Web TV, that's a whole different set of circumstances - you don't have a computer to download the graphics to.  Also, you can't link directly to my images since they're not on my server.  I set them up on temporary web pages for the Web TV population (and email them by zip file to others)  so that you may have access to them for a short time.   Therefore, you must use a "transloader" of sorts to get them from my temporary page to your server. 

Try this Geocities Web TV Committee page for some more help.

More tips to come...

© Dawn Gombos / Chibi Creations 1998-2006  All Rights Reserved
Chibi Creations site graphics are NOT available for any use.