Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
Now inside of Dreamweaver, when you have your HTML file open, you'll see in the top left-hand corner you have three buttons here. We have Design, which gives us our Design view here; a split-screen view, where selecting this will actually take the HTML file and split it-- half the screen will be the HTML code, the other half will actually be the design preview-- And then we have a Code view here which will give us full code access to the file we're working on. This is going to be the mode that you're going to want to work in following this course. There is another nice feature inside of Dreamweaver and that is, at the very top of the document, you can see all of the related files up here.
So as we hook in different CSS files, clicking on these items here will then change Dreamweaver to show you the source code for the linked CSS file. Now, this can be really handy because you can jump through different CSS files rather quickly. You can also go to the File menu and choose Open and select the CSS files in addition. If you do that, you'll see the individual files opened up here next to the index.html file. So inside of Dreamweaver, you can open the individual files or you can get access to them by clicking on the related files tabs.
And lastly, when you're coding inside of this window down here, for example if I come in here and try to access a CSS3 property, something like border-radius, for example, you can see that Dreamweaver's code completion will come up. And if I scroll through here, I can actually see properties like border-radius. So this is a CSS3 property, and we'll get the same effect in the HTML window for HTML5. So as I mentioned before, we do have support for HTML5 and CSS3 inside of Dreamweaver, but all of the access to those elements and the code completion is built only into the code area.
So now that you know how to follow along with this course while working inside of Dreamweaver, next we'll start planning out our project.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.