1. Adobe Dreamweaver CS4 - Illustrated Creating a Web Site

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

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

4. 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 CS4 - Illustrated

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

6. Planning a Web Site Adobe Dreamweaver CS4 - Illustrated

7. 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: 192.150.20.61Ex: 192.150.20.61 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: www.adobe.comEx: www.adobe.com Adobe Dreamweaver CS4 - Illustrated

8. Creating a Folder for Web Site Management Start DreamweaverStart Dreamweaver Open or expand the Files panel if necessary to view its contentsOpen or expand the Files panel if necessary to view its contents Click the list arrow next to the Site list box in the Files panelClick 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 sitesClick 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 FolderWith 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]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 selectedClick 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 textType 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)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 necessaryClick the Document option next to “Links relative to:”, if necessary 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 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 panelIf 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 New FolderClick the Files panel options menu 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)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 EditClick 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 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 (Win) or click (Mac) the striped_umbrella folder, click the assets folder, then click Open (Win)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 DoneClick 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 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 Create the original root folder in the Files panelCreate 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.htmlClick 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 folderClick 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)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 pageClick 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 pageClick 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.gifExpand 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 inspectorClick 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 visibleClick 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)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.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 CS4 - Illustrated

26. Adding New Pages to a Web Site 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 Click File on the Application bar, then click Exit (Win) or click Dreamweaver on the Menu bar, then click Quit Dreamweaver (Mac)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 sitePlan a Web site Create a folder for Web site managementCreate a folder for Web site management Define a Web siteDefine a Web site Add a folder to a Web siteAdd a folder to a Web site Adobe Dreamweaver CS4 - Illustrated

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