click

	Sign In Sign-Up

How To Make Professional-Looking Web Sites

Although this is a fairly modest web site, with only information and links at this time, like all budding web sites, it has the seeds of greatness! In order to make it much more complicated with dazzling graphics and friendly magazine-style layout, one doesn't need to pay a design team thousands of dollars or even buy an expensive program. The "Front Page Express" built into Windows '98 is sufficient to make leading edge quality webpages in many ways. This isn't to downplay the value or quality of web designers, many of whom are exceptionally affordable. "The worker is worthy of his hire. "For as little as $200, one can establish a very high quality presence using these professionals.

(If you don't have Windows98, there are currently many freeware and shareware web publishing programs available, and because "HTML" is a standardized format, your web pages can be saved and edited in any program -- whether Macromedia "Dreamweaver" or AOLPress or Under Construction or Front Page 2000 -- and look and function the same! There are also sometimes "test-drive" specials available from Microsoft and Adobe, where one may learn the software for free on a version of the program that becomes disabled after a set period of days ranging from 30 to 90.)

THE TRICK

What's the trick? One trick is to start with high quality "public domain" web pages and art content, and alter their content and format to suit your needs using the tools in "Front Page Express." This may not allow a very original statement -- for that you will need a design team, but it will put your content in a very good light.

So, start with a wonderful public domain layout -- there are many of these elements available free on the web, any page of this site may be used for formatting purposes -- by saving the html using the "File" command at the top left part of the toolbar. This will create a "folder" filled with .jpg and .gif and .bmp file artwork, and the text page apart from the folder, in .htm form. If you aren't in a hurry to learn how to add and edit images in HTML, just save the pictures you want to replace with the existing ones by saving them with the same names as the existing ones in their folder. This sounds easier than it looks, I know, because the actual size of the picture may be wrong. Solving this problem is discussed below.*

There is also a trend to make the "professional look" very colorful and vital with many photographs. This fairly requires doing some "cut-and-paste" work. We'll discuss this below.

THE FIRST ALTERNATIVE

The first alternative to using someone else's public domain pages and basically putting your work and words all over it is obtaining a demo download of one of the more intuitive web designing programs. Macromedia "Dreamweaver" is made available as a 30 day free download, and it has a fairly shallow learning curve, with good help menu's and tutorials. These programs generally have some sort of basic guidelines about how they can be used: only for non-commercial sites, for instance.

If one is interested in boosting one's resume with another job skill, this is a fine way. Books help, and many have excellent tutorials.

Many web designing programs seem to assume that the user has some sort of graphics know-how. Fortunately, though, there are many public domain files of web design-related art. Some sites composed of nothing but buttons! Or one can take a cue from some of the many "designy" web sites, and compose something just for the web.

THE SECOND ALTERNATIVE

The second alternative to using the formatting on someone else's pages is to learn the handful of "Front Page Express" commands that will do the most for you. Indenting, centering, changing font size and style, and using the "Background" button on the "Format" button on the Main toolbar are all commands that you should already be familiar with. If you haven't already, get to know them now. Learn to make a "custom" color for your background and font; these can come in handy, because I am told that "custom" colors are more readable on a variety of browsers. Then it is time to learn the handful of tools that will lend the page better composition, interest and convenience.These are: creating a hyperlink from an existing word or picture (creating "buttons"), "dragging and dropping" a picture, and "formatting" the page using "tables" and left and right page alignment buttons as well as indenting buttons.

YOU WILL LEARN THE MOST by downloading what you believe to be well-made web pages. The employment agency, technical colleges and others have some excellent pages which can be saved and studied using "Front Page Express." For instance, you will learn that as common as "tables" are, they rely on little tricks like placing "transparent" or "background color" images into place as "spacers," and cutting up finished graphics into rectangles that will be seamlessly reassembled by the browser.

(One other quick and powerful tip on using "custom" colors: you may notice that some Front Page does not want you to insert more than one space between words or pictures. Aaaargh! Well, if you make a note on a piece of scratch paper of the "custom" color of your background using the red, blue and green windows on the right bottom side of the custom color choice spectrum menu, then the world is your oyster! All the colors used for JPEGS are created from 256 brightness values applied to red green and blue TV phosphors, so each number will be between 0 and 256. So, HERE'S THE TRICK: you type in a series of PERIODS and spaces between the pictures, words or whatever, THEN CHANGE THEIR COLOR by selecting them and using the palette icon on the "Format" toolbar, clicking on "Define Custom Color," and entering the SAME background values you noted on a piece of paper -- let's say 50/200/50 (it's usually rgb, in that order), a fairly strong green. If you are working with a committee that is liable to change the background color any day of the week, this solution may not be for you, but it can be very handy. The trick may become visible going between Netscape and Internet Explorer for certain colors, I am told. Again, the trick for spacing is usually using a spacer GIF, which is a one-color picture that is either the same color or transparent against a background because of a "code" that assigns one of the colors of the picture "transparency." This transparent coding is one of the distinctive features of 256 color GIFs, because it makes all sorts of formattig and animation possible. Saving a picture as a "GIF" with transparency requires a program that can do this. For formatting purposes, one can "save" a spacer GIF and crop and re-use it repeatedly.)

Here is a "spacer.GIF" (feel free to save, copy and paste):

I have often wondered how in e-mail and on web pages, there will be a hyperlink that says "Click here!" when the name of the file is NOT "Click here!" And now I know one way of doing it at least. Type "Click here," then highlight it -- the same old procedure of clicking on the left mouse button and "dragging" a block, then releasing the button-- then either go to "Insert" on the toolbar, or "Edit" on the toolbar, and click on "Hyperlink." We may be getting ahead of ourselves here, because if one intends to create a link to another page, the best way to do this is to "Open" the destination page in "File" on the Main toolbar, and then use the blue "Back" arrow icon to return to the page where the link is being made, and click on "Hyperlink" and use the cursor to select the "Open Pages" tab. The "Open Pages" menu will then include the page that you just opened. (If one types in a link to a page that isn't "current" with the menu, it won't work.) One has to be a little careful when opening additional pages, since past opened pages are removed from the list if one opens a file without using the blue "forward" arrow icon to keep them "active," by not opening "over" them. If "Click here" is going to lead to a web site other than the site you are designing, click on the "World Wide Web" tab, and list the address at the "http" prompt. The "Hyperlink" listed in "Edit" is the same as the "Hyperlink" listed in "Insert." As a friend has shared while studying Windows98: you can do anything in about ten ways.

Do underlined link words make your main index page look too "homemade?" Then perhaps it's time to make attractive image "Buttons" by inserting GIFs and hyperlinking from them.

Adding a picture is extremely fun. The hard part of the job is having the picture on hand if you are relatively new to the process. Click on the picture icon. Hit the browse button. Locate the file, click on it, press the "Open" button. And "voila!"

You may be wondering about the black edges, or the marble background. To remove the black border is not very hard. One may use "MS Paint" or another image editing or "paint" program to trim off such edges. One cannot edit the image IN "Front Page Express." One needs to edit it and save it as the same name, or load the new image using the picture icon once the new picture has been made and saved with a new name. As for the marble background, many solid modelling graphics programs like this titler will allow one to input a ".bmp" file as a background.

While we are on the subject, this is a fairly large picture. Picture size is determined at the time the picture is entered in the computer. It includes both resolution in dots per inch, and size in inches.

*One may want this but have to work with this:

Resizing pictures can be done in two ways. The "quick" way is to click on the picture while in "Front Page Express." (It doesn't happen in Internet Explorer). It will suddenly have small black boxes appear at each corner and halfway along each side. If one positions the arrow cursor onto one of the little boxes, it will become a double arrow. Now clicking down and holding the left mouse button down -- "dragging" -- alters the picture: the side boxes cause "stretching" or "squashing;" the corner boxes reduce or enlarge the overall picture. This is called the "quick" way because it results in a picture that will load as if it were a large picture, very slowly, even though it is only the size of a postage stamp.

The longer better way is to use a paint program like the "MSPaint" built into Windows98. (And there are many affordable paint programs to be found, some under $20, some free.) "MSPaint" saves images as "bmp" files, but can apparently import jpg's and gif's. Go to the "Image" button on the toolbar, and click on stretch/skew, or words to that effect, then save the new version as a different name. In this way, I made the 10% reduction you see above. (Be sure to save the .bmp as a 256 color bmp, which is similar to a gif, since some web space providers seem to filter out high resolution bmp's. Gif's are the crudest/fastest of the three, and Front Page Express will automatically offer to convert images to gif's when you save your pages.) Incidentally, thanks to the folks at www.digital-immersion.com for "Merlin 3D" real-time modelling.

Doing reductions of images in MSPaint or Adobe graphics products results in sparer images that load fairly fast -- a 600K picture could drop to 60K -- and can be used to "link" to larger images, by highlighting the picture, and then going directly to the Insert command on the toolbar to make a hyperlink.

"Thumbnails" like this are worth the effort. Many people believe the "professional" look is just a matter of doing the slightly harder things we all appreciate. Do you appreciate a few small graphics that quickly load? Do you like them to relate to the business? Do you like the site to have some "personality?"

After I learned this, came some of the really fun discoveries for me, like the way that "Tables" are used to create the newspaper-style pages of most web pages, and are used extensively to make the involved graphical "navigation" pages. Click on "Table" at the main tool bar, click on "Insert Table," and the rest is history. Actually, the rest is having the courage to go to the squares created, and immediately click on one, then go to the main tool bar, and click on the icon to add a picture. By this point, one should know how to add a .gif file picture to e-mail, and now how to browse for the one wanted, and then open it. This makes one of the squares much larger, but the small squares around it are still there, except they have stretched. Typing in the other squares creates the words around the pictures typical of web pages. All that the table tool does is make the HTML browser see the table as one large image, so it doesn't separate the elements into a narrow column when the viewer's available screen area is smaller than the page being used which is measured in pixels and is typically 800 x 600. The largest image typically defines the size of the page, and if the viewer's screen area is smaller, triggers the appearance of bottom and side sliders to scroll the image.

"Front Page Express" has a WYSIWYG -- what you see is what you get -- display screen giving substantially what the finished web site will look like. But with one important difference: it shows the presence of graphical formatting elements like tables. Tables are used extensively in arranging graphics, and graphics are used extensively in pages which have pictures that link to pages in a web site.

You may notice one interesting thing about tables: the way they seem to squash and stretch when the screen size is changed. This is most pronounced when the table is inserted "centered," as it will accomodate whatever screen size is available, and when there are images in the table that are smaller than the available squares. To reduce surprises, use background-colored GIF's that are the minimum size you would like the table squares to squash to, and insert these in the table, and either left or right align the layout, or only view the screen at its 800 x 600 setting.

Detective work, locating interesting web pages, and "saving" them using the "File" command on the main toolbar of most web browsers can be extremely rewarding when one is a beginner and the idea of a "table" seems very foreign. I don't advocate stealing, so I recommend visiting a site like www.webmonkey.com for learning the straight dope. The main point is that EVERYBODY IS USING TABLES.

If Internet Explorer is installed on the computer, one can go back and forth between Front Page Express and Internet Explorer, seeing how well links and other features work on the computer before loading them onto the Internet. Many tables may become difficult to view without going back and forth between "minimized" "Front Page Express" and "Internet Explorer" programs. This is a much better way to work.

GETTING INTO HTML

In its "View" menu on the top toolbar, "Front Page Express" can be switched to show the hidden HTML code that it automatically generates, but one rarely checks HTML if the screen looks right. If one works with existing formatted web pages, saved from the internet by using the "File" menu's "save" function while actually at the original page; one can then open these html files in Front Page Express and play with them to one's heart's content. It is possible that some or many of the format elements will be the product of careful html code-writing. Front Page Express allows the use of code-writing, but the expedient thing is to work with the page as it stands and avoid major changes. It's going to look great.

What if you would like to work from scratch? No problem, but some programs, like "Front Page Express" which is a "mini-basic" version of "Front Page" do not include a lot of features. (The picture reduction that I did above is probably "built-into" "Front Page." or other powerful programs like Macromedia "Dreamweaver.") But does that mean that it is impossible to add a counter, since "Front Page Express" doesn't offer counters? Not at all! As I said, all HTML is the same! If there is an HTML feature, it can be added to your HTML file! Here I show a little of my ignorance, because there is something called "java" developed by Sun Microsystems, which is used in HTML, but which is a different set of tools. A web browser can have "java off" deliberately, so that pictures that flash or move will not work. There is a large culture of javascript "guru's," who are very helpful as long as one does not insist they work for them for free. Public domain javascript can be found a www.webmonkey.com as well as other places.

Although "Front Page Express" doesn't appear to offer certain features, they can be procured from other sources -- I got a dandy counter from http://stats.superstats.com -- and copied and pasted using CONTROL C and V commands. For some perverse unknown reason, the HTML editor in "Front Page Express" lacks the basic editing functions provided in MS Notepad, which is often used for HTML programming because the resulting files do not add any word processor formatting codes. It would probably have been easier to do this using MS Notepad or MS Wordpad. Mini-basic text programs are all that some HTML programmers ever use.

Reading about HTML from a book has the advantage that the weird behavior of web pages -- when one removes one item or resizes the screen -- will suddenly make sense. The reader becomes "in on" the many little intricacies of HTML: designing in "pixels" rather than inches, and "mapping" to establish and retain a look. And it has its rewards: like learning that "Notepad" is all the HTML editing tool one needs. Every feature from "frames" to clocks to "roll-overs" is FREE, no need to invest in any programs other than an editor with automatic screen refresh that will show in real time the effects of one's HTML typing. HTML is for people who love to type.

If Internet Explorer is installed on the computer, one can go back and forth between Front Page Express and Internet Explorer, hitting "refresh" and seeing how well links and other features work on the computer before loading them onto the Internet.

CUTTING AND PASTING

The current trend in websites seems to be to have vertical or horizontal bars composed of words, each word being a hyperlink of one kind or another. In the case of the vertical bar, this seems to be easy enough if one makes a solid color rectangle in MSPaint or another program, and saves it as, say, "rectang1.gif." Then, one can open "rectang1.gif" and add text, and save it as "rectang2.gif," and repeat the process for 3, 4, and so on. Since the rectang images are all the same size and shape, they will neatly stack, becoming one solid block of color with hyperlinking words (once they've been hyperlinked according to the instructions above).

From my reading, I have learned that many of the buttons that I thought were GIF's, are NOT. Just nicely written code, putting a size and color of a font in a certain position and having that position a link.

How far can code writing go? For one thing, one can have circular shaped links composed of many individual linked lines of pixels, in the shape of a circle. And Sun has been instrumental in the development of VRML 2 browsers, similar to game programs, except that moving game characters can be links.

META TAGS

At this time, the "META" method seems somewhat primitive, and may soon be replaced. META information is currently available on the web, but I have not done a thorough search of it for public domain sources yet. A few lines of hidden text can be seen using MS Notepad or the HTML viewer at the beginning of many pages. Many pages do NOT have META description and keyword information, but it is recommended. The most powerful words, experts agree, are the words of the web site title. If the site is for car loans, the title should be "carloans.com." META information is insignificant compared to domain names. There is some evidence that having a true domain name is preferable to a subdomain for search engine use.

This does not automatically submit your site to the popular search engines, that requires going to them. I have read this described as "by hand" delivery, but it is simply going to the search engine site, such as http://www.yahoo.com (though Yahoo does not consider itself a search engine), and reading their instructions on how to "suggest" a web site, and then answering their questions. Voila! The leading search engines all seem to prefer this approach to the "automated" method that results in thousands of web pages having one's link. At the same time, however, some of the major search engines consider having one's presence on multiple links as a criteria for placement, so spending $20 once for robotic submission may be worthwhile after all.

PARTING IDEAS

If doing web sites is interesting to you, and you would like to seriously look at more fully designing web sites from a wide selection of templates, take a look at http://www.webmonkey.com . It features a kids section and is highly recommended. And don't be shy about looking for free templates elsewhere, using search terms as "public domain" "web design" or "free web templates."

And use a spellchecker or take-to-lunch a friend with good proof-reading skills. The title of this was originally "How to Make a Profesional Looking Web Site."

And some of the rewards?! If you develop a web site that is for a charity, you can reduce your income tax from home. Just ask them for a thank you letter. If you want to demonstrate skills for a prospective employer, who you intend to contact by e-mail, your web site can display everything from photographs, to word-processed documents, to articles, to letters of recommendation. And similarly, if you are contacting investors and just want to see if the two of you have compatible philosophies or business experience, the web site is an excellent place to let them get to know you.

By the way, the following paragraph of links within this site was suggested by feedback from friends. It is simply a paragraph created by opening all the pages, then using the "Insert" and "Hyperlink" commands in "Front Page Express," and typing "|" between entries. Once complete, it was copied and pasted.

In the event you become stumped, there are two sources of info that you have ready access to: the many free sources of information on the Internet, especially about HTML, as in newsgroups, "neighborhoods" with their editors, and many many tutorials and FAQ sheets; or an expert who you may contact and offer money. Do you have a favorite web site or two or three? Do they have webmasters and take credit cards? If "errors" are appearing on your web site where they never did before, this would probably be the second fastest solution. The other solution is to make relatively frequent "back-ups" of your pages as you go along. Backtracking my steps and undoing whatever recent improvements I have made has saved me time and grief, and I recommend it.

8 Garage Capital 1999, 2000