Adobe Dreamweaver CS3 Creating a Web Site. Planning a Web Site Research site goals and needsResearch...
-
Upload
eugenia-parrish -
Category
Documents
-
view
217 -
download
0
description
Transcript of Adobe Dreamweaver CS3 Creating a Web Site. Planning a Web Site Research site goals and needsResearch...
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
Planning a Web SitePlanning a Web Site
• Test the pagesTest the pages• Modify the pagesModify the pages• Publish the sitePublish the site
Adobe Dreamweaver CS3 - Illustrated
Planning a Web SitePlanning a Web Site
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
Creating a Folder for Web Creating a Folder for Web Site ManagementSite Management
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
Defining a Web SiteDefining a Web Site
Adobe Dreamweaver CS3 - Illustrated
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]
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
Adding a Folder to a Web SiteAdding a Folder to a Web Site
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
Saving a Web PageSaving a Web Page
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
Adding New Pages to a Web SiteAdding New Pages to a Web Site
Adobe Dreamweaver CS3 - Illustrated
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)
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
Creating and Viewing a Site MapCreating and Viewing a Site Map
Adobe Dreamweaver CS3 - Illustrated
Clues to UseClues to Use
• 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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
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
Adobe Dreamweaver CS3 - Illustrated
Selecting Site Map OptionsSelecting Site Map Options
Adobe Dreamweaver CS3 - Illustrated