Join David Powers for an in-depth discussion in this video Creating the feature section, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- We've completed the highlights section.…The next section will contain a feature article…that will be laid out differently,…depending on the screen size.…Along the way, you'll see how to move…elements within a page using the DOM panel.…I'm going to begin by resizing the document window…to the size of a small device.…So click the Visual Media Queries bar…just to the right of 650 pixels,…and then to make it easier to work in the DOM panel,…I'm going to expand the panel group on the right.…To add a new row, we need to select the row…after which it's going to be inserted.…
So that's the section element with the ID of "highlights."…Select that, and then rather than use…Grid Row with Column in the Insert panel,…I'm going to scroll down in Live View,…and at the bottom right of this selected row are two icons.…The one on the left duplicates the row…with everything inside it.…The one on the right simply adds a new row.…So just click that one on the right,…and it has added that new row.…
The advantage of using this icon on the right, Add New Row,…
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview
Skill Level Intermediate
1. Getting Started
2. Creating the Site Navigation
3. Adding a Hero Image
Inserting the hero image6m 37s
4. Working with Columns
5. Using Device Preview
What next?2m 5s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.