Download Chapter One of the DreamWeaver Book

Chapter 1
Getting Started With
Dreamweaver
Explore the Dreamweaver Workspace
• The Dreamweaver workspace is where you can
find all the tools to create and maintain websites
including:
– Menus
– Panels
– Buttons
– Inspectors
– Panes
Explore the Dreamweaver Workspace
Menu bar
Workspace
switcher
Related
Files
toolbar
Insert
panel
Document
toolbar
Document
window
Drag the
panel border
up or down to
resize Insert
panel
Status bar
Property
inspector
Dreamweaver CC Workspace
Explore the Dreamweaver Workspace
• The Document window is the large area in the
Dreamweaver program window where you create
web pages.
• The Menu bar (also called the Application bar),
located above the Document window, includes
menu names, a Workspace switcher, and other
application commands.
Explore the Dreamweaver Workspace
• The Insert panel, sometimes called the Insert
bar, includes eight categories of buttons:
─ jQuery Mobile
– Common
─ jQuery UI
– Structure
─ Templates
– Media
– Form
─ Favorites
Explore the Dreamweaver Workspace
• The Document toolbar contains buttons and
drop-down menus you can use to:
– Change the current work mode
– Preview web pages
– Add a title
– Use file-management options
Explore the Dreamweaver Workspace
• Live view displays an open document as if you
were viewing it in a browser.
• The Standard toolbar contains buttons you can
use to execute frequently used commands that
are also available on the File and Edit menus.
Explore the Dreamweaver Workspace
• The Related Files toolbar is located below an
open document’s filename tab and 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.
Explore the Dreamweaver Workspace
• The Coding toolbar contains buttons you can use
when working directly in the code and is not
visible unless you are in Code view.
• The Property inspector, sometimes referred to as
the Properties pane, located at the bottom of the
Dreamweaver window, lets you view and change
the properties (characteristics) of a selected
object.
Explore the Dreamweaver Workspace
• The Status bar is located above the Property
Inspector.
• The tag selector shows the HTML tags used at
the insertion point location.
Explore the Dreamweaver Workspace
• The panel is a tabbed window that displays
information on a particular topic or contains
related commands.
• Panel groups are sets of related panels that are
grouped together.
• A collection of panels or panel groups is called a
dock.
Explore the Dreamweaver Workspace
Active
panel tab
Collapse to
Icons
button
Double-click to
collapse or
expand panel
group
Panels in a panel group
Explore the Dreamweaver Workspace
Blue drop zone
appears as a
horizontal line
Panel group
being docked
Docking a panel group
Explore the Dreamweaver Workspace
• A view is a particular way of displaying page
content.
• Design view shows the page as it would appear
in a browser and is primarily used for designing
and creating a web page.
• Code view shows the underlying HTML code for
the page; use this view to read or edit the
underlying code.
Explore the Dreamweaver Workspace
Document
toolbar
Your panel
arrangement
may differ
Coding
toolbar
Code view for new document
Explore the Dreamweaver Workspace
• Show Code and Design views is a combination of
Code view and Design view.
• Show Code and Design views is the best view for
debugging or correcting errors because you can
immediately see how code modifications change
the appearance of the page.
View a Web Page and Use Help
• The first web page that appears when users go
to a website is called the home page.
• The home page sets the look and feel of the
website and directs users to the rest of the pages
in the site.
View a Web Page and Use Help
• Web pages can be very simple and designed
primarily with text, or they can be media-rich with
images, sounds, and movies.
View a Web Page and Use Help
Search text
box
Social
networking
links
Banner
Links to
main pages
in the
website
Common web page elements
View a Web Page and Use Help
• Hyperlinks, also known as links, are images or
text elements on a web page that users click to
display another location on the page, another
web page on the same website, or a web page
on a different website.
View a Web Page and Use Help
• Images add visual interest to a web page.
• Banners are images that appear across the top
or down the side of the screen that can
incorporate a company’s logo contact
information, and links to the other pages in the
site.
View a Web Page and Use Help
• Menu bars, also called 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.
View a Web Page and Use Help
• The navigation structure of the site refers to the
way that menu bars and other internal links are
used on your pages.
• Rich media content is a comprehensive term that
refers to attractive and engaging images,
interactive elements, video, or animations.
View a Web Page and Use Help
• Adobe AIR is an Adobe product used for
developing content that can be delivered with a
browser or a desktop application.
• The Help feature in Dreamweaver CC is based
on Adobe Air technology.
Plan and Set Up a Website
• Planning a website is a complex process that
requires careful planning including:
– Developing a plan
– Creating the basic structure
– Creating the content
– Testing
– Modifying (if necessary)
– Publishing
Plan and Set Up a Website
• Website planning checklist:
– Who is the target audience?
– How can I tailor the site to reach the audience?
– What are the goals for the site?
– How will I gather the information?
– What are my sources for media content?
Plan and Set Up a Website
• Website planning checklist (continued):
– What is my budget?
– What is the timeline?
– Who is on my project team?
– How often should the site be updated?
– Who will update the site?
Plan and Set Up a Website
• A wireframe, sometimes referred to a storyboard,
is an illustration that represents every page in a
website.
• The home page is called the parent page.
• The pages linked below it are called child pages.
Plan and Set Up a Website
• The local site folder (root folder) is a folder for the
site with a descriptive name, such as the name of
the company, and it will be used to store all the
pages or HTML files for the site.
• A subfolder in which you store all the files that
are not pages, such as images and sound files,
should be created and could be named assets or
images.
Plan and Set Up a Website
• After you create the local site folder, you are
ready to set up your site, using the Dreamweaver
Site Setup dialog box.
• The Files panel is the panel you use to manage
your website’s files and folders.
Plan and Set Up a Website
• Once all the pages in your website are
completed, you need to test the site to make sure
all the links work.
• It is important to test your site using different
browsers including the four most common
browsers; Microsoft Internet Explorer, Mozilla
Firefox, Google Chrome, and Apple Safari.
Plan and Set Up a Website
• Publishing a website refers to the process of
transferring all the files for the site to a web
server, a computer that is connected to the
Internet with an IP (Internet Protocol) address, so
that it is available for viewing on the Internet.
Plan and Set Up a Website
• Many Internet Service Providers (ISPs) provide
space on their servers for customers to publish
websites, and some commercial websites
provide free space for their users.
• FTP (File Transfer Protocol) is the process of
uploading and downloading files to and from a
remote site.
Add a Folder and Pages
• After you set up a website, you need to create
folders to organize the files that will make up the
site.
• You can create a folder called assets to store all
non-HTML files, such as images or sound files.
• Then set it as the default location to store the
website images.