Incorporating Advanced Bootstrap Media with Dreamweaver CC
Optimizing your web page or app layout for the exact screen in use is, by now, part and parcel of the web designer’s workday. Bootstrap (and notably, Dreamweaver’s implementation of same) does a fantastic job adjusting column widths—and the enclosed content—as needed. Media of all types needs to be handled responsively as well as text and, happily, both Bootstrap and Dreamweaver are up to that task. And then some.
If this post were a TV series, now you’d hear me saying, in my deepest voice, “Previously… on Dreamweaver CC…” A number of basic responsive imagery techniques were covered in an earlier post on building a responsive website from scratch:
- Foreground images – Bootstrap’s responsive image resizes them as layout demands.
- Jumbotron – A full-width image for maximum impact.
- Video – Just as with images, any video can resize according to its container’s width—and keep on playing.
But Bootstrap media components are capable of so much more! Come on in and let me show you a trick or two.
Framing responsive images
Good ole’ standard rectangular photos are a mainstay of any web page: a grid-lover’s dream come true. But there are times when your design needs a bit more punch to make certain images stand out. Bootstrap includes several image-based classes that can quickly frame your graphics with CSS, saving you a trip to Photoshop’s Department of Masking.
In the previously mentioned post, I outlined how to bring basic responsive images onto your page. Dreamweaver also supports inserting responsive images with a bit of flair, framed with circles, rounded corners or thumbnail border. Let’s bring that stylishness into play:
- In the exercise file, locate the Services section.
There is one item where an image is needed and another where an image has already been supplied. I’ll show you how to style both with circles.
- Select the
<h1>placeholder text and press Delete.
Now your cursor is properly positioned to accept the new
- From the Bootstrap Components panel of the Insert panel, select Responsive Image: Circular. When the position assist dialog appears, choose Nest.
- Once Dreamweaver inserts the circular placeholder, from the Property Inspector Src field, choose Browse for File and select images/wave.jpg.
The placeholder is initially shown as circular, but the final image will be an oval if the width and height of the containing element are not the same, i.e., if it’s a rectangle, not a square.
From the Element Quick View (commonly referred to as the heads-up display), you can see that Dreamweaver automatically includes two Bootstrap classes:
.img-response class is responsible for rescaling the image as the width of the containing element varies—typically when the screen width changes. And, naturally,
.img-circle provides the oval frame by setting the border-radius to 50%. It’s important to note that
.img-circle will not display properly in Internet Explorer 8.
Knowing which Bootstrap class to apply, you can easily bring other images onto the same style palette.
- Select the rectangular image in the Services section.
- In the Element Quick View, click Add Class/ID, enter
.img-circleand press Enter/Return.
Dreamweaver’s code hinting will make sure you’ve got the exact class name.
In addition to instantly giving your photos a different look, they are fully responsive. Try dragging Dreamweaver’s scrubber control on the right side of the document window to see the magic at play.
If you want to try out the different responsive image frames, change the
.img-circle class to
Combining images and text with media lists
Images are frequently paired with a block of text to bring focus to the content. A series of such pair is refered to as a media list; a common media list displays a user’s avatar with a comment in a blog. In Bootstrap, media lists are created within a media object; Dreamweaver CC features full media object support, including media lists. Let’s build one up.
- In the Tours section of the exercise file, select the
Like most Bootstrap components, it’s best to place a media list within a container, like the one wrapping this page section.
- From the Insert panel, choose Media Object: Media List. When the position assist dialog appears, choose After.
A series of media list items is inserted, including some—for this design—unnecessary nested ones. We’ll remove those next.
- Select the first “Nested media heading” and then expand the DOM panel, if necessary.
The DOM panel is a great way to target elements in a complex HTML structure.
- In the DOM panel, select the first
div class="media"entry above the current
h4selection, and delete it.
- Select the remaining nested media heading and repeat steps 3 and 4.
Now you’ll have a single, top-level media list item. Let’s quickly reproduce it.
- Right-click the li
class="media"entry and choose Duplicate.
Dreamweaver’s handy Duplicate feature makes short work of replicating the necessary code.
- Repeat step 6 so there are three media list items in all.
Now that you’ve got the structure down, time to replace the placeholders.
- Select the first Media Object and, in the Property Inspector, choose Browse for File next to the Src field. In the Select Image Source dialog, navigate to the images folder and select venus.jpg.
If my Files panel is open, I like to use the Src field’s Point to File control to choose my images in a zippier fashion.
- Double-click the Media heading
<h2>placeholder to enter Edit mode in Live view. Press Cmd-A / Ctrl-A to select all and enter Venus.
Follow a similar procedure to customize the text below the heading.
- Repeat step 9 for the remaining list items to add images and proper headings for Mars and Jupiter.
Media lists work exceptionally well on smaller sized screens as they allow the text content to wrap in a contained space while displaying the associated image.
Firing up the Bootstrap Carousel
Slideshows are a web page mainstay these days and range from the most straight-forward display of multiple images to full-out bells and whistles. The Bootstrap Carousel component lands somewhere in the middle in terms of functionality, but—with Dreamweaver’s help—scores very highly in ease of use. And set-up, as you’ll see, is the lowest of barriers.
Please note: the Bootstrap Carousel uses CSS3 transitions and will not work properly with either Internet Explorer 8 or 9. Use accordingly.
- Select the Gallery
<h1>tag in the exercise file.
I’ve found it’s necessary to house your carousel within a
<div>or other element that has a class of
.containerlike the one surrounding this area.
- From the Bootstrap Components category of the Insert panel, select Carousel. When the position assist dialog appears, choose After.
Dreamweaver adds an auto-playing slideshow to the page with 3 placeholder slides—each with a heading and caption—along with previous and next buttons.
- To customize the carousel with your own images and copy, open the DOM panel and first expand
class="carousel slide". Next expand
div class="carousel-inner"and, finally,
div class="item active". Within it, select
- In the Property Inspector, use either Browse for File or Point to file to change the Src. Navigate to images/gallery and choose Ed_White_in_Space.jpg.
- Double-click the associated heading and change to Ed White in Space.
Modify or delete the accompanying caption, as desired.
- Expand the next
div class="item"entry in the DOM panel, then repeat steps 3-5 for the other two slides to substitute the placeholder image and text for ISS_in_Orbit and Mars_orbit_rendezvous, respectively.
Naturally, you’ll want to take the customization further and add CSS styles to bring the carousel in alignment with your site’s look and feel. There are also HTML parameters available to adjust the timing and behavior of the carousel. For example, let’s say you want to half each slide’s time on screen from the default 5 seconds. Select the wrapping
div#carousel1 and press Cmd-T/Ctrl-T to open the handy Quick Tag Editor in Edit mode. Add the attribute
data-interval = "2500" and press Enter/Return. Now, when you preview the page, your slides should be displayed for 2.5 seconds.
There are 3 other parameters you can add to your Carousel implementation:
data-pause="hover"– Pauses the slideshow when the user’s mouse is positioned over the slide (Default). Use
data-pause="false"to disable this behavior.
data-wrap="true"– Ensures that the slideshow continuously repeats. To play only once, use
data-keyboard="true"– Allows the slideshow to respond to keyboard presses (left/right arrow keys). This behavior is turned off by default.
With these advanced Bootstrap components in Dreamweaver CC, you can push all of your media—from images to video to slideshow—into the responsive spotlight.