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.
Let's go ahead and set up a custom workspace inside of Dreamweaver so that as we work on this project, we can come back to the same layout and the same document window and panel setup every single time. On the right side is the area where all of your panels will display. If you only have one panel open, there is really not too much that you can do. Notice there is no way to change the size of any of these panels that are on display. But the minute you open up a second panel, you get all kind of options available to you. So let's double click on CSS Styles because that's the one we want to have open for our final layout. Notice as I hover over the horizontal bars, a double-headed arrow appears. If I click and drag, I can then open this Files panel to any size that I want and even inside the panel, I can change and define different areas. If I click on a tab in a panel and drag it out to the document window area, I can float the panel. So that gives you another option.
Personally, I find this to be a little crowded and I really like to see what I'm working on in my design space so to put it back in to the panel dock, I click on the tab, drag it back over to the panel area that I wanted to dock to and notice that a blue line will appear around that area. When you see the blue line, let go off your mouse. New in Dreamweaver CS4 is that you can click on tabs and drag them to he left or to the right. We want to make CSS our primary tab, so we'll drag it to the left. Then we want AP elements and Tag inspector. You can take sometime to play around with those and get those set up the way you want. There are many panels that are available in Dreamweaver.
This is a full-service design developer tool. If we click on Window and look at the dropdown menu, you can see all the panels that are available, those with a check in front of them are the one that are currently open or available to us in our workspace layout. You can also see that for every panel there is typically a Command key that you can use to open and toggle that on and off. But what's really important that we want to do right now is to look at the workspace layout. If at anytime you make a mistake or change your layout or if you can't get back to the layout you want to be working in, you can click on workspace layout and dropdown to Reset. Whichever workspace you have been working on will appear here and you can reset that. What we would like to do right now is to create a new workspace, one just for us. A dialog box will come open saying Save Workspace. And take the time again to name it something meaningful. I'm going to call it Laurie's Workspace. This is a space that I work with all the tome at home and lots of web designer use and I'm really comfortable in this space.
So I'm going to save it so that every time I come into Dreamweaver I have the same workspace to work in and I don't have to set it up every single time. It saves me a lot of time. It feels familiar to me so that when I'm working, I'm not worrying about where things are but I can actually work on the design and development of my web pages. So let's click OK. As soon as I click OK, that workspace now appears up in the top bar. This is a great feature inside of Dreamweaver CS4. I still have all my other default workspaces and I can even go and make other new workspaces if I'm doing coding only or doing developing only.
Again, if I ever change this workspace and I need to reset back to the default, I can come right in here and reset it. And if I want to delete or manage those workspaces, I click on Manage Workspaces. Again a dialog box opens saying Manage Workspaces I click on the space that I want to change or rename. And I can click either Rename or Delete. I'm happy with what I have right now and I want to be able to use this workspace throughout this project. So I'm going to select OK. With our custom workspace saved and set up, we can return again and again to Dreamweaver and know that we'll have our custom layout, our custom tools and our panels just the way we like to work. This can be applied to all the projects we work on in the future.
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.