God Bless America

9/11/2001

Logobeben.jpg (28941 bytes)

Ribbon
Never forget!

 

Web Design Hints

Home

So you want to have a web site? Or maybe you already have one and there are a few things NOBODY told you! Are you just computer literate enough, but don't like to mess with those settings too much? Don't have time to read a huge book and don't want to get a bunch of "hints" e-mails. You're in luck. I hate those things too not that I couldn't have learned a lot faster using them. I have created 7 web sites and I am still learning things that I feel like I should have known already.  SO, lucky you, I am going to share what I've learned. I'm thinking you can teach me a thing or two as well.

Now, before we start, I must tell you I am working with Microsoft FrontPage. Everything here will apply to MFP, but it may also apply to other programs as well. I don't know. I can't vouch for that. I apologize for not being willing to go learn all the different programs there are to create web pages. :-) Big note: Not all hosts support MFP specific components. Check with your host before trying to publish with MFP or using specifically MFP stuff. Also, if you are only working on the web site temporarily and someone else may take over one day, you might want to consider not using things a person wouldn't find in another program, like shared borders.

Simply put, here are some of the things I have found out I need to do or at least be aware of:

1) Set margins. Duh. You don't always have to make a table. You can just set the margins (in pixels an inch is 72) to indent as much as you want it to. Now, strangely enough, MFP allows you to set top and left side margins only. My tech support guy says that's because the right margins "float" and the page can be as long as you want to make it. So setting margins will NOT center your text on the page, only keep it away from the edges and stop you from having that "claustrophobic" look.

2) Read that little line at the bottom  (lower right) that tells you approximately how long that page will take to load. Nobody wants to sit around for 3 minutes waiting for a page to load. Remember that not everyone has DSL or cable modems. Some folks have regular phone lines and it takes longer to load your pages. Under a minute works okay for most.

3) If you are working on a page that you intend for folks to print out, there are some things you need to take into account.
Black prints best. While colors make a pretty on-screen page, it doesn't always print well.  I recall the story about a lady who called tech support to find out why she kept telling her printer to print the page and nothing would appear. The webmaster had done the text in white with a dark background. She was using white paper. Duh.

If your information is in a table and the table is past the normal bounds of a sheet of paper, it will not all print. You need to either test print it to be sure everything you intend to print will print, either moving your tables, making them smaller or whatever OR you need to get rid of the tables altogether. There's a very easy way to do that in FP. Under "Tables" there's a command "Convert table to text". Voila! (There's also a "Convert text to table")

Also note, that if you decide to use tables but don't want them to show on your page, just make the border size 0 in table properties. Preview your pages to be sure everything looks like you think it does in your table.

Border size here is 1. If I try to show you 0, that won't work because you wouldn't see it. :-)

Play around until you get the look you want. You can make the background of your table a different color than the rest of your page as well.

Keep in mind that if you are long-winded, it will take many pages to print. :-) Yet, you want to be clear and put all the information necessary on your page.

Sometimes it may suit your purpose to make a chart or form into a PDF (Adobe Acrobat) file so the formatting will remain. However, if you intend for the reader to be able to make changes online, this will not work unless they have a writer. Then again, that might be what you want. If you don't want people to be able to make changes to something you've done, then pdf files are a way to discourage that. You can't completely stop it as files can be converted, but it's a bit more trouble.

You might consider that some computers are set to print backgrounds and some are not. If your intention is for the page to be printed, be considerate in using a not too ink consuming background. I prefer to just use a white background for my pattern pages at Crochet Cabana, since I expect people to print these out.

4) If you want people to be able to find you again, put your URL on each page. Now there's advantages and disadvantages to this. I thought it was a great idea, until I had to change my web host. ALL those URLs had to be changed. I discovered hyperlink status which does help some. :-)  You can change most of the links all at one time if they are LINKS but it will not change the TEXT. For example if you say, You are at http://www.dadadada.html and you want to change dadada to mamama it will do that as far as the link, but it will still SAY dadadada. It will just go to mamama. So, if you're pretty sure you're where you're at to stay, go for it. If you think you might be moving the site and it is a large site, I'd forego the temptation. My last move was much less hassle. You could put something generic like "You are at Sandra's Backyard", then you could change the link without having to change the text. However, if someone prints that page, they won't have your URL, just the name of your site. If the person is Internet savvy, that's enough for them to find you again. :-)

5) Learn a little HTML. You don't have to be able to write a whole page, but it helps to know the basic commands. Just keep a little list on the side for reference. Particularly important, I have found, is the meta tags, redirect, break free from frames, and comments.  Although I moved my site from Xoasis, they had a very good link to a basic html tutorial.
Note that html is NOT case sensitive so use those CAPS if you want to. It won't be hurt.

Most things are done for you automatically by MFP. However, when you want to join a ring, or do some other fun thing, they will give you code to paste into your document. Well, you need to know where to paste that code, so you have to have a little idea about what's around it.

I find it very helpful to put a comment before and after any new code I add. Like this:
<!-- This is the beginning of my comment.  -->
If you did it right, the comment will be in a different color (mine is green) than the rest of the code. You would put a "here's where the Counter Code, for example, starts" at the beginning of the new code and then a "here's where the Counter Code ends" at the end of the code. Of course, that's for your counter code. :-)

Refresh or Redirect code (You don't have to put comments here)
<meta http-equiv="Refresh" content="6;URL=whereyouwantittogo.htm">

Meta tag
<meta name="KeyWords"
content="put here every word that somebody looking for your site might ever think of, remembering plurals, variations of spelling, your city, state, subject of web site, just everything!
>

Description of your site
<
meta name="Description"
content="This is the best site about....you will ever hope to find."
>

Sample break free from frames code:
<!-- begin break free from frames code --><small><strong><font color="#000080">NOTE: If you have come to this web
site from another site within a frame,</font></strong></small></p>
<
p align="center"><strong><font color="#000080"><small><a
HREF="http://www.yourwebsite" TARGET="_parent">Click here to break
free</a>.</small><br>
<
!-- end break free from frames code -->

<BODY> means just that. Remember when you learned how to write a letter. The "body" was the main part of your letter. Same thing here. <BODY> is that big part after your titles and meta tags etc.

<P> means paragraph. It skips a line.

<BR> means line break. You do not need to put one before and after. Just once.

<!--   comment   -->  is used for a comment.

There are MANY other things you can learn but that's just some basic stuff.

6) You would think "default" would be the same on each browser but that's not so. If you want your background to be "white", make it "white", don't leave it alone because it looks white to you. In another browser it might be grey and you can't try them all. If you want your text to be "black", choose "black", not default.

7) Don't want people to have to remember to go "back" and find you again? When you put a link on your page, there at the bottom to the right is a little thing called Target Frame. Choose "new window" and when your reader clicks on a link, it will open a new window and they won't lose you. ;-)  side note: If a person uses popup stopper (to make those aggravating pop-ups fail to appear), they will have to press <control> before opening that link.

8) Now this is just my personal opinion, but if you are doing a business site, you want it to look crisp and business-like, not like a personal site that's got a side-line business. Don't put cute little things on it that have no bearing on your business. White is crisp, but there are some nice sites that make good use of color. Again, keep in mind that a person may find you and want to quickly print the information out to refer to later. Don't use white text. Make sure your contact information is easily found so you don't lose a sale because it's too much trouble to find you. Business name, address, phone, e-mail. If you do not have a creative hair on your head, stick to white, or find a good friend to help.

9) If you are going to go to other graphic sites and use graphics (with permission), keep accurate records of where you found each graphic. You need to give credit to each designer who allows you to use their graphics and usually put a link up. Text link is usually sufficient although most provide you with a button to use if you want to. The more pics on a page, however, the longer the page takes to load.

10)  Do not take graphics from a web site and use without permission. When you get permission, print it out, or make a folder in your word processor, so you can have proof if you need it. The exception to this would be if it is a free graphics site and you follow all the rules for displaying their graphics (putting a button up with a link or whatever) then that is in itself your permission. The easier thing is to make your own graphics using a program such as Paint Shop Pro, if you are not organized to do the above.

11) A note on frames. Frames are good if you are going to make constant changes to your page navigation bar. If you don't use frames, then every time you make a change you have to make it on all your html pages. If you have a lot of pages, this entails a lot of work for a small change. Another way of making changes on all pages is to use shared borders, a Front Page thing. If you want a copyright notice and the address or e-mail to appear on each page, you can use a shared border and it will change on all applicable pages. The difference between the two is this: If you change your frames page, you have to upload that page only. If you change a shared border, you have to upload all pages that are affected by the change. If you have a slow connection, I'd go with frames. If you have a fast connection, I like shared borders.

12) Title bars - If you are going to use a fancy font, make it a picture. Not everyone has the same fonts you do on your computer. BUT keep in mind that as you add pages to your already spectacular site, you will have to make new bars with the name of the page on it. Now you can choose to just put the title, such as "Sandra's Backyard". On my pages I have "Sandra's Backyard - Links" for the links page. That means, silly me, that if I create a page about Web Design, I need to go make another silly bar. :-)   If you are going to do that, then you need to remember what font you used to create the picture, what colors etc. Make a "blank" bar that you can add the new words to. Also, make a smaller version, to give to folks who want to link to your site. They may display the graphic instead of, or in addition to, the text link.

13) LINKS -  Keep a list somewhere of those folks who have a link to your site on their site. That way, if you change locations, you can let them know. I didn't start this from the first and I very much regret it now. It's a bit of trouble and not everyone will let you know they've linked to you. There are businesses that will find all the sites that link to you and will check your own links to be sure they're not broken--for a fee.

Another note on links, you can change the colors of your links, those you create and how they appear once you've visited the link by clicking on page properties and going to background. Also, you can get rid of the box that forms around pictures when you make them links, by going to image properties and choosing 0 as the border thickness (under Appearance).

14) Music - There's a little thing in Page Properties called Background Sound. I went through a music phase. :-) However, I found that if I had a web site opened that had music, then my Instant Messenger bell would not ring. Nixed the music. I love my IM. Play a CD if you need music while you surf. I still use music, but sparingly.

15) Preview, preview, preview to be sure everything looks like you think you made it look. It is helpful to preview in different browsers if possible. Since there is no standard for html, the codes may work differently or not at all on some browsers. I know, interesting

16) Want a new page, but you already have the basic form you want to use on another page? Just copy and paste that page in your main FP window. Rename it and voila! Go in and delete what you don't need. That way, you don't have to put your navigation bars and everything again. They're already there.

17) Shared borders. I mentioned this earlier. If you choose "shared borders" under Tools, you can type whatever you want in that block and it will appear on all other pages that use shared borders. You have to set shared borders on each page you want it on, or you can choose web default. You can set the Web Default on Front Page Explorer, which is that first page that comes up when you open the web.

Bummer alert: If you want to repeat an item, like your web host, on each page, you can do that. But if you currently use cute little pictures to match the theme on each page as a button for this, you will have to choose one for the shared border. Every time you change anything in the shared border, it is changed on every page. That's important. However, you don't have to "share" the border on all your pages. You can choose to leave it off certain pages if you want to.

Also, make sure your web host "likes" FP stuff. Geocities does. The copyright thing at the bottom of this page is a shared border. 

Happy Dance: If you change web hosts or your e-mail, you only have to change your shared border once and you're done. Voila!

Bummer: If you use shared borders, instead of frames, when you change something, you have to upload all the pages that are affected by the change (in other words, all the pages that use shared borders). If you use frames, you only have to upload once.

18)  Tired of remembering to put "This page last updated on..."   Insert "timestamp" and every time you work on the page, the date will be updated. Way cool. You can even choose how you want the date to appear.

19) Uploading your html pages - I like to use FTP whenever possible. Why? Because when I open my folder with the correct pages in it, I organize them by date and I only have to upload the files that were last worked on. I highlight all the files from the first one to the one just before my "log".  File Managers (online uploading) come in "not too bad" (like Geocities) to "horrible". If you use File Manager, you will need to write down what files you need to get. Don't forget to upload the pictures! This was a mistake I made all the time in the beginning. I'd load all the html pages but would forget a picture or two that I forgot to write down. Hence, I love my FTP.

20) I just learned this little tidbit. To put a copyright symbol on your web page ALT 0169. ©  There are also ALT keystrokes to make accents for foreign names and such. ALT 0233 is é. ALT 0194 is Â

21) Regarding pictures - when you click on image properties one of the things in that box is "text". If you want it to show something other than picture.jpg (23k) when you click on a picture, you can type in a cute little message in that "text" box. You might even choose a particular picture as the "theme" or "mascot" of your site. Have it say something different on each page, like "I can't believe this bozo put me on all these pages!" or "Did you have your chocolate today?"  (I personally like that one.)

22) If you have a web site that you think folks from other countries might be interested in, you might want to provide a link to a service such as BabelFish  http://babelfish.altavista.com which can translate the pages into their language.

Lastly, if you don't understand anything here, use the MFP Help files. If that doesn't work and you think I can help, give me a holler. I don't really know much of anything but what I know I'm willing to share. Hey, you may even teach me something new.

Lastly, lastly, if you know another hint that would help me or someone else, please let me know and I'll evaluate and add it if I agree. :-)

Now if you are wondering why I created this page to begin with since I obviously know very little about web design - ha - you're right! That is precisely why I created this page. It is so I wouldn't forget the little bit I DO know. However, my daughter knows more. She has created some pages on html to help you out. You can find them here.

Some helpful pages

Easy Submit   logo_bravenet.gif (2824 bytes)   logo_java.gif (5778 bytes) 

HOME

05/27/2007

 

This site was created using Microsoft Front Page and Paint Shop Pro.
Logo and home page design of SandraPetit.com by Kaitlin Petit.
Logo design of Sandra's Backyard by Benjamin Petit.

 Not all browsers work the same. Some features may look differently on your computer.

http://members.cox.net/sandiept/
Copyright 1997-2007 Sandra Petit. All rights reserved.

This web site was created March 15, 1997.