Dreamweaver CS4 Getting Started
Illustration by John Hersey

Dreamweaver CS4 Getting Started

with James Williamson

Video: Rapidly building layouts

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.

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Dreamweaver CS4 Getting Started
42m 9s Beginner Sep 30, 2008

Viewers: in countries Watching now:

James Williamson provides a practical introduction to Adobe's do-it-all web design and development tool in Dreamweaver CS4 Getting Started. He shows how to generate standards-compliant XHTML and CSS, as well as rock-solid PHP, ColdFusion, ASP, AJAX, and more, using Dreamweaver's developer-friendly Code view and WYSIWYG Design view. From creating basic page layouts to embedding multimedia, James shares techniques for publishing a finished site quickly and efficiently. Example files accompany the course.

Topics include:
  • 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
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Rapidly building layouts

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.

There are currently no FAQs about Dreamweaver CS4 Getting Started.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 Getting Started.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.