Create a simple web page in
Adobe Dreamweaver
OPEN the .html file>
At the top of the frame you will see a space to title your webpage
>ENTER a name under title< (Ex. Schauer’s Home Page)
At the bottom of the frame you will see Page Properties
CLICK Page Properties>
ENTER
> a background color
> a background Image
In the right column go to the CSS styles menu
CLICK New CSS rule> (small icon at the bottom of the CSS style menu)
CHOOSE
Compound
ENTER
“ * “ into the ID
CHOOSE
New Style Sheet
CLICK
Ok
SAVE AS
Layout.css
The new CSS style properties should appear. Go to the Box category on this menu.
Set the Margins and Padding to Zero
Now you have created a universal rule that will fix the style sheet to the website
window to the top left corner of the screen. Now, Go to the Common Design Menu at
the top right of your workspace. Find Insert Div Tag
CLICK
CHOOSE
ENTER
CLICK
Insert Div Tag
At Insertion Point
ID as “wrapper”
Ok
You have now made a Div Tag with no CSS rules. You must now make a new CSS
Rule as you did before for the Div Tag with the ID wrapper.
CLICK
CHOOSE
New CSS Rule
Compound
The ID should already be entered as #wrapper. If it is not ENTER #wrapper
CHOOSE
CLICK
Layout.css
Ok
A window should pop up allowing you to set the rules for #wrapper. Under the box
category enter the following:
ENTER
ENTER
CHOOSE
Width: 800
right and left to auto
a background color
Now Any Div tag places within wrapper will automatically be centered in the middle
of the screen
INSERT
CHOOSE
ENTER
New Div Tag
After End of tag - #wrapper
ID as “ Logo “
For this new Div tag you must now create a new CSS rule
CLICK
CHOOSE
New CSS Rule
Compound
The ID should already be entered as #wrapper #wrapper #logo. If it is not ENTER
#wrapper #logo. This is telling us that the Div Tag logo is within the div tag and CSS
rule # wrapper
CHOOSE
CLICK
Layout.css
Ok
A window should pop up allowing you to set the rules for #wrapper #wrapper
#logo. Under the box category enter the following:
ENTER
CHOOSE
Height: 100
a background color or Logo Image
Find a logo or header you want to drop in there. Text will do fine for now. Later you
can insert a logo or image. Notice No width is necessary since the CSS rule on
wrapper already set the width to 800px. Next we will create a menu Div Tag. Are
you beginning to see a pattern yet?
INSERT
CHOOSE
ENTER
New Div Tag
After tag - #logo
ID as “ menu “
For this new Div tag you must now create a new CSS rule
CLICK
CHOOSE
New CSS Rule
Compound
The ID should already be entered as #wrapper #menu. If it is not ENTER #wrapper
#menu This is telling us that the Div Tag logo is within the div tag and CSS rule #
wrapper and after the tag #logo
CHOOSE
CLICK
Layout.css
Ok
A window should pop up allowing you to set the rules for #wrapper # menu. Under
the box category enter the following:
ENTER
CHOOSE
Height: 35
a background color
This will be the area where we will Later put our Menu. Next we will make the areas
for the Flash Motion Graphic (splash graphic) you created earlier.
INSERT
CHOOSE
ENTER
New Div Tag
After tag - #menu
ID as “ splash “
For this new Div tag you must now create a new CSS rule
CLICK
CHOOSE
New CSS Rule
Compound
The ID should be #wrapper #splash
CHOOSE
CLICK
ENTER
CHOOSE
Layout.css
Ok
Height: 550
a background color
INSERT > MEDIA >> SWF
CHOOSE
the SWF file of your Flash Graphic
This should set your graphic in the div tag. It will not play in Dreamweaver you must
preview it in your browser for it to play. After this we will make a footer for your
index page. Try doing this on your own.