Lesson 1: Dreamweaver CS6 JumpstartIntroduction to Adobe Dreamweaver CS6
Adobe Certified Associate:
Web Communication using Adobe Dreamweaver CS6
Overview
© 2013 John Wiley & Sons, Inc. 2
3.1 Elements of the Dreamweaver Interface
When you work with a document, Dreamweaver lets
you see your work in one of four views:
1. Dreamweaver’s default Design view lets you add
elements to your page in a visual fashion.
2. More experienced web designers and coders can
use the Code view to edit a document’s HTML
code and scripts directly
© 2013 John Wiley & Sons, Inc. 3
3.1 Elements of the Dreamweaver Interface
3. For those who like something in between, the Split view provides a split-pane Design and Code view all at once as shown at right.
© 2013 John Wiley & Sons, Inc. 4
3.1 Elements of the Dreamweaver Interface
4. The Live view is a type of “reality check” that
allows you to view your page in a native web
browser, eliminating the need to leave the
program in order to preview your designs.
© 2013 John Wiley & Sons, Inc. 5
3.1 Elements of the Dreamweaver Interface
Built-in FTP: You can easily upload and download files
to and from your web server using the Files panel’s
drag-and-drop interface.
Page and code object Insert panels: You can find
intuitive icons for most common web page elements
in a categorized Insert panel, from which you can
add elements to your page with a single click.
CSS Styles panel: Dreamweaver’s full-featured CSS
Styles panel lets you create, edit, and manage styles
on-the-fly from a single panel.
© 2013 John Wiley & Sons, Inc. 6
3.1 Elements of the Dreamweaver Interface
Customizable workspace layouts:
You can save combinations and
positions of panels and toolbars.
Save multiple workspace layouts
for different users, or create
workspaces for specific tasks.
© 2013 John Wiley & Sons, Inc. 7
3.1 Elements of the Dreamweaver Interface
Powerful visual aids:
Take advantage of
the precision you’re
accustomed to in other
programs through
guides, rulers, measuring
tools, and customizable
positioning grid; many
of these features are
found and can be
activated within the View menu.
© 2013 John Wiley & Sons, Inc. 8
3.1 Elements of the Dreamweaver Interface
• CSS styles panel: Take advantage of the vast design
and formatting options that CSS provides through
Dreamweaver’s full-featured CSS Styles panel, which
lets you create, edit, and manage styles on-the-fly
from a single panel.
© 2013 John Wiley & Sons, Inc. 9
3.4 Use The Assets Panel• The Assets panel (Windows
> Assets) catalogs different types of content and code from your site and allows you to easily locate and apply an asset, such as colors, by clicking and dragging or applying it.
• The Assets panel will allow you to access and reuse multiple types of content and code.
© 2013 John Wiley & Sons, Inc. 10
6.4 Managing Assets, Links, and Files for a Site
• The Related Files bar runs across the top of your
document window and shows the various files used
create your finished page. You can switch between
these files using the Related Files bar without losing
the visual preview of their parent page.
© 2013 John Wiley & Sons, Inc. 11
3.1 Elements of the Dreamweaver Interface
• Clicking on the
Code Navigator,
enabled in the
design view,
shows CSS styles.
You can click on
the style in order
to view the
code directly.
© 2013 John Wiley & Sons, Inc. 12
4.5 Applying Alternative Text
• InContext Editing, a feature of Business Catalyst,
allows users to make simple content changes within
a web browser.
• The creator of the HTML page in Dreamweaver
must specify regions on the page that users can
edit. For example, you could make a table an
editable region. When users log into the InContext
Editing service, they can edit the table in a browser.
© 2013 John Wiley & Sons, Inc. 13
2.1 Website Design: Best Practices
• Style sheets define page layout, fonts, navigation,
and color in a central location, thereby ensuring
consistency.
• Snippets are small sections of code that you can
reuse from page to page such as a table or a
copyright notice.
• Library Items are similar to Snippets but maintain a
relationship with the original, allowing you to
update multiple instances with a single change.
• Templates allow you to link multiple pages to one
single master.
© 2013 John Wiley & Sons, Inc. 14
1.1 Identify Your Site’s Purpose
Questions that might arise in discussing the
functionality and design of such a site include:
• Will the site be free? Will advertising need to be
included in the layout?
• Is there a target audience? What is the typical
occupation, sex, education, residence, race and
computer literacy of this audience?
• What user interactions might there be on site. For
example, can users submit recipes or simply browse
existing ones?
© 2013 John Wiley & Sons, Inc. 15
1.2 Identify Content Relevant to the Site’s Purpose
• Page content should serve a single specific
purpose. Your pages should contain content
designed to serve that purpose.
• Content must be helpful and of practical use.
Consider the format you are delivering your content
in.
• Organize your content by dividing it into chunks
and using headings, subheadings, lists, tables, and
images.
• Evaluate your sentence structure, and eliminate
grammar and typographical errors.
© 2013 John Wiley & Sons, Inc. 16
1.5 Development DecisionsWhen designing a website, take into account:
• Download Speed. The rise of broadband Internet connections has steadily increased but take account the experience of users who may not have the fastest connections. Remember that mobile devices may have slower connection speeds.
• Screen Resolution. The number of screen sizes is wide, and users are beginning to expect websites to function well at any size.
• Support for JavaScript, plug-ins and multimedia. Many modern web pages have features that are dependent on JavaScript and/or browser plugins such as Flash. Consider what happens if a user does not have these features.
© 2013 John Wiley & Sons, Inc. 17
1.6 Project Management Tasks and Responsibilities
There are differences between small projects and large ones, but there are commonalities worth discussing:
• Defining a project plan. A project plan might include assigning tasks and responsibilities to various team members, assigning due dates, and allocating resources.
• Planning and analysis. A website should have a reason for existing and serve the needs of users. The site creator should have a very good sense of this before moving further.
• Designing. You might start the design process with a sketch, and mockups done in a program such as Photoshop can convey color, type, and layout before moving into the realm of HTML/CSS.
© 2013 John Wiley & Sons, Inc. 18
1.6 Project Management Tasks and Responsibilities
• Building. Building a site involves organizing all the content into HTML (or a scripting language such as PHP), CSS and perhaps JavaScript. Additionally, a logical and usable navigation system (often referred to as information architecture) is needed.
• Testing. Common tests include checking for broken hyperlinks or missing images, checking page appearance on multiple browsers and platforms, checking for accessibility and readability.
• Site launching and maintenance. Deployment (or “launching”) is the final step and involves transferring site documents from a local or network system to a final destination or URL.
© 2013 John Wiley & Sons, Inc. 19
2.5 Flowcharts, Storyboards, and Wireframes
• Flowcharts provide a visual overview of how your
website is organized. A flowchart illustrates the
primary navigation within a site as well as the
relationships of pages.
• The term primary navigation relates to the site’s
hierarchy and can be defined as the level of
importance assigned to specific pages. Flowcharts
quickly and easily communicate the structure of a
site.
© 2013 John Wiley & Sons, Inc. 20
2.5 Flowcharts, Storyboards, and Wireframes
• Storyboards help you focus on page content and
provide a way to fine-tune navigation and site
structure.
• A storyboard consists of multiple pages based on
those defined in the flowchart.
• A storyboard could be created by hand as a sketch
or diagram, but is more often done digitally.
© 2013 John Wiley & Sons, Inc. 21
2.5 Flowcharts, Storyboards, and Wireframes
• A wireframe takes you one step closer to your HTML
and CSS designs but without committing to design
decisions such as images, colors, and fonts.
• Wireframes are typically created in black and white
or shades of gray, using placeholders.
• At this stage, organization of the content and the
features of the site are still a priority, the goal is to
allow time for feedback from clients or other
members involved with the project.
© 2013 John Wiley & Sons, Inc. 22
2.5 Flowcharts, Storyboards, and Wireframes
• At the wireframe stage, it is possible that your
original flowchart will need to be updated due to
changes along the way. You also may have strayed
from your original hierarchy, perhaps by dropping or
modifying elements in your navigation bar or other
changes.
• You can always compare the flowchart to the
wireframe and make sure pages are reflected but
another way to determine if the planned hierarchy
is being followed is by adding an element of
interactivity.
© 2013 John Wiley & Sons, Inc. 23
2.1 Website Design: Best Practices
• In HTML a pair of tags is referred to as an “element.”
• HTML elements define the structure of a page as
well as the content hierarchy (importance) and
examples include headings, lists, images, tables,
formatting such as the strong, small, and em tags
and even the HTML documents themselves.
• The HTML element is the most fundamental element
you will use. It is used to specify the beginning and
end of HTML in a document:
<html></html>
© 2013 John Wiley & Sons, Inc. 24
3.1 Elements of the Dreamweaver Interface
• In Dreamweaver’s panels and in your code, each color is referred to by a six-character code preceded by a pound sign.
• This code is called the hexadecimal code; it’s the system that HTML pages use to identify and use colors.
• You can reproduce almost any color using a unique hexadecimal code. For example, a lime green hexadecimal color is #9F3 as shown above.
© 2013 John Wiley & Sons, Inc. 25
4.4 Add Text to a Web Page• There are different ways to format your text. In the Design view,
click once after the sentence that reads, This is one sentence, and then press Shift+Enter (Windows) or Shift+Return (Mac OS) twice.
• This creates two line returns—you can see that each line return is created in your code by a <br> (break) tag as seen at right.
• When rendered in the browser, the <br> tag adds blank lines be-tween the sentences; however the sentences are technically within the same paragraph.
© 2013 John Wiley & Sons, Inc. 26
4.3 Create, Title, Name, and Save a Web Page
Although HTML is very flexible, there are a few file-naming restrictions (issues which may cause errors) and conventions (standard practice for designers and developers):
• Forbidden Characters. Stay away from using any of the following characters as they may cause problems in your file directory or when loading in a web browser: *&^%$#@!
• Filename extensions. The most common filename extension for files containing HTML is .html. A common abbreviation of this is .htm. You can use either interchangeably.
• Avoid whitespace in file names. In the early days of the web, a space in the file name such as “about us.html” could cause errors on certain web servers. This has largely been solved and web servers generally replace spaces with the characters %20. However, to be safe it is highly recommended that you avoid spaces in your file name.
© 2013 John Wiley & Sons, Inc. 27
4.3 Create, Title, Name, and Save a Web Page
• Avoid the forward slash “/” and the back slash “\” Using
either in your file names could potentially cause
problems on a web server or could be misinterpreted as
a path to a directory.
• Be consistent with upper or lowercase when naming files.
Many designers and developers have settled on using all
lowercase for their file names (for example
“contact.html” not “Contact.html” or “CONTACT.html”).
• Using “index.html” vs. “default.html” The “index.html”
convention has generally become the standard,
although “default.html” will likely work on most servers.
© 2013 John Wiley & Sons, Inc. 28
Lesson Summary
© 2013 John Wiley & Sons, Inc. 29
Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.