Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
For those of you who are going to follow along using Adobe Dreamweaver, I want to point out a few things. First of all, Dreamweaver CS5 and later have full support for HTML5 and CSS3, but it has this full support in the code area only. So the preview area inside of Dreamweaver doesn't have full support for rendering HTML5 and CSS3 while you're actually working on your course. So in this screenshot here, this is what Dreamweaver CS5 and 5.5 will look like when you finished your project. You'll notice that you don't see the heading area at all. The logo is off to the right-hand side.
The navigation appears down below the footer, and the navigation actually extends past the outer page container. Now, if we look at the copy of our final project inside of Dreamweaver CS6, we'll see that this actually looks a little bit closer. We do see the heading area, we see the navigation in the right position, but the logo is off to the right and the width of the navigation element still extends past the overall page container. Now these rendering issues only affect Dreamweaver inside of the design preview. So if we come back to our final project, I'm going to open up the index.html file up in Dreamweaver CS5.5, and this is what we're actually seeing here in the design preview.
But if I come up here and click on the Live View, what Dreamweaver will do is use it's built-in WebKit rendering engine and render this page exactly as we would see it in our web browsers. So once I turn on Live view, I can see the design comes into place. I can scroll down and see all of the design elements are properly being rendered. I can change my window size and see the medium size, and then close this all the way down and see the mobile size. So while we're in Live view, Dreamweaver will show us exactly what this design will look like inside of our Preview mode.
But when I come out of Live view we'll go back to Dreamweaver's default rendering for the preview area. So as you're working along in Dreamweaver, don't take what you see in the design preview area as the final rendering of your page. Make sure you switch into Live view or preview in a browser to see how your project is progressing. And next, we'll talk about how to access code inside of Dreamweaver for both HTML and CSS files.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 63822 Viewers
119 Video lessons · 71363 Viewers
125 Video lessons · 32167 Viewers
84 Video lessons · 18735 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.