Macromedia Dreamweaver 8

1
Macromedia Dreamweaver 8

• Unit B
• Creating a Web Site

2
U n i t O b j e c t i v e s

• Plan a Web site
• Create a folder for Web site management
• Define a Web site
• Add a folder to a Web site
• Save a Web page

3
U n i t O b j e c t i v e s

• Set the home page and copy a new image to a Web
  site
• Add new pages to a Web site
• Create and view a site map
• Select site map options

4
Planning a Web Site

• Research site goals and needs
• Create a storyboard
• Create folders
• Collect the page content and create the Web pages

5
Planning a Web Site

• Test the pages
• Modify the pages
• Publish the site

6
Planning a Web Site
7
Clues to Use

• IP addresses and domain names
• A Web site is identified by a permanent IP
  address
• Ex 123.118.240.231
• A domain name is used as an easier way of
  referring to a Web site
• Ex www.macromedia.com

8
Creating a Folder for Web Site Management

• Windows
• Click the Start button on the taskbar, point to
  All Programs, point to Accessories, then click
  Windows Explorer
• Click the Address list arrow, click the drive
  where you will save your Web site files, then
  navigate to the folder where you will save your
  Web site files
• Click File on the menu bar, point to New, then
  click Folder
• Type striped_umbrella in the Folder Name text
  box, then press Enter
• Close Windows Explorer

9
Creating a Folder for Web Site Management
10
Creating a Folder for Web Site Management

• Mac
• Double-click the Macintosh hard drive, then
  double-click the drive and folder where you will
  save your Web site files
• Click File on the menu bar, then click New Folder
• Type striped_umbrella, then press return to
  rename the folder
• Close the Finder window

11
Creating a Folder for Web Site Management
12
Defining a Web Site

• Start Dreamweaver
• Click Dreamweaver Site in the Create New column
  on the Start Screen, then click the Advanced tab
  in the Site Definition dialog box if its not
  already selected
• Type The Striped Umbrella in the Site Name text
  box, replacing the existing text

13
Defining a Web Site

• Click the folder icon next to the local root
  folder text box, click the Select list arrow
  (Win) or (Mac) from the Choose Local Root Folder
  for site The Striped Umbrella dialog box, click
  the drive and folder where you created your root
  folder, double-click (Win) or click (Mac) the
  striped_umbrella folder, then click Select (Win)
  or Choose (Mac)
• Click the Document option next to Links relative
  to
• Verify that the Refresh local file list
  automatically and the Enable cache check boxes
  are both checked, then click OK

14
Defining a Web Site
15
Adding a Folder to a Web Site

• If necessary, expand the Files panel group and
  click the striped_umbrella folder in the Files
  panel
• Click the Files panel options button , point to
  File, then click New Folder
• Type assets in the folder text box, then press
  Enter (Win) or click the triangle to the left
  of the striped_umbrella folder to open it if
  necessary, click untitled on the new folder, type
  assets as the folder name, then press return
  (Mac)

16
Adding a Folder to a Web Site

• Click Site on the menu bar, click Manage Sites,
  click Edit, then if necessary, click the Advanced
  tab
• Click the folder icon next to the Default images
  folder text box, click the Select list arrow
• Navigate to display the striped_umbrella folder,
  double-click (Win) or click (Mac) the
  striped_umbrella folder, click the assets folder,
  then click Open (Win)
• Click Select (Win) or Choose (Mac), click OK,
  then click Done

17
Adding a Folder to a Web Site
18
Clues to Use

• Using the Files panel for file management
• Use the Files panel to add, delete, move, or
  rename files and folders
• Create the root folder in the Files panel

19
Saving a Web Page

• Click File on the menu bar, click Open, navigate
  to the drive and folder where your Unit B Data
  Files are stored, then double-click dwb_1.html
• Click File on the menu bar, click Save As, click
  the Save in list arrow (Win) or (Mac) to navigate
  to the striped_umbrella root folder, then
  double-click (Win) or click (Mac) the
  striped_umbrella folder
• Highlight the existing filename, type index.html
  in the File name text box (Win) or Save As text
  box (Mac) of the Save As dialog box, click Save,
  then click No in the Update Links dialog box

20
Saving a Web Page
21
Saving a Web Page
22
Setting the Home Page and Copying a New Images to
a Web Site

• Click index.html in the Files panel to select it,
  right-click (Win) or control click (Mac) the
  index.html filename, then click Set As Home Page
• Click the gray box representing the broken image
  on the index page
• Expand the Property inspector if necessary, click
  the folder icon next to the Src text box on the
  Property inspector, click the Look in list arrow
  if necessary to locate the drive and folder where
  your Data Files are stored, double-click (Win) or
  click (Mac) the unit_b folder, double-click (Win)
  or click (Mac) the assets folder, then
  double-click striped_umbrella_banner.gif (Win) or
  click striped_umbrella_banner.gif and click
  Choose (Mac)
• Click anywhere on the page outside of the banner

23
Setting the Home Page and Copying a New Images to
a Web Site
24
Adding New Pages to a Web Site

• Click the Refresh button on the Files Panel,
  click the plus sign (Win) or the triangle (Mac)
  to the left of the assets folder in the Files
  panel to open the folder and view its contents,
  if not already visible
• Click the root folder to select it, then click
  the Options button on the Files panel, point to
  File, click New File, type about_us.html in the
  File name text box to replace untitled.html, then
  press Enter
• Repeat Step 2 to add five more blank pages to The
  Striped Umbrella Web site, and name the new files
  spa.html, cafe.html, activities.html,
  cruises.html, and fishing.html
• Click the Refresh button on the Files panel
  toolbar to refresh the file listing

25
Adding New Pages to a Web Site
26
Creating and Viewing a Site Map

• Click Site on the menu bar, then click Manage
  Sites
• Click The Striped Umbrella if its not already
  selected, then click Edit
• Click the Advanced tab in the Site Definition for
  The Striped Umbrella dialog box if necessary,
  then under Category, click Site Map Layout
• Verify that index.html appears as the home page
  in the Home page text box (if your path is long,
  you may need to click in the path, then press the
  right arrow to display the index page filename)

27
Creating and Viewing a Site Map

• Click OK, then click Done
• Click the View list arrow on the Files panel (to
  the right of Local View), then click Map view
  (Win), or click the Site map button (Mac)
• Click the Expand to show local and remote sites
  button on the Files panel toolbar to expand the
  site map (Win), click the Site Map button, then
  click Map and Files (if necessary)
• Click the Collapse to show only local or remote
  site button on the Site Map window toolbar to
  collapse the site map

28
Creating and Viewing a Site Map
29
Clues to Use

• Using site map images in Web page
• Dreamweaver lets you save a site map as an image
  in a Web site
• Can be saved as a PNG or BMP file on a Windows
  computer
• Can be saved as a PICT or JPEG file on a Macintosh

30
Selecting Site Map Options

• Click the Options button on the Files panel,
  point to View, point to Site Map Options, then
  click Show Page Titles
• Click the Expand to show local and remote sites
  button on the Files panel to expand the site map,
  click the Site Map list arrow, then click Map and
  Files
• Click the Collapse to show only local or remote
  site button to collapse the Files panel

31
Selecting Site Map Options

• Click the Options button on the Files panel,
  point to View, point to Site Map Options, then
  click Show Page Titles to uncheck it
• Click the View list arrow on the Files panel,
  then click Local view
• Click File on the menu bar, then click Exit (Win)
  or Dreamweaver, Quit Dreamweaver (Mac)

32
Selecting Site Map Options
33
U n i t S u m m a r y

• Plan a Web site
• Create a folder for Web site management
• Define a Web site
• Add a folder to a Web site
• Save a Web page

34
U n i t S u m m a r y

• Set the home page and copy a new image to a Web
  site
• Add new pages to a Web site
• Create and view a site map
• Select site map options