Let's Make a Basic Website

I'll be the first one to say that this is perhaps one of the most difficult things for a web designer to accomplish. The problem is that once one gets started, it is generally a flow-state kind of thing... you get in "the zone" and all of a sudden, you've got to figure out how to link up ten different pages and still have the whole thing make sense.

If you plan to publish a webpage or a website, you must be doing so for a reason. Whether that reason is to promote a business, a school, or simply to tell the world about yourself, you have a reason. Before you ever type a word or scan an image, take time to pragmatically consider your projected content. Nothing is ever written in stone of course, but it is a good idea to have some sort of game plan. Let's assume, for the moment, that you wish to publish a small personal site. Get a piece of paper (or open a blank document in Word or WordPerfect, etc.) and start asking yourself questions about what you'd like to have on the site. Jot down the various topics (typical ones are: biography, musical interests, resume, hobbies, accomplishments, original compositions, etc.). If you were to create a page for each of these topics, you would have a website with at least seven pages. Are you thinking that I miscounted? Don't forget your INDEX Page... although many people (myself included) choose to place biographical information directly on the index page. So, let's say we will want seven pages in all -- that's a good start. Our index page, therefore, will have to link to at least six other pages and those six pages will have to link (at least) back to our index page.

Now, don't get excited... it's not time to start yet! Take out seven sheets of paper (I suggest using actual paper for this because of the difficulty in hand-sketching in Word). Start with page 1 and mark INDEX on the top (place this page aside for now)... follow through down the list for the other six pages. Start with any topic page and begin to make jot notes on that page about the items (pictures, explanations, graphics, etc.) that you would like to include under that heading. It may be necessary to continue on for more than one page so keep some more paper handy -- I don't recommend writing on the back of the page because of the problems in figuring out which is the front later when you have the floor covered with a pile of paper. Follow suit for all topics. Additionally, make a list of all photographs, graphics, etc. that you want to include and write this list on a separate sheet as well.

NOW... you've got a good plan in place. Taking the time to think things through at this very early stage in the game will make your life soooooo much easier than it could have been! But, again, don't get ahead of yourself... this is a great plan which must be organized into some sort of layout. Some people find it useful to draw tree diagrams... others actually create a physical tree using the papers. Whichever method you choose (they are as varied as the people who use them) it is important not to skip this step -- it will keep you from having to guess at where to go next during the development process, thereby losing a great train of thought.

Planning and being organized using paper (or whatever method you've chosen) is one thing... now you must make it make sense in computerland! Open FrontPage and create a "NEW WEB" -- choose "empty web." The other templates are self guiding and contain various pre-constructed elements... we're making our own for now. You will notice that a Folder List window comes up on the left which contains two folders: Private and Images. Each page you construct while working in this web will be added to this folder list after you save it. Click on the Parent Directory (the one at the very top of the page) to make sure you won't be adding pages under a previously constructed heading. Go down into the white space of the Folders List window and right click... select New Page from the pop-up menu. Name the page "index". Repeat this process for each of the pages you created in the planning stage. Now you're ready to start the fun stuff!

Layout and Design

Now that you have a good idea of your content, you must begin to think about how you want to present it for viewing. The best way to solve any problem is to consider how other people have solved similar problems in the past. In terms of websites, this couldn't be easier. Go to the Internet, open a search engine and type in anything... it doesn't matter what. We're not looking for topics here... we're looking for layout examples. You will find many different solutions -- some very good ones and others that actually make viewing painful. For the sake of brevity I'll stick to what you can readily see -- this website. This is not to say that I have developed an outstanding site... on the contrary, you may think quite the opposite (that's your prerogative) however, you are in my world now, so you'll have to stick with it. You will notice a few things about my site. First of all, I've chosen to present my information in a consistent pattern. That is, I don't have a different background for every page, I don't radically alter my font patterns, etc. This creates a sense of unity -- when people view a website and navigate through its pages, they like to feel like they're still in the same place. It also gives the site a very refined and professional look. Adding to the professional appearance is the fact that the site isn't busy... there are not a great deal of bells and whistles which can actually distract from meaning and slow down viewing -- people generally get tired of waiting for images to download after the first 4 seconds. The background of my page is relatively neutral... I created it using Corel PhotoPaint to appear as a textured slate-grey. The slight blue tint of the background reverberates in the text of the site, which is a navy-blue. I chose blue because it is a cool colour which reflects logic while at the same time offering a soothing/relaxing atmosphere. You will note that all hyperlinks are clearly indicated by colour, each separate section is marked by headers and often separated by a plain horizontal bar, and that the site is also relatively easy to browse through. If I were to offer one major criticism for my site, it would have to be the copious amounts of text. However, considering the purpose of the site, this cannot be avoided. While I am using my site as an example of a relatively good one, it is important to note that there is an infinity of choices out there. It is your job to come up with a format of your own. FrontPage actually offers a great set of designs which do all the work for you... they are called themes.

Themes

A Theme is a complete, professionally designed layout for a page or site which incorporates all of the principles and elements of design resulting in a very consistent and visually attractive layout. All in all, there are over 50 designs which can be chosen from in FrontPage. Some are installed by default, others will have to be added from the program disk (you will be prompted automatically if this is the case). A theme applies professionally designed graphics to elements of the pages in a FrontPage-based web. FrontPage offers a gallery of over 50 themes that consist of similar design elements and color schemes for bullets, fonts, graphics, navigation bars, and other page elements. When applied, a theme gives pages and navigation bars in a web an attractive and consistent appearance. Click here to view an example. Themes are great but they generally bug me... they tend to create many overlapping and unnecessary folders and files. Everything gets copied two or three times which makes changing anything or removing items from an uploaded folder very annoying. For example, the sample themes page which is linked to this paragraph, while simple and very very empty of content, generated the folders which are shown in the following image:

Each of these items (with the exception of the frontpage-link.jpg image) were created automatically. For this reason, and for development of independent thinking and unique/creative web designs, I do not suggest using a theme for your website. If you wish, you can explore how to create a page or a site using themes by going to Microsoft FrontPage Help in the menu/tool bars.

Working from Scratch

Working from scratch is perhaps the most rewarding way to create webpages in FrontPage... from the beginning you have complete control over how a site will look. To work this way requires creativity and vision -- you must take extra precautions in the planning/design process to think about how you want your finished work to appear. This cannot be done in a vacuum... you must consider everything.

Choosing a Background

As mentioned in Layout and Design, choosing elements which will present an unified and professional looking finished website is an essential step. There are a number of things that should be considered when choosing a background: i. you must think about the purpose behind your work. Is this a fun site? Is it an academic site (like this one)? Perhaps a personal site to function as a resume or portfolio? The kind of site you wish to create will dictate the use of colour, emphasis, line, etc.; ii. Additionally you must consider your audience. Are children your focus? Adults? Teens? -- both of these: purpose and target audience are imperative concerns to consider from the outset... a site for kids will attempt to integrate many vibrant colours and quite often includes a wide variety of graphics. An example of a kids' site which exemplifies all of the qualities of its particular genre, I guess one might call it, is http://www.ytv.com. For our purposes, if you will remember from above, here in this guided process we will create a personal website. As this is the case, we must consider backgrounds which will reflect something of ourselves. Colour and texture are primary concerns here. Most people choose to use their favourite colour -- most often stick with a flat colour as well (one that is completely saturated). That is, a colour without texture. Textured backgrounds, like the one on this site, are actually image files that either have to be found (on the Internet) or created, using programs like paint, irfranview, photopaint, image composer, etc. or a combination of various programs. For example, here are a few backgrounds that I created in less than 5 minutes (for all of them) using paint and irfanview:

Let's begin with a Solid Background: While in FrontPage, go to the menu bar and choose Format. Under this dropdown menu, select background. OR Right-Click anywhere on the screen, choose page properties and select the Background tab.

Under the Colors in the middle of the dialogue box, you will note that FrontPage has made it quite simple to design a nicely balanced layout. You have the opportunity to set the background colour, choose a font colour to match, along with hyperlink colours for before, during and after use.

Your other option here is to choose an image, such as those above, to use for your background. Remember the rule... if you want to use pictures or files, they must all be located in your images file in your new web!

Your first step should be to find a suitable image...not all images will do! You may notice that the images above are quite small. This is because it is a good idea to use small, easily tiled images for your backgrounds... they don't look like an old boot and they download quickly. If you choose a large file as your background, it may look beautiful, but generally people don't have the patience to wait for it to become visible.

When an image is set as a background, it is replicated and ordered on the screen in a grid pattern... if you don't want the seams of the images to be seen, choose backgrounds which are similar in style to those above -- even these, because of the speed and carelessness in which they were made, are not quite good enough.. My suggestion is to practice with these (or some of your own) before moving on. Once you set a background picture, you can find font colours to match. This can also prove quite difficult... my advice: stick with colours which do not distract from the words on the page!

I'm not sure if I should offer this advice or not, but as it is a common practice, I'll go ahead. You can actually steal backgrounds from other pages... it is a very simple matter. All you have to do in this case is to find a site with a background you like, then right click anywhere where there are no images or text... the popup menu which appears has the option of saving the background... simply click on that option and specify the location! Again, I don't suggest that this is the most kosher way to go about procuring a background, but it can be done. Try it with this site... decide for yourself whether I've chosen an appropriate font colour or not! Finally, you can get a background from another page in your web... it does the same thing as specifying the background picture.

Finally, you can set the background image as a watermark. Have you ever seen a website where the text moves but the background doesn't? The HTML code for this is inserted into the body tag an basically looks like this: <bgproperties="fixed">. An easier way to do this is to click on the Watermark option. If you like this kind of effect, go ahead... have a ball! A big bonus to this is that if you decide to go ahead and ignore my warnings about using a large image (you will notice that even the largest images are eventually tiled), you can set the size of the image to the maximum size of a given screen and set it as a Watermark... this avoids having your reader see the tiled images.

Adding and Formatting Text

Finally, something easy! Well... easier, anyway. If you can type, you can insert text... it is a simple matter. It is important to remember that your text should complement the background, and it is generally not a good idea to choose a font style which is difficult to read. Additionally, the font doesn't appear exactly the same after publishing as it does in FrontPage... the font you are reading right now, for example, is TimesNewRoman size 12. It looks quite a bit larger than that when published. Once you decide to start inserting text however, you will have a very good idea of how the page will look. You can adjust the colour and size of the font using the elements of the Font Bar (see Introduction to FrontPage). It is important to note that a webpage, like a newspaper (and any other information text) ought to have clearly marked headings to help the reader direct his/her attention properly... this can be accomplished by setting the font style to a heading (1... 6). Generally, the top of the page should clearly indicate what the page is about... this is like a title for an article in a magazine. This setting, like the one at the top of this page is accomplished by choosing Heading 1 style. Headings 2...6 get progressively smaller. It would be superfluous to explain how to alter font... my advice is to play with the Font Bar elements and see what works for you.

Importing Text (Cutting and Pasting)

Sometimes it is necessary or even desirable to import text from another program into FrontPage. This is a relatively simple matter but there are a few things which ought to be considered. Firstly, as FrontPage is a Microsoft program, fewer problems exist with transferring files from other Microsoft programs than from applications such as WordPerfect from Corel. This is because of the coding systems involved in the program designs -- just as it is easier to put a Ford engine into a Ford vehicle than it is in a Nissan, the same holds true for computer programs. Secondly, if you have used font properties in your previous document, a bold word may be translated as a heading during the pasting process... therefore, it is always wise to preview both using the preview mode and in a browser before you upload. Additionally, the paragraph properties may cause layout problems when you upload the text that has been imported. Try this out: go to a wordprocessing program like Word or WordPerfect. Make a bulleted list and the cut and paste that list into FrontPage. Preview the page... you will notice that the bulleted list is spaced differently than you had anticipated. To alleviate this problem, you must highlight the text you want to alter (in this case, the bulleted list) and right-click. Choose Paragraph.. When you get in there, you will see the following dialogue box:

Under the Spacing option, you must specify the settings: choose single space under Line Spacing and make the Before: and After: equal to 1. This will generally take care of the problem for you.

In terms of changing your heading properties, I often find it easier to press <ctrl>+a to select everything on the page and making the font all the same. I then go back through the document to adjust my headings appropriately. NOTE: You will only have to do this when you cut and paste!

How to use Tables

It is often useful to display items using tables. Tables can be inserted anywhere on a page and can be extensively formatted. The size of tables, number of columns and rows, etc. can be determined both before and after they are inserted. Modifying a table is not that difficult... the purposes for modifying tables are however, many and varied. A table consisting of a single row and column is presented below:

This table has been set to appear centered and has a pixel width of 600. Setting your tables to this width will allow the user to view the table and all of its contents without having to worry about scrolling horizontally. The border size of this table has been left at the default setting, as has the background colour and border colour. This kind of table is useful for emphasizing its content and separating it from other areas of the page.

To change the settings of your tables, you can right-click anywhere inside a given table and choose Table Properties from the pop-up dialogue box. The following image will appear:

The Layout portion allows you to specify how the table will appear visually in terms of its size and shape. I have shown the "Center" alignment here. Float -- leave this alone! It causes problems if the reader is viewing your page in Netscape! The padding and spacing of cells allows you to set different looks to the content vs. the borders of each cell in a table. A cell is an intersection point between a column and a row.

I have also shown that the width is specified in pixels, and, like the one above, is set at 600. You can also choose to set the width to a percentage number of the screen. The default setting here is 100 percent, which results in a table being created with rows that span the width of the whole screen... this could cause problems for viewers with screens which display at different sizes than the one in which you create your page.

Similarly, you can specify the height of a given column in the following option.

Borders are another matter... they have little to do with the construction or layout of the table... they deal more with how it looks in terms of aesthetics. Changing the border size can go from making a very fat border to an invisible border where the contents of the table are displayed but not the table itself. More on this in the next section. Here are some samples of different settings:

You can change the look of the layout inside the table (eg. center, etc.) by highlighting the table and choosing the center function from the Font Bar.

Perhaps the most common use for tables in web-design is for layout. Here, it is often (though not always) the case that the table borders are set to zero... this makes the table invisible and removes any aesthetic concerns in terms of the borders, etc. Tables are essential in terms of java script -- most of the professionally developed sites make use of java and tables (eg. http://www.cibc.com). More elementary principles can also be put to use... take Cynthia Lanius' page on Mathematics for example. This site takes a bunch of tables with no borders and various background colours to create a very interesting layout. Additionally, leaving blank cells in invisible-bordered tables allows you to make effective use of white space for emphasis, balance, rhythm, etc.

Tables with invisible borders allow you to set column-views on your site which are otherwise relatively impossible to accomplish with HTML.

Many people consider tables to be an alternate route to achieving the same fractal goals of frames-pages.

Not only can invisible tables be used individually, but by setting tables within tables, a very complex arrangement of information is not only possible but quite simple to achieve. Here is a table with a group of four nested tables. Imagine the possibilities available to you if you were to make these invisible and begin organizing. Take my index page for example... the entire page is organized in this manner.

Again, my advice is to play around with tables, as you have with many other elements thus far. The best way to learn anything is to jump right in! Go and toy around with this element of web design for a while and then return.

Using Images in Your Webpage

An image is a great addition to a webpage. They come in a variety of forms and types, each affecting the web-browser's experience in a slightly different way. To get that good quality, color images should be saved as 24-bit colour. This means 16 million combinations that can be shown. The basic types (though not the entire list of types by any means) of images used in web design are:

Clipart -- Basically, clip art refers to any graphical image which is available for viewing on a computer. The more advanced definition involves a description of the fact that clipart is an example of vector graphics (images which are constructed from lines, dots, and curves). These are very smooth and easily resized without any great loss in quality.

Bitmaps -- Actually, these images are literally mapped on the screen in bits. That is, they present images as mosaics (compilations of individual dots or pixels). These offer less quality than vector graphics. The file extension for bitmaps is .bmp. The format is used for store and display color and grayscale images. The format supports 24 bit color, which makes it suitable for photos but it can also go up to 34 bit colour -- thus, the file sizes can get quite large if not compressed. When resized, these lose a lot of quality.

JPG (or JPEG) Files -- This type of image is named after the Joint Photographics Experts Group. The file extension for a JPG image file is commonly .jpg and offers a colour yield of 1-24 bits. JPG offers a high rate of compression which makes it particularly useful for large image files -- it is the most commonly used image file type on the Internet! However, JPG images are referred to as lossy which means that whenever you alter them (via image editing programs) information is lost. PNG (Portable Network Graphics), developed by Adobe was designed to take the place of GIFs and are actually a variation of JPG images. They can hold up to 48-bit color and can use variable transparency.

GIFs -- Graphics Interchange Format files are also very common and should be used on the Internet if the image only requires 256 colors (1-8 bit). Images that have more than 256 colors should be saved as JPEG. Generally, GIFs are used for simple screen display.

Animated GIFs -- It is possible to set a number of GIF images to be interchanged at intervals. Each image, having a slightly different variation on the others, acts as a frame-capture-image, as in a movie. That is, by displaying a number of pictures, one after the other, an animated GIF gives the impression that the image is moving.

Thumbnails -- Not all images are meant to be displayed exactly as they are saved. That is, the size of an image file is directly related to the amount of time it takes to appear on the screen (download time). As such, it is often desirable to provide thumbnails of images -- a smaller version of a relatively large image -- which are actually hyperlinked to the original. Before the advent of FrontPage and programs like it, this was accomplished by resizing an original image and saving it in the images folder in addition to the original image and under a different name. Usually, to make the relationship between the two images clear (because they are actually the same image set to different scales) developers would save the smaller image under a similar name. (For example: let's assume that I wish to thumbnail a picture of myself called ME_2.jpg -- I would probably call the thumbnail ME_2_small.jpg, or something of the sort). This makes sense, of course. As such, FrontPage does the exact same thing... it simply does so automatically. To explore the benefits of thumbnails, follow these steps:

2. Insert the image into your webpage using the insert-picture button on the tool bar

4. You will notice that a new tool bar appears on the bottom of your page which looks like this:

This is the Picture Toolbar and allows you to make direct modifications to an image you have inserted into your page. A complete discussion of the function of the image tool bar's components is beyond this introductory session and will be dealt with in future additions to this site.

5. The third button from the left on this tool bar is the auto-thumbnail button... it is represented by an image which shows a larger picture being transformed to a smaller one (just in case you missed the point). As this bar only appears when an image is selected, to thumbnail a selected image, simply press this button.

7. This is great! However, remember that

you now have an image on your page that has not been saved in your images folder... it has the same name as the larger file but it has _small added to the file name. This image must be saved in your images folder or it will not appear when you upload your page. Luckily, FrontPage has prepared for this as well. When you go to save a page (for the first time or otherwise) after adding a new thumbnail using the FrontPage tools, you will be prompted to save the new _small image as well. The image shown here is an example of this pop-up dialogue box. Here, I have attempted to add a new thumbnail of myself and a young student at St. Joseph's All Grade (taken 2002). In this instance, to be certain that I will save the image in the proper folder, I should choose Change Folder from the options at the bottom of the box. This will allow me to indicate directly where the thumbnail (_small) versions of my pictures will go. Many people find it useful to create a separate sub-folder for thumbnails in their images folder in order to stay organized.

8. Congratulations, you have added a thumbnail to your website! Just a note here: it is often a good idea to use tables in organizing your layout if you wish to include a lot of thumbnails on a single page.

Adding/Importing and Formatting Images From the Internet and Other Sources

Image files can be found practically anywhere. Most Windows programs come with a stock of clipart and, of course, the Internet is a great resource. There are a great number of sites which can provide free images out there. Additionally, you can create your own by using scanners, digital cameras, image creation software, etc. In any case, regardless of the source or of the type of image file that you are placing in your website/page, there are some basic principles that must be understood and taken into account:

Now that you've had the chance to review these considerations, you will be pleased to note that, despite the variety of image file types, all image files are handled in the exact (or nearly exact) same fashion. No matter what the image, it is inserted and manipulated using the same methods, tools, and techniques. Let's insert an image in your INDEX page, shall we? To do this, follow these steps:

Note that I have shown the Picture Properties box and the Style box which appears from selecting the style button on the bottom left-corner. Additionally, I have shown the pop-up menu that results from clicking the Format button on the Modify Style dialogue box. This allows you to make modifications to the various aspects of the file, including borders, position on the page, word-wrapping, etc.

You will notice when working with images that they are not as easily moved around on the page as they might be in other programs (eg. wordprocessors). This is because of the fact that the Internet requires specific information for placement, just as it does for source. By playing around with the placement of images, you will begin to understand what each of the justifications (also available on the Font Bar) will do for you.

Using Hypertext/Hyperlinks

You will recall that hypertext allows the user to "jump" from one document to another or to different points within a single document. The term was coined by Ted Nelson in 1965 (see Introduction). Hyperlink is another term which is used to refer to a given example of hypertext. You have encountered many since you started reading this page and indeed, you have seen one example in this paragraph. As what you are viewing is only a small part of a large amount of code (HTML) it is not difficult to understand that a hyperlink is basically a visual reference for the user (you) to select a line of code which will display lateral information. That is, you will jump from place to place rather than go down the page as if reading a book. Hypertext defines the Internet-- without it, very little could be accomplished. Therefore, it is necessary for you to be able to use it... how else will a viewer be able to navigate or move around inside of your site? If your index page wasn't linked to the others and vice-versa, your viewer would be stuck on your introductory page and have no way to see the others! Here, again, FrontPage has made things very simple. With the click of a button and (perhaps) a little typing, you can insert hyperlinks into your web documents with relative ease. For example, this Introduction link was made with four clicks of my mouse buttons... the line of code that I would had to have typed otherwise looks like this: <a href="introduction.htm">Introduction</a>. This doesn't seem too difficult in and of itself because I've linked to a page in my web... but consider the fact that this hyperlink School is not on my web but a link to a document on the Internet. This link looks like this: <a href="http://www.k12.nf.ca/stjosephsallgrade/index.htm">School</a> in HTML. Here, I have shown you the important difference between internal and external linking. Let's explore this a little further...

This process has been simplified by the FrontPage designers to the extent that, as I mentioned above, a link can be created between documents in the same web with as little as four clicks of your mouse button. To create a link of this sort, one must first have at least two pages in one's web. That is, it is impossible for anyone to link to something that doesn't exist and still have a working link. NOTE: A link that doesn't work is called broken and results in a 404 Error (which looks very unprofessional and limits the viewers' interest in proceeding). Let's assume that you have done what I suggested and created new empty pages for each of your seven topics/sections derived from the planning stage. For argument's sake, let's say you want to link your index page to your resume. An Internal Link is a link to a page within you

r own webspace... linking to your resume is an example of this. Type the word Resume somewhere on your index page (worry about layout later). Highlight the word by double clicking it or by clicking the left mouse button and dragging the mouse across the word. As always, inserting a hyperlink can be achieved in a couple of ways. The fastest way is to right-click the mouse and choose Hyperlink from the pop-up menu that appears... you can, however, also do this by selecting the hyperlink button on the tool bar -- both methods will result in the dialogue box shown here. However, right-clicking may prove problematic if you're clicking on a word that FrontPage doesn't recognize as valid... it will prompt you to correct the spelling. A good example of this problem will be abbreviations and acronyms. Once you do select the hyperlink option (whichever method you follow), you will notice that you have various options here... first of all, you can simply select from a list of your webpages (the one shown here is of a sample_web). You could simply double-click one of these and the new hyperlink will direct the viewer to that page. Another way to do this is to click on the

button which allows you to explore and link to all of the files on your computer system. I find this one to have the fewest glitches and generally, I use it rather than the items displayed in the window. Be careful, however, that you only link to files which are housed in your web folder... otherwise, the script (when uploaded) will attempt to show what is on your computer and come up with nothing.

You can link to other pages and any other files you wish. Note however, that if you link to something like a WordPerfect document for example, the user must have WordPerfect installed on his/her computer in order to view it.

Other elements in this dialogue box allow you to customize how the hyperlink will work. For example, you can change the target frame for the hyperlink. The default is usually (none) which means that the new page or file will take the place of the one that you are viewing at present. Perhaps the most common type of hyperlink other than this is the (New Window) option. Click here to see what this one does. Basically, as you most likely have noticed, it opens a new window to display the new file. This is useful because even if the viewer proceeds to another site in that window, your page is still displayed (unless s/he shuts it down, of course).

You might be wondering how to jump from section to section in a single page. This Introduction to Basic Web Design contains many of these internal hyperlinks, called Bookmarks. To link to a section of a given page from within the page itself, it is important to first bookmark the area to which you wish to jump... the bookmark is the target of your link. To do this, highlight a section (a word or two will suffice) of the area to which you want to be able to jump back to from a given location. Go to the Insert menu on the menu-bar and select bookmark from the list of options. You can name the bookmark anything you wish, but it is advisable to associate it with the area it is in, to avoid confusion when linking to it later on. The bookmark is invisible when a file is uploaded but is represented by a dotted-underline in FrontPage so that you can easily see what you've bookmarked already. Once you've inserted a bookmark in your page, you can then link to that area of the page from other areas. For example, Click Here to go to the top of the page (you can return to this spot by clicking the back button on your browser window). To link to a bookmark, follow the instructions for inserting a hyperlink but instead of selecting a file, select the Optional Bookmark drop-menu and choose the name of the bookmark you've created. You have successfully created an internal (inpage) link!

This is now a simple matter. Highlight the point from which you want to jump, usually a word or a phrase which is associated with the desired target webpage. For example, if I was in the middle of a discussion about my University career, I would most likely refer to MUN (Memorial University of Newfoundland). To insert this link, I have followed all of the instructions but instead of selecting a file or a bookmark, I have typed in the URL or Internet Address of the target site in the space provided.

This is exactly the same as creating any other hyperlink with the exception of the final step... click on the button that looks like an envelope:

. Like linking to another website, you will have to type in your email address in the space provided. Voila! You now have a link to your email address... when a viewer selects it, his/her mail browser will pop-up automatically with your address in the proper field. NOTE: Many users don't have a personal email application configured on their computer systems so it might be a good idea to offer a typed version of your address as well.

Once you have created a hyperlink you might notice that you have done something wrong. Don't Worry... you don't have to go back and start over. To fix a problem with a hyperlink, simply right-click the item (be it text, image, or otherwise) and right-click it. Since there is already a hyperlink associated with this item, you will now have the option of Edit Hyperlink.... This will bring you to the same pop-up dialogue box that you started with originally -- fix your problem and move along!

NOTE: In terms of navigation, a table of contents is advisable on the index page. It is also very advisable to have each page within a web linked to both the index page and all other pages as well. This makes it easy for a person to browse around your site (going from point A to point B) without having to worry about going through another page (point X). In this Introduction to Basic Web Design with FrontPage, I have linked all pages to the index (Contents) page via the Microsoft FrontPage image at the bottom of each page and via a link at the top of the page as well.

Horizontal Lines

A horizontal line, like the one above, is very easy to insert into a webpage. In some cases, it may be desirable to have one very long page (complete with bookmarks of course) rather than a large bunch of smaller pages. Take this page for example... it is quite long. In order to divide and separate major ideas and sections within this page, I have inserted horizontal lines between each major topic area. To do this, simply go to Insert on the menu bar and choose Horizontal Line. The line automatically is inserted and will appear similar to the one above. Don't worry... this is not the be-all-end-all for dividers. You can change the way the line appears in much the same way you can change the way a table appears.

Right-click the horiz

ontal line. The line is automatically selected and a pop-up menu will appear. Select Horizontal Line Properties from the list of options and something similar to the dialogue box shown here will appear. This dialogue box shows the properties of the horizontal lines I have used on this page. Note that you have a lot of lee-way in working with these lines. You can experiment with these options on your own to see what suits you the best. As a horizontal line is so simple to insert, even if it turns out horribly, you can still delete it and start over!

One other method of inserting horizontal lines is to find them on the Internet. A vast array of databases offer thousands and thousands of examples of horizontal lines for use in webpages. St. Joseph's All Grade's website uses a colourful animated gif horizontal line divider in the pages of its website. A quick browse around the internet will yield many examples. A fun thing to do is to change the horizontal bars on your website to match the seasons. Simply follow the steps for inserting animated images as you would for any other gif. Here are a few commonly chosen examples:

Previewing Your Webpages

Of course, as I mentioned above, it is a good idea to get a sense of how your website will look once it is uploaded to an ISP. This is important not only after you've finished your work but during the design process as well. For example, suppose you wish to use an animated horizontal bar... these things don't move in the normal construction screen of FrontPage. They only move in the Preview Interface. Caveat Emptor -- remember that the Preview Interface mode of FrontPage doesn't always present the page as it will actually appear on the Internet. It is therefore advisable to save the page on which you are currently working and select the Preview in Browser button from the tool bar. This will open the page in Internet Explorer (or some other program of your choosing). Take advantage of this option when designing your pages... you can test your links and make sure the final layout is exactly how you want it to appear long before you ever decide to publish the site/page to the Internet. Remember, there are literally billions of potential viewers for your site... you don't want to look like you created it while you were sleep-walking.

Dynamic HTML

You will recall that HTML (Hypertext Mark-up Language) is the language of the Internet. A quick reference check ought to reveal that Dynamic means having the capacity or ability to change. In other words, you can add some very neat little elements to your website/page which can surprise the reader.

This was done using Dynamic HTML. Simply select some text that you want to change. Highlight it and select Format from the menu bar. Select Dynamic HTML Effects. The following dial

ogue box will appear:

This Dialogue Box allows you to alter the appearance of an item on the screen (text and/or images) when the user clicks on it, does a mouse-over (like the example above), double clicks on it, or when the page is loading. Depending on what you wish to alter, the application can be formatting (text) or effect (image) based. In any case, each consecutive drop-menu gives you the options associated with your choice. For example, you can swap an image out for another image. Mouse-over this image of FrontPage's logo:

I've altered the HTML on this page using the Dynamic HTML function to swap this picture for its mirror image. An important note here is that you should only swap pictures that have the same dimensions. If you swap pictures with different dimensions, one of them will be altered and not look the way you wish. NOTE: Don't over-use this option... just like too many animations on a page, if everything is constantly jumping when the viewer touches it, s/he will most likely get annoyed and move along as soon as possible.

Working With Sound

Sound is one of those features which will enhance any website if used properly. I do not suggest having sound in all of the pages in your website... if anywhere, I would have it playing on the Index page of a site (if you choose to have it play automatically). Sound files can be added to a site in a number of ways. Firstly, they can be simply linked to the site as any other file is: through the use of hyperlinks. For example, CLICK HERE to listen to a .midi sound file of Angel of the Morning. Sound files of this sort are usually added for the purposes of sharing files. Beyond this, the other most common use for sound files at the basic level is to provide background sound to a page. Again, I can't advise enough against having an entire site filled with sound... not only will it cause some download problems for people with slower connection speeds, it will also make the site very annoying!

The major types of sound files which are used in web design are .wav files and .midi files. Other forms, like MP3 are primarily used for downloading and trading and are not very applicable to the design process.

WAV Files: Usually, this file has a .wav file extension. WAV is short for Waveform Audio Format and is the most commonly used sound file type for Microsoft Windows. All of the beeps and noises that Windows makes are actually .wav files. These files can be very short or can be quite extensive... you can even record your voice as a .wav file with the proper programs.

MIDI Files: Short for Musical Instrument Digital Interface, MIDI files are a result of programming for digital synthesizers. The file extension for MIDI files is usually .mid although I have seen .midi used. They are quite popular and smaller in size than .wav files because instead of representing musical sound directly, it sends information to the computer about how music is produced. The sound waves which are generated come from a soundbank which is already stored in the memory of the computer's sound card. For background sounds, this type of file is most efficient because it downloads faster in the browser.

Implanting Background Sound

Let's implant a background sound in your page. Remember, you can implant any sound file type you wish but I advise using MIDI files for reasons already discussed. As with images, there are a tremendous number of MIDI files available for free on the Internet. Sites like this one: http://www.geocities.com/Heartland/4615/music.htm are literally filled with files and links to other sites full of files. A quick Google search will result in a legion of choices... for our purposes, let's assume that you want to input Angel of the Morning into your Index page. To insert a sound file, you should first download it to your web. Create a new folder (if you haven't already) called sounds in your web. This will be the place where you will store all of your sound files... again, organization is key... it's a good idea to keep all si

milar file types in their own folder. Angel of the Morning is presented on this webpage in a similar fashion to those available on MIDI/WAV sites... they are hyperlinked from a text sample in the page. To download this sound file, simply right-click the hyperlinked text and choose save target as... (choosing, of course, to save the file in your sounds folder). To insert the sound into the page is a very simple matter. Right-click anywhere in your index page (while in the normal interface of course) and select Page Properties from the pop-up list. (Remember this step from Choosing a Background?) Instead of selecting the background tab however, we want to select the General tab in this instance. In this tab, you will note that a space is provided for inserting and dealing with Background Sound. Simply click the Browse button and select the desired sound file from your sound folder. The HTML which you would have to write for this option looks like this:

Looping Sounds You will notice that in the HTML for the background sound includes a "loop" tag. You may also notice that the loop has been set to "-1" This indicates that the sound file has been set to repeat continuously until the end of time (or, of course, until you leave the page). Unless you are using the sound file on a page which won't require constant use (like an introduction page for your site like the: St. Joseph's All Grade site for example) it is a good idea not to have the sound repeating forever. By un-clicking the Forever checkbox in the Page Properties dialogue box, you can stipulate the number of times that your background file will play.

Let's Make a Basic Website!

Planning Ahead and Staying Organized