Join David Powers for an in-depth discussion in this video What you should know before watching this course, part of Responsive Design with Bootstrap and Dreamweaver CC 2015.
- Let's establish what you need to follow this course so you can decide whether it's suitable for you. The basic requirements are quite simple. You don't need any prior knowledge of Bootstrap. This course explains the basics, and Dreamweaver takes care of building various Bootstrap components, and applying the appropriate CSS classes automatically. However, the course uses features that are new to the version of Adobe Dreamweaver CC that was released in November 2015. The instructions won't work on earlier versions, so you need Dreamweaver CC 2015.1 or later installed on your computer.
You also need to be familiar with the Dreamweaver user interface. Although very little coding is involved, you should have a good understand of HTML and CSS, as well as being familiar with media queries. Why's that, you may ask? Surely Dreamweaver handles all that for me. Well, yes and no. During the course, we'll be making considerable use of the DOM panel in Dreamweaver. That's this panel here at the bottom right.
DOM stands for "document object model," and this panel acts as a sort of road map to the underlying HTML of a webpage. So if I click this div here it expands and we can see what's inside it. And then if I click this particular section, that also expands. There's a div inside there, we expand even further, another div, and then we get even more elements down here. So you really need to know your HTML elements and how a webpage is structured.
If you don't, you'll soon get lost. We'll also dive occasionally into code view by clicking this Split button here, and we'll make some slight adjustments to the underlying code. And to style the page, we'll use the CSS Designer panel. Let's just close the DOM panel so we can see it better. Dreamweaver generates all the CSS code for you, but you need to know what selectors are and also what the various properties do. The other tool that we'll be using a lot is the Visual Media Queries bar.
It's this bar at the top here. Now this resizes the document window to show how media queries apply different styles to affect the way the page looks depending on the width of the browser view port. So on an extra small device, the page would look like this. On a small device, it changes slightly. And then on a medium sized device, it changes yet again. So that's what we'll be using during this course. If you need help brushing up on HTML and CSS, I recommend the following courses here in the lynda.com online training library.
HTML Essential Training with James Williamson, and CSS Fundamentals, also with James. If you need help with Dreamweaver basics, check out any of James's Dreamweaver courses. On the other hand, if you're interested in learning Bootstrap without Dreamweaver, Ray Villalobos has you covered with his Bootstrap 3 Essential Training. However, I hope you'll stay the course with me. Dreamweaver removes a lot of the complexity of working with Bootstrap without compromising on its advanced features.
It makes designing responsive web pages with Bootstrap a pleasure rather than a chore.
- 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