Lessons

Lesson Info

Modifying Fonts Part 1

a common thing you want to do with an image is to put a caption on it. And then maybe we want to center the caption under the image, and that's gonna be a little different. So let me first put another div tag around this image and just to reinforce what we just did to add a dip tag around something that's already in the page, just select whatever that is in this case, I'm selecting the image, use the DIV option in the common insert panel or choose insert Div. And again, you can name the style that you associate with a div as you insert it. Or you can just click OK and then do that in a later stuff I'm gonna call this main content will be the main content box inside my container. I'm gonna have main content around this image in its content. I might have another style at the top called Header with my title in NAFTA might have another div called knave for my navigation links. You start to see how those boxes get used to put page together. I'm gonna call this one main content and I'm gonna...

just check in the code just to make sure Dreamweaver did what I intended. Yep. It put a div tag around here. Cool. So I've got a diff tag around the paragraph tag around an image tag, and I'm gonna put another little comment here. I'm just gonna copy and paste this one, so I don't have to re type it. And I'm just gonna put main content And you see what I mean about how you can end up with all these def tags at the bottom. So this is a little bit of an advanced tip, but if you start to put those in, as you're putting this first is and it can really help you keep things organized later. Now, the other thing that's a little tricky is if I have a diff tiger on an image with nothing else and I want to put now, uh, caption underneath it. It could be a little tricky to put your cursor in exactly the right place. So I selected the image. I use the right arrow key to go off the image. And then I hit the return key to get that paragraph. But now I've got two because I did it twice. But if you're just in design view and you're trying to put something under an image in a diff tag and there's no spacing there, it can be hard to get your cursor there. So that was just to help you. Once the paragraph tags air in there, you can see just barely that the cursor is going to wear those paragraph tags. So if I want a caption here like eager it hunting in Northern California, I can just type that in their cool. So no, I have a caption. Alright, What I was just doing was changing the display size of dream weavers windows. So the same way you can zoom in and out in photo shop, you can zoom in and out in Dreamweaver. I usually don't do that much. I usually just leave it at the actual size. But for this class in this limited space, that actually might not be the wrong thing to do part of the time. Oops, there were safe. I have a habit of command State control C command. See, depending on which operating your system using I saved without even realizing I'm saving, I've done it so many times These two little fingers just save save early and often so have occurred. Have a caption under here. But boy, I'm not really happy with the way that looks so I'm gonna do a really simple thing. I'm just gonna center it. I'm gonna change the font, even change the color a few steps all at once and again. There are many different ways to write CSS not unlike there many different ways to write a sentence, right? I could have said eager hunting in Northern California. I could have said this eagerness hunting in Northern California. I could have said in Northern California and here it is, hunting all of those would be grammatically correct similarly to CFS. I can put the styling information that changes the alignment color and thought of this text in that main content of that means everything in there will be this color style in front. Or I could create a whole nother style and apply it just to that text and call it something else and associate it in another way. All those things air, correct. What I'm gonna do this time is just put all of this in the main content style when I put all of the styling that I want for this caption in the in the style that I just created called Main content. So if you remember, when I put this dipped Agon I went ahead and said, I'm gonna call it may and content. But just like the container, there's no actual style defined until I do that. All I did was in the HTML code. I put that name there is ah holder. Now I'm going to define the style. Remember, the browser comes to your HTML document. It says, Oh, there's a style sheet that goes with this page. Oh, it has a so called container. Oh, there it is. That's where I use it. Oh, it has another so called main content. What's that one look like? How should I make that look? So now we're gonna define the main content style and again because of the class style, I'm gonna start with the dot Let's go back to design view for a little less clutter. Open this up a little bit so I can see what I'm doing. I've got my main style sheet. Once I've selected that, I can click the plus sign and notice what Dreamweaver just did. Because my cursor is on the image, it assumed I wanted to create a style that goes with that image, and this is getting a little advanced. But what it's doing here, and you'll see this a lot in Dreamweaver, so don't be thrown by it. It's giving me all of the things that are around that element so that I can create a style that would be applicable to all of them. One of the complexities of CSS is that you can create styles with simple names, or you can create combined styles that Onley work in specific instances. This makes more sense if you think about, I might want the heading to tag in the main part of my page to be blue. But in the sidebar, I might want all my heading to tags to be green so I could define heading to tags in the sidebar toe look different than heading to tags in the main content area. And that's what's happening here. Dream we were saying, Oh, I'm gonna create a really specific style, so the style you create Onley affects the thing. If it's inside these other things. But this isn't what I want. It all. All I really want to do is create a style for main content. So I have two choices. I could believe this and type main content are going to leave everything around main content. I don't really wanted to find all of that. I just wanted to sign a style, remain content again. It would not be incorrect to make this main content space p, And then it would Onley apply to things in a paragraph tag inside the main contact folder. And if it wasn't an H one tag, it wouldn't be affected by this. But I want this to affect everything in this folder just for simplicity sake. So I'm just gonna create a style called Main Content zooming out just a little so you can see a little more. Now I'm going to find that style over here. So the first thing I'm gonna do is I'm gonna change the text options. Now if you notice here if you're new to the CSS designer, I want you to just see as I scroll down, you can actually see all of the options are just one long list these little links up here are just shortcuts. So if I click on T, I go right to the text options. If I click on layout, I go back up to the top. But if I scroll down a little bit, I'll get to the text options. They're all in one long list, so I'm in the text options. I can change the color. Let's make that caption kind of blue color me somewhere in that range. Just do it and let's use a font. Now fonts are another thing that are hard to explain in just a few words. These collections of fonts are built into Dreamweaver, and they're built into Dreamweaver because Dreamweaver is designed to take advantage of the most common thoughts that you congenitally assume are already on everybody's computers, these air, the safe fonts. And even then it's giving you kind of more interesting collections than it used to. Instead of just being Ariel and times, which are the defaults. Now it's gonna give you Gotham and then Helvetica new and then Helvetica and then Ariel and then censor. And what that means is browser. In this style, we want the font of Gotham. If you can find it on the person's hard drive. Make it Gotham. If you can't find Gotham, look for Helvetica. New. If you can't find that one, look for Helvetica. If you can't find any of these, at least make it a sans serif font. So that's why there's a list of fun there. So the browser has some choices. It's gonna look on the user's hard drive for those. These three flights down here at the bottom come from Adobe Type kit. I'll come back to that, but you can now associate almost any font you want with a Web page by defining it and telling the browser where its definition is on the Web and how to use it. That's a relatively new thing to be able to use cooler fonts, but for now, just gonna use a pretty simple Gotham fund. Then we get to style, and you can choose styles and everything else. Let's just do a size. Let's make it a little bit bigger. We could do pixel size, and instead of the default, which is about 16 pixels, we could make it 20 pixels or 30 pixels. How many use EMS and threw in a slightly advanced tip here. The I M size option is a size based on the letter M in the font you're using. And if you're doing responsive design, using ends is a nice choice because that font size will be slightly different, depending on the font size displayed on different people's computers. And if you've never looked at the windows and a computer, if you've never looked at Windows and Mac side by side, you should open to browsers on a Windows and Mac and look at the same Web page in both, and you'll notice that the font size, unless somebody's figured out how to adjust for it, will be slightly smaller on one than the other. It's not displayed the same. So ems air pretty helpful in one of the challenges of one design and adapting. So I'm just gonna make this. Let's make it to em so it's pretty big click return now you can't see it, but all of that should have instantly look at that applied to this because I've already associated the name of that style with this part of the page. So because here we go, because I've already associated that it's it knows that this is the main content area and that style should be associated with it. There's one other thing I want to dio I want to center this text. Remember when we center the container in the whole page? We set the margins right and left auto and that's how we centered it. But now I want to center this text. What I want to dio here is go to text, properties, text align and lucky thought. Remember when you were looking for that thing that you always had a word? If you're centering things with in a div or within any other element that conserves a container like a tive, you can use the text align center option. If you're centering a div itself, you need the auto margin left and right. So let me zoom back out and let me close this up a little bit and you see how that centered. So if I end this by previewing this in a browser, yes, you'll see this is not centered because it's not in the div that we just aligned and the text doesn't affected. But down here are caption is now blue and big and the font that I toes on the color I chose and it centered. So auto margin right and left to center. It did. But with in. And if you just go to text, align center and everything inside that Dave will be centered.