Whether you have big dreams of launching a successful graphic design career or you’re just looking to pick up a few skills to dabble in your spare time, there are multiple ways to teach yourself some of the top skills used in the field .
We produced the Adobe Creative Cloud Tutorial Series to support you in your efforts. Because no matter how ambitious and tech savvy you are, it’s always nice to have a little help from the pros. This visual guide will add another talent to your arsenal of design skills.
In this episode of the Adobe Creative Cloud Tutorial Series, Jennifer Ayotte, Rasmussen College School of Design dean, will provide you with a step-by-step demonstration of how to create CSS layouts in Dreamweaver. Be sure to check out the Creative Cloud Tutorial Series
How to Create CSS Layouts in Dreamweaver [Tutorial]
Hi, my name is Jennifer Ayotte, and I'm the School of Design dean at Rasmussen College. In this tutorial, I'm going to show you how to use Dreamweaver Creative Cloud to create CSS, or cascading style sheets, layouts. As with learning anything, particularly for web, it is easier to start with an existing or an example file, and then you can pick it apart to learn how it works before you start to construct your own from scratch. Luckily for us, Dreamweaver allows us to do that very thing. So I'm going to close my plain HTML file, and when I go back to File, New, with this new document dialogue box, here in Dreamweaver, we have a couple different options that we've probably never really paid attention to before. We are going to leave it as a blank page, in the far left here, and as the page type, we are going to stick with a plain HTML. We don't need to make a template or a library item. We don't need to get into any ActionScript or CSS or JavaScript or XML quite yet. But what we are going to do-- instead of the layout of none, which has no preview, and would just come up with an empty page, let's explore these CSS options, here. So these are layouts created with CSS. And you'll see two differences here. The main differences are something is either fixed or it is liquid. Now the following tutorial video will show the difference between fixed and liquid, but for now let's scroll through our options. This preview window over here gives us an idea of how the page will be broken out. So right now, this first option is one column, where the page just almost like a Word document or an Illustrator page, just one empty column. It has a fixed width, and the content is centered. So one column, fixed center, but with header and footer. We can now see that a header area at the top is in light grey, and a footer area is in the bottom, in addition to our one-column overall layout, centered with fixed width. So as we scroll down here, we can see that what the icon changes between fixed as a lock, and liquid is not locked. It is in a percentage with a little-- what looks like a spring-- as in, its flexible. It'll move based on what the width needs to be. That's the difference between fixed and liquid. Fixed, it's x number of pixels wide, and that's a fixed amount. Liquid is it's a certain percentage wide, and they can flex depending on the browser window size. So let's look at a two-column. So here we have two columns with a left sidebar. If we had a two-column right sidebar, the sidebar switches to the right. And again, these are both fixed options. We could get into two-column liquid left sidebar, and two-column liquid right sidebar. Or we could also pick some of these options that have the two-column with the sidebar, but also a header and a footer. So we could spend all day going through these different options and exploring them, but what I'm going to do for now is I'm going to do a two-column, fixed, left sidebar header and footer. This has to be one of the most common setups for websites where you have a header, a footer, a main column here in the middle for your content or your body text and imagery or gallery page, whatever. And then the left is usually used for some sidebar navigation, or news and updates. So let's go ahead and hit Create, and let's see what we get. I'm going to zoom out a little bit so you can see the whole page. And sure enough, here's what we have. We have our header area here. We have our footer down below. We have our left sidebar with some dummy links in here already. And then we have our main content area. All this content in here-- if you read it, it's because Dreamweaver is trying to provide with you some initial information to explain what you're seeing. So it's saying, link one, two, three, four-- The above links demonstrate a basic navigational structure. That doesn't mean you have to keep your links over here. You can have them along the top. This is accounting for a logo in the upper left corner, of roughly 180 by 90, in pixels. And then the background here, we can see that the page background is just this slate gray. So that is using a template for CSS, but how do you modify it? Whenever you do anything that has CSS, whether you make it from scratch, or you use the template like this, you need to work with your CSS styles palette. So right now we'll see what looks like a playhead, and something called style. This style sheet has the recipe for how everything that we're looking at appears. So I'm going to hit this to be a drop down arrow so we can see-- I'm actually going to expand a little bit. So we can see everything that's going on. I'm going to move that out of the way. I'm going to expand this down, just a little bit. This looks like a lot. And it looks scary. And some things start with a period, and others do not. Some things say "ul," well, we're not really sure what that means. So here's what I'm going to tell you-- that this is like a giant sandbox for you. Get in here, play, and see what happens. So let's click on the first style recipe, here-- body. So, as you click on something, it doesn't highlight it in the document for you. What it does is it shows you all the properties, all the attributes. So, in this case, what it's telling me is it has a background color. And if you hover over, it tells you the full terminology there. This grey, this hex color, 42413C, looks an awful lot like this background here. So I'm going to assume that that body CSS rule is dictating the way that color appears, as well as my font and my font color. So let's change the color to this bright blue, just to see what happens. Yeah, sure enough, there it is, so I now know that body controls that background color. And let's see what happens if I change the color to a red, here. Yes, sure enough, I thought this was my body text, and it was. My hyperlink didn't change, because that's not body text. That's a hyperlink. But my body text, including down here in the sidebar, did. So let's look at a few other things, here. Let's take a look at headers one through six, which, if you work with your Properties panel here, you'll see that there are two views. You can use your properties in conjunction with your CSS styles panel to see what's going on, and where. But, in this case, I'm not wanting to see the properties of just some HTML component that I have in here, such as if I were to work with this hyperlink. If I highlighted the plain HTML5 hyperlink, it's telling me the link that it goes to, down here. It's also where I could change the link, but that's not what I want. I want to use this for my CSS abilities. So I'm going to click on the CSS palette. If I do that, what it shows me is actually the qualities of what I have selected. The properties, the property inspector will always show you the attributes of what you have selected. So in this case, I can see that clearing method text is being controlled by a targeted rule, which is what we see here, a CSS rule of h1, h2, h3, h4, h5, h6, p. So, highlighting this tells me it's being controlled by this, and this is what it looks like. It is a font in-- try for Verdana first, then move to Arial, and then Helvetica, and, if all else fails, go to any sans serif. Remember, not everyone has the same font on their computers, so we give a variety. We use font families in web design. We give a multitude of fonts that are similar in appearance, so if they don't have Verdana, the next thing that their computer will try to show in the web browser for text is Arial, and so on and so forth. So, what I would definitely recommend to you is-- let's take a look here-- when I highlight this ruler, this actually-- this rule for CSS is only showing that it has a left-padding of 15 pixels, and a right-padding of 15 pixels. That's why there's a gap here. This left-padding, that's a 15-pixel gap, so it can't get right against the line. So I can't change the color. If I wanted to, I would have to do so with my CSS Properties Inspector, live and in charge. So let's see what happens if I come in and change this to a-- let's do an orange. That changed all my text that follows under this rule, so when I changed to orange that just let me know that all of this text is being controlled by that h1, h2, h3, h4, h5, h6, p CSS rule. So, let's look at something else. One more thing here, anything that is a is a hyperlink, of sorts. So that's why, when I click on a link, I can see that the initial in color is this grey. If it is visited, then it should be a lighter grey. You can see the difference here. And then for hover over, I want my-- apparently the hyperlink is to not have any text decoration whatsoever. So, no underline showing up in the hover over in the rollover for a hyperlink. Just a few more things here. Let's check out the sidebar. OK, that color is definitely this color over here, in the left sidebar. So I could change that background color. Let's do a dark gray. There it goes. And then let's just scroll down a few more things, and see what else we see. Let's go back to content. So, somewhere here is something called content, and it's 780 pixels wide. I'd really like to know what content is. Is there a way that you can use Dreamweaver to tell you that? Yes, you can. So here's what I'm going to do. I'm going to go to Split View. And I'm going to highlight this text. I want to see what that text lives in. So now, what I can do is, I can see that this text-- and actually a lot of the text on this page-- but here it is. Highlighted in Design View means it's highlighted in Code View. I can see that it's styled in h2, which makes sense, since I change the h1, h2, h3, h4, h5, h6 to orange, and it changed. But what I can do is I can actually go back and look for the word content, and up here it tells me that it's in a div class. A div is a CSS rule that is used to create the building blocks. If I go back to Design, what we're seeing here, if I zoom out more, 50%, This header is in a div. This white area is in a div. This sidebar is in a div. These are all the things that allow you to partition and carve out. And actually, you can select a div, like I just did here, and if I hover over it actually tells me-- hey, you just selected the sidebar1 class, as seen in the drop down, there. So I know that sidebar1 is this, which we already know because we changed the color. So how can I do that here? Well, I'm going to click on header, and sure enough it tells me header. So where's content? Well, content is inside the overall div. The big div called container. How do I know that? Well, first of all, I selected the overall content-- the outer frame. And it's selected in yellow, and I can tell that that's container. I can also tell by hovering over and getting the yellow pop up box. And I can further tell because, down here at the bottom of my Dreamweaver document window, it tells me. Right there, this is a bread crumb trail, almost like navigation. I'm in the body of my HTML document, which is good. The head, as you know, is code only. The body is for the design. And, more specifically, I'm in div container. So that should be reflected in what we see here. And, sure enough, if I scroll all the way back up, I know I'm in body. So here's the end of the head tag. Let's start with body. Here we go. The very first design element is called container. That holds everything, including my header div, my sidebar1 div, my navigation div, which is its own little div up here. And then if I scroll down, I will actually see content. So my div called content, my partitioned area, is actually this white space, right in there. So that's a very, very simple way of using the standard new file options in Dreamweaver for setting up CSS page. The next series of tutorials will explore the difference between fixed and fluid, and how to edit them. But CSS is something that you will spend years perfecting. This video tutorial is only a brief demonstration on how to create a new template from that new document option in Dreamweaver, and how to see what you're looking at here, and how to deal with it. Your first web projects won't be perfect. They won't be exactly what you have pictured on your storyboard or in your head, but the best thing is to start slowly, to create things, to use templates, to poke around, and to mess with your CSS styles palette and your properties palette, to understand what you're seeing, why, and how to make small incremental adjustments to get it to where you want, until you're at the level of making your own CSS from scratch. Thank you for watching this tutorial, and I hope you enjoy your new found skill set.
If you’re serious about pursuing this profession, learn more about how a graphic design degree can help jumpstart your career!
