Join James Williamson for an in-depth discussion in this video Exploring starter pages, part of Dreamweaver CC 2013 Essential Training.
There are going to be times when creating a new page from scratch is not your best option. If you're new to CSS for layout, or you're simply looking for a head start for the structure and layout of your new files, you should give Dreamweaver's starter pages a look. Now although Adobe has currently pared down the number of starter pages available, the remaining layouts are built on standards compliant codes. And they offer cross browser, compatible layouts, that render consistently in almost all versions of Internet Explorer, Firefox, Opera, Safari and Chrome.
So, they can be a really great place to start. Now, I want to show off some starter pages, so I'm going to go to File and choose New. Now, I choose blank page HTML I have two choices here. I have a two columned fixed right sidebar header and footer, and you see sort of a little preview of that. So that would give me a header, footer, sidebar over on the right hand side and a main column of content. Now when both of these layouts are what we call fixed layouts, meaning they're not going to flex based upon the size of the screen. We also have a three column fixed header and footer that gives you a sidebar on either side of the content.
Now since the two column fixed right sidebar, header, and footer is the more common layout used with websites. I'm just going to go ahead and select that one. Now, when you've chosen one of these, one of the really nice things about starter pages is how it deals with the CSS. You'll notice that if I go down here to Layout CSS, I've got a few options here. I can either add the CSS for the layout to the head of the document, I can create a new file, and that's going to create a new external CSS for me. Or I can link into an existing file. Meaning, if I already have a file out there that's holding other style like typography for example, I can go ahead and link to that one as well. And it'll add the layout code to that.
Now, just for the sake of looking through the code quickly, for this one I'm going to going to Add to Head. So, that'll place the CSS directly in the head of the document. Alright, I'm going to go ahead and choose Create. And as soon as I do that, I get my new starter page. Now I'm going to switch over to Design view, so you can kind of see what this page looks like. Now, as you can see this page has page holder information, and it's got some neutral background colors. So, those background colors really help you mark the content areas, and there's simple enough to easily replace with your own content in your own style. It's very easy to kind of see where everything is and figure out how you're going to configure this for yourself.
Now, if I switch over to Code view and I start looking through the CSS. One of the things that you're going to notice is that the CSS is fully commented with clear, concise description of how the page structure, class structure, and all the little layout styles work. Additional comments are going to point out properties and styles that are focused on created web standards-compliant code. So, this is all just fantastic information for those of you that are learning how to control layout with CSS. So, even if you're not going to use starter pages, it's worth it just to sort of read through this to learn a little bit more about how layout works with CSS. And how to properly write your styles so that they work across multiple browsers. Now, I'll admit, starter pages aren't for everyone. However, if you've never used CSS for layout before and you want to make sure that you're using solid, standards-complient cross-browser code, they're really a great place to start.
Now, if you already have a strategy for how you want to use CSS in place, and one of the starter pages fits your layout requirements. It really can save you a lot of time in the creation of your CSS, as you'll just simply tweak the existing styles to be more in line with your specific needs. Now, keep in mind that the CSS that you're looking at here and all the page structure itself that's generated from these starter pages is entirely customizable. You can add to it, you can take away from it, you can tweak the code in whatever manner you want. Just make sure that your using starter pages with a very clear strategy in mind so that the overall implementation in them into your site is seamless. With that in mind, our next exercise is going to be focused on discussing strategies for customizing starter pages.
And then, adopting them as part of your overall workflow.
- Learning how to approach web design
- Managing workspaces
- Defining a new site
- Managing starter pages
- Exploring the authoring options
- Creating links
- Setting CSS preferences and styling a page
- Placing and styling images
- Working with tabular data
- Uploading files
- Checking for broken links