Let's build a website with Dreamweaver - V

974 views
905 views

Published on

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

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
974
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide








































































































  • Let's build a website with Dreamweaver - V

    1. 1. putting up a youtube video M E T A L S C H O O L
    2. 2. but before that, a couple of thickbox tweaks... M E T A L S C H O O L
    3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. css styling: video the whole gallery page seen in live view M E T A L S C H O O L
    16. 16. creating links M E T A L S C H O O L
    17. 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. 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. 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. 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. 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. 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. 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. 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. 25. creating a navbar M E T A L S C H O O L
    26. 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. 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. 28. css styling: spry navbar select the horizontal layout and click ok M E T A L S C H O O L
    29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 52. M E T A L S C H O O L

    ×