Transcript NP Dreamweaver - Deptford Township Schools

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
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
Tutorial 2: Planning and Designing a Successful Web Site
2
Objectives (cont’d)
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
Tutorial 2: Planning and Designing a Successful Web Site
3
Managing Web Site Projects
• Project manager
– Oversees the project and coordinates team efforts
– Creates a project plan
• Project plan outlines
– Project scope
– Phases (planning and analysis, design, building,
testing, implementation) and their deliverables
– Tasks
– Due dates
– Resource allocations
Tutorial 2: Planning and Designing a Successful Web Site
4
Creating a Plan for a New Web Site
• Determine specific goals, purpose, target audience,
and expectations for the site
• Ensure a successful project and satisfied client
– Make sure client is aware of what to expect
– Communicate effectively and frequently with client
throughout the process
Tutorial 2: Planning and Designing a Successful Web Site
5
Determining the Site Goals and
Purpose
• Identify the primary goals for the Web site
– Use active voice and action verbs
– Prioritize the goals
– Collaborate with the client
• Based on the goals, develop a one-sentence
statement of the purpose, which defines your vision
and aspirations for the site
Tutorial 2: Planning and Designing a Successful Web Site
6
Determining the Site Goals and
Purpose
• Sample site goals and purpose
Tutorial 2: Planning and Designing a Successful Web Site
7
Identifying the Target Audience
• Create a user profile to help determine
characteristics of the group of people you are trying
to reach
– Geographic location
– Age
– Primary language
– Gender
– Ethnic background
– Education level
– Unifying characteristics
– Economic situation
• Note: A broad target audience can be more
restrictive than a narrow one
Tutorial 2: Planning and Designing a Successful Web Site
8
Conducting Market Research
• Involves careful investigation and study of data
(often by using a search engine) about target
audience’s preferences
– Technical information: limitations of effective site
– Spending habits: potential profitability
– Culture and customs: colors, symbols, fashions,
styles for effective communication
• Includes evaluating products or services of
competitors
Tutorial 2: Planning and Designing a Successful Web Site
9
Creating End-User Scenarios
• Help you envision actual conditions that end users
may experience while visiting the Web site
• Enable you to anticipate end users’ needs and build
a Web site that incorporates these factors into its
design
Tutorial 2: Planning and Designing a Successful Web Site
10
Creating Information Architecture
• Process of determining what you need a site to do,
then constructing a framework to accomplish your
goals
• Applies principles of architectural design and library
science to Web site design; provides blueprint for
Web page arrangement, Web site navigation, and
page content organization
• Basic process
– Construct information categories
– Draw a flowchart
– Organize available information
Tutorial 2: Planning and Designing a Successful Web Site
11
Creating Categories for Information
• Provide structure for the information in the Web site
• Should be based on site goals and information
gathered during preliminary planning stages
• Are used to create main navigation system
– Interface that visitors use to move through the site
– Appears in the same place on every page
Tutorial 2: Planning and Designing a Successful Web Site
12
Creating a Flowchart
• Visual representation of hierarchical structure of
pages within the site
• Shapes represent pages; lines represent their
connection
• Main information categories become the major
branches of the flowchart; subcategories become
sub-branches
Tutorial 2: Planning and Designing a Successful Web Site
13
Creating a Flowchart
• Sample Web site flowchart
Tutorial 2: Planning and Designing a Successful Web Site
14
Gathering and Organizing
Information
• Err on the side of excess when gathering information
• Organize page content logically
Tutorial 2: Planning and Designing a Successful Web Site
15
Designing a Web Site
•
•
•
•
•
•
Create a site concept and metaphor
Consider accessibility issues
Select colors, fonts, graphic style, and graphics
Sketch the layout
Check the design for logic
Use styles to keep aesthetic design of pages and
page elements separate from content
Tutorial 2: Planning and Designing a Successful Web Site
16
Creating a Site Concept
• General underlying theme that unifies the elements
of a site and contributes to the look and feel
• Look for common underlying themes in artwork and
Web sites that appeal to the target audience
• Make a list of words that:
– Describe what you would like the site to convey
– Reinforce site goals
– Communicate something to the target audience
Tutorial 2: Planning and Designing a Successful Web Site
17
Creating a Metaphor
• Visual extension of site concept that helps create a
unified site design
• Does not have to be concretely represented
• Helps shape site design by providing foundation for
color choice, font choice, graphics choice, and layout
Tutorial 2: Planning and Designing a Successful Web Site
18
Considering Accessibility Issues
• Quality and ease of use of a Web site by people who
use assistive devices or people with disabilities
• Accessibility resources
– www.section508.gov
– www.adobe.com (search for keyword
“accessibility”)
– www.w3.org/WAI
– Activate accessibility dialog boxes within
Dreamweaver
Tutorial 2: Planning and Designing a Successful Web Site
19
Selecting Colors
• Use RGB color system when creating or saving
graphics for the Web because monitors work with
light
• Dreamweaver displays the hexadecimal code for
colors
• RGB color system
Tutorial 2: Planning and Designing a Successful Web Site
20
Selecting a Color Palette
•
•
•
•
•
Keep it simple
Include three to six colors per site
Consider the mood you want to create
Keep the target audience in mind
Choose a palette that complements your site
metaphor
• Remember accessibility
Tutorial 2: Planning and Designing a Successful Web Site
21
Selecting Fonts
• Generic font families (categories of typefaces): serif,
sans serif, mono
• Font color, size, and style
• Basic strategies
– Less is more
– Convert headings to images
– Consider what you are trying to convey
– Consider accessibility
Tutorial 2: Planning and Designing a Successful Web Site
22
Selecting Fonts (cont’d)
• Dreamweaver arranges fonts into groups, which
provide designers with the best chance for achieving
the desired look for the page
• Default font groups in Dreamweaver
Tutorial 2: Planning and Designing a Successful Web Site
23
Choosing a Graphic Style and
Graphics
•
•
•
•
•
Be consistent
Design with purpose
Consider size
Consider the target audience
Support your concept and metaphor
Tutorial 2: Planning and Designing a Successful Web Site
24
Determining the Layout
• Size of page structure and content: fixed or flexible
• Placement of navigation system, text, logo, artwork
• Goals
– Support site goals and metaphor
– Easy to follow and appeal to target audience
– Consistent
– Conform to basic tenants of sound artistic design
• Balance
• Unity
• Rhythm
Tutorial 2: Planning and Designing a Successful Web Site
25
Determining the Layout (cont’d)
• Balance
– Symmetrical vs. asymmetrical
– Use of white space
– The rule of thirds
• Unity
– Relationship of individual objects as they relate to
the composition of the whole page
• Rhythm
– Achieved by repetition or alternation of objects or
elements in the page
Tutorial 2: Planning and Designing a Successful Web Site
26
Determining the Layout (cont’d)
• Wireframes
• Storyboards (or comps)
• Sample layout sketches
for a Web site
Tutorial 2: Planning and Designing a Successful Web Site
27
Checking the Design for Logic
• 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 for the site?
Tutorial 2: Planning and Designing a Successful Web Site
28
Creating a New Site
• Set up the site definition
– Local information
– Remote information
Tutorial 2: Planning and Designing a Successful Web Site
29
Creating a Local Site Definition
• Requirements
– Site name
– Local root folder
• Recommendations for folder names and file names
– Do not use spaces and symbols (except hyphens
and underscores)
– Use all lowercase letters
• Keep local root folder organized by setting up
additional folders before beginning work on a site
Tutorial 2: Planning and Designing a Successful Web Site
30
Creating a Local Site Definition
• Sample local site definition
Tutorial 2: Planning and Designing a Successful Web Site
31
Creating a Remote Site Definition
• Enables you to put the Web site on a Web server so
that it can be seen on the Web
• Set FTP options
• Sample remote site definition
Tutorial 2: Planning and Designing a Successful Web Site
32
Adding a New Page
• Select a page category
• Select type of page to create
• Options:
– Create a page from scratch
– Use pre-built Dreamweaver page design
• New Document dialog box
Tutorial 2: Planning and Designing a Successful Web Site
33
Saving New Pages
• Important to save all pages in the local root folder for
the Web site
• Saved page in the Document window
Tutorial 2: Planning and Designing a Successful Web Site
34
Setting Page Titles
• Use the name of the Web site and a descriptive word
or phrase for each page so that users can quickly
determine the overall page content
• Page title set for the home page
Tutorial 2: Planning and Designing a Successful Web Site
35
Resaving Pages
• Dreamweaver has several built-in measures to help
keep your work safe
– Prompts you to save changes
– Saves a copy of elements in a page that are not
yet part of the site
• Save frequently—at least every ten minutes—and
whenever you have finished modifying a page
Tutorial 2: Planning and Designing a Successful Web Site
36
Reviewing HTML Tags
• Hypertext Markup Language (HTML) uses a series
of tags to tell a browser what to do with the
information on a Web page and how to display it
• Basic HTML tags
Tutorial 2: Planning and Designing a Successful Web Site
37
Reviewing HTML Tags
• Sample HTML code for a home page
Tutorial 2: Planning and Designing a Successful Web Site
38
Setting Page Properties
• Apply to an entire page rather than to only an
element in the page
• Six categories
– Appearance (CSS)
– Appearance (HTML)
– Links (CSS)
– Headings (CSS)
– Title/Encoding
– Tracing Image
• Recommendation: Separate the look from the
content
Tutorial 2: Planning and Designing a Successful Web Site
39
Setting Page Properties
• Completed Appearance (CSS) category in the Page
Properties dialog box
Tutorial 2: Planning and Designing a Successful Web Site
40
Setting Page Properties
• Completed Links (CSS) category in the Page
Properties dialog box
Tutorial 2: Planning and Designing a Successful Web Site
41
Setting Page Properties
• Completed Headings (CSS) category in the Page
Properties dialog box
Tutorial 2: Planning and Designing a Successful Web Site
42
Setting Page Properties
• Home page with the page properties set
Tutorial 2: Planning and Designing a Successful Web Site
43
Previewing a Site in a Browser
• Preview the Web site in all browsers you plan to
support
• May need to add a browser to Dreamweaver
Preview list
Tutorial 2: Planning and Designing a Successful Web Site
44
Previewing a Site in a Browser
• Preferences dialog box
Tutorial 2: Planning and Designing a Successful Web Site
45
Previewing a Site in a Browser
• Add Browser dialog box
Tutorial 2: Planning and Designing a Successful Web Site
46
Uploading a Web Site
to a Remote Location
• View the site over the Web as the end users will see
it and make sure it displays correctly
• All files that the remote version of a Web site will use
must be located on the Web server
• Be sure to use the Put File(s) button on the Files
panel toolbar, not the Get File(s) button, which may
overwrite current files with older ones
• Files panel expanded with Remote view and Local
view
Tutorial 2: Planning and Designing a Successful Web Site
47
Previewing a Remote Site on the
Web
• Explore the remote site using a browser to check if
the page looks the same on the Web as in
Dreamweaver
– Only difference should be the site address
Tutorial 2: Planning and Designing a Successful Web Site
48