Uploading Files to the Web

To upload your site to the Web successfully, you must make sure that you defined your Local Info and Remote Info before you did anything else in Dreamweaver. If you are working on a different computer and forgot to define your site, follow the steps on Getting Started page. You will have to create a new site and enter all the information in the Local Info and Remote Info tabs. If you are sure that you defined your Remote Info, but uploading is not working, go back and check your Remote Info. Go to Site > Manage Sites > Your Site Name. If the name of the site is not there, follow the steps on Getting Started page.

Uploading your files
To upload your files to the Web, complete this process:
1. Make sure your Files panel is open. If not, go to Window > Files.
2. Click the Connect button. This button connects Dreamweaver to your server space.

3. Make sure your toolbar displays Local View and your files can be seen in the panel. The Local View shows everything in the Files panel that is on the computer in your local root folder.
4. Select your local root folder and click on the Put button.

NOTE: If you make changes, be sure to upload your entire folder and replace the old version to keep all files linked properly.
1. In the toolbar, switch your view from Local to Remote View. You should now see your files under Remote as well. The Remote View shows you all of the files uploaded on your server space.
2. Check your site in a browser by typing in your Web site address. If you are using the BGSU personal web space your Web address is: http://personal.bgsu. edu/~(your username).

 

Inserting Special Media

Rollover images
Rollover images allow you to have a graphic change to a different graphic when the mouse rolls over it. To insert a rollover image, do the following:
1. Click on Insert > Image Objects > Rollover Images.
2. In the Insert Rollover Image dialog box under Original Image, browse for the image that is to be seen before the mouse rolls over it (Fig.23).
3. Under Rollover Image browse for the image to be seen when the mouse rolls over it.
4. In the When clicked. Go to URL field, you can enter a link by typing in the web address or browsing to a file.
5. Click OK.

QuickTime Movie
To insert a movie, follow these simple steps:
1. Click on Insert > Media > Plug-in.
2. Navigate to the desired file.
3. Click Choose.
NOTE: By default the QuickTime is viewed in a very small window; to make the window larger, click on it once and drag one of the corners to the desired size. Make sure the movie file is located in your local root folder.

Embedding a Power Point Presentation
To insert a Power Point Presentation, do the following:
1. Open a project in PowerPoint.
2. Click Save as Web Page.
3. Put both the .html and the folder of files created in PowerPoint into your local root folder.
NOTE: The file .html is now your PowerPoint embedded into a Web page; you can double-click on it to open it in a browser.
4. Insert a link to your PowerPoint .html file. Now if the user clicks on the link, your presentation will open.

Creating Hyperlinks

A hyperlink is text that can be clicked by your reader to go to some other Web page.

Write the text you would like to link.

1. Select the text.
2. Open the properties window, if it is not already open, and click in the link box.
3. To link to a file on the Web, type in the URL to that file.
4. To link to a file on your hard drive, choose that file from your file list, by clicking on the "File" icon (it looks like a yellow folder by the Link box).

You can create a mail link by typing
mailto:email address
Replace "email address" with your email address.
If you want to make an image clickable, follow the above instructions for your image instead of text.

Previewing in Browser

You can preview the current page in these browsers. Choose File > Preview in Browser, then choose the browser name from the list. Dreamweaver saves the file to a temporary page and launches the saved file in the specified browser.

Or you can view preview the web page by clicking on the Preview in Browser button on the Document toolbar. This brings up a pop-up menu with a list of the browser choices available on your computer.

 

Adding Design Elements

Adding text
To insert text simply click inside a cell and type in your content. When you click Enter, Dreamweaver automatically adds paragraph spacing. To add a line space, click Shift + Enter.

Inserting images
To insert an image, follow these steps:
1. Click in the cell where you want the image to appear.
2. Click Insert > Image.
3. Locate the image you want to insert
NOTE: All of your images should be saved in the “images” folder that you established when you started.
4. Click Choose to insert the image.
Click on the image to view its properties in the Image Properties Inspector window.

Formatting page properties
To change the background color of your pages or other overall properties of your website, go to
Modify > Page Properties. Here, in the Page Properties window, you can set the default font, text size, text color, and background for all of your pages.

Inserting and Using Tables

Why use tables?
Tables help you divide the space on your page. They are similar to tables in Word or Excel but can be used in much more flexible ways. Tables give you the option of making your page a fixed size or making it fit to the user’s window the best it can. Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.

Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form.

Steps to Creating a Table

1. Start up Dreamweaver and open the page where you want the table.
2. Move your text cursor to the location on the page where you wish to insert the table. One way to do this is to simply click the spot where you want the table to appear. This will cause your text cursor to move to that place.
3. Click the "Insert" menu and then the "Table" item on the menu that appears. In the interest of brevity, I shall refer to such a sequence of clicking menu items as "Insert | Table".
4. A dialog box entitled "Table" will pop up. Enter the number of (horizontal) rows and (vertical) columns you want the table to have in the spaces for "Rows" and "Columns" respectively.
5. "Table width" refers to how broad you want the table to appear. This width can be specified in percentage of the enclosing column of your multi-column site or in pixels. For example, if you want the table to span the entire width, type 100 into the box for "Table width", click the down arrow of the adjacent drop down box and select "Percent". It's also possible to create an auto-resizing table by deleting the number in your table width box. Your table will then be resized by the web browser and Dreamweaver according to how much content it has.
6. Tables can be borderless or have borders. Borders are just the lines that demarcate the boundaries of each table cell. In general, for data tables, most people want borders since they make the table easier to read. The thickness of the borders are specified in the "Border thickness" box. It defaults to 1 pixel. It's up to you whether to change it or leave it at the default. If you do not want a border, enter "0" (zero, without the quotation marks) into the box.
7. Cell padding is the amount of space you want between each cell's content and its border. Cell spacing is the amount of space you want between adjacent cells. You can leave it blank or set it to any value you wish. If you're not sure what number is appropriate, you can always enter some random value (like "2") to start with and adjust it later. I'll mention how you can change the settings you make here below, without having to recreate everything. Note that "0" (zero) is a valid value for these fields as well.
8. The "Header" section allows you to indicate that leftmost column or topmost row of your table is going to contain a description for that column or row. The content of the column or row that you designate as a "header" will be displayed in a bold font and centred. The default is to create a table with no headers, that is, all rows and columns look the same, and nothing is internally marked in the HTML code as being a title for that row or column.
9. In the "Summary" box, enter a brief description of what your table contains. For example, if the table contains the examination scores for each student in your class, you may want to put "student examination results" in the summary box. This box is optional, and its contents will not be displayed. It is primarily intended to improve the accessibility of your table and may be used by specialized software like screen readers.
10. When you're done, click the "OK" button. The table should appear on your web page. Note that when the table is first created, Dreamweaver selects the entire table although it may not be immediately obvious that it has done so. Therefore do not type anything yet or you'll accidentally replace the whole table with what you type. Instead, click a cell in the table before starting on your content.

How to Configure/Customize a Table After It Has Been Created
If you are dissatisfied with the table you created above for some reason, you do not have to delete everything and start over.

1. Adding More Rows or Columns to Your Table in Dreamweaver

To add new rows or columns to your existing table, click "Insert | Table Objects". A menu will appear allowing you to insert a new row above or below your current cell (where your text cursor is currently shown) as well as a new column to its left or right. If your cursor is not within any cell in the table, first click somewhere within one of the cells before using this menu.

2. Changing Your Mind about the Headers

If you have set or not set a particular cell as a header, and now have a change of heart, click the cell that you want to change. Look at the bottom of your Dreamweaver window to locate the Properties pane. Somewhere in that pane, you should be able to see the word "Header" with a checkbox beside it. If you had previously designated the cell as a header and now changed your mind, uncheck that box. If you have previously not made that cell a header and now want it to be one, check it.

3. Changing the Table's Width

Look at your table. There should be a fine green line above the table with the width of the table displayed in the centre. Click that line. This should select the entire table.
(If you don't see any green line, it means that your text cursor is not in the table itself. Click anywhere in the table and the green line will appear. Don't worry about that green line: it's just a visual cue used by Dreamweaver to allow you to select the entire table easily. It is not actually displayed in a real browser.)
The Properties pane at the bottom of your Dreamweaver window should now show the table width in the box beside the "W" character. Change it to the new value. You can also switch between specifying the width in pixels and percentage by clicking the down arrow in the adjacent drop down box.

4. Changing the Cell Padding and Cell Spacing

To change the cell padding and spacing of the table, click the green line above your table to select the entire table. The Properties pane at the bottom of the Dreamweaver window should now display the "Cellpad" and "CellSpace" fields, allowing you to set or change them.

5. Changing the Colours of the Background and Border or Adding a Background Image

In the same way, you can change the background or border colours of your table. Click the green line above your table to select the entire table. In the Properties pane at the bottom of the Dreamweaver window, you should now be able to see the fields "Bg color" (that is, background colour), "Brdr color" (for "border colour") and "Bg Image" (for "background image"). Clicking the box beside any of the colour fields will cause a colour picker to appear, allowing you to choose a colour.

If you're setting a background image, you should first copy the background image into a folder or subfolder of your website directory. By "website directory", I mean the directory that appears in the rightmost column (the "Files" pane) of your Dreamweaver window. Either copy the image into that folder itself, or a subfolder within it. This will allow Dreamweaver to manage that file with its site manager and upload it automatically when you publish your web page. Once you've done this, return to the Properties pane for the table and click the folder icon on the "Bg image" line and select the image file accordingly.

6. How to Change the Background Colour of a Row or Column

If you wish to change the background colour of an entire row or column, for example to make your table zebra-striped or have alternate shades of colour (for easier reading), drag your mouse across that row or column. That should select that particular row or column. Then change the background colour for that row through the Properties pane at the bottom of the Dreamweaver window. Specifically, click the box beside the word "Bg" (for "background") to display the colour selector.

Design and Layout

Design
Even if you are creating only a simple Website, you should begin by sketching out the layout of your site. Decide where you want titles, images, navigation buttons, and text to appear on the screen.

Most web sites have the same design characteristics on every page. For example, Website titles are usually in the top left or top center, while navigation buttons usually appear vertically on the left or horizontally below the title. In addition to sketching out a layout for each page, you should determine how many pages you will need for the Website. Thorough planning is essential to good web design.

In order to get your text, navigation buttons, and images to appear where you want them on the Web page; you need to use tables to format content of each page. Everything on each page of your Website should fit within one large table.

Using your layout sketches, you can determine what your table needs to look like. Figure 5 shows a simple layout sketch. Figure 6 shows the same layout, with table borders drawn in. Figure 7 shows how the table can be implemented in Dreamweaver.

Now, simply create a table in Dreamweaver that has the same characteristics as the borders drawn on the page. The next chapter will teach you how to insert your table.

Website Design Principles
Many webmasters wish they could design great looking sites, but simply can’t. They’ve given it a few attempts, but either due to lack of application knowledge (with apps like photoshop), or lack of “artistic talent”, they give up. And that’s fine, because it keeps the market for design healthy! ;) But no, it really doesn’t have to be like that. If you’re an aspiring designer, there are a few key principles that I want to outline first. They are what helped me through my path to becoming a good designer, and they should help you too if you follow them.

• It’s not the 90’s anymore

When the early pioneers of the internet age began designing websites in the 90’s, they became fixated on the filters offered by programs like Photoshop. Lens flares, bevels, drop shadows, glows, were used to their fullest extent. You need to avoid abusing these filters, or I should say, you need to avoid misusing these filters. There are instances in which these filters can be a great benefit, but you have to know how to use them properly and not just slap them on anything and everything.

• Usability, Not clutter

Usability is all about making the visitor’s experience a good one on your site. Things should be easy to read, easy to access and most importantly, easy to understand. When a visitor visits your site, they should know exactly what your site is about within the first couple seconds. This is obviously where design, and layout come into play. You need to avoid cluttering your site in the physical sense. I’m not talking about having “too much content”, but rather how you choose to display that content. Things should be laid out with spacing and margins.

• Text Do's and Dont's

One of the really big fads that was prevalent in the early part of this decade, was the use of small fonts. I was one of those idiots because I thought it “looked” cool. But for all practical purposes, I always scorn people for using size 10px or less for fonts. Never go below 11px font - and even 11px should only be used sparingly. Size 14px (which is what this is) seems most ideal for paragraph’s of text. You can get away with 12px of course, but as screen resolutions are increasing, 12px suddenly becomes smaller.

Line-height is very important. Line-height is the spacing between each line of text in your paragraphs. Standard line-height I find is a tad bit too thin, and I like to expand it a little more. It makes it easier for people to read.

• Colors and Contrast

The color theme of a site is obviously important. A lot of aspiring designers have a tenancy to use too many colors, simply because they’re there. But I like using no more than 2 primary colors and a third “secondary” color that I will use sparingly throughout the design. A simple color theme is easier on the eyes, easier to “comprehend” and overall just looks better. Of course there are exceptions to this, but 9 times out of 10, it’s always better to keep the color theme simple.

The color theme also needs to connect with the visitors and the purpose of the site. For example, I wouldn’t use blue and fluorescent green/yellow for a site about health - it simply doesn’t make sense and I think that’s a given. :)

Contrast is hugely important. It’s very important that your content and navigation are correctly contrasted. The foreground text needs to either be very dark, or very light in comparison with the background color. I see a lot of sites where the text will be a light gray and the background is white - err! That’s very annoying and hard to read.

• Design around the purpose of the site

A lot of designers, those experienced and not, always use the same “formula” for layout and design elements. To really make an impressive and effective site, you need to fully understand what the purpose of the site is, and what the goals are. Whether the site is based around selling memberships, or just general ad-based content - the design should cater most effectively to the purpose. And that’s what I will be demonstrating in the tutorial proceeding this page.

• Learn by example

A common mistake for the aspiring designer is thinking they should be able to open up photoshop, and design a great looking site on their first try. Nope, doesn’t happen like that. You wouldn’t pick up a guitar and start writing music without first learning a few songs right? Right, and it should be no different for web design. I recommend that beginners simply try to recreate existing designs that they think look good. If you do this a few times, it will (1) help you learn the application, (2) help you become a better designer. You subconsciously learn when you recreate an existing design. You automatically pick up design sense when you do this, and it really helps and goes a long way when it comes down to designing your own sites.

Layout
Dreamweaver gives you several different ways to create and control your web page layout. One common method for creating a page layout is to use HTML tables to position elements. Tables can be difficult to use, however, since they were originally created for displaying tabular data, not for laying out web pages.

To streamline the process of using tables for page layout, Dreamweaver provides Layout view. In Layout view, you can design your page using tables as the underlying structure, while avoiding some of the traditional pitfalls of using tables. For example, you can easily draw layout cells on your page, then move the cells where you want them. Your layout can have a fixed width, or it can automatically stretch to the full width of the browser window. When you switch back to Standard view, your page will contain table cells and columns that correspond to the layout cells you placed on the page.

The following picture illustrates a completed version of a layout for a project index page in Layout view:

The layout cells and tables will eventually hold a banner graphic, a navigation bar, a Macromedia Flash movie, and other assets.

When you draw a layout cell that isn't inside a layout table, Dreamweaver automatically creates a layout table as a container for the cell. A layout cell cannot exist outside of a layout table. You can lay out your page using several layout cells within one layout table—which is the most common approach to web-page layout—or you can use multiple layout tables for more complex layouts. Using multiple layout tables isolates sections of your layout, so that they aren't affected by changes in other sections. In this tutorial, you will use multiple layout tables to design the index page for the project.

Creating a Homepage

To create a Web page, follow these guidelines:
1.To add a new page go to File > New and choose a basic HTML page. Save this page by clicking
File >Save As. Name the first page index.html. This will be the first page that users encounter when they visit your site. Save this file to your local root folder as index.html. Naming the homepage
index.html tells the Web browser that this is the first page it should open when someone visits your site.
2.After your homepage index.html is created, you can use this page as a template layout for all the other pages in your site. Simply hit Save As and name the file whatever you wish, but be sure to keep the name is simple, for example history.html, resume.html, etc. Remember not to use capital letters or spaces when naming files, this will make it easier for web browsers to find your files.
3.To save the pages of your site simply click File > Save for each page. Make sure your homepage is named index.html, and save all of your files in the folder you chose when you defined your site, i.e. in your local root folder.

Basics of Dreamweaver

The purpose of these Dreamweaver basic guide is to help first time users create a basic web page using Macromedia Dreamweaver. The topics in the guide are as follows:

• Open Dreamweaver
• Give your page a title
• Save your page
• Using the text properties palette
• Creating links (absolute and relative)

• Using the object properties palette
• Insert an image
• Provide alt. tag for image
• Align image
• Insert and work with tables
• Insert a horizontal rule
• View your page in a browser
• Practice exercise (this is a link to a new page)

Open Dreamweaver
Depending on the settings of your computer, opening the program may automatically open a blank, untitled web page. If it does not, go to the File menu and select New. This will open an untitled document.

Give your page a title
The title is the part that appears at the top of a Web browser and is also the name that will appear in the bookmarks of the browser. Thus you should choose a title that makes sense to others and not just to you (example: "Helen's Home Page"). To enter a page title:

In Dreamweaver 3: click on the title icon on the top left of the blank screen. If this icon does not show upper, from the View menu --> choose "head content."

 The title icon is the one on the left with the little arrow pointing at it.

When you click on this icon the title box appears. Type the title of your page in the space provided.

In Dreamweaver 4: A blank title box appears at the top of the page. To enter the page title, all you need to do is click on this box and type in the name of the page title.

Save your page
To do this, from the File menu choose Save. When the save dialog box appears on the screen, navigate through your computer to the location where you intend to keep your web pages [Note: If your page is going to be part of a web site, you should save it to your web site folder (see guidelines for creating a web site)]. In the space provided, enter the name of the page.

Important:
The names of web pages must be one word (no spaces). If you want the file name to have more than one word in it, then you need to run these words together to form one word. There are different conventions to naming web pages. There is no one "correct" way (so long as you have no spaces), but it's a good idea to decide which you want to use and then stick to the same format for all your pages. Examples:

1. dreamweaverguide.html - run words together with no separation between them.
2. dreamweaver_guide.html - use the underscore (_) to separate words.
3. DreamweaverGuide.html - use a capital letter for the start of each new word*.

* NOTE: This naming convention can cause problems in some versions of Dreamweaver, so it is better to avoid using any capital letters in a file name [as you may notice on some of my webpages, I have used this convention in the past. What happened in my old version of Dreamweaver was that sometimes, when I uploaded the webpage, Dreamweaver changed the name to lower case, even though I typed in the the first letter as upper case. I have since learned of others having this problem, so my advice is now not to use capital letters (even if you don't use Dreamweaver -- others may be, and when they link your URL on their web pages they run into problems!). If you do run into this problem, you have to fix it by changing the error at the source code level].
If you are using a Mac, you must make sure that the file name is followed by the file extension .html (if you are using a PC,the extension will be added in automatically for you. Macs use the extension ".html" while PC's use ".html" -- but both work).

Using the text properties palette

The text properties palette is used for formatting the text on your page. It contains the following functions:

1. Format: Heading styles are used to apply a standardized hierarchical structure to formatted text. The smaller the number of the heading, the bigger the heading will be. For example, Heading 1 describes the largest heading. To change the format, click on the heading on your page and then, on the properties palette, click on the arrows next to the word "Format." Select the desired format from the drop down menu.
2. Text style: This is set as default font. The default font is the one defined in Dreamweaver preferences. You can change the default under the preferences menu (which will then ensure that any pages you create use the same default font) or you can change it on a particular page, either for the whole page or for selected text on the page.
3. Text size: Applies either a specific font size (1 through 7) or a font size (+ or -1 through + or -7). Font size is relative to the BASEFONT size (the default is 3). There is no way to specify a particular point size for fonts in an HTML tag (since the end users can change the way their browser displays text on their screens).
4. Text color: You can choose the color of the text. However, not all colors will appear on the end user's screen in the same color you selected. Thus you should choose a browser-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field.
5. Text alignment: This aligns text left, center, or right (in much the same way as you do when using a word processing application).
6. Link: This makes the text that you have selected into a a hyperlink. You can create a link in a number of ways. (1) Copy the URL from your web browser and paste into the link box (2) drag the Point-to-File icon to a file in the Site window (3) Click the folder icon to browse to a page in your site (4) type the URL in the link box
7. Ordered list: This turns the selected paragraph or heading into an item in a bulleted list. If no text is selected, a new bulleted list is started.
8. Unordered lists: This turns the selected paragraph or heading into an item in a numbered list. If no text is selected, a new numbered list is started.
9. Indent and Outdent: This indents or outdents the selected text. In a list, indenting creates a nested list, and removing the indentation unnests the list.
10. Target: This specifies the frame or window in which the linked page should load (not needed unless you are using frames).

Creating links:

• Absolute link = a link to to another site or page that is not on your web site. They include all of the information about the site and begin with http:// An example would be:

http://www.d.umn.edu/~hrallis

• Relative link = a link to another page within your site. An example would be OfficeHours.html which is a page within my ~hrallis site.

Creating an absolute link:

1. Highlight the word that you want to make into a link.
2. In the properties palette, click in the blank link box. Type in the URL of the page to which you wish to link.

[Note: It is actually better to copy the page URL from your browser so that you avoid typing in an incorrect address. (highlight the URL --> choose Edit --> Copy) and then paste it into the link box in Dreamweaver by using the shortcut Option --> V (Windows) or Apple --> V (Mac). ***This will not work unless you use the shortcut for paste***

To create a relative link (to a file within your site):

1. Highlight the word that you want to make into a link.
2. In the properties palette, click on the icon of a folder (this is in the middle of the palette).
3. Browse through your computer to your website and locate the file to which you want to link.
4. Click on the "open" button (this is a bit confusing as you aren't trying to open the file -- you just want to link to it! Nevertheless, by clicking on "open" you creating the link command).

Creating an e-mail link
This is used when you want users to be able to send an e-mail without having to type in the e-mail address. When users click on an e-mail link a new message window will open using the mail program associated with the user's browser (e.g. Outlook Express will open, and a new message window will appear with the e-mail address already entered).

1. To insert an e-mail link, place the cursor on your web page in the place in which you want to insert the link or highlight the text words that you want to appear as the e-mail link.
2. Click on the Insert E-Mail Link on the object palette.
3. In the E-mail field, type the e-mail address mail should be addressed to.
4. Click OK.

Using the object properties palette
The object palette contains buttons for inserting objects such as tables, layers, and images. In this Dreamweaver Basics guide only some of the items from the common object palette will be explained. If the object palette is not visible when you open Dreamweaver, go to the Window menu and select objects. This will place the palette on your screen.

Insert an image:
Before inserting an image onto your web page, make sure that it is (a) saved either as a .jpg (or .jpeg) or .gif (b) saved into your web site folder [to learn more about web site organization, see web site guidelines]. It is a good idea to have a separate folder (directory) for images contained within your web site.

1. To insert an image, place the cursor on your web page in the place in which you want to insert the image.
2. Click on the picture of the little tree (top left of the object palette). This will bring up a dialog box asking you to select the image source. Navigate to the folder in which you have the image saved and click the "open" button. This will insert the image onto your page.

To have the text wrap around the image:

1. Click at the start of the paragraph next to which you want the image to appear (even if you want the picture to appear at the end of the paragraph and on the right). Next,
2. Insert the image (see above for how to do this).
3. Click on the picture to select it.
4. Then, from the properties palette, click on the arrow next to the word "align." From the pop up menu make a choice. Example: If you choose "right" the image will appear to the right of the text, as shown here with the sunset photo.

Provide alt. tag for image:
It is very important to include a description of the image for (a) those users who choose to set their web browsers not to load images [this helps speed up the load time of pages and is very useful if you have a slow modem connection] (b) for people who have vision impairments and who use a screen reader to read out loud what is written on the web page.

1. Once you have inserted the image, click on it. Notice that the properties palette switches from the text properties palette to the image properties palette.
2. Click in the box next to where it says "Alt." Type in a short description of the image (e.g. the alt tag I used for the image properties palette image below says, "Screen shot of image properties palette").

Align image
You can align the image left, center, or right by selecting it (click on it) to bring up the image properties palette. Change the alignment by clicking on your choice of alignment boxes from the 3 in the bottom right corner of the image properties palette.
Insert and work with tables

1. To insert a table, place the cursor on your web page in the place in which you want to insert the table.
2. Click on the picture of the table on the objects palette. This brings up the "insert table" dialog box.
3. In "insert table" dialog box select the appearance of your table:

• Rows: enter the desired number of rows
• Columns: enter the desired number of columns
• Width: This gives you the choice of setting how wide you want the table to be. If you choose the width in "pixels", this sets the table width regardless of the size of the user's browser window. If you choose the width in "percent" your table width will change with the user's browser window size. [It is usually best to have this be blank, so that the browser makes the table as wide as it needs to be to fit the table on the page].
• Border: this sets the width of the table borders. If you want your table to be invisible set this at 0. (Since there is no tab key on web pages, you can use invisible table when you want to force spaces between text or objects on the page).
• Border colors: use the Light Brdr and Dark Brdr fields to select border colors that have a highlight and shadow effect, respectively, giving the border a three-dimensional appearance. (To return to the default gray shades, remove the color values and leave the fields blank.)
• Border field: Choose Brdr to select a border color for the entire table.
• Background image or color: Use the Bg options to select the background image or background color for the table.
• Cell spacing: specifies the number of pixels between each table cell
• Cell padding: specifies the number of pixels between the cell content and the cell boundary (or wall).

     4. To select the entire table, do one of the following:

• Click the top left corner of the table, or click anywhere on the right or bottom edge.
• Click once in the table and choose Modify > Table > Select Table.
• Click once in the table and choose Edit > Select All.
• Position the insertion point anywhere inside the table, and select the <table> tag at the bottom left corner of the Document window. Selection handles and a dark line appear around the table when it is selected. It will also change the properties palette into the table properties palette. You can then make changes to the appearance of the table using this palette.

     5. To select rows or columns, do one of the following:

• Position the insertion point at the left margin of a row or at the top of a column. Click when the selection arrow appears.
• Click in a cell, and drag across or down to select multiple rows or columns.

     6.To select one or more cells, do one of the following:

• Click in a cell, and drag down or across to another cell.
• Click in one cell and then Shift-click another cell. All of the cells between the two cells will be selected

Insert a horizontal rule
This is used to separate different sections of a web page.

1. To insert horizontal rule, place the cursor on your web page in the place in which you want to insert the rule.
2. Click on the picture of the horizontal rule on the object palette.

View your page in a browser
In order to see what your page will look like when you upload it to the web you can preview it in your browser. (This does not mean that it is actually on the web, however -- to do that you have to upload your page, This will be described later).

To preview your page:

1. from the File menu --> select Preview in browser.
2. Select the browser from the list (usually Internet Explorer or Netscape).

If your preferred browser doesn't appear in the list, then:

1. Select "Edit Browser List" from the list that appears when you chose the "Preview in browser" option above.
2. Click on the edit button and browse through your computer to locate your choice of browser.
3. When you locate the browser, click the box next to "Primary Browser" to make this your default choice.
4. Click OK.