Create a responsive website in Dreamweaver CC – Part 3
Add more responsive Bootstrap Components
In part 1 and part 2 of this series, I used some of the new responsive web design features in Dreamweaver to rebuild a web page for a client. I created a new HTML page using the updated New Document dialog to set the initial layout for a phone, tablet, and desktop layout. I used Bootstrap components to add a navbar, slideshow, thumbnail images, and a mixed media list of images and content.
I also used the HUD in Live View to modify the layout further by controlling the amount of space the content will take up when viewed on various devices by introducing the Bootstrap Grid System has been implemented in Dreamweaver CC 2015.
Finish the home page design
In this post, I will show how I finished the home page design by adding the section detailing the showcase home and adding a stylized list describing some additional information about my client’s company.
After reviewing the list of Bootstrap Components again, I decided to use the Tab component for the showcase home section and the List Group component to display the additional company information (see Figure 1).
Figure 1. (click to enlarge) New sections to finish home page design
Add the Tab component
The Tab component allows you to create a tabbed interface within your page layout. The page I am working on only has 1 tab because I am just featuring 1 showcase home. However, it is likely that I’ll add more to this section in the future and the tabbed interface will allow me to do that more easily. So, for now, I’ll use the Tab component with just 1 tab.
In part 2, I added a row with 2 columns. In the first column, I added a Media Object that contained a list of images and text to describe some of the galleries that will be featured throughout the site.
The second column is still empty and this is where I will add the new Tab component. Again, to make it easier to find my place in the page layout, I collapsed the sections of code I am not using (mouse over the line numbers in Code View and click the down arrow).
I am viewing my design in Split View and the empty column displays below the first column in the row (see Figure 2).
Figure 2.(click to enlarge) Select the empty column in Code View or Live View
I placed the cursor between the
<div class="col-cs-6"></div> tags. Then, I clicked the Tab component from the Bootstrap Components category (Insert > Bootstrap Components) (see Figure 3).
Figure 3. (click to enlarge) Tab Bootstrap component and code
In this case, it is easier to see the layout in Live View, so I clicked the Live button in the Document Toolbar which shows me the default layout of the Tab component when I add it to my page (see Figure 4).
Figure 4. Default layout of the Tab component
The default layout of the Tab component includes 3 tabs. I only want 1 in this case, so I will remove the other 2.
The Tab component consists of 2 parts (see Figure 5):
- An unordered list
<ul>with 3 list items
<li>that represent the tab names.
<div>elements that hold the content for each section.
Note: There are 4 sections of content because the 3rd tab contains a drop down list with 2 items to display additional content.
Figure 5. (click to enlarge) Default layout for Tab component includes 3 tabs and 4 sections of content
I could delete the unnecessary elements of the Tab component in a variety of ways. I chose to remove the elements via the DOM panel (Window > DOM) since it provides me a visual representation of the HTML structure of the page.
Since I want just 1 tab for now, I removed (click the node and press Delete) the last 2
<li> elements from the
<ul> and the last 3
<div> elements containing the tab content. Figure 6 shows the before and after view of the HTML structure of the Tab component.
Figure 6. (click to enlarge) Use the DOM panel to view and manipulate the HTML structure
Add content to the Tab component
Now that I have the basic structure of the Tab component on the page, I can start adding my own content. I still prefer to do these types of changes directly in Code View, but you could double click on the tab in Live View to enter edit mode and change the text directly there as well.
Figure 7. (click to enlarge) Change the tab text
Then, in the content area of the tab component (the div with the class of tab-pane), I added an h3 element to provide a title for the image, followed by the image of the showcase home itself.
Figure 8. (click to enlarge) Add the subheading and image to the tab content
To make the column with the Tab component display better, I’ll go ahead and fix the classes that are assigned to it. Through the HUD in Live View, I’ll delete the existing
.col-xs-6 class and add the
.col-sm-12 classes to match the first column in the row.
Figure 9. (click to enlarge) Remove default class and add other column classes
I finished out the section by adding a paragraph with several line breaks to list the features of the “Go Green” home. I thought it would be a nice effect if I added symbols for bullets and I found a leaf glyphicon that I thought matched the theme well.
The Bootstrap components available from the Insert panel have a few glyphicons available, but there’s actually a lot more available to you. Just check out the bootstrap.css file and search for
.glyphicon- to go directly to the section that lists all of the symbols you can use.
Figure 10. (click to enlarge) More glyphicons available directly in bootstrap.css
Once I found the glyphicon I wanted, I could add it directly to a span tag at the beginning of each line break.
<span class="glyphicon glyphicon-leaf"></span> Solar photovoltaic panels for electric<br>
<span class="glyphicon glyphicon-leaf"></span> Solar hot water<br>
<span class="glyphicon glyphicon-leaf"></span> Stormwater collection for landscape<br>
<span class="glyphicon glyphicon-leaf"></span> Recycled carpet and countertops<br>
<span class="glyphicon glyphicon-leaf"></span> "Green" awards and recognition<br>
<span class="glyphicon glyphicon-leaf"></span> High indoor air quality<br>
Now this section is complete.
Figure 11. (click to enlarge) Completed showcase section
Add a list group component
I just have one more section to add to my page and then I’m done. The About column on the original site is really just a list of items with content. So, I thought I’d use the list-group bootstrap component and add it to its own row below at the bottom.
Figure 12. (click to enlarge) Original “About” section and the responsive version
The first thing I needed to do was to add a new row. I clicked on the node for the previous node in the DOM panel so that the blue border would display around it in Live View. Then, I click the Add New Row icon in the lower, right-hand corner.
Figure 13. (click to enlarge) Add a new row directly in Live View
Dreamweaver added 2 columns to the row, but I only needed one, so I deleted the second
<div class="col-xs-6"></div> that was created. Then, I changed the classes assigned to it so that it would always span 12 columns no matter which device it displays on.
Then, I added the Basic List Group Bootstrap component to the column and changed the content as needed.
Here’s a link to the live site so far.
Figure 14. (click to enlarge) Live site
I’m generally finished with the home page now. Although, there are some style and layout tweaks I’d still like to make. There’s still a lot to do with the rest of the pages in the site, so I’ll be analyzing the next best steps to take.
In the meantime, I’d love to hear back regarding whether this series has been helpful in anyway!