A basic web page is nice, but you will probably want to spruce it up with color, graphics, and other enhancements to make it more appealing.  Microsoft Word can be used for this purpose.

General | Tables | Graphics

General

Web pages have a few basic features that it is helpful to know if you want to edit them efficiently.  You have already discovered that each page has a page title as well as a file name.  This feature was designed to work around the constraints of the early Internet environment.  The World Wide Web was originally designed to make information quickly accessible over a distributed network of limited capacity.  One way of maximizing capacity was to simplify and standardize page formatting.  The appearance of all web pages is governed by a relatively small number of conventions that are encoded as "tags" in a web file.  These tags comprise HyperText Markup Language-- "HTML."  HTML dramatically reduces the amount of information needed to format a page.  In a word processing document, most of the file size is taken up with formatting and other behind-the-scenes information that the reader never sees.  On the Web, your browser reads the tags and from this information does all the work to reconstruct the page and present it in viewable form.  To reduce file size, and hence file transfer time, to a minimum, the Web has default settings that it uses in the absence of formatting instructions.  These settings are included in your Web browser, and they can be changed.  

Why do you need to know this?  Because what you see when you edit your web page is not necessarily what others will see when they download your page from the Internet.  Your web editor--Microsoft Word, for the purposes of this exercise--has its own default settings: the page Background is white, and the font is black.  The same page sent to a browser the default settings of which have been changed may display the same page as green with orange font.  That is one reason why you may want to set the formatting information for the page.  Formatting information set into the HTML tags overrides the default settings on a recipient's browser.  The following are some features you may wish to format:

• Page Background: Use the Format -> Background menu command to set this property.  
• Font: Format -> Font.  You can edit the font, size, color, and style (italic, bold, etc.) from this location.
• Page Title: File -> Properties -> Summary
• Bulleted or numbered lists: Format -> Bullets and Numbering

Tables

If you want to display information in columns, you must insert a table.  In addition to displaying tabular information, tables are widely used on the Web to position text, columns, and graphics.  Indeed, they are the most important tool for page layout.

Microsoft Word contains a Table menu, but before you use it, you need to change its settings so that it is optimized for editing a web page.  In a word processing document, table and page dimensions are set either by inches or points.  The Web uses completely different dimensions:

• Percent--A table can be set for 1% to 100% of window size.  However wide the viewer's browser window is, that's how wide the table is.  The width of a browser window depends on the size of the viewer's monitor.  The viewer can also set the browser window to any smaller size by clicking the Downsize button at the top right of the browser.  The size of the table is relative to the size of the browser window.
• Pixels--Computer screens display images in thousands of tiny dots called "pixels."  The size of a pixel depends of the resolution of your monitor, but a pixel is the smallest unit that can be assigned a color.  Pixels provide an absolute size to your table (with some exceptions).

Both methods of specifying table size have their advantages.  The Percent method ensures that your page will have the same relative look regardless of the size of the viewer's browser window. However, to fit into a smaller browser window, a table will wrap the text in the table cells, causing them to increase in number of lines and height.  This may look funny on some screens.  That is why many web designers prefer to specify table and cell size in pixels.  For example, the new FSU web pages are all contained in tables that are exactly 740 pixels wide.  No matter what the viewer does to the browser window, the page appears the same size.  This is a better way of maintaining a uniform look.  However, it means that viewers with small monitors or browser windows will not see the whole page.

Whichever way you choose to format your table, you will need to modify the settings in Microsoft Word to do so.  Go to Tools -> Options -> General. Under Measurement Units, check the box next to "Show pixels for HTML features", then OK. Now you can insert and edit tables that conform to Internet standards.

To create a table, 

1. Open Microsoft Word, then "index.htm" in LastNameWeb.
2. Place your cursor where you want the table, then click Table -> Insert.
3. Specify the number of rows and columns you want (you can add or delete columns later).
4. Click OK.
5. Click Table -> Table Properties.
6. Set the properties for the overall Table or for the current Row, Column, or Cell. ("Current" means where your cursor is.) These properties include
   1. Borders and Shading (Hint: Many web pages use "None"--i.e., invisible borders--to position text and graphics on a web page)
   2. Specify Row Height, Preferred Table/Column Width: Use these if you want a table to have uniform columns, or if you want to create blank space between rows.

Graphics

Tables help you layout information on a page. Graphics help you illustrate information and make your page more attractive.

As an example of how to use graphic images, let's insert the FSU Logo into your table.

1. Open your browser and go to the FSU home page (http://www.uncfsu.edu).
2. Right-click on the FSU Logo.
3. Click "Save Picture As"
4. Save In LastNameWeb.
5. Open Microsoft Word, then "index.htm" (if not already open).
6. Go to Insert -> Picture -> From File.
7. "Look In" LastNameWeb, then click on FSU11029-18.gif.
8. Click "Insert".

Images can be resized and positioned within a table cell. To resize, simply click on the image and drag one of the corners until the image is the size you desire. To align an image, right-click in the cell containing the image and then click "Cell Alignment".

Images do not have to be in a table.  They can be inserted into a page at any point.

As you are editing a web page, it is important to keep in mind that the way a page appears in Microsoft Word is not necessarily the way it will appear in a web browser.  The only way to know what a page will look like is to view it in a browser.  To do that,

1. Save the page you want to view.
2. Open or switch to your browser.
3. Click File -> Open.
4. Click Browse, then find LastNameWeb in the Look In box.
5. Click "index.htm", then Open.

Your page will be loaded into your Browser window, and it will appear as it would appear on the Internet.

There's a lot more to learn about editing pages.  One way to think about what makes a good web page is to evaluate other web sites. That is why I have created the Web Review assignment.  See that page in your course website for guidelines on evaluating websites.

Created by John I. Brooks III. Last updated 01/01/04.
Return to
Teaching | Advising | Service | Research | Links | Background | Communication | Home