Let's build a website with Dreamweaver - IV

  • 1,689 views
Uploaded on

how to create a photo gallery for your website using dreamweaver

how to create a photo gallery for your website using dreamweaver

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • ALHLiALH. Thanks for the really nice afford that you make this tutorial Sir.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,689
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
56
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide


























































































































Transcript

  • 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