Dreamweaver MX 2004

1
Tutorial 4 Organizing Page Content and Layout
2
Organizing Page Content and Layout

• In this tutorial, you will
• Review graphic formats and compression
• Add graphics to a Web page
• Format and edit graphics
• Create graphic hyperlinks and an image map
• Create a rollover
• Create tables and enter table content
• Select tables and table elements
• Format and resize tables

3
Organizing Page Content and Layout

• In this tutorial, you will (contd)
• Format, resize, add, and delete cells, rows, and
  columns
• Explore the HTML code of tables
• Create tables in Layout mode
• Use invisible graphics as spacers
• Select tables and table elements in Layout mode
• Format and resize tables in Layout mode
• Format, resize, add, and delete cells, rows, and
  columns in Layout mode

4
Understanding Graphics and Compression

• Graphics are used to add color and interest to a
  Web site.
• They can also add information such as maps,
  graphs or charts.
• Most importantly, they 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.

5
Understanding Graphics and 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.

6
Understanding Graphics and Compression
Approximate times to download files
Connection Type (speed in Size of Page (in
Kilobytes) Kilobytes per second) 10
KB 50KB 100KB 200KB 400KB Very
Small Small Medium Large
Very Large download
download download download
download Dial-up 56 Kbps (approx. 5 KBps)
2 seconds 10 seconds 20 seconds
40 seconds 80 seconds Home DSL 640 Bbps
(approx. 80 KBps) lt1 second lt1 second
1.25 seconds 2.5 seconds 5 seconds Cable
Modem 1.5 Mbps (approx. 190 KBps) lt1 second lt1
second lt1 second 1 second 2.1
seconds
7
Understanding Graphics and 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 glossy format which loses information as it
  compresses
• PNG (.png) (Portable Network Graphics)
• Supports 48-bit true color, variable transparency
  and uses lossless compression. Better quality,
  but larger size
• Only supported in later browsers

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

• Assets are the images, colors, URLs, Flash,
  Shockwave, movies, scripts, templates, and
  library items that you use throughout a site.
• 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.

11
Adding Graphics to Web Pages
Images in the Assets panel
12
Formatting Graphics Using CSS Styles and the
Property Inspector

• You format graphics either by creating a CSS
  style and applying it to the graphic or by
  selecting the graphic and setting the attributes
  in the Property inspector.
• Graphic attributes listed in the Property
  inspector are image, W (Width) and H (Height),
  reset image size, Src (image source file), Alt
  (alternate), class, V space and H space, Low Src
  (low resolution image source file), border, and
  align.

13
Formatting Graphics Using CSS Styles and the
Property Inspector
The attributes list for a graphic
14
Editing Graphics from Within Dreamweaver

• You can change the appearance of a graphic by
  editing it.
• Editing a graphic is the process of changing and
  manipulating the actual image.
• You can use the Dreamweaver editing components
  even if a graphics editing program is not
  installed on your computer.

15
Editing Graphics from Within Dreamweaver

• Dreamweaver includes some basic editing
  components such as
• Crop an image editing process that reduces the
  area of the graphic by deleting unwanted outer
  area.
• Resample an image editing process that adds or
  subtracts pixels from a graphic that has been
  resized.
• Brightness and Contrast an image editing
  process adjusts the brightness and contrast of
  the pixels in a graphic.
• Sharpen - an image editing process that increases
  contrast of a graphics edges to improve
  definition.

16
Editing Graphics from Within Dreamweaver

• When you edit a graphic, your edits can not be
  undone.
• It is a good idea to keep a copy of the original
  graphic outside the local root folder so that you
  can reinsert the original graphic in the page if
  you dislike the edited version.

17
Editing Graphics from Within Dreamweaver
Resized Graphic
18
Editing Graphics from Within Dreamweaver
Resampled Graphic
19
Editing Graphics from Within Dreamweaver
Cropping a Graphic
20
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.

21
Creating an Image Map

• 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.

22
Creating an Image Map

• 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 Property
  inspector displays hotspot buttons and pointer
  tool.

23
Creating an Image Map

• The Property 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) alternative text description
• Map a descriptive name for the image map.

24
Creating 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.
• 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.

25
Inserting Rollovers

• A rollover is a JavaScript behavior.
• To create a rollover, you click the Rollover
  Image 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 Property
  inspector for the stacked rollover image and is
  not the same as either of the two original
  images.

26
Inserting Rollovers
Inserting a Rollover
27
Inserting 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 to the 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.

28
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).

29
Creating Tables

• A table can be inserted into a Web page by moving
  the insertion point to the desired location and
  clicking the Table button in the Layout category
  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)

30
Creating Tables

• Table parameters you can specify (Cont.)
• Table Width horizontal size of the table in
  pixels or as a percentage of the browser window.
• Border Thickness 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.

31
Creating Tables

• Table parameters you can specify (Cont.)
• Header the row and columns of a table that
  contain heading information.
• Caption a table title that is displayed outside
  of the table.
• Align Caption designates the alignment of the
  caption in relation to the table.
• Summary a description of the table.

32
Creating Tables
Table grid on a Web page
33
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
  Split view.

34
Adding Content to Cells

• To add text to a cell, click the cell and type,
  or use 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 in
  the Images list of the Insert bar.

35
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.

36
Selecting Tables and Table Elements
A Selected table
37
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.

38
Selecting Tables and Table Elements
A Selected Column
A Selected Cell
A Selected Row
39
Working With the Entire Table

• When you select a table, you can format, resize,
  move or delete it.
• The Property inspector will display the
  attributes you defined to create the table as
  well as
• Table ID descriptive name
• H (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

40
Working With the Entire Table

• The Property 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 (Background Color) the background
  color the default is transparent.

41
Working With the Entire Table

• The Property inspector will display the
  attributes you defined to create the table as
  well as (Cont)
• Brdr Color (Border Color) the color of the
  table borders. Can be changed using the Brdr
  color text box or the Color Picker.
• Bg Image (Background 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.)

42
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.

43
Working With the Entire Table
Resizing a Table
44
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
  Property inspector to change the cells layout
  attributes.

45
Working With Table Cells

• These layout attributes include
• Merges Selected Cells Using Spans combines all
  selected cells into one cell.
• Splits Cells into Rows or Columns divides a
  single cell into multiple rows or columns.
• Horz (Horizontal) horizontal alignment options
  for the cells content.
• Vert (Vertical) vertical alignment options for
  the cells content.
• No Wrap turns word wrapping on or off.

46
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.
• Bg (Background Image) the background image for
  a cell, column or row. The default is
  transparent.
• Bg (Background Color) The background color for
  the selected cells. If no color is specified,
  the Web page background shows through.
• Brdr (Border Color) the color of the cell
  border.

47
Working With Table Cells
A row of cells merged together and formatted as a
header
48
Adjusting the Row Span and Column Span of 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.

49
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.

50
Working with Rows and Columns
Resizing a Table Column
51
Adding and Deleting Columns and Rows

• 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.

52
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.

53
Using Preset Table Designs

• The Format Table dialog box includes the features
  (cont)
• Left Col (Left Column) 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.

54
Using Preset Table Designs
Completed Format Table Dialog Box
55
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

56
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

57
Exploring the HTML Code of Tables
Table Tags shown in Code View
58
Redefining Table Tags Using CSS Styles

• 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

59
Planning a Table in Layout Mode

• Creating a table for the layout of your Web page
  can become very complicated.
• To help, Dreamweaver established a Layout Mode
  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.

60
Planning a Table in Layout Mode

• 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 mode, adding tables and formatting them.
• Planning your table layout ahead of time will
  save effort and avoid having to rework it.

61
Creating a Table in Layout Mode

• You can draw a table or add cells to a table by
  using the Layout 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.

62
Creating a Table in Layout Mode
A Cell drawn in Layout Mode
63
Selecting Tables and Cells in Layout Mode

• You can work with your table in either Layout or
  Standard mode.
• 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.

64
Selecting Tables and Cells in Layout Mode
Selected nested table in Layout Mode
65
Working with Tables in Layout Mode

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

66
Working with Tables in Layout Mode

• Table attributes in Layout mode include
• Width horizontal size of the table fixed or
  autostretch (one column only).
• Height vertical size of table in pixels.
• Bg (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.

67
Working with Tables in Layout Mode

• Table attributes in Layout Mode 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.

68
Working with Tables in Layout Mode

• 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.

69
Working with Cells in Layout Mode

• Working with cells in Layout mode is like working
  with them in Standard mode.
• 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 desired dimensions
  in the Property inspector.

70
Working with Cells in Layout Mode
Moving a Cell in a Table
71
Modifying Cell Attributes in Layout Mode

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

72
Working with Cells in Layout Mode

• 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.
• You can add a text hyperlink to a Web page.
• A target is the specified page or browser window
  in which a linked Web page will open.

73
Working with Cells in Layout Mode
Targeted Link Created for a Home Page
74
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 from Remote Host
  button

75
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