Join Laurie Burruss for an in-depth discussion in this video Objective of this course, part of Creating a CSS Style Guide: Hands-On Training.
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.
Download the exercise files from the Exercise Files tab.
- Planning a site from a blank file
- Creating and editing a style guide with just HTML
- Using the Property Inspector for text markup
- Inserting images, tables, and footers for a custom look
- Creating and editing an external CSS style sheet
- Building a custom color palette for a site
- Testing web pages in various browsers
- Styling tips for professional sites