Flash Basics

In a departure from Dreamweaver and HTML we are going to move over to Flash CS5.  Please watch the following video and then open Flash CS5 and begin experimenting with timeline animations.

Try and make a movie that has a couple shape tweens and multiple layers.

Dreamweaver Site to Turn in

In one folder (named your name_topic) please turn in the following:

• your 4+ DW pages
• any images you created or uploaded from your computer

be sure the folder you turn in is the same folder as the one selected as your "site" folder in DW.

Turn this into the classes folder.

Web 1 - design concerns

Be sure you follow the following elements of good design:

• Be prepared
• Keep it simple
• Make navigation logical and consistent
• text needs to be legible, correctly spelled and fitting to the page
• colors need to look nice, be appropriate for your topic and be consistent from page to page.
• essentially your site should be simple, concise, and easy to navigate!

Web 2 CSS fonts

CSS Code:

h4 { color: red; }

h5 { color: #9000A1; } 

h6 { color: rgb(0, 220, 98); } 

Display:

This is a red h4 header.

This is a hexadecimal #9000A1 h5 header.

This is an rgb(0, 220, 98) h6 header.

In the above example we used three different formats for defining a color: a color name, hexadecimal values, and RGB. Check out the list of supported color names. Hexadecimal form is a pound sign (#) followed by at most 6 hex values (0-F). RGB defines the individual values for Red, Green, and Blue.
Example form: rgb(Red, Green, Blue); with the range of 0-255 for each value.

CSS Font Family

Font families can be divided into two groups: serif and sans-serif. A sans-serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans-serif fonts are much easier to read on a computer monitor than serif fonts.

CSS Code:

h4 { font-family: sans-serif; }

h5 { font-family: serif; } 

h6 { font-family: arial; } 

Display:

This is a header with sans-serif font

This is a header with a serif font

This is a header with an arial font

As you probably noticed throughout Tizag.com, we do not use serif fonts, except in special cases, like for the titles of the Code and Display boxes.

CSS Font Size

You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so. Percentages are great when you want to change the default font, but do not want to set a static value.

CSS Code:

p { font-size: 120%; } 

ol{ font-size: 10px; } 

ul{ font-size: x-large; }

Display:

This is a font size of 120%

1. This is a font size of 10px

• This is a font size of "x-large"

Though key terms are not very useful, the common terms are: xx-large, x-large, large, medium, small, x-small, and xx-small.

CSS Font Style

CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

CSS Code:

p { font-style: italic; }

h4{ font-style: oblique; }

Display:

This is an italic font

This is an oblique font

CSS Font Weight

If you want to control the weight of your font (its thickness), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100 (thin)-900 (thick).

CSS Code:

p { font-weight: 100; } 

ul{ font-weight: bolder; }

Display:

This is a font with a weight of 100

• This is a font with
• a "bolder" weight

Web 2

PLACING A HEADER AND FLOATING AN IMAGE:

.header {
    background-image: url(header.gif);
    position: absolute;
    height: 250px;
    width: 700px;
    right: 600px;
    top: 0px;
}

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:

Example

img
{
float:right;
}

DW Site Requirements

• 4+ pages
• table layout
• banner
• header
• menu w/ rollovers
• content on each page
• footer
• title
• BG
• consistent from page to page

EC -  coming soon.

Web Design 1

Making a SC Site using Dreamweaver and Tables:

First we need to make a basic table with 1 column and 5 rows

Then in the 4th row, make another table with 2 columns and 1 row

All of these should have no border etc.

Then off to photoshop to create!

web 2

for a banner:

This is the basics of location etc:

ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }


This is the code that gives your text a border/box/style:

ul.navbar li a {
text-decoration:none;
display:block;
border-top:1px solid #0BB5FF;
padding:5px;
background:#236B8E;
color:#eee
}



This is the code for adding a rollover:


ul.navbar li a:hover {
background:#36DBCA;
color:#000
}

All you need to call to in your HTML is the navbar:

css containers

example for your .css file

.center_div
{
border:5px dashed black;
margin-left:auto;
margin-right:auto;
margin-top:200px;
width:90%;
opacity: .9;
height:340px;
background-color:#d0f0f6;
text-align:left;
padding:38px;
}
and for your html page:  in < > but blogger will not allow them:

div class="center_div"

/div

ALWAYS define a site in DW