Skip to main content

Session 3: Q&A

Lesson 8 from: Adobe® Photoshop® to HTML

Erik Fadiman

Session 3: Q&A

Lesson 8 from: Adobe® Photoshop® to HTML

Erik Fadiman

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

8. Session 3: Q&A

Lesson Info

Session 3: Q&A

What would you do if you wanted the background image to be able to resize with the browser? Um, this big background image? There's a way that you could do that with JavaScript Jake weary. But that's also beyond the scope of this class. Okay, Harry. Oh, can you explain the difference between margin and padding? Absolutely. It's going to a new HTML document. Pile new. And let's just put in a paragraph of text. Look that Well, that's code. That's not what we want. Let's go back to that text document. Have to do this again. Let's get some lips, um, from lips, um dot org's all the fax lips, um, generator. And let's get some code command, See? And for God knows whatever reason, paste it into my text editor. Command the command, see, then paste it into Dreamweaver. This is a paragraph. We know that because my property inspector says it is a paragraph, and my co view says it is now wrapped in opening and closing P tags like that. Every HTM element is a box. You can't see the box, but it's a bo...

x. Let's restyle that paragraph tag by saying new CSS rule tag since it's the only thing on her page, we're just going to say all P tags are now have a box level property of 400 pixels wide so that we can see it. See the box yet? No, of course you don't because it looks like a paragraph, but let's modify that paragraph just a little bit. Let's hit the edit and let's give it a border, not just make a dotted line. You know, this is a great thing to remember when you're trying to debug your page. When you can't figure out where the problem is in CSS Rule number one, put a dotted red line around it. Then you can see where it is, and you can start to see if it's a float problem. If it's a margin problem, try to isolate the element like this. Say OK, that's where my boxes and my box doesn't fit because it has extra margin and patting her. Dreamweaver is putting an extra margin and patting. That's why it's signed up in the top corner. Let me first strip that down by sitting these 20 both margin and patting her zero. Now watch what happens to the top left corner of my screen as I hit the apply button. Oh, nothing. Well, it's because I didn't plan ahead because it's my body tag that needs to be stripped down Silly me body. If I strip my body tag and said they used to zero there you Now let's now let's give the box the paragraph. A background color of light pink orange sweater that looks like now let's increase the padding on one side. No, if you could just go away and you could just go away, all of you just leave my CSS window alone. Thank you. So I have only one panel to work with. Let's edit that P tag and let's go to box and let's just put some padding on the right. 20 pixel padding is making the box bigger, all right. 50 pixels of padding and 50 pixels of padding on the bottom as well is stretching my box out bigger. Now let's put a margin up on the top has put a 50 pics of margin on the top and a 50 pics of margin on the left, and it pushes the box over and down. Does that make sense? Margin is the force field that pushes elements away from each other. Patting makes the box bigger. Remember that my box still set at 400 pixels. But if you see my rulers here view rulers show and I draw some guides. Here it goes from to 58 or so Added, that has made my box bigger. Yes, a question from the chat room. Could you show again how you put the video video? Absolutely. You know, let's just do it on this page, right? Putting right before our paragraph. Both video and YouTube offer what we call embed code by going to video. Every time I hover over this, you can see a couple of icons appearing there. I'm gonna grab the embed code. I'm gonna coffee this command, See And remember, You can copy it straight into Dreamweaver, but I can't. I'm going to paste it into my text editor. I can't copy anything today. Let's try that one more time at it. A copy? No, really. It's really cool. Trust me. Yes. I don't know how to copy and paste, and I'm teaching web design. Trust me, it's really neat. Anyhow, embed this video copy the code below and paste it into your website. Um, command. See, it could have to click on it and that sometimes I go to the menu. Sometimes the keyboard shortcuts in copy and paste just feel like they don't work on the menu. Works better. There you go. There's all the code we need. Copy it one more time. I'm going to go back into Dreamweaver and right where I want it. Command V notices. Putting in an object tag, which has a height at a with it's got a bunch of rules like Allowfullscreen and a bunch of other stuff is basically saying this is a flash file and displayed like a flash videophile should be It looks like this. And then in the browser it looks like this and it goes like it's even cooler in person. Had that allowfullscreen it even looks like this. It goes over your HTML document. If you wanted to, then you hit escape and it goes away. Kevin, you have a question? Yes, I do. Um, can we look at the U l uh, now that we're working with earlier in the finished project or the earlier in the nascent project? Oh, in the finished project here. You're looking at my code here. Let's go to split for you. Because if I highlight that and want to split view, we can see them side by side. Okay, Now what I'm wondering is, Well, first of all, I want to check on something. Um, in the l I parts, your styling the height of each of those sections that contains the text. I told him to begin as a block level elements and giving them a specified height. What? But you can also style separately the UL so that you gave the u L ah, height that was 200 or something or whatever. So that whole thing would be a certain height, actually didn't give the u L A height, but you could. Okay, so that was my question when you when you added that thing at the last minute, the sale or whatever the flowers, I put a margin on the bottom of the well to add a force field to push the spring sale away. So the so before that point, the, uh the whole nev thing was just this tall as what? What was determining how tall it waas the U. L is in the last two container. It is the 40 pixel block level elements of the list items which are propping it open. Watch what happens if I were to collapse my list items now? L I If I were to collapse these 2 they start to shrink like that and my whole UL contracts as well. Okay, so that background image is Where is that? Is that in give called? Never let me undo that. Oh, let's so we want to see something really cool about Dreamweaver. You see this ul tag in my breadcrumb trail? I'm looking on the UL. I can control, click or right click and say Remove tag. When it didn't work, I was well, really know. It's really cool. We'll do with the old fashioned way on by deleting it like that. So this Div called knave just has one big background image and that is this is a great example. The spring sale is a foregone image which is in my html document flow. And that textured background is in my CSS okay as the background of the diff cult knave. OK, but But you could have said, uh the U. L is a certain height. Absolutely. In this case, you didn't need to or it was counterproductive. I could say Knave ul and let's edit that. Let's take the go to the boxes, Take the margin off the bottom and you see that the spring sale flies up. What he told the knave you well, to be a height of and then pushes down. How much is the same thing? It looks like it went a little too far because 500 was too much. Yes, is going past my foot or so Let's go for for 20. Close enough. You get the idea? Yes, I could have given the U L A height. I accomplish the same thing. But given you all hide or giving in a margin on the bottom, both tricks are valid. And you should be right. You might need to use either at some point. So you l, um, ul styles the whole big block ahead box that contains all the smaller elements styling the al I just, uh, styles the little sections. The list items. Yes, Sarah from the Internet? Yeah. Karen and Goto Webinar asks, Can you please explain again about the unique ID's on each button. Yes, let's go back. Except for a minute to before they existed. So here, this is texting me good to my right. A, um, I never a edit that, and we'll just, uh, could make it back to Georgia. And whatever the default Blue is something like that and no text transform upper case. So your links look like this, right? So the tendency would be to say, Well, I need to put a background image, but that that's basically you're links without without any CSS. They look like that. And I would say, Well, let's style those nah vase and let's give them a background image. The problem was saying, Let's just go to about dot jpeg and no repeat and position left and bottom is that every link would get in about. We come up with a unique I d for each one so that we can apply different background image to each one. So if I and not just the background image but the roll over on the roller images, well, yes. So if I go to background to take that away now, the purpose of creating unique idea said. I have nine links, nine images. Each of those nine images has a rollover state coming with it, and I'll just go ahead and make another one again. We do this by making unique I D. We'll just call this about, and each one will have the same pattern. But very with its image, I'll click OK, The new guy de for about, of course, has the image of about dot jpeg and now this is where we put its background. Repeat, No repeat. It's background positions to left and bottom. Now that is first defining it. We've written a CSS. We still need to apply the CSS by selecting the word about in our nab our going down to our breadcrumb trail, where the A tag is control clicking or right clicking on the tank and saying, Set I D to about and that makes it appear like that. And then just to refresh people's memories, I then italicized window properties the word about and then I made a style that said, all italic elements in the stiff called naff gets set to a display of none, and I would repeat for each of those can you do have a question. I do. If several more from the chat room Jim wants to know. Can the dims have rounded corners in CSS three and HTML five, which will be covering in our final week? Yes, they can. It doesn't work in every browser. It works out. I can set it thesis in taxes called Corner Radius, and it works in Firefox and Safari, and I can set that style, but an Internet Explorer? It's still gonna look like a rectangle. But I'll show you how to do rounded corners. In Week five. Will screen readers be able to read hidden text? Yes, that's the other reason I should have mentioned that screeners can still read that hidden text for accessibility. Yes, it's still very accessible. That's I should have mentioned that in the beginning. That's one of the main reasons we do it. So you want to keep the accessibility people happen, that you want to keep the CEO people happy and good luck. I just want to keep the designers happy, right? Kenna? Yes, from chat. Is there a place in Dreamweaver that will automatically generate the hover coating instead of having to know that term I think you can insert. I mean, there's the spry. Yeah, that's the spry menu. So if you were a lazy cheater like anyone in the room not that that's bad Not to put a value judgment on that. You could let dream of a write some JavaScript for you. That says, Insert rollover image or builds a navigation bar so you could integrate with fireworks nicely. And you could let Tom let's remove a record. JavaScript for you. It's considered, or you could alternately let's make a new document. You could say Insert, And this is not really a lazy cheater thing. This is just using a What's out there. Spry menu bar. Let's say you had a You need to have a complex menu will make a drop down menu like this. If I added a spry menu bar and I said live, you see how that has some built in rule over states for me? I think about 10 years ago Del on their computers was using a lot of gray and blue. So if you like that sort of like corporate business look, this is really handy. But if you're has the rollovers ready and done with. If you're willing to get in there and and modify the CSS, you could change those colors. So this meets your needs. That's fine, but it's fairly limited. So that's the one way to get the dream was already done for you. But really, if you want to make pages, you need to learn CSS. Don't rely on either these techniques unless it's just a quick job that needs to get done. And it's It's about data, not about design, sir. So Market and Goto webinar asks in the in the div. On the right, you were able to make the block change color on a roll over, and it was type only. But in the never in the narrative, you did it with additional Photoshopped files to make the color change. Would you not be able to do the same technique you did on the right on the left? You could do both ways. The reason I did it both ways is the showcase, one with images and one without okay. And so, But as as images you, can you change the block color? Or would that even? Would that even work? Because when would the block color be underneath the in a sense, If I still had my Photoshopped file, I could probably set this to a blend mode of multiply. And then now it's not really above, you know, they've been blended together, so I could I could make my type of different color if I needed to. You're only limited by your imagination in photo shop. Whatever you can build in photo shop, whatever differences or similarities you want between the over and the regular states, you can build it in photo shop if you have the time. Yes, and Dan in Chat would like a tasking if you don't go over how those navigation rollover states were actually activated, the ones that I built or the ones in the spry menu bar. Good question. Probably. I'm guessing the ones that you built. Okay, so the ones that I built the whole syntax of nab a colon hover. This is recognized standard. All browsers work the same way. That basically says, Since I've defined a block level element when I preview this in the browser, any time my cursor gets anywhere near any one of these 40 pixel tall rectangles, it's going to say, Ah ha! I understand in this whole, because it's a block level element. This whole thing is a clickable area as opposed to this earlier version. You see that here only my type is changing, but it's still the minute I get within that block level element. It automatically the cursor turns to the hand, and CSS says, I'm going to display something different. Great and dances. Yes, that was what he was asking of. Excellent. Sure. Now, I'm not sure I could point understand this question, but I wanted to try to ask it, um, regarding the the knave background images and the code that Dreamweaver generates. Can it can it automatically? Right Background, short code, background, Short code? You mean background shorthand? Well, there's a short code. Maybe this has something to do with Dreamweaver. I've heard that term used in in things like Dreamweaver where you get Never mind. I would drop of questions. Excellent. Next question. Yeah. Sorry. Dan just said another note with regard to his last question. And he said, I mean, how does you How do you make the hover over version show via code show via code? He wants to see what the CSS looks like? I think so. Yeah, absolutely. Thanks. Going back to Dreamweaver. So this is a finished one? Yes. Going into code view in my particular documents that have been building almost, he assesses in the head of the document. So here's a great example of what the unique ideas look like. They're basically saying of a background image which is specified here, No repeat and it's positioned on the left in the bottom. And then someone here, my nab a colon hover. Looks like this background position top. So all images which were positioned on the bottom, are now positioned on the top. Whenever someone hovers over the block level element that has been defined here, display block actually, let me pull up. I should point out that the people who have purchased the class are also getting the, um I have all this in Apia in a pdf where all the code is in the pdf about image replacement for the H one tag for the H two tags. Here's all the code restyling the links, what the links look like in there. Double decker state the code for the block of elements for both L. I and A tags creating the unique I d, repeating it for features. And then this three step process of selecting the link right clicking in the big breadcrumb trail, setting I D and repeating as many times as needed and also pointing out where the M tags are and creating the rollover state drafting people find very helpful. And how many different kinds of rollover states can you do? There's there's active and hover, and there's also visited. There's actually there's taking. There's four states to CSS and in Dreamweaver for the simplicity of a class. I usually just do regular and hover. But when we make a new document here, these are called pseudo classes and CSS and I make a new CSS rule, my type a colon. And then I go to this little drop down menu. Here. Nothing happens. It's really need normally because it's a class and not a tag bear with me for him, And I guess I could have just said Link hover active and visited. Um, now it won't do it for me. Of course. There they are, a colon link. A Cohen visited a colon hover and a colon active are the four regular states of a link. And actually, the question that I got was how many states should you prepare? And I think pretty much the answer to that is how how many of those do you want? It's a design decision. Well, a colon link is the regular links style that's the on state, and a colon hover from a usability respective. At the very least, you need a hover states, so the bare minimum you need is to a colon visited. If you have a complex site and you find that you like on here, let's go to Craigslist because Craigslist is the to look at what the Web looked like 15 years ago. Everything is done. There's so much money that it don't matter. So this is from a usability perspective, and I wish Bruce were here today. From the bare minimum, you need tohave blue links. Everybody knows this and they turn. They have a rollover state that's a colon hover if we go to Jesus. I haven't been here in a few years. There are so many of these U S cities. Okay, um, if I go to Seattle and then I go back. It's turned purple. So in a complex data based site, you should have a visited links of people know that they visited. Most people who I talked to her in the forties and fifties say that they find this really helpful. You know, you mean in our forties and fifties who can't remember things like that? People I know who are in their 40 centuries and I talk about usability, I query people about how they use their weapon, their habits. Most older people I find say they find this really helpful and most of my students were 20 to 25. I don't need that. I know what I've clicked on already. Well, that can. That can be true in some of the simpler looking at that right there. Clearly for this, if the more complex or data is, the more likely you are. You two need a visited site. If your if your site only has five links and you want to make a design decision to not include a visited ST I never really have five links. I probably know what I've clicked on, right, and and also just the fact that it's a knave. Bharat something. It doesn't necessarily matter if you visited each section. Usually it's like a list of links that it's more helpful with a supposed to just navigation, just three. And then the other one is now a active, which is the active state, which displays which page you're on, which will learn how to do next week. Kevin the one, um, it's trickier. I was just going to say that from a design standpoint, the problem that I always run into is having to pick another color that'll work with my design if I want to, um, a visited ST and also the fact that a lot of people don't even know what that means, and so they don't know why. It's another color, and they don't understand the whole concept of visited and well, that comes over time, though I mean, they start recognizing the pattern, you know? Why is that a different color? And then they go, Oh, wait a minute. I've looked at that one, and so they start learning. Yep, that's true. But just finding another color, it works with the design and kind of makes sense could be a burden. That's where you just go to color lovers and find a color palette someone's already built. So I have some. I have some clarification from that question that I withdrew earlier. Um, and Ron says that he meant shorthand, like instead of writing background, image, whatever color, background color, whatever. Image, background color, whatever. Color, background position. If you could just write background and then stack color you, Earl and no repeat all next to each other. With that one tag, I think driver could be told to do that in its preferences. Okay. All right, Dana? Yes. In chat. Wolf Melon would like to know if you could quickly display the dib structure. Are those three column gives inside another div container. You know, one thing that's really need if we go to Firefox and if we go Teoh, close that out and go to the page, which is live online. Go, Teoh. There we go. If we view it in the browser groups. Wrong one. That was two weeks ago. Um, lofts. Step five dot html with a Web Dev toolbar installed. Outline block level elements. You sort of see where each block level element is. And each one of those dibs I actually don't have these in another Div. Another way to look at it is in my step one. No, I destroyed step one, didn't I? Um let's make this a little smaller. Not bigger, but smaller. There we go, So everything's in a container and you can see my container by putting a border on it, which is going to be dotted and medium and red. But that's really the only. There is no diff containing the rest of these, just through floats and marginal position to the three in the middle. Because if you look at my code view, if I go to container, you could see that it then goes header, and then, knave, there's no inner container to wrap everything else. The question kind of yes, pepper fly and chat would like to know if you could explain block and in line elements. Yeah, that's tricky. Most elements in HTML are block level elements, except for the ones which are in line and many elements. But not all of them could be told to display as block or in line by setting its style and CSS, so generally block level elements are your standard building blocks Div. Tags are block level elements. Paragraphs, headers, links are all block level elements, except for when they're told to display in line. That's gonna be tricky. I'm trying to think myself, but I think I'm a little bit too wiped out. Yeah, I can't find the language. It's just too. I'll try to look that up to find the language, to describe that better gaining familiarity and working with those just sort of takes time. Okay, another couple questions. I'm for a chat. Is there a way to put notes inside the code view? And then Robin, I think similarly, Can you show code commenting? Those were really the same thing. If I go into code view, best practices, if someone else was going to work on the site after me is, I would comment out my code. That's action script. Sorry by saying insert comment. There we go in an HTML code. It's bracket, exclamation point slash, slash and I would write Container begins here and then, theoretically, we would put a comment before every Div if we're really doing best practices. Um, I'm a little lazier than that, but commenting it's very, very important, especially if you expect anyone else. And actually, that includes your future self. Yes. To understand what's going on with your code. If you're really smart, you'd be doing this as you code. What I have more likely to do is the last minute before I finish it and hand it off to someone. I had those comments, but I'm human. And then I think you can add design notes somewhere, but I don't remember where they are. Um, I will have to go to the help section and go to Dreamweaver, Help and say I know that somewhere you can put in, like project notes. Um, do design notes. Look, they're giving us CS five help already. What is dreamweaver designed note? Um oh, it's for check in. Check out. That's it? Yeah, I think I think Aren't those additional files that get saved in your website in through dreamweaver that other people can refer to if I make a new site? Yes. So they're not html. They're not actually technically part of the website that they live in the website for developed the multiple developers flight to communicate with Yes, you can add design notes when you do us when you set up a site under site management. You can enable add design notes so that if anybody is working on the files, you can leave messages like, you know, the CSS has written this way for this reason, or vice versa, or use this template to to make this kind of page. Yeah, yeah, and Robin said in Jet says, it's also a way to turn parts of code on and off. Or is she talking about something else? Couldn't answer that? Actually, that that could be I know that you can change out comment. Yes. Common weal in Dreamweaver you can. You can change it so that at designed time you can. You can lock out certain style sheets so that, like if you have a style sheet, this is cut partly how our site works. You have parts that are hidden. If you click on a button, it expands the table or even download your videos. But that's not very helpful. If you're trying Teoh, add the stuff that goes inside the table because it's hidden and you can't see it unless you kill the style sheet so that you're looking at a much more basic down version. stripped down layout so they then you can add the content with tables, separation of presentation and content. Right question from our Seattle audience. So you have your style. She in the header even say that you have it in the header, but you want to export it and have it as a separate file. Can you show me how you link that file? Absolutely so copy. And I've been defining everything the head of my document because these air only one page long and you were also talking earlier about you get almost all the way done. And then your client says we want to add another link to the NAB are what I like to do is, say, build the first page of the multi page site and say so. We have some kind of agreement, right? We have some Sign off. You agree on this before I start using this to generate subsequent pages, I need you to sign off on this one. Fingers crossed. Let's just assume they agree on that, and there's no further changes ever, the optimist stirs snickering in the room. What I would do then is shift select in my CSS styles window. I would shift, select all the styles, go to the top right corner contextual menu of the CSS Styles window and same move. CSS rules and I would select a new style sheet. I would click OK, and I would call this lofts, not CSS and hit Save. All those styles are still available. Nothing's changed, but they're now externalized instead of internalized. And of course, I can now start generating subsequent pages. And if you look and see how dreamer has a sort of sub tab system, it's all right there as a separate document. And my source code says, Look, I'm linking to this external style sheet and gosh, you guys now are probably so good at CSS. You're not even gonna use that dreaming for was the wig window a new longer? You're going to go and just start editing. And Cody, right? The can is not in her head. Can't wait. Yes, a couple more questions from chat. Both Minto So and Borislav wanted to know if you could just go back and explain what the M tag is and what is it for? And what's the difference between versus span? They're accomplishing the same thing for our purposes in code. You. That's my CSS now, isn't it? There we go. In my links. Here's my M tags. I m about close em. What I've really done is this is the new italic tag. In the ugly days of 1999 Back when we used font tags, we would do it like this. Yes, that takes me back. Look it, it would still work. It's still italicize is. But if I went validate current document, it will say something about that's deprecate ID or its long Did it work? It didn't work Well, it should. It shouldn't show all issues. Try that. You know, just later it should. Don't use the I tag. It's not 1999 anymore. Used the M tag for emphasis because screen readers understand it better. And miss the new I m. Is the new I strong is the new bold. How strong is the new B? But I'm cheating here. This is a hack. This is a creative work around. This is beating the system. I'm using this m tag around all my links so that I can say all M tags in the stiff called knave or pound of em are such a display? None so that I can hide my ugly blue links and only show my block level elements with graphics in the background. Absolutely. I think we're ready. Question. One more question will give you one question there. Have a good one. I want, um, let's say this was actually question that kind of specific, But then somebody else second did it. So I will ask it. Ah, Nick says, say the client one wanted that spring special banner to be wider than the nab our Is that a new div Or can you do something with dream ways Weaver wizardry to keep the back in the background from widening? Um, this is the client nightmare that we try to avoid. I could basically build anything in HTML. I've at this point, the client says, we want something impossible. I can do it. I know a certain amount of tricks at a certain point, when the impossible is asked for, you start to throw the rules of semantic markup and best practices out the window and you say, Well, what's the best way I could do this? In this case, it would probably be an ap div, which you heard me say last week only for cheaters and scoundrels. But then I would say, You know what? This is not my problem. I'm just gonna use an A p d. Have to give them what they want, because it might be easier than trying to explain. Well, you can't do that because my pages laid out in such in such a way. Or you could try to negotiate and say, That's a great suggestion. But what if we did? In my way, I think All right, great. All right, well, that should do it for today and will be what we learned in next week. Um O J. J Corey Slideshow Integrating everybody. Susan, Jake Worry. These days, it's the cool thing to do. It's a cool thing to do is find out how to do it next week s and will also do some more. We're doing some CSS image replacement come. And the sprites on steroids that we talked about one big sprite instead of many small sprites. Yes. All right, well, thank you very much. Air. Welcome. My pleasure. Okay,

Class Materials

bonus material with purchase

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

Ratings and Reviews

a Creativelive Student
 

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

a Creativelive Student
 

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

Student Work

RELATED ARTICLES

RELATED ARTICLES