Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 work through this project, you will learn how to create an HTML web page and an external CSS style sheet, plan and manage a website, its folder structure and its assets. That might be images, style sheets, and the source materials. Identify the visual interface elements. Implement the best practice of separating structure from presentation or HTML versus CSS styles. Learn how to communicate internally with the team using text proposals and code comments.
Generate color palettes for the web page based on the header image or the images inserted into the HTML document. Practice and deliver consistent style and design objectives for your client's site as well as at the same time experiment and test the limits of your concepts. Finally and ultimately, create an effective communication tool for the design team and the client. So let's go out and look at a successful style guide that Monash University in Australia has created. Monash University has a large, large website and serves a huge target audience. This website has many, many people who contribute to it; both the web design development team, faculty members, and administrators.
So they have designed a style guide that everyone can share and everyone can know what the rules and the consistent display of images, branding, and information should be. What we are looking right now is an example of their style guide for their design elements. As I scroll down the page, you can see things such as layout, composition, topography, color palettes, usage of images, photography, logo, accessibility, all kinds of issues that might need to be addressed in a consistent website and a consistent branding for University.
They have also taken the time to develop a style sheet that shows both what it would look like and what kind of code you need to support that look. This is a very important issue that should be addressed in a web style guide, not only what it looks like, but how do you do that, what lies beneath. I really like this page. Let me scroll down to the Header information. As you can see, this is a clear visual instrument. On the left side we see what the user would see and on the right side we see what the code or the styling should be.
This is a great way to inform your team. It makes it visual not only for the team, but I think the client could understand it and everyone can use it and be consistent with the way they deploy the headers in the style. They also do this for the images. It's slightly different looking, but again, they are consistent with the way they display. This is what the user will see and this is what's done to achieve this. It's a great tool, it's an effective tool, and easy to use. So what's the importance of creating a style guide for you? It will illustrate not only your understanding of Dreamweaver, but it also becomes a printed, an online version of the visual interface elements of a website. This allows a real world team to maintain consistent design elements, update visual interface guidelines, and to establish it as a reference tool, a source of contact information and a help reference.
In some, it becomes your team management tool, and effectively this portfolio piece demonstrates that you can work well with the team that you understand project management and that you understand the principles of web design.
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.