Lessons

Lesson Info

Session 1: Q&A

Okay. Welcome back. I have the drummer file open. We're ready for Q and a. Yes. Um, I have a couple of questions here. Is it possible to lower the tracing the capacity of that tracing image after it has been placed? Or rather, can you show that again? Because absolutely. On that. You know what I'm gonna do here for a minute? I'm going to go to my div called Middle. I'm going to get out of live, you table. Do it. I don't want to mess up my middle. I'll just mess up my header. I go to the diff cold hitter, and I'm just going to delete the background image. So not just a big, empty white space. I'm going to reinsert the tracing image by going to modify page properties. Let's say your client has made you May or your creative directors have you make some edits? I'll go back to that tracing image and now just given opacity of 60%. Oh, already move my pages to the center to the center. But I think you understand what I'm first. Yes. If I now went back to container and took off that auto margi...

n, you could see that the tracing images and you can see that I wasn't quite perfect. I was off by a slight bit on the positioning of my links, but I couldn't goes down if I needed to. And, UM, you you place it in there and it doesn't have any effect on the HTML that it generates right. It just basically is invisible. It doesn't go up to the browser. It's one line of code. You will get an HTML error if you try to validate it. But once you're done with, theoretically, once you're done with it, before you publish, you delete that line. The code that it generates is right here. Body tracing source equals. And if I zoom in on that, that's what it looks like. Tracing source equals image, but that's only they're doing while you're working. Once you go live, you delete that, and now I'll put my head a graphic back in because that's giving me a sense of double vision. Here we go. Good as new. Okay, we have someone who wants to know where to place the cursor every time you added Devyn the code. That's a great question. Going to code view and look at the last day of you made So I know that my def called knave has to live inside my def called header. So after the opening header tive and before the closing header tive so always just sort of. I mean, every day of situation is going to be different. But always if it's if you're if you're nesting a div. Excuse me. If your nesting one Dave inside of another div, you want to put it between the opening and closing gift tags? If you want something after a give which came before it you wanted after its closing def tag, Can you explain again about float? And And some people were a little confused about floating to the left to move something to the right and that sort of thing. Yes, I can. Floats and CSS are tricky and he sometimes need to be flexible. And not everything is gonna float the way that you want things to let me go to keynote briefly and try to show you how this works. I'm gonna make a diagram on the board real quickly. We'll just pretend this is my board. We'll make a new slide every day is a box, right? Begins like this could be the first day of if you have many days, which need to be floated. If there is a second Div and 1/3 Div. And let's change their color here, that one's red and that one's gold. If I apply afloat to the 1st 1 the blue one. If I say float left that is going to exert a gravitational pull and pull the red one like this and the yellow one like this and a sense you are pulling along a string of subsequent dibs or boxes or containers. Everything that comes after in the HTML document flow is gonna have that float applied to it. Alternately, If I had a float that said Float right, this woman would go here, this one would go here and this one would go here. So that's that's the basic overlay of how floats work. They could be problematic. What? You probably end up doing us in adding some margin tree gate space on something. Or if you had a larger container that rock around all of these on, let's give this Ah, no, Phil. The reason we have a container which wraps around all these is If your container were only this big, you can break afloat. If there's no room for the yellow one, it won't try to go up into the space because it can't fit. It will end up right here. That makes sense. A lot more will go much deeper into floats in substance in the next four weeks, as we build more complex layouts. Can you show again one more time? How to center how you centered that whole layout? It's a great thing that I that I unscented so that now I can re center it. Remember, we built this first if called container because that is the container, which holds everything else. That's the main box. If we want that centered in the browser, I will go to Container in my CSS styles. I will hit the pencil icon to edit it. If I go to its box level properties de select, same for all and tell it to have a margin of auto on the right and auto on the left, meaning no matter how big your monitor is, you got a 30 in cinema display. It's always gonna be centered or an automatic margin that now centers it like that. And I should make that tracing image go away. So is not to give anyone a sense of vertigo. Actually, let me preview that in the browser just to give a better understanding of that. Let me zoom way out so that I can resize my browser window and it's always centered. Okay, so, um, I had a question from Goto Goto Webinar. Can you create a drop down menu in the same fashion that you created today's menu? Uh, yes and no. Theoretically, a really good drop down menu is nothing but CSS and on ordered lists and actually something called a nested list where there's a A list inside of a list. If you're really good CSS ninja, you can hand code a drop down menu using just CSS. Most of us, however, prefer to use a little bit of javascript alongside with CSS to make it work across all browsers. But better yet, if you want to use a drop down menu in Dreamweaver, you should use one of the spry widgets, which live right here, spry on and spry menu bar, which I here let me just make a new document so you can see where I'm going by making a spry drop down menu and you can choose horizontal or vertical. So making a drop down menu is more complicated. It isn't quite so easy is what I did today. But using a spry widget makes it easier If you want to go the harder route Google pure CSS drop down or if you want to go the easier out, give it to somebody else to dio Kevin uh, take a look at your last class, right? The dreams, my love. My last year we built dropped on menus with, Ah, spry. So by it. Um, And if you don't find a place to buy it, you can email training at creative tex dot com because we're going through some changes on our website right now. Yes, just a quick question. You you auto margins right and left. Can you oughta margin up and down or No, no, you can't let me cancel on this because we don't need it anymore. If I actually wanted to move this whole thing down, I can't or I cannot centered in the browser window. Maybe through Java script. He could, but not through CSS. If I wanted to move the whole container down, I could give it a margin on the top margin. Auto margin, top and bottom won't work, but I could say 100 pixels on the top and start to have some control over it. Right? But it can't get it floating in the center, so that's just too tricky. It's outside of my school rage. Okay, Now, I'm sure there's a web developer out there who does a way to do it, but I'm sure, uh, you're gonna grown about this one. But typically, the designers I've worked with wouldn't want all those knave buttons to be the same with they would change with with the amount of text that Aaron Um, correct. Is that just impossible within an ordered list or No, it's totally, totally doable. And actually set up this file to keep it really simple. There's a reason those were all 100 pixels wide there. Six of them. Eric just doesn't like to do math. Yeah, but you can still use it on our list you could use in order to last. Any of these only toe have different wits. You can assign a unique I d teach navigational element. So each one gets each ally and the A tag will get a unique I. D. That says this one's 120 in this 1 110 Okay. And then you'd have ah, would you have to have unique, um, J pegs for the evening's apex for each one. And I'm gonna be doing that in later. Okay, Cool. Later, class. Thanks. Are there any advantages of using Photoshopped versus fireworks to create the layout? What's fireworks? Okay, it's this program have heard of every now and then is that never, actually. Is that the yellow icon with the F w on it? Eric, there there's fireworks. It's a great tool. There was no reason you couldn't do any of this. And fireworks. I grow less and less familiar with it with each passing year so that the class is called Photoshopped ate. You could use any image enter to do what we did today. Got it. Pixel Mater, 59 bucks later. Okay, this is the free somebody asked earlier. So, um, where in the menus did you find the option to make the list and an ordered list. That is a great question. So what you do is you start here yet type, and you say format list on ordered list and that's format list a Norden list. Excellent. And I have a comment here from Goto Webinar and I don't under sort of a question. Uh, I'm not sure what it refers to. Maybe you do. Please do the white bottom points on the nab bar again. The white body, The rollover state. Yes, my nab a colon hover the little triangle notch one. We go into the code first and see what that looks like. Let's see if we can. So what you all need to start doing is being able to read CSS. I don't expect you to be able to write it or type it by hand, but you should be able to read this and understand that never a colon hover means every time I hover over a link in this knave bar show this background image image Naby g d j Peg. I don't need to repeat and make my text this color. Let's delete that and rebuild it going back into design view. Oops, not like that, but I think that and like that, making a new CSS rule it helps to grab one of these links in the beginning to sort of have dream of right half of it for you. New CSS rule container header knave u l l I A what? Less specific, less specific knave. U l l I A what? How about now? A. A colon hover hoops almost. And a V a colon hover would be the proper syntax. I'll zoom in on that for a minute. Pound nab space A colon hover. That's the CSS rule. Click OK, since I've defined the block level properties for the A tag already have already drawn this window by saying Make it a box this big. All I need to do now is say, I want a background image, which is naff BG dot jpeg and I should have said no repeat. But it's OK and I also changed my type color Something like that. Now, when I go to live you every time I hope her hover over and a tag a tag says, Hey, I'm a block level element. I'm 100 pixels wide, pixels tall and when you put a cursor over me. I show you a little background graphic, which is actually the same size 100 by 57. But the only difference between the other, the background behind it is it has a notch taken out of it. Do that. Answer the question, Sarah. Probably so Okay, question her The frank. We hand him the microphone. So can you just not do that with a graphic? Can you just do the change the color of the background and have it stay? So you know, like so if you clicked on the services to make it a state? Yes, Not quite in the time that we have, but yes, you can. It is very simple. What? And I just I don't do I do half your request. Let's keep the type white. And let's just make the background color something like that. Not sampling, right. Well, well, just make the back on color something like that. And no background image and no, no. Repeat, click. OK, now you mean something like this? There is one. We would make a unique I d called current, So when we get it, if I built this out to be many pages on the services page would make a unique I. D. Called current, which says, Back all our block, I feel like this and I'll do that on a subsequent exercise. So it's it's it's a couple lines of code. The question right here is the notch. Graphic transparent. It is sentence. Let me show it to you in the finder, which I think would help clarify it. It looks like it's actually, it's got a quick view. It looks like that it's all white, but you could have done a transparent. You could have made it any color, but I think that it is. It's basically it's 100 pixels by 57. It's a box. It fills the whole space are the questions from the Internet. So question from the chat room was there. What was the reason that the margins spacing didn't work and we had to use panning instead, which didn't work. That's I didn't explore it any further. You know what happens when when you use when you use floats, when you use margin and patterns to push things around, you get, you need to develop a really broad repertoire of like I tried this. It didn't work. I have to try another solution. And even worse, you try to make things work across different browsers and you learn the ins and outs of every situation is something I'm still learning. I think it's a growing field that every situation is different. With a little digging, I probably could have found a work around. It's kind of like a There's a bit of a house of cards effect every time you had margins or padding or float to something. It has a ripple effect that might affect another part of your page. Um, and we had another question. Could you use percentage for the different? Yes, yes. HTML Response to percentages. Just fine. Percentages, pixels, percentages, pixels. Absolutely. Do you recommend you working with a P Dips? No, I do not. Uh, as I said earlier, AP gives or only for liars, cheaters and scoundrels or when you really need them, they come in handy occasionally as a last resort. Use AP dibs do not depend on them because they don't display consistently across browsers. You can get unpredictable results on Lee. Use them as a last ditch effort when all else fails, and also you'll get you become, you become much stronger. It's a designer. If you learn floats, margin and patting and don't rely on a pdf's because they're too easy there or crutch. And also it's harder to do. Flexible layouts with him are usually impossible, almost impossible to a flexible layout. Well, that's pretty much David GERD Thes days. Yes, well said, Thank you, Ted, to Do you have any questions, say, but that, uh, you can ask us from the chat room. Um, see, is there any advantage just adding text as part of your original background image? You mean, I think they mean this part right here? Strategy? There's no only because the client wanted a certain phone. This was a built on a real world exercise that I did for a client. They wanted that font there. Um, it easily could have been done with. I could turn that into an H to tag and NH three tag and made this paragraphs and made them into HTML text. If I needed to. This was only to show the difference between foreground and background. So no real advantage unless you want a certain look. Okay, Well, I think unless we have other questions from Kevin's here. The room always have to get the last question. Um, now. But that that was a big J peg there with that. Had the hand? No. Are you swapping in a giant J pick the one jacket with the whole big background. Yes. So every one of those three that air swapping out random are 4 29 by 800 pixels. And they had strategy, innovation, execution of the yes, they all had strategy, innovation. That's not really what you do in the real world, right? Because that's a big hit. You know, I got this whole thing under 100 k No. Okay, well, what size would you recommend for file size? What? I mean, the average the average file size for most Web pages now is over 300 k Really? Yes. My goodness. Not like the old days since the old days. I'm routinely seeing what pages? Because the web deaf toolbar has a little I think that says you can calculate the total file size. I'm routinely seeing pages at six and 700 k And what about pixel size pixel dimensions? 9 60 is the new bottom. Now Yeah, that's that's what I've read. 9 60 is the new 800 to 800. Exactly. There's no reason you can't go 9 60 in terms of your with and what's the height? Well, there's a lot of debate in the usability community I've got I can point you toe one study that says 80% of users will scroll beneath the fold or go below 700 pixels in order. See stuff and I confined to another usability study that says a much smaller number will. I think it depends a lot on your content and your service that you're offering. If it's, you know, if your offering Ah, creative writing class, but a creative let creative writing service on your website. People are gonna scroll in reading a short story, but if they're if you're trying to sell something, you probably want to keep, it is concise and compact. The reason I use this file it's a starter is this client actually wanted everything to fit to fit within 600 by which is really good for our course already great usability studies that if you're going to make user school scroll, have really good content on the bottom of the page if it just filler and garbage who wasted their time, but also something that leads the eye. That leads you to believe there's something because that's one thing to watch out for is that a lot of times people will build Web pages that it looks like it's complete and you see no reason to scroll. So you have to have indicators that there's more information going on. Yes, something to lead you down there. Have you looked at this in the browser? Get that normal size again. Nothing would lead you to believe that it's any bigger than that. That's right. You think that we're done. But if I had something staggered, that would lead my downwards. All right. Well, thank you, Eric, for another class. My pleasure class. See you all next week.