Bootstrap Image Carousel
-
Video - m07-01
-
Open the homepage, index.html
-
Switch to Live view
-
In the DOM panel, select the div.jumbotron
-
In the Insert panel, select Bootstrap Components, Carousel
-
Select after for placement
-
Press F12 to preview the page in a web browser to view the new image carousel
-
Select Yes when prompted to cover over the placeholder image.
-
Switch back to Dreamweaver
-
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
-
Switch to Code view
-
Look for the div with the class="item active", and place your cursor in the <img> that is contained inside this div.
-
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'
-
Look for the next div with the class="item", and place your cursor in the <img> that is contained inside this div.
-
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'
-
Look for the last div with the class="item", and place your cursor in the <img> that is contained inside this div.
-
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'
-
Preview your site to check the appearance of the new image carousel.
-
Save changes when prompted.
-
Switch back to Dreamweaver
-
Switch to Live view
-
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
-
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
-
Video - m07-02
-
In the Status bar, or DOM panel, select the div #carousel1 .carousel .slide. This is the div which holds the image carousel slider.
-
Switch to Live view
-
In Insert panel, under Bootstrap Components, add a 'Container-fluid' and
-
For placement select after to place the div after <div class="container">
-
Save All
-
With the newly added 'Container-fluid' selected, go to the top menu Insert and select 'Heading h2'
-
For placement, select 'Nest" since the h2 will be nested (inside) the newly added 'Container-fluid'
-
Highlight the placeholder text 'This is the content for Layout H2 Tag'
-
Change the text to 'Featured Pages'
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector '#iconsThree'
-
Select the div you just added in the DOM panel or select the div in the Property inspector
-
In the Property inspector assign the new div to the id 'iconsThree'
-
In CSS Designer GLOBAL and #iconsThree should still be selected.
-
Assign a property of text-align = center to the #iconsThree
-
In the DOM panel or Status bar, make sure the h2 element is selected.
-
Use the Live View Scrubber to scroll to the md middle (992 to 1199px) size
-
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
-
Select the first div of the four divs added, <div class="col-md-4">
-
Video - m07-03
-
In the Insert panel / Bootstrap Components, add a Glyphicon:Home, for placement chose nest
-
Make sure that the <span> (which holds the glyphicon) is still selected.
-
In the top menu Insert add a h4 element, and select after for placement
-
Change the placeholder test 'This is the content for Layout H4 tag' to 'Gallery'
-
Make sure the <h4> tag is selected in the Status bar or DOM panel.
-
In the top menu Insert panel, select paragraph. For placement choose 'after'
-
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.'
-
Paste to add the text
-
In the DOM panel, delete the second and third .col-md-4 divs
-
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.
-
Select the span containing the glyphicon in the DOM panel
-
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
-
In the Text properties. set a text size of 80px.
-
Save All
-
Video - m07-04
-
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!'
-
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!'
-
Save All
-
Switch to Live view
-
Open your web browser to view some of the possible Glyphicons available.
-
Click on the first glyphicon in the first 3-colum div, .glyphicon .glyphicon-home, and change the class to .glyphicon .glyphicon-camera.
-
Make appropriate changes for the 3 other columns. In this example, the other glyphicons are glyphicon-book, and glyphicon-film.
-
Select #iconsThree in the CSS Designer
-
Select the background icon and experiment with changes to the background color of the #iconsThree div
-
Select the text icon and experiment with changes to the text color of all the elements in the #iconsThree div
-
Use the CSS Design to add a padding of 20px to the top and bottom of the #iconsThree .col-md-4.
-
Select the h2 in the status bar (or DOM panel)
-
Create a new CSS selector #iconsThree h2 and add a padding of 20px on the bottom
-
Save All
-
Preview in a Web Browser
Linking the Glyphicons
-
Video - m07-05
-
Open the home page, index.html, in Live/Spilt view.
-
Select the first glyphicon.
-
Select the span which includes the glyphicon
-
Select HTML / Hyperlink from the top panel Insert menu
-
Link to the respective page. In the demonstraton video, gallery.html
-
Select the next glyphicon and link to the respective page. In the demonstration video, history.html
-
Select the last glyphicon and link to the respective page. In the demonstration video, media.html
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector
-
Add the selector '#iconsThree a'
-
Set the text color of the #iconsThree a'.
-
Set the text color of the #iconsThree a:hover'.
-
-
Experiment with colors and css to change the styling of the pages.
-
Save changes and preview page in web browser.
Optional - Changing the Link Colors
-
Video - m07-06
-
Experiment with using CSS selectors to change the appearance of the page.
Showing and Hiding Elements (css media query)
-
Video - m07-07
-
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
-
Open the index.html page in Live view.
-
Selct the carousel div
-
Use the quick tag editor to add a class of 'hidden-xs' to the carousel.
-
Press F12 to preview you page. The image carousel is not displayed in mobile view.
-
Open template.dwt
-
Click on the form element in the navigation bar,
-
Use the quick tag editor to add the following class to the form: 'hidden-xs'.
-
The Google search will be hidden for mobile devices, but visible everywhere else.
-
Save All
-
Press F12 to preview in browser
Adding the Modal Element
-
Video - m07-08
-
Open up index.html in Live/Split view
-
Click on the "Learn More" button. Experiment with using this button as a link
-
Google: w3 schools boostrap 3 modal
-
Copy: 'data-toggle="modal" data-target="#myModal"'
-
data-toggle="modal" data-target="#myModal"
-
Add these two attributes to the "Learn More" button. Your final code should look like this:
-
<p>
<a class="btn btn-primary btn-lg" href="#" role="button" data-toggle="modal" data-target="#myModal">Learn more</a>
</p>
-
Copy the content starting with <!-- Modal --> inside the "addScript" editable region.
-
F12 to preview the page in your web browser.
-
Edit the <h4> element to change to heading on the modal. You can change the h4 tag content to "10 Little-Known Pencil Facts"
-
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.
-
<ol>
<li>One theory is that the word pencil comes from the Latin word pencillus, which means ."little tail.." Another is that it is derived from the French pincel, meaning ."little paintbrush."</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