Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Defining and structuring new sites
- Adding and styling text, images, video, Flash, and more
- Previewing work in progress using multiple browsers
- Integrating assets from other CS4 applications
- Uploading and managing finished sites
Skill Level Beginner
If you have never designed a website before, then it can be a daunting process. Page design is usually controlled through combining pages' XHTML structure with an external CSS file. Knowing cascading style sheets well enough to control layout can take some time, and making sure your layout is compatible across multiple browsers can take even longer. While there is no substitute for learning CSS, Dreamweaver does offer you an alternative. Dreamweaver comes with dozens of prebuilt starter pages that already have built-in page layouts, driven by standards compliant CSS. The CSS has also been tested across multiple browsers to ensure maximum compatibility.
With that in mind, we will use a starter page to help us create our site. So I am just going to go up to File and choose New; notice that we could obviously use the hot key of Command or Ctrl+N. Well, here we have the New Document dialog box, and we are just going to do a blank page and our page type will be HTML. As soon as you choose that, the third column here for Layout extends down and you can see we have a lot of options here. They span from a 1, 2, or 3 column layout. They have liquid, fixed, elastic, and all of that has to do with whether or not the layout stretches based upon somebody resizing the browser or whether it stays the same size.
Well, we are going to do a 2 column fixed, right sidebar, header and footer. This is going to give us a two column layout, sidebar on the right-hand side, header on the top, and footer on the bottom. You can even see a little preview of how the layout is going to look on the right-hand side. We can choose a document type; the standard is XHTML 1.0 Transitional, so we're just going to stay with that. Then, we have to tell Dreamweaver where we want it to place the cascading style sheet file driving the layout. We can add it to the head of the document; this is called an Embedded Style Sheet. Well, that only applies to just this page.
We want it to apply to our entire site. So we are going to tell it to create a new file, and we will be prompted to save the new external cascading style sheet file as we create our XHTML page. So I will choose Create, and you can see it's prompting me, "Where do you want to put this external style sheet file?" Well, we have a folder on our site called _CSS, and I like storing all my cascading style sheet files in one external directory. It names it by default, TwoColFixRtHdr, because that's the layout we chose. That may not be the name you want for it, so it's okay to rename this. I am just going to call it main.
As soon as I save it, here is our page layout. We have our header, here is our main content, here is the sidebar content, and if I scroll down I can see our footer. I am going to go ahead and save this page as well. We haven't saved our file yet, so I am going to File and choose Save and in my root directory, I am going to go ahead and name this index. Now, you may have noticed this. There are lot of sites where you will have a page called index or default, and what's that all about? Well, when somebody browses to your website; let's say somebody goes to www.lynda.com, for example.
On that site, there is a page called index and that is the page that's served up by default. So anything that we want to be our homepage, we are going to name it either index or some servers like to name them default; it just depends, but you could always check with your web hosting company. So let's take a look at what Dreamweaver actually did here for us. If we switch over to Code View, I can see that we have a really well-defined page structure. We have these div tags, and div tags really serve as structuring elements within XHTML and they are named different things, like container, header, sidebar, and they give us some clue as to what the content is.
Now, the CSS that's driving it is contained in an external file. Using Dreamweaver's Related Files feature, I can click on that link to quickly go over and see these styles. If I scroll down through this, look how well commented these styles are. So the fact that we have a 0 margin for our first heading inside the header, it tells us exactly why this is happening. If you are brand new to cascading style sheets, this is a fantastic way of learning standards compliance CSS. You can come in here and see how these layouts are being created and why certain rules are doing certain things.
So now we have a page that contains all the elements we need for our layout; we have a header, a footer, an area for our main content, and a sidebar. All we would need to do now is replace the placeholder content with our own text and images. We could tweak the CSS a little bit, so that it reflects our color scheme, and we would be well on our way.