Project 6 - PowerPoint PPT Presentation

1 / 61
About This Presentation
Title:

Project 6

Description:

Project 6 Layers, Image Maps, and Navigation Bars Project Objectives Explain the concept of layers Insert, select, resize, and move a layer Name a layer Align layers ... – PowerPoint PPT presentation

Number of Views:77
Avg rating:3.0/5.0
Slides: 62
Provided by: Steven1210
Category:

less

Transcript and Presenter's Notes

Title: Project 6


1
Project 6
  • Layers, Image Maps, and Navigation Bars

2
Project Objectives
  • Explain the concept of layers
  • Insert, select, resize, and move a layer
  • Name a layer
  • Align layers
  • Describe an image map

3
Project Objectives
  • Create an image map
  • Add and edit behaviors
  • Describe a navigation bar
  • Create a navigation bar
  • Insert a Date object

4
Copying Data Files to the Parks Web Site
  • Click the Start button on the Windows taskbar and
    then click My Computer
  • Double-click Local Disk (C) and then navigate to
    the location of the data files for Project 6
  • Double-click the DataFiles folder and then
    double-click the Proj06 folder
  • Double-click the parks folder and then
    double-click the images folder

5
Copying Data Files to the Parks Web Site
  • Click the first image file in the list, hold down
    the SHIFT key, and then click the last image file
    in the list
  • Right-click the selected files to display the
    context menu
  • Click the Copy command and then click the My
    Computer Back button the number of times
    necessary to navigate to the your name folder
  • Double-click the your name folder, double-click
    the parks folder, and then double-click the
    images folder

6
Copying Data Files to the Parks Web Site
  • Right-click in the open window to display the
    context menu
  • Click the Paste command to paste the image files
    into the images folder
  • Navigate to the Proj06 parks folder. Double-click
    the parks folder.
  • Click the colorado_attractions.htm file, and then
    right-click to display the context menu

7
Copying Data Files to the Parks Web Site
  • Click the Copy command and then navigate to the
    your name folder
  • Double-click the your name folder, double-click
    the parks folder, and then right-click to display
    the context menu
  • Click the Paste command to paste the data file
    into the parks folder
  • Close the My Computer window

8
Copying Data Files to the Parks Web Site
9
Starting Dreamweaver and Opening the Colorado
Parks Web Site
  • Click the Start button on the Windows taskbar
  • Point to All Programs on the Start menu, point to
    Macromedia on the All Programs submenu, and then
    click Macromedia Dreamweaver 8 on the Macromedia
    submenu
  • Click the Files panel box arrow and click
    Colorado Parks on the Files pop-up menu. If
    necessary, click the plus sign to open the site
    folder

10
Starting Dreamweaver and Opening the Colorado
Parks Web Site
11
Opening the Colorado Attractions Page and
Displaying the Rulers
  • Double-click the colorado_attractions.htm file
  • If necessary, click View on the menu bar, point
    to Rulers, and then point to Show on the Rulers
    submenu
  • Click Show

12
Opening the Colorado Attractions Page and
Displaying the Rulers
13
Creating and Selecting a Layer for the Colorado
Map Image
  • If necessary, display the Insert bar and then
    select the Layout category from the Insert bar
    pop-up menu
  • Click below the last line of text in the Document
    window
  • Click the ruler-origin icon and drag it to the
    insertion point
  • Click the Draw Layer button on the Insert bar
    Layout category and then move the pointer to the
    insertion point

14
Creating and Selecting a Layer for the Colorado
Map Image
  • Using the rulers as a guide, draw a layer
    approximately 440 pixels wide and 350 pixels
    high. If the layer outline does not appear in the
    Document window, click View on the menu bar,
    point to Visual Aids, and then click Layer
    Outlines on the Visual Aids submenu
  • Scroll to the top of the Document window
  • Right-click anywhere on the rulers and select
    Reset Origin on the context menu
  • Click the layer outline to select it
  • If necessary, scroll to the top of the page. If
    the layer-code marker does not display, click
    Edit on the menu bar, select Preferences, and
    then click the Invisible Elements category. Click
    the Anchor points for layers check box and then
    click the OK button

15
Creating and Selecting a Layer for the Colorado
Map Image
16
Displaying the Layers Panel
  • Press the F2 key to display the Layers Panel

17
Naming the Layer and Adjusting Layer Properties
  • Double-click the Layer ID text box in the
    Property inspector and then type col_map as the
    layer name. If necessary, double-click the W box
    and change the width to 440px. Then, if
    necessary, double-click the H box and change the
    height to 350px
  • Click the Vis box arrow and then click visible
  • Press the TAB key

18
Naming the Layer and Adjusting Layer Properties
19
Adding an Image to the Col_map Layer
  • Click the Assets panel tab and, if necessary,
    click the Images icon
  • Scroll to locate and click the map2.gif image. If
    the map2.gif file does not appear in the Assets
    panel, click the Refresh button
  • Drag the map2.gif image onto the layer
  • Click the Image ID box and type colorado_map.
    Click the Alt text box and type Colorado Map.
    Press the TAB key

20
Adding an Image to the Col_map Layer
  • Click the Save button on the Standard toolbar
  • Press F12 and view the Web page in your browser.
    Note the space between the text and the image
  • Close the browser

21
Adding an Image to the Col_map Layer
22
Creating Stacked Layers
  • Click the expander arrow to collapse the panel
    groups
  • Click the ruler-origin icon and drag it about 25
    pixels to the right of the col_map layer
  • Click the Draw Layer button on the Insert bar and
    then use the rulers as a visual guide to draw a
    layer measuring approximately 440px in width and
    350px in height to the right of the col_map layer
  • Right-click anywhere on the rulers and then click
    Reset Origin on the context menu
  • Move the mouse pointer over any border of the
    layer outline and then click the border

23
Creating Stacked Layers
  • Click the Layer ID text box and then type
    northern_colorado as the layer ID. If necessary,
    change the W to 440px and the H to 350px in the
    Property inspector. Click the Vis box arrow and
    then click hidden
  • Press the TAB key
  • If necessary, scroll up to see the top of the
    layer. Click anywhere on the page to deselect the
    layer
  • Click the Draw Layer button on the Insert bar and
    then draw a second layer directly on top of the
    northern_colorado layer
  • Select the layer. Add and modify the following
    properties in the Property inspector Layer ID
    central_colorado, W 440px, H 350px, and Vis
    hidden

24
Creating Stacked Layers
  • Press the TAB key
  • Scroll up if necessary and click anywhere on the
    page to deselect the layer. Click the Draw Layer
    button on the Insert bar and then draw a third
    layer on top of the central_colorado layer
  • Select the layer. Add and modify the following
    attributes in the Property inspector Layer ID
    southern_colorado, W 440px, H 350px, and Vis
    hidden
  • Press the TAB key

25
Creating Stacked Layers
26
Selecting Layers and Adding Images
  • Click the expander arrow to expand the panel
    groups
  • Scroll to the right in the Document window
  • Scroll in the Assets panel and locate the
    southern.jpg file. Drag the southern.jpg image
    onto the southern_colorado layer
  • Click the Image ID box and type so_col
  • Click the Alt text box and type Southern Colorado
    Features. Press the TAB key

27
Selecting Layers and Adding Images
  • Click central_colorado in the Layers panel
  • If necessary, scroll up in the Assets panel and
    locate the central.jpg file. Drag the central.jpg
    image into the central_colorado layer
  • Click the Image ID box and type cen_col
  • Click the Alt text box and type Central Colorado
    Features

28
Selecting Layers and Adding Images
  • Click northern_colorado in the Layers panel
  • Locate the northern.jpg image in the Assets panel
    and drag the image onto the northern_colorado
    layer
  • Click the Image ID box and type nor_col. Click
    the Alt text box and type Northern Colorado
    Features. Press the TAB key

29
Selecting Layers and Adding Images
30
Creating Hotspots on the Colorado Map Image
  • Collapse the panel groups
  • If necessary, scroll up to display the top of the
    col_map layer. Click the map2.gif image in the
    col_map layer
  • Click the Rectangular Hotspot Tool and then move
    the cross hair pointer to the upper-left corner
    of the map2.gif image

31
Creating Hotspots on the Colorado Map Image
  • Drag to draw a rectangle encompassing
    approximately the top third of the map2.gif
    image. If the rectangular hotspot does not
    appear, click View on the menu bar, point to
    Visual Aids, and then click Image Maps on the
    Visual Aids submenu
  • Draw two more hotspots on the map2.gif image by
    dragging the cross hair pointer over the middle
    third of the image and then over the lower third
    of the image
  • Click anywhere in the window to cancel the cross
    hair pointer, and then, if necessary, scroll down

32
Creating Hotspots on the Colorado Map Image
33
Adding the Show-Hide Layers Action to the Image
Map Hotspots
  • Display the panel groups and collapse the
    Property inspector
  • Press SHIFTF4 to display the Behaviors panel. If
    necessary, collapse the Files panel
  • If necessary, scroll up and then click the top
    rectangular hotspot on the map2.gif image
  • Click the Plus () button to display the Actions
    pop-up menu in the Behaviors panel. Point to
    Show-Hide Layers
  • Click Show-Hide Layers. If necessary, click layer
    col_map in the Named layers list in the
    Show-Hide Layers dialog box to select it

34
Adding the Show-Hide Layers Action to the Image
Map Hotspots
  • Click the Show button. Click layer
    northern_colorado and then click the Show
    button
  • Click layer central_colorado and then click the
    Hide button.
  • Click layer southern_colorado and then click
    the Hide button
  • Click the OK button
  • Click the middle hotspot on the map2.gif image,
    click the Plus () button in the Behaviors panel,
    and then click Show-Hide Layers on the Actions
    pop-up menu

35
Adding the Show-Hide Layers Action to the Image
Map Hotspots
  • If necessary, click layer col_map and then
    click the Show button. Click layer cenfl and
    then click the Show button. Click layer
    northern_colorado and then click the Hide
    button. Click layer central_colorado and then
    click the Show button. Click layer
    southern_colorado and then click the Hide
    button
  • Click the OK button
  • If necessary, scroll down in the Document window
    and then click the third hotspot on the map2.gif
    image
  • Click the Plus () button in the Behaviors panel,
    and then click Show-Hide Layers on the Actions
    pop-up menu
  • If necessary, click layer col_map and then
    click the Show button. Click layer
    northern_colorado and then click the Hide
    button. Click layer central_colorado and then
    click the Hide button. Click layer
    southern_colorado and then click the Show button

36
Adding the Show-Hide Layers Action to the Image
Map Hotspots
  • Click the OK button
  • Click the Save button on the Standard toolbar and
    then press the F12 key to display the Web page in
    your browser
  • If necessary, maximize the browser window
  • Move the mouse pointer over the hotspots on the
    map2.gif image to display each of the hidden
    layers
  • Close the browser window and return to Dreamweaver

37
Adding the Show-Hide Layers Action to the Image
Map Hotspots
38
Adjusting Layer Placement
  • Display the Property inspector. If necessary,
    click col_map in the Layers panel and then scroll
    up in the Document window to display the top of
    the col_map layer
  • Click the T text box in the Property inspector
    and type 205 as the pixel number
  • Press the TAB key and then click anywhere in the
    Document window

39
Adjusting Layer Placement
  • Press the F12 key to view the Web page in your
    browser. Verify that none of the text is covered
    and that the image is positioned nicely within
    the Web page
  • Close the browser to return to Dreamweaver
  • Make any necessary adjustments in the Document
    window to adjust the placement of the col_map
    layer
  • Click the Save button

40
Adjusting Layer Placement
41
Selecting and Aligning Multiple Layers
  • Select the southern_colorado layer in the Layers
    panel. Hold down the SHIFT key and then select
    the central_colorado, northern_colorado, and
    col_map layers
  • Click Modify on the menu bar, point to Arrange,
    and then point to Align Top on the Arrange
    submenu
  • Click Align Top. If necessary, scroll down in the
    Document window
  • Hold down the SHIFT key and then click col_map in
    the Layers panel
  • Click Modify on the menu bar, point to Arrange,
    and then click Align Left on the Arrange submenu

42
Selecting and Aligning Multiple Layers
  • Click Modify on the menu bar, point to Arrange,
    and then click Make Same Width on the Arrange
    submenu
  • Click Modify on the menu bar, point to Arrange,
    and then click Make Same Height on the Arrange
    submenu
  • Press the F12 key to view the Web page in your
    browser. Move the mouse pointer over the Colorado
    map to verify that the images are displayed and
    that they are aligned properly
  • Close the browser and return to Dreamweaver

43
Selecting and Aligning Multiple Layers
  • Click View on the menu bar, point to Rulers, and
    then click Show on the Rulers submenu to hide the
    rulers
  • Press F2 to collapse the CSS group and then press
    SHIFTF4 to collapse the Tag Inspector group
  • Press F8 to display the Files pane. Open the
    natl_parks.htm file and scroll to the bottom of
    the page. Click to the right of the Colorado
    National Parks Hotel Reservations link and press
    SHIFTENTER. Type Colorado Attractions Map as the
    entry, create a link to the colorado_attractions.h
    tm page, and then save the natl_parks.htm file
  • Press F12 to view the Web page and test the link.
    Close the browser and then close the
    natl_parks.htm page

44
Selecting and Aligning Multiple Layers
45
Setting the Netscape Resize Fix
  • Click Edit on the menu bar and then click
    Preferences
  • Click the Layers category and then click the Add
    resize fix when inserting layer check box to
    select it. If necessary, click the Nest when
    created within a layer check box to select it
  • Click the OK button. The Netscape Resize Fix
    source code is added. No visible changes are
    displayed in the Document window
  • If necessary, click the Save button on the
    Standard toolbar and then close the
    colorado_attractions.htm page

46
Setting the Netscape Resize Fix
47
Opening and Preparing the Index.htm Page
  • If necessary, click the Files panel tab
  • Double-click index.htm in the Files panel to open
    the index.htm file
  • Collapse the Property inspector and the panel
    groups

48
Opening and Preparing the Index.htm Page
49
Deleting Existing Links and Inserting the Date
Object
  • Move the insertion point to the left of the two
    links at the top of the index.htm page and then
    drag to select the links
  • Press the DELETE key to remove the two links
  • Scroll to the bottom of the page
  • Select the date below your e-mail address link
    and then press the DELETE key

50
Deleting Existing Links and Inserting the Date
Object
  • Click Insert on the menu bar and then point to
    Date
  • Click Date
  • Click the Update automatically on save check box
  • Click the OK button
  • Click the Save button on the Standard toolbar

51
Deleting Existing Links and Inserting the Date
Object
52
Creating the Navigation Bar
  • Scroll up to the top of the page in the Document
    window and then click below the heading. Click
    Insert on the menu bar, point to Image Objects,
    and then point to Navigation Bar on the Image
    Objects submenu
  • Click Navigation Bar
  • Type colorado_parks in the Element name text box.
    If necessary, click the Use tables check box to
    select it and verify that Horizontally is
    selected in the Insert pop-up menu. Point to the
    Browse button for the Up image text box
  • Click the Browse button to the right of the Up
    image text box. If necessary, double-click the
    images folder in the Select image source dialog
    box
  • Click the button01a file

53
Creating the Navigation Bar
  • Click the OK button in the Select image source
    dialog box and then point to the Browse button to
    the right of the Over image text box
  • Click the Browse button to the right of the Over
    image text box and then click button01b
  • Click the OK button. Point to the Browse button
    to the right of the Down image text box
  • Click the Browse button to the right of the Down
    image text box. Click button01b, and then click
    the OK button

54
Creating the Navigation Bar
  • Click the Alternate text text box and then type
    Colorado Parks as the alternate text. Point to
    the Browse button to the right of the When
    clicked, Go to URL text box
  • Click the Browse button. If necessary, navigate
    to the parks folder. Click the natl_parks file
    and then point to the OK button in the Select
    HTML file dialog box
  • Click the OK button in the Select HTML file
    dialog box. Point to the Add Item button
  • Click the Add Item button

55
Creating the Navigation Bar
  • Repeat the previous steps to add the other four
    buttons, using the data shown in Table 6-1 on
    page DW 535
  • If necessary, display the Property inspector
  • Click the Table ID box, type nav_bar and then
    press the ENTER key
  • Click the lttablenav_bargt tag in the tag
    selector. Center the table that contains the
    navigation bar
  • Click the CellPad text box and type 4. Press the
    TAB key

56
Creating the Navigation Bar
  • Press the F12 key to view the navigation bar in
    your browser, and test each of the links
  • If instructed to do so, print a copy of the
    colorado_attractions.htm page and the revised
    index.htm page, hand them in to your instructor,
    and upload the revised Web pages to a server.
    Close the browser and then click the Save All
    button on the Standard toolbar

57
Creating the Navigation Bar
58
Closing the Web Site and Quitting Dreamweaver
  • Click the Close button on the upper-right corner
    of the Dreamweaver title bar

59
Project Summary
  • Explain the concept of layers
  • Insert, select, resize, and move a layer
  • Name a layer
  • Align layers
  • Describe an image map

60
Project Summary
  • Create an image map
  • Add and edit behaviors
  • Describe a navigation bar
  • Create a navigation bar
  • Insert a Date object

61
Project 6 Complete
  • Layers, Image Maps, and Navigation Bars
Write a Comment
User Comments (0)
About PowerShow.com