GD 65 Class 04B

Topics

Dreamweaver
  • Inserting images
  • Inserting rollovers
  • Image maps
  • Tables

Dreamweaver

Inserting images

Web pages are usually a combination of text and images, and Dreamweaver allows you to place, adjust, and to a limited extent, set the layout of images on the page. Keep in mind that HTML is a page MARKUP language, not a page LAYOUT language, so you may find yourself being frustrated at your lack of ability to position images exactly on the page. We’ll discuss how to position content a little later in the course.

A quick way to get images for use in making test web pages is to “borrow” the images from other web pages. This approach is only for learning purposes, and you must not use this method for commercial purposes since this would violate the rights of the copyright owner of the image.

To copy an image from a web page, place the cursor over the image, and right-click (PC) or control-click (Mac). A menu will popup, and you can select “Save Image As….” Browse to the location on your hard drive where the web page is, (should be in your “final_web” folder) and save the file in the “images” folder in your “final_web” folder. Here is an images to use for this exercise:

flower

LicenseAttribution Some rights reserved by rick ligthelm

Once you have an image to work with, these are the steps for putting an image in a web page.

  • Placing an image. To place an image on a page, first, place your cursor and CLICK in the location on the page where you want the image to show up. Then, in the menu go to INSERT > IMAGE. It will allow you to browse for your images. The image should be in your images folder in your final web folder.
  • Adjusting the size of the image. Click on the image to select it. Then you can change the displayed size by clicking and dragging the small black squares that appear on the edges of the image when you select it.
  • Making an image a link. Click on the image to select it. In the Property Inspector put the link in the Link section.

properties

Note that the inspector is taller than in the text example above. You make this happen by clicking on the small triangle in the lower right hand corner of the palette. Experiment with the following:

Create a rollover in Dreamweaver

Image maps

image_mapImage maps are links created inside of images.

Image maps allow you specify multiple links inside of a single image. The links are tied to shapes overlaid on the image, which can be rectangles, circles, or polygons.

In Dreamweaver, create an image map by clicking on the image, then naming the image map in the lower left corner of the property inspector. Once the map is named, you can create multiple links by drawing a shape, and then associating the URL with the link, using the tools in the property inspector.

Create image map in Dreamweaver


How to Create a Clickable Image Map With Dreamweaver — powered by ehow

Tables

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

Tables allow you to control the relative positioning of elements on a page by creating a series of connected cells. These cells contain text and have a specific or relative size specified.

Tables are used for content that needs to be in the layout format of a table. One example of the kind of information that can be formatted as a table:

Product Features Price
Product 1 This is a description of features for product 1. $10
Product 2 This is a description of features for product 2. $20
Product 3 This is a description of features for product 3. $30
Product 4 This is a description of features for product 4. $40

You create tables by clicking on the table icon in the object palette.

You’ll be asked to set the following attributes:

  • Number of rows
  • Number of columns
  • Width in Percent or Pixels
  • The width of the border (the beveled edge on the outer part of the table)
  • The cell padding (the text margin, left, right, top, bottom)
  • The cell spacing (the width of the cell walls)

Table properties

Table properties are accessible by selecting the whole table.

Table cell properties

Cell properties are accessible by placing the selection point inside a cell – the cell properties will show up in the lower half of the property inspector.

Table Features

The difference between percent and pixels

If the table is set to percent, the table will change size depending on how wide the user sets the browser. If the table cells are set to percent, their size varies as a percentage of the whole table.

Flowing text around tables

For flowing text around tables, tables are just like images, and have the same alignment attributes. The most commonly used settings are “left” and “right”.

Table format

The table format is controlled by the Border, Cellspacing, and Cellpadding (explained below). The settings for these table attributes are accessible in the middle right of the table property inspector. If you want the table borders to be invisible to the viewer and/or are using the table to knit together a set of images together, set all of these attributes to zero.

Border size
The setting of the table border in pixels affects the width of the border around the edge of the table.
Cellspacing size
The setting of the table cellspacing affects the width of the border around each cell
Cellpadding size
The setting of the table cellpadding affects the width of the margin. This margin is on the left, right, top and bottom

Selecting a table

There are three ways to select the whole table.

  • click on the upper left hand corner of the table when you see the cursor turn into a hand (this is sometimes hard to do).
  • click anywhere inside the table, then select MODIFY>TABLE>SELECT TABLE or type control-A twice
  • click anywhere inside the table, the click on the <table> tag at the bottom of the document window

Adjust the rightmost cell first

If you are setting specific widths of the table, set the width of the rightmost cell first, and work your way left. This avoids the problem of the cells squeezing up against each other as happens when you adjust from left to right.

Row and Column Span

Row and Column span enable a cell to span adjacent cells. For example, if you set the row span for a cell to 2, the cell will become two rows tall. Likewise, if you set the column span for a cell to 2, it will become two columns wide. The controls for changing these cell attributes are in the lower left hand corner of the table cell properties inspector. To create a span, select the cells you want to consolidate into one cell, and click on the merge button in the inspector. To remove a span, put the cursor inside the cell to be broken apart, and click on the split button in the inspector.

This cell has a rowspan of two. This cell has a column span of two.

Cell alignment — horizontal and vertical

The location of any text or graphic inside of a table cell is affected by the alignment setting for the cell. By default, the cell contents will be aligned to the left horizontally, and in the middle vertically. To change this, click inside the cell, and then set the Horz or Vert setting in the lower half of the property inspector.

The contents of a cell affects its size

Even when a cell has a specific width and height set, if the contents of the cell are bigger, the cell will always grow to accommodate the size of the content. This is true for both text and graphics. For example,. if the text in a cell doesn’t wrap (either because there are no spaces, or because you set the cell to not allow wrapping), the cell will expand its width to accommodate the text, regardless of the width setting for that cell or the whole table.

Clear row heights or column widths

When you are using a table to control the display of a series of image to be composited together, you should have no widths or heights set. This enables the image in the cell to determine the width and height of the cell. If you select the entire table, in the lower left hand of the properties inspector, there are two buttons (the first and second ones) that enable to you clear the row heights or column widths.

Convert table widths to pixels or percent

If you are having problems with a table, you may have a mix of pixels and percents, not a good thing generally. Dreamweaver has a method for setting all the table widths to the same method. Select the entire table, and in the lower left hand of the properties inspector, there are two buttons (the third and fourth ones) that enable to you set the table and all its cells to pixels or percent.

Leave a comment