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.
Now that we have our Dreamweaver workspace and preferences set up, we are ready to start working on our style guide. Before I actually get into the HTML, often I take a text editor or Notepad, open up a text document and just try to work out my ideas and thoughts about what the copy should be, where images should be. I don't even use real images; I just use the words 'Placeholder Text Header goes here.' I have actually done that for this project. If you look at the Files panel, there is a text folder. Let's open up the text folder and you can see that we can't really see the names of the text files. This is a little disconcerting. But there's an easy way to fix this. Simply go up to where it says Local Files, hover over at the bar right there. You'll get the two- headed arrow, click on that and drag it out to the right. There we go. Now we can see those names. This makes it much easier to see. There's other ways we can enlarge the panels but I try to keep the panels as small as possible so that I can use my real state for design.
So let's open up the Style Guide before and this is the example that I was talking about. I just set down quickly and try to get my ideas down on to the page in the text editor that I want header image at the top, a simple navigation bar, some headings, what do I need to have in my style guide. However when you use a text editor like TextEdit and click on Return or Enter, it puts in what we call a line break. Notice it's very compressed looking. There is no spacing between that. So we need to go back into this document and put our I-beam at the end of each section and hit Return or Enter again so that we have a nice paragraph break or what we call a full break. So I'm going to quickly do that each section and I want to be independent. I'll go at the end of that line and put a Return or Enter. I'm going to quickly do that and if you want to do this yourself you can follow along and do this.
But I have also got a finished file in the Text folder that you can use called Style Guide Final. But I think it's good to see this. By doing this full break, it makes it much easier to copy and paste it into your HTML document. Another reason for doing this text document that you can share with your client, share with your team, every body can print it out, mark it up, doesn't destroy your website, doesn't do anything to your server. It's a great way to make everybody feel like they can be onboard and part of the design process.
Now I see that I have added something that I'm not really going to put into my style guide at this point. So this is another feature I like about it. I can edit on the fly. This is a part of the style guide I don't want in here. So I'm going to delete that. And you can see I can make a lot of decisions and not lose anything but still get the feeling that I have control over the design process and the content. So I'll just quickly take a look and make sure that all the sections have the full break and they do. And once I get the page looking the way I want it, I'm ready to bring that into Dreamweaver. But before we do that, let's save it, File > Save As and because I have defined my site and Dreamweaver knows that and it knows that I opened up this document from the text folder. It's already found the directory and the right spot for me to save this.
So we are going to delete the underscore before. And this will be our Master Style Guide and click Save. There we go. Looks great. The next step is to actually move this content into our HTML document.
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.