Lessons

Lesson Info

Session 2: Redesign an Existing Site

it seems from the feedback that I got last week that I kind of jumped right in to see Assassin. But I heard from the chat room as we were leaving some people behind. So I want to clarify a couple of concepts that people can keep up with me. It s so we're all speaking the same sort of jargon. If you purchase the files in, you would have gotten today's downloads would have seen two P. D. Efs, one of which I'm calling my CSS cheat sheet. While this is by no means complete certainly helps you get started. If you were starting toe right, some CSS to apply to your HTML. And the thing that I want people remember is that there are four ways to define a CSS rule. The first way is to take a tag or redefine an existing HTML tag. That could be any tag that is part of the humanity. Just going to say that the body tag always looks like this. The H one tag always looks like this. So that's the HTML. And then we write some CSS, which might look like this body margins. Zero patting zero. It's going to ...

be modified from its existing neutral state. The second thing that you can do is you can write a custom class. A class should be considered as something which you can use over and over again. It could be applied to many HTML alone elements or could be applied to any HTML elements. Ah, class always begins with a period before its would be called dot class or in this case, mine is dot red. And it has the Hexi decimal color equivalent of red. And here, down here, you could see that it has been applied to a paragraph with the class of red. It's something that I can reuse many times. It is very different from a unique identify air or I D for short, unique identify or something that we only use once. While there are many ways to use this, the most common applications to use this for DIV tags because Def Tax and HTML stand for division, they divide up your page into sections or neighborhoods such as the Header, the Footer, the Left Column and the right column. Since there's only one of those we would use a unique identifier, and I d always begins with the pound sign or the hashtag. And right here you can see I've written a unique I D for the header and that it has a certain height and a certain with. There's actually two types of ideas, because a compound selection really is an I. D. That is why it also begins with the pound sign, its unique identifier that begin that refers to something nested within something else. So if you look at my syntax here, pound nab A refers to all a tags that live in a div called knave. If you're using Dreamweaver CS four. This is slightly different than Dreamweaver CS three, because Dreamweaver CS four makes a special fourth option for compound selections, whereas Dreamweaver CS three sort of lumps these two together is just unique. I DS remember, sees for this is what last week where I was seeing more specific, less specific those air compound selections. So when I'm defining CSS rules today, I'll either be defining a tag a class unique I d or a compound selection. So I'm gonna go back over to keynote and want you all to remember that these two are inextricable. Someone was mentioning earlier that they're learning HTML, but and they find it kind of confusing, but they really want to learn CSS. That's the best way to focus your attention. You can only you're only going to get so far learning it smell because we're not gonna have to write a whole lot of it. The Wizard League editors are getting really good and making that for us the real power of the rial, where you can have some control over the visual styling of your pages. How understanding how that CSS affects that HTML. So what, you gonna need to learn the two of them in tandem? Learning CSS is really where we should focus all of your energy in orderto work with CSS. You need to understand the CSS box model. You can't do anything on a page you can't make your photo. Can't make your HTML document look like you're Photoshopped document unless to understand the CSS box model. And it has a Siris of arcane rules. That's kind of like the English language and that it follows these rules most of the time, except for when it doesn't Have you ever tried to explain English to a foreigner. Well, it's kind of like that. But so with some caveats going forward, keep in mind that every HTML element is a box. It could be any element, but in this case it is a paragraph. We know this is a paragraph because it would be controlled by opening and closing P tags. I'm assume that everyone recognizes this HTML syntax of an opening tag and a closing tag. Now my but every box is invisible. I've only put a red border around this once that you can see for my boxes in its default state. It's through CSS and talking to that box that we make it look a little different. Oops, looks like my CSS is gonna be cropped just slightly. You should be seeing my code appear in the bottom left corner of my screen. I might have to readjust my keynote. There's that we write a CSS rule for a paragraph tag P open bracket close bracket. That's what contains your CSS rule. And now every box can have padding. Patting makes the box bigger. You can add padding on one side. You can have patting on any combination of all four sides, but in this case, I've added five pixels of padding to every side, and my CSS looks like this. Patting colon five p x Every box can have a border. The border begins where the patting ends. You can put a border on one side on any combination of all four sides. It can have any designated thickness, any designated color. In this case, I've added a purple border, which is a three pixel solid line, and you soon my CSS is starting to look like San. I've said all paragraphs have this much padding and this type of border. Every box can also have a margin Margin begins where the border ends. It goes outside the box or pushes away from the box. We sometimes also called the margin the force field because it's a great way for increasing white space in your layout. As elements get close to each other, you could add margin to create some space between them. Every box can also have a background image, which is always the size of the padding, so you can consider the padding to be a window through to see the background image or the background color. The background color is always behind the background image. But as you can see, it does not extend into the margin on Lee into the padding. It really is very helpful when we start working in Dreamweaver when we have a empty HTML document in the beginning to start seeing where these boxes are. Either you can visualize this in your head, or sometimes it helps to just put a temporary red line around it so you can see where it really is. So I have a HTML document. It has opening closing body tags. It might have an H one tag. It might have a paragraph tag with opening and closing tags. This is what we mean by semantic markup. You should use the right tag for the right purpose. H one tags, a really important for search engine optimization paragraph tags. Really important we like to do first is to create a really simple, clean, stripped down H smell document and then start imagining that every box is about this big or my H one tag has its own box. My paragraph tag has its own box. The body, in a sense, has it is a box. All of these boxes are elastic. They will continue to expand as long as the browser window or what we also call the view Port gets larger. So if you've got a 30 inch apple cinema display and you've just got it set to maximum resolution, your page is gonna be really big. And if you double the size of your monitor, this would continue to expand indefinitely. And unless we put some sort of fixed whipped on this. So since my paragraph tag is going to continue to expand in the space that I allow it, the only way to contain that is to write some CSS that says, Hey, paragraph, how about you have a fixed width of 500 pixels? And now my boxes constrained like this when you start putting default H Mel elements into Dreamweaver. As I mentioned for when we talked about zeroing out the page, Dreamweaver is going to try to put a default margin and padding around most of your elements to mimic what is happening with the browsers. Some browsers at 10 to 15 pixels of space with margin, some at it with padding. Some use both and some various, so it's kind of a it's a minefield in terms of trying to tackle that. That's why we zero everything out. So if I started using semantic markup and here I have an H one tag, a paragraph and a list by putting a background color on them, I can see the dreamers giving me a lot of white space in between them. So how does zero that out? By setting all the padding and margin to zero, you could see the gene close up that white space on them. I mentioned last week something called a global CSS reset. After you've done this, a dozen or two dozen times will think there's got to be an easier way over the course of these classes. I'm going zero these out one by one, because I believe in methodical repetition to just do it until people get in the habit of it. But if you want to zoom ahead, just Google Global CSS reset and you can do this in one fell swoop. So this is kind of what it looks like. My H one tag. You see that it has a background color and its margin padding has been set to zero Ah, lot of people wonder, What's the difference between margin? Panic doesn't a sense. You're doing the same thing another way. You can sort of ah, illustrate that for yourself is to put a red. But I read border around it. Actually, that's the next slide. Let me I illustrate this slide. Think about it this way. Margin pushes away from the box and Patty makes the box bigger. Sometimes you want to use both and sometimes you want to alternate between the two of them were to see which is going to solve your problem better. So just compare and contrast how they look. If I have an H one element and I've stripped its margin and patting 20 I've given it a background color and I get over giving it a red dashed border. It looks like this if I had a 20 pixel margin on top, it's gonna push down from the top of the page and create that white space here. Now the next thing I'm gonna do is at a 20 pixel patting. It's gonna push the words down the same amount of distance, but it's gonna have green space instead of white space. So when in doubt, put a red border around it and play with both of them and see tried to determine where your HTM element really is by varying your CSS. So I'm gonna pause out, we're going to devise and floats and then I'll pause. So I talked a bit about dibs and floats, and I think I lost a few people. So I want to go over that just real briefly again before going into our Photoshopped file. This is what an HTML document looks like when we talk about the separation of presentation and content. This is just the content. This is an unstylish CSS document, and the HTML document flow goes from the top to the bottom. So it's an element followed by an element followed by an element. When Tim Berners Lee envisioned the Web in the first place in he never imagined that we were going to be using this as a layout medium. It was only for scientific documents, with headers and paragraphs and hyperlinks toe other documents, so they just had to start at the top and go to the bottom. They're only supposed to be one page long Now those of you who have bad memories of the late nineties and the early two thousands. Remember that we used tables to lay out pages, and everyone knows we don't do that anymore, right? So while tables were tempting because it let us pick content up and move it over, we now know that no, that's no longer best practices. What we want to dio is divide our page up into natural divisions or regions and wrap them in div tags. They're still in this natural HTML document flow order, and we want to use floats to pull them up from the bottom of the page and position them over. So the way I'm getting there, I think it went over this a bit last week. Insert layout object div tag. Also, make sure that you do this in code view, not in design view, cause sometimes and designed you it doesn't select everything that you want. When you make sure that everything is selected, you know that you've got the whole ate the whole section of the page that you want and you wrap it into a diff tag. Once you have that dip, tag remover lets you define it, and this is where you can start using floats. Actually, the first thing is one wrap around the selection to give it a name hit New CSS rule Select I D. In this case, most tags are unique. Identifying remover will take care of which wanted to have naming it because you mentioned that in previous dialog box and for our purposes. Now make sure that you define it in this document only as we start building multi page sites, we'll talk about external CSS style sheets. So once you've done something like this, this is what I mean by the separation of presentation and content. On the left is my html On the right is my CSS On the left is the content on the right is the presentation and that I wanted to be this tall this wide and have this color. So what I like to do when I do this in today's exercises, I like to make garish background colors. A lot of Web developers work this way so you can see what is what. I want you to know that this is not a design solution. This is a temporary solution just so we can say the orange one on the top, followed by the pale yellow one, followed by the blue one, followed by the green one. This even though we've wrapped ascended tags, this is still following the natural HTML document flow, and you can see that if I made this smaller or imagine it was on a bigger monitor, these will continue to expand since they have no fixed with to fill whatever view port there in. And that's why I use a container tive to contain all of these, though this is one extra piece of mark up, but I've done here. My container has a red dashed border, and since it has a fixed with its holding, all of those dibs in place, it's locking or anchoring my content. Hold on a second. My there it goes, is my kino can bails on me. Try that one more time using floats a position. Give content because when you put them from one machine to another, doesn't always work quite the way you want it to. So what I've done with my first column here is I've given it a fixed with, and I've told it to float left the way. Look what's happening with my pale yellow column. It tucks into the left corner and look what's happening to my Blue column. Since it has no wet with its trying to squeeze into the available space, it's only by giving a fixed with the all of our dibs and applying continuing to apply float left to them that they start to fall into place. So my blue column now has a fixed with is and has been told to float left. But my Green column, with no fixed with doesn't know where to go. It isn't until I give my green column. Also fixed within another float left that they all tuck into a three column layout. And then I continue make some space or gutters between my columns by giving them a small 20 pixels of margin on their left side. Do you understand how floats work? You can have a lot more control over your layout, so I'm going to move out of here for a moment. I'm gonna move into Dreamweaver briefly and open a file called floats dot html. What I have here is just a series of boxes, six boxes high. They just been told to have a certain with and a certain height in a certain color in a certain type style. Watch what happens when I changed there and I have a custom class here called Box. I'm gonna hit my pencil icon and I'm going to its box properties and I'm going to tell it to float left and click OK, and you can see that everything. The 1st 1 floats left. Number two comes up in around to follow it, followed by 345 And if my window were big enough, number six would as well. As soon as I expand, this six comes up is well, watch what happens when I change that and go to box and say float right and click. OK, now they're floating in the other direction so they're still there, controlled by the html document flow. But since the 1st 1 has afloat, the others are following it left and right changes the layout of the page. So those are the principles are floating that I'm gonna be using as we build our our exercise for this week. So hopefully gift helps people get a little caught up on the language of CSS. Let's take a look at what we're gonna build. No, the browser. And if you took my flash class, you were lucky to see the video of my daughter skiing because she goes to Cascade Ski and Snowboard School. And I'm you know, your first guess would be that this was built in the late nineties, judging by its layout. But I think somewhere at the bottom, it said Last updated in November of 2000 and nine. So I thought, you know, just as an exercise for this cause these guys could really use a redesign. And I think when next fall shows up, I'm going to show them what I built and say, You know, I'll be happy to redo your website just for the good of either community, maybe in exchange for some free ski lessons. So I came up with a slightly modified design for a direction that they could go in mostly just to create exercises for this. And I thought, Well, what if it looked a little bit like this? Looks a little modern, looks little fresher. Looks like people are having fun skiing. We've got that sort of ribbon motif that we're seeing, and we talked about in the intro a lot and we got a little flash slideshow going on. We've cleaned up the navigation. We've gotten rid of some of the clutter. We've kept the ski instructors of America local on here, and we've got some bold, easy to read rollovers as well as some navigation going on in the footer. So let's see how we go from that in Photoshop. Here's my original PSD competence. I go to the top layer. You can see that I've divided this up into a series of gifts. Just like I told those three columns to float over. I have one to three columns, knave, text and flash, which all sit inside a larger def called Middle. But I've used floats to position these Those something called Clear, which we're going to talk about later that I'm going to control the footer and header. And something really tricky here is how am I going to get that ribbon distributed between these two dips, which I haven't quite figured out yet. So I'm just gonna slice real briefly here. I'm not gonna go through all of these graphics. I would just go to this header layer. I'm gonna take my my my marquee tool. And as we mentioned last week, you can use the sliced tool. You can use the selection tool, anything that works for you to make a slice. But the way I broke this up is I just sliced out all the necessary graphics image crop and I said file safer weapon devices. This one would be the header. Now, a couple of tricks which you're probably wondering, How is he gonna do this? Let me hit. Come in, Z. When we get to this navigation bar what we're gonna have to dio we're gonna have to say that it's a background image, but I'm gonna have to turn off. I'll keep that one on. I have to turn that off and that off and my dividers. So I'm not going to try to do this live because in very that's why slices ahead of time. We're going on the cooking show model here because I try to slice these live. I'll get it off by pixel in. Nothing will work, But basically what's happening here is this is one image like this image crop, and it's probably off by a couple of pixels. There image crop. That's gonna be the background of the navigation bar. And they're gonna line up just right so that it fits flush with the header. So it looks like that ribbon is continuing down through space. We just go backwards on this. We actually don't need to slice any of these graphics. Let me pause for a minute. Let me go by. History panel, actually to get that back window history crop rectangle a marquee. Bring me over. I'm gonna close out my floats. I don't need this anymore. And you can see I've got step one. Step two. I had a step three here somewhere. Some of the ana and chat did have a question about how you optimize the images. And, um, what are your dimensions? Gosh, I can't remember, but I can find them for you in the finder in just a minute. Let me just slice the header real quickly just to show people what I'm going through here in Photoshop. I was doing something like this, grabbing that whole thing up into the bottom of the teal bar, and I like to keep my info palette open window info and see if that says 9 59 By 1 I'm gonna go to select, transform selection and pull that out just a bit because I know it needs to be 9 and I think it was by 200. Well, we're getting as close as we can. 1 97 Good enough hit. Enter to accept that image crop file, say, for women devices. I think this whole thing I built in J pegs it's pretty straightforward. The maximum setting tells me this is 161 K I know that's too big. Generally, I go down to high, which is 56 K or even medium, which in this case is 30 K Sometimes if you know that someone, maybe your art directory or what Masters told you we need a total of 200 K for graphics for the entire page and say, Well, I've got four images. You do the math and say, I need to get this under 40 K I can go to a little triangle menu right here and say, Optimize that's in the top right corner optimized to file size, and I'm just going to get it down to 40 k I could either stick with current settings or let Photoshopped auto select for me, stick with the current settings. There we go, 39.76 K Then I would say that as header not J Peg. If I go to the finder view of my folder here and my images folder I have the middle dot jpeg is 45 k the header dot jpeg. In this case, the original is 53 k I have the pro ski logo died gift, which was eight K and never There's that background for the nab Our looks like I got a little extra blue on there by mistake and that waas also ate que summer gifts summer J pegs, but very few images in the whole thing. Candace that another question in the back. Yeah, just following on that cup of folks in the chat room would like to know sort of What is the best practice or what is the average size amount in kilobytes that you would have right now? Poor in total? Try. Try to keep your Web page under 300. 300. Okay, great. Thanks. Figure your HTML document is going to be about six or eight k. And so that leaves you in this case, I actually have a flash file which is going into this, which is 130 K That's leaving me with about 115 k for images Total. I was gonna cancel here. I don't need to save this. Once again, I saved a tracing image Good in my history, real briefly to go back in case anybody forgot how he made that. I just selected the actual portion the page that I needed image crop. They said files save. And I said saved It is tracing dot JP, which I'm going to use to build my div order over. I don't need this anymore, so I'm just gonna hit Don't save. We're going to Dreamweaver. You say file new html document with the document type X html one point. Oh, Transitional and hit Create. I'm gonna say modify page properties tracing image browse. You know I need to save this. First he was gonna prompt me. Let me hit Save into desktop Cascade. We'll just call this new dot html Modify page properties tracing image brows image tracing dot J Vague, choose and click. OK So if you guys remember the problem we had last week, this doesn't fit into the top left corner. And if you tie them with our information from this week four ways to redefine a CSS style, let's redefine an existing tag. In this case, the body tag. I'm going to my CSS styles window hitting the plus sign for new CSS rule anything. My drop down. And here's those four choices Class I. D. Tag and compound. I'm just going to say tag and remover says, I know what you're up to. You want to change the body tag? I'll say, OK, and I using the CSS box model, I'm going to strip its margin and patting for the tucks into the corner exactly the way that I need it. This, I think, is going to be a little easier to follow if I change this to 66%. So it all fits in our window. The first thing I'm gonna do is I'm gonna say, insert layout object diff tag. I'm going to go toe I d unique I d. And call this one the container. Now, some of this is gonna sound repetitious from what we did last week. So I'm gonna speed through this a bit new. CSS ruled remover says I know you're making an I d. I know you want to call it pound container cause all ideas begin with a pound sign and I'm gonna click, OK? And this case, I'm just gonna say box with 9 60 now, you don't need a hide on these things right away and you'll probably want to take it off later. But if I don't put a height on this, it's only gonna be about 10 pixels high. So for right now, I'm just going to say 720 pixels. But we'd like to make flexible containers in terms of their height. So remove that later. Just gonna quick, okay, And click. OK, you can't quite see it, but I do have a box going right around the edges, fitting perfectly at 7 and it says container content for I D container goes here. I don't need that. So I'm gonna insert my header right now. I'm going to go into code view because I want to make sure that it's after the opening container dip and before the closing container give and say Insert layout, object Gift tag. This one. I'm gonna call Header This time I'm not gonna put any imagery Inanities. I'm just gonna make these all colored boxes so you can understand our layout first before adding visual information. New CSS rule click OK box. You know I can't even remember. So I'm gonna guess 200. I'm not going to give it a with because it's held in by that container, but I will give it a background color. Doesn't really matter cause these are only temporary Click. OK, returning to design view. There's my header now. I don't need that placeholder content. I'm just gonna make that go away. Is there a question here in our middle for this middle section which is gonna hold three dibs within it? Generally, if you try to just go into here and design view something wrong, something bad is gonna happen. So always going to code your spliff, you and make sure your seat was trying to put it inside my head. Additive makes your cursor is after the closing header, Div. But before the closing container Div here, I'm going to say insert Leo objects diff tag I'll call this one middle new CSS rule. Gosh, I can't remember how tall it was. Maybe was 450. We got as close as we can. We'll give it a height before Background color blue and click. Ok? Yes, it was for 50. So here's we're gonna start to use floats to position the content in the middle. I'm gonna say make sure in the right places I'm in the middle. Insert layout object. Def tag. I'm gonna call this one knave for navigation. Click. Ok, I think that Waas 175 doesn't really Maddox. I can adjust these later. And this isn't actually the This isn't gonna be my finished file. I give that a background color of orange click, OK, and click. OK, No, I haven't given you the height, but if I continue to hit return, I continue to add some content to it. They'll stretch to fill that space. I can't do that just yet because after its I'm going to say after the closing div tag, I'm gonna say insert layout object diff tag. We'll call this one text because it's gonna hold my body coffee. It's a new CSS rule. We'll give that one a width of 400. Make that one with the background color purple and click. OK, And now we're gonna make our right column, which is called Flash, because it's gonna hold our flash element after the closing date tag and before the opening after the closing, in its place in the document flow, insert layout object def tag. We call this one flash new CSS Rule in the background color of orange clicking. OK, so this is what happens in a natural HTML document flow everything, stacking your from top to bottom. It doesn't matter if I give them heights. I could give them height so I could add content. They don't start falling into place until we start applying floats to them. So let's go to this 1st called knave. Excuse me. Moving my property inspector twirling down style in my CSS styles panel. You know, we're not even gonna use the insert bar, so make that go away and only used the CSS Styles panel a div called knave. I'm gonna hit the pencil icon to edit it. I'm going to go toe box and I'm gonna say float left and watch what happens. It tries to squeeze my purple box up in around and Force is kind of a text rap, which is not entirely bad. Sometimes you want that to happen cause give you some control in layout. But now when I go to this def called text and I tell it to float left as well, it falls up completely adjacent to it pulls up, I should say Now when you go to my third Div called Flash of a Hit, my pencil editor, I come to edit it if I go to box and also tell it to float left. I now have a three column layout. Now if I go to this Div called Flash and I want to get a little space between I'm a little bit off on my pixel dimensions but catch up without later. If I edit this and say, Let's put just a 20 pixel margin on the left like a little space and the same thing for my div called text let's go to Box de Select. Same for all. Put a fix the margin on the left and click OK, and now let's also give these guys some height by hitting the pencil icon. I think the height waas for and the same for flash and the same for now. Also, you know I'm hitting the pencil icon here. You can also get to the same place by saying at property. And if you know what you're looking for, you could go through this whole drop down list and just go to that was not what I wanted. Go to height and then typing for 50 here. Or if you were really savvy, you could go straight into code view and edited. Here, let me zoom that back up for a minute. We've got our basic three column that Bruce has had a question for me is just a real quick question from the Goto Webinar. If you do, you float. Float left in one, def. Do all the gifts that follow it then have left? Yes, Yes. Until you cancel that are, well, floats work like a gravitational pull, which is irresistible. Everything will follow after the floated object. Unless you tell it not to let me zoom back out and make our foot or actually just to show you what happens here looks like my original tracing, which has some social media icons. But just ignore that. Let's just try to say, after this Div called Flash and after I'll get back to that later. It's not gonna fit into what I'm doing right now. You break the float by applying something called Clear. The clear property resists the gravitational pull the float or overrides it. So that's a quickly out of how I got to hear Step one. We're here. My measurements are correct. So I'm gonna move ahead on this in our cooking show model. This is the cake that's halfway baked. Well, yes. I moved a step to kind of had a question for the Internet. The default float value. There is no default for, actually. Actually, the default value is left. Okay, correct myself and from Wolf Melon. What's the advantage of floats over absolute positioning, As mentioned before, absolute positioning is only for cowards and scoundrels and cheaters and should only be used as a last resort, most because it's much easier. But it's unreliable in the browser. And if you if you want to get a job building Web pages, if you're gonna work for other people. You've got to know how to use floats. So here is my step one with my floats and my my columns put into their their proper position and dimensions. And as you can see, I have them labeled with header knave, text flash and footer. I'm going to go to my CSS rule here for Footer and hit my pencil icon. I don't think we need to put a clear on this one because it's ah, it's not contained by my middle Div is breaking the float. Basically, these three columns in the middle are all contained by Divx called Middle. So the that breaks the pull of the float. So it's not affecting my footer. Let me go to my head or here delete the words header because we no longer need it good or CSS Styles panel hit my pencil icon. I no longer need this background color, so I'll just go to none. But I do need a background image. In this case. I'm gonna grab header dot jpeg and hit, choose and say no Repeat and that goes in nicely. I'm gonna go to my div called text and I'm just going to get rid of the background color. Um, I and maybe that word text is well, I take my div called Flash and edit that and get rid of that background color. Now I'm gonna go to this Div called Middle, which sits behind them or contains all three of them. Get rid of its background color and give it a background image called middle dot JP which is our mountain with our headline on it. I'm gonna hit, choose and no repeat and click OK, not going to go toe r div called knave Go to my CSS styles Edit that. Get rid of that background color You can either go to choose no color or go to this trash can icon and that's gone away But it needs a new background image of I believe it's called knave background Now BG That wasn't it. Now that'll work for now. Oh, it's left BG There we go. So there's the bottom of my ribbon which has been if I've sliced this correctly and we hit no repeat should show up really nicely. Let's go see that in live you If you're using Dreamweaver CS four, you get a live view This feature doesn't exist in CS three seems to line up pretty nicely, and you can see that my ski instructor logos here is well, as a background image. It's really important to know when to use background images and when to use foreground images. I've been using mostly background images. Right now, foregone images are not a part of your CSS forgot. It would just belong in your HTML document flow. While we try to keep our HTML, I stripped down and spare us possible. Periodically. There are occasions where it is advantageous to include images in our foreground, particularly if we include all tags, because it actually improves our S CEO or search ability. So if your images particularly prescient or Coach Inter pertinent to what your pages about and it has an all tag, it still counts a semantic markup. But for the most part, I try to keep the majority of the bulk of my imagery in my CSS to keep my html a stripped down as possible. So what, then? The other thing I need here in my def tag here called Flash and be kind of careful here because that's in the div called text trying to grab the edges. That's the diff called flash inserting my cursor here. I still want to go into code view to make sure that I'm actually between the opening and closing Div tags and saying Insert Media Swift. I'm gonna look for a slide show dot swift and hit Choose. If you're concerned with accessibility. Dream ever makes it very easy for you to add an accessibility tag. I'm just gonna write slide show, and we could also add access, key and tab index stuff. But I'm gonna skip that for right now. Going back to design view Looks like my swift file is fitting in there nicely. If I go to my properties inspector Window Properties, I can hit play to see how that looks like it's off just a bit. I want that tow line up perfectly with my background, but I kind of just that with margin padding in a minute, I'll leave that there for now, and what I need to do now is build my nab our, which is probably gonna be the trickiest part A from in front last week, in terms of semantic markup, it's important to use lists for navigation so last week. I am. I had a nab our which went across the top. This time I'm going to do in which runs along the side but need to begin this by formatting it as a list. So by just typing in here, I guess what I really should do since I can never remember what's in my own file Just grab my PSD Go to my layers panel file open recent cascade dot psd Zoom in on what my text says and you and the Internet don't know that I have another monitor here that I can just took off to the left side and I can read Write off that returning to Dreamweaver. But here the people in the room can see through my mystique. Here in Dreamweaver, I can now, right classes. And you see, I am in the wrong div. Someone hit command X. I'm gonna go into code you and make sure that I'm in this Div called knave and paste that it currently has no formatting. But by going into design view, I can select this and say format list a non ordered list. This is inserting a UL tag and I think it really helps going to split view at this point. So hopefully you can see what I'm doing is I go along. There's my UL and my first l I. My first list item, as evidenced by that bullet point now, Every time I hit, return or enter on the PC, I got a new bullet point and I get a new list item schedule instructors, your checklist locations, transportation, whips and contact. So they're all list items. I've got a bunch of L I tags here. I've got one UL tag, but they also need to be links or adding the A tag. I'm gonna do that by selecting my type and putting a pound sign into the link field of the Properties Inspector. Now, realistically, you would be linking this to classes that HT male scheduled out html instructors dot html and so on. But I'm just going to put the pound placeholder link for now because what we really want to do is to trigger the link behavior so that we can restyle those links. So now I have a U L. Tag, which I won't apply some CSS to l. I tag was I would apply some CSS to and in a tag which I won't apply some CSS to. And don't do what I just did. Whatever it WAAS cause dreamers very thoughtful. It highlights with the yellow here and says, You've made an error and if I hit refresh There we go. It's all gone. I am going to take my property, Inspector down and I'm going to go down into my breadcrumb trail the bottom of my window. I'm gonna click on the UL tag. Dreamweaver knows what I want because it's highlighting entire ul tech here and in my CSS Styles panel. I'm gonna click on the plus sign to say, new CSS rule. Now this is a compound selection, which is also unique. I d. I'm going to say less specific and even less specific, because I know that I only want to talk to the A Nordling ist in the DIV called knave. I'll click OK, and the first thing you want to do with a non ordered list is always said. It's list style type two done. I also do. This is a diagnostic to make sure it's working. If I hit, apply which, in a sense it's like preview because I haven't clicked. Okay yet. If my bullet points go away, I know I'm talking to the right element. I'm also going to go to its box properties and strip its margin and patting down to zero. Now, you saw me do this to the body tag earlier. Does view her ready to zoom ahead in Google's global CSS reset. Go right ahead. Those who could feel like you would benefit from doing this over and over again. And I find that most people dio we'll keep doing it now it tucks up nicely into the corner. Now I'm going to redefine my l I tag or my list items of which there are many by going down to my l I tag and hitting new CSS rule the plus sign icon man, I wish I had written these down pound knave u l l I is the same thing as pound Nat l I which is better. What should you do which ever shorthand your most comfortable with? I like pound knave l I or all list items that live within this div called naff. I'm gonna click ok under block I'm gonna tell to display as a block level element. We're going display block, and we'll see what happens when I do that. You can see that they are now all boxes they don't need a fixed with because they will continue to expand to fill the width of whatever container there in since my def called knave is 175 pixels or whatever it is. Um, well, just go that wide. But I will give them a height, but I need to go to box in order to do that. I think I gave them a height of 35. Looks pretty good. I'm gonna click. OK? And now I'm going to style the a tag by clicking on the A tag in my my breadcrumb trail and going to my CSS styles panel and saying new CSS rule. And I don't like seeing knave u l l I A because it's a mouthful. And when knave a does exact same thing or all anchor tax within this difficulty, knave, I'm going to say I want I want to make sure I'm talking to the right animal by doing a diagnostic by saying text decoration. None. If that underlined disappears, and I know that I'm in the right place. I still want to do a little more styling. It looks like that is I'm gonna pick up font style such as Ariel, and I'm gonna make it gray and 18 and hit. Apply. So far, so good. But I want these to be moved around in that box or tucked into the top left corner. And this is where it gets really tricky with block level elements on a vertical nab are like this. So you think? Well, he talked about margin and padding earlier. I'm just gonna use a little padding. I'm gonna go the box and ah, de select. Same for all in. I'll just give it 15 pixels of padding on the left. Well, that was easy. Well, then surely 15 pixels on the top. We'll do the same thing. Sadly, it doesn't work that way. This is where I was making my analogy toe learning English and English grammar. All the rules hold, except for the ones that don't. So for some reason, in this situation, patting on the top doesn't work, and neither dis margin. You need to talk to its typographic properties and go to something called line height. Those of you who are old school graphic designers will probably recognize that line. Height is another term for letting. And since I know that my boxes 35 pixels tall, if I set the line height to 35 with the distance between this line and the next line, the hypothetical next line drops it down into the middle of that space. I'm gonna click. OK, but if you look in my original Photoshopped comp, there's there's a lot of room between the bottom of this ribbon and my A nordle ist. So I need to push the list down, you might say. Well, which tag should I address? The A tag the ally tag orthe eu l tag. It's the UL because that's the outermost box, which contains everything else. So if I returned to Knave Ul and hit my pencil icon to edit it, if I go to box and I give it a margin on the top of pixels and hit apply, that pushes the whole thing down. Dreamweaver also has some visual aids here. View visual aids, CSS. They should be showing, shouldn't they? If I grab this thing well, thanks. Dream were. That didn't work either. We'll come back to that later. This should tread a quick on the UL tag. It should show that there's a little box, a little extra space here. But I can't get it to do that right now. So let's do one more thing. That's go to my step three and look at that in the live you. Now I've got to get a rollover state, and we've got to get these blue bars underneath that separate each one of these. Let's go look at our CSS rules here. I can pull this open. If you look at my knave, l I you can see that I've added aboard. Well, that probably isn't that ledge herbal. You can look at all your properties here in this window if you know how to read that. But some people want so some people might find it easier to jump to the pencil icon. And you can see that all I've really done is added a border on the bottom, which is a solid line and this color and this thin to each list item. You don't want to add it to bottom and top, because then they're going to get You're gonna get a double thickness. Let's go back to when I was working on Yes, switch designed you from and go to my CSS rules. Go to my knave. L I edit it, go to border de select Same for all and then on Lee on the bottom. Now you could add a double line dashed line, a dotted line. There's a lot of solutions, but I'm just going to stick with the solid line de select. Same for all. Once again on the bottom, you can enter a pixel value, but I just like thin And then for the color will just grab a teal color from right here and click. OK, that's going to live you to see how that looks. Just takes a moment to refresh. So far, so good. But look, it's pushing down just a little bit too far over my ski instructor logo. So let me go back out of live. You. We hit that ul tag where I gave it a margin on the top of 100. Let's make that and that seems to almost fit there. Remember, I can change it right here. If I wanted to. I could even go into code view and my styles right in the head of my document. I could go to the U. N. And I could change it right here as well. Three ways to change your CSS rule. They all do the same thing. Looks like my logo is almost clear. 60 was probably the better choice. They're ago. That fits in nicely. Now let's make the rollover state, which is the A colon hover. It's kind of hard to get there. Do you can't quite figure out what to write for. You need to know how to fill in the blanks by opening up my CSS styles panel in hitting new CSS rule. Oops, More specific deleting Yuelin Ally. Now you know, if the nice that dream ever figure out everything which we have to do a little manual typing The proper syntax for rollover state is a colon hover because I've already to find this as a block level element. It already knows that it needs to be a window, which is actually no, What I think I failed to define it is a block level element we're gonna find out for in a minute Let's just give it a background color of some teal color like this and we're gonna want our type to change color because it's great. We're gonna be able to see it. So the type color switches toe white click OK, by going toe live you. I did in fact, forget to define these as block level elements. So if I don't define it is a block level of level element. The rollover state will Onley register as big as the type. So what I need to do is go back to my CSS rules, go to my a tag, edit it and say block, display block. Now this seems kind of redundant because didn't we define the list? Item is a block level element. Didn't we define a window which we can see through once? Yes, we did. And we need to do it twice now if I click. OK? Oh, you know what? And I still didn't do it right. I still need to give it a height, which I believe was 35 pixels. Right now, if I go into a live you I've got the whole region rolls over and changes to teal. I've got a nice underlying underneath all of my list items because I put the sytem. Hasn't ah border on the bottom only. But what's missing on classes? I don't have a rule on the top. If I had a rule on the top to all of my list item, what's gonna happen there are going to double up where they meet, right? So how do I fix that? Which tag? It needs to get a border. What if I go to the U L tag? Oops. CSS styles. Remember that UL tag, which is the outermost box? What if we edit that and we go to border and we do select same Fraulein? Just put one on the top right here, thin and in some color like that, and I got a line just on the top. But I haven't created bulky double lines on the rest of mine. It's clear out some of these windows. Let's go and preview this in the browser Now. Actually, let's check IDs. Validation first. So validate current document. Oh, I'm looking for a tracing source. So let me close that. I don't need that tracing element anymore. Modify page properties tracing image. Take that away. click. OK, check for validation. Validate current document. No errors or warnings found. X html Transitional. What's previewed in the browser. Oh, so you know you notice I installed a flash file earlier? Insert Media Swift, My flash slideshow. When you do this in Dreamweaver, it gives you a little warning that says, Hey, you know what? It's 2010. That's not gonna run in the browser unless you have these two things up on your server and you say, Okay, Adobe, whatever you say, one of which is called scripts one. It's called Express, installed out Swift, and one is called Swift Object modified dot Js drew over. Put season a copy of your scripts folder and then, theoretically, if I were toe upload this to the server, you need to upload that scripts folder as well. Usually, I think, Well, at least most of us were. So we're so conditioned to sort of click OK and not read, we might skip over this. So remember to look for this. If you I can't see your flash content up on the server. Chances are you didn't upload these as well. We haven't really talked about uploading yet, but that will be pertinent later. So, you see, my slide show is Looks like it's off just a bit, but I can fix that. My links work not quite done. You need to add a paragraph here and some footer links in just a minute. It's close out of that return to Dreamweaver. I should return to photo shop where will be be able to read my Photoshopped checklist. So now I'm gonna add the secondary knave into my footer by going into code view Active I D footer and the first word WAAS Classes returning should designed you. There's the word classes. Once again, I'm gonna make another on ordered list because it's still navigation format list a Norden list and ah, chat room. Bruce are kind of someone last week said, Why can you display those as display in line was out of question last week. Let a navigational investment we're gonna do right now We're gonna display in line a supposed to display block to show another way of formatting a list. So classes, you know, in the interests of time, I'm just gonna ride schedule instructors etcetera in must, because my 7 20 pixel resolution is gonna let us extend further than that. So just pretend the rest of those links Aaron, that nab our once again. It's a UL. I need to talk to the UL, tag my files window, pull it my CSS styles window, make a new CSS rule less specific foot or you l. And this is why make you do it over and over again till you remember list style type none. Margin and patting equals zero, just like we did before. I've stripped it and it tucks into the corner. But now these list items I'm gonna make a new rule for them. Footer L. I Now I'm going to tell them to go to the block property and tell them to display as in line. You can tell a list. Items to display is a block. Intel displays a block and float left if he wanted a larger window, or, if you don't need in What if it's just a text based link? Tell to display in line and watch what happens now they swing up and the I'll go in one line. Now if you need space in between them, go to padding and put 30 pixels of patting on the left and they open up nicely. If I were now to make them links, I would go to my properties. Inspector. I'll just make them quickly into placeholder links by putting in a pound sign. Now, how do I restyle those? It's the foot or a tag. We're going to my the breadcrumb trail in my property, Inspector. New CSS rule less specific. We're all foot or a tags are all links in the footer text decoration. None. Color White font size of 12 font family of Ariel and let's just go to block and text Align right if something is not moving them over. But I'll figure out how to move them over later and then go to type. I think my footers messed up. Give it a line height to move them down. There we go. So I think my flash file is just a little bit too big. Probably should have checked. Ah, 4 We'll all figure out my air later. Fortunate, with our great cooking show model, I have a finished file right here in step five. The only other thing that I did here is I added a paragraph and I made a new CSS rule called text P because it's all paragraphs that live inside this DIV called text. And the key here is that it has a margin top of 300. I just changed that to 200 so you can see what I'm talking about. Moves up a little bit. 300. So now with the flash file that fits slightly better, I'm not gonna try to tweak my margin padding on the 1st 1 Let's preview that in the browser. Not bad. We've got this hour flashlight show, and if you look real closely you consumed, I didn't quite get it to match up perfectly. This actually took about 15 minutes of trial and error on my first attempt. My flash file. I didn't quite match perfectly. You could see that. It looks like a big thick column, but with little push and pull, I got it to blend in perfectly. So let's also now let's go check it in. Adobe browser lab. I've gotta finished file up on the Web, go to Firefox, another window that I have open here in browser lab. You can see that we did ok. Here it is in Firefox here Isn't Safari Take it down in scale? Just a bit. They look pretty similar, checked in a bunch of different browsers. Let's just check it in IE six, though. And watch what happens if I go to all browsers. Internet Explorer, Windows XP. See how my NAB are slightly out of place? This is quite common, and I did this on purpose. Also, it looks like my date has been pushed out a little bit. Fortunately, Dreamweaver gives you a really good warning for this. Let's go back to my file here under check Page. I had could check browser compatibility and it's going to say Line 1 29 in line 1 44 Doubled float margin bug. That's who. We can zoom in on that and just see what it says. When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one of war floats effects. Internet Explorer six, Plano Likelihood. Very likely. So that's what's pushing. Remember that my three dibs floated left, and then I offset that knave bar with a margin on the left. That's what's causing that. The great thing is, if you're familiar with these things, if you know what to look for and also the expanding box problem, any conflict is not fit in a fixed box will slide down. That's what's happening without other image, which is sliding down the page. If you know what to look for, you won't make these mistakes. Don't do what I did in the 1st 5 years of my career. Designing Web pages is that I'd promise them the world. And then hours before the site was supposed to go live, we would find errors like this and you stay up all night or until the wee hours of the morning trying to fix them or worse than that having to say to the client, Gee, I'm sorry I don't have solved that problem so real quickly. Let me also open up Flash to show you how I went from photo shop to build that flash file, and then we'll open it up to Q and A. So, in addition to my regular PSD, I can find that in there there's a file called slideshow dot psd. So as you can see This is pretty basically just quick snapshots of people skiing stacked up into different layers along with a background. That background is sliced from the same background that made up the Middle Div the background of our of our page trying to align it perfectly. The great thing about Flash, Dreamweaver and Photoshopped the three products really integrate nicely. If I was in flash, you can see how I built this really quickly slideshow dot fl a. You can see each one of these is just on its own layer and it just does a quick fade in and fade out. Let me show you how it built that by how I got it from Photoshopped by opening up a new file in this case action script 2. file import to stage. I can take that whole PSD Now that some of you might not know anything about Flash, I might be getting ahead of myself. I won't get too deep into it. I can convert everything into a movie clip because movie clips allow us to apply motion Tweens our animation to it. If they want a movie clip as well and then set stage size to the same. It's the Photoshopped canvas, and I already got something, which is the exact same sizes that did that it's going to go into. I was going to shift, select all these layers and say Control, create motion Tween I can't remember how much I stretch them out by, but we'll just keep him short for now just to show you how I built it. And then I just kind of staggered it like that and then extended the background layer. Oh, that's right. Insert timeline frame. Here we go. And then I just put in some subtle transitions. When it hit command return, it generates a new swift. I spent a little more time creating some animation on that, but it went pretty quickly. And then I inserted that swift into my Photoshopped document. And now let's go look at the finished product up on the Web. So there's our slideshow, which integrates nicely into our background. There is our three dibs, which, if we can open on my Web Dev toolbar here, outline block level elements using the Web depth toolbar. You can see where all my dibs are. I can go to tools, validates CSS no W three c compliant. No errors found and tools validate html Valid markup. So that's what we're striving for riding our coat properly because properly coated valid pages get better search results. And then I actually made one area. I didn't really check the size of that background graphic that I used actually, like it's 149 k so I had to replace that I finished file here in Dreamweaver. You can see that I put up a different background graphic to cut back on file size to get it under 300 K So, uh, there you have it? Cascade Ski School redesigned with only a couple of technical challenges along the way. Let's take a break and then going to Q and A Thank you very much, Thank you.