Lessons

Lesson Info

Session 4: JQuery Slideshow

my name's Eric. Fatter been. Let's do some more Photoshopped html adjust. Start with my Photoshopped file right here. Isn't Photoshopped going to making a website for Badger Mountain Vineyards? And as you recalled, when I first began this class, I did a serious survey of different design trends that were happening out there. And I wonder, so to be contemporary, sort of show what's happening in the state of the Web in 2010. And, folks, this one has it all. Not only do we have the logo inside a little ribbon motif, which is happening ever on the Web, we have little wrap around corners. We have wooden backgrounds, We have Jake weary, and we have CSS image sprites. I don't think you can put five more contemporary trends and Web design into one file. I've packed it full. So this is what the Photoshopped document looks like, and I'm gonna come back to that in a moment. I was going to go here. From what I have in the browser, this is what we're building. Unless you've been living in a cave fo...

r the last couple of years, you've probably seen a J query slideshow on a website somewhere. They're all over the Web, actually is Reading and Jaqui article the other day that said, 30% of the most popular sites on the intercept Internet right now are using Jake Weary and I'm seeing more and more sites using it in place of flash. Is Jake weary? Better than the flash? No, I'm not saying that one of their other. They're both good. They're both great ways for adding interactive content to your website. But more more people using Jake Weary and the great thing about Jake weary for designers since this is usually a class for designers is you don't need to learn a lot of code to use it. The slogan behind J Query is Ah, right, less doom or because you could benefit from all the people who already written a lot of J. Crew for you, and I don't know a lot of Jake weary, but I was able to grab a few lines of code and put the slide show in. That's what we're gonna be looking at. Let's go back to my Photoshopped document for a while. As you can see, I have my now near famous DIV structure late on top. Everyone has started to see dibs Every time they look at a photo shop comp, they start to see Box is forming around sections in preparation for what they're going to be doing. And there's a couple of trick a couple of tricks that we're gonna be doing here. So to get that wrap around effect, let's zoom in on the corner here to get those things that where it looks like the purple rappers rapping around, giving us the illusion of three D space. I want to point out that I have an extra div here. So in the principles of semantic markup, this is not considered best practices. I'm cheating just a little bit with little extra code. But what I basically have is I have to dibs one nested inside the other so that we can have to background images, and that's what's happening in this corner right here. So have a diff called Rapper, which is outside of a div called Container. I want you to look over here at my at my right nap and you can see on the right side of the right Now you can see my overstates. You recall last week we made it something We've made some very primitive CSS image sprites and that we took one image and we took its or for each link we took an image, and we made its regular state and its overstate into one graphic, and we had them swap up and down within the window of defined by the block level element. This time, we're going to swap them right to left the same principle. But for four links, instead of having four images, I have only one image and the way CSS image rights ours. I'm gonna cut out the what you see here from purchase wine tasting room. I'm gonna cut out this whole thing into one graphic and I'm gonna slide it back and forth inside of the link window. You probably like, Why's why's he gonna do that? What's the benefit of that? Ah, lot of people think, Oh, it saves on file size, which might save you a K or two. But that's not really the real point. The most important thing about CSS image sprites in terms of best practices, it's much fewer calls to the server as opposed to four images or eight images you have. You download the image for the entire navigation. Once you have a lot less silver calls, your page loads faster. Your band with costs are lowered. Started giving an example of what this is gonna look like. I've made a fake layer on top of this. Imagine if you will. If I'm looking at just the link called events. When we roll over that and I'm gonna grab these two links right here, this is what's happening. The entire image sliding over like that. Perhaps I shouldn't use my shift key cause mass pose A makes it look bad. So that's what having the whole thing is sliding over, William wishing that happening in one place and then if I were to move this white layer that I've made, I'm just gonna pull this up a bit over winery tours. The same image is doing the same thing right over here, sliding back and forth. So I've used one image four times. But because we define these as a block level element, I only see the portion of the image necessary for what's pertinent to that link. So CSS image rights a very important technique. If you want to start making more complex Web pages, So let me zoom out of here for a minute. And the other thing that I really want to show is they won't show that yet. We'll figure that out as we go. So you just turn off a few layers, turn off the header layer, turn off the knave layer most of the naff layer. There we go. So, uh, bear with me for a moment. There we go. So in order to get those little tiny corners as little pieces of the ribbon wrapping round, I do need to understand that I'm also doing another bit of a cheat. I'm making a graphic that looks kind of like this. We just filled this with white for right now, making a new layer and saying at it, Phil, with white, there's another graphic looks, well, white tan. Just pretend those bleed together. They probably find on the video and then turn off the wood in the background. Basically, this drop shadow, a little tiny piece of wood and those little tabs are forming one image which we're going to see put into that extra Div called Rapper. So those are the tricks behind today's file. Well, I'm just gonna go dive straight. Teoh Foot. Uh, Dreamweaver. So I've got this in the cooking show model. Let's just go straight to step one here. Hi. My property inspector pulled this now, so I've got some dibs already built. I think everybody knows what's going on here. These are did. This is a def called footer. This is a def called slide show. It's got some margin around it. That's gonna hold my slide show. This is a def called right now. This is still what we're talking about when we say semantic markup in that this is a Nhan ordered list. This isn't an ordered list. This is my main navigation bar. This is my H one tag for my header. Hopefully, at least it's a paragraph and another one ordered list. Let's just go to my body tag for a minute. Let me edit that. Take away that. Wouldn't background and click. OK, in case anybody is unclear that what's happening here is that is here it is in the finder that is a narrow strip. Instead of making the whole background filled with a giant piece of wood, I'm taking five or six boards and I'm letting them tile. I think it's probably 1200 pixels tall, 102 100 pixels across when I tell that to repeat in the back under the body tag, that's behind everything. Return to Dreamweaver. Go back to the body background, put that one back and hit, apply and I've got would tiling in the background. So let's look at our div order. Let's go to code view. The first thing we see here is a div called Rapper Remember before we started with a diff called Container. Someone is since I'm making a box outside the box or wrapper for the container or one extra div to hold a background image. So that's the first thing we encounter after the body. This Dave called Rapper. If I go to my CSS rules and I'm ready to find this, I'm just gonna add its background image. So it's dimensions already determined. I'm gonna hit my pencil icon. I'm gonna say background browse. Figure out where my files are into my images folder and find this image called rapper b g dot jp. And this is what I was showing in Photoshopped a minute ago. This is a big white box with a couple of narrow strips holding a little bit of wood, a drop shadow on a bit of those ribbons I would hit. Choose no repeat and positioning on the left and the top and click oak saying OK, and you can see that my ribbons have come in nicely. Let me move that away. Let's get that bar away because we don't really need that Pull that up pages pretty big compared to my screen real estate. But can everyone see how these air puzzle pieces that slide together and I'm gonna add the next pieces? Let's go to this Div called Header and see how it can make things line up. Fortunately, have the div already defined here? No, I don't. But I did think to Ah, just making header clicking out in my breadcrumb trail holding down control. Click or right click. Um, no, not doing that. Going to my plus sign new CSS rule less specific pound header. Not a new CSS rule. My watch is cancelled for many. Is this in here and not let me make sure it's not in here? There is no rule to find for it. It's safe. A new rule for header I'm gonna say background brows header dot j Peg looks like it's 188 pixels tall, so I'll make the same height for my div box height 1 background No repeat. And just in case, you know, everything by default his position in the left in the top. But I'm a little superstitious. Those should line up perfectly, which they dio Now I've got a div called knave. I can get to that. I know it's in there somewhere. My code You There's my def called knave Gonna make a new CSS rule for now or excuse me top. Now I'm gonna click, OK for its background, I believe I have a top knave B g, which is that purplish red Grady int. I'm gonna make sure that that doesn't repeat as well. I kind of had a question from the Internet. Yeah, just a request. I think way had this last time too. But if you could increase the size of a little bit more clearly, that's great to dream. We their preferences remember where we found it on. Now that I've done this six times or so, I finally condemn it by heart. There we go. So there's that dip called top now, which I just built. Why not look at it in code view instead of in design view? There's the CSS for it. You make it look. Oh doesn't quite line up perfectly, but that's because I've got this. A nordle ist in there, which is blowing things out. Watch what happens when I select this click on the UL tag in my red contrail. New CSS rule less specific Top Knave UL or the A Nor did a list inside my top knave. I'm gonna click OK and said its list style type two None. And it's box properties margin and patting Click apply and look at that. My little tabs on the edge lineup perfectly. So it looks like a ribbon wrapping around my container and ah, that just going to live you And this is kind of cool because since my notice that if I make my paid my window bigger or smaller, it seems to move around and it still floats nicely over that. Wouldn't background still got a few things to fix? Kevin Is that a question? Yes. Ah, so what is positioning that? Is that just falling right below the picture? You mean the little tabs? What's positioning the tabs? Well, what's was positioning that Grady in, Um, in the middle? Yeah, the one you just created. Well, that's one big image which feels that and ah, the Div called top Navis directly begins where the diff called header ends. Okay, I've sliced these with a pixel precision. And trust me, I didn't get it right on the first try. OK, they're off by a couple of pixels for the first couple of attempts and then a little trial and error, and I got them to line up. Okay, so these are list items now, you've watched me play around with those list items a couple of different ways. We've defined that is block level elements. We defined them is in line elements. We could do that either way. Right now, I'm going to define the l I as an in line this time, and I'm going to say new CSS rule top nab l I as you know you l l I and l I will do the same thing, but effectively. We want to say all this items within the top naff get styled this way. I'm just gonna tell them to say Talk to their block level property. Tell it to display in line and click. Apply. And then I'm gonna go to box. I have a little panning on the left to give them a little more space and click. OK. And somewhere along the way looks like I lost my height for my top knave. Probably cause I didn't define the height of that box earlier. And you know what? I'm finally getting smart. Can you believe that? I made a text document with everything in it, but I can just copy from So smart Header right now. Right now of events. Top knave has a height of 60 pixels. That's what I need. You know what? I could just be lazy and copy that. Go back to Dreamweaver going to my code view, find that style called top knave as long as this before that closing pink curly brace and that go back to design view and my top nab still lines up perfectly with my little ribbons that wrap around. So I'm gonna is gonna take one link here. Contact. I'm gonna make a new CSS rule for all Top. Have a tags click OK and shouldn't remember this too. But let's just try Georgia and white and text decoration None. And a line height of 60 I think. A font size of 18. Close enough. Sure enough. And now I've got a knave bar and let's just get rid of that H one tag. We're just gonna hide it by making a new CSS rule that says Header H one or the H One time that lives in the header gets a block level property of display. None. And there's the top half of our page ribbons. Wraparound nicely. Let's preview that in the browser. So far, so good. Looks pretty good. May find window a little larger. You can see that because the container has auto margins. That's all we centered in. If you look real closely, you can see a bit of an aberration as the edge of one background sits back on in, which sits on the other. But most people aren't scrutinizing your Web page that closely I scrolled down just a little bit to the bottom. You can see that I've got a little sloppy here, but I was running out of time. So far, so good. Back to Dreamweaver. What did I do next? What step to how far do I need to go to that part later? Step 30 I forgot about my current. Also, a lot of people were asking What about a current page indicator? So they get to subsequent pages. How do I know what I model? First, let's at an overstate to these. So there's why I select one of these and make a new CSS rule. Do you ever doesn't always get it going to compound? Sometimes Trevor gets confused Top nephew. Well, top never a colon hover Click OK, And I'm just going to say this gets an underlying and we'll say it just turns kind of purple on roll over. So now when I tested in live you all my links have a rollover state. Let's do something slightly different for the current state. I'm gonna make a custom class called current, which I would apply to just the page that were on. I'm making a new CSS rel clasping something that we could reuse. I guess you could do It is an I d to, because you can only be in one active page of time. But just in case we'll call it dot current, and I'll make this one. It looks like how to find already, don't I? You know what? There's an artifact left over from my getting ready DOT Current has already applied. No going to bring it back. We're just make this kind of a light pink, and we'll make it an overline just to distinguish it. And then I'm gonna just pretend we're on the reviews page. I can select some section here. I can go into code view and the word reviews. I want to add a span tack. Remember how we used to span last week? We just started type SP. Dreamweaver knows what I want Brings up this contextual window I hit Enter Gonna hit class. I just started type C L. It knows what I want, and then it gives me an equal sign in a couple of quotes. And look, it knows all the classes I've defined already, such as current class equals current end my closing tag, go over here and just hit a bracket and a slash and Dreamer closes the tag for me According to Designed to you. Now this has seeks the current page indicator on it. You can't see the overline in design view, but going into a live. You sure not now. I know him on the current page, and then you can continue to use the assess, too. Sort of build out that style in any way that you wanted. Kevin's had a question. Yeah, So what's happening to the link that that was on there? It was your style somehow obliterate the link or the styles that obliterated the link. In this case, anybody see it's gonna but it's it's still it's still behaving ism. That's why. Did an overline in underline. I can't see it turned wide any longer, but I can see that I'm getting an underlying so that not that I would want to click on the reviews page while you're already on his page. But behavior is still there. But that's okay. That's not Ah, no, no. In the world of having a having a link to its own page, it's not a, you know, worst practice, best practices I would take away. I could take away the eight ref here. Oh, and then your your current tag would still display what the way you want. Exactly. I can hand wouldn't show up. Okay? Okay. Although that took away some of my styling in size but way we could find Tune that if we needed to, We'll just let that would be a little smaller. Now just pretend it's a little cute. Okay? So let's get out alive. You and let's talk about using the CSS image rights for building out these links. So this is gonna be kind of tricky. First, I need to go to the U L tag. And by now I know you're all thinking Where's that link to that global CSS reset because of the strips? That list one more time I'm going to go crazy. But repetition is your friend. Strength repetition. So this time we're talking about the right now, have you l or the in order to list within that difficult right now, I'll go quickly here and just say list style type none. Box margin padding set to zero. Now here's where I know I need my cheat sheet for the actual numbers because I could have made the math simpler, but I didn't. I'm gonna talk to the list item gonna make a new CSS rule for right now. L I click. OK, height 65 with 2 95 margin. Bottom 14. Something to go to box with to 95 height 65 march on the bottom of 14 pixels. Click. OK. And now they're all boxes which get out of life, which are not showing their little dotted lines around them like they're supposed to, but figure that out later. Just imagine there's little dotted lines around my boxes. Maybe on the next one. Now, I'm gonna do the same thing for my a tag, which has very similar styling right now. A display block high, too. So Heights 65 with 2 95 but it doesn't need him. Need a margin on the bottom. I was gonna copy that Paste that into my CSS here, Marcus. Now my little boxes air back. How reassuring. So in the same way that we made a unique I d for each of the links for the loft and we used one image and we told her to swap back and forth within the window defined by the block level element. I'm gonna make a unique I d for these purchase tours, event and tasting room. But I'm gonna take that one image, the CSS image, right? And I'm going to reposition it through the four different windows, which we've defined here. So it's a new CSS rule. It's going to be a unique I. D. It's gonna be called purchase, and it's kind of a background image of this one big image called sprite dot J peg. In a case that's not clear. All eight images are all four links with each, with two states has built into one image I'm gonna hit. Choosing the 1st 1 is always the easiest because after saying no, repeat, I'm just going to say left and top and click OK, now I just have to select this a tag, go down to the A tag in my breadcrumb trail. I should say, Excuse me. Select the text. Go down to the A tag in my breadcrumb trail control click or right click set I D to purchase. And that whole big graphic is sitting there, but we're only seeing 1/8 of it. I'm gonna do this again for winery tours. My first selecting the type saying New CSS rule unique I d. I'm going to call it Tourist Now. I should remember to put a pound sign before the word tours because its a unique I d. But Dreamweaver we go way back, knows that I'm going to forget and says, You lazy bum, I'm just gonna do it for you So it says Pound tours. Once again, I'm going to say background browse. I'm gonna grab this thing called Sprite one more time, and I'm going to say no repeat, and I know that it's background position, his left, but its background position when this is kind of tricky. If I don't put in left, the browsers not go interpret this right, it's just going to It's going to get confused by the number I put here because that's the first number it's going to read. So I need a left here and I need a minus 80 year. So the the numbers are a little confusing, but what I'm really doing is I'm pulling this whole graphic up so that I am at the second, the second row and then click. OK, so you're rose or exactly 80 pixels high Your navigation rose. Um, the block is actually 65 pixels in the space. Between them is 15 65 and 15 is 80. So now if I grab the word winery tours, click on my attack Control click set I d two Tours. I love it when that works, because the first couple of times I didn't get the math right and some other image popped up in there so I could do this one more time with event calendar and these exercises designed to so that I could do this a couple of times. Probably the people watching at home are getting the benefit of seeming Do this over and over again. New CSS rule. This is a unique I. D. And it is called events. Click OK, the background images once again the same image called Sprite, about J. Peg. It is also told to not repeat. It's background position is left and background position is this time. Excuse me. Not minus 160 or I'm pulling it up to Rose. I'm going to click. OK, remember, this is a two step process. I defined the unique I d And now I apply the unique I d. Grabbing my a tag in the breadcrumb trail control set I d to evidence event calendar. And then just because I'm lazy on the last one, I'll grab the code that I already wrote for purchase. And this is what the CSS looks like. Notice. These are all pretty similar. The code is just hearing the numbers. Copy that. If I've been paste that into the CSS portion of my file Well, I guess if I were tidy, I would do it right after events. Perfect. Go back into design view. Grab tasting room control set I d to taste cool. I grabbed the wrong thing, didn't I? What did I just grab? Have to purchase again? If I were really smart, I could just change that to taste, right? Yep. And I could should change this toe. What? Kevin, Uh, let's see. 1 60 now at 80 plus 1 60 40 Even easier. The opposite of top bottom. His bottom taste to spelled wrong. If that matter. Thank you. It probably does. And you can use bottom because that's the last one in the graphic. Exactly. So now I can go over here to tasting room, grabbed the A tag and say, Control set I D to taste and tasting room appears Now Can you open up and show that entire graphic again? Absolutely. Let's go into the finder and let's go to quick view. So there's the entire graphic. So that's one big Photoshopped graphic you've got on the left side is your rollover eyes my regular status and on the right side is my rollover states right side is rollover state. And what you're doing is in the in the dibs where you have the Navid, the navigation. Each DIV shows a window and it shows a portion each list item each l I tag right, And it shows a portion of that graphic that we're looking at right now, depending on where you have positioned it by those numbers that you just told us to fill in, let me go back to my Photoshopped file. And if you could, uh, this is Ken and in the chat room. If you could also just explain again why it is that you're using that one graphic versus creating individual. We're using one image because it's less calls to the server when we have a Web page one of our goals. In addition, keeping her file size down is the actual number of images we use in our sight, so less images is better. There's no perfect number because every site is different. But Mawr images means more requests to the server, which means a slower page load time and means increased bandwidth costs. What's happening here, if you can imagine that I've made a little window here and let me Joe grab the column called Right Header Middle. There we go. Turn that down if I leave, have these two linked. What's happening is at any time the whole graphic is sliding back and forth inside that window and that if I move this layer the same thing, the same graphic is basically cashed. It's living in memory storage or living in the browsers cash, I should say, and that's sliding back and forth through that window slightly off there. But you get the idea. So now let's do the tricky part because we have to give them a rollover state. And in last week's exercise, we basically said knave, a colon hover, switched from top to bottom or left to right. But we can't do that with this because you can't just tell the whole thing to move over because you need to be more specific. It's not gonna work exactly the way you want to let me show you the syntax for the code that we're gonna try to right here. Here we go. Let me copy that. I'm risking. We're going to deconstruct one of these and keynote, so you can see it before Figure. Here we go. So what we need to say is there's the device named right now. It has an a colon hover state, which is then followed by the unique I. D. So we have four unique ideas. These are all going to vary purchase events, tasting and winery and so forth. And each of those are gonna have a unique background position. The 1st 1 of course, is easy. Right Top is the opposite of left top. But the next one here we have tours and events. Then being told to move over, move up or down 80 pixels or 160 pixels. But the key thing to remember the math you can figure out yourself because not just the background position. Property. The key thing to remember is this syntax diff name pseudo class a colon hover, followed by unique I d name. I was gonna hold that there for a minute, so people get the hang of it. We're jot that down. Excuse me. That needs a pound sign. And let's look at how I write one of those and then understand a copy and paste the others. I'll make a new CSS rule right now. A colon hover, pound purchase. Make sure you don't have any spaces like that. And that should have a background image position of not left. But in this case, right and top and click. OK, I'm not sure how much that's going to show up on the video with those of you in home. Concede that when I hover over that, it's turning the like peach color, and I just go ahead. Kevin is out of question. Yeah, How come you didn't have to tell it? What background image to use? It already knows which images there and all of doing class. Yeah, change the position of the image which is already there. So I'm going to copy these three others for tours, events and taste because they're all pretty much coated the exact same way. Go into code view. And I think people can see these g wedding. I just copy into here. Why did I go into keynote? That's so much easier to read. There we go right now at a colon, hover purchase tours, events and taste. You're telling it to change the position of the one image, which were referencing returning to design view. And before we go and test this in the browser, let's a Tallis eyes all of these by opening up our property inspector using the I. But in there not because we like a Tallix, but because we want to add an emphasis tag and then quickly writing a CSS rule for emphasis, saying new CSS style, saying Right now I m to display none. Sometimes dream ever gets a little confused. It's and you have to take out some of the stuff in the middle. All things which are emphasized in this difficult right now are going to get a display of none. We click OK, The HTML text goes away. We preview this in the browser. We've got two different types of rollovers on two different types of unknown ordered lists. So before I go into the J query, slideshow can answer any questions about what I did there. Yes, we do have some questions going back to the to the beginning of classes. Well, some folks throughout this have been asking about the wraparound on that on the top, and it Did you do that in photo shop? How is that? How sorry the drop shadow wrap around at the top. How did this part right here? Yes, so let's go to my finder for a minute. Let's close this and let's look at this file called My Images. This one Rapper b g dot jpeg This is in the furthest Give back there the outermost if called rapper, which comes before the container. If I opened it up in photo shop, that's all that's happening there. So I have a narrow slice of wood. I have these two tabs and I have a little bit of a drop shadow, and then I've got a whole lot of white Now this is a really big image. It's 1100 pixels by 1100 pixels. Approximately you don't It's only K You don't pay a punitive price in file size because of all that white, because there's not a whole lot of pixel variation. It would have been a lot bigger image if I had made it into a ping. So this is a handy little cheat. And then these, of course, line up perfectly. So they meet the header logo at the navigation banner that run across the sides. Great, thank you. And speaking of the header, Mito and Chat had asked about, Can you use a transparent ping with just the ribbons and no background so that it doesn't overlap with the other wood texture? Absolutely. If I were in my original Photoshopped file what it could have been, let's close this out. Let's get rid of that and let's get, uh, this won't be perfect, but do you get the idea of what you're talking about? Well, months that would take a little pixel surgery. I don't think there I don't think they're cut apart the way they want, but yes, you could. I could certainly make it in transparent pink, but it would have a much larger file size, and I'm already over 300 k on this page. So that's why I didn't take that route. OK, great. And just a quick question going back to last week from Rick in chat. What is the difference between in line and block? Uh, we'll block kind of sets out a layout space as a box and in line moves with your text in line moves with your document flow, and it's fairly elastic. Block level elements are told to behave like a box, and you can control the size of the box that their in where in line elements are limited by the line height or the paragraph that the rent or they part of the document flow that they're in. I think where's the block level element can be told to be a much bigger box. Okay, thanks. And let's see. Okay, I have a question from the chat room from Mimi. She's asking, Can you explain where using one piece of art rather than making the art into different buttons? Yes, but the reason we want to use CSS image rights and this is considered best practices is it's less calls to the server. Four different buttons with four images or even eight images means for requests with Syria for four different images, whereas one image sprite is considered much more efficient. Your page loads faster and you have less demand on your server, and you don't have dead links for rollovers right away. And they loads and they download once and then they're cashed for every subsequent page on the site. Ready, Teoh. Thank you. So we'll just we'll just go ahead and move on with our Q and A session app as usual after the Classic, because that gets us caught up to speed. So I've got to get a What I mean is, I think I needed out Well, my container needs a background color. What else were we moving ahead to? Jake Weary. Okay, to see her in my room. So this is where my slide show is going to go. I've created a div called slideshow. I've got some CS, it says Divi de slideshow, and I've got a little CSS for it right here that it needs to float left because that's how it's constructing the layout of my page. It has a width and height and some margin around it, so it fits nice into the position that it's in. The first thing that I need to do is linked to an external Jake weary library. So for those of you who are purchasing the pdf, let me go to my pdf for a minute. There's two links here. You can go to Jake weary dot com for further reading. Great resource is there. Today's particular files were downloaded from site called my Alsup dot com. It's called this Jake Recycle Plug in. Just take a look at that for a minute. There's lots of different effects that you can do here is You can see it all modified these in a minute. There's two ways First, you need to link to the main J Query Library. And the way this works is when J. Coury when they say right last doom. Or there's a whole lot of functionality, all written by developers, and these are downloadable, free or housed on the Web. The easiest way to link to this. If you don't want to store it on your own site, it's the link to Google's J Query Library. So by copying this one line of code while you can download it from jake weary dot com, and just put it in a folder called Js. And there's the whole J. Coury library, all the functionality. You don't touch that. That's just a series of functions, which you're referencing that you don't ever have to open that up or you can link to it on the Google site, there's also lots of other mirror sites. Once your sphere work is up on the Web, it will go to that external link. It will find the J coury functionality. So that's the core, the basis of how Jake reworks the basic engine that it's referencing you will. Then, probably as you build different projects, you will also need to put some Jake internally in your site, which will do the specific thing that you wanted to do. So the way this looks is I'm using something called Jake Weary dot cycled at all dot Js. That's a J query code that was written here that I got off on the Web as a free download. To make that function in the background, I'm referencing the Standard J Query Library, which I can either store in my sight in a folder called dot Js. More by referencing from Google if your page is going to get a lot of traffic. If you're building an enterprise level site, you probably want to reference to host. Urge a query elsewhere. So doesn't bog down your page load time. It just gonna run more smoothly if it's hosted externally. If you're building a small project and you want to tinker with it, a man's will host it locally. Either way, you just need to copy one of these two lines of code. And then, as there's a lot of free J creators, hundreds of free Jake, we re sources on the Web. If you look at my final file here, Dreamweaver does a really great job of referencing it in a tab system here the other files, which are pertinent. So here's the j quarrymen dot Js that Just look at the whole thing. You know, this just a little bit of code. Nothing. You can't figure out how to write between now and the time I finish my sentence. So you never touch this, right? This is this is this is fixed, actually know what you're doing? Thesis fixed so we don't mess with that. That's the J Query Library and It's been men ified and compressed, and it's not meant to be messed with. This is the psycho plug in, which is defining what's happening on our page now. If he knew what you were doing, you could modify this. This is Edit Herbal. This is only 600 lines of code 800 lines. 9 954 lines of code. It's not a big deal that's controlling the immediate functionality. So the Jake Weary Men is the back end the core functionality. This is the front end, the immediate functionality. All you really need to mess with to build this site is these five lines of code. So here's my link to the J Crew library, and we're actually in version 1.4 instead of 1.3 occasionally. If you haven't are outdated link, it might not work, but this one seems to be working just fine. Here is the external JavaScript file, which I downloaded. This is all you have to worry about today, So that's probably within the realm of most of our beginners. So that's what we're actually gonna edit Kevin. So one of those is out on a Google server and the other one you downloaded and put on your server in in a folder called Js. Exactly. Okay. And why is why is that 2nd 1 on your server? I'm just following the structure of the tutorial files that I down there. Okay, this is the one that the author wrote. This is the library that he based it on. And this is what he left for us to modify and play with. Okay, so this is kind of like for people like you and me, this is like playing with matches and were wearing like, oven mitts so we can't do any harm whatsoever. Excellent. And the rial developers play with this and the people who, like, live at the next level behind them. They build the stuff, they do this stuff. Okay, so let's look at the markup. We need to add a little mark up here into that deal, which I haven't done yet. Scrolling down toward that Div waas for image tags on the image tag itself. Closing all mine living a folder called I Am G Slide one night. Jpeg to doubt J peg three dot jpeg format jpeg. I remember the day of name is slideshow, and that is referenced up here. Pound slideshow. If you rename your div or you misspell this, it won't work. So let me copy those four images and put it in my def called slideshow command. See? Returned to my step one. Make sure in this Div go into code view, Dave. Rapper diff slideshow between the opening and closing div tags. I now have four images. Make sure my J queries referenced up here is Well, looks like I don't have that. So going back to my final grabbing my external link, my local link and my immediate link from opening script tag to closing script tag copying that, pacing that in the head of my document returning Now this is gonna be a little frustrating because I've just dropped four images into my page and they're just kind of hang down here like a really long shower curtain. So you really want to get the rest of your site built before adding this because now I can't see what's happening under there, But if I go into and view this in the browser, she might slide show works automatically. Now it's close. Let's just leave this here for a minute. Let's go back into dream. Were that's going to code view. You see here where it says cover. Let's change that to fade, Save it, return to the browser. Refresh that page. And what was the minute ago was a sliding slideshow is now an Alfa fade slideshow. Kevin, Is that too slow for you? Yes. Show me how to speed it up. There we go, returning to dream over speed 2500. This is milliseconds, or that's 2.5 seconds. Let's just make that 500 or half a second. Save that one more time. Return to the browser. Refresh that, and we should now have a much more rapid slide show. Going like that. Very cool. What's the time out? One, then? I don't know. Let's see. Since I can't remember this moment, let's just make that 500 as well. Refresh. That goes through all four. You know, I can't remember. I'm sure it has something, but it's documented in the place. So let's try Zoom instead. Well, of course, the speed is somewhat hampered by the recipients connection there. If they're not fast enough, have festive connection to go through those images like that, it's gonna be a little problematic. Don't they all get downloaded? Uh, before the slide show started Theory. They should all be downloaded before the slide show starts. So time out may relate toe one of those other options or something, but it's all explained in the documentation. You really zoom out and setting it 1/2 a second. It's a little a seizure inducing, but as you can see anything here on this page, any one of these different effects can be applied by changing one word. Yeah, easier than flash and a really easy way for you to integrate some animation to your page without really knowing a lot of JavaScript. Obviously, anybody wants to get into a little more. You could just go to Jake weary dot com, and, um, they have tons of articles for getting started and one of these on that side of the front pages. Jaqui for designers, which is a great way to start. So there's tons of J crew plug ins out there. There's lots of developers doing this work, giving it away for free, letting you download their source code coffee and paste it some are better than others. Some are easier to work with another's. Some do amazing things, but it's a great everybody seems to want a slice or some sort of interactivity on their page. Now it's kind of become de facto. This is a great way to you for you to add to your page without knowing a lot of code. So I'm gonna take my slideshow away for a minute on my final here because there's a bit of the now that we know how that works. I'm just gonna take those four images away so we could see the bottom of the page because it's really hard to work around them. Delete those and I never seem to get towards the bottom of the page on all these exercises. I never get to do the floater as part of the class exercise, so I wanted to go over these really quickly. My h to tag. Let's take Let's try to create that in at least one of these three columns going back to my step one. I just take with my my images here as well, going to design a zoo, noticed I have an H to tag here which just 100% organic commitment. H two tags are also really important, just like h one tags in terms of search engine optimization. And if this were on organic winery, that would be clearly very important. Anyone searching for wine and organic would want that to come up. So I try to have my age to tag and a prevalent place said I'm not actually gonna hide it. I'm not going to use any image replace when I'm just gonna use CSS to style it. This is to make the CEO people happy. So it's a new CSS rule. You know, just do. Since I have only one h to tag, I'll just do a Djetou click, OK? And I believe I had a background image I'm going to go to browse which waas brown Grady int dot jpeg Now I made mine 15 pixels across. You can see it because it doesn't really make sense to show you a one pixel graphic, but this only needs to be one pixel across. I'm gonna make sure that it repeats along the X axis and also going to go and toothy box level proper due to the type properties select Georgia and Color White. And then I said, Think it waas pixels and it's box level property. I'm just gonna guess maybe it was 60 pixels high and we'll also under type. We're going to go to line height to make sure it sits in the middle. And here's something kind of tricky. I want to add some letter spacing. I want to open up this, but you wouldn't don't find this anywhere under type. You need to go to block level properties and under letter spacing here. I'll just try to do to not EMS but pixels between each letter and click. OK, looks like I missed something here. Maybe it needs to float left. No reference. My final file. There's a lot of code for that age, too. Let's just copy everything. When I was a clear, both its clearing the float that came before it back into my code view Put everything on there. There we go. Forgot nice brown banner going across, and it's a nice separator from my pages Say that my image sprites and my J coury slice were stopping here, and now we're getting down to the business data of the page. As you can see, following the rules of semantic markup. These are actually three paragraph tags. Grab one of these and notice it has a unique I. D. Called first. I don't if you could see that in my breadcrumb trail, let's style that unique I d called first, making new CSS rule click. OK, I believe these were 300 pixels wide and they have a background image of the 1st 1 Should have field start J Peg. Let's just watch what happens when I do that I click. OK, Not exactly perfect. Looks like I got type superimposed over my image. I'm just gonna grab the rest of first over here, paste that into code view. So let's look with what's happening here. The background image is still there. I've now told us not repeat position on the left of the top. I've given it a float left a with I've been a margin left, which is gonna push it over. But I put 120 pixels of patting on the top that is larger than the height of the actual image. So my type it's not gonna begin below where the images and then I've styled my type give a little color and more space. Now it looks like that I'm gonna do something similar for second and third copying those pasting those returning to design view. So what's happening here is each paragraph avoided div ideas. What a lot of people tend to do is they will make some extra dips to wrap around these. I've only used the pure semantic markup of the paragraph tags. And I've told each paragraph to have a background image to push its type down with padding and then creates space in between each day, each paragraph tag with margin. And then I've styled my type in such a way because the 3rd 1 the Steve called and I didn't. And I give them unique ideas because this 3rd 1 with the quote get this is slightly bigger. I've given that a slightly different paragraph style. So there we are at 407 Once again, I have failed to build my footer, so I'm just gonna move that away. I'm gonna pause this for a moment, and then we are going to go into Q and a great thank you. Should be Yeah, random. Yeah,