Interface Design Procedure Dreamweaver CS5 - Web Design Santa ...

deliriousattackInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

169 εμφανίσεις


















Interface Design Procedure
Dreamweaver CS5


















Scott Nelson

Web Design Santa Barbara

WebDesignSB.com

Updated
December 4, 2013

Santa Barbara

Web Design

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
2

of
126

Table of Contents

Introduction

................................
................................
................................
..............

4

A Word of Warning

................................
................................
................................
..

4

Use of Ems for Font Size

................................
................................
..........................

4

Proc
edure Outline

................................
................................
................................
.......

5

The Applications

................................
................................
................................
......

5

Web Design Process

................................
................................
................................
.

6

Dreamweaver CS5
................................
................................
................................
......

7

Setting
-
Up Your Files

................................
................................
...............................

7

Opening Dreamweaver CS5

................................
................................
......................

7

Dreamw
eaver Preferences

................................
................................
........................

8

Define Your Site

................................
................................
................................
......

8

Local Info

................................
................................
................................
............

9

Saving Your Site Definition File

................................
................................
...............

11

Workspaces

................................
................................
................................
..........

12

Starting with the
CSS Layout Template

................................
................................
....

13

Page Title and Saving

................................
................................
............................

16

Previewing a Page in the Browser

................................
................................
...............

19

Windows ActiveX Issue
................................
................................
...........................

20

Issue with Safari for Mac/OS

................................
................................
...................

22

Exploring Dreamweaver

................................
................................
............................

23

Document Views

................................
................................
................................
...

24

Insert Toolbar

................................
................................
................................
.......

26

Files Panel

................................
................................
................................
............

26

CSS Panel
................................
................................
................................
.............

27

Customizing the CS
S

................................
................................
...........................

27

Properties Panel

................................
................................
................................
....

29

Parts of the Template and How it Works

................................
................................
......

29

Continue Creating the Design

................................
................................
....................

31

Accessibility “Skip to” Features
................................
................................
................

31

Creating the Accessibility Division

................................
................................
.........

31

Creating the Accessibility Links

................................
................................
.............

37

Adding the Banner

................................
................................
................................
.

40

What if the Banner is Too Wide

................................
................................
............

42

Dreamweaver Spry Menu Bar

................................
................................
..................

45

Pr
eparing for and Inserting the Bar

................................
................................
.......

45

Modifying the Menu

................................
................................
.............................

51

Set Submenu and Active Menu Background Colors

................................
..................

56

Button Width Settings

................................
................................
.........................

58

Top
-
level Level Links

................................
................................
...........................

59

Place the Navigation Bar Image

................................
................................
............

62

Adding an Outline to the Content Division

................................
................................
.

64

Float
-
drop and the Right Sidebar

................................
................................
..........

70

Clearing the Sidebar Content

................................
................................
..................

72

Modifying the Footer

................................
................................
..............................

74

Modifying Footer CSS

................................
................................
..........................

75

Adding Footer Text

................................
................................
.............................

78

Modifying the Container Division

................................
................................
.............

84

Setting the Background Gradient for the Page

................................
...........................

85

Heading Styles

................................
................................
................................
......

88

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
3

of
126

HTML Code View Changes

................................
................................
.......................

90

Adding the

Language Declaration

................................
................................
..........

90

Adding the Media
-
Type to the Linked Style Sheet

................................
...................

91

Add Author, Description, Keywords and Language Meta Tags

................................
...

92

Adding No Script Tags

................................
................................
.........................

96

Clean
-
up Your Code

................................
................................
...............................

97

Create a Dreamweaver Template

................................
................................
...............

97

Add the Editable Regions

................................
................................
........................

98

Create Named Anchors for Accessibility Links

................................
..........................

102

Move the Keywords and Description Meta Tags

................................
.......................

104

Site Files Panel to this Point

................................
................................
..................

107

Creating the Individual Pages

................................
................................
..................

107

Web Site Accessibility Statement

................................
................................
...........

110

Excerpt from the Electronic and Information Technology Accessibility Standards
.......

111

Suggested Short Statement

................................
................................
...............

112

Ac
cessibility Features

................................
................................
........................

113

Web Browser Plug
-
ins

................................
................................
.......................

114

Adobe Permissions and Trademark Guidelines

................................
......................

114

Creating the Accessibility
Statement Page

................................
............................

114

Customizing the Home Page

................................
................................
....................

115

Customizing Interior Pages

................................
................................
......................

120

Updating Meta Data

................................
................................
.............................

121

Adding Content

................................
................................
................................
...

123

Uploading
Your Site and Going Live

................................
................................
..........

124

Testing Your Web Site for Accessibility

................................
................................
......

124

Validating Your Markup Language

................................
................................
.............

125

Creative Commons

................................
................................
................................
.

126





Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
4

of
126

Introduction

This document is the second part of the interface design procedure that started with the
Interface Design Procedure Photoshop CS
5

document. This document starts where that
document

left off.




http://www.WebDesignSB.com/Resources/Do
cumentation/Design_Procedure/


It is not the purpose of this document to review the materials covered in
the
Interface
Design Procedure Photoshop CS
5

document. Please refer to this document for
references to
Web Site Examples
,
Production Folder
,
Starting A
ssumptions
,
Procedural
Outline

and
Production Folders
.

A Word of Warning

Those

of you who are just starting out, where this may be your first or second web site,
I
strongly urge you to

follow the steps as listed with as little deviation as possible. There

are
many subtleties in
individual tasks in
each of the larger procedures. I have tried to point
them out as they arise.

Use of Ems for Font Size

Just what is an “Ems” and why do I care? Ems are a relative measurement for a font size.
Ems are

“scalable” and can be used by the web site visitors to change the size of text on the
page to make it easier to read. All fonts defined in terms of Ems will be resized
proportionally as the
default
font size is increased or decreased. Ems
is

considered to

be
very
Accessible
.
Though
they can be a bit difficult to control, they are well worth the gains
in
Accessibility
.


However, we will not always be using Ems. For example, in the Spry Menu systems, where
we want to preserve spacing, we will use pixel measu
rements

instead
.


Here is a conversion chart that I have compiled from various Internet resources.

Use this
chart to help you specify your fonts in pixels, ems, percent or points. I generally only use
points for a print style sheet.


Pixels

Ems

Percent

Poi
nts

6px

0.375em

37.5%

5pt

7px

0.438em

43.8%

5.5pt

8px

0.5em

50.0%

6pt

9px

0.563em

56.3%

7pt

10px

0.625em

62.5%

7.5pt

11px

0.688em

68.8%

8pt

12px

0.75em

75.0%

9pt

13px

0.813em

81.3%

10pt

14px

0.875em

87.5%

10.5pt

15px

0.938em

93.8%

11pt

16px

1em

100.0%

12pt

17px

1.063em

106.3%

13pt

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
5

of
126

Pixels

Ems

Percent

Poi
nts

18px

1.125em

112.5%

13.5pt

19px

1.188em

118.8%

14pt

20px

1.25em

125.0%

14.5pt

21px

1.313em

131.3%

15pt

22px

1.375em

137.5%

16pt

23px

1.438em

143.8%

17pt

24px

1.5em

150.0%

18pt

26px

1.6em

160.0%

20pt

29px

1.8em

180.0%

22pt

32px

2em

200.0%

24pt

35px

2.2em

220.0%

26pt

36px

2.25em

225.0%

27pt

37px

2.3em

230.0%

28pt

38px

2.35em

235.0%

29pt

40px

2.45em

245.0%

30pt

42px

2.55em

255.0%

32pt

45px

2.75em

275.0%

34pt

48px

3em

300.0%

36pt


Procedure Outline

The
Applications

This procedure does not use Photoshop
CS5

HTML
or XHTML
output. Photoshop CSS layouts
use
Absolute Positioning

(AP)
, or tables, both of which are not acceptable for
properly
functioning web design layouts. However,
Photoshop XHTML output

is
fine for static and
interactive comps.

The procedures in
gray
are not included in this document.


The general outline of the procedure is as follows:


1)

Bridge

CS5

a)

Gather and organize your image assets

b)

Add Title meta data to your gallery images

c)

Create Web
Photo Galleries


2)

Photoshop

CS5

a)

Setup Photoshop
CS5

for Web Design

b)

Draw Guides to section
-
off interface elements

c)

Create an interface design

d)

Create
design comps for
you and your

customers

e)

Slice and export the slices to a web

site

images folder


3)

Acrobat
9
Professional

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
6

of
126

a)

Create content where print integrity or security must be maintained


4)

Flash

CS5

a)

Use Flash to create engaging, interactive interface elements


5)

Dreamweaver

CS5

a)

Using a CSS Layout Template, recreate the interface in XHTML

b)

Fine tune the template
using CSS

c)

Add appropriate Meta tags

d)

Create a Dreamweaver template

e)

Create your site form the Dreamweaver template

f)

Add content using Dreamweaver Flash and Spry objects

g)

Upload the site


6)

Device Central

a)

Use Device Central to make your web site
Mobile
Friendly

Web Design Process

In general,

the process of web design consists of six phases

as outlined in the
Interface
Design Procedure Photoshop CS
5

document. I
n

this document we will be working in the
4
th

through 6
th

phases. Though we will still require the use of

Photoshop,
we will
rely mainly
on

Dreamweaver.


1)

Information Gathering

a)

Decide the purpose of the site

b)

Define the goals expected to be accomplished by the site

c)

Decide who your target customer (visitor) is and what type of computer setup and
skill
-
set they have


2)

Planning the Site

a)

Decide what information will be on the site

b)

Decide how it will be organized

c)

Create a site diagram or list of your 3 to 7 top
-
level cat
egories

d)

Identify technologies that will best meet the purpose and goals of the site


3)

Interface and Site Design

a)

Using Photoshop, create an interface design using images, shapes, text and effects

b)

Create design comps for your

customer in order to proof and a
pprove the design

c)

Cut

the
multi
-
layered Photoshop

image into a
number

of
flattened
images (slices)
that are optimized for web delivery


4)

Development of the Site

a)

Take all of the image slices and put them back together in a Dreamweaver CSS
Template

b)

Construct
the interface so that it is Accessible to all who visit

c)

Create a Dreamweaver Site Template (different from the Dreamweaver CSS
Template) for your interface

d)

From the Site Template, create the pages for your web site

e)

Use Photoshop, Flash, Acrobat to create r
ich content for your web site

f)

Use Dreamweaver to insert the rich content into your pages

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
7

of
126

g)

Upload
and update
the site using Dreamweaver


5)

Testing and Launch

a)

Make a decision as to what level of completeness the site must be in for launch

b)

Organize a small
testing group to help you evaluate the site

c)

Check for usability: the ease with which visitors can navigate and access content

d)

Check for technical issues, such as broken links

e)

Check for content accuracy
: incorrect data, misspellings, typographical errors,
c
orrect images

f)

Check for browser and operating system compatibility issues

g)

Validate for Accessibility and markup language

h)

Launch site to the public


6)

Site Maintenance

a)

Review and analyze visits, hits
,

and
visitor trends (Google Analytics is a great
resource)

b)

Add and modify web site features

based on analytics and review results

c)

Make adjustments
as

necessary and
continually
analyze for effectiveness

Dreamweaver

CS5

Adobe Dreamweaver
CS5

enables you to develop and maintain web sites utilizing the latest
standard
s. This procedure begins where Photoshop
CS5

left off.

Setting
-
Up Your Files

Do not work on your removable media
.

This is because Mac/OS caches the information
that is written to the device. This improves the apparent speed of the drive.
However,
sometimes

the operating system becomes confused. By working directly on removable
media, you run the risk of
losing

all of your changes, and possibly your original files
.


Do not work on the Desktop.
Workstations in the DAC reset all settings on restart,
including
clearing the Desktop. If you have to restart for any reason, and you are working
from the desktop, your files will not be there after you restart.


Copy your Production Folder from your removable media, to the Work folder.
Work
in the Work folder throughou
t class, and then copy your entire Production Folder back to
your removable media. This is the only safe way to work.


Delete Sensitive Files from the Work Folder when you are done.
The Work folder is
safe, because it is not deleted, however, all students
who log into the computer have access
to read, edit
,

and delete all of your files. This includes files that include private information,
such as your Dreamweaver Site file (.STE). This file can contain the information necessary
to connect with your web
site and upload and modify your data. It is also important to
delete your Dreamweaver sites from the Dreamweaver Site Manager.

Opening
Dreamweaver

CS5

Launch Dreamweaver
, and open to the main Welcome
screen
. I
used to
suggest clicking on the
Don't show
aga
in

checkbox at the bottom of the Welcome screen.

However, the
Welcome screen does not cause any extra
Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
8

of
126

clicks in
CS5
, and it has an announcement
section at the bottom right. This section is
connected to the Internet and changes periodically. It allows Adob
e to keep you apprised of
the
goings
-
on

about Dreamweaver.




Dreamweaver Preferences

This documentation is based

on a specific set

of Dreamweaver
Preferences

as
outlined in the
Dreamweaver
CS5

Preferences document on the
Web Design Santa Barbara

site.




http://www.WebDesignSB.com/Resources/Documentation/Dreamweaver/Preferences/


In order for you
r

installation

of Dreamweav
er to match the screen shots in this
documentation, you must review and make the settings changes as recommended. If you
are a
savvy
Dreamweaver user and you do not mind the discrepancies in display, you may
leave your settings as you like.

Define Your Sit
e

Before you open and edit an HTML file, you must first define a site
. If you do not, it is quite
probable that Dream
weaver will render any links in the page nonfunctional.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
9

of
126

At the very minimum, you must define the
Local
Site folder
.

Adobe Dreamweaver CS5
has
finally made site definition a bit easier by grouping the elements in a way that is easier to
understand
.


Before the end of this procedure
,

you will be required to upload your site at certain points
during the development process to satisfy specific
Assignments and Discussions. Please
refer to the

Transferring Files Using Dreamweaver

document for a
detailed
procedure
for completing the
Servers

category and subsequently transferring your site files.


Transferring Files Using Dreamweaver

http://www.WebDesignSB.com/Resources/Documentation/Dreamweaver/Transferring_Files/

Local Info

1)

Select
S
ite
,
New Site…

a)

Site n
ame:

You may enter virtually anything in this field. It will only show to you. In this
example I will enter:
Scott's Place on the Web!




b)

Local root
f
older:

This is the single most important entry.
This is the

folder in which your
home
page

or the
first page

of your web site will reside. If you have followed the
Production Folder method, this is the
website

(or
wwwroot
)
folder, inside your
Production Folder.


I am working in
Microsoft
Windows

7™
, so the path to my Local Root folder,

which is
inside my profile, is as follows…


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
10

of
126



C:
\
Users
\
Scott
\
Documents
\
My Websites
\
Scott's Place on the Web!
\
website


c)

At this point,
this is all we need to commence work on our site. Later we will
incorporate the information necessary to connect with a r
emote web server. Click on
the
Save

button to save these settings and close the
Site Setup

window.




Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
11

of
126

2)

Your Dreamweaver
Files

panel should look
almost empty
, except for an images folder.
Opening your images folder will reveal your interface design slices,
if they are there.



Saving Your Site Definition File

Dreamweaver allows you to save all of your site settings in a single file that is relatively
easy to export and then import at home or at class next time.

This file contains the
credentials to connect
with and modify your site. It is important that you keep this
file in a secure place.


1)

Select
Site
,
Manage Sites…




2)

Click on the site name (in this case
Scott's Place on the Web!
), and then click on the
Export…

button.


3)

I recommend selecting, “Back up my setting (includes login, password, and local
paths).” And then click on the
OK

button.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
12

of
126



4)

Do not save the file in the
website

folder. I suggest saving the site file (.STE) in your
Production Folder. When you have designa
ted the folder, click on the
Save

button.




5)

Click on the
Done

button to close the
Manage Sites

window.

Workspaces

Dreamweaver allows you to customize your workspace. This means you can decide which
menus and views you want to have as default. This
can
sa
ve

your time and sanity
.


I prefer the
Classic

workspace.

This is the workspace that is pictured in this document. It is
my recommendation that you choose this workspace so that images in the documentation
will more closely match your screen.


To change your workspace to Classic, for the sake of this procedure, click on the Workspace
menu.
Designer

is probably the one selected by default, and then select
C
lassic
from the
pull
-
down menu.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
13

of
126


Starting with the CSS Layout Template

Now, we will actua
lly us the Dreamweaver CSS Layout Templates for the beginning of our
web site. First, you need to decide which CSS Template to use. For the example in this
procedure, we will select
3

column fixed, header and footer
.



1)

Select
File
,
New…


2)

On the
New Documen
t
window, click on…

a)

Blank Page

b)

Page Type:
HTML

c)

Layout:
3 column fixed, header and footer

d)

DocType:
XHTML 1.0 Transitional

e)

Layout CSS:
Create New File

f)

the
C
r
eate

button


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
14

of
126



3)

Click on the
Cr
eate New Folder

button.




Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
15

of
126

4)

Name the new folder
styles
, and then click

on the Open button.




5)

Make sure the
Save in:

folder is the
styles

folder, and then click on the
Save

button.



Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
16

of
126

6)

You should see an
Untitled Document

in the Dreamweaver
Design View

mode.




Page Title

and Saving

The title of this page, which will ultimat
ely become the template of the entire site, should be
the title of your site. The site Title is derived from Search Engine Optimization (SEO)
techniques and should contain the most important words in your site. In this example, I
have decided to name my si
te,
Scott’s Place on the Web!



This is only the starting point for the title.
When we get to creating pages for our site, we
will add distinctive text to each page title based on the subject or page content.
Every page
on your site should have a unique pa
ge title.


It is very important that you save your page at this time. It is not a good practice to work
on pages in Dreamweaver without first saving them.


1)

Title your new document
.




2)

Click
on
File
,
Save As…
, c
reate a folder called
interface_design
, and then click on the
Open

button to open the newly created folder.

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
17

of
126




a)

Name your page
:

index.htm
, and save it in the
interface_design

folder.



Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
18

of
126



b)

Your
Local Files

should look like
this

example.




The reason we are creating a web page, rather than a T
emplate,
is that the file name
extension of the Dreamweaver Template is DWT. Not all web servers will serve a DWT.
Additionally, we will be doing a lot of saving as we work and we are not
yet ready

to add an
Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
19

of
126

Editable Region
.
Dreamweaver will prompt us for
this each time we save.
Once these
elements are added to the interface, it can be turned into a Template.

Previewing
a Page

in the Browser

Though Dreamweaver is a "What you see is what you get" (
WYSIW
Y
G
) application, it does
not truly render pages the way
web browsers do. Additionally, web browsers have different
ways of rendering the same page, so it is important to view your site in each browser you
intend to support.


The
Preview in Browser
list is compiled at the time Dreamweaver is installed on your
co
mputer. If you install browsers after you install Dreamweaver, you may add browsers to
the list by selecting
Preview/Debug in Browser

button, and then
clicking on the
Edit
Browser List…

option.


I encourage you to perform this
Preview in Browser

often and throughout this procedure. It
will work whenever you have a page open for editing.


1)

Click on the
Preview/Debug in Browser

button, and then select the browser you want
to use.




2)

You may be prompted if there are unsaved dependent files. Click on

the
Yes

button.




3)

Your page should open in the selected browser.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
20

of
126



Windows

ActiveX
Issue

You will need to enable the JavaScript (ActiveX) component when viewing pages on your
local hard dri
ve. This is a security feature. You can
allow

these elements f
or your
convenience in working with Dreamweaver. This is optional only.


1)

In Internet Explorer, click on
Tools
,
Internet Options
.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
21

of
126



2)

Click on the
Advanced

tab, scroll down the Setting to the Security section, and put a
check in the checkbox “Allow active c
ontent to run in files on My Computer *”, and then
click on the
OK

button.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
22

of
126



3)

You must close all instances of Internet Explorer and re
-
open the browser in order for
this option to take effect.

Issue with Safari for Mac/OS

The Apple Safari browser is know
n for having issues with the browser cache. This causes
you to preview of the cached version of the page, rather than the actual version you have
saved. When you feel that you are making changes in Dreamweaver, saving, and not seeing
those changes reflecte
d in Safari, perform this quick, three
-
step procedure.


1)

With Safari open, click on
Safari
,
Empty Cache…


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
23

of
126



2)

Confirm your request by clicking on the
Empty

button.




3)

Quick Safari by clicking on
Safari
,
Quit Safari
.




No
w
, switch back to Dreamweaver and
preview in Safari again. If you still do not see the
changes you feel you should be seeing, double
-
ch
eck your coding in Dreamweaver.

Exploring Dreamweaver

We will now take a short excursion, sort of like driving o
n

the coast of California, and then
we will

get back to the procedure. Part of the reason for this excursion is
to familiarize you

with the Dreamweaver interface and the different panels that will become your friends.

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
24

of
126

Document Views

Document view is where most of the web page editing takes place. T
his is the area in
Dreamweaver where we get to see a rendering of the web page we are creating. There are
three document views in Dreamweaver.




Design View

This is the "What you see is what you get" (WYSIWYG) view.

This is the view we have
seen above.




Code View

Code View allows you to see the XHTML that is the source code for the page. This is the
stuff that tells your browser how to render the page.






Split View

New in CS5, the Split View is a vertical split.
The Split View allows you to see both Cod
e
and Design Views at the same time by splitting the Document screen horizontally. The
horizontal split can be moved vertically by dragging it up or down.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
25

of
126





Live View

New to
CS5

is
Live View
. In this view you are able to see
elements that you could only
see in the browser in previous release, such as Flash and other embedded media, and
the results of database queries. Though still not totally WYSIWYG, it is a major step
forward in being able to visualize your
active

design in
action without leaving
Dreamweaver.

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
26

of
126



Insert Toolbar

The Insert Toolbar provides easy grouped graphic access to a wide variety of elements that
can be inserted into your web page. All of these elements can also be found under the
Insert pull
-
down menu.

Th
is toolbar is part of the
Classic

workspace by default, though it
can be added to any workspace.



Files Panel

The Files Panel is where we can see and access all of our site files. This list will grow as our
site grows.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
27

of
126


CSS Panel

The CSS Panel will a
llow us access to all of the styles that position and affects the elements
on the web page. Clicking on the CSS Panel heading opens the panel, and then Click on the
All

button.



Customizing the CSS

Throughout this procedure we will be modifying the CSS
in order to change the template to
meet our interface design specifications. Regardless of whether you are creating a design
with a top
-
horizontal or a left
-
vertical navigation system, you will need to follow these
sections of the procedure closely.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
28

of
126

The CSS is designed to be edited, and the CSS panel is your friend. Open the CSS panel by
clicking on the
CSS

panel heading, and then click on the plus sign [+] to open the CSS tree
view.
(Mac/OS does not have a plus sign, but rather a triangle)




To vie
w the CSS file,
click on the
Code View

button and then click on
Related File

oneColFixCtrHdr.css
.




Notice the significant amount of
commenting

(gray text). These are instructions and
warnings. They will help you make decisions about how to modify the CS
S.


An important concept to remember is that as you make changes to the CSS in a page, it is
the CSS file
and the file on which you are working both need to be transferred
. This will
become clearer as we get to uploading and updating our site.

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
29

of
126

Click on the

Design

button to return to the Design view of the page.


Properties Panel

I saved the best for last. The Properties Panel is your friend. It is also a ki
n
d of chameleon
in that it changes to display the properties of the element in the page th
at is selected.




New in
CS4

was

the
<>HTML

and
CSS

buttons on the left. This selector allows you to
toggle between the CSS properties for an element and the HTML properties for an element.
Also new to
CS5

is the Title field. This allows you the ability to quickly add a
Title

attribute
to any HTML element that allows the Title attribute.




If you find that the properties reflected in your properties panel are different form the
diagram in this documentati
on, it is probably because you do not have the same element
selected as I do. If this is the case, I suggest you go back in the documentation a few steps
to see what element should be selected at the time.

Parts of the Template and How it Works

The Dreamweaver CSS Template has
six

(
6
) main parts: Container, Header, Main Content
,
Sidebar 1 (left sidebar), Sidebar 2 (right sidebar)

and Footer. The three sections, Header,
Main Content and Footer, are easy to see in the basic template.


The Header se
ction is at the top of the template, and will contain the banner and our
navigation bar.


Below the Header is the Main Content section. The Main Content section is where our
content will go, be it text, images, Flash media, YouTube videos, etc. We really
have no way
of determining how much information will be contained in this section from page to page, so
this section will have to be expandable vertically.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
30

of
126

The Footer section is the place we will put the
administrative

stuff: who is responsible for
the pa
ge, when the page was updated and our Accessibility statement of conformity and
scope of the statement. This section will need to be
pushed
-
down

by the content section, to
that the Footer always remains below the elements in the Main Content section.


Howe
ver, it is the Container that makes the template work. The
Container

constrains all of
the sections, the Header, Main Content, and Footer, to the number of pixels specified. In
this case of the
Scott's Place on the Web!

example that is
960

pixels.




If
the container is removed, the
n

all of the pieces are free to move about the page
unconstrained. This is undesirable and a bit of a mess.



Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
31

of
126

Continue Creating the Design

Accessibility
“Skip to”
Features

The
Skip to

feature should be the first element in the page. We will insert the element as a
division above the banner element of the page.

Creating the Accessibility Division

In

this part of the procedure we will be adding a division to the top of the page. This
rep
resents a structural change to the Dreamweaver CSS template, and will be one of the
more complex part
s

of this procedure.


1)

In the Design view, click in the large green area to the right of the
Insert_logo (180 x
90)

image placeholder
, click on the
<div.hea
der>

tag in the
Tag Selector
in the
Status bar

at the bottom of the Design window, and press the
left
-
arrow

key
(

)
on
your computer keyboard one time.




This has the effect of moving the cursor outside the
header

division and within the
container

divisi
on.


2)

Click on the
Layout

tab in the

Insert toolbar
, and then click on the
Insert Div Tag

button.




3)

In the
Insert Div Tag

window, enter
Accessibility

into the
ID
:

field, and then click on
the
New CSS Rule

button.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
32

of
126



4)

In the
New CSS Rule
window, change the

Rule Definition:

to
(New Style Sheet File)
,
and then click on the
OK

button.




5)

In the
Save Style Sheet File As

window, click on the
styles

folder and then click on the
Open

button.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
33

of
126



6)

Enter the

File name:

main.css
, and then click on the
Save

button.




7)

In

the
Type

c
ategory

window, enter the following information
:

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
34

of
126

a)

F
ont
-
size:
0.68
8

em

(This is approximately 1
1

pixels high
.

You may choose any size that fits your design
needs.
)

b)

L
ine
-
height:
normal

c)

C
olor:
#999

(You may use any color. Contrast, although
there must be some, is not very
important here as this text will be most likely read by screen
-
reading software.)




8)

Click on the
Block

category and align the text
right
. This is a preference of mine as it
maintains the element as the first in the page
.

I
f you
move the text to the top
-
right of
the page

you take the risk it will be missed by the western
-
reader
, who starts
reading
at
the top
-
left of the page and moves diagonally down and to the right.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
35

of
126



9)

Click on the
Box

c
ategory
, enter the following inform
ation. This information sets the
dimensions of the
Accessibility

division. Note that the width of our interface is 960
pixels. The
w
idth of 945 pixels
will create a
15 pixel

margin from the right site of the
Container. If you want more
padding

then decreas
e the width of the division.

a)

Width:
9
4
5 px

b)

Height:
14 px




10)

If your banner image is designed to set below your
Accessibility

division, then click on
the
OK

button as you are done. This is the case in this example.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
36

of
126

However, if you want to
float

this division on top of your banner image, then there is
one more setting you need to specify.


a)

Click on the Positioning category, change
Position:

to
absolute
, and then click on
the
OK

button.





11)

Click on the
OK

button in the
Insert Div Tag

window.


12)

Yo
u should see the text, “Content for id

Accessibility


Goes Here” in a white d
ivision at
the top of the page. Do not worry about the white background. It is part of the
Container division and we will remove it later in the procedure.


Select that text and
delete it. Be careful to only delete the text and not the entire
division! If you delete the division, use the Undo command (Ctrl
-
Z or Cmd
-
Z), and then
reselect the words and try again.





13)

With the cursor still in the place
in the
Accessibility

division
,

type in the following text.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
37

of
126



Creating the Accessibility Links

Each of the words (sans
Skip to:
) in the
Accessibility

division will link to another element.
The
Content

link will link to the start of the conte
nt area in the same page. The
Footer

link
will link to the start of the Footer division and the information contained in the

F
ooter of the
page. The
Accessibility

link will link to a completely separate page on the site that will
contain
the Accessibility
Statement for the site, including the Accessibility features
contained in the pages and the site.


When we click on a link we go to a page or place in a page. This is called the “target” of the
link. In this case we will first create a target for the Conte
nt and Footer links
.
The
Accessibility page will not be created until far later in this procedure, but we can anticipate
the page and create a link for it now.


1)

Now we will add the links. The words
Content

and
Footer

will
link

to

Named Anchors
lower in the page.
Case is important. Make sure the words Content and Footer are
capitalized.
The pound sign (#) before the word indicates that this is a link to a place in
this page, not a link to another page.

a)

Double click on the word,
Con
tent

to select the word.

b)

In the
Properties

panel, in the
Link:

field, type
#Content
, and then touch
Enter
.
It is important to touch
the
Enter
-
key

(

)
after you enter a value into any
Properties

panel field. This will assure that your new settings will
stick
.

c)

In the
Title:

field, enter
Skip to content
on

this page




d)

Double
-
click on the word
:

Footer
.

e)

In the
Properties

panel, in the
Link:

field, type
#Footer
, and then touch
Enter
.

f)

In the
Title:
field, enter
Skip to
footer

on

this page

Skip to: Content | Footer | Accessibility

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
38

of
126

g)

Double
-
click on the

word
:

Accessibility
.

h)

In the
Properties

panel, in the
Link:

field, type
../accessibility.htm
, and then
touch Enter.

i)

In the
Title:
field, enter
Link to the site Accessibility Statement





14)

Notice that when you make the text links, the color changes. If you

would like to change
the color of the link, possibl
y

to match that of the rest of the text, follow these steps.

a)

Double
-
click on the
word
Accessibility

to select it.

b)

Open the
main.css

in the
CSS Styles

panel, and click on the
#Accessibility

rule

c)

C
lick on t
he
New CSS Rule
button in the
CSS
Styles

panel
.




d)

Dreamweaver knows the element that is selected and will make a guess as to what
element you want to apply the style. In this case,
.
container #Accessibility a
, is
correct. Click on the
OK
button.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
39

of
126



e)

The Selector name will become
#Accessibility a
, and then click on the
OK

button.
#Accessibility a

means the Anchor tag
<a>

inside the
Accessibility

division.




f)

Set the text color you want for the links in the
Accessibility

division. This setting will
onl
y affect the
Accessibility

division.
I also like to remove the underline for these
links, so I select
Text
-
decoration:

none
.
Later we will select a link color for the main
Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
40

of
126

content area of your pages.

Click on the
OK

button.




15)

At this point
,

it is a good idea to save the web page and all associated files. You do this
by clicking
File
,
Save All
. The Save All function saves all open and modified files to the
file system. If there are any untitled documents, you will be prompted for a file name.

Adding the Banner

Next we will add the banner image.
First, we

delete the
placeholder t
hat is part of the CSS
template and then enter our banner image. The reason we do not use the imag
e
placeholder is
this

in
-
line style is more difficult to remove.


1)

Clic
k on the
Insert_logo (180 x 90)

image placeholder.




Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
41

of
126

2)

Press the
D
elete
-
key

(

) on your computer keyboard
.




3)

To insert an image, click on

the
Insert

pull
-
down menu, and then select
Image
.


a)

Open the
images

folder, click on the
banner.png
, and then click on the
OK

button.




b)

On the
Image Tag Accessibility Attributes

add
Alternate text:
. This is a perfect
place to reiterate your web site name or marketing phrase. If the banner will provid
e
a link back to the home page, then you might add t
hat information as well
.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
42

of
126



The text I used in this example:
Welcome to Scott's Place on the Web!


[Link
to Home Page]

c)

Click on the
OK

button to accept the Alternate Text.


4)

After inserting the banner image, and with the banner image still selected, look
at the
Properties Panel. Enter an ID for the image.

IDs must be…



Unique on the page (
no two elements on any give page can be the same
)



Start with a letter



May contain only letters (A
-
Z, a
-
z) and numbers (0
-
9)



May not contain spaces




a)

ID:
BannerImage

(note that the ID field is not marked as such)

b)

I set the
Link:

field to
../index.htm
. This is because I am using the banner image
to be my link back to the home page. I could have also used a button, but with
limited horizontal space, it made sense not to

waste space on a
Home

button.


You may use the
Tab
-
key

(

)

on your computer keyboard to move from field to field

in
the
Properties panel
. If you do not use the
Tab
-
key

(

)
, remember to use the
Enter
-
key

(

)
to make sure your new value is accepted.

What if

the Banner is Too
Wide

If the banner you designed was anything other than exactly 960 pixels wide, you will need
to adjust the
Container

in order to accommodate for the difference between the
Dreamweaver template and your interface.

This section will work if your banner is too
narrow

as well.


After
inserting the banner image in this example, I notice the banner is protruding out of
the right side of the page and outside yellow division bounding box.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
43

of
126



If you are unsure about the wi
dth of your banner, click on the image in Design View to
select it, and then check the width (
W
) in the
Properties panel
. If it is other than 960, you
will need to continue with this section. If it is 960, then you may skip to the
Dreamweaver
Spry Menu Bar

section.





1)

Make note of the width of the banner image. In this example the width is 980 pixels.


2)

Open the
CSS Styles

panel by double
-
clicking on the
CSS Styles

tab, click on the
All

button, click on the plus sign
[+]

next to
thrColFixHdr.css

to open the style sheet and
then click on the
.container

rule.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
44

of
126



3)

In the
Properties for .container

section of the CSS Styles panel, click directly on the
number
960

(next to the
width

property). Enter the width of your banner and press
Enter
-
key

(

).





4)

Next we need to adjust the width of the elements within the content area. In order to
make the elements fit neatly in the container, we will need to adjust the width of at least
one of the divisions. It is easiest to add the extra space or remove t
he extra space from
the Content division.
Calculate the difference between 960 and the width of your banner.
In this example, the difference (980
-

960 = 20) is 20 pixels.


Click on
.content

rule,
the default width is 600 pixels. Change the width by the
di
fference. In this example, I will add 20 pixels to make the width 620.

Press the
Enter
-
key

(

) to make the change.

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
45

of
126




Dreamweaver Spry Menu Bar

The use of
Dreamweaver Spry menus
is new to this CS5 procedure. The Spry menus are
more Accessible than re
gular image roll
-
overs and they are far more scalable. This means
that drop
-
down menus can easily be added as your site grows. Though this is not an easy
procedure, it will be well worth learning.


The first thing we need to add is a “clear
-
float break.” T
his is an element that will work like
snow
-
shoes work on snow. They prop
-
up the stuff that is on top. If we do not add this
element, the sidebar elements below the Spry menu will interact with the menu. The clear
-
float break will mitigate this issue.

Prepa
ring for and Inserting the Bar

I strongly urge you to not skip this vital step. If you do, the menu bar will not interact
properly with the remainder of the page.


1)

For this procedure, switch the display to
Split

view.




2)

Click on the banner image, and then press the
Right
-
Arrow key
(

)

on your computer
keyboard twice.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
46

of
126


This should have the effect of placing the cursor after the closing Anchor tag
</a> and before the Comment tag (<!
--

end .header
--
>) at the end of the
He
ader division.


3)

Hold the
Shift
-
key
(

)
down and
press

Enter
-
key

(

). You should see a
Break

tag
<br />

entered in the
Code view

window.




4)

In the
Design

view window, scroll to the right to see the
Break

tag shield (
) and click
on the shield to select it.




5)

In the
Tag Selector
, right
-
click on the
Break tag <br>
, click on
Set Class

in the pop
-
up menu, and then select
clearfloat
.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
47

of
126



6)

In the Code view window, put the cursor between the closing
Anchor tag </a>

and the
Break tag <br class=”clearfloat” />
. Th
is is exactly where we want to insert the
Spry menu.




7)

Return the window to
Design

view.




8)

Click on the
Spry

tab in the
Insert toolbar
, and then click on
Spry Menu Bar
.




9)

In this instance, we will be working with the
Horizontal

menu bar. Click on the

OK

button.




Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
48

of
126

10)

Save the page. When the page is saved you will be prompted to
Copy Dependent Files
.
These are the external files that Dreamweaver used to make the Spry

menus work. They
must be included in the site or the menus will not function. Click on the
OK

button.




T
he following is approximately what your Code View should look like. The line numbers in
your page may be different from the line numbers shown below
, however t
he line numbers
do not matter so much. What I would really like to demonstrate is to order in which the
elements flow in the page.




Line
16

is the banner image



Lines
17

through
39

(highlighted) is the Spry Menu Bar



Line
40

is the break tag with the “clearfloat” class



Line 41 ends the Header division


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
49

of
126



This is the interface to this point.



Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
50

of
126


If you check the
CSS Styles panel
, you will find that there are now three style sheets
linked to our document.




We have a number
of additional files in our
Files panel
.




Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
51

of
126

Modifying the Menu

Before we continue, I want to turn off Visual Aids. This will allow us a better look at the
interface as we proceed. All of the changes we make in this section will be to the
SpryMenuBarHorizon
tal.css

style sheet.


1)

Click on the
Visual Aids

menu, directly above the
Design view

window, and select
Hide
All Visual Aids
.




2)

In the

CSS Styles panel
, click on the
plus
-
sign
[+]
next to the
SpryMenuBarHorizontal.css to open the sheet, and then click on the
ul.SpryMenuBarHorizontal

a

rule.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
52

of
126



3)

We want to remove the gray background of the menu so that our graphic background
will be seen when we add it later. Click on the
background
-
color

property, and then
click on the
Disable/Enable CSS Property

button at the bottom of the panel. The
Disable/Enable CSS Property

is new to CS5. It allows you to leave a property in
place, and toggle it on and off. This is a big time saver when working
with CSS.




4)

Now choose the color of the text for your navigation system. You can get this color from
your Photoshop Interface Design file. In this case, I am using white (#FFF).

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
53

of
126




5)

In this step, we will move the menu 20 pixels from the left margin. I
suggest you do this
step and then come back to i
t

to make finer adjustments. Click on the
ul.MenuBarHorizontal

rule, and then click on the Edit Rule button at the bottom of the
CSS Styles panel
.




a)

Select the
Box

category, and then deselect the
Margin:
Same for all

checkbox.

b)

Enter in the
Top
:

field
1

px
.
This is to center the menu vertically on the bar. You
must
specify pixels (px) or this will not work.

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
54

of
126

c)

Enter in the
Left:

field
20 px
.
You must

specify pixels (px) or this will not work.




6)

We need to ma
ke an adjustment to the CSS for Internet Explorer. To do this, we need to
open the
actual
CSS.

Double
-
click on the
SpryMenuBarHorizontal.css

in the
CSS
Styles panel
.




7)

The page will open in Split view.

a)

Scroll down the

Code view
side.

b)

Highlight the
back
ground: #FFF;

as shown, which should be line 166.

c)

Click on the
Apply Comment

button on the left vertical Code view menu.

d)

Choose
Apply /*

*/ Comment
.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
55

of
126



Line

166

should look like this now.




8)

Return the window to
Design

view.



Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
56

of
126

Set Submenu and Active
Menu Background Colors

In order for the menu system to look like part of the interface, we need to blend in colors
from
the interface. Even though we are not currently using the sub
-
menus, we can still
prepare them for when we do.


The
Active Menu Backgrou
nd
C
olors

change the background color and font color when the
mouse pointer hovers over the menu item. It is important to note at this point that this is
but one option for the hover interaction. I encourage you to experiment with other options,
such as un
derlining text or only changing the text color and not the background color.


1)

In

the CSS Styles panel. Find the
ul.MenuBarHorizontal a:hover,
ul.MenuBarHorizontal a:focus

rule.


2)

Click on the blue swatch in the background
-
color property, and then take the
color
-
picker out onto the banner and select a color directly from the banner. You may want to
try this several times to get just the right color.




3)

Copy the color number and past it into the color for the
ul.MenuBarHorizontal
a.MenuBarItemHover, ul.MenuB
arHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible

rule directly below.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
57

of
126




4)

To set
the background color of the sub
-
menus, click on the
ul.MenuBarHorizontal
ul.MenuBarSubmenuVisible

rule, click on the
Add Property

link in the Properties
section of the
CSS Styles

panel.




a)

From
the menu, select
background
-
color
.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
58

of
126



b)

Click on the color swatch and pick a color from the color palette or from the banner
graphic. In this example, I chose black (#000).



Button Width
Settings

As the Spry menu comes “out of the box” all of the menu items are the same width. If you
would like the main menu elements to change sizes based on the width of the text or if you
would like to change the width of the main menu element, then follo
w these steps.


1)

In the CSS Styles panel, select the
ul.MenuBarHorizontal li

rule. The width property is
what determines how wide the menu elements are. Initially, they are 8 ems. If you wish
to make each element as wide as it need
s

to be,
and
then select t
he property
to
disable
it
.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
59

of
126



2)

If you would like to change the width, change the property value of the width. If you
keep the unit
s

in ems, then the width of the button will change based on the font size
the viewer has specified.


3)

If
you
have not done so i
n a while, click on
File
,
Save All
.

Top
-
level Level Links

The top
-
level, and subsequent levels, come from the site branching diagram you created for
your project proposal. This is a good time to view that resource as we will need it to
complete the remaind
er of this section.




Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
60

of
126

1)

In order to set the text in the menu, we first need to select the menu to activate the
Spry Menu Properties panel. Click anywhere within the text of the menu, and then click
on the
ul.MenuBarHorizontal#MenuBar

in the
Tag Selector

bar.




2)

The first column is the top
-
level categories. The second column is the sub
-
categories in
the Item 1 category. The third column is the third
-
level. These three levels can
accommodate sites of thousands of pages. This is one of the attributes that
makes this
menu system so powerful.




In this example, there are only top
-
level categories, so one of the tasks will be to delete
all of the second and third
-
level items.


a)

Click on
Item 1
in the first column
,

then click on
Item 1.1

in the second column
,

and
then
click on the
minus
-
sign [
-
]

at the top of the column until the three sub
-
items are deleted.




Repeat this procedure for
Item 3

(this is the only other item that contains sub
-
menus by default)
.


b)

Following is a tabular summary of my pages with the

associated text, links
,

and
titles. This table came directly from the site diagram. The
Title

is the “Helper Text”
that appears when the cursor hovers over the link. The title text can be a lot more
verbose that the text that can be displayed in a link an
d it is help
ful

for Search
Engine Optimization (SEO).

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
61

of
126



Text

Link

Title

About Me

../about_me.htm

Link to Information a
bout Scott

Rocketry

../rocketry.htm

Link to
Rocketry Pictures and Links

Bryce Renderings

../bryce.htm

Link to Bryce Rendering Gallery

Lyrics

../lyrics.htm

Link to Scott’s Lyrics

䍯nt慣a

⸮L捯nta捴⹨tm

䱩n欠to⁃ nt慣琠偡me


周ere⁡re⁴ ree⁡瑴ribute猠睥⁷慮t⁴ ⁡摤⁴ ⁡ l nu⁩te浳m⁔e硴x⁌ink
I

慮d⁔itle⸠
䍬i捫n
Item 1
, and then enter the three attributes.




Repeat this for the rem
ainder of your top
-
level categories.


c)

If you need to add more categories, select the last item in your list, and then
click on the
plus
-
sign [+]

at the top of the column to add a category.




3)

Click on
File
,
Save All
.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
62

of
126


Place the Navigation Bar Image

With

the navigation bar functioning, the next step is to replace the green default
background with the graphic background form our interface.


1)

First we need to get the combined height of the banner image (banner.png) and the
navigation bar background image (na
vigation_bar.png) To do this, click on the Asset tab
in the Files panel, and then click on the Image assets button.




The second number is the height in pixels. The sum of 161 and 58 is 219. This means
that the height of the Header division must be exact
ly 219 pixels. The reason that the
division does not automatically re
-
size to this dimension when we add the navigation bar
background is that background images are not used to compute the dimension of a
division.


2)

In the
CSS Styles panel
, click on the
plu
s
-
sign [+]

next to the
thrColFixHdr.css

style
sheet, select the
.header

rule and then click on the
Edit Rule

button at the bottom of
the panel.


Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
63

of
126



3)

Select the
Background

category, and then set the following values
.

a)

Background
-
color:
clear

b)

Click on the
Brow
se…

button and select the
navigation_bar.png

from the
images

folder.

c)

Background
-
repeat:
no
-
repeat

d)

Background
-
position (y):
bottom




4)

Click on the
Box

category, and then set the following values.

Interface Design Procedure Dreamweaver CS5

December 4, 2013

deliriousattac
k_032b5d0d
-
ea36
-
4029
-
9540
-
031ad2814af2.docx


Page
64

of
126

a)

Height:
219 px




b)

Click on the