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

1. images in dreamweaver
M E T A L
S C H O O L

2. css styling:
image
put the cursor in the para under ‘the debut album’ just in front of the words
M E T A L ‘in 2007...’
S C H O O L

3. css styling:
image
from the insert menu, click on image. navigate to the metalschool folder and
M E T A L choose the 1atsoundclick.png file
S C H O O L

4. css styling:
image
give it the alt tage of ‘chart’
M E T A L
S C H O O L

5. css styling:
image
the image comes in where the cursor was. click on the image
to select it (if it isn’t already). in the properties box, choose the
M E T A L align option to ‘left’
S C H O O L

6. css styling:
image
img is the html tag for images. create a new css rule (using the
compound tag) for #mainContent img - make margin-right: 15px
M E T A L to push the surrounding text from the image away from it
S C H O O L

7. css styling:
image
let’s put in one more graphic by changing the h1 headline on top
of the page. because it is looking clunky. select the headline and
delete it. choose image from the insert menu and select the file
M E T A L ‘alternativerockersgraphic.png’ from the metalschool folder
S C H O O L

8. css styling:
image
the grungy headline graphic is in and fits the page better. check
the main content region - text and graphics - in safari view.
M E T A L
S C H O O L

9. css styling:
header
filling in the header image
M E T A L
S C H O O L

10. css styling:
header
select the place-holder text in the header region and delete it. make sure in
code view that the cursor is between the <div id=”header”> and </div> tags.
open the css rule for the #header region
M E T A L
S C H O O L

11. css styling:
header
increase height to 180px. delete the color choice in the background
category. choose the background-image from the metalschool folder:
header1.png. click ok
M E T A L
S C H O O L

12. css styling:
header
the header graphic is now in place
M E T A L
S C H O O L

13. styling the sidebar
M E T A L
S C H O O L

14. css styling:
sidebar
in the split view select the place-holder text in the sidebar and delete it. make
sure the cursor now flashes between the <div id=”sidebar”> and </div> tags
M E T A L
S C H O O L

15. css styling:
sidebar
copy the text from sidebar.txt and paste in sidebar. unformatted text crams up
as shown above. everything is within a single pair of <p> and </p> tags instead
of multiple paras and we have to now structure the text with html tags
M E T A L
S C H O O L

16. css styling:
sidebar
make the text into multiple paragraphs by using the enter/return key as shown
above. ensure there are no trailing spaces at the end of each para
M E T A L
S C H O O L

17. css styling:
sidebar
mark all html tags. h1 is for the ‘discography...’ line. h2 is for ‘the debut album’
half-way down the page. h3 is for album names ‘hover’ and ‘eleven complaints’.
h4 is for ‘track list’ which occurs two times. mark them both. select the songs
M E T A L under each track list and mark them as an ordered list (ol) in the properties box
S C H O O L

18. css styling:
sidebar
general tweak 1: let’s change the arbitrary, bright green background of
the sidebar. select the #sidebar from the css panel and double-click.
M E T A L
S C H O O L

19. css styling:
sidebar
select the background-color and delete the value. choose a
background image by clicking on the browse button and navigate to
the sidebar-gradient-bg.jpg in the metalschool folder. click ok
M E T A L
S C H O O L

20. css styling:
sidebar
the gradient background for the sidebar
M E T A L
S C H O O L

21. css styling:
sidebar
general tweak #2: to style the general <p> tag within the sidebar which
is not yet styled. click within the line that begins ‘launch pics...’ create
new css rule
M E T A L
S C H O O L

22. css styling:
sidebar
set font-size: 0.7em; line-height: 1.3; left margin: 15px
M E T A L
S C H O O L

23. css styling:
sidebar
para tag is now styled with css and aligns with
other elements on the page
M E T A L
S C H O O L

24. css styling:
sidebar
with cursor inside the h1 headline, create new css rule. compound selector
shown above will appear. click ok.
M E T A L
S C H O O L

25. css styling:
sidebar
in the box, fill in the values shown in the right column on top. color: #630;
font-size: 16px; font-weight: bold; margin: 15px (each for top, right,
bottom, left)
M E T A L
S C H O O L

26. css styling:
sidebar
with cursor in the h2 headline (‘the debut album’) create a
new css rule
M E T A L
S C H O O L

27. css styling:
sidebar
the border at the bottom has to be made ‘none’ to cancel the overall h2 tags
having a dotted border. set font-size to 14px; color to #630; and margin top
M E T A L and bottom to 15px
S C H O O L

28. css styling:
sidebar
with cursor inside a h3 tag (‘hover’ or ‘eleven complaints’), create new css rule.
fill in the values as above. font-family: georgia...; font-size: 14px; font-weight:
bold; font-variant: small-caps; color: #033
M E T A L
S C H O O L

29. css styling:
sidebar
with cursor inside a h4 tag (either of the 2 ‘track list’ mentions), create new
css rule. fill in the values as above. font-family: verdana...; font-size: 0.7em;
font-weight: bold; color: #066
M E T A L
S C H O O L

30. css styling:
sidebar
this is the way it looks at this stage. the h1, h2, h3 and h4 tags inside of
the sidebar are all done. we have yet to style the ordered list (ol), the
M E T A L paragraph (p), the images of the cd albums and the cd descriptions
S C H O O L

31. css styling:
sidebar
let’s get a couple of image place-holders in place. select ‘(cd photo)’ in the
design view and delete. check the code view and delete the <p> </p> tags for
that line as well. with the cursor in the blank line ahead of the <h3> tag...
M E T A L
S C H O O L

32. css styling:
sidebar
click on insert > image objects > image placeholder.
M E T A L
S C H O O L

33. css styling:
sidebar
fill in the details as above and click ok
M E T A L
S C H O O L

34. css styling:
sidebar
the grey place-holder appears. we will move it away from the left edge of the
sidebar with some css
M E T A L
S C H O O L

35. css styling:
sidebar
select the place-holder by clicking on it. create new css rule. you will find a
compound selector pre-chosen for ‘#wrapper #sidebar img’ - which means an
M E T A L image within the sidebar within the wrapper. click ok
S C H O O L

36. css styling:
sidebar
set the left margin to 15px. that will push the image away from the left
edge of the sidebar and align with most other text there
M E T A L
S C H O O L

37. css styling:
sidebar
now for the other album image. delete similar phrase half-way down the page:
(cd photo). with the cursor carefully positioned as before, click on insert > image
objects > image placeholder. fill in the same details as before. click ok
M E T A L
S C H O O L

38. css styling:
sidebar
the place-holder image already has a left margin of 15px in the css
M E T A L
S C H O O L

39. css styling:
sidebar
now onto the ordered list. click somewhere within the list and create new
css rule
M E T A L
S C H O O L

40. css styling:
sidebar
you’ll get a compound selector like the one shown above. click ok
M E T A L
S C H O O L

41. css styling:
sidebar
use the values above - font-size: 0.8em; line-height: 1.5; and left margin: 15px
M E T A L
S C H O O L

42. css styling:
sidebar
the sidebar shaping up. all headings, image place-holders,
ordered lists are in place. all that remains is the album
M E T A L
S C H O O L descriptor and some general tweaks

43. css styling:
sidebar
now for the last part: the descriptor of the album - name and release date.
this should be styled in such a way that it appears as a unit to the right of
the album image. we first select the lines as above in code view
M E T A L
S C H O O L

44. css styling:
sidebar
with the lines selected, click on the ‘wrap tag’ icon in the left column
(in red circle). this puts a <div> </div> tag around the chosen lines
M E T A L
S C H O O L

45. css styling:
sidebar
in the wrap tag box that appears, write <div class=”descriptionbox”>
and press enter
M E T A L
S C H O O L

46. css styling:
sidebar
set the font-size: 0.9em; color: #666; width of the box to 140px; float: right;
clear: right; and top border: solid, thin and color of #066
M E T A L
S C H O O L

47. css styling:
sidebar
go down the page and do exactly another div tag with the same class of
descriptor. shown above: the lines selected for the div tag to wrap around
M E T A L
S C H O O L

48. css styling:
sidebar
the .descriptionbox div tag shown in code on the left. and its effect in
design view on the right
M E T A L
S C H O O L

49. css styling:
sidebar
all in place! as seen on safari
M E T A L
S C H O O L

50. css styling:
sidebar
except... when you look closely the ‘release date...’ line is
not flush left aligned; it is indented (by 15px that most
elements in the sidebar are)
M E T A L
S C H O O L

51. css styling:
sidebar
place the cursor anywhere inside the ‘release date...’ line. and
make a new css rule
M E T A L
S C H O O L

52. css styling:
sidebar
make sure the selector is compound and the name for
the selector is as shown above: #wrapper
#sidebar .descriptionbox p. click ok
M E T A L
S C H O O L

53. css styling:
sidebar
set the left margin to 0px. this will reset the margin for any
para inside a description box
M E T A L
S C H O O L

54. css styling:
sidebar
now the line is flush with hover and
the green line above
M E T A L
S C H O O L

55. css styling:
sidebar
now for the real images to replace place-holders.
click on the place-holder image
M E T A L
S C H O O L

56. css styling:
sidebar
in the dialog box navigate to your metal school folder and click on the
hover-cd-cover-85x77.jpg. click on the choose button
M E T A L
S C H O O L

57. css styling:
sidebar
the real image is in place now
M E T A L
S C H O O L

58. css styling:
sidebar
similarly choose the other place-holder and link it
to 11comp-cd-cover.jpt in your metal school folder
M E T A L
S C H O O L

59. css styling:
sidebar
as final tweaks to the sidebar, the gap below ‘the
debut album’ line should be a little more. and the
gap below ‘track list’ should be a little less
M E T A L
S C H O O L

60. css styling:
sidebar
to increase the gap below ‘the debut album’ open up the css
rule definition by double-clicking on #wrapper #sidebar h2 in the
css panel. add a bottom margin: 10px and click ok
M E T A L
S C H O O L

61. css styling:
sidebar
to reduce the gap below ‘track list’ open up the css rule definition
for #wrapper #sidebar h4 and make the bottom margin -10px
and click ok
M E T A L
S C H O O L

62. css styling:
sidebar
the space issues are fixed now
M E T A L
S C H O O L

63. css styling:
footer
set the #footer region to the above parameters.
M E T A L and the page is done.
S C H O O L