Adobe Dreamweaver CS4 - Illustrated Creating a Web Site

Adobe Dreamweaver CS4 - IllustratedAdobe Dreamweaver CS4 - Illustrated

Creating a Web SiteCreating a Web Site

Unit ObjectivesUnit Objectives

• Plan a Web sitePlan a Web site

• Create a folder for Web site Create a folder for Web site managementmanagement

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


Planning a Web SitePlanning 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 Collect the page content and create the Web pagesthe Web pages



• Test the pagesTest the pages

• Modify the pagesModify the pages

• Publish the sitePublish the site




Clues to UseClues to Use

• IP addresses and domain namesIP addresses and domain names• A Web site is identified by a permanent A Web site is identified by a permanent

IP addressIP address• Ex: 192.150.20.61Ex: 192.150.20.61

• A domain name is used as an easier A domain name is used as an easier way of referring to a Web siteway of referring to a Web site

• Ex: www.adobe.comEx: www.adobe.com


Creating a Folder for Web Creating a Folder for Web Site ManagementSite Management• Start DreamweaverStart Dreamweaver

• Open or expand the Files panel if Open or expand the Files panel if necessary to view its contentsnecessary to view its contents

• Click the Click the list arrowlist arrow next to the Site next to the Site list box in the Files panellist box in the Files panel


Creating a Folder for Web Creating a Folder for Web Site ManagementSite Management• Click to select the drive, folder, or Click to select the drive, folder, or

subfolder in the list where you will store subfolder in the list where you will store your folders and files for your Web sitesyour folders and files for your Web sites

• With the drive or folder in the Files panel With the drive or folder in the Files panel selected, right-click (Win) or control-click selected, right-click (Win) or control-click (Mac), then click (Mac), then click New FolderNew Folder

• Type Type striped_umbrellastriped_umbrella to rename the to rename the folder, then press folder, then press [Enter][Enter]


Creating a Folder for Web Creating a Folder for Web Site ManagementSite Management


Defining a Web SiteDefining a Web Site

• Click Click SiteSite on the Application bar (Win) or on the Application bar (Win) or Menu bar (Mac), click Menu bar (Mac), click New SiteNew Site, then click , then click the the Advanced tabAdvanced tab (Win) or (Win) or Advanced Advanced button button (Mac), shown in Figure B-6, in the (Mac), shown in Figure B-6, in the Site Definition dialog box if it’s not already Site Definition dialog box if it’s not already selectedselected

• Type Type The Striped UmbrellaThe Striped Umbrella in the Site in the Site Name text box, replacing the existing textName text box, replacing the existing text



• Click the Click the Browse for File iconBrowse for File icon next next to the Local root folder text box, click to the Local root folder text box, click the the Select list arrowSelect list arrow from the from the Choose local root folder for site The Choose local root folder for site The Striped Umbrella dialog box, click the Striped Umbrella dialog box, click the drive and folder where you created drive and folder where you created your root folder, double-click (Win) or your root folder, double-click (Win) or click (Mac) the striped_umbrella click (Mac) the striped_umbrella folder, then click folder, then click SelectSelect (Win) or (Win) or ChooseChoose (Mac) (Mac)



• Click the Click the DocumentDocument option next to option next to “Links relative to:”, if necessary“Links relative to:”, if necessary

• Verify that the Verify that the Enable cacheEnable cache check check boxbox is checked, then click OK is checked, then click OK




Adding a Folder to a Web SiteAdding a Folder to a Web Site

• If necessary, expand the Files panel group If necessary, expand the Files panel group and click the and click the striped_umbrella folderstriped_umbrella folder in in the Files panelthe Files panel

• Click the Click the Files panel options menu Files panel options menu buttonbutton, point to , point to FileFile, then click , then click NewNew FolderFolder

• Type Type assetsassets in the folder text box, then in the folder text box, then press press [Enter][Enter] (Win); or click the (Win); or click the triangletriangle to to the left of the striped_umbrella folder to the left of the striped_umbrella folder to open it; if necessary, click open it; if necessary, click untitleduntitled on the on the new folder, type new folder, type assetsassets as the folder name, as the folder name, then press then press [return][return] (Mac) (Mac)


Adding a Folder to a Web SiteAdding a Folder to a Web Site• Click Click SiteSite on the Application bar (Win) or on the Application bar (Win) or

Menu bar (Mac), click Menu bar (Mac), click Manage SitesManage Sites, then , then click click EditEdit

• Click the Click the Browse for File icon Browse for File icon next to the next to the Default images folder text box, click the Default images folder text box, click the SelectSelect listlist arrowarrow

• Navigate to display the Navigate to display the striped_umbrella striped_umbrella folderfolder, double-click (Win) or click (Mac) the , double-click (Win) or click (Mac) the striped_umbrellastriped_umbrella folderfolder, click the , click the assetsassets folderfolder, then click , then click OpenOpen (Win) (Win)

• Click Click SelectSelect (Win) or (Win) or ChooseChoose (Mac), click (Mac), click OKOK, , then click then click DoneDone


Adding a Folder to a Web SiteAdding a Folder to a Web Site


Clues to UseClues to Use

• Using the Files panel for file Using the Files panel for file managementmanagement• Use the Files panel to add, delete, Use the Files panel to add, delete,

move, or rename files and foldersmove, or rename files and folders• Create the original root folder in the Create the original root folder in the

Files panelFiles panel


Saving a Web PageSaving a Web Page• Click Click FileFile on the Application bar (Win) or Menu bar (Mac), click on the Application bar (Win) or Menu bar (Mac), click

OpenOpen, navigate to the drive and folder where your Unit B Data , navigate to the drive and folder where your Unit B Data Files are stored, then double-click Files are stored, then double-click dwb_1.htmldwb_1.html

• Click Click FileFile on the Application bar (Win) or Menu bar (Mac), click on the Application bar (Win) or Menu bar (Mac), click Save AsSave As, click the , click the Save in list arrowSave in list arrow (Win) or (Mac) to (Win) or (Mac) to navigate to the striped_umbrella root folder, then double-click navigate to the striped_umbrella root folder, then double-click (Win) or click (Mac) the (Win) or click (Mac) the striped_umbrella folderstriped_umbrella folder

• Highlight the existing filename if necessary, type Highlight the existing filename if necessary, type index.htmlindex.html in in the File name text box (Win) or Save As text box (Mac) of the the File name text box (Win) or Save As text box (Mac) of the Save As dialog box, click Save As dialog box, click SaveSave, click No in the Update Links , click No in the Update Links dialog box, then maximize the document window (if necessary)dialog box, then maximize the document window (if necessary)

• Click the Click the dwb_1.html file tab dwb_1.html file tab to switch to the dwb_1.html file, to switch to the dwb_1.html file, then click the then click the Close button Close button on the file tab to close the on the file tab to close the dwb_1.html pagedwb_1.html page


Saving a Web PageSaving a Web Page


Saving a Web PageSaving a Web Page


Copying a New Image to a Copying a New Image to a Web SiteWeb Site• Click the Click the gray box representing the gray box representing the

broken imagebroken image on the index page on the index page• Expand the Property inspector if necessary, Expand the Property inspector if necessary,

click the click the Browse for file iconBrowse for file icon next to the next to the Src text box on the Property inspector, click Src text box on the Property inspector, click the the Look in list arrow Look in list arrow (Win) or (Mac) if (Win) or (Mac) if necessary to locate the drive and folder necessary to locate the drive and folder where your Data Files are stored, double-where your Data Files are stored, double-click the click the unit_b folderunit_b folder, double-click the , double-click the assets folderassets folder, then double-click , then double-click sstriped_umbrella_banner.giftriped_umbrella_banner.gif


Copying a New Image to a Copying a New Image to a Web SiteWeb Site• Click anywhere on the page outside Click anywhere on the page outside

of the banner, if necessary, to display of the banner, if necessary, to display the image, select the image again to the image, select the image again to display the image settings in the display the image settings in the Property inspectorProperty inspector


Copying a New Image to a Copying a New Image to a Web SiteWeb Site


Adding New Pages to a Web SiteAdding New Pages to a Web Site• Click the Click the Refresh buttonRefresh button on the Files Panel, click on the Files Panel, click

the the plus signplus sign (Win) or the (Win) or the triangletriangle (Mac) to the (Mac) to the left of the assets folder in the Files panel to open left of the assets folder in the Files panel to open the folder and view its contents, if not already the folder and view its contents, if not already visiblevisible

• Click the Click the root folderroot folder to select it, click to select it, click New FileNew File, , type type about_us.htmlabout_us.html in the filename text box to in the filename text box to replace untitled.html, then press replace untitled.html, then press [Enter] [Enter] (Win) or (Win) or [return] [return] (Mac)(Mac)

• Repeat Step 2 to add five more blank pages to Repeat Step 2 to add five more blank pages to The Striped Umbrella Web site, and name the The Striped Umbrella Web site, and name the new files new files spa.htmlspa.html, , cafe.htmlcafe.html, , activities.htmlactivities.html, , cruises.htmlcruises.html, and , and fishing.htmlfishing.html

• Click the Click the Refresh buttonRefresh button on the Files panel on the Files panel toolbar to refresh the file listingtoolbar to refresh the file listing


Adding New Pages to a Web Adding New Pages to a Web SiteSite• Click the Click the Refresh buttonRefresh button on the on the

Files panel toolbar to refresh the file Files panel toolbar to refresh the file listinglisting

• Click Click File File on the Application bar, then on the Application bar, then click click ExitExit (Win) or click (Win) or click DreamweaverDreamweaver on the Menu bar, then on the Menu bar, then click click Quit Dreamweaver Quit Dreamweaver (Mac)(Mac)


Adding New Pages to a Web SiteAdding New Pages to a Web Site


Unit SummaryUnit Summary

• Plan a Web sitePlan a Web site

• Create a folder for Web site Create a folder for Web site managementmanagement

• Define a Web siteDefine a Web site

• Add a folder to a Web siteAdd a folder to a Web site


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


Documents

Adobe Dreamweaver CS4 - Illustrated Creating a Web Site