Adobe Dreamweaver CS4 - Illustrated

1. Adobe Dreamweaver CS4 - Illustrated Creating a Web Site

2. Unit Objectives • Plan a Web site • Create a folder for Web site management • Define a Web site • Add a folder to a Web site Adobe Dreamweaver CS4 - Illustrated

3. Unit Objectives • Save a Web page • Copy a new image to a Web site • Add new pages to a Web site Adobe Dreamweaver CS4 - Illustrated

4. Planning a Web Site • Research site goals and needs • Create a storyboard • Create folders • Collect the page content and create the Web pages Adobe Dreamweaver CS4 - Illustrated

5. Planning a Web Site • Test the pages • Modify the pages • Publish the site Adobe Dreamweaver CS4 - Illustrated

6. Planning a Web Site Adobe Dreamweaver CS4 - Illustrated

7. Clues to Use • IP addresses and domain names • A Web site is identified by a permanent IP address • Ex: 192.150.20.61 • A domain name is used as an easier way of referring to a Web site • Ex: www.adobe.com Adobe Dreamweaver CS4 - Illustrated

8. Creating a Folder for Web Site Management • Start Dreamweaver • Open or expand the Files panel if necessary to view its contents • Click the list arrow next to the Site list box in the Files panel Adobe Dreamweaver CS4 - Illustrated

9. Creating a Folder for Web Site Management • Click to select the drive, folder, or subfolder in the list where you will store your folders and files for your Web sites • With the drive or folder in the Files panel selected, right-click (Win) or control-click (Mac), then click New Folder • Type striped_umbrella to rename the folder, then press [Enter] Adobe Dreamweaver CS4 - Illustrated

10. Creating a Folder for Web Site Management Adobe Dreamweaver CS4 - Illustrated

11. Defining a Web Site • Click Site on the Application bar (Win) or Menu bar (Mac), click New Site, then click the Advanced tab (Win) or Advanced button (Mac), shown in Figure B-6, 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 Adobe Dreamweaver CS4 - Illustrated

12. Defining a Web Site • Click the Browse for File icon next to the Local root folder text box, click the Select list arrow 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) Adobe Dreamweaver CS4 - Illustrated

13. Defining a Web Site • Click the Document option next to “Links relative to:”, if necessary • Verify that the Enable cachecheck box is checked, then click OK Adobe Dreamweaver CS4 - Illustrated

14. Defining a Web Site Adobe Dreamweaver CS4 - Illustrated

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 menu button, point to File, then click NewFolder • 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) Adobe Dreamweaver CS4 - Illustrated

16. Adding a Folder to a Web Site • Click Site on the Application bar (Win) or Menu bar (Mac), click Manage Sites, then click Edit • Click the Browse for File icon next to the Default images folder text box, click the Selectlistarrow • Navigate to display the striped_umbrella folder, double-click (Win) or click (Mac) the striped_umbrellafolder, click the assetsfolder, then click Open (Win) • Click Select (Win) or Choose (Mac), click OK, then click Done Adobe Dreamweaver CS4 - Illustrated

17. Adding a Folder to a Web Site Adobe Dreamweaver CS4 - Illustrated

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 original root folder in the Files panel Adobe Dreamweaver CS4 - Illustrated

19. Saving a Web Page • Click File on the Application bar (Win) or Menu bar (Mac), 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 Application bar (Win) or Menu bar (Mac), 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 if necessary, type index.html in the File name text box (Win) or Save As text box (Mac) of the Save As dialog box, click Save, click No in the Update Links dialog box, then maximize the document window (if necessary) • Click the dwb_1.html file tab to switch to the dwb_1.html file, then click the Close button on the file tab to close the dwb_1.html page Adobe Dreamweaver CS4 - Illustrated

20. Saving a Web Page Adobe Dreamweaver CS4 - Illustrated

21. Saving a Web Page Adobe Dreamweaver CS4 - Illustrated

22. Copying a New Image to a Web Site • Click the gray box representing the broken image on the index page • Expand the Property inspector if necessary, click the Browse for file icon next to the Src text box on the Property inspector, click the Look in list arrow (Win) or (Mac) if necessary to locate the drive and folder where your Data Files are stored, double-click the unit_b folder, double-click the assets folder, then double-click striped_umbrella_banner.gif Adobe Dreamweaver CS4 - Illustrated

23. Copying a New Image to a Web Site • Click anywhere on the page outside of the banner, if necessary, to display the image, select the image again to display the image settings in the Property inspector Adobe Dreamweaver CS4 - Illustrated

24. Copying a New Image to a Web Site Adobe Dreamweaver CS4 - Illustrated

25. 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, click New File, type about_us.html in the filename text box to replace untitled.html, then press [Enter] (Win) or [return] (Mac) • 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 Adobe Dreamweaver CS4 - Illustrated

26. Adding New Pages to a Web Site • Click the Refresh button on the Files panel toolbar to refresh the file listing • Click File on the Application bar, then click Exit (Win) or click Dreamweaver on the Menu bar, then click Quit Dreamweaver (Mac) Adobe Dreamweaver CS4 - Illustrated

27. Adding New Pages to a Web Site Adobe Dreamweaver CS4 - Illustrated

28. Unit Summary • Plan a Web site • Create a folder for Web site management • Define a Web site • Add a folder to a Web site Adobe Dreamweaver CS4 - Illustrated

29. Unit Summary • Save a Web page • Copy a new image to a Web site • Add new pages to a Web site Adobe Dreamweaver CS4 - Illustrated