how to create a photo gallery for your website using dreamweaver

1. creating page two
M E T A L
S C H O O L

2. 3 things for today
•creating a new page with text and images (css being
already done makes this easy)
•creating a photo gallery
•creating a youtube video
M E T A L
S C H O O L

3. cleaning up css
M E T A L
S C H O O L

4. css styling:
clean-up
the story so far... the page is done. now for some tweaks in design and css
M E T A L
S C H O O L

5. css styling:
clean-up
double-click on #body in the css panel. delete background color. link
background image to bglinegradient.jpg in the metalschool folder. in
M E T A L ‘background-repeat’ choose the ‘repeat-x’ option
S C H O O L

6. css styling:
clean-up
the new dark brown to deep green gradient of the body tag
M E T A L
S C H O O L

7. css styling:
clean-up
we want to change the base color of the sidebar in a similar way.
double-click on #sidebar in the css panel. change background image
to sidebargradient-green_01.jpg in the metalschool folder
M E T A L
S C H O O L

8. css styling:
clean-up
sidebar color changed to light green gradient. the page is done. save
it as aboutus.html
M E T A L
S C H O O L

9. css styling:
clean-up
now to clean up the css. re-order the css rules in css panel in a logical
manner by dragging items as necessary (see pic on above left). select all
by clicking on #body on top and shift-clicking on .songName at bottom.
M E T A L right click. choose ‘move css rules...’
S C H O O L

10. css styling:
clean-up
choose ‘a new style sheet...’ and click ok.
M E T A L
S C H O O L

11. css styling:
clean-up
browse to your main folder of your site and within that create a new
folder called css. name the style sheet ‘main.css’. in media choose
the ‘screen’ dropdown option. click ok
M E T A L
S C H O O L

12. css styling:
clean-up
now right-click the selected items in the panel and choose
‘delete’. the css is gone!
M E T A L
S C H O O L

13. css styling:
clean-up
this is how the main screen looks like without any css
M E T A L
S C H O O L

14. css styling:
clean-up
to link to your main.css external style sheet click on link icon at the
bottom of css panel (circled in red above). link to your main.css in the
dialog boxes that follow. you will see the main.css appear in the panel
M E T A L (see pic right above)
S C H O O L

15. css styling:
clean-up
in code or split view, you will find the css lines missing. instead there is
just a reference to an external file called main.css in the head section
of the code. this is an efficient way of writing code
M E T A L
S C H O O L

16. css styling:
clean-up
before we create a new page, let’s organise our site.
click on ‘manage sites...’ option in the site menu
M E T A L
S C H O O L

17. css styling:
clean-up
click on new if the site is unnamed. or else click on edit.
M E T A L
S C H O O L

18. css styling:
clean-up
type in site-name as kastasite and fill in the local site folder
appropriately. click on advanced settings and under local info fill in the
default images folder. links relative to document (default) is fine. save
M E T A L
S C H O O L

19. adding a new page
M E T A L
S C H O O L

20. css styling:
new page
open your class I file with just the coloured regions on it. save as gallery.html
M E T A L
S C H O O L

21. css styling:
new page
double-click on #header in the css panel. make height: 180px and
link background-image to header1.png
M E T A L
S C H O O L

22. css styling:
new page
the header is now in place
M E T A L
S C H O O L

23. css styling:
new page
now for the footer. select the placeholder text and delete. with the cursor
blinking in place after deletion, insert the copyright symbol by going to
M E T A L insert menu > html > special characters > copyright
S C H O O L

24. css styling:
new page
type ‘copyright 2010 kastadyne. all rights reserved.’ it’s unreadable for now
but will become ok when css comes into play
M E T A L
S C H O O L

25. css styling:
new page
delete placeholder text in the sidebar and import text from sidebar2.txt
from your metalschool folder. now we have to tag the html in the copy
M E T A L
S C H O O L

26. css styling:
new page
select ‘album reviews’ and in the properties panel below mark the format
as ‘heading 1’.
M E T A L
S C H O O L

27. css styling:
new page
select ‘hover’ and tag similarly as heading 2
M E T A L
S C H O O L

28. css styling:
new page
similarly tag ‘eleven complaints’ as ‘heading 2’
M E T A L
S C H O O L

29. css styling:
new page
choose the para that mentions lindsay pereira and tag as ‘heading 4’
M E T A L
S C H O O L

30. css styling:
new page
the black of the #wrapper tag can obscure visibility. so
go to css panel and change #wrapper’s background-
color to #fff (white)
M E T A L
S C H O O L

31. css styling:
new page
tag the phish review line as ‘heading 4’ too
M E T A L
S C H O O L

32. css styling:
new page
now that we’ve tagged the sidebar let’s get rid of the old css. we will
replace it with the external style sheet we created (main.css) earlier. select
all styles in the css panel, right-click and delete
M E T A L
S C H O O L

33. css styling:
new page
you will get a warning message. go ahead and click yes
M E T A L
S C H O O L

34. css styling:
new page
it’s gone! and the page looks bare... click on the tiny chain (link) icon on the
bottom of the css panel (circled red). it’s to the left of the ‘make new css rule’
icon you’ve been using all along
M E T A L
S C H O O L

35. css styling:
new page
find the main.css you saved earlier. click ok. it’s all back!
M E T A L
S C H O O L

36. css styling:
new page
the footer copy is readable too
M E T A L
S C H O O L

37. css styling:
new page
the css has vanished from code view. main.css is now a separate
file which is to the right of ‘source code’ on the top menu strip
M E T A L
S C H O O L

38. css styling:
new page
now to insert the cd images. keep the cursor after the </h2> tag of hover
in code view. as before, go to insert menu > image and choose the
hover-cd-cover-85x77.jpg from the metalschool folder
M E T A L
S C H O O L

39. css styling:
new page
align the cd image to left in the properties > align panel below
M E T A L
S C H O O L

40. css styling:
new page
similarly insert 11comp-cd-cover jpg from the metalschool folder in the
‘eleven complaints’ section
M E T A L
S C H O O L

41. css styling:
new page
align this to the left too in the properties panel as before
M E T A L
S C H O O L

42. css styling:
new page
insert a break tag after the phish’s review line to increase the space
below it. the syntax is <br /> (this does not require a </br> to complete
it. the slash is already in the syntax)
M E T A L
S C H O O L

43. creating a photo gallery
M E T A L
S C H O O L

44. css styling:
gallery
choose the main content placeholder text and delete
M E T A L
S C H O O L

45. css styling:
gallery
what we want to create is pictured above. with cursor blinking on the blank
page, insert image photogallery.png from the metalschool folder. then type
the words ‘Click on photo to enlarge’ on a fresh line and tag it as ‘heading 2’
M E T A L
S C H O O L

46. css styling:
gallery
we need a plug-in. go to help menu > dreamweaver exchange
M E T A L
S C H O O L

47. css styling:
gallery
search for ‘thickbox’ at the adobe exchange
M E T A L
S C H O O L

48. css styling:
gallery
click on the ‘download’ button for the thickbox gallery
M E T A L
S C H O O L

49. css styling:
gallery
to download you have to be a member. click on ‘create an adobe
account’ button and sign in. you can download the gallery which is an
extension (.mxp) file
M E T A L
S C H O O L

50. css styling:
gallery
install the .mxp file by double-clicking it and accepting the legalese
M E T A L
S C H O O L

51. css styling:
gallery
the installation box tells you that you can select the thickbox gallery from the
insert menu > tcn widgets > thickbox inside of your dreamweaver document
M E T A L
S C H O O L

52. css styling:
gallery
in code window, place cursor after the </h2> tag after the words ‘click
on photo to enlarge’ and select thickbox gallery from menu
M E T A L
S C H O O L

53. css styling:
gallery
thickbox code is inserted and a couple of placeholder pictures
appear in design view. to create your gallery, replace with your pics
M E T A L
S C H O O L

54. css styling:
gallery
before we do that, notice that in the css panel there is a new group under
<style> called thickbox.css. open it up and you will see the .thickbox img
class. double-click on it and change all-round padding to 10px and all-
round border to: thin, solid and #060 in the appropriate columns
M E T A L
S C H O O L

55. css styling:
gallery
with the first photo selected, click on the circular icon next to the src box in the
properties panel and drag a line to bw1-small.jpg in the files folder. let go
M E T A L
S C H O O L

56. css styling:
gallery
with the same photo selected, click on the circular icon next to the link box in the
properties panel and drag a line to bw1-big.jpg in the files folder. let go
M E T A L
S C H O O L

57. css styling:
gallery
do the second photo in the same way linking to bw2-small.jpg and bw2-big.jpg.
to provide a bit of space between the dotted rule and the gallery, double-click
on the .thickbox img class in the css panel and make margin-top: 10px
M E T A L
S C H O O L

58. css styling:
gallery
to insert more pictures select the two photos and copy them
M E T A L
S C H O O L

59. css styling:
gallery
click in the empty space to the right of the second photo and paste. you will
get the box (above right). fill in ‘pic 3’ and ‘pic 4’ as description and click ok
M E T A L
S C H O O L

60. css styling:
gallery
complete the gallery of 8 photographs in a similar fashion
M E T A L
S C H O O L

61. css styling:
gallery
the finished gallery is now up and running...
M E T A L
S C H O O L