Web Site Management

1
Web Site Management
4

• Macromedia Dreamweaver MX

2
In this chapter, you will
4

• Create a Web site using the Dreamweaver MX site
  tools and Site Definition Wizard
• Design and build a Web site structure
• Understand the use of the Site map
• Design a navigation strategy for your site that
  makes it easy for visitors to find the
  information they need

3
Creating a Web Site in Dreamweaver MX
4

• The Dreamweaver MX Site panel and Site Definition
  Wizard help you design and organize you site by
• Displaying a Site map
• Providing a link checker
• Maintaining the relationship between elements on
  the Web by updating paths
• Providing check-in and check-out functions for
  use by multiple Web site developers

4
Understanding the Uses of the Site Panel
4

• The Site panel provides access to a complete set
  of site management functions
• You can display both the Site map, and a site
  folder and file list
• The sites list pop-up provides access to all of
  your defined Web sites
• The drop-down list on the right provides a way to
  display local, remote, and test site files
• The Site panel toolbar contains a range of items
  that give you full control over site management

5
Understanding the Uses of the Site Panel
4
6
The Site Definition Wizard
4

• Use the Site Definition Wizard to set up your Web
  site
• The site layout helps you keep track of the
  different categories of the information on the
  Web site
• The Site Definition wizard provides a
  step-by-step guide to define your Web site

7
The Site Definition Wizard
4
8
Designing a Web Site Structure
4

• Most Web site developers use a set of naming
  standards that are influenced by the naming
  standards in their particular work environment
• Due to differences in operating systems and ISP
  you should
• Not use uppercase letters in file names
• Not use spaces in file names
• Make sure you USE the naming standards you have
  developed for your Web site

9
Defining a Directory Structure
4

• Before you develop extensive content for your Web
  site, you need to define a directory structure
  for the site by setting up a group of folders
• It is best to design a hierarchical directory
  structure to manage your Web site content

10
Hierarchy of Folders
4

• Dreamweaver MX helps you structure a Web site by
  creating a hierarchy of folders for different
  categories of information
• Frequently, Web site developers use one folder to
  hold images and other multimedia assets of a Web
  site
• If there are many files, you may choose a
  directory for each type of multimedia file
• You need to make many choices when designing a
  Web site these are easier to make before the
  content becomes too large

11
Hierarchical Organization of the Site
4

• Because each level of folder nesting adds
  complexity to the Web site naming structure, by
  adding to URL length, you should adopt a simple,
  straightforward design for grouping information

12
Hierarchical Organization of the Site
4
13
Creating the Home Page
4

• Some Web servers will show the directory list for
  a Web site when the URL for a folder is entered
  without any specific page name
• Most Web site developers prefer to keep this
  structure private
• The default home page is usually named index.htm
• This page appears in a browser if no specific
  page name is entered

14
The Site Map
4

• When you set up your Web site, the site
  configuration included Refresh Local File List
  Automatically and Enable Cache
• This causes the Site map to immediately reflect
  any changes you make to your Web site structure

15
Correcting Broken Hyperlinks
4

• Dead links are incorrect pathnames for
  hyperlinked files, which Dreamweaver MX calls
  broken links
• Dreamweaver provides a feature to check for
  broken links and orphaned files
• Orphaned files are those that arent linked in
  any page of the Web site
• Use the Check Links Sitewide command to help
  maintain and correct links throughout your site

16
Correcting Broken Hyperlinks
4

• To correct a broken link for a missing HTML file,
  you can create a placeholder HTML page that has
  no content, and point broken links to this file

17
Correcting Broken Hyperlinks
4
18
Correcting Broken Hyperlinks
4
19
Web Site Navigation Strategy
4

• The Web site structure is designed to make it
  easier for the developer to manage the Web site
  content
• Web site navigation is designed to make it easier
  for users to move around the Web site
• You design motto should be Maximize Access,
  Minimize Clicks!

20
Create a Navigation Plan
4

• The Home page sets the standard for navigation on
  the rest of the Web site
• Often include a menu that indicates what is
  available on the site
• Since visitors may enter your site in the middle,
  from search engines for example, you need to have
  navigation on every page

21
Create a Navigation Plan
4

• Navigation links set expectations about what
  visitors will find
• Navigation links that fulfill visitors
  expectations increase the usability of your Web
  site

22
Types of Hyperlinks
4

• There are two types of hyperlinks that are part
  of your navigation structure
• Structural navigation links menu bars,
  navigation bars, image maps, home page buttons
• Associative links words or phrases in the
  middle of a body of text that link to other parts
  of the Web site

23
Types of Hyperlinks
4

• Structural links can be text or graphics
• The graphic or text should mean something in
  terms of what visitors can expect
• Structural links are frequently repeated on all
  the pages in the Web site
• Consistency is important for structural links
• Structural links should be in the same location
  on every page

24
Types of Hyperlinks
4

• Navigation links can jump to another page, or to
  a particular place on another page defined by an
  anchor tag
• Named anchors are place markers for a particular
  area of a document
• This is useful for pages that span many pages

25
The Use of White Space
4

• You should consider the use of white space, which
  is one or more blank areas that allow visitors to
  rest their eyes so that they can comprehend the
  rest of the information on the page
• White space works well to group related
  categories of information

26
Location of Important Information
4

• The top of the page should have meaningful
  information on it so that visitors do not have to
  wait for all the graphics to download before they
  know where they are
• Use ltALTgt tags so visitors that are visually
  impaired can use tag information to help navigate
• Dont let visitors wait too long to view
  meaningful information they can leave with just
  a click!

27
Text Navigation Links
4

• The standard color for hyperlinks is blue
• If you change the color scheme, make unvisited
  hyperlinks a variation of blue, because visitors
  will be expecting this
• Some Web sites simply use strings of hyperlink
  text phrases separated by a delimiter, such as
  brackets, for structural navigation

28
Text Associative Links
4

• One attraction of the Web is that it is possible
  to hyperlink related information from within the
  document content
• Visitors who already understand terms can keep
  reading
• Visitors who need more detail can click on the
  link to get more information

29
Named Anchors
4

• Named anchors can be very useful in pages that
  are longer than a single screen
• Use them to jump to the top of the current page
  or to a definition on a page that has a lot of
  detailed information

30
Named Anchors
4
31
Named Anchors
4
32
Named Anchors
4
33
Graphic Structural Navigation Links
4

• Graphic navigation links can be created as
  individual icons, buttons, or more extensive
  graphic navigation bars or image maps
• Navigation is frequently done with icons and
  buttons
• Icons are small, usually, square graphics (32
  pixels by 32 pixels) that represent meaningful
  information

34
Navigation with Navigation Bars
4

• Dreamweaver helps with the creation and
  programming of navigation bars
• Navigation bars are built from a set of buttons
• Each button has a set of states, there are four
  states defined
• Up The normal (mouse off) state
• Over When the mouse is over the button
• Down When the button is selected
• Over while Down When mouse is over a selected
  button

35
Navigation with Navigation Bars
4
36
Navigation with Navigation Bars
4
37
Navigation with Image Maps
4

• Image maps are a popular way of setting up Web
  page navigation
• Especially useful when image represents a
  geographical area
• The Property inspector for an image provides
  three different drawing tools for creating
  hotspots in different shapes
• Hotspots are areas that contain hyperlinks to
  other areas

38
Navigation with Image Maps
4
39
Navigation with Image Maps
4
40
Summary
4

• The Dreamweaver Site panel makes it easy to
  create and manage the folders that define your
  Web site structure
• Local View window displays the hierarchical
  directory structure of your Web site
• Site Map window on the left side of the Site
  panel makes it easy to visualize and set up
  hyperlinks between elements on your Web site

41
Summary
4

• To help identify broken links the Site map shows
  them in red
• Web site directories or folders that have an
  associated index.htm or index.html file do not
  display the contents of a Web site directory
• Two types of hyperlinks identify your navigation
  structure structural navigation links and
  associative links
• Named anchors are place markers for a particular
  area in a document

42
Summary
4

• The Property inspector provides a Point-to-File
  icon that makes it easy to set up hyperlinks
• Dreamweaver makes it easy to implement graphical
  structural navigation links of several types
  icons, buttons, navigation bars, and image maps