Dreamweaver MX

1
Tutorial 2 Planning and Designing a Successful
Web Site
2
Planning and Designing a Successful Web Site

• In this tutorial, you will
• Determine the site goals
• Identify the target audience
• Conduct market research
• Create end-user scenarios
• Design the information architecture

3
Introducing Dreamweaver MX

• In this Chapter, you will (cont)
• Create a flow chart and site structure
• Create a site concept and metaphor
• Design the site navigation structure
• Develop the aesthetic concept for the site
• Create a new site

4
Creating a Plan for a New Web Site

• First you must determine the goals, audience and
  expectations for the site.
• Determining the site goals
• Brainstorm to determine what the goals might be
  for instance to sell a product, provide
  information about the product or give help.
• Sort the goals into order of importance.
• Review and refine the list, combining goals if
  possible.
• Focus on the first four or five in the site
  design.

5
Creating a Plan for a New Web Site
Sample goals for the Catalyst Web site
6
Creating a Plan for a New Web Site

• Identifying the target audience
• Set up a list of questions to allow you to
  profile the characteristics of the site users
  (user profile).
• Use data gathered from any previous Web sites.
• Use the determined profile to make content
  decisions for the site.
• Focus the design to match the needs of the user
  profile audience.

7
Creating a Plan for a New Web Site
General user profile questions
8
Creating a Plan for a New Web Site
General user profile questions
9
Creating a Plan for a New Web Site
Sample user profile for the Catalyst site
10
Creating a Plan for a New Web Site

• Conducting Market Research
• Look at the target audiences preferences for your
  product or service.
• Evaluate similar products and their Web sites.
• Use a search engine like Altavista or Google to
  locate data about the target audience.
• Review the information to get an understanding of
  the target audiences habits, etc.
• Explore sample sites that the target audience
  frequents, looking at graphics, colors, design,
  etc.

11
Creating a Plan for a New Web Site
Sample target audience information
12
Creating a Plan for a New Web Site

• Creating End-User Scenarios
• An end-user scenario is an imagined access to a
  Web site.
• Scenarios help evaluate in what situations
  someone might access the Web site and to help
  them get the information they need.
• Scenarios help hone the design information and
  create a more user-friendly site.
• A few hours of planning can save hours of
  redesign.

13
Creating a Plan for a New Web Site
Sample End-user scenarios
14
Creating a Plan for a New Web Site
Sample End-user scenarios (cont)
15
Information Architecture

• Information Architecture determining what the
  site should do and creating a framework to
  accomplish it.
• It should
• Provide a blueprint for page arrangement
• Set up site navigation
• Provide page content organization

16
Information Architecture

• The Web site should be organized into categories
  that will provide the main navigation paths.
• The navigation system will appear on every page
  of the site to facilitate movement through the
  site.
• The categories are like the subject sections in a
  library.
• You should have no more than 5 main categories.
• Like a library, you can also include
  subcategories.

17
Information Architecture
Sample Web site categories
18
Information Architecture

• The next step is to create a flow chart from the
  category outline.
• A flow chart represents the outline in picture
  form using geometric shapes and connector lines.
• In this flow chart, the shapes represent the
  pages and the lines the interface between them.

19
Information Architecture
A sample flow chart with a shape key
20
Information Architecture

• Now you need to gather and organize the content
  for each page of the Web site.
• There are many sources to use when gathering
  information, such as
• Company and management team interviews
• Promotional materials
• Company documentation including logos and
  graphics
• Outside research sources

21
Designing a Web Site

• You will need to set up a site concept (unifying
  theme) for the Web site.
• Make a list of words that reinforce the site
  goals and say what you want the site to convey.
• Review the artwork and Web sites that appeal to
  your target audience.
• Then create a metaphor to use to represent your
  site concept such as representing fluidity with
  lines and colors to represent a river.

22
Designing a Web Site

• There are two main types of Web page design
  software
• Page-centric design which concentrates on the
  pages and links them afterward and
• Site-centric design that requires designing the
  overall site before working on the individual
  pages.
• Dreamweaver is a site-centric design package
  which allows changes at the site level and is
  more comprehensive.

23
Designing a Web Site

• In designing the site, you will need to consider
  Accessibility issues so that people with
  disabilities or assistive devices can also use
  the site.
• Dreamweaver has Accessibility Dialogue boxes that
  can assist in this.
• There are also many Web sites with information,
  such as the Macromedia or World Wide Web
  Consortium sites.

24
Designing a Web Site

• You will also need to select colors for the site
• Colors set the tone of the site and create an
  emotional response from the user.
• How colors interact can be shown by the RGB (red,
  green, blue) color wheel.
• Color can be used for emphasis or to
  differentiate different categories of
  information, for instance
• You should keep your color selection simple and
  pleasing, using no more that 3 to 6 colors per
  site.
• Use your color choices to enhance the mood you
  desire.

25
Designing a Web Site
The RGB Color System
26
Designing a Web Site
A sample color Palette (Catalyst site)
27
Designing a Web Site

• You will also need to select colors for the site
  (cont)
• Colors should be defined by name and by their
  hexadecimal color codes.
• The Web Safe Color Palette of 216 colors was
  created to add Web site designers.
• The hexadecimal color code is broken down into
  RRGGBB where RR is the amount of red, GG is the
  amount of green and BB is the amount of blue in
  the color.

28
Designing a Web Site

• You must also select the fonts or typefaces to be
  used in the site.
• There are three main categories or typefaces of
  fonts to choose from
• Serif for example - Times New Roman
• Sans-serif - for example Helvetica
• Mono for example Courier New

29
Designing a Web Site

• Selecting a font also means selecting a size,
  color and style (such as underlined, bold, or
  italic).
• When selecting a font, keep in mind
• Less is more normally two is good, one for the
  body and another for headings.
• Convert heading to images If you create an
  image from your text, the look will not change on
  any of the users computers, whether or not they
  have the correct font on their computer.

30
Designing a Web Site

• When selecting a font, keep in mind (cont)
• Consider what you are trying to convey - Fonts
  elicit responses and should be consistent with
  the site concept and metaphor.
• Consider accessibility some users may have
  trouble reading some fonts or sizes of text.
• Links are often done in different colors to show
  status such as unused, active or visited.

31
Designing a Web Site
Sample Font choices (Catalyst site)
32
Designing a Web Site

• Graphics add interest and personality. Graphics
  include images, photos, buttons, logos, etc.
• To create a consistent cohesive site, the
  graphics should all follow the same style
• Be consistent
• Add graphics with a purpose
• Reduce graphics to smallest possible size
• Consider your audiences computer capabilities
• Reinforce your concept and metaphor

33
Designing a Web Site

• With all of your elements (color, font, graphics,
  etc) selected, sketch out the layout of each
  page.
• Remember the site goals and metaphor.
• Consider ease and appeal.
• Do a layout sketch and then a comp (comprehensive
  drawing)
• When the comps are complete, you need to check
  your site design, ensuring all of the goals are
  met, the site is consistent and navigation is
  easy.

34
Designing a Web Site
Sample layout sketches (Catalyst site)
35
Creating a New Site

• With the site design finished, the next step is
  to create a local site definition.
• You will need a site name and a local root
  folder.
• You will use the Dreamweaver New Site option
  under Site on the main menu bar.
• Fill in the information in the dialog box such
  as site name, location of local root folder, etc.

36
Creating a New Site
Creating the local site definition (Catalyst site)
37
Creating a New Site

• You will also want to create the remote site
  definition defining where the Web site will be
  located and how to connect to it.
• The process to set the remote site definition is
  basically the same as setting the local.
• Normally remote access will be through FTP access.

38
Creating a New Site

• There are several FTP options that you will need
  to set
• The full name of the FTP host (available from the
  host provider)
• Host directory location of files on the Web
  server (available from the host provider)
• Login name and Password
• Use Passive FTP a server parameter (from host)
• Use Firewall security option
• Check In/Out enables multiple users

39
Creating a New Site
Remote Site Definition (Catalyst site)
40
Adding Pages to a Defined Site

• To add pages to your defined site, use the New
  File command on the File menu in the Site panel.
• This will automatically associate the page with
  the site.
• Each page will need a unique filename.
• The home page should have the filename index.htm.

41
Adding Pages to a Defined Site
New Page command in the Site panel
42
Adding Pages to a Defined Site

• Saving your pages frequently as you work prevents
  losing data.
• If you try to exit Dreamweaver or close a page,
  you will be prompted to save it.
• All files, including graphics should be saved to
  the root folder to prevent later complications.
• The root folder should be organized with
  subfolders so that it is organized, for instance
  by page or by file type (html, graphics, etc.)

43
Adding Pages to a Defined Site

• Once a page has been created, you will need to
  set its properties
• Page title appears in the browser title bar
• Background a color or image (or both)
• Colors text and hyperlinks (text default is
  black, visited/active links default is the
  browsers default color)
• Margins determines where page content is placed
• Document encoding how digital codes display
• Tracing image allows you to select an image as
  a guide for the layout

44
Adding Pages to a Defined Site
Page properties Dialog Box
45
Adding Pages to a Defined Site
Page properties Dialog Box
46
Reviewing the HTML Tags

• The most common language of the Web is Hypertext
  Markup Language (HTML)
• HTML
• Can be transferred across different computers and
  operating systems.
• Uses a series of tags to tell the browser how to
  display the Web page.
• Tags usually appear in sets of two (opening and
  closing tags) and are enclosed within .

47
Reviewing the HTML Tags

• HTML (Cont)
• The closing tag starts with a /.
• Some tags are required HTML, head, title, and
  body.
• Other tags in the body format the content.
• Should be reviewed after it is created by
  Dreamweaver.

48
Reviewing the HTML Tags
Basic HTML Tags
49
Reviewing the HTML Tags
HTML Code for the Catalyst Home Page
50
Reviewing the HTML Tags
Using Code and Design Views to copy page
properties Step 1
51
Reviewing the HTML Tags
Using Code and Design Views to copy page
properties Step 2
52
Previewing a Site in a Browser

• Different browsers will often display a Web site
  differently.
• To see how a Web site will look to all of your
  users, you should preview it in several browsers.
• Dreamweaver will allow you to assign both a
  primary and secondary browser.
• You can preview a page using the Preview in
  Browser option of File on the Site menu bar.

53
Previewing a Site in a Browser
Setting up a browser using the Preferences Dialog
Box
54
Previewing a Site in a Browser
Catalyst Home page previewed in Internet Explorer
55
Uploading a Web Site to a Remote Location

• Once pages are completed, they should be uploaded
  to your remote site so you can view them .
• To upload
• Connect to the remote server using the Connects
  button on the Site panel
• Select all files to be uploaded from the local
  root folder
• All dependent files must also be uploaded
• Use the Put Files button on the Site panel
  toolbar
• Disconnect using the Disconnects button

56
Uploading a Web Site to a Remote Location
Site panel with Remote and Local Views Displayed
57
Uploading a Web Site to a Remote Location
Catalyst Home Page in Explorer, viewed over the
Web
58
Tutorial Summary

• You should now be able to
• Understand the basic steps in designing a Web
  site
• Design the information architecture
• Create a flow chart and site structure
• Write a site concept and metaphor
• Develop the aesthetics for the site
• Create a new site
• Upload the Web site to a remote location
• View the site using a browser