ADS 560 Topics in Design
Flash and Dreamweaver

:::::::::::::::::::::::::::::::::::::::::::::::::
email: andrea wertzberger

:::::::::::::::::::::::::::::::::::::::::::::::::
:- Indexed Blog: great simple drawings
:- Good.is Infographics
:- Village of 100 people
:- Future Food
:- Feltron
:- Designer Daily

Flash as part of the site
:- 344: Stefen Bucher
:- Tomorrow
:- Range
:- Build Forest...
:- House Industries
:- Medium Bold
:- GE Grid
:- Wonder-wall
:- Also-online
:- The Adventure Schoo
:- Don't Click It
:- Hello Monday

Various Animations using Flash
:- Little red riding hood
:- Bembo's Zoo
:- Seven Wonders
:- Lemon Powered Clock
:- Bird Watching

::::::::::::::::::::::::::::::::::::::::::::::::::
:: class websites
:- Alex
:- Allie
:- Alyssa
:- Andres
:- Bradley
:- Christi
:- Crosby
:- Dela
:- John
:- Jon
:- Nancy
:- Mars
:- Matthew
:- Mo
:- Sam
:- Shannon

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
How to create navigation from a list

1) New Doc. None for template

2) Save as (name file and make sure it goes into folder with ther rest of your .html files

3) Insert > Layout Objects > DIV TAG > ID type in nav
Needs to be its own DIV so that you have this module to move around, only alter things in that div

Type out a list that would be NAV buttons.

HOME

E-CARD

SLIDESHOW

LIST NAV

3) Under PROPERTIES click the list

• HOME
• E-CARD
• SLIDESHOW
• LIST NAV

4) add links

5) tricky part > click on ul > then onto the new css rule > nav ul (creates compound rule for us) >#nav ul
all we do here is turn off the bullet points> style type none

6) then go> click on li > add css rule #nav ul li
this is where you would add "float" if you wanted to change nav from vertical navigation to horizontal. that is all you add in the properties for #nav ul li

7) click on the a and add css rule #nav ul li a
this is where you can change the size, shape, boarder of the box.

display: block;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
width: 100px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
padding-left: 5px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;

7) click on the a > click on to add another rule but this time add to the rule > add #nav ul li a:link,#nav ul li a:visited
this is where you can change the change the text, size, color, no underline of the link property

8) duplicate: change #nav ul li a:hover, #nav ul li a:active
change properites of the rollover ...

*) want to make it horizontal nav: go to the #nav ul li
box > float > left

play with making your buttons look good either horizontal or vertical. save an push live (upload file to your people.ku.edu....

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
adding background image

1) go to #nav ul li a (that controls the anchor tag)

2) under background you can add a color or if you wanted an image in there you could add that

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
want to add a graphic to you button?

Site Navigation with CSS in Dreamweaver
chapter 3: Implementing sprites

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
want to add a graphic to you button?

Site N