Adobe Dreamweaver CS3 Creating a Web Site

Planning a Web Site Research site goals and needsResearch site goals and needs Create a storyboardCreate a storyboard Create foldersCreate folders Collect the page content and create the Web pagesCollect the page content and create the Web pages Adobe Dreamweaver CS3 - Illustrated

Planning a Web Site Test the pagesTest the pages Modify the pagesModify the pages Publish the sitePublish the site Adobe Dreamweaver CS3 - Illustrated

Planning a Web Site Adobe Dreamweaver CS3 - Illustrated

Clues to Use IP addresses and domain namesIP addresses and domain names A Web site is identified by a permanent IP addressA 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 siteA domain name is used as an easier way of referring to a Web site Ex: Adobe Dreamweaver CS3 - Illustrated

Creating a Folder for Web Site Management WindowsWindows Click on My ComputerClick on My Computer Find your server file: It starts with your last nameFind your server file: It starts with your last name Create a new folderCreate a new folder Type striped_umbrella in the Folder Name text boxType striped_umbrella in the Folder Name text box Adobe Dreamweaver CS3 - Illustrated

Creating a Folder for Web Site Management Adobe Dreamweaver CS3 - Illustrated

Defining a Web Site Start DreamweaverStart Dreamweaver Click Dreamweaver Site in the Create New column on the Welcome Screen, then click the Advanced tab (Win) in the Site Definition dialog box if it’s not already selectedClick Dreamweaver Site in the Create New column on the Welcome Screen, then click the Advanced tab (Win) 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 textType The Striped Umbrella in the Site Name text box, replacing the existing text Adobe Dreamweaver CS3 - Illustrated

Defining a Web Site Click the Browse for File icon next to the Local root folder text box, click the Select list arrowClick the Browse for File icon next to the Local root folder text box, click the Select list arrow Choose local root folder for site The Striped Umbrella dialog box, click the drive and folder where you created your root folder, striped_umbrellaChoose local root folder for site The Striped Umbrella dialog box, click the drive and folder where you created your root folder, striped_umbrella Adobe Dreamweaver CS3 - Illustrated

Defining a Web Site Click the Document option next to “Links relative to:”Click the Document option next to “Links relative to:” Verify that the Enable cache check box is checked, then click OKVerify that the Enable cache check box is checked, then click OK Adobe Dreamweaver CS3 - Illustrated

Defining a Web Site Adobe Dreamweaver CS3 - Illustrated

Adding a Folder to a Web Site If necessary, expand the Files panel group and click the Site-The Striped Umbrella in the Files panelIf necessary, expand the Files panel group and click the Site-The Striped Umbrella in the Files panel Click the Files panel options button, point to File, then click New FolderClick the Files panel options button, point to File, then click New Folder Type assets in the folder text box, then press [Enter]Type assets in the folder text box, then press [Enter] Adobe Dreamweaver CS3 - Illustrated

Adding a Folder to a Web Site Click Site on the menu bar, click Manage Sites, click Edit, then if necessary, click the Advanced tabClick Site on the menu bar, click Manage Sites, click Edit, then if necessary, click the Advanced tab Click the Browse for File icon next to the Default images folder text box, click the Select list arrowClick the Browse for File icon next to the Default images folder text box, click the Select list arrow Navigate to display the striped_umbrella folder, double-click the striped_umbrella folder, click the assets folder, then click OpenNavigate to display the striped_umbrella folder, double-click the striped_umbrella folder, click the assets folder, then click Open Click Select click OK, then click DoneClick Select click OK, then click Done Adobe Dreamweaver CS3 - Illustrated

Adding a Folder to a Web Site Adobe Dreamweaver CS3 - Illustrated

Clues to Use Using the Files panel for file managementUsing the Files panel for file management Use the Files panel to add, delete, move, or rename files and foldersUse the Files panel to add, delete, move, or rename files and folders Adobe Dreamweaver CS3 - Illustrated

Saving a Web Page (Index/Home 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.htmlClick 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 to navigate to the striped_umbrella root folder, then double-click the striped_umbrella folderClick File on the menu bar, click Save As, click the Save in list arrow to navigate to the striped_umbrella root folder, then double-click the striped_umbrella folder Type index.html in the File name text box of the Save As dialog box, click Save, then click No in the Update Links dialog boxType index.html in the File name text box of the Save As dialog box, click Save, then click No in the Update Links dialog box Adobe Dreamweaver CS3 - Illustrated

Saving a Web Page Adobe Dreamweaver CS3 - Illustrated

Setting the Home Page and Copying a New Image to a Web Site Click index.html in the Files panel to select it, right-click the index.html filename, then click Set As Home PageClick index.html in the Files panel to select it, right-click the index.html filename, then click Set As Home Page Click the gray box representing the broken image on the index pageClick the gray box representing the broken image on the index page Adobe Dreamweaver CS3 - Illustrated

Setting the Home Page and Copying a New Image to a Web Site Expand the Property Inspector, click the Browse for file 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, click the unit_b folder, click the assets folder, then click striped_umbrella_banner.gifExpand the Property Inspector, click the Browse for file 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, click the unit_b folder, click the assets folder, then click striped_umbrella_banner.gif Click anywhere on the page outside of the banner to display the image, select the image again to display the image settings in the Property inspectorClick anywhere on the page outside of the banner to display the image, select the image again to display the image settings in the Property inspector Adobe Dreamweaver CS3 - Illustrated

Setting the Home Page and Copying a New Image to a Web Site Adobe Dreamweaver CS3 - Illustrated

Adding New Pages to a Web Site Click the Refresh button on the Files Panel, click the plus sign to the left of the assets folder in the Files panel to open the folder and view its contents, if not already visibleClick the Refresh button on the Files Panel, click the plus sign 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 filename text box to replace untitled.html, then press [Enter]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 filename 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.htmlRepeat 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 listingClick the Refresh button on the Files panel toolbar to refresh the file listing Adobe Dreamweaver CS3 - Illustrated

Adding New Pages to a Web Site Adobe Dreamweaver CS3 - Illustrated

Creating and Viewing a Site Map Click Site on the menu bar, then click Manage SitesClick Site on the menu bar, then click Manage Sites Click The Striped Umbrella if it’s not already selected, then click EditClick 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 LayoutClick 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)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) Adobe Dreamweaver CS3 - Illustrated

Creating and Viewing a Site Map Click OK, then click DoneClick OK, then click Done Click the View list arrow on the Files panel (to the right of Local View), then click Map viewClick the View list arrow on the Files panel (to the right of Local View), then click Map view Click the Expand to show local and remote sites button on the Files panel toolbar to expand the site map, click the Site Map button, then click Map and Files (if necessary)Click the Expand to show local and remote sites button on the Files panel toolbar to expand the site map, 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 mapClick the Collapse to show only local or remote site button on the Site Map window toolbar to collapse the site map Adobe Dreamweaver CS3 - Illustrated

Creating and Viewing a Site Map Adobe Dreamweaver CS3 - Illustrated

Clues to Use Using site map images in Web pageUsing site map images in Web page Dreamweaver lets you save a site map as an image in a Web siteDreamweaver 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 Adobe Dreamweaver CS3 - Illustrated

Selecting Site Map Options Click the Options button on the Files panel, point to View, point to Site Map Options, then click Show Page TitlesClick 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 FilesClick 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 panelClick the Collapse to show only local or remote site button to collapse the Files panel Adobe Dreamweaver CS3 - Illustrated

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 itClick 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 viewClick the View list arrow on the Files panel, then click Local view Click File on the menu bar, then click ExitClick File on the menu bar, then click Exit Adobe Dreamweaver CS3 - Illustrated

Selecting Site Map Options Adobe Dreamweaver CS3 - Illustrated