Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> Although it's acceptable to continue using tables for layout if they linearize well, it's a really good idea to reserve the use of tables for data, as we'll talk about in a later chapter, and instead using CSS for controlling your layout and all other formatting. CSS layouts have advantages beyond avoiding the accessibility difficulties that were presented in the last movie. Using CSS for layout usually greatly reduces the file size of all of your pages, as well as their load times and the amount of bandwidth that you use on your server. CSS also makes it easier to keep the layout and look consistent between pages, which as we talked about in the first chapter, is an important aspect of accessibility.
It also makes it easier to update the look of the site or even redesign it. There are even advanced CSS techniques that allow you to move the most important content up first in the source so that it will be the first thing read by screen readers and also can improve your search engine rankings since content that comes further up in the page is weighted more by the search engines, and also the reduced amount of markup in the page changes the ratio of code to keywords, increasing your keyword density. So with all of these advantages in mind, how do you make a CSS layout? You still need something to structure the page, so instead of using a table, you use DIV elements to group the content of the page into related sections.
DIVs are just generic HTML elements that can be assigned an ID attribute to uniquely identify each one on the page. The CSS then targets these ID's to format and position each DIV. Because of this different structure, it really requires a different type of mindset to make CSS layouts than table layouts, so it really can be tricky to do at first. You're no longer looking at things in rigid grids like you were with tables and you have to start thinking of things as chunks of content that can be layered on top of each other and moved around the page.
Although tricky at first, there are many resources to help you make reliable CSS layouts, such as Dreamweaver CS3's pre-made layouts. Dreamweaver CS3 comes loaded with a number of pre-made CSS layouts that you can use for your own sites. They're accessible by going to the File menu then selecting New. This brings up the New Document dialogue box. If you select the Blank Page option on the left side of the box, then select the HTML option under Page Type, this then shows in the third column the descriptive names of all the pre-made layout options available.
If we scroll through the list we can see the many options that we have to choose from. In the next few movies we'll explore a few of these pre-made layouts.
Get unlimited access to all courses for just $25/month.Become a member
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.