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.
Our styleguide.txt is ready to go. So what we want to do is click Command+A to Select All, Command+C to copy this. Then let's open up a new HTML document. File > New, Command+N or Ctrl+N, choose HTML, Layout None. Make sure you keep this doc type at the default XHTML 1. 0 Transitional. Click on the button Create. Before we do anything else, save the document. File > Save, Command+S, Ctrl+S. Because we've defined our site, it went to the last place that we were working but we don't want to save it into the Text folder. We want to save it into our Project folder. So go to your directory, look for your main project folder. Mine is Style Guide_lb.
We're going to keep our HTML documents at the top level right there in the Name folder. We'll name this meaningful styleguide_01. One of the benefits of working on the computer is that you can save many, many versions of what you are working on. It's a way to keep a history of your work and the process and the way you were making your design decisions but another important thing for the designer or developer is that you can experiment and then if it doesn't work out or you are not happy with those solutions, you can always go back to that work. You never lose the work. So I save frequently and make lots of versions.
When I'm working with a team or with my students, as soon as I use the word final that means that's the final document and that will be the one that I'll strip out the word final from and send it up to the server. Let's go ahead and save this document. Then I would like to give everything a title, some meaningful title. This will be called Laurie's Style Guide. You can name yours whatever you want. Then the next thing I want you to is put your I-beam at the top of the document. Before we paste that text into this document, it's important to look down at what the Properties Inspector is doing.
Remember this is contextual and it will change all the time according to what
you have selected or where you have inserted your I-beam. Right now HTML is
selected by default and it says that the formatting is None. So I want you to
watch what happens as soon as we paste in the text. I'll come back to the top
of my document window, do Command+V or Ctrl+V. And I want you to go into code
view for a moment. And notice it is not unformatted text. In fact, each section
has a tag, both the beginning and closing tag around it.
tag, both the beginning and closing tag around it.
Let's click on the Design view. This gives us a nicely formatted document. Yes,
we might not want to have every single thing on this page be a tag, but a tag is basically a paragraph tag or a body text tag and it's a great place
tag, but a
tag is basically a paragraph tag or a body text tag and it's a great placeto start when we start adding our markup and formatting. So it looks really good right now. And we are getting ready to go and start doing our markup. So before we do that, let's go ahead and do a File > Save As so that we can keep a record of the process. File > Save As, Command+Shift+S. This will be Version 2. Click Save. And now we are ready to add schematic formatting to 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.