Images And Image Maps

1
Section 8

• Images And Image Maps

2
Inserting Images

• The image element ltIMGgt defines a graphic image
  on a web page
• Be aware that some browsers may not be able to
  display images, or the user has chosen to disable
  images
• In that case, the description you include in the
  ALT attribute is displayed

3
Inserting Images

• Place your cursor at the location you wish to
  insert an image in the Document Window and
  Click the "Insert Image" icon in the Objects
  Palette
• Alternately, you can select "Insert/Image" from
  the main menu

4
Inserting Images

• The "Select Image Source" dialog-box pops up
• Navigate to the directory or folder where your
  image is stored

5
Inserting Images

• The dialog-box lists the URL or location of the
  image file in the "URL" field
• Select either "Document" or "Site Root" from the
  drop-down "Relative To" menu. "Relative to the
  Document" is recommended
• Check "Preview Images" to see a preview of the
  image in the dialog-box
• After clicking the "Select" button the image is
  inserted in the Document Window

6
Inserting Images

• Clicking on an image causes the Properties
  Palette to present us with common image
  properties.
• Properties include Image Name, Width and Height,
  Source, Link, Alignment, Alternative text, V and
  H Space, Target, Low Resolution Source, Border,
  Map, Refresh, and Edit

7
Background Images

• Background images are usually used to give
  texture to a page
• Use background images carefully
• Keep in mind that images over top of the
  background might not mix well and text may be
  difficult to read
• When you designate a background image, browsers
  tile the background, meaning they repeat the
  image over and over

8
Background Images

• To insert a background image in Dreamweaver,
  Right-Click inside the Document Window and
  select "Page Properties"
• Click the "Browse" button and navigate to the
  image you wish to use as a background image
• The Document Window displays the background

9
Image Maps In Dreamweaver

• To create an image map in Dreamweaver, simply
  place an image in the Document Window as you
  normally would, making sure its selected, and
  input a "Map" name in the "Map" field on the
  Properties Inspector

10
Image Maps In Dreamweaver

• You must provide a name for the image map or the
  map wont function
• Fortunately, Dreamweaver forces you to input a
  name in the "Map Name" field if you forget to do
  so
• To create links, use the rectangular, circular,
  or polygonal tool to draw over the desired area

11
Image Maps In Dreamweaver

• In this case, we would use the rectangular shape
  to make link boxes over each word in the graphic

12
Image Maps In Dreamweaver

• The Properties Inspector presents us with Image
  Map controls

13
Image Maps In Dreamweaver

• To link each Link box in the image map, Click
  the browse icon and create a link just as you
  normally do
• To input an alternate name for non-graphics
  browsers, place text in the "Alt" field
• To move or delete a box or other area shape use
  the "Arrow" tool to select and move it

14
Image Maps In Dreamweaver

• Press the Delete key to delete a shape
• Click "OK" when you have completed making link
  areas over the image
• Dreamweaver displays an image map indicator
  beside your image in the "Document Window"

15
Section 9

• Tables

16
Tables

• Tables are defined in terms of rows and columns,
  which when combined form cells
• For instance, a table consisting of three rows
  and five columns has 15 cells

17
Inserting A Table

• To create a Table in Dreamweaver, place the
  cursor at the point you would like to insert the
  Table in the Document window and Click the
  "Insert Table" icon
• The "Insert Table" dialog-box pops up

18
Inserting A Table

• Input the number of rows and columns you desire,
  the width of the Table in percentage of browser
  window or pixels, and border, cell padding, and
  cell spacing values

19
Table Properties

• You can change all the regular properties of your
  Table by modifying the options in the Properties
  Inspector

20
Table Properties

• Options include Table Name, Rows, Cols, W and H
  in percentage or pixels, CellPad, CellSpace,
  Align, Border, Conversion controls, Clear width
  and height values, V Space, H Space, Border color
  controls, and Background color and image controls

21
Table Properties

• Whether you select a row or multiple rows, a
  column or multiple columns, or a cell, each share
  similar properties
• In fact, modifying the properties of a row or
  column merely modify each cell within the row or
  column

22
Table Properties

• Dreamweaver indicates whether you have selected a
  row, column, or cell in the Properties Inspector
  by displaying the Row icon , the Column icon , or
  the Cell icon
• Options include Merging cells, Splitting cells
  into rows or columns, Horizontal and Vertical
  alignment, Width and Height, No Wrap, Header, and
  Background image, color, and border colors

23
Section 10

• Frames

24
Creating A Frameset

• Before you create a frameset page, its a good
  idea to produce the pages that will populate the
  frames so that you have an idea about the
  required size of each frame
• Once you have produced the regular HTML pages,
  you can create the frameset page
• Simply create a new document in the Site Window
  and name it appropriately

25
Creating A Frameset

• Select "View/Frame Borders"

26
Creating A Frameset

• Dreamweaver places visible Frame Borders around
  the entire Document Window

27
Creating A Frameset

• To create a frame, press ALT while you Click
  and drag over a frame border
• If you drag from the left side, two columns make
  up the frameset
• If you drag from the top, two rows make up the
  frameset

28
Frames Properties

• Clicking on one of the frame borders activates
  the frameset for editing
• Set up the frameset by modifying the properties
  in the Properties Inspector

29
Creating Frames From The Objects Palette

• In addition to creating your framesets yourself,
  Dreamweaver comes with a set of eight pre-built
  framesets you can access simply by selecting the
  "Frames" section on the Objects Palette and
  Clicking on the appropriate frameset