The Basic Webpage

There's a PowerPoint to think about. Online or download

Despite the complex appearance of webpages, there are only three or four items to consider for a starter page: text, images, links and layout.

Text ------------------

Text starts much like it does in a word processor program like MicroSoft Word. When you type a "Properties" window appears at the bottom of the Dreamweaver page. (If not, click on Modify in the top Menu and then on Selection Properties.)

There are two options on the far left of that window: HTML and CSS. If HTML is selected some of the options remind us of a Word Processor. If you select CSS there are more familiar options, but when you select these options, you will be led to the CSS options. These options are more clearly explained in the basic CSS page.

Images ------------------

Images are inserted by clicking on Insert in the top Menu of Dreamweaver and then on Image. You will browse to find your image and click on your choice.

As simple as that sounds there are several precautions and suggestions.

Always store your image(s) in a folder called "images" which is in the folder with your webpage document BEFORE you insert it into your webpage document. After the image appears the "properties" below your working window will offer features about your image. The "src" (source) should be something like "images/book.jpg".

Always size your images before you save them in the "images" folder. You can resize them in Dreamweaver but resizing down from a huge image to a small image is a waste of storage and time. Resizing up may create a fuzzy image on the Internet.

Options for positioning images on a webpage are very limited, however two common Align options are "Right" or "Left" which will place the image either on the right or the left and wrap the text around it. Layouts will give us more options for positioning images.

Links ------------------

Links are second nature when we visit webpages; we either click on text or an image and the computer takes us to another page or location. So both text and images can serve as links and do so in similar manners.

Highlight either the text or image that you want the user to click on to take you to another page or location. In the properties on the bottom of the page there is a box called Link.

There are two types of links: absolute and relative. Absolute requires the full URL address, such as "http://www.wou.edu", and typically takes you to another website over which you have no control. One must either type this complete address in the box, or go to the actaul destination webpage and copy/paste the address. Relative is as simple as the name of the other webpage document like "second.html" which assumes that the second webpage is located in the same folder, the the relatively same area.

There are three ways to enter the relative address in the Link box. 1) Type it exactly as it is saved in the folder. 2) Click on the blue folder to the right of the Link box and find the document. 3) Make certain that the Files window is open in the right column of Dreamweaver and note the names of the existing documents in the folder. Click on the round "target-like" icon to the right of the Link box and drag to the desired document in the Files on the right. Of course, the latter two options requires that the webpage already exists.

Layout ------------------

While there are many sophisticated ways to position text and images on a webpage, the dependable tried and true remains the Table.

Before inserting a table, you will wish to carefully plan the appearance of your webpages, thinking in terms of rectangles filling the page. To insert the table, click on Insert in the top Menu bar and choose Table.

You will choose the number of rows and columns for your layout realizing that you can merge and split cells (that's what the rectangular spaces are called) in the future. A 3x3 is not a bad way to start. Spacing is like the mortar between bricks if each cell were a brick and padding is like a margin within each cell.

The table will not look like you hoped, but it will expand when you fill the cells with text and images, and you can drag the horizontal and vertial dividers as you wish. You can merge or split cells by selecting the cell(s) and clicking on the Merge or Split icon in the lower left of the properties.

Think of each cell as a small webpage and fill it with text, images and links.

Align your layout by clicking on the table and choosing center in the properties. Move text and images up and down and around by clicking on the the Horz or Vert in the properties.

Properties ------------------

There are some general properties that apply to the entire page. To employ these features, click on Modify in the top Menu bar and then Page Properties.

For starters there are several items you may wish to consider: Appearance, Links and Title.

With Appearance (either HTML or CSS) you can change the background color or image, for example. With Links you can change the color of the text that serve as links, including different colors for before and after the user visits the linked webpage. Title gives your webpage a name other then "Untitled Document."