Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are going to be times when creating a new page from scratch is simply not your best option. If you are new to using CSS for Layout, or you are simply looking for a head start for the structure and layout of your new files, Dreamweaver starter pages offer over a dozen standards-compliant, cross-browser-compatible layouts to choose from. These layouts render consistently in Internet Explorer for Windows, versions 5 through 8, Firefox for Mac and Windows, versions 1 through 3, Opera, versions 8 and 9 for both Mac and Windows, and Safari 2 through 4, really, any browser out there. They're fantastic layouts and they're designed to be cross- browser compatible. All right.
So where do we find these? Well, to access our New Pages, just go to the New Document dialog box. When selecting a new Blank Page, the starter pages appear in the Layout panel, offering choices based off of 1, 2, and 3 column layouts. Now when you're creating a new Page using one of those starter pages, let's say that we use this 2 column fixed, left sidebar, header and footer. Now when you choose one of those, Dreamweaver allows you to create a new external style sheet, add the layout styles to an existing style sheet, or embed the styles in a new page.
Now we'll do that right down here in this lower right-hand corner. So notice that it's asking us, "Hey, what do you want to do with the CSS for this Layout?" We could Add them to the Head of the new document that we're creating, we can Create a brand-New File, or we can Link to an Existing File. So if you already have an external CSS file, you could go ahead and place these styles directly in that file as well, which is pretty cool. Now, for what we're doing here. We're just going to add it to the Head of our document. If you already have an existing CSS file that might control something else, say typography, you're free to go ahead and attach that to the page as well at this point, which is pretty cool.
Now which option you'll choose will depend on your larger CSS strategy. The CSS created this Layout Only well commented and easy to customize for your own uses. So I'm going to go ahead and Create the page. Now as you can see, placeholder information and neutral background colors clearly mark content areas and are simple enough to easily replace with your own content. In fact, most regions have instructions on how to either control the CSS or which content should go where. So they're really, really easy to use.
Now I'm going to switch over to Code view, because I want to take a closer look at the CSS itself. Now if you want to examine how the Layout works, just go into Code view and check out the CSS. I'm going to scroll down until I find it. There it is. Now the CSS is fully commented with clear, concise descriptions of how the page structure, class structure, and layout styles work. Additional comments point out properties and styles focused on creating Web standards compliant code. All this is great information for those learning how to control layouts with CSS.
Now starter pages aren't for everyone, however, if you've never used CSS for Layout before, and want to make sure you're using solid standards compliant cross- browser CSS, they are great place to start. If you already have a strategy for using CSS in place, and one of the starter pages fits your Layout requirements, it can save you a lot of time in the creation of your CSS, as you'll simply tweak the existing CSS to be more in line with your specific needs. Now keep in mind that the CSS and Page structure generated from starter pages is entirely customizable.
You can add to, take away, and tweak the code in whatever manner you want. Just make sure to approach using starter pages with a clear strategy, so that the overall implementation of them into your site is seamless. Now in our next movie, we're going to discuss strategies for customizing starter pages and adopting them as part of your overall workflow.
Get unlimited access to all courses for just $25/month.Become a member