Lessons

Lesson Info

Modifying Fonts Part 2

So one of the things I think I'm gonna show you right away because I get asked about this a lot. It's one of the newer things is how to make that font in the headline on this and that name for the site look cool, right? Because when were limited to the flats and everybody else's computer on the Web, that's a pretty limited collection of funds. So the first thing I want to show you is that built into Dreamweaver. Now, if you go to the modify option, appear at the top of the page, you'll see modify, manage fonts. If you go into the manage fonts dialogue, you'll see that Adobe has now integrated a number of font options. So there are local Web fonts. If you've downloaded a fun from font squirrel or one of the places you can get a whole lot kids, you can put any font you want into this dialog box, and it will become available within Dreamweaver. It'll get associate ID, and it will be easy to up late. Load to the server. That's one way of doing funds. You can also do custom font stacks once...

you've got fonts in here these air, the collections of thoughts that are built in You can change that and create your own collections of fonts. However you like them. The really exciting cool thing is this collection of Adobe Edge fonts, because they're integrated right into here. And basically Adobe type Kit is the professional place to find Web bots on the Internet, And Adobe Edge is kind of the free mini version. Many collection of those funds. If you've ever used Google Web fonts, Adobe Edge works similarly. And because of that, it's pretty easy for Adobe to integrate those fonts right into Dreamweaver. Before you can use one, you have to go in here and select it and let Dreamweaver know that you want to be able to use it, and it will add it into your code in your Web page so that the browser confined it and make it available. So if I want to use a font like, um, this aqua fina font or the Alexa Brush font, I've already associated those. You can see the little blue arrow, the little blue check, Mark says. I've already associated those and you'll see those in a moment if you didn't notice them before. If I want to add another fun, let's say I want to add the Aquafina. I can check that. And now all of those bonds are going to be available to me when I specify fonts and Dreamweaver. So let me scroll back out so you can see you have to click done when you're done. And no, I'm going to define a style for this headline and I'm gonna use one of those spots in the style. But first, I'm gonna define a style a little differently this time. Remember, we're talking about compound styles how they combine two styles to create a more specific style that only works in particular places. So this headline is formatted with the H one tag. And if you look down here at the very bottom, you can see that when I put my cursor in that headline Dreamweaver showing me in this little tag selector at the bottom, which is a very handy reference that there's a body tag. Remember, everything that displays in the browser is in that body tag. And inside that is a div tag with the container style associate ID and inside that is this h one tag that's around my headline. So that's how I know how this is formatted even without looking at the code and over here in in the CSS Designer. Now I'm going to select the style sheet so during Liver knows where I want to say that again. Even if there's only one, you need to select it for things to work, write in the style in the designer and then add a selector. And look at this. Dreamweaver this time is giving me exactly what I want. I want to create a style that's gonna change the way the heading one tag looks on. Lee, if it's in this container now, I could get even more specific. I could have a header around that, and I could have a container header and h one and be even more specific. But again, in the interest of time, keeping things simple, I'm just going to find it this way. So now, over here on the right, I can define this, and if I click on the text, I skip right to the text formatting options. And if I come down here to font family, I'll open up my font options on Look at this. These are all of those adobe Edge fonts that I just selected in the manage fonts. I log now available to me when I define this, and they could even further go in and manage fonts and create collections so I could say Aqua FINA script. And if for some reason that's not working because the connection of the Internet not working, then use this font instead. But for now, I'm just gonna trust that that allure a font is gonna wait, work the way I want. I saw it before. Somebody defined this as the allure. A font. Now you might expect that wants you to find a font for something where the style has already applied. It should change and display that fun. But there's a little notice up here that's warning me that switching to Web fonts modifies the fonts associated properties. Yeah, yeah, but the reason I don't actually see that font is because I'm not in live of you. Look at that. Remember, we talked about how different browsers display things differently. I want you to think of design view and Dreamweaver like a really old Web browser and live view entering mirror like a modern Web browser design new live view. I switch back and forth all the time because this is what my pages really gonna look like. But I can't do much editing like this. I'm gonna give you a little sneak preview of something Dreamweaver CC 2014 being released as we speak and for evermore after this class, you should be able to get the new version. One of the updates that I am most excited about in that new version is that in live, you you have many more editing options. Then you have before it is, in my opinion, the biggest improvement to Dreamweaver in this new release that was announced to date it. If you don't have a version with that, then you can't edit the text. If you do double click on it and it'll actually become creditable in a way it didn't used to be. So you've downloaded the new version and you still think you can't edit in live you? It's been improved, but here's the thing to remember. Yeah, that's pretty cool. Yeah, should be selected and then go to the code. But you're saying now, not so much anymore. Here's the thing. You do live you and then you say No, no, no. Actually, I wanted to say with wildlife photography by Janine Warner. Now, let me see how that looks, OK? Now, you know what? I don't think that that should be in the same fund. That should be a different fun. So I don't know anybody my name up there, but I found myself switching back and forth in a way that really interferes with your work flow in previous persons. Dreamweaver. Um and it's just nice that you don't have to do that as much. The one exception to that is even in live you, the style sheets work so you can at its styles and live you You just can't edit content or html in live you in the current version. But you will be able to win a new one. So I had to slip in something about the new program I couldn't resist. So I'm defined it a zalora I've made it normal again. I could change the color. Maybe we'll make this like a nice dark green color. So I'm just finding the color I want. You can use the color picker and lift the color out of the image. If you want to do that to select that little color picker down there, wonderful consistency across the creative suite. So if you see an icon like that in one program and you know what it means, it probably means the same thing in another program. Once you've selected the color hit, enter or return to actually save that color notice. That's a Hexi decimal color code. Let me go back in here for a second. You could do RG a hex or a cheat S L. A. It's a little advanced, but I promised some advanced tips. So Hexi decimal color codes is what we've used for years. A lot of people are familiar with, but if you want to use transparency, you're going to need RGB A. And that's one of the reasons you see that added in here. Now, in CSS three, you can actually specify transparency and colors for fonts, for boxes, for backgrounds, for all kinds of things, but only if you define the color as an RGB a color instead of a hexi decimal color code code. So little advanced tip, as I promised uh, I've got a normal style on this. I can change that if I want. And, um, fought weight can be specified in numbers, or it could be specified in other ways. But here's another advanced tip. If you're using ah font, a Web font like here, I'm using Adobe Edge Web plant. They are very specific to particular weights. And if you've ever noticed that sometimes Web fonts look crystal clear, and sometimes they look just pixelated in Jaggi. If you have the version of the Web front that's not bold, and you try and make a bold, it will look all pixelated a jag. And in Google and Adobe Edge, most of those Web fonts are not specified as bold or not bold. Their specified as 102 103 100 or 400. So a Dreamweaver is being smart enough here to specify exactly what this want should be, and in order to keep it that way, don't change that number, or you'll run the risk of a very Jaggi looking fun. So we've created a nice headline now, by using one of the adobe edgemont that are beautifully built in and respecting the fact that we needed to make that font wait, Stay to match what that fund is optimized for. And that's particularly important if you want your funds to look good. If you're getting them from other sources, notice what that is. If you're on this, for example, Google Web front. Notice what it says the number should be. And make sure that's what you said in your style sheet. You have much better results from your fun. Gonna make that just a little bit bigger to again. I'm gonna use the M size. Let's try three m nice and big. Okay, so that's looking pretty good. So let me save it, save early and often and let notice up here. I just said the source code, but that little Asterix indicates that a page hasn't been saved. So even though I saved the HTML, I don't click on here and save here haven't saved the style shape if you go to preview a page dream. We was gonna warn you that one of these air saved and the other isn't. But just be aware. You think you've saved everything. I'm working on two documents. I have to save each of them so That's another extra tip there. All right, let's just preview this real quick, See how we're doing. It's looking kinda nice. I'm if I have time going to set some navigation links up there. But I want to make sure I show you templates because I haven't covered that as thoroughly as I'd like to in some previous classes. And one of the hot things right now are these sliders at the top of sites. And people do these wonderful designs where you've got an arrow to go back and forth through a slide show. You can get through the extensions that I showed. You can add extensions to Dreamweaver that can add that functionality. But even if you don't want to buy one of those extensions, you can kind of fake it. I just put in your own little arrows in creating a template and creating a syriza links. So I'm gonna do that just to show you a few more features in Dreamweaver and a pretty easy way to have a gallery that you can create this afternoon. So going back to Dreamweaver gonna have a little bit of trouble with the wit that I set on that container. But I'm gonna show you what happens just so you could understand. I'm gonna go back out alive. You so that I can edit. Don't mind the fact that that font looks totally different. Now, remember, this is what it would look like in a really old browser. And it's a good reminder to you can use all the new CSS three things, the fancy fonts, the transparency and all that. Just check your work and make sure it doesn't look hideous. If it doesn't show up and then you're fine, then all the people that have the new browsers are going to see the great enhanced design. And the old people won't know the difference, or the people using the old browsers won't know the difference. People would have to throw myself in that category.