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.
As you start adding styles to your web page and website it's important to test in a number of browsers and use both platforms, both Macintosh and Windows. So let's go into our Preferences inside of Dreamweaver and set up our browsers for testing. On the Windows machine you would go up to Edit > Preferences. On Macintosh you come up to Dreamweaver and select Preferences or Command+U. In the category go down to Preview in Browser and select that. Right now I can see that we have two browsers selected that we can use for preview purposes, Firefox and Opera. But I'd like to add Safari. So how do I do that? I click on the plus box up here at the top and I'm going to write Safari, give it a meaningful name. I'm going to browse out to my -- if you were doing this in Windows, that would be your Program files folder.
I am going to scroll down to the S's. This is in alphabetical order. There's Safari, select Safari and then click Open. On the Windows, I would suggest that you go out and get Internet Explorer, a very important browser to test for. I'd like this to be my secondary browser so I'll check the box Secondary browser and then click OK. For development I like Firefox to be my primary browser. So I'm going to select Firefox to make sure, in fact it is. The box is checked saying it is the primary browser and so now I have my Preferences for browser set up the way I like.
At home I have four or five sometimes seven different browsers inside of this box. It's important to test on a wide variety of browsers and a wide variety of versions. It's also important to test on both platforms Macintosh and Windows. If you are in the web design development profession you will be using both platforms. Let's click OK and leave the Preferences dialog box. So now let's go up to our Preview in Browser button and see if we have got Safari listed as one of our browsers. There we do. Notice that the primary browser has a Command key next to it. And the secondary browser also has a Command key next to it. Get in the habit of using those I use them all the time.
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.