Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit B Creating a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 4 Planning a Web Site Research site goals and needs Create a storyboard Create folders Collect the page content and create the Web pages

Macromedia Dreamweaver 8--Illustrated Introductory 5 Planning a Web Site Test the pages Modify the pages Publish the site

Macromedia Dreamweaver 8--Illustrated Introductory 6 Planning a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 7 Clues to Use IP addresses and domain names  A Web site is identified by a permanent IP address Ex: Ex:  A domain name is used as an easier way of referring to a Web site Ex:

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 9 Creating a Folder for Web Site Management

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 11 Creating a Folder for Web Site Management

Macromedia Dreamweaver 8--Illustrated Introductory 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 it’s not already selected Type The Striped Umbrella in the Site Name text box, replacing the existing text

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 14 Defining a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 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)

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 17 Adding a Folder to a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 20 Saving a Web Page

Macromedia Dreamweaver 8--Illustrated Introductory 21 Saving a Web Page

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 23 Setting the Home Page and Copying a New Images to a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 25 Adding New Pages to a Web Site

Macromedia Dreamweaver 8--Illustrated Introductory 26 Creating and Viewing a Site Map Click Site on the menu bar, then click Manage Sites Click The Striped Umbrella if it’s 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)

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 28 Creating and Viewing a Site Map

Macromedia Dreamweaver 8--Illustrated Introductory 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 computerCan be saved as a PNG or BMP file on a Windows computer Can be saved as a PICT or JPEG file on a MacintoshCan be saved as a PICT or JPEG file on a Macintosh

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 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)

Macromedia Dreamweaver 8--Illustrated Introductory 32 Selecting Site Map Options

Macromedia Dreamweaver 8--Illustrated Introductory 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

Macromedia Dreamweaver 8--Illustrated Introductory 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