Adobe Dreamweaver CS3 Creating a Web Site. Planning a Web Site Research site goals and needsResearch site goals and needs Create a storyboardCreate a

Adobe Dreamweaver CS3Adobe Dreamweaver CS3

Creating a Web SiteCreating 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

Adobe Dreamweaver CS3 - Illustrated


• 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: 123.118.240.231Ex: 123.118.240.231

• 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.macromedia.comEx: www.macromedia.com


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

• Click on Click on My ComputerMy Computer

• Find your server file: It starts with your last Find your server file: It starts with your last namename

• Create a new folderCreate a new folder

• Type Type striped_umbrellastriped_umbrella in the Folder Name in the Folder Name text boxtext box


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


Defining a Web SiteDefining a Web Site

• Start Start DreamweaverDreamweaver• Click Click Dreamweaver SiteDreamweaver Site in the in the

Create New column on the Welcome Create New column on the Welcome Screen, then click the Screen, then click the Advanced tab Advanced tab (Win) in the Site Definition dialog box (Win) in the Site Definition dialog box if it’s not already selectedif it’s not already selected

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


Defining a Web SiteDefining a Web Site• 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

• Choose Choose local root folder local root folder for site for site The The Striped UmbrellaStriped Umbrella dialog box, click dialog box, click the drive and folder where you the drive and folder where you created your root folder, created your root folder, striped_umbrellastriped_umbrella


Defining a Web SiteDefining a Web Site• Click the Click the DocumentDocument option next to option next to

“Links relative to:”“Links relative to:”• Verify that the Verify that the Enable cacheEnable cache check check

boxbox is checked, then click OK is checked, then click OK


Defining a Web SiteDefining a Web Site


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 Site-The Striped UmbrellaSite-The Striped Umbrella in the Files panelin the Files panel

• Click the Click the Files panel options buttonFiles panel options button, , 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]


Adding a Folder to a Web SiteAdding a Folder to a Web Site• Click Click SiteSite on the menu bar, click on the menu bar, click ManageManage

SitesSites, click , click EditEdit, then if necessary, click , then if necessary, click the the AdvancedAdvanced tabtab

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

• Navigate to display the Navigate to display the striped_umbrella striped_umbrella folderfolder, double-click the , double-click the striped_umbrellastriped_umbrella folderfolder, click the , click the assetsassets folderfolder, then click , then click OpenOpen

• Click Click SelectSelect click click OKOK, then click , then click DoneDone


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



• 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


Saving a Web Page (Index/Home Page)Saving a Web Page (Index/Home Page)• Click Click FileFile on the menu bar, click on the menu bar, click OpenOpen, ,

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

• Click Click FileFile on the menu bar, click on the menu bar, click Save AsSave As, , click the click the Save in list arrowSave in list arrow to navigate to to navigate to the striped_umbrella root folder, then the striped_umbrella root folder, then double-click the double-click the striped_umbrella folderstriped_umbrella folder

• Type Type index.htmlindex.html in the File name text box in the File name text box of the Save As dialog box, click of the Save As dialog box, click SaveSave, then , then click click NoNo in the Update Links dialog box in the Update Links dialog box


Saving a Web PageSaving a Web Page


Setting the Home Page and Setting the Home Page and Copying a New Image to a Copying a New Image to a Web SiteWeb Site

• Click Click index.htmlindex.html in the Files panel to in the Files panel to select it, right-click the select it, right-click the index.html index.html filenamefilename, then click , then click Set As Home Set As Home PagePage

• Click the Click the gray box representing the gray box representing the broken imagebroken image on the index page on the index page


Setting the Home Page and Setting the Home Page and Copying a New Image to a Copying a New Image to a Web SiteWeb Site• Expand the Property Inspector, click the Expand the Property Inspector, click the

Browse for file icon Browse for file icon next to the Src text box next to the Src text box on the Property inspector, click the on the Property inspector, click the Look in Look in list arrowlist arrow if necessary to locate the drive if necessary to locate the drive and folder where your Data Files are stored, and folder where your Data Files are stored, click the click the unit_b folderunit_b folder, click the , click the assets assets folderfolder, then click , then click striped_umbrella_banner.gifstriped_umbrella_banner.gif

• Click anywhere on the page outside of the Click anywhere on the page outside of the banner to display the image, select the banner to display the image, select the image again to display the image settings in image again to display the image settings in the Property inspectorthe Property inspector


Setting the Home Page and Copying a Setting the Home Page and Copying a New Image to a Web SiteNew Image to a Web 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 to the left of the assets folder in the to the left of the assets folder in the Files panel to open the folder and view its Files panel to open the folder and view its contents, if not already visiblecontents, if not already visible

• Click the Click the root folderroot folder to select it, then click the to select it, then click the Options buttonOptions button on the Files panel, point to on the Files panel, point to FileFile, , click click New FileNew File, type , type about_us.htmlabout_us.html in the in the filename text box to replace untitled.html, then filename text box to replace untitled.html, then press press [Enter][Enter]

• 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 SiteAdding New Pages to a Web Site


Creating and Viewing a Site MapCreating and Viewing a Site Map• Click Click SiteSite on the menu bar, then click on the menu bar, then click

Manage SitesManage Sites• Click Click The Striped UmbrellaThe Striped Umbrella if it’s not already if it’s not already

selected, then click selected, then click EditEdit• Click the Click the Advanced tab Advanced tab in the Site Definition in the Site Definition

for The Striped Umbrella dialog box if for The Striped Umbrella dialog box if necessary, then under Category, click necessary, then under Category, click Site Site Map LayoutMap Layout

• Verify that index.html appears as the home Verify that index.html appears as the home page in the Home page text box (if your path page in the Home page text box (if your path is long, you may need to click in the path, is long, you may need to click in the path, then press the right arrow to display the index then press the right arrow to display the index page filename)page filename)


Creating and Viewing a Site MapCreating and Viewing a Site Map• Click Click OKOK, then click , then click DoneDone• Click the Click the View list arrowView list arrow on the Files panel on the Files panel

(to the right of Local View), then click (to the right of Local View), then click Map Map viewview

• Click the Click the Expand to show local and remote Expand to show local and remote sites buttonsites button on the Files panel toolbar to on the Files panel toolbar to expand the site map, click the expand the site map, click the Site Map Site Map buttonbutton, then click , then click Map and FilesMap and Files (if (if necessary)necessary)

• Click the Click the Collapse to show only local or Collapse to show only local or remote site buttonremote site button on the Site Map window on the Site Map window toolbar to collapse the site maptoolbar to collapse the site map


Creating and Viewing a Site MapCreating and Viewing a Site Map



• Using site map images in Web pageUsing site map images in Web page• Dreamweaver lets you save a site map Dreamweaver lets you save a site map

as an image in a Web siteas an image in a Web site• Can be saved as a PNG or BMP file on a Can be saved as a PNG or BMP file on a

Windows computerWindows computer


Selecting Site Map OptionsSelecting Site Map Options• Click the Click the Options buttonOptions button on the Files on the Files

panel, point to panel, point to ViewView, point to , point to Site Map Site Map OptionsOptions, then click , then click Show Page TitlesShow Page Titles

• Click the Click the Expand to show local and Expand to show local and remote sites buttonremote sites button on the Files panel to on the Files panel to expand the site map, click the expand the site map, click the Site Map Site Map list arrowlist arrow, then click , then click Map and FilesMap and Files

• Click the Click the Collapse to show only local or Collapse to show only local or remote site buttonremote site button to collapse the Files to collapse the Files panelpanel


Selecting Site Map OptionsSelecting Site Map Options• Click the Click the Options buttonOptions button on the Files on the Files

panel, point to panel, point to ViewView, point to , point to Site Map Site Map OptionsOptions, then click , then click Show Page TitlesShow Page Titles to to uncheck ituncheck it

• Click the Click the View list arrowView list arrow on the Files on the Files panel, then click Local viewpanel, then click Local view

• Click Click FileFile on the menu bar, then click on the menu bar, then click ExitExit


Selecting Site Map OptionsSelecting Site Map Options


Documents

Adobe Dreamweaver CS3 Creating a Web Site. Planning a Web Site Research site goals and needsResearch site goals and needs Create a storyboardCreate a