Making a Web, part 2

"mail-to" links

Select the text that you will link to an e-mail address. One example might be your name. Then use the hyperlink button to create the link.

Sending the link to a new window

There are two main design options when users click a link on your page. The target page can show up in the same window or it can show up in a window of its own. Opening into a new window has the advantage that the initial page stays open on the user's desktop. this can help with navigation. The drawback is clutter. 

Select the text you want link to the new window and click the hyperlink icon. Select the page to which you are linking. (If the page is outside your website, you can enter in the address block a full URL.)

Now select the button on the right side of the window with the label "Target Frame." Here you select "New Window" and click "OK" at he bottom of the window.

This returns you to the "Edit Hyperlink" window. Select "OK" and you have created a link to a new window.

Page Properties

By right-clicking on a page (or by the menu command: "File-Properties") we can control several aspects of the web page we are creating. The "Page Properties" window has six tabs at the top. The tab labeled "General" is the first one to appear; on this tab the title is entered.  The title then appears on the blue title bar at the top of the user's browser window. What you enter in the title line will be displayed in at the very top of the browser window. Your title should be informative.

There are many "Page Properties" options. We will be working most with the "Formatting" tab. The functions on the "Formatting" tab allow us to set background colors, background images,,and text colors.

Backgrounds

Pages can have background colors. Right-click on a page and select "Page Properties". The Page-Properties screen has several Tabs. Click on the "Formatting " Tab.

Under colors choose a color or choose "More colors." 

When you have what you want click "OK" on the Page Properties window.

It is also possible to use a graphic image as your page background. Go once again to Page Properties (by right-clicking on the page), select the "Formatting" Tab, and click the box under labeled "Background Picture." Now you  need to tell the program where the image file is that you want to use. See example below.

Setting text color

The "Formatting" tab of "Page Properties" allows for four settings of text color: standard text color is set on the left under the background color; three colors for hyperlink text, that is, the text to which you have applied hyperlinks, represent the three states a link can have. "Hyperlink" refers to the color before the user clicks the link; "Visited hyperlink" refers to the the appearance of the text after a link has been visited; and "Active hyperlink" refers to the color of the text after it is clicked but before the user returns to the original page.

Tables

Controlling the size of tables: pixels and percent

Tables can be inserted into your page using the Menu command: "Table- Insert." Choose a manageable size for your first table, say 3 cells by 3 cells. Tables have many functions. You can use them to present tabular information of all sorts, with rows and columns of data, for example. an important use for web design is simply controlling the location of text and graphic objects on the page.

Table properties (Borders and Backgrounds)

Once you have placed a table on a page, you can further control its appearance with the "Table Properties" window, which can be activated by right-clicking in the table and choosing "Table Properties" or by using the menu command "Table-Properties."

Layout: Using the "Alignment" function you can make the table appear flush with the left or right margin or in the center.

Size: Table size can be controlled by specifying the width and height. Notice that you have a choice of size units: pixels or percent. Percent refers to the percentage of browser-window width or height available, not counting margins. For many websites it is useful to choose a maximum width of 600-700 pixels, since tables of this size will fit without scrolling on virtually all monitors, so users will not have to scroll left and right to view the table's content.

Borders: Border size is set in the unit: pixel. You might want to experiment a bit with this setting to test the effects of different border sizes. The border size: "0" to be an aid in page-design; tables allow the designer to place objects in particular cells, that, when the border is set to "0," are then not visible to the user. 

Background: the background function for tables is analogous with the "Background" function for pages (set through "Page Properties"). The background setting, whether a color or a graphic image, will override for the area of the table the background setting for the page. 

Cell properties

You can also format the many of the same features of individual cells or groups of cells using the function "Cell Properties." These functions can be reached by right-clicking in a selected cell or group of cells and choosing "Cell Properties", or by the menu command: "Table-properties-Cell."  Backgrounds settings for cells of tables override background settings for the whole table.

Using tables to control the look of  a page

Because it is possible to set the width and height of a table, when one places all the content of a page within a table, one has a positive control over the location of each element. A simple plan is to make a table of three rows and three columns and then set the table width (using "Table Properties) to an ideal width, say 700 pixels. The each piece of content can be located left, right or center, top, middle or bottom.

Site construction

There are many possible organizational plans for websites. Successful sites are designed with several points in mind.

1. The first page. You first page should set the tone for your site and make clear the choices your users may make. 

One great advantage of web sites over traditional materials is that users may take different paths through the information you provide. Your initial page should make those choices clear. If those choices appear clearly without the necessity of scrolling, so much the better. Often a menu at the upper left can serve this purpose.

2. Navigation. Once a user is in your site, navigation from page to page should be straightforward. 

It should be easy for the user to return from any one page to your first page. It should be easy for users to follow informational threads to links outside your side and to return.

3. The dialectic of impact and  annoyance. Web designers do well to keep in mind what will grab users' attention and what will annoy. 

Fonts, backgrounds, colors, music, animations, and the like give the web designer options for creative expressions. Too much, too tacky, can be counter productive.

4. Redundancy and the accommodation of users' styles of browsing. Linear and non-linear.

Not all users will attack the tasks your site presents in the same way. Ideally, we would like to make paths accessible for all users, so that our information has the maximum utility for our users. Especially important in this regard is clear navigational options even in ways you would never follow yourself.