Adobe Dreamweaver CS3
Creating a Web Site
Planning a Web Site
•
•
•
•
Research site goals and needs
Create a storyboard
Create folders
Collect the page content and create
the Web pages
Adobe Dreamweaver CS3 - Illustrated
Planning a Web Site
• Test the pages
• Modify the pages
• Publish the site
Adobe Dreamweaver CS3 - Illustrated
Planning a Web Site
Adobe Dreamweaver CS3 - Illustrated
Clues to Use
• IP addresses and domain names
• A Web site is identified by a permanent
IP address
• Ex: 123.118.240.231
• A domain name is used as an easier
way of referring to a Web site
• Ex: www.macromedia.com
Adobe Dreamweaver CS3 - Illustrated
Creating a Folder for Web
Site Management
• Windows
• Click on My Computer
• Find your server file: It starts with your last
name
• Create a new folder
• Type striped_umbrella in the Folder Name
text box
Adobe Dreamweaver CS3 - Illustrated
Creating a Folder for Web
Site Management
Adobe Dreamweaver CS3 - Illustrated
Defining a Web Site
• Start Dreamweaver
• Click Dreamweaver Site in the
Create New column on the Welcome
Screen, then click the Advanced tab
(Win) 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 text
Adobe Dreamweaver CS3 - Illustrated
Defining a Web Site
• Click the Browse for File icon next
to the Local root folder text box, click
the Select list arrow
• Choose local root folder for site The
Striped Umbrella dialog box, click
the drive and folder where you
created your root folder,
striped_umbrella
Adobe Dreamweaver CS3 - Illustrated
Defining a Web Site
• Click the Document option next to
“Links relative to:”
• Verify that the Enable cache check
box is checked, then click OK
Adobe Dreamweaver CS3 - Illustrated
Defining a Web Site
Adobe Dreamweaver CS3 - Illustrated
Adding a Folder to a Web Site
• If necessary, expand the Files panel group
and click the Site-The Striped Umbrella
in the Files panel
• Click the Files panel options button,
point to File, then click New Folder
• Type assets in the folder text box, then
press [Enter]
Adobe Dreamweaver CS3 - Illustrated
Adding a Folder to a Web Site
• Click Site on the menu bar, click Manage
Sites, click Edit, then if necessary, click
the Advanced tab
• Click 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
Open
• Click Select click OK, then click Done
Adobe Dreamweaver CS3 - Illustrated
Adding a Folder to a Web Site
Adobe Dreamweaver CS3 - Illustrated
Clues to Use
• Using the Files panel for file
management
• Use the Files panel to add, delete,
move, or rename files and folders
Adobe Dreamweaver CS3 - Illustrated
Saving a Web Page (Index/Home Page)
• Click File on the menu bar, click Open,
navigate to the drive and folder where your
Unit B Data Files are stored, then doubleclick dwb_1.html
• Click File on the menu 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
• Type index.html in the File name text box
of the Save As dialog box, click Save, then
click No in the Update Links dialog box
Adobe Dreamweaver CS3 - Illustrated
Saving a Web Page
Adobe Dreamweaver CS3 - Illustrated
Setting the Home Page and
Copying a New Image to a
Web Site
• Click index.html in the Files panel to
select it, right-click the index.html
filename, then click Set As Home
Page
• Click the gray box representing the
broken image on the index page
Adobe Dreamweaver CS3 - Illustrated
Setting the Home Page and
Copying a New Image to a
Web Site
• Expand the Property Inspector, 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, click the unit_b folder, click
the assets folder, then click
striped_umbrella_banner.gif
• Click anywhere on the page outside of the
banner to display the image, select the
image again to display the image settings
in the Property inspector
Adobe Dreamweaver CS3 - Illustrated
Setting the Home Page and Copying a
New Image to a Web Site
Adobe Dreamweaver CS3 - 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 visible
Click the root folder to select it, then click the
Options button on the Files panel, point to File,
click New File, type about_us.html in the
filename text box to replace untitled.html, then
press [Enter]
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.html
Click the Refresh button on the Files panel
toolbar to refresh the file listing
Adobe Dreamweaver CS3 - Illustrated
Adding New Pages to a Web Site
Adobe Dreamweaver CS3 - Illustrated
Creating and Viewing a Site Map
•
•
•
•
Click Site on the menu bar, then click
Manage Sites
Click The Striped Umbrella if it’s not already
selected, then click Edit
Click the Advanced tab in the Site Definition
for The Striped Umbrella dialog box if
necessary, then under Category, click Site
Map Layout
Verify that index.html appears as the home
page in the Home page text box (if your path
is long, you may need to click in the path,
then press the right arrow to display the index
page filename)
Adobe Dreamweaver CS3 - Illustrated
Creating and Viewing a Site Map
•
•
•
•
Click OK, then click Done
Click the View list arrow on the Files panel
(to the right of Local View), then click Map
view
Click the Expand to show local and remote
sites button on the Files panel toolbar to
expand the site map, click the Site Map
button, then click Map and Files (if
necessary)
Click the Collapse to show only local or
remote site button on the Site Map window
toolbar to collapse the site map
Adobe Dreamweaver CS3 - Illustrated
Creating and Viewing a Site Map
Adobe Dreamweaver CS3 - Illustrated
Clues to Use
• Using site map images in Web page
• Dreamweaver lets you save a site map
as an image in a Web site
• Can be saved as a PNG or BMP file on a
Windows computer
Adobe Dreamweaver CS3 - Illustrated
Selecting Site Map Options
• Click the Options button on the Files
panel, point to View, point to Site Map
Options, then click Show Page Titles
• Click the Expand to show local and
remote sites button on the Files panel to
expand the site map, click the Site Map
list arrow, then click Map and Files
• Click the Collapse to show only local or
remote site button to collapse the Files
panel
Adobe Dreamweaver CS3 - Illustrated
Selecting Site Map Options
• Click the Options button on the Files
panel, point to View, point to Site Map
Options, then click Show Page Titles to
uncheck it
• Click the View list arrow on the Files
panel, then click Local view
• Click File on the menu bar, then click Exit
Adobe Dreamweaver CS3 - Illustrated
Selecting Site Map Options
Adobe Dreamweaver CS3 - Illustrated