Join Joseph Lowery for an in-depth discussion in this video Polishing the layout, part of Layouts with CSS in Dreamweaver.
You really can transform the Dreamweaver sample layouts into something…suitable for use on the web.…In this video we'll dive a little deeper into the structure of the sample pages…so we can apply some more advanced techniques to polish the layout.…I have opened here the example. htm file and we're in Design View.…Let me shrink my panels over here so you can see that right now everything is…within the container and it's all one centered page from header all the way down to footer.…
So one little advanced technique that we can do is to take the header and make…it a full width header so that it expands the full width of the page rather than…to the container pixel measurement.…So to do that we are going to have to go into the code and I am going to…flip over to Code View.…And here we see the <div class="container"> and also the div for the header.…So I am going to select the header div and then just bring it up above the container.…
So now it's free of the container, get rid of that extra little line there.…
- Exploring HTML5 templates in Dreamweaver
- Understanding document flow
- Using floats properly
- Resetting CSS styles
- Creating a 1-, 2-, or 3-column layout
- Deciding on a fixed width versus variable width design
- Coding layouts for HTML5 and CSS 3
- Incorporating floated elements
- Applying the faux column technique
- Using Spry widgets
- Using Multiscreen Preview
- Modifying desktop layout for tablets
- Developing smart phone layouts
Skill Level Intermediate
Site Navigation with CSS in Dreamweaverwith Joseph Lowery3h 24m Intermediate
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Dreamweaver CS5 Essential Trainingwith James Williamson15h 22m Beginner
1. Dreamweaver Example Layouts
2. Layout Concepts
3. Basic Layouts
4. Interior Layouts
5. Alternative Screen Layouts
- 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.