Join Joseph Lowery for an in-depth discussion in this video Coding layouts for HTML5 and CSS3, part of Layouts with CSS in Dreamweaver.
Even though the HTML5 specification is many years from achieving full…recommendation status, it's being put to use.…Designers are driven by the need to craft sites that work in mobile devices and…include native support for media players.…HTML5 places a much heavier emphasis on structural markup than previous versions…of the language, with new tags like header, article, section, and footer.…In this video I'm going to show you how to create a basic layout using HTML5…tags in Dreamweaver.…
Let's start by going up to File>New, choosing a Blank Page from the first…column, HTML Page Type, none from the Layout, and then when you get to DocType…switch it to HTML 5.…Click Create, and there is our basic page.…Let's go ahead and save it.…I will choose File>Save, and I am going to navigate to the Chapter 3, 03_06…folder, and we will save this as html5_layout.html.…
As we normally do, we can begin to create our CSS rules.…So in the CSS Styles panel I am going to go ahead and click New CSS Rule, and…then we will choose ID from the Selector Type and enter in the name of our first…
- 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.