Skip to main content

Session 3: CSS Image Replacement

Lesson 7 from: Adobe® Photoshop® to HTML

Erik Fadiman

Session 3: CSS Image Replacement

Lesson 7 from: Adobe® Photoshop® to HTML

Erik Fadiman

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

7. Session 3: CSS Image Replacement

Next Lesson: Session 3: Q&A

Lesson Info

Session 3: CSS Image Replacement

This is what we're trying to build today and, of course, has a header. It has a div called Navid has a div called Middle. It has a div called right. Little Arrows are pointing at right because I couldn't really superimposed on that blue and black. And it hasn't give called Footer the person in the Internet world who was asking about using floats today. I think you get that opportunity because thes three columns naff middle and right are of course, going to have to float. So the challenge that I was trying to do here is in my research, looking at what's happening in contemporary Web design trends, I really noticed that a lot of pages are really big. They're just getting bigger than taking a more real estate. People are having bigger monitors, larger display resolutions, and designers are using more and more of that space. I want to see how big can we get, how much how we give a sense of grand scale and make it look up enormous without it, you know, having too much content and one of the...

things I've done here is I've sort of got an optional fourth column where we see the rest of this big background image brick wall. Let's look at the finish project up on the Internet. So here's what the page would look like. And if you got a small monitor, you're going to see this and you're still going to get all the content and you've got a big monitor. You just see something bigger and bigger. Most people are going to see something within this. And then, if you've got that 30 inch apple cinema display or 27 inch IMac when he meets, might see some white space. But you're accustomed to that because most Web pages look like the size of a $5 bill on the top. Left Corner on Your Monitor. One of the great things about my Web Dev toolbar. Shin Se My Web deaf to Marcus, It's Chris Peta Rex Web Dev Toolbar This toolbar, which I don't discourage everyone to install it for. Using Firefox. That's a Web Dev toolbar crisp rhetoric dot com. I could just say resize and resize my window to 10 24 by 7 68 you got in keeping up on current trends. That's like the new bare minimum That's the smallest page last work. And you can see that in 10 24 by 7 68 window. All my content still fits in here. Got some roll over links here. I've got some roll over links here and I've got Hey, what's this? I've got a video here, so we're gonna do CSS image replacement and just for the heck of it will learn how to embedded a video from video. So I'm not going to do a whole lot of slicing and Photoshopped since my graphics already sliced and I can't slice him from my flat final Anyhow, let's just go to Dreamweaver and let's look at step one dot html. You have got five tabs along the top of my window here. Step one, Step two, Step three step for Step five. Each time I do this, I become a little more enamored with the cooking show model or is Ah, Sarah will certainly attest that they see me drop the ball enough times and I've had to say, Do as I say, Don't don't do as I do. It's always good to have a semi finished working model ready to go from the next step and hopefully that will help us go a little faster and get everything done. So the big issue here is using CSS to hide html text. And there's two schools of thought here. Designers wanted to look a certain way. And they say, Well, I want this font. I want this logo. I wanted to look a certain way and the people from the S e o world s C o meanings search engine optimization say, Well, you have to do everything right so that Google in search engines view your page correctly. The big challenge here is the H one tag to see here where it says Belltown lofts, which is the name of our business. If you look at my property, inspector, you can see that this isn't heading one tag or in co view, we can see that it is an H one tag. The H one tag is really important for search engine optimization because sites like Google will see that h one tag and say, Oh, this is what the site is about. I understand it. I'm going to index it that way. So by not having an h one tag in your page you're doing your client a disservice and I have been done. They said on our 1st 2 projects because we were just getting warmed up. But now I'm going to talk about putting that H one tag in here. But of course, the CEO person says, Oh, good, you have it early in the document that you have it high up on the page. Google gives sent more relevance. You've done everything right, but the designer, by Step five wants it to look like this. Here's what my logo looks like. You can see that my H one tag is still here. So what I'm doing is not entirely ethical. It's a bit of a gray area. Actually. The people for the CEO camp will call this totally black hat black hat versus white hat meeting, breaking the rules versus following the rules. What I'm trying to do is find a happy compromise between making your page properly formatted for search engine optimization, good code and making it look good. We're gonna talk about three different image race replacement techniques here. If you look at my final project here, the switch into design view. There's an H one tag where it says Belltown Lofts. I've hidden the HTML tax and replace it with an image with technique number one and then my navigation here, as we mentioned before, Good rules of semantic markup tell us that and navigation bar should really be a list and on ordered lists. So this is a UL with some A tags, but I've used a certain fonts, so these are actually pictures of words that I sliced in photo shop and I've hidden the A tags. And over here, Urban living in Seattle and latest news thes air Also graphics which have replaced my age two tags. There are many different tricks and ways to do this. I'm going to sort of show three variation of the same theme, are basically going to hide the HTML text, spell it to display as a block level element and put an image in the background so that we see the pictures of the words instead of the actual words. Let's get out of live you and go back to step one. So any good Web developer starts like this, they see your photo shop file, and I've mentioned people that you need to start seeing gives So when I see a PSD, whether it's sent by me or another designer, one of my students, that's not Photoshopped, that's for sure. If I see a PST, I just wouldn't seconds I started visualizing gives their many wrong right ways to do it. Very few wrong ways. You could slice up your dibs differently than how I did it, but that's a solution. A Web developer is gonna build something like this before he or she does anything else. And this is what we call good semantic markup. I've got clean unstylish HTML if I check of it, validates validate current document. And I should always do this before I go live. But fingers crossed. No errors of warnings found X html one point. Oh, Transitional. I've got an H one tag. I've got a Nhan ordered list. I've got an h to tag. I've got a paragraph. I've got another h to tag. I've got an image Most of what we've been doing so far, I've used CSS to display background images. This is a foreground image, which is actually in the HTML document flow. While we try to keep that toe a minimum, it's not considered a no no, because it's still semantic markup If it has an altar attack in your property, Inspector, there's a feel that says Ault for good accessibility for good search engine optimization. If you have an image in your HTML markup, it should have an all tag or else you will get an error and you will decrease your search engine results. So it's considered best practices. Always get in the habit of when you insert an image actual. Let's do it again. Let's watch how that goes. Let me put that image back in somewhere around here. Insert image I'm gonna navigate to I should remember what it was called exterior dot jpeg. Dreamweaver gives you this box for alternate text, and I'm just gonna ride building exterior cause I'm lazy and click OK, so always get in the habit of putting in all tags every time you insert an image and just to make sure this looks like what it used to all just hit commands you to get it back to the exact place that it was. And just to show you that we can do things a little differently over here. I've got some links, but they're not a list, mostly because those are supposed to look like news reports is supposed to look like a blogger. Formats. I wanted to show you that while using lists for semantic markup, his best practices if I wanted to a concert, Simple links or a tags without making lists as well, not as semantically perfect. But everybody's got to break a few rules sooner or later cause we just gotta get the thing done right. And then down here at the bottom, I've got my footer. So if I were to build this page, I'd get this whole knocked out into did tags. And then I would start to use the Assess to format those gifts. So my next goal is to get this here to step two dot html in. Here's where our floats are going to come in. Let's see if I can remember what I did to transform Step wanting to step two. If I highlight this, I can see in my bread come trail, it says. There's a div called knave. If I pull up my CSS styles fortune, my dibs, we're all still here as containers. They just don't have any styling on them. So instead of hitting new CSS rule like we were doing before, I'm gonna edit the existing div by hitting the pencil icon. Now for this Div called Never if I tell to be a box 2 38 I don't know. Close enough. Not bad click. Ok, and, um, I think I'm going about a background image of how about knave? B g have background, choose and let's say no. Repeat, apply Looks pretty good. That's not quite tall enough yet. We'll get to that in a minute, But I've still got this a nordeste here. I'm gonna go to my UL, make a new CSS rule hit less specific pound nab ul are all on ordered lists that live in the stiff called knave. I'm going to say list style type none, and box margin and patting set to zero. I think you see me do this the last two weeks, which is why I'm going to it kind of quickly when a quick okay and my list has been stripped back. Now I'm gonna go back to my def called Nev. I can add one more thing to it. I'm gonna tell it to float left which is kind of cool. Look at what happened to the rest of my page. Everything just kind of got squeezed up into the remaining space. But now I have this Div called Middle, which is kind of all over the place. I'm gonna edit it by selecting middle in my CSS panel, clicking on my pencil icon, going to box and I'll have to change these later. But I'm just gonna guess, was it hit? Apply and see what happens? How it's trying to do this word wrap around the first day that I told the float left. That's okay if you want a word rap. But if I don't want that to happen, I'm going to say float left. And now they sit side by side. Pretty nice, right? But now the third column, which is called right, is not trying to squeeze up flexibly into that remaining space. I'm going to try to grab it. Dave called, right? Sure enough, go to my CSS rules. It said it right. I will tell this to be. We'll just call it 200 for now and also tell it to float left. So all three dips, which are in the middle are all floating left. They're all in the gravitational pull of the 1st 1 called knave. Or the other two are in the gravitational pull of the 1st 1 called Nev Quick. Okay, not bad. But look, what's happening to my footer. My foot are still being pulled along with that. So I'm gonna grab that. See that there is. There is indeed a diff called footer. What if I tell my foot or to break the gravitational pull of those floats by telling it to clear now, you can clear right or you can clear left. That would mean to clear the float which preceded it. I can never remember what came before my foot, or so I was to play it safe. Say clear both quick. Okay. And now my foot or drops down to the bottom of my page. I could build this out a little further. Let's get a little It looks like Well, I guess my image would tell me if my image is 301. I will. I remember what I was trying to do. I mean, that too big for a reason. This column is supposed to be 300. This Div called right? So let's edit right. Make it a width of and click. OK, I did something wrong there, didn't I? It is 300 just stretching out right now because of these things. There we go because of our links. I'll fix out in a minute. So let's go back up to our header Div and edit that and put in our background image of just that logo at the header. Go to box. No background background image header dot ping Choose no repeat. And just to make sure that it's you don't always have to do this. But I like to make sure left and top. It's tucked in where I needed to be and we'll click. OK, so here's the big let's make that a little bigger. Also, double click on Header and tell its box height to, You know, I got smart on this one, and I made it a number. I could remember 100. There we go. So here's where the design camps and the CEO camps argue. There's your H one tag right where you needed to be. There is the logo that the designer says what's gotta look this way? Or perhaps the client says it's gotta look this way How to make that ugly H one tag go away. Let's take a look at this. And if we go into code view, you can see that says H one is wrapped in the header. You're going to design view. I'm gonna make a new style for this H one tag new CSS rule header H one because you might have another h one tags to so to be specific Onley the H one tack that lives in this deal. So I want this to happen to I'm gonna click, Okay? And Sarah, I want you to brace yourself. I don't know how many SDO purists out there in your Internet audience, but if they start throwing things, they start telling you Oh, that's totally black hat. Somebody did comment earlier, OK, Google wasn't gonna like it. I know, I know it's coming, but I'm just trying to make everybody happy. It's not a perfect solution, but it's not cheating either. I'm going to go to block display None. I'm a click. OK, my image is still there. My text is hidden. There's a couple other ways. You can do this. You can do margin left 2000 pixels. You could do texted into 2000 pixels. They're different schools of thought on this. Some people say it's great. Some people say, Well, Google's going to penalize you for that. But however, my code is still being read like this, I still have it and h one tag here. It's better than not having an H one tag, so at least you're improving your s your results. If S CEO is your ultimate aim versus visual design, you might want to take a different approach. But this is a good solution for people who are just beginning to learn how to code. We're back in the design view and let's see, what else do I need to do to get this built out? A little bit out There was the container, right? Let's go to the container. Let's give it that big background image by editing the container going to background, and I got smart on this one. I called it big BG. Look at that. That big image 1400 pixels across its only 66 K and let's just say no repeat and click. OK, so I've got this big expansive interior and I've started get my page styled up. Let's look at Step Two and see what's happening next. I'm not sure if this is going to show on our video monitors, but my right column has a background which is just gray, and my middle column actually has a transparent background. So I'm gonna put a transparent ping in there and you can see the interior showing through, but hopefully you can. Let's see how I got there with this Div called middle. I'm gonna edit it. CSS rule, I'm gonna say, background background image, and I'm gonna find a transparent ping file. So all I did is I went into Photoshopped. I made a new document. Was 10 pixels by 10 pixels. I said edit filled with 50% gray or excuse me gray with a 50% transparency. So this is actually transparent. I'll hit choose. And if you remember any time you put something as a background image of Kyle's automatically, I've been usually saying don't repeat to stop it from repeating, but actually want this one to repeat because I want this little tiny pixels are 10 pixel thing to fill that hole, def. So if I hit, apply the whole damn that was filled with that transparent background click. OK, and I'm I Div called right. Well, I just hit my pencil icon and give it a background color instead. Durham of which one? It was but 666 looks to light. Perhaps it waas 333 Something similar close enough, So not quite readable yet, but starting to take on some form. Moving on to Step two. Let's get a little space in between those my def called right. I'm going to edit that once again, and I believe I put a margin on the left side. Maybe something like 30 pixels. Am I? Div called middle. I put a margin on the right side, going toe box de selecting. Same for all margin on the left, 30 pixels clicking. Okay, so here were an example of using floats to position are different gives and then using margin to make some separate space on those dibs. So I think that's looking close enough to what we have on step two. Not quite perfect. I don't know why this one looks, you know why that's still well, you know, I'd better put a paragraph tag on that by accident. No. Well, I'll figure it out later. We're gonna go ahead and move on to Step two se. How am I going to get and let's get this caught up? Let's go to our header Div. Just so it looks like what it did in Step one. Good or CSS rules edit the header background image. Put that header back in Choose No. Repeat left and top click. OK, hide that H one tag. One more time. New CSS rule header h one. Quick. Okay, block. And I'll do it differently this time instead of display. None. Let's go Box Margin left minus 2000. Does the same thing, right? The H one tag is still there. It's not perfect, but you don't see it anymore. So let's try this in a couple of let's look at our H two tags. Both of these are an H to tag. What happens if, uh and I want to space there to put an image in the background because I've got an image sliced up in Photoshop. I'm gonna grab this one, which is called Middle Age too. If I go to my CSS rules, make that a little smaller. I'm going to make a new CSS rule on, Dreamweaver says. I know what you want middle age, too. I'm gonna say background. Browse how he was urban dot Gift Yes, Urban Living in Seattle. No repeat and click. OK, so not perfect probably can really see that at all. It's black type on white types sitting on top of each other. It looks awful. Let's move that around a little bit more. Let's go to block and tell it to display as a block level element and let's go toe box and set its margin and padding to zero to make a tighter fit. Or, if you can see this dotted outline. But now there's an even space in there. So there's my black types sitting on my white type. I'm sure that makes for great video, So let's try to do the same trick that we did before by setting the H to display to none and see what happens if I edit this and I go to block and set display to none and click OK, what happens? The entire image goes away so that's not gonna work. We need a slightly different syntax. The reason it worked on the H one tag is that I said header H one and the background image is actually in the header div, which is behind it. But since the H two and the image the text image are in the same did by telling to display none, they both disappear. So let's ah, bring that back. We're going to block telling it to display block and clicking. OK, now watch what I'm going to do. I'm gonna cheat another tricky little cheat. I'm going to select that h two. I'm going to go into code view. And after the H two tag, I'm gonna put in a span tag this man. It's like a a short term fix and in line element that just spans a certain amount of text just by typing SP. Drover knows Buddy wanted starts the auto fill, sofa, hit, return or enter. It puts the end of my span tag like that. And then after the last word, But before the closing h to tag, I'm gonna put I'll have to just put the slash and writes out the rest of my closing tax. I have a span and span around the words living in Seattle. Nothing changed here, but now I'm going to do the same thing on latest news. Over here. Find latest news span closed bracket in span. They're each rafter the span tag. And now I'm gonna do something. Get caught up on latest news. It's a new CSS rule, right? H two stairs. That a question? Yes. What does the span tag accomplish exactly? Wraps it in a container. That family that a div reps reps a portion of the page in a larger container. A span wrap something in a smaller container, which is a smaller subject on the page. But it's an in line element, so it gives you something else to. It. Puts handles on that object something so that I could do something to it exactly. And it's only since it's only a short distance in an in line element. I don't need another div. I just need to span to wrap this short section and but handle on it. Well said so right. H two. Where was I? I was gonna tell it to display block and tell its box to have a margin and patting of zero click OK, And it also needs a background image which must have been news dot gift yes, with a little Florida Lee and no repeat and click. OK, so if you remember there four different ways of defining a CSS rule that we looked at last week There is a tag. There was a class. There's a unique I d. And there's a compound selection. I'm now going to make a custom class because classes can be re used over and over again, which I'm going apply to these two H two tags or more accurately, I'm going apply to the to span tags Gonna make a new rule. And this time I'm gonna make it class, and I'm just gonna call it hidden. Proper CSS format requires you to begin your classes with a dot so it be dot hidden. I'm gonna forget that and remover will remember. I don't if you can see right here. But Dreamweaver is now calling it dot Hidden unique ideas begin with a pound sign. Classes begin with a dot and I'm just going to go to block display none. Click. Okay, I can now grab this span tag by going into my breadcrumb trail of saying control set class to hidden and my HTML text is hidden although still readable but, um, and my images showing same here latest news finding the span tag in my breadcrumb trail holding on my control key or right clicking set class to hidden. So now if you look at my code you I still have tags which are important for search engine optimization, but they have some code on them that says span class equals hidden. So I've applied a custom class in two instances to make those image the text go away and we can just see our images. Okay, I knew I put that image in there for a reason, and I knew I resized it or I sized it incorrectly for a reason are diff here is actually 300 pixels across and our images 301 by 2 51 If you if you make a mistake and you probably will, Dreamweaver offers if we have a foreground image as opposed to an image controlled by our CSS. Dreamweaver gives us a lot of options. And with these icons on the toolbar. I could crop this DeMarcus ism warning that says, Are you sure you won't be able to undo it? I'll click, OK, and some crop handles appear on this, so I could resize it if I needed to. I'm not gonna do this just yet. I just hit, escape and not do it. I could also re sample it where I could improve our increase, its increase decrease or increase its quality. I could adjust its brightness and contrast. Now, if you can see that changing here will just blow it out for a minute, I could make it super bright, Super dark well had cancelled like improve its sharpness. So even if it came in kind of blurry, I could sharpen it a bit. Here you go looking a little too sharp. There, someone hit, cancel. But better yet, I can hit this icon which looks like a couple of gears and say edit image settings. This is even better causes like all those options all lumped together in one window. If you've used the safer Web dialogue box in Photoshop, you'll recognize this. This is new from Dreamweaver CS four. You won't see it in CS three I can a change the quality of the file. So let's say it's too high. It's only 11 k It's not a problem, but let's just take it down to eight K. If you're one of those situations where every K counts, I've shaved a few K off. But one from that could go to file right here and see here where it says it's to 51 by 301 Let's keep constrained proportions checked, and I know it needs to be only 300. Click OK and notice that some 300 by 2 50 achieve that kept my proportions. And now it fits perfectly into this box. So not really a robust image editing tool, but for making slight and subtle corrections. It's great, and maybe another time. We'll look at this, but you could also, if you've got photo shop CS for insult, you could actually jumped a photo shop. Makesem edits. Say that again, and it'll still be embedded in your HTML document. So I've done pretty good so far with Step two. Let's go on to step three to see what needs to happen next. Well, you see, I've brought my images in for my links. I've got my header in here. So the question Kinda. Yeah. I just thought I'd throw in a question. Well, it was relevant, Um, from the chat room. Um, So what is the what is the difference between hidden and placing the images in front and giving them all tags? Um, well, you can't have an html text in an occasional image. Occupy the same space. You can only have one or the other. So we use background images when we need to have HTML text in the foreground. We have the HTML text in those h two tags because that's important for semantic markup. There's no text where the image of the exterior of the building is. There's no text competing in that space where the images in latest news and urban living. In Seattle there are two H two tags there, but I've hidden them so that my life place my image in the background so that it's visible but still machine readable. Does that help? Yep. Thanks. So here we are in step three and we're going to do the same thing to our links here. Let's go back to step two from it so I'll just knock out a couple of these before because there's nine of them. I won't do all of them. Let me, uh, strip my list here first. I just do this quickly. I'm gonna talk to the UL Tag less specific, knave ul. Just like we've said now, 1000 times, it has margin and patting of zero and a list style type of none. There we go. But now I need to talk to my list items. The l I tag would make new CSS rule for them by hitting my plus sign. And as I mentioned before, knave u l l I and Knave Ally, it's the same thing. This I prefer the shorthand and I know I need to display. It is a block. What were they? Were they 40 pixels high? Close enough? Looks correct to me. Say OK. Really? Actually, go and look at my Step three. I can't remember everything. I look at my code. Yes, they were 40 pixels high. Back to step to have to find it. It's a block level elements I've said the boxes this big the window was reviewing it through. Is this big which need remember you need to do that to the Ally tag as well as the attack. So I'm going to select the about, grabbed his a tag, make a new CSS rule and ST Knave A I want you to also display as a block level element. And I would like you to be 40 pixels high. What we're really saying is I'm defining two windows to see through and click, OK, and now I want to put a background image in there. But as you're probably guessing my about neighborhood features, they all have different images. I can't just put the same image in the in the style for the A tag. Because I sell the eight Agneta back one image. They would all get the about image. So now I need to create a unique I d for about. And actually, I'm going to make nine unique ideas one for each one and really helps to see Ah, I'm gonna let the cat out of the bag. I want to show you what the images look like because we need to be thinking about a rollover state. If you remember in the browser's eye, roll over these, they turn blue So since it's a custom font, it's actually a picture of a word I need to images from the on state and the overstate. Now, since I have nine links, that would be 18 images. Since you all know I'm lazy, I want to find a quicker way to do that. And I'm gonna try to glue the or attach the rollover state and the regular state into one image. So how do we do that? If we jump to the finder here and we're gonna my images folder, you can see that my about dot jpeg they're actually stacked on top of each other. Let's go to screen flow here, and all my Neve r images are this. Big as you can guess. They're 80 pixels tall because the space is 40 pixels tall, so it's actually twice the height of the button, with the top one being the highlighted version of it in the bottom, one being the non highlighted version. Thank you so much, all in one image perfectly said. I couldn't have said that better myself. Could you say that again? Probably not, because I forget what I said. It's exactly twice the height of the button that the available space is 40 pixels there, 80 pixels tall and the overstate is in the top half. And because the way you display it, have you shown it already? Are you about to? You're gonna because the only reveal a portion of it according to which, exactly? Only going to reveal the bottom half right now. And in the rollover state, I'm going to reveal the top half. You could do the same thing with left and right if you wanted to, which I'll do next week. So I hate to run suspense there, folks, but this is how we're gonna do that. I'm gonna make unique I d for about by making a new CSS rule and not a compound selection. But an I d applies to only one html element, and I'm gonna call it pound about. I'm gonna click, OK? And this unique I d gets a background image of, of course, about dot jpeg and I wanted to not repeat. But the tricky thing here is I want I want it positioned on the bottom and I want a position to the left when a quick Okay, nothing happens because this is a two step process. We first need to define this unique I d. And then I need to go to about right here and then And you did so. Actually, it's a three step process. Select the link in your nab Our click on a in your bread come trail control, click or right click and say Set I d to about. And as you can see, my image has now shown up in the background. My HTML text is still there. There's a little anchor icon. You want to see me do that again with neighborhood? I'll knock out two or three of these, but I think everyone will get the hang of it before I do all nine of them. Let's make a unique I d call it neighborhood as a background image. I'm gonna browse to neighborhood dot jpeg and I'm gonna make sure that that has no repeat and a background position of left and positioned on the bottom so we only see the white portion, not the blue portion. I'm gonna click, OK, I'm gonna select neighborhood. I'm gonna go down to my anchor tag control, click or right click until this contextual menu shows up and say, Set I D to neighborhood and neighborhood rose up. I find if you have a lot of these two do sometimes is actually quick. You're quicker to just go into code view, and these really have the same syntax. There's about a neighborhood. Let's see if I can zoom in on that just a little bit. You should all be familiar enough with CSS now that you can read that and understand what it says. I don't expect you be able to code it by hand, but I think that you could certainly stroll back out so that the screen doesn't do crazy things. You could copy one of these from the opening about to close and curly races Command, See Return Command V. And for the life of me, I can't remember what the next one is about neighbor features. So I could simply get my bearings and figure out where I am changed the name of the one I just copied and call this features and make sure that it now if I were smart, I would have named it features dot jpeg right? Let's see if that works go to design once again highlighting the link, grabbing the A tag in my breadcrumb trail control set I d two features and the word features appears So So I'm gonna pause for a minute. You Can you check with the Internet in the chat room? Does anybody want to see me do that again? I want to see all nine or can I jump to the next? Yeah, there is a little bit of confusion about what that is, and also, and I don't know if you want to do this now or in the Q and a portion. But some people would like to see a demonstration of how you create those double height button. I'll do that right now. It's jumped a photo shop because that was part of the plan. Well, it is Photoshopped HD, but I lost my Photoshopped file. Let's just open one of these in Photoshop, and this was actually the tedious, boring part which nobody got to see. When I originally saved the graphics, they saved ones one slice at a time like this, I sent my marquee to 40 pixels by 2 38 and I just went chop, chop, chop, slice, slice, slice, save, save, save So you stack them, you stacked all of those buttons up together on the same background on on one consistent background behind them. Right, Um, which also brought up another question about in the sprite sense. We've seen you demonstrate in your dream weaver class, leaving it that way as a big graphic with the stacked buttons and duplicating it horizontally so that you have the same kind of thing that you've got per one button on Lee using all the buttons at a time. So some people were asking which way is better? We're gonna do that next week. I find that this is a good stepping stone. This is the gateway drug CSS image rights. This is like, so you'll be showing this. This technique kind of expanded. Exactly. This is just one link at a time. So they slice with a slice out kind of like this with that textured background and then I d select that I would say image canvas size notice. It's 40 by 38 I could make this 5 65 465 76 If I knew I couldn't do them side by side. But I make them a top bottom. Instead, I'll change the height to 80 and click OK, and then I am going to option drag to duplicate this layer and Photoshopped CS four. It's really nice because you feel it's snap into place when it hits the edge. And if you can see that on my screen But I feel it's snap into place. Then I will set a marquee. Can you show your layers palette? Yes, So we did there. Waas now has two unique layers background in background copy and I'll make 1/3 layer just for the blue that I'm gonna put in here and under my marquee. I'm going to set it to a fixed size which I know needs to be 2 38 by 40. And let me tell you, if you're off by pixel and this is, why did them ahead of time, it looks bad. I mean, if you're off by one pixel effort, you will really notice your text wiggling on rollover. Just it just all bad. That's why round numbers and snapping is is much appreciate us will speed up one's workflow. So I remember what my exactly blue color was, But I'm just gonna find some blue color turning off web safe colors. Any old blue at it, Phil. Maybe a 30% transparency of that foreground color. And now I have a regular state. And in overstate all my graphics were built like that one by one. And then I did a file safer weapon devices and got them down to about three or four K each. So now returning to Dreamweaver. I could do this six more times, but I think everyone gets the hang of it. The really exciting part, of course, is here in step three. How do I get from this where my HTML text is still showing to this where it's gone and if we going to live you with a rollover state? So this is really where you're getting your your money's worth. I'm gonna take this word about and I'm gonna italicize it. Now you're probably thinking, Why is he going? Totalus? Isis, There's an eye button here called a Talic. Now, in the battle days of plain old HTML before the semantic web really took over, we used to use the I tag when back when we used the font tag and when we wanted something to be italic. It was just used. The I tag we now use the emphasis tag or the tag am not to be confused with the measurement e. M. We used the M for emphasis because it's better for screen readers. It's better for semantic markup. It's better for accessibility. So if you wanted something to be as well as the bold, the bold formatting actually puts in a strong tag. So if you notice if I italicized this, it's not because I wanted to be a Talic. It's another CSS trick, which were using it's because I want the word about to be wrapped in M tags the same way that I had my H two wrapped in a span tag. Bear with me for a minute because I'm gonna do that to each of these. I am going to rapidly italicize each one of these links, and we'll show we'll show the magic again here and explain why. Why this works. Yes, this would probably a good time to tell someone's life story or talk about our next class or the wedding video class. Beautiful that you don't grab that anchor. Here we go. It's just the text just attacks. We have a great class on wedding video, winning video, wedding photography and videography that we're thinking about. Oh, yes, again, is a wedding photographer. So that's true. I'm incapable of speaking and italicize ing at the same time. I'm gonna close there now. All italic. Here's where the magic comes in with one of the sea, others an M tag. Now, in my breadcrumb trail, I'm gonna make a new CSS rule that says, Not quite perfect sometimes true over doesn't get it pound knave m or all emphasise tags Within this Dave called nap, you wouldn't want to just do the m tag because what if he actually wanted something metallic in another portion of your page? I'm going to say all emphasise tags in the stiff called knave get set to a block level display of none, and they disappear. But my images stay there. So now if I could paraphrase that a little bit you've got can you with your with your cursor kind of circle the entire navigation area the about to contact that whole thing? Yes, that whole area there that's called nap. It's a day of cold Now they've called Nath and within their you have put in some type and you fight. Alice ized it, but you didn't italicize it in order to make it look like it's italics. You italicized it in order to give it a tag that you can then tell the tag what to do. Another set of handles, another set of ham and tag around the H two. I put the tag around the links so that they have a handle so that I can tell that those wrapping tags to do something which in this case is display none. It's kind of it's kind of gaming the system. I mean, it's it's non intuitive. But because the of the way that CSS and HTML works, it's It's a usable thing that people some wise people early in the stages of CSS figured out, huh? We can use this right inside of here, and we say, five years ago, 4 4005 this really started to become popular, designers said. Well, we wanted to look this way. They were felt really limited by website fonts, all 12 of them that were available at the time, they said, and then they were concerned with the growing importance and trends of semantic markup. And they said, Let's beat the system. And so, with your CSS rule, that is, um, can you show the NAFTA You want to see my code? NAFTA em again? No, the CSS style that you when you named it pounds never am right pound, pound, nev dot m That means all of the I Tallis sized what you have claimed to be italicized text within the knave. Active is now going to do something other than italics. It's going to display. Not at all. Exactly. And that way you've got the words there, but you don't have them showing up on covering up your graphics. And I still have a new order list, and I've got links in Lyon Order list. Semantic markup. Best practices Still good for search ability still well in next by Google and other certain search engines. Not perfect Aecio crowd will find holes in my argument, but there's many ways to build a Web page. This is light years beyond building in tables, and there there are other, more complex ways of tilting Web pages that avoid as Theo problems. But you know this is a little bit beginner level class. Yeah, This is something that most most people should be able to do today. And if we go back to my validator here, validate current document. I have no errors of warnings. Valid code is still valid code. It's not perfect, but it's better than having code with errors in it. Excellent. And also a little bit of clarification on the on the button graphics. If you can imagine if you could circle that area again that I talked about about through contact that starts out as one graphic all the way from about to contact. You've got one cohesive background behind there. You put your text on there and then you cut them down to individual button height pieces. And then you did your trick that you just showed us where you doubled the height and then copied and put the put the blue layer over top. And then you ended up. I would have got into code view here and take this a Norden list away all my navigation away. This device has one big background image and then each link has its own backwards. But they line up perfectly because you used that because that's what you did in Photoshopped. That's what I sliced in photo shop. Exactly. Okay, that help us explain that Western in the audience. So would it be easier to do Leave that background image as an image and then control the rollover state with a style sheet? The CSS as a ah hover. Well, I'm about to do that. I'm about to add the hover hover state. But remember, I needed these images. This is a font called Scholar. Yeah, which is not a Web safe fonts. We need pictures of it, so I need to blend. I needed to blend the word and the background image together. So But if you didn't really care about the fine, you could do it in absolute with the style. Absolutely. I didn't care about the font I could go back to here, take away those images. And if I just wanted to style it as an HTML fund, I could go to this tag called A and I could make a new CSS rule. And I could say all a tags within this def cold knave, if I didn't need it to be scholar, and if I could just settle for travel. Shea and I wanted it to be this color and no underlying. And and all caps. I could get something like that and a line height of 40 and a put a little padding on the left. 15 pixels of patents, not 156. I could certainly do it like that. And then I don't need these unique ideas and back on images on each one. So every everybody's particular Web project will determine what's the best solution for you in your client. So you know that doesn't look too bad and not too different. So sometimes you just say, You know what? We've run into a technical limitation. Accessibility, limitation, usable limitation, browser hogging, bandwidth hogging issue. We got it mean to have a backup plan. That's a good backup plan. And then you tell the client Oh, you know that fun you really liked? We can actually do it. I'm sorry, but I have another solution. So how far did we get here? We got our links and we needed to make our rollovers. Are these in here yet? They are there. Let's go. Well, let's take them away. So we can build them from scratch. Let's let's not ruin the suspense. Let's get don't look as I delete one line of code. There we go. No rollover state. So in the A Tet, we've defined the A tag as a block level element, each unique, I D said. Let's put a background image and position it at the bottom. Now all we need to do is make one rollover state, which is going apply to every single one and held. Take all backward images and position them on the top. Let's go to our CSS Styles panel new CSS rule, which we're going to make a compound selection. Pound knave. A colon hover every time I have this hover state in this DIV called knave, I want one thing to happen. Background position. Top. So even though they each have a unique I D. It's applied universal toe every a tag. I'm going to click OK, goingto live you and sure enough, now when I roll over these, it takes that one graphic and just moves it. That 80 pixel graphic and moves it within that 40 picks a window. So now we see the blue shining through. Let's see, How far did we get over here? So these ones I didn't talk about that. Get How did you get those here? Is that my links looked like beforehand before we styled them. How did I get them to fit within that space? Noticed that since there's no list here since there just a tags going to code view. So this is kind of the cheater way to do it. Just putting in a bunch of links. I don't really have a list first, semantic markup purposes. But you know, every project require some corners to be cut. Let's say you had to do that. You're in a hurry. I'm gonna grab one of these. This a tag And this is actually simpler and easier. If you don't like remembering that list thing, grab my CSS rules panel. Make a new rule for write a or all A tags, all links that live within the stiff called a. I'm just gonna tell them to display as block level elements. I click. OK, you can see that they now there's only one on each line and they they all Philip the width of that div that's holding them. How now I will now tell that block level element to modify itself just a bit. I think it had a height of 36 pixels. Click OK, and we'll do it one more time and we'll just pick a type side. I think we said Font family was Georgia font size was 18. Color was the light blue from the sky and text decoration was none on one more thing that we need to position it right in the middle. We go to type and line height. If the box was 36 the line Heights 36 now it sits in the middle of the box. Ken has had a question back there. Yes, I had a few people in chat that we're asking if you could show the roll over again. Please. Absolutely No, it. Let's do a roll over for these ones as well. Okay, which actually hadn't done in my finished project. But since we're doing links anyhow, I just need to make a rule over state for these links in the right column. So I hate it when these windows get so big, let's shrink that down. Let's make a new CSS rule, make a compound selection. Call it a pound, Right. A colon hover. Click OK. And in this case, I will just change the type color too white and add an underlying and click. Ok, so now when you goto live you these have a rollover state and thes wrong one. These have a rollover state does probably don't but we'll just go back and forth between documents so defined the shape of the block level meant to find the region the amount of space that it needs in the a tag and this change a few characteristics in the colon Hover tag. Go back to this one. We could also change the background of this to a slightly, uh, background color slightly different gray because it's a block level elements The whole bar lights up if you hadn't defined it is a block level element on Lee. The background behind the words would light up moving on to step four. Let's see what else happens here. Oh, there's a video there. Of course. How did we get that video? Well, you could you could you could How's your video? Locally? But what I chose to do instead is get one from video so I just Googled Are did the search function on video to find someone I said Architecture. Interior. I just wanted a short clip. Why would you want to So my pages Pretty small. I got it down to 200 K But in terms of bandwidth costs, you might want to consider hosting your video somewhere else. Because if 1000 people suddenly start hitting your website and your video takes up a lot of gigabyte Ege Ah, lot of band with a lot of gigabytes, you could see your hosting costs increase. So it might be a more economical solution to host your video on another service like Vimeo or YouTube. So I just went to the embed code here. Video makes it really easy. All I have to do is copy all this code I returned to Dreamweaver. We're just gonna pretend that's my video. I'm assuming that since they're offering embed code, it's public domain. Thank you for ever built this video. Well, just delete this here for a minute. All I had was a paragraph here. I went to code view and in this def called Middle After my age to tag and before my paragraph, I said Command V, which copied something off of my clipboard from my CSS styles, which clearly isn't what I want. Let's try that one more time from video. We've been having this problem with Firefox. Heavenly Edit. Copy. Don't do this at home. I don't know why this happens only in my machine here, but I have to go toe applications and I have to open up a text editor after pasted and copy it again. This won't happen to you. It doesn't happen to me at home. It's only here. Creativelive There we go. There's the code I need now I'm going to copy it again. I'm going to go into Dreamweaver right after the end of my age to tag before my paragraph tag. Command me. There's all my object and embed code. There we go. I added another style here somewhere to push it over. There we go. I added a co a new staffer. Since this is the object tag and lives in the div called middle, I made a style that said it had some 20 pixels of patting on the left which years might not immediately do that. That would just to center it. And, you know, it comes with this free code that talks about who did it. The credits. I'm just gonna delete that. Get it out of my way. You know, somewhere along the way I forgot to mention that this is a paragraph tag and I styled it to look white and be a San Sierra Funt. Remember where that happened? They're West used to be black. Now it's white. All that is is a style called Middle P Editing Middle PC. It's gotta font, font size, line, height and color in case you're wondering why that looks the way it does. And then, of course, no project would be complete without the client saying at the very end, just before we launch. Oh, did we tell you about the spring moving special? We need to put a little banner ad in the top. Left corner design is perfect. Let's add one more thing. So if you look in my my final final Step five, there's a little banner ad for the spring moving special. As you know, in Belltown, there are way too many condos. I'm sure they're given $1000 back if you're willing to move in today. We'll just make up something like that. How do we get that? Let's look in my code to see where that lives. Right at the at the end of my UL. But before my closing div tag, I come into here into get into code you just to make sure I'm in the right place. Div called middle diff cult. Now with the end of the well, knocking back into design view If I need to insert image what's the beach ball spin for a minute? Got a bad feeling about that? Good. It didn't crash. Find ah, spring sale or spring dot jpeg Alternate text just in case we click. Ok, we go back into design view Can you make the text larger? And the, uh have we tried t o in my code view in the code? Oh, I was afraid you're going to say that Dreamweaver Preferences. It's hidden somewhere. Can you keep them entertained while I find this? Well, I can I can try. Oh, so sorry. I found quickly this time. 18. Quick. Okay. Why didn't we do that on day one? I think I need to make that even a little smaller. Just a Ted. Maybe 16 references. 16 would be good. There we go. Look at that. Disappear. Now scroll up. Here we go. Delightful. So I What did I do in step? You don't know where you at exactly. Oh, there we go. Align bottom. That was the technique. So many things. You So it's kind of hovering up. It's trying to cling to my list. The thing which came before it in my property, Inspector window properties come back here. Must be hiding at the bottom of the CSS window. Let's go click on the image a line about, um and nothing happens. Well, move that in a minute. Figure that out. That doesn't work. I'll just put a little extra padding on my UL tag. Here are a margin on my UL tag. Excuse me by saying, Have you? Well, pencil icon, Edit it box margin de select. Same for all. And on the bottom. Put 100 pixels and margin and pushes that box down. Maybe 94. There we go. So we've put in our spring movin special. And of course, this is going to be a link to something we haven't built out our site. But that would, of course, go to something like spring sale dot html. I'll just put in a pound sign for a placeholder link. Oh, man, did you see what just happened? If you can tell this, but it's kind of blown out of my def here, although was measured perfectly, it's now pushing out and then to make matters worse by going toe live you. It looks okay and live you, but it won't look good in the browser. Wait, you. It's got this ugly blue border around it that might vary from browsers. Browser. So how do I fix that? Let's go back to Dreamweaver, click on the image, go to the property inspector and say border equals zero. And those two problems go away now previewing in the browser one more time and it looks okay. The hand the cursor still turns to the hands, knowing it's a link. I can play my video, which is hosted remotely. I have my rollover states here. I've got my rule over states here, and let's go look at it live online. I don't have a posted version somewhere. Our original. If I make this a little bigger so you can see the whole thing. Watches were going to say tools validates CSS W three c compliant. Congratulations. And they were going to say Tools, No video, Just go away. Here we go. Here's where I want to be. Tools validate html. Wait for it. I'll give. I'll break the suspense. It's not what you think. It's bad news, not good news. Well, I'll tell you what's gonna happen. I'm going to get seven errors because I did this earlier. It's going to say we found seven errors in your code, but they're all directly related to the video code. There we go. It's not my fault. Here it is in bed. Source. Video dot com Full screen. It's all video code, which actually do it. Those guys actually been with actually know what they're doing, and that's probably because they're moving the moving ahead with how they code things. And just because it doesn't meet the W three C standards, it's probably more forward thinking rather than error prone. So I'm getting some errors, but none of it is in my code and then going back Teoh my original files on my desktop. If you look at my images folder. So the bulk of your pages in the images folder, because my Step five is only eight k my images folder. If I hit command I on the Mac, you can see that's 340 k But wait, there was a tracing image in there, just like we used before. I didn't actually use it today, but if we delete that and do that one more time command I was 193 k some 193 plus 8 201 K for my entire page. Very small file size for a very big page with lots of images in it, and it's almost W three c compliant. So look at that for 10. Not bad. Ran a little longer than I thought How, but I paused. It will take some Q and A. Well, let's do some applause first. Thank you

Class Materials

bonus material with purchase

Week 1 Files
Week 2 Files
Week 3 Files
Week 4 Files
Week 5 Files

Ratings and Reviews

a Creativelive Student
 

Erik is a wonderful instructor. I've taken two other creativeLIVE courses with him and they were really wonderful - easy to understand and I was able to use that knowledge to immediately begin doing web design.

a Creativelive Student
 

All of Erik's courses have been great supplements and refreshers to my formal web training. It's been a while...I hope to see some new courses from him in 2013!

Student Work

RELATED ARTICLES

RELATED ARTICLES