Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
One of the biggest challenges that most designers have when learning CSS-based layouts is structuring their content correctly. Some are tied to older layout methods like table-based layouts, while others are just brand-new to web design and don't fully understand the strategies behind controlling page elements through CSS. Regardless of whether you fit into one of those categories or not, the foundation for learning proper CSS layout is based in learning to structure your page correctly.
By identifying unique areas of content, you are not only helping user agents properly parse your content, you're also giving yourself the basic page structure needed to control your layout. To give your page the structure, you would use the Div tag. The Div tag is a generic block-level tag that is used to divide your content into specific regions. By using CSS, you can style and position these regions thereby creating your layout. Now, although every page is different, some basic standards have evolved that make laying out your pages a little more efficient.
First, most pages have a wrapper div tag that wraps all other content on the page. This container div allows you to define a width for your page content, center content on the page, and give all other content a reference point by which to position itself by. Inside the wrapper div, you will position other divs that represent your content regions in the order that you wish the content to be accessed. You should never lose sight of the fact that many users may and will encounter your page content un-styled.
In that event, you want to make sure they experience your page in the order that you intended. In the layout we'll be creating, for example, our wrapper will contain a header, navigation, a content region, a sidebar, and a footer. Each of these distinct regions will be styled and positioned based on our design and based on the content contained within. Although this sounds counterintuitive, I've found that my page structure has become increasingly simpler over the years. When I first started doing CSS -based layouts, my pages were unnecessarily complex.
That was because I didn't really understand the goal behind separating structure and presentation. Because I didn't understand how to build efficient CSS layouts, I positioned nearly every single element on the page and needed almost twice as many elements due to this. So, my advice for creating a CSS-based layout is this: keep the page structure simple. Let the structure exist to express meaning, not to fit a predefined design. And as we'll discuss later in this chapter, let the normal document flow of HTML do the bulk of your layout for you.
Normal document flow states that the first block-level element will be displayed on top of the next block-level element. You'd be surprised at how well that handles most of the layout needs you'll have.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
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.