Week 3 : 29th April 2009 : Combining Flash, CSS and HTML in Dreamweaver
1 – Preliminary introduction to site building
a) Goto the temporary MADDM website here. Navigate around the site using the menu.
b) Download a copy of the site from here and save it to your home space.
c) Decompress the zip file.
2- Setting up the Dreamweaver project
a) Open up Dreamweaver, then goto Site>New Site.
b) Name your site and choose local root folder by locating and selecting the decompressed site folder.
c) The project files should appear on screen.
d) Open up the index.html file.
e) Open the style.css document.
f) Preview the index.html document in a browser window.
File>Preview in Browser.
g) Go back to the style.css document in Dreamweaver.
h) Change a couple of the parameters in the style sheet.
(i.e add borders, lose padding etc.)
i) Save the changes to the style sheet and review any of the html documents in a browser window.
j) Spend a few minutes examining the relationship between the style sheet and the content layout.
k) Experimentation!
l) Try preparing some images in photoshop, saving them for web (normally JPG) into the image folder of your website, then inserting them into the html pages on your website. Insert>Image.
3- Examining the Flash navigation
a) Goto the site folder in the finder.
b) Open the .fla file named top menu.fla
c) Preview how the swf looks. File>Publish Preview>Default
d) Goto the library (Window>Library) and examine the cast members.
e) Replace the seagull image and/or the button design.
f) Move the type around. Change the font etc.
g) Export the edited movie. (File>Export>Export Movie)
Replace as requested.
h) Go back to Dreamweaver and preview a Html page in browser.
i) Repeat the process until you are satisfied with the Flash navigation design.
Tags: portsmouth, university