Adobe Dreamweaver CS4 - Illustrated Creating a Web Site

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

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

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

Planning a Web Site Test the pagesTest the pages Modify the pagesModify the pages Publish the sitePublish the site *** Make sure to save as often as possible – at least every 5-10 minutes!!!*** Make sure to save as often as possible – at least every 5-10 minutes!!! Adobe Dreamweaver CS4 - Illustrated

Planning a Web Site Adobe Dreamweaver CS4 - 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: IP = Internet ProtocolIP = Internet Protocol 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 CS4 - Illustrated

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

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, then click New FolderWith the drive or folder in the Files panel selected, right-click, 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

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

Defining a Web Site Click Site on the Application bar, click New Site, then click the Advanced tab, shown in Figure B-6, in the Site Definition dialog box if it’s not already selectedClick Site on the Application bar, click New Site, then click the Advanced tab, 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

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 boxClick 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 the striped_umbrella folder, then click SelectClick the drive and folder where you created your root folder, double-click the striped_umbrella folder, then click Select Adobe Dreamweaver CS4 - Illustrated

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

Defining a Web Site Adobe Dreamweaver CS4 - Illustrated

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]Type assets in the folder text box, then press [Enter] Adobe Dreamweaver CS4 - Illustrated

Adding a Folder to a Web Site Click Site on the Application bar, click Manage Sites, then click EditClick Site on the Application bar, 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 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 CS4 - Illustrated

Adding a Folder to a Web Site Adobe Dreamweaver CS4 - 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 Create the original root folder in the Files panelCreate the original root folder in the Files panel Adobe Dreamweaver CS4 - Illustrated

Saving a Web Page Click File on the Application 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 Application 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 Application 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 Application 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 Highlight the existing filename if necessary, type index.html in the File name text box 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 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

Saving a Web Page Adobe Dreamweaver CS4 - Illustrated

Saving a Web Page Adobe Dreamweaver CS4 - Illustrated

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 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 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

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

Copying a New Image to a Web Site Adobe Dreamweaver CS4 - 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, click New File, type about_us.html in the filename text box to replace untitled.html, then press [Enter] (Win)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) 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

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 ExitClick File on the Application bar, then click Exit Adobe Dreamweaver CS4 - Illustrated

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

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

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

To do: Concepts Review B Independent Challenges B 1-3: pg Visual Workshop B: pg. 46 Independent Challenge 4 / My Web Page