Part One: Creating a Gallery page

  1. Video - m06-01
  2. This next exercise will require eight images. The images should all be the exact same size. In this case, we have eight images, 1000px wide, and 750px height. If you do not have your own images, you can use the images provided in the student files.
  3. Open the gallery.html page
  4. Switch to Code view, remove the placeholder content 'mainContent', press Enter/Return to add some space
  5. Press F5 to refresh
  6. In the Insert panel, select div. In the insert div dialog box, assign the div a class of "container."
  7. Delete the place holder content in the newly added: <div class="container"></div>
  8. Switch to Live view, and make sure that the div.container is selected in the DOM panel
  9. Click the green bar in the visual media queries bar
  10. Select Insert / Bootstrap Components
  11. Add a Grid Row with column (1) inside the Container, use 'nest' for placement
  12. Place your cursor inside the new div.container <div class="col-xs-12"> </div>
  13. Select top menu Insert
  14. Select Heading:H2
  15. Change the placeholder text 'This is the content for Layout H2 Tag'  h2 ' to 'Gallery'
  16. We are going to be creating several pages with this same content, so we will same the code you created to a Dreamweaver snippet. Highlight all the code you have all to the page thus far.
  17. Under 'Window' select 'Snippets' (or shift+F9)
  18. On the bottom of the pop-up box, click the icon of a file with a '+' inside. A new shipped opens
  19. In the name Field (top of the box) type 'Starting_Code'
  20. Click 'Insert block'
  21. Drag the new snipped to the 'Bootstrap_Snippets' folder
  22. Close snippets.
  23. Save gallery.html
  24. Video - m06-02
  25. Preparing to add images:
    1. From the "Files" panel, Create a new folder in the "images" folder named "gallery"
    2. If you are using your own images, you can drag and drop them into the newly created images folder.
    3. If you are using the Tutorial files, drag the eight images from folder: tutorial/images/gallery into the newly created images folder
  26. You should be working in Code view
  27. Place the cursor after the <h2>Gallery</h2> tag
  28. Select top menu Insert /  Div
  29. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector "#photoGallery"
  30. Delete the placeholder content 'Content for New Div Tag Goes Here'
  31. Press F5 to refresh the page
  32. In the Property inspector, assign the div to the id "photoGallery"
  33. Video - m06-03
  34. Place the cursor inside the #photoGallery div
  35. Switch to Design view, and choose insert image from the insert menu, or use the keyboard shortcut ctrl + alt + I
  36. Navigate to the new gallery folder (inside the images folder)
  37. Click with your cursor after the image you just inserted
  38. Insert another image.
  39. Repeat until you have added all eight images.
  40. Click on the first image, and in the Property inspector, remove the Width and Height, and add in content for Alt and Title. Alt should be a short description, and Title should be an appropriate TItle for the image. Both Alt and Title may be the same.
  41. Repeat for all images
  42. Press F12 and Save All, and preview in browser
  43. Video - m06-04
  44. Switch to Live view
  45. Select the img tag in the Status bar.
  46. In the CSS Designer, select styles,css, GLOBAL, and click (+) to add a new Selector.  Press the up arrow to select #photoGallery img
  47. Add a property of width:100%. Notice how the image maintains its full size as the change with width of the viewport
  48. Press F12 to preview in a browser, save all files.
  49. We will now add media queries to change the size of the image based on the kind of web browser we are using.
  50. In the CSS Designer, in @Media, click '+' to add new media query. In the dialog box, hover to the right of the existing query, and click on the '+' that appears to add a new query, with a minimum width of 768px
  51. In the CSS Designer, in @Media, click '+' to add new media query. In the dialog box, hover to the right of the existing query, and click on the '+' that appears to add a new query, with a minimum width of 992px
  52. In the CSS Designer, in @Media, click '+' to add new media query. In the dialog box, hover to the right of the existing query, and click on the '+' that appears to add a new query, with a minimum width of 1200px
  53. Save All
  54. Video - m06-05
  55. In CSS Designer, with styles.css and our new rule, min-width:768px selected, click '+' to create a new selector, #photoGallery img
  56. Set image width to 50%.
  57. Move the Live View Scrubber to see the effect of the new media query
  58. In CSS Designer, with styles.css and our new rule, min-width:1200px selected, click '+' to create a new selector, #photoGallery img
  59. Set image width to 25%.
  60. Press F12
  61. Save All and Preview in Browser
  62. Notice as you hover over an image, the title is displayed.
  63. Return to the initial CSS selector, #photoGallery img, in the GLOBAL media query. If you do not see the selector, just click in the search field (magnifier) and start to type 'pho'
  64. We are going to add a css transition property. The property changeshow one css property transitions into another property.
  65. Scroll to the bottom of the Property panel, and add a property of transition: all 1.5s
  66. Save All
  67. Press F12  and preview in your browser. Notice the transition effect on the size change of the images
  68. Video - m06-06
  69. In CSS Designer, select styles.css from sources, min-width:768px from @Media, and #photoGallery img. Scroll to the bottom of the Property panel, and add a property of transform:rotate(360deg)
  70. In CSS Designer, select styles.css from sources, min-width:1200px from @Media, and #photoGallery img. Scroll to the bottom of the Property panel, and add a property of transform:rotate(720deg)
  71. Press F12 to save changes and test in browser. The images should rotate with size change!
  72. Linking Images to Images to Open in a New Window
  73. In Design or Live view
  74. Select the first image, and copy the Src attribute in the Property Inspector, into the Link attribute.
  75. Save changes and preview in browser. You will notice that if you click on the first image, a larger version of the image opens.
  76. Change the target attribute to '_blank'. Save changes and preview in browser. You will notice now that the original window stays open, and the image opens in a new window.
  77. Change all the images, copying the source attribute into the link attribute, and set the target attribute to '_blank'

Part Two: Using Font-Awesome (Icons)

  1. Video - m06-07
  2. Open the template.dwt template file.
  3. We are going to use icons from font-awesome
  4. We will not download the font-awesome icons, but rather use a content-delivery network, or cdn.
  5. Switch to Code view
  6. At the top of the page, add the following line of code after the various lines of code link to css files (nav.css, styles.css, bootstrap.css, etc):
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  7. Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
  8. Scroll down to the bottom of your web page, to the footer code.
  9. Highlight the text in the footer, "Copyright &copy; Your Name"
  10. Use the Inspector to apply a format of paragraph to the text.
  11. Immediately after the opening footer tag <footer> but before the paragraph tag <p>, paste the following code:
    <i class="fa fa-facebook" aria-hidden="true"></i>
  12. Next paste this code
    <i class="fa fa-google" aria-hidden="true"></i>
  13. After this code, page:
    <i class="fa fa-youtube" aria-hidden="true"></i>
  14. And this code next:
    <i class="fa fa-twitter" aria-hidden="true"></i>
  15. Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
  16. Press F12 to preview you work in a browser.
  17. You can see the font-awesome icons in the footer, but they are a little small. We are go to use the Dreamweaver find/replace command to make all the icons larger.
  18. In Code view, press Ctrl+f (find) or choose Find + Replace from the Edit menu
  19. Make sure you have "selected text" selected
  20. In the first field, "find" enter class="fa. In the second field, "replace" enter class="fa fa-3x
  21. Click on "Replace All"
  22. You should receive a confirmation message that 4 items were found.
  23. Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
  24. Press F12 to save your work and preview in a browser.
  25. You will see that the icons are much larger. Font-Awesome icons can be any size you want, as small or as large as you need. But font-awesome includes five preset sizes. Learn more about font-awesome sizes at font-awesome.
  26. Video - m06-08
  27. We want to add some spacing for our font-awesome icons. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, '#footer i'
  28. In the Properties panel, add 8px of left padding, and 8px of right padding
  29. Press F12 to save your work and preview in a browser. Since you only changed the styles.css file, you are not prompted to update all pages.
  30. We want to link our font-awesome icons to web pages. Creating links for font-awesome icons is a little different than linking to text.
  31. Use your cursor (or the Status bar) to highlight and select the code:  <i class="fa fa-facebook"></i>
  32. From the top menu, choose Insert / HTML / Hyperlink
  33. In the Link field, enter "http://www.facebook.com"
  34. In the Target field, choose '_blank'
  35. In the Title field, enter 'Facebook'
  36. Click 'OK'
  37. Press F5 to refresh
  38. Use your cursor (or the Status bar) to highlight and select the code: <i class="fa fa-google"></i>
  39. From the top menu, choose Insert / HTML / Hyperlink
  40. In the Link field, enter "http://www.google.com"
  41. In the Target field, choose '_blank'
  42. In the Title field, enter 'Google'
  43. Click 'OK'
  44. Press F5 to refresh
  45. Use your cursor (or the Status bar) to highlight and select the code: <i class="fa fa-youtube"></i>
  46. From the top menu, choose Insert / HTML / Hyperlink
  47. In the Link field, enter "http://www.youtube.com"
  48. In the Target field, choose '_blank'
  49. In the Title field, enter 'Youtube'
  50. Click 'OK'
  51. Press F5 to refresh
  52. Use your cursor (or the Status bar) to highlight and select the code: <i class="fa fa-twitter"></i>
  53. From the top menu, choose Insert / HTML / Hyperlink
  54. In the Link field, enter "http://www.twitter.com"
  55. In the Target field, choose '_blank'
  56. In the Title field, enter 'Twitter'
  57. Click 'OK'
  58. Press F5 to refresh
  59. Next select "Save All" from the standard menu, and allow Dreamweaver to update all your pages.
  60. Press F12 to preview your work in a browser.

Optional - Changing the Link Colors

  1. Video - m06-09
  2. When you preview in a browser, you will see you icons are blue, and green when you hover over them. This is because now they are html anchors, and they take on the property of anchors.
  3. To change the colors, create a new style rule for "#footer a". This rule will target any anchors in the footer section.
  4. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, '#footer a'
  5. Use the text color property to set the color of the text.
  6. Under 'text-decoration' select 'none'. This will make sure we do not have an underline with our anchors.
  7. Just in case we need the effect, click on the "more" icon, and add a transition property, with a value of all 0.5s
  8. Press F12 to preview your site. Since you are only updating the styles.css file, and not making any changes to the html code, you are not prompted to update pages.
  9. If you want your text to be a different when you hover on the icons, create a selector #footer a:hover. Use the text property to set the color.

Wayne Joness
West Los Angeles College, cs952
Fall