Start learning with our library of video tutorials taught by experts. Get started
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.
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.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.