From the course: Dreamweaver CS6 Essential Training

Working with starter pages - Dreamweaver Tutorial

From the course: Dreamweaver CS6 Essential Training

Start my 1-month free trial

Working with starter pages

“

There are going to be times when creating a new page from scratch is not your best option. If you're new to using CSS for layout or if you're simply looking for a head start for the structure and layout of your new files, Dreamweaver's starter pages offer over a dozen standards- compliant, cross-browser compatible layouts to choose from. These layouts render consistently in almost all versions of Internet Explorer, Firefox, Opera, Safari, and Chrome and they're often a good choice for starting out. So to access those, you simply go to File and choose New. Once again, I'm going to do Blank Page>HTML and then from Layout, I can choose from any of these options. So taking a closer look at these, we have options between one-, two-, and three-column layouts. We also have what's known as a fixed layout or a liquid layout. The fixed layout is going to be a specific fixed size whereas a Liquid layout is going to be based on percentages and will resize and reflow based upon the available space within the viewport, the browser window, or the screen at hand. What I want to do is I'm going to choose 2-column, fixed, right sidebar, header and footer. Notice that when you select one of these, you'll see a little preview of what the starter page is going to look like, the little padlock icon there means that this is a fixed layout. Now in addition to being able to choose which layout you want to use, you can also still choose the document type and you can also choose where you want the Layout CSS to be added. So the simple creation of this page is going to generate not only HTML structure, but also CSS code as well. Now I'm going to choose HTML5 DocType and then for Layout CSS, I'm going to make sure for this particular example, it's added to the head. That's just going to make it a little bit easier for us to see. You're also given the option of creating a brand-new CSS file, you also have the option of linking out to an existing file if you have one already out there, for example, handling typography because these styles are going to handle page layout. So I'm just going to choose Add to Head and then I'm going to create this page. So you'll notice what this creates, it's not really a template. It's what it says it is, it's a starter page. As you can see placeholder information and neutral background colors clearly marked content areas. So it's very easy to tell where the header is, where the sidebar is, where the main content is. You have some written instructions on how the page is structured, how the styles are structured. So again, if you're brand-new to CSS, not only this just give you sort of a leg up on getting started and up and running with your pages but it's also very instructive, it's a great way to learn kind of how these files should be structured, how the code is written. I'm going to switch over to Code view really quickly here. You can see the code, you can see the structure but more importantly, in this case, because I embedded the styles in the head of the document, you can also see the styles. Now, one of the things that you're going to notice right off the bat and I'll just scroll up to the top of the styles, is that these styles are really heavily commented. This gray text that you're seeing here those are comments, and essentially what you can do is you go through these styles, read through the comments, learn what these selectors are doing, what they're driving, why they're written the way they are. My good friend, Stephanie Sullivan, wrote these and she does a great job of explaining different browser imperfections and inconsistencies, why selectors need to be written in certain way. So this is as much instructive as it is anything else, and of course, if you're going to use this truly as a starter page, one of the things you'll probably want to do is come in here and sort of rip out some of these comments because they're quite verbose and very extensive. They are that way for a reason but again, it's something that as you start replacing some of these styles with your own, you're going to want to go in there and sort of whittle some of those down. Now starter pages aren't for everyone. However, if you've never used CSS for layout before and you want to make sure you're using solid standards-compliant, cross-browser CSS, they are a fantastic place to start. If you already have a strategy for using CSS in place, and one of the starter pages sort of fits your layout requirements, it can save you a lot of time in the creation of your CSS as all you'll need to do really is simply tweak the existing CSS to be a little bit more inline with your specific needs. Now keep in mind that the CSS and the page structure generated from starter pages is entirely customizable. You can go in here take away from the code, add to it, tweak it, really in whatever manner you want. Just make sure that you approach using starter pages with a very clear strategy, so that the overall implementation of them within your site is seamless. Towards that end, and in our next movie, we're going to discuss strategies for customizing starter pages and adopting them as part of your workflow.

Contents