CIS 205—Web Design &
Development
Dreamweaver
Chapter 1
Chapter 1: Getting Started with Dreamweaver
• Introduction
– Web site
• Group of related web pages with a common design
– XHTML
• Acronym for ‘eXtensible Hypertext Markup Language’
• Currently the standard language for creating Web pages
– HTML
• Acronym for ‘Hypertext Markup Language’
• Formerly the standard language for Web pages
– Browser
• Program used to display Web pages
Chapter 1: Getting Started with Dreamweaver (2)
• Using Dreamweaver Tools
– Adobe Dreamweaver CS3
• Software for creating Web pages and Web sites
– Files panel
• Part of the Dreamweaver user interface
• Used to organize and store files in a Web site
– Home page
• First page viewers see when they visit a Web site
– Site map
• Graphical view of the organization of a Web site
– Navigation structure
• How viewers navigate from page to page in a site
Lesson 1: Explore the Dreamweaver Workspace
• Examining the Dreamweaver Workspace
– The workspace contains all tools for creating web pages
– The Document window is the large white area
– The insert bar (above the Document window) contains
seven tabs, each displaying a group of buttons
– The menu bar is located above the insert bar
– The Document toolbar is at the top of the Document
window and contains buttons and menus
– The status bar is at the bottom of the Document
window and contains a tag selector (shows HTML tags)
– The Property inspector is at the bottom of the
workspace, allowing you to change object properties
– The panels, on the right of the workspace, contain
additional information and commands
Lesson 1: Explore the Dreamweaver Workspace (2)
• Working with Dreamweaver Views
– A view is a way of displaying page content
– Design view is how a page looks in a browser
– Code view shows the underlying HTML code of a page
– Code and Design view shows both views at once
Lesson 1: Explore the Dreamweaver Workspace (3)
• Start Dreamweaver (Windows)
1. Click Start on the taskbar, point to All Programs
2. Point to Adobe Web Standard CS3
3. Click Adobe Dreamweaver CS3
• Change views and view panels
1. Click HTML in the Create New category on the
Dreamweaver Welcome Screen
2. TIP: If you don’t want to see the Welcome Screen,
click the Don’t show again check box
3. Click the Code, Split, and Design buttons on the
Document toolbar
4. Click each panel name in the panel group and inspect
Lesson 2: View a Web Page and Use Help
• Opening a Web Page
– A home page is the first Web page that appears when a
viewer goes to a Web site
• Viewing Basic Web Page Elements
– Most information on a Web page is in the form of text,
which should be short and to the point
– Hyperlinks (or links) are elements that, when clicked,
go to another location on the same page or to a new
page in the same site or in a different site
– An image is a graphic element (less is more)
– A navigation bar has links for navigating the Web site
– Flash button objects are animations that add interest
Lesson 2: View a Web Page and Use Help (2)
• Getting Help
– Click the Help menu item to get help with
Dreamweaver
– Context-specific help is available by clicking the Help
button on the Property inspector (the ? In a circle)
Lesson 2: View a Web Page and Use Help (3)
• Open a Web page and view basic page elements
1. Click File, Open on the Menu bar
2. Click the Look in list arrow and navigate to the
Dreamweaver chapter_1 folder (these files should
have been installed from the textbook CD)
3. Double click dw1_1.html (“The Striped Umbrella”
page opens)
4. Click the Code button to view the code
5. Click the Design button to return to Design view
6. Click the Close button on the page (or File, Close)
Lesson 2: View a Web Page and Use Help (4)
• Use Dreamweaver Help
1. Click Help on the Menu bar, click Dreamweaver Help
(the Adobe Help Viewer window appears)
2. Click in the Search text box
3. Type saving in the Search box, press [Enter]
4. Double-click saving in the Search box and type “save
files” in the Search box (including quotes), press
[Enter]
5. Click a topic in the help window
6. Close the Help Viewer window
Lesson 3: Plan and Design a Web Site
• Understand the Total Process
– Creating a Web site is a complex process
• Planning a Web Site
– Planning is an essential part of creating a Web site
– Create a checklist of questions and answers about the
site (goals, audience, sources, budget, timeline, etc.)
Lesson 3: Plan and Design a Web Site (2)
• Setting up the Basic Structure
– Create a storyboard (a small sketch of every page in a
Web site including relationships)
– You can use paper/pencil or software (e.g., Word)
– The home page is the parent page and all other pages
are child pages
– Create a folder hierarchy for storing all files for the
Web site
– The root folder contains all Web pages in the site
– A subfolder called assets contains all files that are not
Web pages (images, sound files, etc.)
– When you define a Web site, folders and files appear in
the Files panel in the workspace
Lesson 3: Plan and Design a Web Site (3)
• Creating Web Pages and Collecting Page Content
– Gather files for text, images, buttons, video, etc. (a
page with too many elements might take a long time to
load)
– Place these files in the proper folders in the Files panel
– Create blank pages according to your storyboard and
add the content to your pages
• Testing the Pages
– When all pages are complete, test the site in a browser
– Use multiple browsers (e.g., Internet Explorer, Firefox)
– Test with different screen resolutions
Lesson 3: Plan and Design a Web Site (4)
• Modifying the Pages
– Pages in the site may need updating
– Test all modified pages before publishing
• Publishing the Site
– Publishing a site means transferring all files to a Web
server (a computer with an IP address connected to
the Internet)
– A Web server can be accessed for free from certain
ISPs (Internet Service Providers) such as
http://www.tripod.lycos.com/.
– The Files panel can be used to transfer files with FTP
(File Transfer Protocol)
Lesson 3: Plan and Design a Web Site (5)
• Create a root folder (assumes using Vista)
1. Right-click Start on the taskbar, click Explore
2. Navigate to the drive and folder where you will create
a folder for your Web site (such as Documents)
3. Click Organize, New Folder and rename this folder
striped_umbrella, press [Enter]
4. TIP: You can create a Web site folder in the Files panel
by selecting a drive and folder, right-clicking, and
selecting New Folder
Lesson 3: Plan and Design a Web Site (6)
• Define a Web site
1.
2.
3.
4.
5.
6.
7.
8.
In Dreamweaver, click Site, New Site in the menu bar
Click the Advanced tab in the Site Definition window
Type The Striped Umbrella in the Site name text box
Click the file icon to the right of the Local root folder
text box, navigate to the striped_umbrella folder
Click the striped_umbrella folder, then click Open
and Select
Verify that the Document option button is selected
Verify that the Enable cache check box is selected
Click OK
Lesson 3: Plan and Design a Web Site (7)
• Set up Web server access
1. Click Site, Manage Sites, Edit
2. Click Remote Info in the Category list
3. Click the Access list arrow and select a type of access
(click None if a remote server has not been set up)
4. Provide the necessary information in the Site
Definition dialog box and click OK
5. Close the Manage Sites dialog box
Lesson 4: Add a Folder and Pages
• Adding a Folder to a Web Site
– Create a folder called assets for all non-HTML files
– This assets folder can be the default folder for images
– The assets folder could have subfolders for images,
sound, videos, etc.
• Setting the Home Page
– Tell Dreamweaver which page is the home page in the
Web site (usually named index.html or default.html)
• Adding Pages to a Web Site
– Always use the Files panel (not Windows) to add,
delete, move, or rename files and folders in a site
Lesson 4: Add a Folder and Pages (2)
• Add a folder to a Web site
1. Right-click The Striped Umbrella site in the Files
panel and click New Folder
2. Type assets in the folder text box, press [Enter]
• Set the default images folder
1. Click the Site list arrow in the Files panel, click
Manage Sites, and click Edit
2. Click the folder icon to the right of the Default
images folder text box
3. Double-click the assets folder and click Select
4. Click OK and Done
Lesson 4: Add a Folder and Pages (3)
• Set the home page
1. Open dw1_2.html from the location where the you
stored the textbook files (installed from the CD)
2. Click File, Save As, click the Save in list arrow
3. Navigate to the striped_umbrella folder
4. Select dw1_2.html in the File name text box and
then type index
5. Click Save and click No to update links
6. Right-click index.html in the Files panel and click Set
as Home Page
Lesson 4: Add a Folder and Pages (4)
• Save an image file in the assets folder
1. Click The Striped Umbrella banner broken link
placeholder
2. Click the File icon next to the Src text box in the
Property inspector and navigate to the assets folder
in your Data Files folder for this chapter
3. Click su_banner.gif and click OK, then click in a blank
part of the page (file is automatically copied to the
assets folder in your Web site, which is the default
images folder)
Lesson 4: Add a Folder and Pages (5)
• Add pages to a Web site
1. In the Local Files column of the Files panel, right-click
the root folder (Site—The Striped Umbrella), click
New File, type about_us.html (replacing
untitled.html), and press [Enter]
2. Repeat Step1 above to add five more blank pages:
spa.html, café.html, activities.html, cruises.html,
and fishing.html.
3. Click the Refresh button on the Files panel to list the
files alphabetically.
Lesson 5: Create and View a Site Map
• Creating a Site Map
– A site map is a graphical representation of the pages in
a Web site
• Viewing a Site Map
– The View list arrow in the Files panel allows you to
select the Map view
– The Expand button in the Files panel allows you to get
a bigger view of the site map
• Using Site Maps to Help Visitors Find Your Pages
– You can create an image of the site map for your site
– An XML site map can be created to aid search engines
Lesson 5: Create and View a Site Map (2)
• Select site map options
– Click the Site list arrow in the Files panel, click Manage
Sites, click The Striped Umbrella, click Edit
– Click Site Map Layout in the Category list
– index.html should be the home page
– Click the Page titles button, click OK, click Done
• View a site map
– Click the Expand button in the Files panel
– Click View in the menu bar, point to Site Map Options,
click Show Page Titles to deselect it
– Click the Collapse button to collapse the site map
– Click File, Exit to exit Dreamweaver