Creating a Personal Web Page
One of the most interesting and satisfying parts of this course is helping people create and post their own personal web page. Making a simple web page is not as difficult as you might think, and while a "power user" might say I've made it too easy--why not? Let's look at the easy way of making a web page. Once you get the hang of it you can branch out and try some more complex things. If you follow these steps, you can have a web site put together at one sitting (2-3 hours at the most).
Links to additional resources to assist you in developing and refining your web pages are available on the Web Page Construction (HTML) Resources web page which is part of this web site.
If you want to develop your web site using Netscape Composer instead of Microsoft Word, click here.
What to Do Before You Compose Your Page
As with any creative effort, the most important thing is having an idea of what you want to do. The most powerful word processor doesn't write great prose all by itself! Somebody (like you!) has to have a good idea about which you want to write. Well, the same holds true for web pages, so don't just jump into making a page--get out a piece of scratch paper and hand draw some ideas of what you want on your site.
Basically the items you'll want to place on your site fall into three categories:
Text: In this lesson we're going to use a recent version of Microsoft Word (Word 97 or 2000 for Windows or Word 98 for the Mac) to create our web pages, so manipulating text shouldn't be a problem. (Word is a fine word processor, but only an okay web page creation tool--but it is good enough for most beginners.) Of course as with any writing, grammar and mechanics count. A typo on the web has the potential to embarrass you all the way across the world, so write well!
Graphics: Web graphics come in three standard formats: JPEG, GIF, and PNG. PNG is an emerging standard which hardly anybody has embraced, so we can ignore it. The two formats about which you should know are JPEG (which stands for Joint Photographic Expert Group) and GIF (Graphics Interchange Format). These are two different set of rules for how web graphics files will be saved and displayed. Both will work just fine on your web page, so what's the difference?
GIFs tend to be a bit smaller, but their quality and complexity is limited. GIFs may be animated--many of the moving graphics you see on web sites (and all of the animations you see on the EDC 220 site) are animated GIFs. JPEGs tend to be higher quality, but their file size can get hefty, which can slow down your page. In general, when you are using simple graphics for illustration and navigation purposes--things such as arrows, lines, backgrounds, etc., use GIFs. When displaying a full-color photograph, use JPEGs.
There are two major ways to get graphics for your web site. You can create your own web graphics using a scanner and standard graphics software or you can "harvest" graphics from other web sites. There are many web sites set up specifically to display and distribute copywrite-free graphics for you to copy and use. One of the easiest to navigate is the Microsoft Clip Art Gallery . (An alternate Microsoft clip art gallery can be found here.) Another easy-to-use site is Barry's Clip Art. These sites have an enormous amount of web-ready graphics for you to use on your web page: buttons, bullets, backgrounds, animated GIFs and more! Harvest whatever you need and use them on your pages.
Links: To what other web sites do you want to link? Maybe you'll want to link to your favorite sports team's web site, or your school, or whatever. Anyplace to which you can go with your web browser is "linkable" to your web site. Make a list of your links and have them available when you compose your page.
Very Important Step: Before you create your web page(s), you must make a home folder or directory for your web site. This is a folder in which all of the items for your web site (pictures, HTML text, etc.) will reside. It is very important that you create this folder first or your hyperlinks and graphics may not work correctly when you post your site to the web.
First, create a folder, then name this folder the same as your user ID from your Personal Web Page Agreement. Usually this is your last name. For example, if your name is John Smith, then your user ID will probably be "smith." Then you should create a folder called "smith." Let's call this folder your "base" folder. Place this folder on the Desktop of your computer.
Copy all the preselected items you want to place on your web site in your "base" folder, for example, pictures you have scanned, cool graphics you have harvested, and other items you want to place on your site. They must not be scattered all over your hard drive. Move all of the items you want to place on your web page to your "base" folder. Any subsequent items you want to place on your web page must also be moved into this folder before you actually place them on your site. This is very important!
Another important recommendation: to ensure compatibility of your files, you should follow these rules when naming files (and folders) for your web site:
Once you have created the base folder and placed your files in the folder, you are ready to start Word and begin composing your web page.
Creating Your Page
Word offers two ways for you to create Web pages. You can start a new page by using a wizard or template, or you can convert an existing Word document to HTML, the format used for Web pages. When you create a Web page with either of these methods, Word customizes some toolbars, menu commands, and options to provide the appropriate Web page authoring features. These features are not the same as the ones available when you're word processing. Why? Because HTML allows for much less flexibility and precision than a standard word processor.
If you use Word's standard word processing tools to compose your web page many of the format features of your page won't be rendered correctly in your web browser. This is not a problem with Word--it is just part of the way HTML works. Using Word's Web page authoring features to create your Web page will usually produce the best results. You can also use the Web Page Wizard to start with sample content -- such as a personal home page -- and graphical themes -- such as festive and community -- to help you quickly create a Web page. If you prefer, you may start with a blank Web page.
HTML Conversion Method: Use the HTML conversion method when you have an existing Word document you want to convert into a Web page. Only the formatting and features that are supported by HTML will be converted. If you plan to use the file again as a Word document, you should save your work first in Word format because some Word features aren't supported by HTML. Once you are ready to convert your file to HTML, Click:
When you save a Word document as a Web page, Word closes the document and then reopens it in HTML format. Word displays the Web page similar to the way it will appear in a Web browser. Formatting and other items that aren't supported by HTML or the Web page authoring environment are removed from the file.
Word changes or removes upon conversion many popular word processing features such as: strikethrough and shadow text effects, some underline effects, tabs, drop caps, equations, and others.
Creating a Web Page From a Wizard or Template: Click:
Saving Your Home Page: Whether you convert an existing word processing document, or start an HTML document with a wizard or template, you should save your document to the folder you created on your desktop (i.e., your "base" folder, the one you named with your last name).
The name you must give this file (i.e., your home page) is <index.html> or <index.htm> (don't include the brackets). Again, this is very important--in fact, your personal web page agreement with the college demands it! Why? Because having your home page named "index.html" or "index.htm" allows it to automatically load whenever someone enters the base URL of your web site (e.g., the base URL for my personal home page is--http://www.augsburg.edu/ppages/~erickson/). This also shortens your URL, making it easier to remember. Finally, it protects your web site from prying eyes. For these reasons, you must name your home page "index.html" or "index.htm."
Composing Your Web Page
Once you have saved your home page you can begin to edit it (of course, continue to save this document periodically during your work session--you never know when a crash is coming!).
Text: Start with your text. Edit and spell/grammar check it. Strive for brevity. Save long tomes for linked documents away from your home (or index) page. Use either Helvetica or Times fonts. Any others are unlikely to render on other people's computers as you might expect. To be safe, stick with Times and Helvetica fonts.
Graphics: Next, place your graphics on the page. Graphics on web pages aren't imported in the same they are in word processors. Instead of the pictures actually becoming part of the document (as they are in word processing documents), the pictures remain separate from the home page but are "linked" to it. The only time they are actually displayed together is when you view the page, otherwise they remain as separate files. This is one of the reasons all of your graphics files must be placed (and remain) in the "base" folder you created.
In order to link a picture to your web page, click:
in the toolbar (if you don't see this button in your toolbar,
choose "Picture" from the "Toolbar" menu item which is found under
the "View" menu)In either case, you will be presented with the standard open dialogue box. Use this dialogue box to navigate to the picture file you want to insert onto your HTML page. If you followed my suggestion (above) your picture file will be in your "base" folder on your desktop. (If it isn't, cancel the dialogue box and move your picture files to your "base" folder now!) Double-click on the file's name or icon to select it.
Continue this selection process until you have placed all of your graphics on the page. Use the alignment tools to move the pictures to the left, center or right.
Precise Alignment of Text and Graphics: More precise alignment is not always possible in HTML without a little more effort. One trick that works well is using tables. See the example below:
Insert text or pictures in
one cell
_Insert
other pictures or text in another cell.
You can use a table to position your
items precisely where you want them by manipulating the size and
alignment of the cells. Once you get the alignment the way you want
it, you can make the table "disappear" by turning off the table's
lines (i.e., no cell borders). This can be done by:
Using the "Tables and Borders" tool,which appears when you click the "Tables and Borders" Button or
the "Border" Pop-up tool in the toolbar to...
..."turn off" the lines of your table, making the table invisible. The table is still there, you just won't be able to see it when you view the page in a web browser (Word maintains a greyed-out line for reference only--these grey-out lines won't appear in the web browser).
In this way you get precise alignment
of items on your page without the table showing. The table we see
below is the same table as we saw above, except the lines are
invisible.
Insert text or graphics in
one cell
_Insert
other pictures or text in another cell.
Links: Links are the Internet connection directions embedded in web pages. They are what tells a web browser to where it should jump when a user clicks on a hyperlink. A hyperlink is represented by a "hot" image or display text -- which is often blue and underlined -- that the reader clicks to jump to a different location.
In order to create a link, select the
text or drawing object you want to display as the hyperlink using
your cursor or pointer as appropriate. With the link-to-be
highlighted, click on the "Insert Hyperlink" button -->
in the menu bar. If you have any unsaved changes, Word will
prompt you to save your file. It is recommended you save your
documents frequently during your work session. After saving your
work, the following dialog box will appear:
If you are creating a hyperlink to another web site, type the Internet address (URL) of the site to which you want this link to connect in the "Link to file or URL" box (in this illustration, I have typed "http://www.augsburg.edu/").
If you are creating a link to another item in your site (e.g., from your home page to your resume page), click on the [Select] button and choose the file to which you want to link this page. Again, if you followed my instructions (above) the item you want to select will be in your "base" folder on your desktop. (If it isn't, cancel the dialogue box and move your file to your "base" folder now!) Double-click on the file's name or icon to select it.
The second half of the "Insert Hyperlink" dialog box is for linking to specific parts of other Microsoft documents such as Excel spreadsheets. This is generally not appropriate for a web page.
Fine Tuning and Completing Your Web Page
Repeat the above steps for each of the text, graphic, and link items you want to place on your web page. When you have composed your page in Word to your satisfaction, preview it in your favorite web browser. To do this, quit Word and start your web browser. In your web browser, choose "Open..." or "Open Location..." from the File menu and navigate to your "index.html" page. It will load, graphics and all, into your web browser, just as it will appear when it is actually posted on the WWW. Check to see that your page looks (and works) as you intended.
You may find your page doesn't format exactly as it did in Word. This may be a problem with Word--as I mentioned before, Word is a fine word processor, but only an okay web page tool--but even the best web page programs mess-up sometimes. Some tweaking may be necessary to get your page to look right. Don't be discouraged! Save your work frequently, make backup copies, and keep working with your pages until you get them just the way you want them.
Getting Help
If you're using Office 98 for the Mac, help on creating a web page can be found by clicking on "Max" (the little Mac helper window, or "Clip" in Office 97/2000 for Windows). After you click on Max, you will be presented with a Search Window titled "What would you like to do?" Type in your question, for example, "how do I create a web page?" and Max will return help-links which relate to your query.
On both the Mac and the PC, you can also get these same help functions by selecting "Contents and Index" from Word's Help menu. Click the Index button and type "Web." Click on the help item "Web, creating Web pages" for more information.
Links to additional resources to assist you in developing and refining your web pages are available on the Web Page Construction (HTML) Resources web page which is part of this web site.
Back to
Top
<--Back
to Augsburg College Blackboard Web Site
