Dreamweaver CS5 is used here to construct a fully working website over 6 sessions of a walk-through tutorial

1. putting up a youtube video
M E T A L
S C H O O L

2. but before that, a couple of thickbox tweaks...
M E T A L
S C H O O L

3. css styling:
thickbox
thickbox automatically adds a fresh list of css rules in the css panel when it is
installed. the last item on the list is .thickbox img - which refers to the individual
image inside of a thickbox gallery. double-click to open the css rule box
M E T A L
S C H O O L

4. css styling:
thickbox
fill in values as shown above for padding, margin and border settings
M E T A L
S C H O O L

5. css styling:
thickbox
the gallery is well spaced out because of the padding and margin
settings. and with a thin green border around each thumbnail photo
M E T A L
S C H O O L

6. css styling:
video
let’s get a youtube video going on our sidebar on the gallery page
M E T A L
S C H O O L

7. css styling:
video
fire up safari and go to http://www.youtube.com/watch?
v=2AqIak6K43w
M E T A L
S C H O O L

8. css styling:
video
click on <embed> button. a lot of options open up. choose the
425x344 rectangle
M E T A L
S C H O O L

9. css styling:
video
select the embed code and right-click to copy it
M E T A L
S C H O O L

10. css styling:
video
in the dw document (code window) click on an empty line after the </h1> tag
that follows the line ‘introducing kastadyne’. paste the embed code. click in the
design window to see the placeholder
M E T A L
S C H O O L

11. css styling:
video
since the video is wider than our sidebar, we make the above changes
in dimensions in code window. remember to do this in two places in
the code as shown above
M E T A L
S C H O O L

12. css styling:
video
with the embed code still selected go to the class id box in the properties panel
and choose the shockwave for flash option. this changes the video codec from
active-x (microsoft) to flash
M E T A L
S C H O O L

13. css styling:
video
also change the wmode in the properties panel to ‘transparent’
M E T A L
S C H O O L

14. css styling:
video
the embed code within the html document is tagged as ‘object’ within
the mainContent div. so make a new css rule for #mainContent object
and make margin-top: 10px to provide some breathing space on top of
the video screen
M E T A L
S C H O O L

15. css styling:
video
the whole gallery page seen in live view
M E T A L
S C H O O L

16. creating links
M E T A L
S C H O O L

17. css styling:
links
every web page has links. in the gallery page choose the words ‘launch pics’ in the
sidebar and turn them into a link. in the properties box below, drag out a line to
gallery.html in the files panel as shown above. the link is created
M E T A L
S C H O O L

18. css styling:
links
now select the word ‘reviews’. since there is no ready link available,
type ‘#’ in the link box as a temporary link. this is a pseudo link
which permits clicks for testing purposes although it doesn’t lead
anywhere. do a similar pseudo link for ‘buy cd’
M E T A L
S C H O O L

19. css styling:
links
if we don’t like the default styling of blue lettering with underline, we
create a new css rule. choose tag as selector and select ‘a’ from the
drop-down menu. this is the html tag for anchor text or link. click ok
M E T A L
S C H O O L

20. css styling:
links
choose type color as #000 (black), text-decoration as ‘underline’
M E T A L
S C H O O L

21. css styling:
links
now for the hover state - i.e. when a user hovers the mouse
over a link. create new css rule. select compound selector and
type in a:hover. click ok
M E T A L
S C H O O L

22. css styling:
links
fill in the values as above - color #930 and text-decoration: underline
M E T A L
S C H O O L

23. css styling:
links
the hover state changes links to dark brown with a thin underline - keeping
with our site’s color scheme
M E T A L
S C H O O L

24. css styling:
links
now go to the bottom of the page and tag the other set of ‘launch pics’ etc
as links in a similar way. then go to the about page created earlier and tag
the links in the sidebar there too
M E T A L
S C H O O L

25. creating a navbar
M E T A L
S C H O O L

26. css styling:
spry navbar
keep the cursor in code view between the header and mainContent div tags
M E T A L
S C H O O L

27. css styling:
spry navbar
M E T A L go to insert menu > spry > spry menu bar
S C H O O L

28. css styling:
spry navbar
select the horizontal layout and click ok
M E T A L
S C H O O L

29. css styling:
spry navbar
the spry menu is now inserted under your header with default settings. in live
view check out its functionality
M E T A L
S C H O O L

30. css styling:
spry navbar
to edit the properties of the menu bar, click on the blue menu bar tag
in the design window
M E T A L
S C H O O L

31. css styling:
spry navbar
with ‘item 1’ selected (see blue arrow above) fill in the correct name
for your website menu in the text box (circled in red above)
M E T A L
S C H O O L

32. css styling:
spry navbar
type ‘home’ in the text box and press tab or enter to record the information
M E T A L
S C H O O L

33. css styling:
spry navbar
select sub-menu items under home, one by one, and delete them by clicking on
the minus sign above the box (circled in red above). do the same with the sub-
M E T A L items under ‘item 3’. we don’t need them.
S C H O O L

34. css styling:
spry navbar
type in 8 main menu items in the properties box: home (already done), albums,
download, gallery, blog, buy, contact and about. ignore the formatting shown in the
picture above. your screen view may look very different
M E T A L
S C H O O L

35. css styling:
spry navbar
double-click on ul.MenuBarHorizontal li in the css panel and make the changes
shown above and in the next slide
M E T A L
S C H O O L

36. css styling:
spry navbar
make the list-style type to ‘none’ to avoid bullets being shown
M E T A L
S C H O O L

37. css styling:
spry navbar
in the css panel, select the ul.MenuBarHorizontal a item
M E T A L
S C H O O L

38. css styling:
spry navbar
set parameters as shown above by linking to img03c.gif in your images folder. you
have to set up a few more parameters as well...
M E T A L
S C H O O L

39. css styling:
spry navbar
set borders to ‘none’; display to ‘block’ and padding as shown above
M E T A L
S C H O O L

40. css styling:
spry navbar
select ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus in
the css panel and double-click to open the css rule box
M E T A L
S C H O O L

41. css styling:
spry navbar
link the background-image to img04a.gif in your images folder. position it center
and select ‘repeat-x’. set type color to #300 and text-decoration to ‘none’
M E T A L
S C H O O L

42. css styling:
spry navbar
in the css panel, select the long item shown above and double-click it. make
M E T A L color:#300 and background-color:#ccc
S C H O O L

43. css styling:
spry navbar
click inside the word ‘about’ in the menu and in the properties box below, drag
out a link from the link box to the about.html file in the files panel as shown
M E T A L
S C H O O L

44. css styling:
spry navbar
similarly establish a link to the ‘gallery’ item on the menu to the gallery.html file in
the files panel
M E T A L
S C H O O L

45. css styling:
spry navbar
in a similar way create a spry menu bar for about.html page you created
earlier. use code view to insert it in the right place. fill up main item
details (home, albums, download, etc.). delete sub-menu items
M E T A L
S C H O O L

46. css styling:
spry navbar
make links to gallery and about pages as before. don’t do the css tweaks
- they’re already done and will automatically apply here
M E T A L
S C H O O L

47. css styling:
spry navbar
so far, a menu item has 2 states: unused (dark brown) and hover (light green).
we need a third ‘active’ state when the button is pressed - i.e. when the page it
represents is currently showing. in code view, find the unordered list of menu
items and change the beginning of the ‘aboutus.html’ line to <li class=”active”>
as shown above. this creates a new li class called active
M E T A L
S C H O O L

48. css styling:
spry navbar
create new css rule. choose compound selector and type in the name
as shown: ul.MenuBarHorizontal#MenuBar1 .active a
M E T A L
S C H O O L

49. css styling:
spry navbar
change parameters as shown. link to img05a.gif in your images folder.
this image will make the pressed button dark green
M E T A L
S C H O O L

50. css styling:
spry navbar
now go to the gallery.html page and in code view, make a similar change to the
li line with ‘gallery’ in it. make that line active as shown above
M E T A L
S C H O O L

51. css styling:
spry navbar
check the navbar in safari and make sure all 3 states of normal, hover and active
work correctly
M E T A L
S C H O O L

52. M E T A L
S C H O O L