Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Building a CSS-friendly workspace in Dreamweaver
- Creating style sheets visually
- Hand-coding styles
- Working with code hinting
- Organizing style sheets with color coding and sections
- Writing global classes
- Eliminating style conflicts
- Deploying styles
- Dealing with browser compatibility issues
Skill Level Intermediate
When you're working with Snippet libraries, building them is really the hardest part. Using it to create site content is actually quite easy, and it should be, because those are the benefits of using snippets; they make building things a little bit easier. Now, how you build your site content with your Snippet libraries is going to depend on how you organized and structure your library and the amount of options that your specific library gives you. In this exercise, we are going to use our explore theme in CSS Snippet library that we've been building in the previous exercises to build the initial global styles and layout for the new site.
So we are going to be working on a new project here, and all we really want is sort of a jumpstart to the project, do all of our global styles written, the layout specific styles written, then after that, we can go in and sort of style everything for the project. So it's going to be sort of a leg-up, if you will. So what we want to do is start with a brand-new CSS file. So I've defined the 03_07 folder as my root directory, but we need a brand-new CSS file. So I am going to say Create New, right here, CSS. I am going to go to File and choose Save.
I am going to go to the 03_07 CSS folder, and inside that I want to go ahead and name this main.css. Now, at this point, I'm just going to start structuring the CSS Styles document the same way that we would normally structure one. I am going to let the Snippets library assist me in doing that. So I am going to switch over to the Snippets panel, open the CSS folder, and again, I am looking for the Explore Theme that we were working on earlier. Now again, if you don't have this, please refer back to the earlier movies in this title where we were sharing snippets and importing the snippet library into Dreamweaver.
Okay, so the first thing I want to do is I want to go down to the Utilities, and I am going to go ahead and placethe header in our file. So I can get rid of this comment, we know it's a CSS file, and I am going to go to the Utilities > CSS Header and double-click that, and it's going to insert that into our document. I am just going to change a few things here, and make it specific for the new project. So I am going to say style sheet for Hansel & Petal, that's our new client, and I am just going to do version 1.0. I am not going to put a modify date on there, and I'll leave the copyright the way it was before. I'll go down to the next section, and I am going to use a section indicator.
That is something that's going to tell people that we are moving from one section to the other. Notice we have just got a generic section name here, and we are going to change that to global constants, and we'll just leave that indicator at ^1, because it is our first option. So your global constants are going to be the styles like your basic page elements, your headings, your paragraphs, your HTML items, things like that, and we have an entire directory for our Global Constants. So I am going to go ahead and open that up, and the first thing I am going to do is place my html and body reset. I use that a lot, and again, that just sort of clears out the default page margins and paddings that certain browsers might place.
So we all start from the same spot. Next thing I am going to do is go down to the next line and just hit Return, and I am going to open up my <body>tags. Now here, I have some choices. I could use Arial, Tahoma, or a Georgia font stack, whichever one that I want. For the design, we're doing for the Hansel & Petal site, the Tahoma makes a little more sense. So I am just going to double-click that, and that's going to import my body. Now notice that I've got sort of a default background color. It's just white. So that's a perfect setup for importing a graphic to edit that style later on. So don't assume that your snippets are going to come in finished.
In this case, we just have a couple of options here that we could go ahead and change anytime that we want. Also, notice that this one has a top margin of 25 pixels, which is going to sort of push everything down the page a little bit. We're doing that because it's specific to the Explore layout, which is why it's in the Explore theme. I'm going to go down the next line, and I am going to go back to my utilities and add another section indicator, and here we are going to do a CSS reset. So I am just going to type in css reset, change my indicator to 2 instead of 1, and then below that I am going to go into my CSS Resets.
Now, I am going to close some of these folders. I don't like having a lot of folders open when working with this, because it's really easy to get confused. In my CSS Reset, I noticed I have three of them: Eric Meyer's, the limited reset that we did, and Yahoo Interface 3.0 Reset (YUI 3.0 Reset). If you go out on Google and search for CSS resets, you are going to find version after version after version of these things. But I am just going to use the limited reset that we've done, here we go, and we get that on the page. Below that, I am going to return to my Global Constants, and inside my Global Constants, I am going to follow up with basic elements, and then directly after that, notice I whenever I have to link, I can double-click link globals and get those in there as well.
So 81 lines of CSS already written, right on the page, doing what we need it to do, and we really haven't had to code a single thing yet. Now, if I'll scroll up a little bit, you are going to notice that the css reset kind of interrupts our global constants. It just sort of inserts itself in there. The reason for that is the cascade. We want to go ahead and clear those values out for elements, and then the selectors below that are sort of reestablishing those values. So the order that those styles come in is really, really important. So remember that when you are building your libraries, you still have to understand the structure of your pages.
You have to understand the order that the styles need to appear in, or you are going to be causing more harm than good. So really approach snippets from the standpoint of I really know what I am doing with this. I know the order that I need to assemble these in, and I am just going to give myself as many options as I need for this particular topic. Okay, we are almost done. What I am going to do now is after the last item, I am going to go ahead and add another separator, and this particular section is going to be global classes. We'll go ahead and do 3 for indicator there. Below that, we are going to go into our Global Classes folder, and I am going to add the global classes and the Call Out Classes.
I am just going to sort of not put in the IE Globals. There we go. So, all those are looking good. We have all of our individual global classes and we have our callouts. Now, notice what happened here. The callout is added to the same line as the closing one. Now actually, syntaxually, that's not going to hurt anything, but readability suffers there. So I am going to hit Return to take that down to this next line, and remember, the period must remain in front of that. So you want to be really careful. If you ever have to go in and edit where the CSS was placed, you want to be really, really, really careful with that.
Okay, just below that, we are going to go ahead and add another section indicator, and this is going to change to number 4. The section name here is going to be top-level layout styles. Here we go. Now, I can close this Global Classes and Global Constants, and I am going to open up the Layout Styles, so I can see what's going on here. Now, here I have two different screen resolutions that we can target: 1020 and 930. Hansel & Petal is going to use the 1020. So I am going to go ahead and open up my 1020 styles.
The first thing I am going to do is add the wrapper for a 1020 width, so notice that, again, neutral background can be changed to another color or a background image, centers it on the page, and the width is targeting 1020. I am going to hit Return to go down the next line, and I am going to open up my headers, and I am going to do a header for 100x600. So instead of the Explore California site, where we had just that really, tall thin header, we're going to have a really wide, short header, more of a banner type header in this particular layout. Directly after that, I am going to go over to my Layout Styles and add my top-level layout.
So these are all of the individual settings for sidebar, mainContent, mainNav, so all of their layout. Notice that this code is extremely stripped out. It's not presentation at all. It's just layout. That is all that's there. So I am going to go ahead and save this, and we are only going to need to make a couple of minor modifications to our styles in order for it to give us a starting point for the Hansel & Petal. So the first thing we want to do is I am going to go up to the very top of the page, find the <body> tag here, and I am going to change the background color. So again, it's one of the nice things about it. Fff is neutral.
You'll never notice it, but it does give us a property that we can go ahead and edit. So what I am going to do here is edit this to a5bf94. So a5bf94. So now we have a solid background color that we are going to be using for our <body> tag, and it relates a little bit more with the color scheme and the theme of the Hansel & Petal Web site. I am going to scroll down a little bit and find the header selector, which is going to be found right at about Line 138 in mine; yours might be in a little bit different location, but it's in those main layout styles.
So in order to keep these now in alphabetical order, I am going to go up to the first property and hit Return. It gives me a blank line here, and then I am just going to type in background, and after that, type in a u, and I am going to let code hinting do the rest for me. When it goes down to the link, I'll hit Return, and I get to browse. Now, I am going to go up to the 03_ 07 folder, I'll go up to the _images directory, and the only image I've got in there is this Hansel & Petal banner graphic, and that's what I want to use. I am going to go ahead and click OK, and I only want it to show one time, and I'll type in a semicolon. There we go. So I'll go ahead and save that, as well.
Finally, we have one more thing to do here. Because we are using the sort of longer, skinnier background image, the main page content and things like that need to sort of move down a little bit. So I am going to find this mainNav, and I am going to change a couple of things here. I am going to change top margin to 133, rather than 233. Then I am going to scroll down and find mainContent. It should be right below that. I am going to add a margin-top property to that and give that 100 pixels. So that's going to push the mainContent down just a little bit. Now I am going to go ahead and save this, and I want to go to my Files panel and open up start.htm.
Start page already has link to the main.CSS in it, and you can see, there's not much going on here. It's just some place holder content. Now I want to Save All, and I want to preview that in my browser. Let's take a look at it. To be honest, this page looks terrible. But that's okay. It's because we still need to do things like hide this header text up here. We're going to hide that. We've got to add padding and margins to page elements, control navigation style. You can see over here, we still have bullets showing up, and all those other presentation styles.
We still have a lot of them in our library. That, however, is not the point. The point is look how fast we created a two-column layout with a CSS Reset using our snippets library. If our Explore theme library had extensive presentation styles snippets, the rest of our job would be even easier. Having organized, well-structured snippet libraries enable you to rapidly build complex style sheets. Properly planned, snippet libraries can be an amazing time saver, helping you to get the foundation of your site out of the way quickly so you can have more time to focus on specific design elements.