Lessons

Lesson Info

Session 2: Q&A

Can you Do you have a question started? Work? Yes, we have lots of questions in the chat room. Cem detailed ones and lighter one. So, um, Robin had a question. When you're back talking about tracing what tracing mean the tracing image is only a tool and dreaming for you to help lay out your DIV structure. It's great for when you're beginning and probably should get more comfortable with CSS and using gives for layout, you're probably going use it that much. It doesn't publish. It doesn't go up to the server. It's not visible in the browser. It's only a guide future. Lay out your gifts great, and, uh, earlier in the class. If he was, Omar had a question about, um, Are there any limitations with CSS and fonts and font limitations were on the cusp of that changing. So the way I've been teaching Web design for the last five years is the world of Web safe fonts. There's only five months, and those are the only ones you're going to use. And it's Georgia Perdana aerial etcetera because these ...

are the fonts that are guaranteed to be on everyone's computer. You can specify this crazy font that you have on your computer. But if someone else doesn't have it, it's not going to appear that is all changing really rapidly with E at font Face command. And in Week five of this classroom learned how to embeds custom fonts into Web page to break out of the world of website fonts. Chris Yes, Janet in Goto Webinar has a question. How do you create that blue map in Photoshop that tells you what you're containers are? How do you create that later, huh? In my Photoshopped file. Is she talking about that top layer that you have that has the map of my div structure? Order All I did and he will zoom out for a minute and you know, we'll just turn it off. I make a new layer. You know, I don't know what I was thinking about what that background. It's really give me a sense of where to go now, on top of everything else on top of your layer stack, and you can pick any color you want. I'll just make it red this time for distinction. What people need to start doing a seeing gives an experience designer will look at a photo shop confit ago. Oh, dibs. The code code, code type type type. Done. We just say, Well, this is the header I draw with my marquee tool. And then I say at it, stroke, I'll make this a just a five picks online so you can see it better like that. And then just map out your complicated and just start to think. Well, I need to did here I needed If here are negative here and on unity of here, most pages 4567 lives is appropriate. Don't get a case of De Vitis A lot of people something. Well, thes dibs works so great, I'll just put a box around everything, and then they've got 100 def tax before they know it. That will bog down your page, load time and hamper your search results. Kenna? Yes? Uh, column. Baiano in the chat room would like to know if you could repeat the process for horizontal menus lists. Absolutely. Did go through that kind of quickly. You know, that was because it was kind of crowded at the bottom of page. What I'm going to do, I'm going to go straight into Dreamweaver. I'm gonna make a new document. And I'm just going to write the first thing because it's the first thing on my list. I'm going to go to format list on ordered list and I'm gonna write the second thing and the third thing and so on. Now it's a list. By going into split view, you can see that it there are Siris of you, l and L I tags. Which, if I've done these properly, this is just down the line. Looks like that I'm gonna take my list. I'm gonna make a new CSS rule for the compound based on my selection. Looks like dream. Every swelled remover misses it. Try that again by grabbing the UL first, making a new CSS rule That could be Since there's nothing else here, I can be less specific. UL tag. I'm going to say list style, type none and margin and patting zero click. OK, it is then the list item who I want to talk to. This is the crucial part by clicking on the l I tag and making a CSS rule. The key here is to go to block and display in line so all H melons could be told to display either as an in line element or a block level element by telling it to display in line, it swings up and over into the same line or on one line. In order to give it more space. I'm going to give it patting on the left of safe 30 pixels and click. OK, Bruce. So Melissa and Goto Webinar says, I thought floats don't get a height. Isn't that absolute? Positioning floats can be given the height. It is not quite the same. It's absolute positioning as we start building more complex projects. We will not give heights to most of our dibs because we want flexible or last two containers that can grow as you add more content to them. But it is OK to give your dip tax a height. Kinda. Yes, a couple folks and chat would like Teoh know how you, um, set the footer text to the right. Would you repeat that without includes Thanks. Let's go to my finished file here, where it actually is to the right. There's a couple of different ways you can do this. I would take this down to 66% so that we can see it in this case. I just took my My UL tag and lets you can see that my foot or you well has a float, right? I want to take that float off and you see by the default So the default is it adheres to the left. It's not necessarily floating to the left or giving a gravitational pull to the left by editing this and going to box and saying float right and clicking. OK, my list floats to the right. But if I wanted to minimise how much it flowed to the right, I could add a small amount of margin on that right side of, say, 40 pixels and then it bounces back a little bit. So the whole thing swings in a greater movement and then you find tune it with margin for more precise movement. This question Yeah, well, and Goto Webinar finds that there are inconsistencies between live you and what you see in the browser would wide Which do you choose and why, when you're designed, does he mean line height and what you see in the browser the live live you like Dreamweaver Thank you so much. Excuse me, Adobe. Thank you so much for putting live you in Dreamweaver CS four. When I first took it out of the box, I was thrilled. What a great idea. But like similar relationships would start out promising and then go sour. You've broken my trust too many times. Um, live you is good, but it's not great. When in doubt. Look at it in the browser and two schools of thought. Look at it in Firefox because if it works in Firefox, you're doing it right and look at it in I e. Because if it doesn't work and I eat, you have to start over. That's kind of a follow up question for that he has. Why not safari instead of Firefox? Well, Safari has a really tiny market share. And while safari is a very advanced browser which has a lot of of tomorrow's features built into it today, such as being a preview Web safe Ponsana uh, some of the things that happening with CSS three and html five somebody has like a 2 to 4% market share, so it's statistically, it's not very relevant. While it may look good on Safari on your Mac. Trust me, it's a freelance designer. Every most of my clients are looking at their side on a PC. So you set your F 12 button to Firefox I Firefox. Well, I have 12 I guess, is the Windows thing, isn't it? I know what you meant. Everyone should be using Firefox, period. Firefox is the best if interest in Web design use fire Fox. But you've got to keep a copy of IE Open because it's got a working I E. Chrome is a great browser operas. A great browser so far is a great browser, but they're not statistically relevant. And on that topic of E um, can you show that how you found that error? Explain the E six browser air back. How you did all that? How I found you. Didn't Dreamweaver, I believe so is But whoever has this great future here in the top right corner says check, browser compatibility. Let me cover over that with my mouse pose A and that hit the select that menu option and it reads my code. Actually, what it's doing is it's reading my CSS. Look, I got another one now. If they're mushrooming. Um, it's reading my CSS and anticipating what's gonna be a problem. Sometimes it's wrong. Sometimes it says, I think there's gonna be a problem here, but it doesn't turn out to be. But it says likelihood very likely. And also, let me tell you 90% of the time, it's going to find things in 96 because most of the other contemporary modern browsers are standards compliant browsers. The difference between IE six and the other browsers is I. E six interprets the box model differently than all the other browsers Dio and somebody and go toe webinar. I missed it. Did you fix something for I E six? I didn't actually, I didn't actually fix it. I exposed the problem, but I didn't fix it. That's actually let me interrupt one more time, and that's why I'm putting into my contracts now with my clients. If you wanted to work in IE six, it's going to take 20% more time and cost 20% more because you want me to fix this little thing. It's gonna take that much time. I have had a few questions. Eric in the chat room about centering the entire page. Ah, yes. How you I forgot to do that. So what's so the outermost container is the body tag? That's the biggest box, but we don't. But that one sort of universal or global the 1st that we really have control over its position is the container that first def tag that I made. If you look at my HTML document flow Co dio, the first thing you see after the body tag is this DIV called container By going to my CSS rule container. I go to its box level properties, and I said it's right and left margin to auto, meaning that it will automatically be centered in the browser, no matter what size your browser window is. And if I preview this in the browser now, you can get a better approximation of this. If I really hit command minus to zoom out to make that really small, you can see that even if I resize my browser window, it's always centered. So the default for Web pages to appear in the top left corner if you wished, override this such a containers margin right and left to auto Bruce, is it better to add a border to the top of the UL or versus using the old child pseudo class. Both are both will work with the word and in the chat room. Have the question a couple of times how to do Integrate the flash slideshow our animation into the Dreamweaver layout again, actually, even better. First, let's talk about how I inserted it. But talking about integration is different, so I'm gonna take this away. Insert media swift remover Flash play very nicely together, and all I had to do was navigate to my slideshow dot swift and hit shoes and put it in. But I want to cancel for a minute because I'm gonna go to my slideshow dot flaw. And if you look at my background object here and I go to my properties inspector, my go to color effect, you can see that I need to take the Alfa down by 80% to get them to match perfectly. Watch what happens going by. Before I did that, to see how that got to be a deeper blue, I'm going to generate a new swift file called slideshow dot swift, and this is my first attempt. I went into Dreamweaver, and I said Insert media, swift slideshow dot swift and hopefully this is the one that I just made. Yes, today is the 27th. Quick. Okay, And then I previewed that in the browser, you see how it doesn't fit. I'm not sure that's going to show up on the video for the folks out on the Internet. Can you see? That's a much deeper Blue? How it doesn't really integrate into my page because in the safe for Web dialog box, when I saved this background image because I took its file size down, it lost some color depth because of J pegs allowed lossy format. But because I brought the PSD file into flash, it's preserved at its full color. So there's a couple things to do. You could take down the J peg quality and flash, but I knew that with a little trial and error, I just kind of eyeballed it. I just went like this. I took its Alfa down, I think was 80% and this little I spent about five minutes on it. I don't know 67 attempts until I got it right. 73% 84% hit Commander Turn. I generated a new swift. I returned to the browser and I hit. Refresh. You see, I think I got a lot closer, but it's not quite perfect yet. Isn't there a risk and doing it that way that you're going to see differences between browsers? There is absolutely, which is why, what I probably would have done if I if I would have to have rethought this assignment. I would have made the sky white so that ah, or just some or maybe a flat color instead of a varied color so that I could blend them or seamlessly and actually did look a little bit. You know, it looked different in safari on my machine between safari in Firefox on my machine at home, and it was a little more noticeable on my laptop than it was on my I Mac. Yes, I have a couple questions in chat around. What is the best method for different body backgrounds on sub pages? Or can you make different backgrounds for different pages? A. Sui Jenna? As we start making different subsequent pages for this, most of my exercises here are about a single page as opposed to the entire site. But I did have a file here for a potential secondary page for our site knows If you go to Step four, let me just squeeze this down a little bit. You can see that I have a similar but not Let's just get rid of the instructor image. We can see the whole thing to see my mountains in my background, but there's no big headline like there was on page one. This headline about winter is here skills, So I saved another copy of that image. I put it into this Div called Middle, but as you can see, this Div called Middle on this page. If I go to its style, it has a background image of generic middle. So if I go to that image and so all subsequent pages would still have the mountain range but no headline. That's how we would develop our generic middle. And if I take that into photo shop, we're into the image folder and finding generic middle you can see that goes from a colored background to pure white at the bottom doesn't have to be white. It can be any color, but the idea being that in Dreamweaver. Now, if I choose to add more content, let's say this is a page which, with 20 paragraphs, the generic middle ultimately, if you have it, end with a color instead of a photograph taken, blend seamlessly with the bottom. And what we now have is an elastic container that can continue to stretch. So I have a plan. I just didn't get to that in my discussion. No, the question of the Internet. Yes, from the chat room. Uh, can you place HTML over a swift element? Also, is there a way to display a background image of the browser? Does not support Flash IPad IPhone. Yes, that's a little trickier and beyond the scope of this class, but you can. You can write a Java script Conditional message, which is called a browser sniffer, and they will see if it will determine if flashes not installed and it will display either a message to go get the latest flash player or just display J. Peg. But that's something that I have to google. I don't I don't commit that to memory. And what was the other question? Can you place html over Flash Dreamweaver has something called a stacking index where you can stack in the Z index and go into additional levels above the page. And theoretically, you could create a div and place it over your swift file. But I wouldn't recommend it. First question from you. Yeah, it does. Dream. We were have a spell checker, You know, uh, at it, bitch. I thought it did. I think it did. You know, I'd usually have my content check before I bring it in here. Let's go to help Dreamweaver help and just see if it has a do more can only spell check the document that is currently open in the dock in your document window. So it's in there somewhere. Commands check spelling. Somebody has said F seven Yes. Commands. Check spelling. There it is. Sure enough. More questions from the Internet. Yes, Zack has corrected me with regard to the background changes on sub pages. He was actually referring to the blue pattern background. Can you change that? Yes. Absolutely. So theoretically. So he means this one. Ah, a couple different ways. We can do that. I could certainly go to the body tag. And instead of pattern 1 26 dot gift. I could browse and go back to my original BG three dot j peg and change it like that. But he's talking about varying it from page to page what you would need because now would. Theoretically, if my site was 20 pages, this would change site wide. So what you would need to do is create a unique I. D. So Page one has. There is a unique idea that says pound page one and that has background graphic A. And then there's another unique I. D called pound page to that has background graphic be and then you could apply that unique I d to the body tag on either page. So the initial body tag, if you have a global CSS style sheet there applies to all pages, would affect them all. But you can override that with unique I DS Chris, this is a general design question from Julie and the Goto Webinar. Is it better to have ah, page that centered or to the left or is there and overall, I can only provide my opinion for you as a sort of way. I like to design pages. I like to have them centered. But I think ultimately the needs of the end user should determine. And the demographics and who's using the site should determine the layout of the page. I don't think I mean a pages. Usefulness or functionality is not improved or hindered by being left, aligned or centered aligned. But I just think as a designer you have more control if you make it center line. But if you believe in allowing users to have more control, you might want to stick with the default. You'll alienate less people by making it left aligned question from the chat room. Can you l l I Nablus be images or a section of a background image? Yes, all of the above. Great. And another question. What are the advantages of using Photoshopped Plus stream we were compared to? Was the Wake editors such a square space, etcetera? Well, I think you should really use photo shop and dream over because Adobe doesn't have enough money. And if you have disposable income, I can see no better cause. And for you to give them more money every months, those of you who are more thrifty or there's no reason to buy them. If you know how to use something like gimp, it's a free photo odor. If you know how to edit in a a text editor of any sort. By all means, all that really matters if you understand the principles of usability and accessibility. If you know how to write standards compliant code, you know what the W three C C standards are, and you understand how HTML and CSS work. Sure A was the wig editor makes it go a lot faster for us, but anybody who can get by without it go right ahead. Another question from chat. Do you normally keep the CSS on each HTML page or make it a separate file? Ultimately, let me let me go through that right now, So I've been defining it locally because we have We're only building one page, but theoretically, this is going to be a 20 page site once we're all done and just like in Ah, Lord of the Rings, one ring to control them all. You want one style shoot to control all your pages because the mixers updates much faster. Currently, it's in the head of the document because I was just building one document when you're ready. What I usually do is I build out page one. I get client approval. We make sure it works in the browser. We make sure our code validates. We get a series of sign offs that say correct, correct. Correct. Now we're ready to generate subsequent pages. This is when you can externalize this or making into an external style shoot by in the CSS Styles window. And you know what, folks? I'll do this twice, actually. Let me make sure I've saved my document. First, I'm gonna shift select the entire column of my styles and from this top right corner contextual menu move, CSS rules. Once I select that, I'm going to select a new style sheet. It could be an existing style sheet if you had one, but I'll say a new style shoot click. OK, we'll call this cascade that CSS in the Cascade folder cause you want this to be file and folder management compliant and click Save. Now it still appears in your CSS Styles window, but it's an external document, and there is nothing in the head of my document anymore, except a link to this style sheet. I can now generate subsequent pages page to page three. Contact out HTML about us that HTML and they're all controlled by this style sheet. And now when I go to nab a dot hover and edited instead of a teal background, a pink background, it changes site wide. Going to see me do that again? Sure. Make sure that the file of the HTML documents saved first shift. Selecting everything in the CSS styles window from the top right corner contextual menu selecting move CSS rules are. I guess that would be right. Click for the other 97% of you who do things that way. A new style shoot click OK, naming it in the right folder or the folder as it is relevant to your HTML document All your styles for the same and edit herbal, but they are no longer in the head of your document, and now I can generate subsequent pages, and they're all linked by one style sheets. Great we have here in the audience Eric with opening new files in Flash and in Dreamweaver, there's options of actions. Script three. Today you chose an APP action script. Wanna believe script, two for two for Flash and then for Dreamweaver. There's different layout options for the HTML files. Can you explain your your choices for you? Let's go to Dreamweaver File. New document. If I wanted to, I could go to an HTML template. If you're just getting If you're new to CSS, a lot of these are great way to learn. So here is a get a two column fixed right side burn. Here we go. So what? This is this is a template with a header, a left column, a main body section and a footer. All the CS year CSS here is already written for you and it works. You can modify it. For example, this is a div called Sidebar one. I could go to my CSS Styles panel. I could find Sidebar one and edit it and give it a background color. This is a good way to find out what's what. Sure enough, Light Blue tells me that that's it. This is a Div style called H one. You know that hasn't there. It is Head of H one. That's probably this one. That's header age one. I can edit that, and you can start to reverse engineer the page. This is a great way to gain practice and say, You know what? That site for your friend, that site for your family member, that was no paid job anyhow. What have you got to lose? It's a quickie site, Their standards compliant code. They're guaranteed to work in almost every browser. Unless you break them. They're a great way to get started. Ultimately, you know, there's a lot of different ones. Elastic pages are marked with this little sign. Fixed pages looked like that. There's a lot of sample layouts. You can change all their dimensions if you want to customize it for the way that you like. They're great with a great way to start the document. Type X html 1.0, transitional, Somebody has said. Well, why don't you just use strict Well, I don't really want to make you guys suffer that much. Transitional is much more forgiving. Strict has more rules. Stick with transitional for right now. Remember also writes, you can make your own external style sheet. You could write your own JavaScript, but for right now, just stick with HTML or HTML template for the most part sticking with plain old HTML. My I had a template selected, but a blank page will be plain old. HTML in flash. So here's the rule for action script 2.0, for the rest of you normal people. Laypeople, Non programmers use action script two point. Oh, because this it's within the realm of what you and I can learn Those of you Web developers out there. Well, you know, Action script three point. Oh, you're already making six figures a year, so you're probably not watching my show. You know you're doing justified. Basically, if you're writing actions, give three point. Oh, you've probably got a computer science background. It's a custom. It's a complex, object oriented programming language. However, going forward, if you are in the midst of a career change, you're not going to get a job Learning action script. Two point. Oh, so this is good for personal projects, artistic projects, things which may interest you building a website for your friend. But this is direction. You want to go and professionally learn Action Script 3.1 of the great things about Flash CS five, which is coming out. Was it next week. Now they have a great action script. 3.0 helper tool. It's called code snippets, which say, in plain English, Is this what you want to do? And you click? Yes. And then it writes the A s three for you. So that's a nice and manage coming out in CS five. But I've been trying to teach A S three for the last couple of years, and I am not qualified to teach you to be least of people that I'm trying to teach it to its over their heads. So it's a double losing proposition. Well, Eric, I think we've reached the end of our a lot of time. Okay? Appreciate your class. Let's give Eric another round of applause. Thank you.