Lesson 1: Dreamweaver CS6 Jumpstart - Cerritos …web.cerritos.edu/pnguyen/SitePages/cis160/notespdf/lesson01.pdf · Lesson 1: Dreamweaver CS6 Jumpstart Introduction to Adobe Dreamweaver

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



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.



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.



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.



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.



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.



• 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.


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.


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.



• 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.


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.


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.


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?


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.


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.


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.


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.


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.



• 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.



• 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.



• 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.


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>



• 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.


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.


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.


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.


Lesson Summary


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.

Documents

Lesson 1: Dreamweaver CS6 Jumpstart - Cerritos …web.cerritos.edu/pnguyen/SitePages/cis160/notespdf/lesson01.pdf · Lesson 1: Dreamweaver CS6 Jumpstart Introduction to Adobe Dreamweaver