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.
Before we start working on this project, we need to set up some essential preferences. Don't be afraid of using your preferences. Don't be afraid of overriding the defaults. Setting your preferences the way you work and for your team is a way to make it easier to design and to have a great workflow. Before we start setting up the preferences, I would like you to select Split because some of the preferences will affect our code view and we want to be able to see both the code view and the design view as we set the preferences. If you are working on a Macintosh, go up to the top, select Dreamweaver, scroll down to Preferences. If you are working on the Windows platform, select Edit > Preferences. Let's start in the category General. It's at the top of the list.
Notice we have deselected Show Welcome Screen. We decided not to have that appear every time we open Dreamweaver. If you would like to turn that back on, you would come into General and select this box. We will leave this deselected. Another important box to keep selected is Warn when opening read-only files. We want to know whether we have the file to edit a file or it's a read-only file so keep that selected as default. Down the list about halfway are CSS Styles.
Go ahead and select that and when we create our styles, we want to use shorthand. The four styles I want you to select are Background, Margin and Padding, Border and Border width and List style. By using shorthand, it's easier to write the code. It's easier to remember what the code is. It makes for a smaller file, which downloads faster. So there is a lot of reasons for using shorthand. It's just makes it easier flow for the beginner and intermediate. I'm going to keep Font deselected. It's a little bit easier to write out all the styles and attributes for the font.
Also make sure that this Radial button is selected so that once you have set these preferences, that they will be displayed that way always in your CSS style sheet and in your CSS Styles panel menus. And finally make sure that this box is checked. So that whenever you are working on your CSS files it will give you a prompt or notify you in a dialog box that you made a change to your CSS files that you need to update or refresh them or save them. Now let's select Fonts. What if the problems with the default mode for fonts and code view is that it's a very, very small point size. As you can see it's 7 points. If you are working in a team or you are sharing your work or you want to display it on a projection system, this is a very, very small font and it's hard to read. It's actually hard to read even if you are sitting right in front of the monitor. So I'm going to show you how to change this. You just click on the Point size. I'm going to select 10 point. It will make it a lot easier to read the code and will help us as we work on this project. I'm going to go ahead and click OK again so you can see that update.
Okay, that looks good. Again, let's select Dreamweaver > Preferences and now let's select New document. New document is an important area. It has a lot of things already set be default but I you to know that you can change this and this really should change according to what your team is doing or what your office is doing or what your agency is doing. The default document is HTML but as I said many times Dreamweaver is a full-service web design and development tool. So there are all kinds of documents and all kinds of coding documents that you might be using inside of Dreamweaver on a daily basis.
I have talked about how important the document type is so that it will display properly within the browser. By default, Dreamweaver sets it to XHTML 1.0 transitional. But again, according to what your client needs are to what your target audience is and what you as a design agency want to target, you may change that. Many people are moving to XHTML 1.0 strict, some people need to work backward afford a lower end browser a lower end audience. We will keep it XHTML 1.0 transitional. Unicode is a way to make sure that your typeface and font and language display correctly. I just want you to see that Dreamweaver can handle and does deal with all kinds of languages and all kinds of displays, look at all of the different languages that are available in Dreamweaver that we can use to display our pages. Again, we will keep this at Unicode 5.0 UTF-8. And finally, make sure that this box is checked. For the new person or for the intermediate person, whenever you do Command+N, you want to get your New Document dialog box. It lets you see the things that are available within Dreamweaver that will help you with your web design and development.
This way you'll see the layouts, you'll see the templates, you'll see different kinds of documents that you can create. If you are a power user and you want to bypass this, then deselect this. Finally the last one and most importantly is accessibility. It's really important to do web standards and part of web standards is understanding how to make your website available for all people and all target audiences. Accessibility Attributes should be turned on. I myself keep Frames turned off. I don't do Frames for accessible websites and I try to make all my sites accessible. Let me talk for just a moment about what accessibility is.
Accessibility means that people with disabilities can use your website using screen readers or assisted devices. Government agencies, non-profit organizations and educational institutions in many states are required by law to make their sites accessible. So it's important to do. As just to web designer trying to make your websites available to as many people as possible, using accessibility means that you are practicing web standards and best practices. Then most number of people can see your websites. So as a matter of routine, I just follow these practices and make sure that I do this. By checking these boxes any time you need to add accessibility attributes, Dreamweaver will prompt you and tell you what you need to do to accommodate that. So we've done our essential preferences and let's click OK and now they are set. Click on Design and we are ready to start our 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.