Transcript DWCS5 Tutorial 02x

Tutorial 2
Planning and Designing
a Successful Web Site
Objectives
• Session 2.1
– Determine the site goals
– Identify the target audience
– Conduct market research
– Create end-user scenarios
New Perspectives on Adobe Dreamweaver CS5
2
Objectives
• Session 2.2
– Design the information architecture
– Create a flowchart and site structure
– Create a site concept and metaphor
– Design the site navigation system
– Develop the aesthetic concept
New Perspectives on Adobe Dreamweaver CS5
3
Objectives
• Session 2.3
– Create a site definition for a new site
– Add pages to a site
– Review basic HTML tags
– Set page properties
– Preview a site in a Web browser
– Upload a site to a remote server and preview it on
the Web
New Perspectives on Adobe Dreamweaver CS5
4
Session 2.1 Visual Overview
Planning a Web Site Phase I
New Perspectives on Adobe Dreamweaver CS5
5
Managing Web Site Projects
• Project Manager
– Oversees the project and coordinates the efforts
of various team members
– Creates the project plan
• Planning and analysis
• Designing
• Building
• Testing
• Implementation/launching
New Perspectives on Adobe Dreamweaver CS5
6
Creating a Plan for a New Web Site
• Determining the Site Goals and Purpose
– Brainstorm with the client
– Create list of goals you can think of for the site
– Place list of goals in order of importance
– Review the list
– Combine goals where possible
– Reprioritize goals list, if necessary
– Develop a one-sentence purpose statement
New Perspectives on Adobe Dreamweaver CS5
7
Creating a Plan for a New Web Site
• Identifying the Target Audience
– The target audience is the group of people whom
you would most like to visit the site
– Create a user profile
• Information gathered from questions answered
by the client which include:
–Age range of the user (target audience)
–Gender
New Perspectives on Adobe Dreamweaver CS5
8
Creating a Plan for a New Web Site
• Information gathered from questions answered by
the client which include:
– Education level
– Economic situation
– Geographic location
– Primary language
– Ethnic background
– Other unifying characteristics
– Knowing the target audience helps when choosing
colors, fonts, and wording for the site
New Perspectives on Adobe Dreamweaver CS5
9
Creating a Plan for a New Web Site
• Conducting Market Research
– Market research = careful investigation/study of the
target audience’s preferences for a product or service
– Use a search engine to find data about the target
audience’s habits, interests, and likes
• bing, google, yahoo
New Perspectives on Adobe Dreamweaver CS5
10
Creating a Plan for a New Web Site
– Look at Web sites that the target audience may visit
• Pay attention to the graphics, colors, symbols, and
slang terms used
• Study the page layouts and the navigation systems
• Look for anything unique about the sites
• Creating End-User Scenarios
– Imagined scenarios in which the target audience
might visit a Web site
– Helps to envision actual conditions visitors will
experience
New Perspectives on Adobe Dreamweaver CS5
11
Session 2.2 Visual Overview
Planning a Web Site Phase II
New Perspectives on Adobe Dreamweaver CS5
12
Creating Information Architecture
• Overview
– Determine what a site needs to do
– Construct a framework that accomplishes the goals
• Creating Categories for Information
– Categories provide structure for a Web site
– Used to create the main navigation system
– Appears in the same place on every page in the site
New Perspectives on Adobe Dreamweaver CS5
13
Creating Information Architecture
– Show visitors what types of information appear in
the site
– Should be based on site goals and information
gathered during research
– Can be divided into subcategories
• Subcategories should be arranged in
hierarchical order
New Perspectives on Adobe Dreamweaver CS5
14
Creating Information Architecture
– Best way to present categories and subcategories
is in standard outline format
New Perspectives on Adobe Dreamweaver CS5
15
Creating Information Architecture
• Creating a Flowchart
– A flowchart is a diagram of geometric shapes
connected by lines that show steps in a sequence
– Created from the information category outline
• Main categories become branches
• Subcategories become sub-branches
• Shapes can be used to designate different types
of pages
New Perspectives on Adobe Dreamweaver CS5
16
Creating Information Architecture
New Perspectives on Adobe Dreamweaver CS5
17
Creating Information Architecture
• Gathering and Organizing Information
– Next step is to gather and organize all possible
sources of information
– Better to have more raw material than might be
needed
• The material collected will be used to create
content for the Web pages
• Use brochures, fliers, press releases, reviews,
and articles to gather information
New Perspectives on Adobe Dreamweaver CS5
18
Designing a Web Site
• “Look and Feel”
– The way all elements of the site design interact to
create an experience for the user
– Keep aesthetic design of pages and page elements
separate from content
• Creating a Site Concept and Metaphor
– Site Concept
• General underlying theme that unifies the
various elements of a site
• Contributes to the site’s look and feel
New Perspectives on Adobe Dreamweaver CS5
19
Designing a Web Site
• Review artwork and Web sites that appeal to
target audience
–Look for common underlying themes
• Make a list of words that describes what the
site will be designed to convey
• Create the concept
– Metaphor
• Comparison in which one object, concept, or
idea is represented as another
New Perspectives on Adobe Dreamweaver CS5
20
Designing a Web Site
– Should be a visual extension of the site concept
– Does not have to be concretely represented in site
• Considering Accessibility Issues
– Accessibility
• Quality and ease of use of a Web site by people
with disabilities or by those who use assistive
devices
New Perspectives on Adobe Dreamweaver CS5
21
Designing a Web Site
• Section 508, Federal Rehabilitation Act
–All governmental agencies and public
colleges and universities must make their
electronic and information technology
accessible to individuals with disabilities
• Information to help develop accessible Web
sites
–www.adobe.com
–www.w3.org/WAI
New Perspectives on Adobe Dreamweaver CS5
22
Designing a Web Site
• Selecting Colors
– Colors set the tone of the Web site
– Subtractive color system
• Cyan, yellow, and magenta are primary colors
• Other colors created by adding pigment and removing
light
– Additive color system
• Red, green, and blue are primary colors
• Also called the RGB system
• New colors created by adding varying amounts of light
New Perspectives on Adobe Dreamweaver CS5
23
Designing a Web Site
• Monitors work with light to create colors—the additive
RGB color system
• When creating/saving graphics the Web, use RGB color
– Hexadecimal color codes
• Six digit numbers - #RRGGBB
– RR represents the red value
– GG represents the green value
– BB represents the blue value
– Uses digits 0-9 to represent values 0-9 and letters A-F
to represent decimal values 10-15
New Perspectives on Adobe Dreamweaver CS5
24
Designing a Web Site
– Color Concepts and Guidelines
• Keep it simple
• Include three to six colors per site
• Consider the mood you want to create
• Keep the target audience in mind
• Look to other works of art for inspiration
• Remember accessibility when choosing colors
New Perspectives on Adobe Dreamweaver CS5
25
Designing a Web Site
• Selecting Fonts
– Font
• Set of letters, number, and symbols in a unified
typeface
• Conveys subtle information
• Creates an impression about the content before
it is read
New Perspectives on Adobe Dreamweaver CS5
26
Designing a Web Site
• Three typefaces
–Serif
»Delicate, horizontal line finishes the main
stroke of each character—serif font
generic
–Sans serif
font
»Serifs are absent—sans serif font
families
–Mono (short for monospaced)
»Each letter takes up exactly the same
width in the line—monospaced font
New Perspectives on Adobe Dreamweaver CS5
27
Designing a Web Site
New Perspectives on Adobe Dreamweaver CS5
28
Designing a Web Site
• Font color
–Color that is applied to the font
• Font size
–Relative – xx-small to xx-large
–Specific – font sizes are fixed
• Font style
–Italic
–Bold
–Underline
New Perspectives on Adobe Dreamweaver CS5
29
Designing a Web Site
• Choosing a Graphic Style and Graphics
– Graphic style
• The look of the graphic elements in the site
– Using a consistent design for all graphics is key to
developing a cohesive, well-made site
New Perspectives on Adobe Dreamweaver CS5
30
Designing a Web Site
• Determining the Layout
– Layout is the position of elements
• Page structure and content--fixed or flexible
size
• Location of navigation system, text, logo,
artwork, etc.
• Layout should support site goals and metaphor
• Layout should be easy for the user to follow
• Layout should fit the target audience
New Perspectives on Adobe Dreamweaver CS5
31
Designing a Web Site
• Layout should be consistent across all pages
• Layout should conform to basic tenets of sound
artistic design
–Balance
–Unity
–Rhythm
– Balance and Space
• Balance is the feeling of equilibrium when
looking at a page as a whole
New Perspectives on Adobe Dreamweaver CS5
32
Designing a Web Site
–Symmetrical Balance
»Distributes visual weight in a page evenly
around the central horizontal and vertical
axes of the page
–Asymmetrical (Informal) Balance
»Visually disproportionate objects are
distributed so that the visual weights of
the objects achieve balance with each
other instead of with the page axes
New Perspectives on Adobe Dreamweaver CS5
33
Designing a Web Site
»It is more visually appealing because it
better incorporates white space—the
empty space on a page
• Rule of Thirds
–Most interesting compositions are those in
which the strongest element is off center
»Divide page into thirds horizontally and
vertically
»Place objects in the page on the lines
New Perspectives on Adobe Dreamweaver CS5
34
Designing a Web Site
»No object should take up more than 2/3
of a page, horizontally and vertically
– Rhythm and Unity
• Rhythm is achieved by repetition or alternation
of elements in a page
–Color repeated in different places in the
page
New Perspectives on Adobe Dreamweaver CS5
35
Designing a Web Site
• Unity
–Relationship of individual objects as they
relate to composition of the whole page
–Using one graphic style and repeating color
throughout the site, as well as creating
balance and symmetry between objects,
help foster unity within the site
New Perspectives on Adobe Dreamweaver CS5
36
Designing a Web Site
–Wireframes
»Barebones page mockups created with
graphic software
»Contain only rough placeholder images
–Comps and Storyboards
»Fully developed, detailed drawings that
provide a preview of the final design
New Perspectives on Adobe Dreamweaver CS5
37
Designing a Web Site
• Checking the Design for Logic
– User should be able to navigate through site easily
– Look at all elements of the design plan
• Is the navigation system easy to follow?
• Does the graphic style support the site
metaphor?
• Do the individual elements flow together to
create a consistent look?
New Perspectives on Adobe Dreamweaver CS5
38
Session 2.3 Visual Overview
New Perspectives on Adobe Dreamweaver CS5
39
Creating a New Site
• Creating the Local Site Files
– Need a site name and a local site folder
• Use all lowercase letters when naming files and
folders
• Set up additional folders before work begins on
the new site
• As new files are created, save them in the
appropriate folders
New Perspectives on Adobe Dreamweaver CS5
40
Creating a New Site
New Perspectives on Adobe Dreamweaver CS5
41
Creating a New Site
– Setting Up Live Servers
• Remote Site Definition
–Information stored on local computer that
tells Dreamweaver where the remote server
is located and how to connect to it
–Allows the Web site to be put on a Web
server so it can be seen on the Web
–Access is usually through an FTP site
New Perspectives on Adobe Dreamweaver CS5
42
Creating a New Site
–FTP Options
»Server Name
»FTP Address
»Port
»Root Directory
»Username
»Password
»Use passive FTP
New Perspectives on Adobe Dreamweaver CS5
43
Creating a New Site
»Use IPv6 transfer mode
»Use Proxy, as defined in Preferences
»Use FTP performance optimization
»Use alternative FTP move method
»Maintain synchronization information
»Automatically upload files to server on
save
»Enable file check in and check out
New Perspectives on Adobe Dreamweaver CS5
44
Creating a New Site
New Perspectives on Adobe Dreamweaver CS5
45
Creating and Saving Pages
in a Defined Site
• Adding a New Page
– New pages should be located in the local root
folder
– Select a page category and type of page to create
• Saving New Pages
– Save As command opens the Save As dialog box to
the local root folder for the Web site
– Give the page a filename
New Perspectives on Adobe Dreamweaver CS5
46
Creating and Saving Pages
in a Defined Site
New Perspectives on Adobe Dreamweaver CS5
47
Creating and Saving Pages
in a Defined Site
New Perspectives on Adobe Dreamweaver CS5
48
Creating and Saving Pages
in a Defined Site
• Setting Page Titles
– The name that appears in the browser title bar
– Use the name of the Web site and a descriptive
word or phrase for each page
New Perspectives on Adobe Dreamweaver CS5
49
Creating and Saving Pages
in a Defined Site
• Resaving Pages
– If you edit a page and have not saved it,
Dreamweaver will prompt you to save when you
exit the program
– If you use an element such as a graphic and it is
not part of the site, Dreamweaver saves a copy of
the element in the local root folder
– Save frequently
New Perspectives on Adobe Dreamweaver CS5
50
Reviewing HTML Tags
• Most common language is Hypertext Markup
Language (HTML)
– HTML uses a series of tags to tell the browser
what to do with information on a Web page and
how to display it
– Basic understanding of HTML is important
• Tags almost always appear in sets
• Each tag is included within angled brackets,
< and >
New Perspectives on Adobe Dreamweaver CS5
51
Reviewing HTML Tags
• Opening tags contain any parameters or
attributes that are to be applied
• Closing tags always begin with a forward slash /
• Required HTML tags
–HTML
–head
–title
–body
New Perspectives on Adobe Dreamweaver CS5
52
Reviewing HTML Tags
New Perspectives on Adobe Dreamweaver CS5
53
Reviewing HTML Tags
New Perspectives on Adobe Dreamweaver CS5
54
Setting Page Properties
• Page Properties
– Attributes that apply to a whole page rather than
to an element within the page
– Six Categories
• Appearance (CSS)
 Headings (CSS)
• Appearance (HTML)
 Title/Encoding
• Links (CSS)
 Tracing Image
New Perspectives on Adobe Dreamweaver CS5
55
Setting Page Properties
– Appearance (CSS) category
• General page properties
–Default text
–Background
–Margin attributes
• Different Appearance properties
–Text settings
–Background settings
–Margin settings
New Perspectives on Adobe Dreamweaver CS5
56
Setting Page Properties
– Links (CSS) category
• Contains page properties for hyperlinked text
– Heading (CSS) category
• Sets font, font size, and font color attributes for
headings
– Title/Encoding category
• Sets page title and document encoding type
–Document encoding controls how digital
codes will display characters in Web page
New Perspectives on Adobe Dreamweaver CS5
57
Setting Page Properties
– Tracing Image category
• Enables an image to be selected as a guide for
re-creating a design or mock up that was
originally created in a graphics program
New Perspectives on Adobe Dreamweaver CS5
58
Setting Page Properties
New Perspectives on Adobe Dreamweaver CS5
59
Setting Page Properties
New Perspectives on Adobe Dreamweaver CS5
60
Setting Page Properties
New Perspectives on Adobe Dreamweaver CS5
61
Previewing a Site in a Browser
• Preview a Web site in all browsers that a user might
use to view the site on the Web
• Dreamweaver Preview List
– Designate the two browsers considered most
important as the primary and secondary browsers
– Dreamweaver defaults to the primary browser
New Perspectives on Adobe Dreamweaver CS5
62
Previewing a Site in a Browser
New Perspectives on Adobe Dreamweaver CS5
63
Uploading a Web Site
to a Live Server
• Upload the site to either a Web server or to a
network server
– Enables you to view the Web site over the Web as
the end users will see it
– All files that the remote version of a Web site will
use must be located on the Web server
• Dependent Files
–Files that are used in the Web page, e.g.,
graphic files
New Perspectives on Adobe Dreamweaver CS5
64
Uploading a Web Site
to a Live Server
New Perspectives on Adobe Dreamweaver CS5
65
Uploading a Web Site
to a Live Server
• Previewing a Remote Site on the Web
– Open the Web site in the browser
– Check all pages
– Make any necessary adjustments
New Perspectives on Adobe Dreamweaver CS5
66