Dreamweaver MX

1
Tutorial 4 Working with Graphics, Rollovers, and
Tables
2
Adding and Formatting Text

• In this tutorial, you will
• Add and format a graphic
• Use invisible graphics as spacers
• Create graphic hyperlinks and an image map
• Create rollovers
• Add and format tables
• Add and format tables in Layout View

3
Understanding Graphics Compression

• Graphics are used to add color and interest to a
  Web site.
• They can also add information such as maps,
  graphs or charts.
• They can also reinforce the goals for the Web
  site.
• You should evaluate graphics for their value to
  the page. If a graphic does not add to the page,
  it should not be added.

4
Understanding Graphics Compression

• Graphics are usually large and can delay the
  loading of the web page if a compression format
  is not used.
• The smaller the graphic, the faster it loads.
• Load time is also affected by the number of
  graphics on a page.
• You should consider the importance of the graphic
  to the site user when adding graphics that might
  take a long time to load.

5
Understanding Graphics Compression
Approximate times to download files
6
Understanding Graphics Compression

• There are three universal display graphic
  formats
• GIF (.gif) (Graphics Interchange Format)
• Images with large areas of non-gradient color.
• Limiting the color range of the file reduces the
  size
• JPEG (.jpg) (Joint Photographic Experts Group)
• Photographic images images with many gradient
  colors.
• A lossy format which loses information as it
  compresses
• PNG (.png) (Portable Network Graphics)
• Supports 48-bit truecolor, variable transparency
  and uses lossless compression. Better quality,
  but larger size
• Only supported in later browsers

7
Understanding Graphics Compression
Three different format images
8
Adding Graphics to Web Pages

• Before adding graphics to your Web page, they
  need to be the correct size, otherwise they will
  be loaded and resized on every users machine.
• Graphics should also be compressed to the
  smallest file size possible.
• You will need to save both the original and the
  reduced, compressed Web page graphic in case you
  need to make corrections, etc.
• You will also want to use logical names on your
  graphics for easy reference.

9
Adding Graphics to Web Pages

• When you first add graphics to your Web page you
  will use the Insert bar.
• After a graphic is added, it appears in the
  Assets panel and you can then use either the
  Insert bar or the Assets panel to add it to
  another page.
• Graphics on the Web site should be stored in the
  Graphics folder within the root folder for the
  site.
• Dreamweaver stores an image tag on the Web page
  and retrieves the actual graphic from the
  Graphics folder.

10
Adding Graphics to Web Pages
Adding Graphics to a page using the Insert Bar
11
Adding Graphics to Web Pages
The Catalyst Logo on the Home Page
12
Adding Graphics to Web Pages

• Assets are everything on your Web site except the
  HTML objects.
• Graphic, sound tracks and movies are assets.
• You can manage your assets using the Assets
  panel.
• When a graphic is added to the local root folder,
  it is automatically listed in the Assets panel.

13
Adding Graphics to Web Pages
Adding a graphic to a page using the Assets panel
14
Formatting Graphics

• The Properties inspector will show a selected
  graphics attributes.
• The properties you will use most often are
• Name should identify the image. Cannot contain
  spaces.
• Width(W) and Height (H) dimension of graphic in
  pixels. Images should be inserted at the
  dimensions you want them to display.
• Image Source File (Src) the relative or
  absolute path of the image.

15
Formatting Graphics

• The properties you will use most often are
  (Cont)
• Alternative or Alt. text that displays when the
  user has a browser that will not display
  graphics. This may also display in some browsers
  as a screen tip.
• Reset Size returns the graphic to its original
  size.
• V Space and H Space the blank space that
  surrounds the image.
• Low Resolution Image Source File (Low Src) the
  path (including file name) of a low resolution
  image that displays while the high-resolution
  image is loading.

16
Formatting Graphics

• The properties you will use most often are
  (Cont)
• Border a box surrounding the graphic. The
  width from 0 (no border) up, is in pixels. The
  border
• of a linked graphic is the link color
• otherwise is the text color of the paragraph
  around the image
• Align aligns the graphic with text
• Baseline/Bottom or Absolute Bottom aligns to
  the bottom of the text or the bottom of the
  lowest character
• Top or Text Top- aligns the top of the graphic to
  the top of the tallest object or text
• Middle or Absolute Middle aligns middle to
  baseline or middle
• Left or Right aligns to the designated margin

17
Formatting Graphics
The attributes list for a graphic
18
Creating Graphic Hyperlinks

• Graphics are also often used on a Web site to
  link to other pages or sites.
• Links can be created for the whole image or it
  can be divided into several links.
• Graphic links are created in the same way that
  you created text links.
• Select the graphic, click the Browse to file
  Button in the Properties inspector and browse to
  the page you want to link to. Once a link is
  created, you can also use the Links list box.

19
Creating Graphic Hyperlinks
Linking a Graphic to another page
20
Creating Graphic Hyperlinks

• You can also create an image map for a graphic,
  dividing it into invisible regions or hotspots.
• A hotspot is a part of an image that when clicked
  an action occurs. I.e. clicking on a state on a
  map of the U.S. might bring the weather up for
  that state.
• There are three types of hotspots, rectangular,
  oval and polygonal.

21
Creating Graphic Hyperlinks

• You click and drag the appropriate tool to create
  the hotspot in the desired shape.
• Hotspots can be moved or resized using the
  Pointer Hotspot Tool
• When a hotspot is selected, the Properties
  inspector displays hotspot buttons and pointer
  tool.

22
Creating Graphic Hyperlinks

• The Properties inspector displays hotspot
  attributes, including
• Link the page or file that opens when the
  hotspot is clicked.
• Target the frame or window the linked page will
  open into.
• Alt. alternative text description
• Map a descriptive name for the image map.

23
Creating Graphic Hyperlinks
Inserting a hotspot into an image
24
Creating Graphic Hyperlinks
Inserting a hotspot into an image
25
Understanding Rollovers

• A rollover is a stacked graphic where the image
  changes as the pointer moves over it.
• The two graphics must be the same size.
• The image Rollover button on the Common tab of
  the Insert bar can be used to insert rollover
  buttons.
• These buttons can change when the mouse hovers
  over them and link to another page when they are
  clicked.

26
Understanding Rollovers

• When a rollover is created, Dreamweaver creates
  code to
• Preload the graphics when the Web page is loaded.
• Cause the graphics to swap when the pointer
  hovers over them.
• Cause the graphics to swap back when the pointer
  no longer hovers over them.
• Causes the user to link to a new page if that
  option is specified.

27
Understanding Rollovers

• Dreamweaver programs rollovers in JavaScript.
• To create a rollover, you click the Image
  Rollover button and enter image name, location of
  the original image, location of the rollover
  image, and a link URL.
• The image name is the name in the Properties
  inspector for the stacked rollover image and is
  not the same as either of the two original
  images.

28
Understanding Rollovers
Inserting a rollover
29
Understanding Rollovers
Inserting a rollover
30
Understanding Rollovers

• Once created, you can copy and paste rollovers to
  other pages using the Copy HTML command on the
  Edit menu.
• When you are pointing the to new location, click
  Paste HTML to finish the copy process.
• You can also edit a rollover by deleting and
  replacing it, by replacing one or both of the
  original graphics, or by editing the JavaScript
  in Code view.

31
Creating Tables

• Tables can be used to provide a structure for the
  layout of a Web page. Providing more flexible
  layouts.
• Tables are divided into rows (horizontal) and
  columns (vertical).
• The intersection of a row and column is a cell.
• The four lines surrounding a cell are called
  borders.
• Borders can be visible or invisible (border0).

32
Creating Tables

• A table can be inserted into a Web page by moving
  the insertion point to the desired location and
  clicking Insert Table on the Tables tab or on the
  Common tab of the Insert bar.
• There are several table parameters you can
  specify
• Rows the number of rows in the table (can be
  increased later)
• Columns the number of columns in the table (can
  be increased later)

33
Creating Tables

• Table parameters you can specify (Cont)
• Width horizontal size of the table in pixels or
  as a percentage of the browser window.
• Border the size in pixels of the border. (size
  of 0 creates invisible borders).
• Cell Padding the empty space between the border
  and the cell content. Default is 1.
• Cell Spacing width of cell walls in pixels.
  Default is 2. If the border is invisible, so are
  the cell walls, no matter how thick they are.

34
Creating Tables
Table grid on a Web page
35
Creating Tables

• Dreamweaver inserts a non-breaking space in each
  cell.
• The non-breaking space keeps the cells from
  collapsing as different browsers display the
  page.
• You can view a non-breaking space in Code or Code
  and Design view.

36
Creating Tables
Viewing a non-breaking space
37
Creating Tables

• To add text to a cell, click the cell and type,
  or by using the Cut and Paste options.
• Several keyboard commands help navigate through
  the table
• Tab key moves to the next cell
• Tab key in the last cell of a table adds a row
• Shift Tab moves to the previous cell
• Graphics can be added using the Image Button on
  the Common tab of the Insert bar.

38
Creating Tables
A table with text added
39
Selecting Tables and Table Elements

• You will want to modify the table layout to meet
  your specific needs, but need to select it first.
• You can select the whole table, a column, a row,
  or a single cell.
• When you select the entire table, a bold black
  line is shown around it and resizing handles
  appear.
• To select a table, right-click it, point to Table
  and click Select table.
• Clicking outside the table deselects it.

40
Selecting Tables and Table Elements
A Selected table
41
Selecting Tables and Table Elements

• When you want to change the attributes of a cell,
  you must select just that cell.
• To select a cell(s), drag across it (them) until
  the borders are black.
• To select a whole column, click above the top
  border of that column.
• To select a whole row, click to the left of that
  row.

42
Selecting Tables and Table Elements
A Selected Cell
43
Selecting Tables and Table Elements
A Selected column
44
Selecting Tables and Table Elements
A Selected row
45
Working With the Entire Table

• When you select a table, you can format, resize,
  move or delete it.
• The Properties inspector will display the
  attributes you defined to create the table as
  well as
• Table ID descriptive name
• Height in pixels or a percentage of the browser
  window
• Align alignment within the page
• Clear Row Heights and Clear Column Widths
  buttons that removes these settings from the
  table

46
Working With the Entire Table

• The Properties inspector will display the
  attributes you defined to create the table as
  well as (Cont)
• Convert Table Widths to Pixels and Convert Table
  Heights to Pixels buttons that change the width
  or height to pixels
• Convert Table Widths to Percent and Convert Table
  Heights to Percents buttons that change the
  width or height to percentages.
• BG Color the background color the default is
  transparent.

47
Working With the Entire Table

• The Properties inspector will display the
  attributes you defined to create the table as
  well as (Cont)
• Brdr Color the color of the table borders. Can
  be changed using the Brdr color text box or the
  Color Picker.
• Bgd Image the background image for the table.
  You can identify an image to use as the
  background for the table. (Note Netscape tiles
  the image in each cell, Explorer displays the
  image behind the entire table.)

48
Working With the Entire Table
A Table with Modified Attributes
49
Working With the Entire Table

• A Table can be manually resized by selecting it
  and dragging the lower-right corner until it is
  the size you want.
• You can reposition a table by dragging it to the
  new location, or cutting and pasting it.
• Dreamweaver will modify the table attributes as
  you manually make these changes.
• You can also delete an entire table by selecting
  it and pressing the delete key.

50
Working With the Entire Table
Resizing a Table
51
Working With the Entire Table
Moving a Table
52
Working With Table Cells

• When a cell or group of cells is selected, you
  can change the cell attributes differently than
  the table attributes.
• You format text in cells this way, as well as
  changing the entire table by selecting all of the
  cells.
• In addition to text formatting, you can use the
  properties inspector to change the cells layout
  attributes.

53
Working With Table Cells

• These layout attributes include
• Merge Cells combines all selected cells into
  one cell.
• Split Cell divides a single cell into multiple
  rows or columns.
• Horizontal horizontal alignment options for the
  cells content.
• Vertical vertical alignment options for the
  cells content.
• No Wrap turns word wrapping on or off.

54
Working With Table Cells

• These layout attributes include (cont)
• Header formats the selected cells or rows as
  table headers. The default for a table header is
  bold and centered.
• Background Image the background image for a
  cell, column or row. The default is transparent.
• Background Color The background color for the
  selected cells. If no color is specified, the
  Web page background shows through.
• Border Color the color of the cell border.

55
Working With Table Cells
A row of cells merged together and formatted as a
header
56
Working With Table Cells

• You can also adjust the row and column spans of
  the cells.
• Row span is the height of the cell in row
  increments.
• Column span is the width of the cell in column
  increments.

57
Working With Table Cells
A merged cell with a row and column span of 2
58
Working with Rows and Columns

• When a row or column is selected, you can change
  its attributes, or resize, add or delete it.
• The attributes for a row or column are the same
  as the ones for cells.
• You can change the size of a row or column by
  typing a new value in the Height or Width box or
  by dragging the border to the new position.

59
Working with Rows and Columns
First column resized
60
Working with Rows and Columns
Second Column Resized
61
Working with Rows and Columns

• You can insert by selecting a column or row and
  using the Insert Column or Insert Row command.
• The new column or row is the same size as the one
  selected.
• The new column is added to the left of the
  selection.
• The new row is added above the selection.
• You can delete by selecting a column or row and
  using the Delete Column or Delete Row command.

62
Using Preset Table Designs

• Dreamweaver contains a Format Table dialog box
  containing a number of preset table designs.
• The Format Table dialog box includes the
  features
• Preset Table Design List and Sample Table a
  list of available preset table formats.
• Row Colors colors and alternating patterns to
  apply to rows.
• Top Row customization options for formatting
  the cells in the top row of the table.

63
Using Preset Table Designs

• The Format Table dialog box includes the features
  (cont)
• Left Col customization options for formatting
  the cells in the left column of the table.
• Table customization options that affect the
  whole table
• Apply All Attributes to TD Tags instead of TR
  Tags left unchecked, the attributes are
  applied to the row tags for the table.

64
Using Preset Table Designs
Completed Format Table Dialog Box
65
Using Preset Table Designs
Table after the new format was applied
66
Exploring the HTML Code of Tables

• The HTML Code for a table can be broken down into
  four types of tags
• Table tags brackets the entire table
• lttable attribute1value attribute2valuegttags
  defining table rows and cellslt/tablegt
• Table Row tags brackets each row
• lttrgt all the tags for the cells in the rowlt/trgt

67
Exploring the HTML Code of Tables

• The HTML Code for a table can be broken down into
  four types of tags (cont)
• Cell tags brackets every cell (except header
  cells)
• lttd attribute1value attribute2valuegttext in
  the celllt/tdgt
• Header Cell tags - brackets every header cell
• ltth attribute1value attribute2valuegttext in
  the celllt/thgt

68
Exploring the HTML Code of Tables
Table Tags shown in Code View
69
Redefining Table Tags Using CSS

• All of the tables on a Web site should have a
  consistent look and should be consistent with the
  rest of the site.
• One way to do this is to use a CSS style.
• To redefine table tags using CSS
• Open the CSS Styles Panel and click the New CSS
  Style button
• Click the redefine HTML tag button
• Select the tag to modify, set the options and
  click OK

70
Redefining Table Tags Using CSS
The formatted table displayed in the Browser
71
Planning a Table in Layout View

• Creating a table for the layout of your Web page
  can become very complicated.
• To help, Dreamweaver established a Layout view
  where you can draw tables and cells directly onto
  the web page.
• Dreamweaver will then convert what you have drawn
  into the necessary code for the table(s) you
  need. Your cells are white/blue and
  Dreamweavers are gray/white.

72
Planning a Table in Layout View

• As you draw cells or tables, Dreamweaver adds the
  necessary cells/tables to anchor them to the
  page.
• You can also make nested tables where one table
  is wholly inside the other.
• You can switch back and forth between Layout and
  Standard view, adding tables and formatting them.
• Planning your table layout ahead of time will
  save effort and redoing it.

73
Planning a Table in Layout View
A plan for the table layout on a Web page
74
Creating a Table in Layout View

• You can draw a table or add cells to a table by
  using the Draw Layout Cell button on the Layout
  tab of the Insert bar.
• A cell cannot exist alone. Dreamweaver will draw
  a table around a cell if you create the cell
  first.
• You can draw a table using the Draw Layout Table
  button the same way you drew a cell.

75
Creating a Table in Layout View
A Cell drawn in Layout View
76
Creating a Table in Layout View
A table and Cell Drawn in Layout View
77
Selecting Tables and Cells in Layout View

• You can work with your table in either Layout or
  Standard view.
• You must first select the table by clicking
  somewhere within it or clicking the Layout Table
  tab.
• You can select a cell in a similar manner by
  clicking on its border or within the cell.

78
Selecting Tables and Cells in Layout View
Selected table in Layout View
79
Selecting Tables and Cells in Layout View
Selected Cell in Layout View
80
Working with Tables in Layout View

• You can resize a selected table by dragging its
  resize handles or by changing the attributes in
  the Properties inspector.
• You can also modify table attributes in Layout
  view.
• The attributes show in the Properties inspector
  when a table is selected. These attributes are
  similar to those in Standard view.

81
Working with Tables in Layout View
Resized tables in layout View
82
Working with Tables in Layout View

• Table attributes in Layout view include
• Width horizontal size of the table fixed or
  autostretch (one column only).
• Height vertical size of table in pixels.
• Background Color the background color for the
  table. Default is transparent.
• Cell padding the amount of space between the
  cell border and its content. Default is 1 in
  most browsers.
• Cell Spacing the width of the invisible cell
  walls. Default is 2 in most browsers.

83
Working with Tables in Layout View

• Table attributes in Layout view include (cont)
• Clear Row Heights and Clear Column Width
  removes the height and width settings for all
  cells in a table.
• Make Widths Consistent resets widths of the
  fixed width cells to match cell content when
  larger than the fixed width.
• Remove all Spacers removes all of the spacer
  images from the selected table. Spacer images
  are inserted to maintain the width s of the fixed
  width columns.
• Remove Nesting adds the cells and content of a
  nested table to the parent.

84
Working with Tables in Layout View

• Layout tables are often created as autostretch
  since this will allow the table to stretch to fit
  the users browser window.
• Dreamweaver will add spacer images (unless told
  not to) to maintain a minimum width for fixed
  width columns in a table.
• When an autostretch column is created, wavy lines
  appears at the top of the column.
• For fixed columns, the width appears instead.

85
Working with Tables in Layout View
Table attributes modified for Autostretch
86
Working with Cells in Layout View

• Working with cells in Layout view is like working
  with them in Standard view.
• Selected cells can be moved by clicking the
  border and dragging the cell.
• Selected cells can be resized by dragging one of
  the handles or by typing the new dimensions in
  the Properties inspector.

87
Working with Cells in Layout View
Moving a Cell in a Table
88
Working with Cells in Layout View

• For a selected cell, the Properties inspector
  shows formatting attributes
• Width horizontal size of cell. Can be fixed or
  auto stretched.
• Height vertical size of cell.
• Background color the default is transparent.
• Horizontal horizontal alignment.
• Vertical vertical alignment.
• No Wrap enables/disables word wrap within the
  cell.
• For other attributes you must be in Standard
  view.

89
Working with Cells in Layout View
Modifying the cell attributes in Layout View
90
Working with Cells in Layout View

• You can add content to a cell in Layout view by
  clicking and typing.
• You can also add graphics to a cell in Layout
  view using the Image button on the Insert bar.

91
Updating the Web Site on the Remote Server

• When pages are changed, they should be updated on
  your remote site.
• To update
• Connect to the remote server using the Connects
  button on the Site panel
• Click View list and Local View
• Select the updated files and then the Put Files
  button
• Click the View list and then Remote view
• Disconnect using the Disconnects button

92
Tutorial Summary

• You should now be able to
• Add graphics to a Web Page
• Create and use spacer graphics
• Create graphic hyperlinks
• Turn a graphic into an image map with multiple
  hyperlinks
• Create rollovers
• Add and format tables
• Use layout view to create and use tables