Bootstrap Image Carousel

  1. Video - m07-01
  2. Open the homepage, index.html
  3. Switch to Live view
  4. In the DOM panel, select the div.jumbotron
  5. In the Insert panel, select Bootstrap Components, Carousel
  6. Select after for placement
  7. Press F12 to preview the page in a web browser to view the new image carousel
  8. Select Yes when prompted to cover over the placeholder image.
  9. Switch back to Dreamweaver
  10. You will be adding three images to the website, to use the tutorial content, drag the carousel folder from the tutorial folder into the images folder
  11. Switch to Code view
  12. Look for the div with the class="item active", and place your cursor in the <img> that is contained inside this div.
  13. Use the Property inspector to change the Source of this image to the first image you want to use for your carousel. In this example, I used the same image as the first image, 'gallery-01.jpg'
  14. Look for the next div with the class="item", and place your cursor in the <img> that is contained inside this div.
  15. Use the Property inspector to change the Source of this image to the second image you want to use for your carousel. In this case I used ''gallery-02.jpg'
  16. Look for the last div with the class="item", and place your cursor in the <img> that is contained inside this div.
  17. Use the Property inspector to change the Source of this image to the last image you want to use for your carousel. In this case I used ''gallery-03.jpg'
  18. Preview your site to check the appearance of the new image carousel.
  19. Save changes when prompted.
  20. Switch back to Dreamweaver
  21. Switch to Live view
  22. You can edit the <h3> or <p> tags for each slider, or remove them. You may also disable the <h3> and <p> tags by commenting them out by typing <!-- before the <h3> tag, and typing --> after the </h3> tag
  23. In the CSS Designer, select styles,css, GLOBAL, and click the magnifier tool to find the .jumbotron CSS rules. Currently there are two rules, 20px of padding for left and right. Add a margin-bottom of 0px to eliminate the space between the Jumbotron and the Image Carousel.

Adding Responsive Bootstrap Content

  1. Video - m07-02
  2. In the Status bar, or  DOM panel, select the div #carousel1 .carousel .slide. This is the div which holds the image carousel slider.
  3. Switch to Live view
  4. In  Insert panel, under Bootstrap Components, add a 'Container-fluid'  and
  5. For placement select  after to place the div after <div class="container">
  6. Save All
  7. With the newly added 'Container-fluid' selected, go to the top menu Insert and select 'Heading h2'
  8. For placement, select 'Nest" since the h2 will be nested (inside) the newly added 'Container-fluid'
  9. Highlight the placeholder text 'This is the content for Layout H2 Tag'
  10. Change the text to 'Featured Pages'
  11. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector '#iconsThree'
  12. Select the div you just added in the DOM panel or select the div in the Property inspector
  13. In the Property inspector assign the new div to the id 'iconsThree'
  14. In CSS Designer GLOBAL and #iconsThree  should still be selected.
  15. Assign a property of text-align = center to the #iconsThree
  16. In the DOM panel or Status bar, make sure the h2 element is selected.
  17. Use the Live View Scrubber to scroll to the md middle (992 to 1199px) size
  18. In the Insert panel, select Bootstrap Components, and click on Grid Row with column to add a row. Choose 3 columns, and for placement select after
  19. Select the first div of the four divs added, <div class="col-md-4">
  20. Video - m07-03
  21. In the Insert panel / Bootstrap Components, add a Glyphicon:Home, for placement chose nest
  22. Make sure that the <span> (which holds the glyphicon) is still selected.
  23. In the top menu Insert add a h4 element, and select after for placement
  24. Change the placeholder test 'This is the content for Layout H4 tag' to 'Gallery'
  25. Make sure the <h4> tag is selected in the Status bar or DOM panel.
  26. In the top menu  Insert panel, select paragraph. For placement choose 'after'
  27. Change the place holder content. If you have you own content, you can add it here, or use this provided content from the tutorial text file: 'This website has a curated selection of some of the best pencil photos found in the internet. The images can help you look at pencils in a whole new way.'
  28. Paste to add the text
  29. In the DOM panel, delete the second and third .col-md-4 divs
  30. Select the first, and only, .col-md-4 div with the new content you added, and duplicate this div twice. You should now have three divs with the same content.
  31. Select the span containing the glyphicon in the DOM panel
  32. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, Enter #iconsThree .glyphicon
  33. In the Text properties. set a text size of 80px.
  34. Save All
  35. Video - m07-04
  36. Change the content of the <h4> tag in the second 3-column div to 'History' or something appropriate for your website. This is content we are using for this exercise: 'Pencils have changed the course of history! The discovery of graphite, the key component of pencils, was once regarded as a military secret!'
  37. Change the content of the <h4> tag in the third 3-column div to 'Media' or something appropriate for your website. This is the content used in the exercise: 'The media center has a selection of pencil films from YouTube, Vimeo, and streaming from our own website. Nothing tells a story like a movie!'
  38. Save All
  39. Switch to Live view
  40. Open your web browser to view some of the possible Glyphicons available.
  41. Click on the first glyphicon in the first 3-colum div, .glyphicon .glyphicon-home, and change the class to .glyphicon .glyphicon-camera.
  42. Make appropriate changes for the 3 other columns. In this example, the other glyphicons are glyphicon-book, and glyphicon-film.
  43. Select #iconsThree in the CSS Designer
  44. Select the background icon and experiment with changes to the background color of the #iconsThree div
  45. Select the text icon and experiment with changes to the text color of all the elements in the #iconsThree div
  46. Use the CSS Design to add a padding of 20px to the top and bottom of the #iconsThree .col-md-4.
  47. Select the h2 in the status bar (or DOM panel)
  48. Create a new CSS selector #iconsThree h2 and add a padding of 20px on the bottom
  49. Save All
  50. Preview in a Web Browser

Linking the Glyphicons

  1. Video - m07-05
  2. Open the home page, index.html, in Live/Spilt view.
  3. Select the first glyphicon.
  4. Select the span which includes the glyphicon
  5. Select HTML / Hyperlink from the top panel Insert menu
  6. Link to the respective page. In the demonstraton video, gallery.html
  7. Select the next glyphicon and link to the respective page. In the demonstration video, history.html
  8. Select the last glyphicon and link to the respective page. In the demonstration video, media.html
  9. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector
  10. Add the selector '#iconsThree a'
  11. Set the text color of the #iconsThree a'.
  12. Set the text color of the #iconsThree a:hover'.
  13.  
  14. Experiment with colors and css to change the styling of the pages.
  15. Save changes and preview page in web browser.

Optional - Changing the Link Colors

  1. Video - m07-06
  2. Experiment with using CSS selectors to change the appearance of the page.

Showing and Hiding Elements (css media query)

  1. Video - m07-07
  2. We are going to use the Bootstrap built-in visibility utilities to hide the Google search menu item when viewing the website on a mobile device. Learn more about Bootstrap Responsive Utility classes here
  3. Open the index.html page in Live view.
  4. Selct the carousel div
  5. Use the quick tag editor to add a class of 'hidden-xs' to the carousel.
  6. Press F12 to preview you page. The image carousel is not displayed in mobile view.
  7. Open template.dwt
  8. Click on the form element in the navigation bar,
  9. Use the quick tag editor to add the following class to the form: 'hidden-xs'.
  10. The Google search will be hidden for mobile devices, but visible everywhere else.
  11. Save All
  12. Press F12 to preview in browser

Adding the Modal Element

  1. Video - m07-08
  2. Open up index.html in Live/Split view
  3. Click on the "Learn More" button. Experiment with using this button as a link
  4. Google: w3 schools boostrap 3 modal
  5. Copy: 'data-toggle="modal" data-target="#myModal"'
  6. data-toggle="modal" data-target="#myModal"
  7. Add these two attributes to the "Learn More" button. Your final code should look like this:
  8. <p>
     <a class="btn btn-primary btn-lg" href="#" role="button"  data-toggle="modal" data-target="#myModal">Learn more</a>
    </p>
  9. Copy the content starting with  <!-- Modal -->  inside the "addScript" editable region.
  10. F12 to preview the page in your web browser.
  11. Edit the <h4> element to change to heading on the modal. You can change the h4 tag content to "10 Little-Known Pencil Facts"
  12. Change the content of the <div class="modal-body"> element. See the tutorial text file for optional modal content containing an ordered list with ten facts about the pencil.
  13.     <ol>
            <li>One theory is that the word pencil comes from the Latin word pencillus, which means .&quot;little tail..&quot; Another is that it is derived from the French pincel, meaning .&quot;little paintbrush.&quot;</li>
            <li>Before the invention of erasers, writers and artists used bread crumbs to erase mistakes.</li>
            <li>Famous transcendentalist author Henry David Thoreau designed pencils at his father’s pencil factory before retreating to Walden.</li>
            <li>Pencils can write in zero gravity, and were used on space missions by American and Russian astronauts.</li>
            <li>They can also write under water!</li>
            <li>The first mechanical pencil factory was located in England. It was destroyed in a bombing during WWII.</li>
            <li>Earnest Hemingway and John Steinbeck both used pencils to write their novels.</li>
            <li>Faber-Castell is the world’s largest pencil manufacturer, and Ray Bradbury even named a character in Fahrenheit 451 after them!</li>
            <li>Thomas Edison had pencils specially made so that they were thicker than regular pencils.</li>
            <li>It is said that the average pencil can draw a line 35 miles long, although this has never been tested. Be the first to try it out and you could appear on our next Pencil Facts list!</li>
        </ol>

Wayne Joness
West Los Angeles College, cs952
Fall