Start learning with our library of video tutorials taught by experts. Get started

Creating a CSS Style Guide: Hands-On Training
Watching:

Understanding the Dreamweaver interface


From:

Creating a CSS Style Guide: Hands-On Training

with Laurie Burruss

Video: Understanding the Dreamweaver interface

So inside of Dreamweaver, let's explore the Dreamweaver interface and look at the workspace and see some of the toolbars and feature sets that are available to us in our workspace. One of the first things you will notice, if you are a return user to Dreamweaver, is that the Insert bar is in a new spot. It's in the right panel on the upper right. It takes up a lot of real estate, so the first thing I like to do is go over to this top panel area and click on the word Designer. This is a new feature in Dreamweaver CS4. As I click on the dropdown menu, you will see that there is all kinds of occupations that you could have as a Web designer or developer, and there is a layout or workspace for each one of those.
Expand all | Collapse all
  1. 6m 58s
    1. Welcome
      1m 9s
    2. Objective of this course
      3m 38s
    3. Using the exercise files
      2m 11s
  2. 28m 26s
    1. Starting Dreamweaver for the first time
      3m 38s
    2. Defining a website
      4m 3s
    3. Understanding the Dreamweaver interface
      9m 43s
    4. Setting up a custom workspace
      4m 10s
    5. Setting essential preferences
      6m 52s
  3. 56m 54s
    1. Laying out a page in a text document
      3m 40s
    2. Creating and saving a new document
      3m 27s
    3. Inserting an image
      8m 22s
    4. Marking up text using the Property Inspector
      6m 48s
    5. Marking up text by hand
      9m 21s
    6. Inserting, formatting, and selecting a table
      8m 16s
    7. Creating links
      12m 26s
    8. Styling a footer
      4m 34s
  4. 22m 15s
    1. Using Modify Page Properties to create embedded styles
      12m 22s
    2. Creating links with CSS
      4m 55s
    3. Working with Code, Split, and Design views
      4m 58s
  5. 8m 52s
    1. Defining browsers to test a web page
      2m 24s
    2. Previewing a web page in a browser
      6m 28s
  6. 16m 44s
    1. Using a span tag to add a class and customize appearance
      10m 34s
    2. Using the Tag Inspector to create and edit additional styles
      6m 10s
  7. 48m 42s
    1. Exporting existing styles into an external style sheet
      7m 0s
    2. Using the CSS Styles panel to add a new style
      5m 43s
    3. Using the div tag to create a content container
      11m 8s
    4. Overriding the default browser styles
      2m 46s
    5. Applying padding and margins
      4m 57s
    6. Styling header tags
      5m 34s
    7. Creating and styling compound tags
      5m 12s
    8. Editing preexisting rules
      6m 22s
  8. 19m 36s
    1. Improving the Footer
      5m 12s
    2. Commenting a CSS style sheet
      7m 0s
    3. Creating a custom color palette
      7m 24s
  9. 3m 6s
    1. Style sheet final review
      3m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating a CSS Style Guide: Hands-On Training
3h 31m Beginner Mar 06, 2009

Viewers: in countries Watching now:

A web site is just a web site unless it’s designed with a unique style. Creating a CSS Style Guide: Hands-On Training highlights the importance of a CSS style guide, which serves as an interface for the design team and a communication tool for the client. Laurie Burruss calls on her background as director of digital media at Pasadena City College and takes an informative, real–world approach to this topic. She shows how Dreamweaver CS4 can be used to develop a coherent site–wide emotion that boosts brand identity. The course culminates with building a working web style guide for professional use. Exercise files and a downloadable PDF quiz accompany the course.

Download the exercise files from the Exercise Files tab.

Topics include:
  • Planning a site from a blank file
  • Creating and editing a style guide with just HTML
  • Using the Property Inspector for text markup
  • Inserting images, tables, and footers for a custom look
  • Creating and editing an external CSS style sheet
  • Building a custom color palette for a site
  • Testing web pages in various browsers
  • Styling tips for professional sites
Subject:
Web
Software:
CSS
Author:
Laurie Burruss

Understanding the Dreamweaver interface

So inside of Dreamweaver, let's explore the Dreamweaver interface and look at the workspace and see some of the toolbars and feature sets that are available to us in our workspace. One of the first things you will notice, if you are a return user to Dreamweaver, is that the Insert bar is in a new spot. It's in the right panel on the upper right. It takes up a lot of real estate, so the first thing I like to do is go over to this top panel area and click on the word Designer. This is a new feature in Dreamweaver CS4. As I click on the dropdown menu, you will see that there is all kinds of occupations that you could have as a Web designer or developer, and there is a layout or workspace for each one of those.

We are going to choose Classic. When I do that, the Common menu then appears up at the top, and as you can see, it saves me a lot of space. We will be using the Common toolbar a lot. So putting it up here horizontally will save us some space, and also make it convenient to use throughout our project. Next, let's go ahead and open up a file so we can see how it appears inside the workspace. Go to File > Open, Command +O or Ctrl+O. Notice because we have defined the site, it automatically takes us to our project folder or our defined website folder. We are going to click on styleguide_final.html, and then choose Open. Great! Now, we have a real web page displaying inside our document window.

Let's go back up to the Common menu toolbar. One of the things you want to do is keep your tooltips on. As you roll over each icon, you can see what it does and how it works. We will be using a lot of these frequently, particularly Images, Tables, some of the link ones, we will be working with a lot of these features up here. Now, I would like you to select the Text tab. There are a lot of things up here that you can use, but my favorite feature on the Text one and you will use it again and again is this last one called Characters. Notice it has all of the weird characters, the ones we are always looking for in Microsoft Word but can't find and don't know how to do. But Copyright, Trademark, Registered, they are all right here. Really, really easy to use, and all of the ones for money as well. So just keep that in mind.

The last tab, Favorites. It looks like it's nothing, but it's really just for you. A lot of the new features in Dreamweaver CS4 are about customizing Dreamweaver so it works for whatever project or job you are working on. If you right-click on this bar, you'll see that you can dropdown to Customize Favorites. This brings up a dialog box that shows all of the tools available to you. You can click on a tool, add it over here in your Favorite objects, set up how you wanted to limit that, and then click OK and make your own customized toolbar for your project or your team. We will leave it at the default for right now and click on Cancel.

So let's go ahead and look at the document window. This area right here is called the document window. It also has a toolbar at the top. We will be using this toolbar frequently, and its a way to display your website in a lot of different ways. By default, we are in Design view, which shows you the presentation style. In Design view, we see Dreamweaver's guess at how it will look or appear inside the Browser window. If we click on Code view, we see the actual HTML code. This should remind you of the fact that you can show you code inside the Browser window or inside the Web Developer toolbar. When you say Source code, this is exactly the kind of document you see in that window, and it appears with all of the tags. You can see the head and the body, some of the things we have talked about before.

This button Split allows you to see both Code and Presentation mode at the same time. But you could never customize it. In the new version of Dreamweaver CS4, if you go all the way up to the top to this button called Layout. Click on the button, choose Split Vertically. You can now put your code and your presentation side by side. A lot of developers, coders, designers really like this mode. If I select something over here, then it will appear over here in Code, and this makes it very easy to work on your document and see how it looks from the front or what the user can see, and how it's working behind the scenes.

Let's go ahead and click on Design view. This is a new button, Live View. Live View stimulates the page as it would appear in your Browser, your default choice for Browser. One of the important things to know is are you in Live View or are you in Edit mode. When you are in Live View you can't edit. So if I click on something, it turns blue. A pretty good indicator to you that you can't edit in that mode. Just go back up to Live View and toggle that off. Now we are back into Edit mode. This grayed out button Live Code is an advanced feature. You will see this become hot if you are working on dynamic databases or connected to a dynamic database.

The Title, as we have talked about before, appears in the top of the document window of the Browser, and we will see that previewed in just a moment. This button is for File Management. Again, an advanced feature when you are managing large sites and working with teams and people for checking in and out files. But this is probably a button you will use frequently and will use it throughout this project. This allows you to actually preview the work that you are doing in Dreamweaver inside a browser. So let's click on this button and go Preview in Firefox. As you can see, this gives us a real view of what our page looks like inside a real browser. This is actually the way this web page would look inside of Firefox 3.0. The only difference between this and actually doing it on the Internet is that it's not located on a remote server. We are looking at it as a local file on our desktop. So let's close out of Firefox. Click back on your document window to bring Dreamweaver back up.

The last few buttons are here all about how you want to display things inside of your document. These are view options and style guides and visual aids you can turn on, and validation for your page, whether it be HTML, or accessibility, or your CSS style sheets. So let's move on down through the document window. Remember the main part of the document window is a lot like your desktop or having your own drawing board. It's your creative content area. At the bottom here is the tool we use frequently. It doesn't look like its important but its great to be able to see how the tags are ordered, how they are nested. You can click on any tag to select something. If I click on Heading, you will see that h1 appears down here.

All of the buttons on the right side are about how your page displays for you inside of Dreamweaver or how it might display inside of a browser window. These first four buttons are all about your working inside of Dreamweaver. The first one is the Selection tool, and by default that one is selected for you. You should be familiar with the Hand tool. That one actually allows you to move a page around. I'm going to click back on to my Select tool. The Magnifying Glass works just like it does in any other tool. You can use your Option key and Zoom in and out, and you can set an actual percentage for your website. You can go up very large, like to 400%, or I can demonstrate and go down, back to 100% again.

You can also move your page around by using your sliding bars, your blue bars here. These four buttons are all about how it might display inside of a browser window. That viewport that we have been talking about inside the browser. These are some standard set sizes for different screen resolutions and different kinds of monitors that you can test your site out in. This gives a guess by Dreamweaver of how long it will take to download your page. This is probably for 56K modem, and it's saying the page weight is about 47K.

This last button, the Unicode, is a way we can indicate foreign languages, and what kind of text, and the way we are going to display our code. We are going to be using Unicode 5.0 UTF-8 most of the time, its used frequently, and almost pervasively throughout the United States. The Properties Inspector, you are probably familiar with if you have worked with any Adobe or Macromedia products. It's a contextual inspector. So when I select different things up here, it changes down there. Right now I have HEADING 2 selected.

What's new in Dreamweaver CS4 is that you can see the structural properties or you can see the presentation properties. HTML would be your structural properties; CSS would be your style properties. So this is a great feature, because they are separating the presentation from structure, which is the correct or web standard or best practice in web design. I love this new feature. It makes it really easy for the beginner to see when is it a structural element and when is it a design or style element. Another button that's important for beginners to find and to know that it exists is the Page Properties. You can locate it at the bottom of your Properties Inspector, or you can right click on your main page and scroll all the way down to the bottom, to Page Properties. You will see that there is all kinds of categories and ways you can set up your page so that you can get the appearance of your page to work just the way you want it to work. I'm going to cancel out of that right now.

So now we have had a look through the workspace, looked at some of our most important toolbars. Seen that we have a lot of features and customization that we can do to setup the workspace the way we want it, and now let's set up our workspace the way we are going to be working on it throughout this project.

There are currently no FAQs about Creating a CSS Style Guide: Hands-On Training.

Share a link to this course
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.
Upgrade now


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

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 Creating a CSS Style Guide: Hands-On Training.

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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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