Lessons

Lesson Info

Images for the Web

In this segment, we're gonna look at images because I know a lot of you are photographers and really interesting image is going to show you some more about inserting images in the dream. Weaver I'm gonna show you how easy it is to resize and cropped images and dream weaver, and then I'm going to show you why you probably shouldn't do it there take you in the photo shop, just briefly make sure you know that safer web dialogue and when you use different formats and all of that, and then we're going to get into html css that's, the hypertext markup language and cascading style sheets. So when you actually go toe bill your web page, put those images together in a layout, use html, which is a markup language to do the structure of the site and then use css cascading style sheets to add all the styles on top of it. But before I do all that, megan had a question at the break, and she actually said I might be able to save her life, and I just have to get her to repeat it, because while on my w...

ebsite, which is a word press theme, it came with a teal color attached to it, and I hate that color with a passion, why do you hate to feel so much? It was my high school's theme color and I just I want to move on I'm almost twenty six I'm just I'm ready to not have my high school all over my theme from avatar of the site and because it's my website my branding has to carry over to match in my web designer said that it's just going to be too hard to fix and he's may husband's best friends I'm not going to harass him too much and wow megan, I feel like we might have to take you on doctor phil with wei have to get over the high school trauma the wrong color and then your husband's friends your you know related to the web designer that's just all kinds of complications but really the real complication you have there and it's one of the things that's really misleading about wordpress so we're pressed seems really simple I often joke that even actors and politicians they can run their own wordpress vlogs like how hard can it be? But I'm gonna switch over for one second and just help you understand a little more about the difference between wordpress and dream weaver and why it's so hard to change that link color and wordpress and you'll see it's really easy injuring were so warren presses a dynamic site development environment and those pages air created on the fly and if you look at the source code behind this page, you'll see h two melon css but when you go into the back and this is the back and avoid press it's called the wordpress dashboard you'll see that it's really easy toe add a post in fact it almost looks like microsoft word I mean using wordpress to just post to your blawg is like creating a new word document super super simple but if you go into appearance and you actually go into editing the code that's in a wordpress site and you actually try to go in and change the themes even something simple like changing link colors you have to go into this really cryptic part of the program and things get really complicated really fast so I'm not even going to go very far with this if I can click on the right thing I'll show you how complicated that code can look there we go so this is some of the word press code and in dream weaver you're going to see code that looks like hae ra graphics but when you get into wordpress it's a whole nother scale because you've got php layered on html and you have css and you have multiple css files from lots of different people and it's just much more complicated so what confuses people is they see the basic how to add a new post how to edit a post inward press and they find out that anybody can do a wordpress block and they say that's so easy and it is once it's designed or if you find a theme you love, and you figure out how to set up a theme that all of that's pretty straightforward as soon as you want to start changing that design and your theme doesn't have features that let you do that if you actually have to go into the code to change link colors and things like that, it is so much harder and wordpress than dreamweaver that most people are surprised by that. So the crazy thing about these two programs is wordpress is really easy to update dreamweaver takes a little bit of learning just even create a basic page. But if you want to create your own designs and really get into checking out really cool layouts dream we was actually a lot easier to use than wordpress, and it has a lot of tools built in. So at the very end of this class, when we're off camera, I'm going to try and help you get rid of that teal color, because heaven forbid you be taunted by your high school on your block in your twenties. But I'm not going to try and do that here because it's so far beyond the scope of basics, but I want to come back and saying in when we get into the basic html in css and dreamweaver actually has some tools that I think make it easier to learn. Html css because of those tools, everything you learn and dream weaver will apply if you're trying to troubleshoot css ana wordpress block later and you're like, oh that's an idea style that's a class style that's what links tiles look like now I know that's what I hope you learned today, but first there's been a little time on images because what does a website without pictures? Right thumb to close out of this jump start site? And we're going to that site set up process again. So remember, we've set up three sites here. We got one that we downloaded off the web, we got one that's sitting on my hard drive that we set up and we had the sandbox. Everybody should create a sandbox and wordpress and hindering. We were just to play with it, but now we're going to set up a new site again, just for some quick experimentation and to show you some image tex so every time you start a new site that you've never worked on before, you want to go to site. New site before you even create your first page so new site remembers just two steps so I'm gonna call this big photos because this little sites all about big photos and I'm gonna go in here to my project files no, I think I'm gonna go into my chorus files you don't have to worry about this part. This is me stumbling around where is out there it is of a folder called big photos choose that. So what am I doing? I'm choosing the folder I already set up that just has a couple images in it that I'm going to use for my sight. So again, when you're setting up a site, you name it, you picked the folder that's going to have all the files and photos on your site, you save it and that's all you have to do in that same dialogue you can set up ftp and all of the things to publish your site. We looked a little bit of that right now we're just setting this up. We're not even worried about publishing this. You don't have to publish any site you can build sites on your local hard drive just for fun, so all this has is a folder with a couple of pictures in it, so I'm going to clues that backup just to keep things tidy and I would create a new page remember, there's, all this stuff in the new page die like, and we'll get into some of it all right, now I'm just going to create a blank html page with no layout. Simplest thing you could do were working an ex each team, no one point oh, transitional. There are multiple flavors of html. We'll get into that in a moment, but by default dreamweaver cia six uses this version. Don't be confused by the x it's still aged. Well, we're going to create that basic page so created blank page what's the first thing we do when we create a new page in dream weaver we we save entitle it good, I save it first, then I title it, but you could do the title first. That's not bad, megan so save if this were the first page of my website, what would I call it? Index! Thank you. So index dot html is the name we want to give the file that's the home page in our sight. So I'm just gonna say this as index as if it's my home page and I'm going to call this big photos really doesn't matter at this point. This is really just a quick image example for you, and I'm just going to work in design view this time so my cursor is in the top left corner one of the things that frustrates people right away and dream weaver is they're used to in design and photo shop where they can put things wherever they wanted on a page and during we were don't work that way you can't just say I want my photo to be here and draw box here and have it be there sorry if you've been using that fixed position absolute dave thing that was an older versions of dream we were I don't recommend it when I want to show you is how do you see assessed to create layout that work in more places? Here's the crazy thing about the web the coolest thing about the internet is also the biggest challenge of the internet it's the fact that you're designing a page that potentially go to everyone on the planet right? I have a nice little audience here who knows how many thousands of people are watching us live on the internet right now because this goes all over the world well, your website has to do that too, and that means it has to work on every computer screen on the planet and they're not all the same browsers aren't all the same monitors aren't all the same heck most people are using cell phones these days right? So the biggest challenge of web design and the biggest opportunity really kind of come pet on and a lot of the things that seem really restrictive and web design, the things that make people crazy, especially if they're used to designing for print, are really designed about trying to come up with a logical way to design pages that work in lots of different places in lots of different environments, so I won't go into all the details about that we won't be able to get in his advanced is creating responsive designs, although I recommend it. But as I lay this foundation, when you start to run into things like, why can't I just put that picture where I want it? I understand that some of that is about creating pages that work in lots of different environments, so dream weaver is going to start you in the top left hand corner of every new page until you have something else there that will help form at the page, but if we're just going to insert a picture, we just gotta insert image. And now here's kind of a cool thing if you have set up your site and then you've moved around your hard drive and you want to make sure you're in sight, route this button here site route and you'll find that in windows as well, we'll make sure. That what you're looking at is in that folder you've set up so it's just a quick way to get back to the root of your site. You see there's an image is folder in here, so I'm just going to select an image during liver doesn't have to copy it over because it's already in my route folder that's going to ask me for all text. Remember again, this is just a description of the image that's available if the picture is not shown it's also used by people who have visual limitations or are blind, and a lot of people surf the web with screen readers that actually read web pages to them if they can't see your pictures, this alternative tie x is read as a description, so you really just want to describe your picture concisely, so good looking guy jumping through the air would not be a bad description, but I'm just gonna put guy to keep it short and you see my beautiful, handsome man. So again, these photos by my friend jasper to haul his little photo credit down here at the bottom and because I'm on a resolution that's a little lower than I prefer to work with, but looks good on video, I'm gonna have to scroll around a little bit. Dream weaver is definitely designed like most of the things in the creative suite for somebody with a pretty big monitor in a pretty high resolution in video we lower that resolution so you can see things better on the screen that means I want to be sliding things around a little what I want to do is make this picture smaller now it's definitely the style to use really big images but I want to show you that you can just click and drag and make an image smaller and dreamweaver just like you would and photo shopper in design that is perfectly possible and I could hit the return key get another line maybe insert a couple more images now if you know a little bit about web design and you're already thinking that wasn't a good idea janine again I'm just putting all text re sizing images of dream weaver is really not good practice you right? I'm doing this for a reason I want you to see that as I do this a couple things were happening it's a little hard to tell on the screen but the image quality is really not what it could be what I do this because I'm scrunching all those pixels together right? And I'm also have another really big problem with doing this even though it seems so obvious again I'm just putting in kind of cheater all text I would take more time and thoughtfulness if I were doing this for real, but to save time, just re sizing these right so you can click and drag you can even crop, which is kind of cool, and sometimes I crop injuring we were just to get things even, and that could be handy. But here's, why I don't resize and dreamweaver, even though I just showed you how easy it is because it's, so intuitive to do that two reasons one of them's quality I can't even read this text anymore, even if I zoom in on it it's all kind of messed up because I've scrunched all those pixels together. But here's the other thing remember anybody who's looking at your web page has to download everything on your web page to their computer to see it? Well, the bigger that image is the longer it's going to take to download. So if I put an image that's three megabytes on the page when I shrink it down really small, so looks good on the website I'm making my user work really hard or wait a really long time to see something that they don't even get to appreciate. So because of quality, and because of that, this is a bad idea, even though it's so easy it's what most photographers want to do from the start, I'll just resize it. Oh, protect the quality of your images, don't do that let's, go get photo shop instead because photo shops a much better place to do these things. So again, photo shop csx because we're doing everything in cia six here, help me find photos shot there to see a six and, um, you can also do this and photoshopped elements in previous versions of photoshopped. One of the cool things about what I'm about to show you in how you prepare images for the web is that this works in the last several versions of photo shop and in the cheaper, much cheaper photoshopped elements, which is like the late version of russia, the name is slightly different in a couple, but the safer web, sometimes it's called safer web and devices dialogue is how you want to prepare your images for the wind. So have a couple of pictures that I purposely brought to show how you optimize images in photo shop before you insert them into a web page and it's all about having the best quality with the fastest download time that's the goal of this process so start by just opening some images that I have it here in my project files back in here again, a big images on if I can photoshopped images, okay? So we're going to play with the cool cats just a moment away from jump start you will see more beautiful bodies leaping in the air but we have to take a moment right now for the obligatory cat photo this's actually a picture of my cat that I took in my backyard and it looks a lot better if you zoom in and you can really see the squirrel so the first thing I'll tell you is if you want a crop in image, you might as well do that in photo shop before you even get into dreamweaver and one of the ways to deal with the fact that, um you want the best quality with the fastest although time is don't run an image any bigger than you need to so I don't mean all that tree in the winter it doesn't even look pretty right the bird feeders air kind of cluttered I'm just going to zoom in with the crop until some just straight cropping tool just double click to crop I can now get this tow actual size um in the image settings there is an image size yeah, I'll tell you more about that photo in a second but let's see look at no resolution is really important most of you when you got your nice big, high, beautiful resolution images are going to have something like three hundred in that field right that if you're going to print something for the wall like this, you want a really high resolution. Beautiful images and photographers are used to working with these giant, enormous super high resolution images, and the first thing you have to d'oh is open up the image size dialogue and lower that resolution. So if you have three hundred or two fifty or anything like that in the resolution field, you do not want to put that on the website. Why? Because although that works great in print and you need all those pixels toe have things look in print. Most computer monitors on ly shou saudi two pixels pretension. So even if I if I have a three hundred resolution in which and a seventy two resolution images side by side on the monitor, they're gonna look about the same because the monitor can't show me more than seventy two pixels bridge now the latest coolest monitors can go up to ninety six and those high resolution ultracool ipad aps don't even get me started the ipads revolution, but for the most part, we've historically used seventy two pixels per inch for image resolution. Some of us are going up to ninety six now, so if you want to do just a little higher. The first trick is toe unclip cree sample image when you're changing the resolution and then I'm going to change it to ninety six and then I'm gonna reek liquori sample image so that when I change the actual physical size of the image, I get that proportionate change okay, so just again to keep it simple when you're changing resolution on click re sample image, we'll just make the resolution change work better re click it again and then you can change the size so what's going to make this just a little smaller let's make it five hundred pixels wide now, of course been photoshopped you can change percent pixels, other settings, pixels or the size we tend to use and web divine when we're talking about measurements, those pixels click ok, so the first step crop the image any ok first step is and anybody who knows photo shop and I will quickly say, I'm not your photo shop teacher photo lisa will be here on friday for all your photo shop could need um, but you want to work at the highest resolution when you're editing your image, if you're fixing the color the light balance or I'm sure somebody could enhance this picture and make it look way cooler all that you want to do it the highest resolution wants to get that done crop it to the size you want once you get that done, then you lower the resolution. Then you go through the safer web dialog box, and the safer web dialogue is about file save for web again in some versions that will say for web and devices, but it's exactly the same dialogue with them. When I choose that I get this window now, yours may look different because you can have two up or four up these little tabs at the very top up here and that's about giving you a preview of the image as you optimize it, because what you're going to want to do here, and you can move it around with the little hand tools. So you get the part of the image that's most important into the center of the screen, and then I can actually set each of these to a different compression level or a different number of colors in the image. And this is about reducing the file size, so it'll download faster. But here's the trade off, the more I compressed this, the worse it's going to look. So you have to find the balance between download as fast as possible but still look good enough that I love my image right and that's hard for photographers because you want every little pixel in every little detail, and I know that, and I love you for that. And if you're designing for creative directors with a big site and you're not worried about people with old or low man with connections than put up those big images and don't worry about it but if you're designing for the broader internet, the smaller the file size, the better, the faster it'll tell me. So now the thing you have to decide is should save this as ah j peg a p and g a gift or something else right? These air image formats and photoshopped you might be used to working with dot p s d files for photoshopped documents or tiff files t f f which are really coffin for print, neither of those formats will work on the web they actually won't even dream weaver won't recognize them in general, they won't show up in browsers you have to save your images in j peg gif or p m g w bmp we're not going to worry about that we look at gift j peg png eight n p and g twenty four gift was the early option for what we call limited color images, so if it's a cartoon or a logo or something that only has a few colors than gift is a great choice since then the png format has come out some people call it ping by the way gifford jif anybody got an answer to that get for jeff do a survey online. Let me test something I ask everybody in the chat room is a gift for jeff. How would you pronounce it? I think it's just ok, I said give you, said jeff let's, see what the chapter inside that way come back in a few minutes, I'm going to find out what the vote is more or less png has actually replaced it. So it's kind of a mute question was kind of a fun question when I tell you why I know that that's a controversy, but here's the simple thing to remember if it's a photograph with millions of colors. It's, ajay, peg, if it's a limited color image it's going to be a png on ly is gifts. If you're worried about really old web browsers and even then really, really old web browsing, so if you're designing for an emerging country and you know that people have super old systems, maybe gifts or your safest option, the other place you see gifts today, jeffs, if you prefer, is animated so animated gifs have made a big comeback because of the problems with flash and because of the complexity of javascript, and you can use animated gifs and lots of places, but for the most part, you really only have to think about j peg or png so j peg for multi color images images with millions of colors png for leinart cartoons and I'll show you an example of that a second so we have a photograph here? What? What option should I choose? She got my hood I think she's smart enough to figure that out. All right, so I chose j pegged there, so now you can see I've got the first image selected and I've chosen j peg and over here is this quality slider and again on this monitor with this image you may not see it as well as you could, but the basic idea here that's it is that the lower this number the more compression is put on this picture and if I go way, way, way down, you start to see how blurry that tail gets and all the detail of this image goes away. If I go way up to one hundred percent, I'm gonna get a lot more detail but notice you see the file size here. So this is one hundred sixty eight k and all your photographers off they're going that's a small file size, not on the web, not on the web on the while we want to get a small as we can, so for an image like this, I might go down to like sixty two and look at that sixty k and I have an image that's going to download pretty fast and remember too if your page has five or six images it's a cumulative total of those images that were downloading so we want every one of those to be a smallest possible so the whole page comes down faster so you have to find that balance and if you're not sure you want to season pictures side by side, we could choose this one and, you know, take it really low and choose this one and said it really high and choose that one and sent in the middle and that's why it has this multi screen preview seeing compare them side by side I think sixty two you know good enough for a demo let's just see so once you get that setting, you really don't have to worry about the rest of this much you can spend as much time in photo shop is you have to spend those of you who know photo shop no that it is a very complicated program but all you really have to d'oh it's a multi color image choose j peg set the quality to something that's reasonable get that number down as low as you can and still like the picture quality and then she was safe and now I can save it wherever I want I'm going to call this ah siberia and the squirrel optimized just so I can distinguish it from the other one and I'm gonna say so that's saved in that folder I know it's there it's ready for me so let's open another image that's totally different and look at when you might use a p indy so this is the cool cats actually this illustration was done by my uncle tom mccain so this picture is limited colors leinart so when I go teo safer web which options? My pick p and g right on you guys are catching on now then people are like well, is it p and g eight or png twenty four and what's the difference? Well, again it has to do with the evolution of the internet and the evolution of browsers so png eight is a little better supported by more browsers and older rousers and png twenty four that's a little better at optimizing images and way better at transparency which is the other reason you might use png if you want a transparent color which I'll show you in a second you're gonna want png twenty four but we'll come back to that. This is just a little leinart image set on a white background I'm gonna put it on a white screen I don't need to worry about transparency I'm gonna choose png eight because it's the most universal and now instead of compression my option is to limit the number of colors so with jay pegs you compress it leinart in png files that you limit the number of colors and that limits the file size so two hundred fifty six colors is the maximum number of colors that's why for photographs with millions of colors we need to use jay pegs but this only has really a few colors in it right and you can see the little color palette down here so in this first one I want to say let's do all the colors it's thirty seven k again that seems really small but when you're doing little icons you want him to be too okay all right so let's see how low we can get this let's take the second one let's take it down tio that's those quality that must mean I have j peg still selected what png eight and then I see the number of color so let's take that one down to like thirty two colors still looks pretty good still have all the colors I need in that pallet to create this simple image and now I'm down to twenty one well what if I went all the way down the like two color slips again I need to choose png first let's go down to two colors do now you see that's not enough colors and that's what I mean about finding that balance so this alone really fast it's only eight k even though it's a pretty big image but I've lost all of the color and character of my cartoon by my uncle, so I'm going to think this was probably the right choice it's the in between looks good enough, but it's gonna load nice and fast so again, once you get those settings, though you want you save put that in here when I call it cool cat optimized just keep it straight again. I would have resized this if I wanted to and all those things in photo shop before I did that just doing this is a quick demo, so one more thing that we dio we'll just go ahead and close these, uh, and this is kind of cool when you do say for web notice those when you do say, for web photo shop stays, a copy that's optimized, it doesn't do anything to your original image, so if you haven't saved any of the other changes, then they won't be changed in that original image. You've saved a copy see if you have made some editing changes and things you want to preserve, you need to save it now, but I'm not going to say this because I haven't changed anything, so it's got close it don't say close that one don't have to worry about saving it, thank you very much oh, by the way cyber my cat climbed up trying to get that squirrel he was for about a second that close to the squirrel, and then they both went thing fell out of the tree, but literally they both panicked and fell in. The next frame is kind of funny so that the squirrel is fine if anybody's worried. Ok, so one more thing that we do a lot in web design is create graphics that have text in them that we do that less now, because we can use a lot of fonts that we couldn't use before it's cool thing about the latest of the web is web plants maybe a little too advanced for me to get to today, but we still sometimes save text in an image, especially that something like a logo a really unusual font are fits your logo, and you want to make sure that the font is really pristine and perfect. You're still going to be better off having that text in an image, not in text on the web page. For the most part, you want all the text on your web page to be text on will form out that css, but the logo or the banner? Sometimes we'll do that as an image, so let's, just call this cool cats, and I'm just going to make a new image just a simple new image um let's set this in pixels so I have a better reference for the way let's go ahead and make this six hundred pixels wide. Three sixty's a fun place to start and I'm gonna give it a transparent background because a lot of times we want something kind of float over the background, right click ok. And those little dots tell us that it's transparent of those little's that's great checker board. Yeah, I'm not the photo shop teacher um, cool cats. That will be lisa snider on friday teaching your photo shop she rocks well, let's just make it huge again. I'm not going to teach you a lot of photo shop here. I'm just going to show you some basic so I'm just gonna make this really big pick kind of a cool color. I don't know. Maybe a bluish color that looks kind of meat and let's use a fund that's not real common. I have no idea what sponsor on this computer because it's not mine let's see comic sans that's a good one, right? Uh oh, what we got here? Um anybody want to pick up? We could do a script that's not cool cats. All right, so that's a fund that probably wouldn't look real good even as a web fun because those curled edges don't always display as well that's the kind of example of where I would still probably do this as an image whether it's smoother, sharp is a little bit up to you but a lot of web designers will set it to smooth so you get a little smoother edge and now I can just crop this down remember we don't want it to be any bigger than we needed to be we could actually in a lot of people will crop right to the edge of an image like this and then put the spacing back using patting in margin settings in css but I'm going to go ahead and just leave the amount of room around this that I probably want and I don't have to worry about that you could go either way and we can crop it more when we get to dream weaver one of the few image editing things I do do entering we were sometimes it's just a little more cropping so cool, very simple image very easy to create something like that and now we go back to that safe rule have dialogue, but this time we have a transparent background and when you have transparency and you want to preserve transparency, you're always going to want the ping format you can do this and jeff but you get much better quality and paying and if you really wanted to look good you're going to pick paying twenty four notice how that one from pixelated to smooth look at that again if I zoom in here when I choose the ping aid see all those jagged edges along the side amazing back out that means she's paying twenty four look how much smoother that isthe so most of the latest browses the last few versions of the latest browsers support paying twenty four pretty well unless again you're designed for really really old browsers I would say this is a good choice now you're not going to have color settings you're not going to have options you might have it's like a slightly bigger file size but with this it's just text on a transparent background the thing is four k I think I can afford four k that's a reasonable size so I'm going to say that ok so that's really all you have to know about images for the web j peg or png and png twenty four is best for transparency right? So if I have a photograph with millions of colors like these am I gonna want j pecker ping jay ping and if I have a line art or a logo like this and like I watch a pecker ping paying you guys are paying attention all right? So let's go back over here and let's just get rid of that page we know we want to resize things and reliever we learned that lesson let's create a new page this kind of a sandbox so I'm not gonna worry about it and I'm gonna go ahead and just use one of these layouts again there are home to lay out here that are just about kind of giving you a head start so I'm still choosing blank page hmm oh I'm still in the new document dialogue just chose file new now I can scroll through and see these kind of preset layouts and one of the things that's kind of cool about these is they have things like centering already taken care of for you we'll show you how to do that yourself but let's just go ahead and create that so this is a page that's already set up a little bit on jumping ahead a little bit we're going to spend more time when css you shouldn't understand any of this yet don't worry um but over here you'll see they're much of styles that are already applied to this document these air the styles that go with us and one of them just kind of centers this page and then there's instructions built in which is kind of cool in these lay out there a lot of comments a lot of instructions I'm just going to delete those don't needem all I wanna do here's insert these so I made that first image the cool cats so I could just grab that what's wait a minute don't get too site route notice how that switched me to where I want to be and that's not where I want to be those photos are over here where I just saved them yes ok so in my photoshopped images folder where I say them are the images I just created and I've got a cool cat and cool cat optimized savory siberia optimized and I should have my cool cats ping so if that's the logo I'm just going to double click on it remember if you're copying an image or if you're inserting an image that's not already in your route folder dream weaver is going to offer to copy it for you it's kind of good that I did it this way click ok and now it says it's outside the roof older you want to save it? Yes not asked me where I want to save it I already have a folder called big images I could put it in there that's fine or I could create another folder called images to or whatever I want alternative text if you're putting in something that's got text in it it's pretty easy to think of the alternative text you probably want to put whatever text is there so that says cool cats I'm gonna put cool cats and you see now that that just goes right in there it's all set all I want to do right now is show you I set that on a transparent background right now, it's on a white background, so that doesn't really I mean lunch, but we can do things and again, I'll show you a lot more. This is going really fast, but I want to show you a little quick css in the page properties, you can change the background color, but what we really want to do is just change the color of this section of the page and that's controlled by a style over here. And if you're starting to go, what do you mean, it's controlled by a style over here? Don't worry, we're going to go through all of this step by step right now I'm just going to the background settings and I want to change this background color so you can see let's do something hideous like that and apply whoa green that's what I mean by transparency, right? So that transparent background disappears because we say that as a png with a transparent background so you can news transparency as a really cool trick we could, we could pick a nicer color, maybe not leave that on the screen oh, even I can't look at that for more than a few seconds, so jay pegs for millions of color images and photographs png for leinart and png twenty four for transparency and that's really all you need to know about optimizing images but that was a lot to cover without going to questions do I have any more image questions I haven't answered there are a lot of questions of all sorts someone didn't want to know if you would be talking about really cool was asking if you would be talking about web sites really cool I would love to talk to you about web funds I may be able to get a quick overview actually I will I'll give a really quick overview of what plans because I won't be able to go into that in detail and I won't be able to go into that in detail because you have to learn the basics of um css before doing something like what funds is going to make sense to you so I prepared anticipating this question a really quick little segment in my power point about webb wants and I'll just go through it real quick while you're asking this question and while we're thinking about should we do web funds or should we do fonts and graphics because absolutely mr cool mrs school middle school really cool really cool really cool using web funds is a really good idea your pages a load faster they're easier to update google can read the text there are lots of good reasons to embrace the fact that we can now use web plants but if I go really quickly through this all the beginners are going to be completely lost because what is this? Well, the first thing you have to know is there three rules to the atf ought face what right? I've already lost every beginner in the room so I'd love to teach you a lot about funds but when I want to show you it's just simply an advance tip and then beginners I promise I'll go back to the beginning the way web fonts work the first thing have to do is either have that fun on your web servers the same we have to upload images to your server when you insert him in a page if you use your own fonts, you'd have to upload those to the server as well or those funds have to be hosted on somebody else's server and you link to them from your site. So there a number of fronts services that you can use that worked that way then you create a style rule we're going to spend a lot of time looking at things like how you create an h one style rule and then you apply that style rule as you see here this headline is formatted with the h one tag the rule for the h one tag defines the name of that thought and this is the link to that fund on somebody else's server I hope that helps you really cool I know I've lost all my beginners the code for that might look something like this the name of the fund in your style has to match perfectly and here's the reason most people use flint services and maybe the thing that even the beginners can use right away each font that you get from a place like font squirrel which is one of the sites I'll show you if it's going to work on the web it's not just the ttf fun or the whatever fought for mac or windows all these different versions of fonts each fund that you use on a web page you have to have all these different versions and it gets back to that thing about every computer on the planet every operating system every version of every browser it takes all those different versions of fonts to work in all those different places and most of us I don't even understand what's enough to know like the difference between helvetica an aerial let alone all of this which is why most of us and don't try to do this in the code of ourselves this is what the code looks like most of us go to fought squirrel let them do it for us so you can actually use the font generator at font squirrel if you have the rights to the fund and it'll generate all those different versions for you once you've done that dream, weaver does have a web fund manager, and you can access that I'll show you in a second word, access that in dreamweaver, I'm going fast because this is an advanced tip and it's about giving you an idea. But when you use the web plant's manager than whatever web fronts you add get added to the list of fonts that are already available in dreaming, or you'll see that dialogue in a second. The easiest place to get funds is google web fronts. This is a place where they're hosted on google site, and you could just link two it copy and paste a little code that's the easiest way to do it, and you can follow the instructors instructions on that site. The most professional place to get fonts is adobe type kit. It has a limited version in the adobe edge web thoughts, but if you're a serious designer, if five thousand forints is not enough for you, then type kid is for you. This is a service that they charge for a tw the high end, you can use the low level of it for free, but if you want to have access to all their thoughts, you'll pay a monthly fee for it it's built into the creative cloud, so if you have the whole creative cloud suite you get a subscription to type kit with the cc version that is an awesome thing I think they've added that into cia six you have to double check, but if you're in creative colin, you get that and again, these air host influence that you can use on your site so that's the long way to tell you and here's the list of links to all those sites webb wants or a lot more complicated than most people realize and until you have the basic foundation of css that I'm going to go through in a moment, this wouldn't make a lot of sense to you're right, I'm guessing some of you just want, huh? I think it's time for you need to throw your study where I throw things I don't know if they weren't about that. Um it's cute how you keep that? Yeah, I told you last time I taught here I threw things that had kind of sharp edges and I almost put somebody's eye out, so so they got me a box of like really soft things too, and we're not letting you do that again. I didn't have chocolates related one more quick question thank you for answering that because definitely I know it's a lot more complicated than I'd certainly would have thought right bonds are okay so quick quick one from annette de from home beach in terms of text or black and white imagery, is it better to use vectors rather than pixel base imagery? Oh, another sophisticated question from blue m yes, yes, yes, I know. Ok, so vectors are great for designing and flash had vectors, which is one of the reasons I really like flash, but when you get to optimizing things in the safe for web dialogue, you're going to all go to the map. So design an illustrator. Get your curves just the way you want make it beautiful, but when you get down to the end and you're optimizing it for the web, you're going to end up with a bit mapped image j pigs and png files that's the ultimate. So do all the work with actors and you can resize it really well and then optimized for the web. There are some advanced exceptions to that I can't go into, um, there are some ways that people are trying to use factors on the web, but for the most part, at the end of the day, you're going to end up with that maps. Okay, so web fonts are great web plants of the future. They're not as complicated as I made that look, that really is what it's the real secret is knowing about these fronts sites and you will find pretty detailed instructions on all of those sites so I hope you got those girls I'm not sure if I put those in that hand out but I can make sure you get those a few missed him I actually tried to answer email so she didn't get those written down email me and I'll send you or back up the video and watch it again all right let's go back to dream weaver so that's that's really the crash course in images for the web I could spend days on images for the web but that's really all you need to know it does surprise a lot of people how much time you spend in photo shop and there is maybe one more file that I'll open up here just to show you because a lot of people um actually do all the layout for a website in photo shop and then move it over to to dream weaver when they're done and there's nothing wrong with that uh why is that I can't open a photoshopped file injury waiver that doesn't work okay one more thing and photo shop and then we'll spend the rest of the time and dreamweaver forgive me for stumbling around in this alive class aa and looking for a file called page layout top psd so some people ask me should you start in photo shop up or should you you okay? Um photoshopped, objecting to some of the settings in this image. What you see here is a very complicated, complete page layout, right? Uh, and it's not unusual in a lot of professional web design firms that there will be a front in person who does all the layout in the design and photo shop, and then a back and person who converts all that into html, css and maybe even php. And if it's a really big firm, there might be three different people doing those things, but just in terms of work flow, it's not wrong to do all this and photo shop where you're comfortable and then kind of take it apart and reconstructed and dreamweaver afterwards, that's a very common workflow, and I'll just show you a couple of quick tips if you're going to do that, this is a very complicated layout with multiple layers, but notice over here that those layers are grouped and folders, and this is a really nice way to do things, especially if you're working at a firm where you do the work and photo shop and then you hand it off to somebody else who's going to do the h two mo what you're gonna learn in the rest of this class, about how we often have headers and footers in our styles to break out the head or part of the page and the foot or part of the page there's a lot of logic to how we name things the content section of the site sidebar so the person who created this photoshopped file was smart enough to put all of the things that go in the side bar in the folder called sidebar and in the fighter there might even be multiple slider elements you know if you've got a slider that's interactive and has multiple pieces you might have a separate folder for each of those individual sliders and it's all one very complicated photoshopped file if you're new to photo shop that may look like great to you but as you get more advanced with photo shop or for those of you who do know photoshopped pretty well that level of organization when you're doing a complex layout like this could make it a lot easier to reconstruct injuring weaver. I'm not gonna spend a lot of time on that that gets more available but I just want to acknowledge that lots of people start in photo shop to all the layout and as a workflow that's actually a pretty common thing in the industry ok fact to dream weaver any last image questions all use images and the rest of this but any last image questions before we move on to html and css any in the audience great it's going, I I'm very happy to hear that and to clarify most of our loud jin livers, I would say what with with the good and guess, but I think that what we do with the creator and I did a little bit of research, but apparently bob berry, writer of of gift, says, it is shit so well, I love you guys for setting the record straight for doing that research all due respect of all, very I do say gift, but when I first started writing about the web, which not to date myself was the mid nineties, right, my first dream, weaver one point it was nineteen ninety six back then there was not a lot you could do on web design, but we were using gifts because that's all you had and I was writing for a publication that time called published magazine doesn't even exist anymore, and they did a survey on their audience. Do you say gifford jif and it came back fifty fifty, so I don't think anybody is wrong, but I say gif.