Design Issues Regarding Graphics on Web Pages

There are several things to keep in mind when using graphics on a web page.

File Size

A big file means slow downloading, a small file means fast downloads. Therefore, keep your graphic files as small as possible. Some things that can be done to accomplish this include, ...

colors: For GIF files, use as few colors as possible. dimensions: Don't make an image any larger than it needs to be. If a large picture is desired, one option is to use a "thumbnail." This is a small copy of the full sized image that is linked to the full sized image, which the user can view if they desire. For example, the first photo at the right is an example of a thumbnail. Click on it to see the full size image. An alternative to a thumbnail is to use a cropped portion of the entire image and make it a link to the complete image. The second photo at the right uses this approach. Click on it to see the complete image. compression: GIF (lossless) vs. JPG (losey). Use JPG for photographic type images and GIF for all other images (when in doubt, create both and compare the results). Also, when compressing a JPG, try different compression factors to balance quality vs. file size.

Graphic File Location

Unlike other applications such as word processing, graphics are NOT embedded in the HTML file that produces a web page. The HTML file only contains a reference to the graphic file. The reference specifies the location of the graphic file (relative to the location of the HTML file) and the name of the file. Therefore, ...

A graphic file MUST first be properly placed in the web site directory structure before a reference to it is placed in a web page.

Also, the web page must first be saved BEFORE a graphic is added to the page. Of course, it also needs to be saved again after graphics are included.

NOTE: If you move the graphic or the HTML file, the reference for the graphic must be changed (unless both are moved together and the relative location remains the same). Also, if the size of the graphic is edited, you will need to delete the reference from the page (i.e. delete the image from the web page) and then place the image again.

Where should a graphic file be placed within the web site folder structure?

Typically in one of four places...

• in the same folder as the web page file
• in the root directory of the web site
• in a graphics folder in the root directory of the web site
• in a graphics folder in the same folder as the web page file

Purpose (aka: Why use a graphic?)

Graphics should enhance the page and have a purpose. Do not place graphics just because you can. A graphic should improve the visual affect of the page and/or provide additional information. The reader of your page should never wonder "what does that image have to do with this information?"

Random graphics with no purpose draw the reader's attention away from the real purpose of the page and wastes bandwidth and people's time.

Placing a Graphic on a Web Page

VERY IMPORTANT: Before placing a graphic on a web page, the graphic MUST...

• be created, edited, and/or modified as necessary
• be stored in the proper graphic format (JPG or GIF)
• have a filename with the appropriate extension (.jpg, or .gif)
• be properly located in the site folder structure relative to the web page file that will use it

Also, the web page that will use the graphic must be saved before placing the graphic.

To place a graphic on a web page using Nvu ...

1. Position the cursor on the page where the graphic is to be located.
2. Click on the Image button in the Composition Toolbar.
3. In the dialog box, click on the Choose File button.
4. Locate and select (i.e. open) the desired graphic file.
   • Note: Make sure that the URL is relative to page location checkbox is checked! This is VERY important!!! If the program will not let you check this box, it means that the HTML file has not yet been saved. The file must be saved in the site folder and the graphic must be in the site folder BEFORE adding the graphic to the page.
5. Enter a brief description of the graphic in the Alternate Text box.
• Note: This is optional. This text is displayed when a user points to the image with the mouse and is also displayed while the graphic is being loaded.
• Using alternate text for every graphic is considered good web page design.
6. Click on the Okay button.

Try it! First download one of the images above (right click on the graphic and use the Save Image As... or Save Picture As... command) and save it in the folder containing the page you experimented with in the last tutorial. Open (in Nvu) the file you experimented with in the last tutorial and place this graphic on that page using the instructions above.

You should notice that the text of the document does not wrap around the graphic. Instead the graphic is treated like a single large character (called an "inline" graphic) within the paragraph it is placed (i.e. text can proceed or follow the graphic). Examples below demonstrate the inline and wrapping options of text around graphics.

MORE IMPORTANT NOTES:

• If the graphic file is renamed or moved, the web page will not be able to find it without changing the reference in the HTML file.
• If the web page is moved, the graphic file must retain its same relative position in the file organization to the web page file. If not, the image will not be found when the page is loaded.
• If the graphic is edited later in a way that changes its size, you will need to delete and reinsert the graphic (otherwise it may look distorted and will not use the new dimensions).

Alignment of Text Around Graphics

How is the text on a page positioned relative to a graphic? There are primarily two options:

• inline - [This is the default when an image is first placed on a web page.] The graphic is treated like a single character of the paragraph that contains it. If the graphic is the only "character" in the paragraph, it can be aligned at the left, center, or right (just like any other paragraph). If there are other characters in the paragraph with the graphic (before, after, or both) the text will either align with the top, center, or bottom of the graphic (see the examples below)
• text wrap - The graphic is placed at the left edge or right edge of the page and text wraps around (above, below, and to the left or right) of the image (see the examples below)

Alignment	Example
top	text around an inline graphic
center	text around an inline graphic
bottom	text around an inline graphic
wrap to the left	text wrapped to the left around a graphic
wrap to the right	text wrapped to the right around a graphic

These options are determined in Nvu as follows:

1. Right-click on the graphic.
2. Select the last command from the popup menu (Image Properties...). This will take you to the same dialog box that was used to place the graphic.
3. Click on the Appearance tab at the top of the dialog box.
4. Use the popup menu at the top right of the dialog box to select an alignment option.
5. Click the OK button.

Try it! Experiment with each of the five options to see their differences.

Can you wrap partially down the graphic and then continue below the graphic? Yes ...

• Position the cursor just before the first character that is to be below the graphic.
• From the Insert menu, select the Break Below Image(s) command.

Try it!

Centering a Graphic on the Page

How do you get a graphic centered on the page? Set the alignment to one of the inline options, place the graphic in its own paragraph (i.e. no text on the paragraph, just the image) and center the paragraph.

NOTE: Text will not be able to flow around its sides ... which is okay, because reading across a graphic is a very poor design option.

Other Options with Graphics

Changing the Location of a Graphic on the Page

Just drag-and-drop.

A Border Around a Graphic

A border of any thickness can be placed around a graphic. To specify the thickness (in pixels) of a border in Nvu ...

1. Right-click on the graphic.
2. Select the last command from the popup menu (Image Properties...). This will take you to the same dialog box that was used to place the graphic.
3. Click on the Appearance tab at the top of the dialog box.
4. In the Solid Border text box (the third one in the dialog box), enter the pixel thickness for the border.
5. Click the OK button.

Try it! The color of the border will be the same as the text color. If the graphic is a link, the link color will be used.

White Space Around the Graphic

Extra "white" space can be placed around a graphic. Space can be placed above and below (same amount) and space can be placed to the left and right (same amount). To add space in Nvu ...

1. Right-click on the graphic.
2. Select the last command from the popup menu (Image Properties...). This will take you to the same dialog box that was used to place the graphic.
3. Click on the Appearance tab at the top of the dialog box.
4. Specify the spacing by using one or both of the following:
   • In the Left and Right text box (the first one in the dialog box), enter the desired spacing in pixels.
   • In the Top and Bottom text box (the second one in the dialog box), enter the desired spacing in pixels.
5. Click the OK button.

Try it!

Size (i.e. Dimensions) of a Graphic

DESIGN NOTE: Even though HTML can adjust the size of a graphic, it is best to adjust a graphic's dimensions in a paint program and use the actual size of the graphic on the web page. Why? Several reasons, including:

• Graphic programs do a better job of resizing images than web browsers.
• If you need a smaller image then you want a smaller graphic file. If the web page specifications make the image smaller, the original graphic file (i.e. the full sized image) still needs to be downloaded.

Therefore, even though the web page can change an image's size, don't do it.

More Design Issues Related to Graphics on Web Pages

Chapter 4 of "Web Pages that Suck" (yes, this really is the name of a book) includes a list of common graphic problems and a list of don'ts for graphics. They are ...

Common Problems with Graphics

Too Big - According to the book, "The number one design mistake made on the Web is using large graphics, and almost everybody is guilty of committing it."

Using GIF Instead of JPEG (or JPEG instead of GIF) - Use GIF for graphics with few and distinctive colors (non-photos). Use JPEG for graphics with many colors that blend (photos). Why? Because the proper format will compress the file better resulting in a smaller file.

Size Parameters Don't Match the Actual Image Size - You can change the image size in the HTML file but you were told above NOT to do it. Instead use a graphic program to modify its size and then place the graphic on the web page.

Size Parameters Are Not Included - With size parameters, the browser can display the layout and text of the page before it gets the graphics (because it knows how big they are). Without these parameters, nothing can be displayed until all graphics are downloaded. Nvu automatically includes these parameters and therefore you shouldn't have this problem.

No Alternate Text - Not deadly, but alternate text should be included with every graphic.

Poor and/or Unnecessary Graphics - Examples include: not using a transparent background GIF when appropriate; poor color choices; to many animated GIF's (one may be to many); and too many special effects.

Graphics Don'ts

• Don't use inappropriate or offensive images.
• Don't use "cutesy" pictures.
• Don't use graphics as dividers (i.e. instead of rules).
• Don't use free clip art from the web (either everyone is using it or its a poor graphic).
• Don't borrow (i.e. steal) other's images (copyright issues).
• Don't use "under construction" signs.

-------------------------

Lists

-------------------------

Introduction to Lists

It is very common to include lists of things on web pages. HTML includes five different types of lists. The two most common are:

1. unordered list (commonly called a bulleted list)
2. ordered list (commonly called a numbered list)

Technically, list items are considered to be a special type of paragraphs. Unlike most other types of paragraphs, the paragraphs that make up list items are not separated by blank lines. The visual separator for ...

• an unordered list is the bullet (hence its alternate name: bulleted list) ... as demonstrated with this list
• an ordered list is a number or letter (hence its alternate name: numbered list) ... as demonstrated with the above list

Unordered Lists

Unordered (i.e. bulleted) lists can be created from existing paragraphs (each paragraph becomes a list item) or one list item at a time. Once one of these lists have been created, more list items can be created by pressing the enter key at the end of any list item.

In Nvu, to create a bulleted list one item at a time ...

1. Begin with the cursor in a new (empty) paragraph.
2. From the Format menu, select the List submenu, and then select the Bulleted command.
3. Type as many list items as needed, pressing the enter key after each item is typed.
4. After the last item, press the enter key twice or move the cursor to some other location on the page.

In Nvu, to create a bulleted list from existing paragraphs ...

1. Select all of the paragraphs that are to be a part of the list.
2. From the Format menu, select the List submenu, and then select the Bulleted command.

Unordered lists can use three different symbols for the bullets, including ...

• a disk (i.e. solid circle, as seen on this line)
• a circle (i.e. open circle, as seen on this line)
• a square (i.e. solid square, as seen on this line)

To change the symbol used for an unordered list,

1. Right click anywhere on the list.
2. Select List Properties ... from the popup menu (the list item in the menu)
3. Use the Bullet Style popup menu in the dialog box to select the bullet type.
4. Click on the OK button.

On your practice web page, create a bulleted list. Also, try changing the bullet style.

Ordered Lists

Ordered (i.e. numbered) lists can be created from existing paragraphs (each paragraph becomes a list item) or one list item at a time. Once one of these lists have been created, more list items can be created by pressing the enter key at the end of any list item.

In Nvu, to create a numbered list one item at a time ...

1. Begin with the cursor in a new (empty) paragraph.
2. From the Format menu, select the List submenu, and then select the Numbered command.
3. Type as many list items as needed, pressing the enter key after each item is typed.
4. After the last item, press the enter key twice or move the cursor to some other location on the page.

In Nvu, to create a numbered list from existing paragraphs ...

1. Select all of the paragraphs that are to be a part of the list.
2. From the Format menu, select the List submenu, and then select the Numbered command.

Ordered lists can use five different numbering schemes, including ...

• Arabic numbers (1, 2, 3, 4, 5, ...)
• upper case Roman numerals (I, II, III, IV, V, ...)
• lower case Roman numerals (i, ii, iii, iv, v, ...)
• upper case letters (A, B, C, D, E, ...)
• lower case letters (a, b, c, d, e, ...)

Ordered lists can also have a starting numbering of any value.

To change the numbering scheme or beginning number for an ordered list,

1. Right click anywhere on the list.
2. Select List Properties ... from the popup menu (the list item in the menu)
3. Use the Number Style popup menu in the dialog box to select the numbering type.
4. (optional) If the numbering is to begin with something other than 1 (or I or i or A or a), enter the starting number in the Start at text box.
5. Click on the OK button.

On your practice web page, try creating a numbered lists. Also, try changing the numbering style and/or beginning number.

Switching List Types

An ordered list can be changed to an unordered list, and vice versa. Proceed as follows:

1. Select all of the list items that need to be changed.
2. From the Format menu, select the List submenu, and then select the Bulleted or Numbered command.

Nested Lists

Sometimes, a list item will contain another list (of either type). For example:

1. Paragraphs
2. Lists
   • Bulleted
   • Numbered
3. Graphics

In the above example, the bulleted list is nested inside the numbered list. This effect is accomplished using the Indent and Outdent buttons on the Format Toolbar.

If you are creating the nested items one at a time, while or before typing the first nested item click on the Indent button. After typing the last nested item type the Enter key and then click on the Outdent button. Finally continue creating the first level list. If necessary, change the list type and style as specified above.

If the list items already exist, select the items that need to be nested and then click the Indent button.

Try these options on your experiment page. Save and view your page in a browser before continuing.

-------------------------

Tables

-------------------------

What is a table?

A table provides the means for layout of text and graphics in rows and columns. A table may or may not include visible borders around the cells.

In general, a table consists of a fixed number of rows and columns. Any rectangle at the intersection of a row and column is called a cell. Parameters may be included that determine the ....

• width: overall width of the table as a percentage of the window or as a fixed number of pixels
• border: outside border thickness (if set to 0, no borders, inside or outside, are displayed)
• horiz. alignment: alignment of cell contents to the left, center, or right of the cell (default is center)
• vert. alignment: alignment of cell contents to the top, center, or bottom of the cell (default is center)
• cellspacing: pixels between a cell edge and the cell's contents
• cellpadding: pixels between cells (i.e. inside border thickness)
• column width (determined by the data if not specified)
• row height (determined by the data if not specified)
• table alignment within the page
• background color of the entire table and/or individual cells

A paragraph can NOT contain a table. All tables are independent objects that must be placed between paragraphs or other objects. In fact, if you try to create a table in the middle of a paragraph, Nvu will split that paragraph into two separate paragraphs with the table between them. But, any cell of a table CAN contain any number of paragraphs or other objects (including graphics, lists, and other tables).

Creating a Table in Nvu

NOTE: Before creating a table, you should have a good idea of the number of rows and columns that will be needed. Rows and columns can be added and/or deleted later, but it will be a lot easier if you begin with the correct number of columns.

1. Position the cursor where the table is to be placed.
2. Click on the Table button in the Composition Toolbar.
3. The dialog box includes three tabs.
• Quickly: Move the mouse over the grid to specify the number of rows & columns and then click the OK button.
• Precisely: Specify the number of rows, columns, overall table width (in pixels or percent of window), and the border thickness. Click OK when done, unless you want to specify some cell parameters.
• Cell: Allows you to specify the alignment and spacing of the cells. In most cases, you will accept the defaults when first creating the table. Changes can be made later (see below). Click OK when done.

On your practice page, create a table with two rows and three columns with a border size of 1 (do not specify a width ... that is, delete anything that might be in the width box ... this allows the content to determine the width).

Entering Data into the Cells of a Table

Each cell of a table can be treated like a little web page. Anything that can be put into a web page can be put into a table cell.

While entering data into a table in Nvu, use any of the following:

• Click IN a cell. This will place the cursor in the cell.
• Type or place any web page objects (paragraphs of text formatted any way you wish, links, lists, graphics, etc.)
• Arrow keys will move the cursor within a cell and between cells.
• The TAB key moves the cursor to the beginning of the next cell. When the cursor is in the last cell of the table, TAB will create a new row.
• SHIFT-TAB moves the cursor to the previous cell. When the cursor is in the first cell of the table, SHIFT-TAB will do nothing.
• Enter key creates a new paragraph or line break depending of the setting in the Format Toolbar (Body Text or Paragraph or Heading) .

Therefore, for the most part, creating the contents of a table cell is essentially the same as creating the contents of a web page.

Enter data into the table you created above. Experiment with each of the above options. Save when done.

Changing Table Settings

As described above, there are several parameters that determine the layout and format of a table (far to many options to fully describe here). To change any of the table settings in Nvu ...

1. Place the cursor in a cell of the table or select two or more cells of the table (by dragging)
2. Either ...
   • Click on the Table button in the Composition Toolbar, or
   • Right click on the table and then select the Table Cell Properties command from the menu that pops up.
3. Use the dialog box options to change table parameters.
   • Table tab options change characteristics of the entire table.
   • Cells tab options change the characteristics of individual or selected cells.
4. Click the OK button when done.

Experiment with these options to see what they do.

Adding & Deleting Rows, Columns, and Tables

Rows, columns, and tables are added and deleted as follows:

1. Right click on the table.
2. From the popup menu, select the ...
• Table Insert submenu to choose commands that will insert rows, columns, or tables relative to the selected cell (i.e. the cell you clicked on).
• Table Delete submenu to choose commands that will delete rows, columns, or the table that is selected (i.e. relative to the cell you clicked on).

Experiment with these options to see what they do. Experiment with any other table options you see.

Where to go from here...

If you understand the above concepts, you are ready to go to the next tutorial (Links: Internal, External, & Other Files)