Chapter 1
Getting Started with Dreamweaver
© 2011 Delmar, Cengage Learning
Chapter 1 Lessons
1.
2.
3.
4.
Explore the Dreamweaver workspace
View a web page and use Help
Plan and set up a website
Add a folder and pages
© 2011 Delmar Cengage Learning
Getting Started with Dreamweaver
• What is Adobe Dreamweaver CS5?
– A web development tool that lets you
create dynamic websites
• What is a website?
– A group of related web pages that are
linked together and share a common
interface and design
© 2011 Delmar Cengage Learning
Getting Started with Dreamweaver
• What does Dreamweaver CS5 offer?
– Design tools that can create dynamic and
interactive web pages without writing
HTML code
– Organizational tools
– Site management tools
© 2011 Delmar Cengage Learning
Getting Started with Dreamweaver
Tools You’ll Use
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
• The Dreamweaver workspace includes:
– Menus
– Panels
– Buttons
– Inspectors
– Panes
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
Application bar (Win)
shown as one bar
Workspace switcher
Document toolbar
Insert panel
Browser Navigation
toolbar
Drag the panel border
up or down to resize
Insert pane;
Menu names
Document window
Files panel
Status bar
Property inspector
Tag selector
Select tool Hand tool
Zoom tool
Dreamweaver CS5 workspace
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
• The Insert panel (Insert bar) includes
eight categories:
–
–
–
–
–
–
–
–
Common
Layout
Forms
Data
Spry
InContext Editing
Text
Favorites
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
• The Browser Navigation toolbar
contains navigation buttons you use
when you are on your Live view.
• Live view displays an open document
as if you were viewing it in your
browser.
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
• The Standard tool contains buttons you
can use to execute frequently used
commands.
• The Style Rendering toolbar contains
buttons you can use to display data for
different platforms.
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
• The Related toolbar displays the names
of any related files.
• Related files are files that are linked to a
document and are necessary for the
document to display and function
correctly.
• The Coding toolbar contains buttons you
use when working directly in the code.
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
Active panel tab
Panel groups
are sets of
related panels
that are
grouped
together.
Your drive may
differ
Double-click to
collapse or
expand panel
group
Collapse to
Icons button
Panels in panel group
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
• A panel is a tabbed window that
displays information on a particular
topic or contains related commands.
• A dock is a collection of panels or
panel groups.
• In Dreamweaver CS5, Business
Catalyst, Files, and Assets panel
appear by default.
© 2011 Delmar Cengage Learning
Explore the Dreamweaver Workspace
• The Property inspector (Properties
pane) lets you view and change the
properties of a selected object.
• The status bar:
– The left side displays the tag selector,
which shows HTML tags
– The right side displays the Select tool,
used for page editing
© 2011 Delmar Cengage Learning
View a Web Page and Use Help
• The home page is the first page that
appears when you go to a website.
• Web pages can be primarily text or
media-rich with images, sound, and
movies.
© 2011 Delmar Cengage Learning
View a Web Page and Use Help
Search Feature
Banner
Image
Links to main
pages in the
website
Contact
information
Image
Common web page elements
© 2011 Delmar Cengage Learning
View a Web Page and Use Help
• Basic Web Page Elements:
– Hyperlinks (links) are images or text
elements on a web page that users click to
display another location on the page
– Images can add visual interest to a web page
– Banners are images that display logos,
contact information, or links to other sites
© 2011 Delmar Cengage Learning
View a Web Page and Use Help
• Basic Web Page Elements (continued):
– Menu bars (navigation bars) are bars that
contain multiple links that are usually
organized in rows or columns
– An image map is an image that has been
divided into sections, each of which
serves as a link
© 2011 Delmar Cengage Learning
View a Web Page and Use Help
• Basic Web Page Elements (continued):
– The navigation structure of the site
refers to the way the menu bars and other
internal links are used on web pages
– Rich media content is a comprehensive
term that refers to attractive and engaging
images, interactive elements, video, or
animations
© 2011 Delmar Cengage Learning
View a Web Page and Use Help
Banner
Text
Links to the
main pages in
the website
Image
Viewing web page elements
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
Phases of a website development project
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• A checklist of questions for a website:
– Who is the target audience?
– How can I tailor the site to reach that
audience?
– What are the goals for the website?
– How will I gather the information?
– What is my budget?
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• A checklist of questions (continued):
–
–
–
–
What is the timeline?
Who is on my project team?
How often should the site be updated?
Who will update the site?
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• Wireframes
– Also referred to as a storyboard, is an
illustration that represents every page in a
website
– Shows the relationship of each page in
the site to all other pages
– Allows you to visualize how each page in
the site links to others
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• Wireframes (continued):
– They help the client see how the pages
will look and work together
– Range from very simple to interactive and
multidimensional
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
The parent page
The child pages
The Striped Umbrella website wireframe
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• Once you create a wireframe for your
site, you should create a folder
hierarchy on your computer for all the
files you use in the site.
• The local site folder (root folder) should
contain assets or images.
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• You can set up a website using the
Dreamweaver Site Setup dialog box
and assign a name and specify the
local site folder.
• After the site is setup, the folders will
appear in the Files panel.
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
Site category
Site name
Local Site Folder text
box-your drive may differ
© 2011 Delmar Cengage Learning
Browse for
folder icon
Plan and Set Up a Website
• When you create a web page, images,
colors, tables, and horizontal rules all
contribute to making a page attractive
and interesting.
• You should consider the size of each
web page; if it takes too long to load,
visitors may leave your site.
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• Test the site to make sure all the links work
and that everything looks good.
• Test your web page on several different
browsers.
–
–
–
–
Internet Explorer
Mozilla Firefox
Google chrome
Safari
© 2011 Delmar Cengage Learning
Plan and Set Up a Website
• A web server is a computer that is
connected to the Internet with an IP
(Internet Protocol) address.
• Publishing a website:
– Internet service Providers (ISPs) provide space
on their servers for customers to publish websites
– The Files panel can be used to transfer files
using the Dreamweaver FTP (File Transfer
Protocol) capability
© 2011 Delmar Cengage Learning
Add a Folder and Pages
• You can use asset folders to store all
non-HTML files, such as images or
sound files.
• You should set this as the default
location to store the website images.
© 2011 Delmar Cengage Learning
Add a Folder and Pages
Local site folder for
The Striped Umbrella
website
New assets folder
The Striped Umbrella site in Files panel with assets folder created
© 2011 Delmar Cengage Learning
Add a Folder and Pages
• The home page of a website is the first
page that a viewer sees when they visit
your site.
• Websites can be as simple as one
page or contain hundreds of pages.
© 2011 Delmar Cengage Learning
Add a Folder and Pages
• Adding web pages to a website:
– You can add several blank pages when
the site is first created and then add
content as you go
– You can add and link pages as you create
them
© 2011 Delmar Cengage Learning
Add a Folder and Pages
su_banner.gif in the
assets folder
New pages added
in the striped_umbrella
local site folder
New pages added to The Striped Umbrella website
© 2011 Delmar Cengage Learning