- Introduction to AP Elements
- Working with AP Elements
- Designing Tableless Web Pages Using AP Elements
- Built-In CSS Page Layouts
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Built-In CSS Page Layouts
One of the hottest web-development techniques is the process of laying out web page structures using CSS instead of traditional HTML-based methods such as tables or frames. As the Web evolves, so too does the process of creating web pages. Therefore, tables are viewed as an archaic method of page structuring. As a web developer you should be aware of that fact and begin learning and integrating standards-compliant methods into your site designs. In the previous few sections we began to do just that. As you might recall, you looked at ways of building web pages that rely on CSS for the positioning and structuring of web pages. What little HTML we used was meant purely for integrating CSS rules or for adding imagery and media elements to your pages. As you might also recall, the learning curve for creating standards-compliant CSS page designs is relatively higher as compared to tables or frames. To help you along, Dreamweaver CS3 integrates a collection of carefully crafted and comment-rich CSS Page Layouts.
This section will get you up to speed with Dreamweaver's CSS page layouts. As you'll see, working with CSS-based structuring techniques has never been easier—thanks to this new collection of page layouts. To build a new web page based on prestructured CSS-based layout, start by selecting File, New. The New Document dialog appears. Select the HTML option from the Blank Page category. Up to this point in the book we've usually selected the <none> option from the Layout list and clicked Create. This time, however, take a closer look at the additional options within the list. As you can see from Figure 7.21, additional prebuilt CSS-structured options exist.
)
Figure 7.21 Choose from a list of prebuilt CSS-structured page layouts.
Numerous options exist within this dialog for creating and handling the CSS that results, including the following:
- Layout—The Layout list contains 32 prebuilt CSS-structured layouts for you to use. For our purposes, select the 2 column elastic, left sidebar, header and footer option.
- Preview—The previous window displays an iconic representation of the selection you make from the Layout list. This preview is a rough approximation of what your design will be structured around.
- Layout CSS—Choose an option from this menu to instruct Dreamweaver as to how to handle the CSS that will accompany your layout. Options include Add to Head (adds all the CSS to the head of the page creating a document-wide style sheet), Create New File (adds all the CSS to a new external style sheet file), and Link to Existing File (adds all the CSS to an existing external style sheet file). When you select the Link to Existing File option, you'll be required to browse to the existing CSS style sheet using the Attach Style Sheet button available from the Attach CSS file group of options. For our purposes, choose the Add to Head option.
- Attach CSS file—When you choose the Link to Existing File option from the Layout CSS menu, this group of options becomes immediately available. You can choose the Attach Style Sheet icon to browse to and attach an existing style sheet. Alternatively, you can delete a style sheet from this list by clicking the Remove Style Sheet icon.
Now that we have a layout selected and we've instructed Dreamweaver as to where it should place the accompanying CSS, click Create. Immediately, a new Document window is created, complete with your selected layout, similar to Figure 7.22.
)
Figure 7.22 A new document window instance is created complete with your selected layout.
At a glance, you can see that the content is placed within DIV tags. And, like you saw in the previous section, the positioning and structure of those DIV tags are controlled using a series of carefully crafted classes, also visible in the CSS panel in Figure 7.22. Now try switching to Code view. Immediately you'll notice how many comments have been added to guide you through the relatively new process of using CSS to structure web pages. Now comes the fun part—removing the default text that appears in the DIV tags and replacing it with the Vecta Corp content. See if you can accomplish this task on your own!