- The goal of this challenge is to take advantage…of Dreamweaver's fluid grid layout features flexibility,…and display an appropriate ad…for each of the three screen sizes.…Here's how I solve the problem.…Now the starting point already has one…advertisement in place,…the one for the desktop screen…that we worked on earlier in the chapter.…In order to include new advertisements…for each of the other two screens,…I'm going to add two new fluid grid divs.…Each with our own advertisement graphic…bringing the total up to three.…
Then use the hide function so that only one advertisement…is shown per screen.…Okay, so I'm going to go ahead and select…the one advertisement that I have in place.…It's div with the fluid class selected…and then I'll insert another div…and I'll put that one after it.…I'm going to give this the ID of addTablet,…insert as fluid element…and there, that is while it's selected…I'm going to go down and insert an image.…
We want this to nest within that selection.…I'll go to my exercise file folder Start, Images,…
- 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.