- In this lesson you'll learn how to add divs…to your fluid grid layout that will form the…basic building blocks of a responsive webpage.…Along the way I'll show you how to work with…the inserted divs to get just the…layout you're looking for.…Okay, I have open here the profile.htm…file from "Chapter 2, 02 02, Start" folder.…This is a copy of the file we created…in the first lesson in this chapter.…So, if you completed that step you can…just continue to use that file.…
As you can see I only have the default…place holder div with its…place holder content on the page.…As I flip between screen sizes,…using the icons you see on the lower right,…go into tablet size and then desktop,…you'll see the same div…and content on each screen.…If I put my cursor in the div...…I can see it has an ID of "div1,"…and a class of "fluid."…Now I can keep that ID or rename the div,…but you wanna make sure to keep the "fluid" class.…
That's what triggers the fluid grid controls…that you see appear here in Live View,…over on the right hand side…
- Structuring fluid grids
- Adding a new fluid grid layout
- Adding building-block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Building media queries from scratch
- Working with additional media queries
- Handling orientation changes
- Manipulating CSS
- Adding new media
Skill Level Intermediate
Edge Animate Essential Trainingwith Chris Converse4h 44m Beginner
1. Understanding Responsive Web Design
2. Fluid Grid Layouts in Dreamweaver
3. Expanding on a Fluid Grid Structure
4. Enhanced Media Queries
5. Flexible Images and Media
- 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.