Lessons

Lesson Info

Publishing to the Web

But I want to give you a little more meat to go with all that basic stuff, right? So we're using one of the css layouts that came with dreamweaver it's nice handy way to get started you don't have to know all the css yourself. They're also pretty regular, rigorously tested in different browsers, so you can be reasonably confident that if you start with one of these layouts, you'll get a consistent display across different browsers again. We're designing for desktop computers on lee we're not getting advanced enough to worry about response of design and mobile those of you who know about flexible layouts, you're right, but that's a more advanced class s so using this fixed with layout, we've changed the background color. We've put a banner in the headline we've brought in some text from word using paste special when we come from word remember any time you're pasting content from a source that has formatting choosing pay special and using text with structure or text only will save you in...

advertently bringing in styles or other code that can complicate things and during labor, so that could be a very important thing, especially when you're pasting from microsoft word you want to over avoid word crowd at all cost, so what I want to do now is insert a little picture into this tax dodgers going to insert the profile photo that goes with this bios, a nice little photo of my friend jasper fantastic photographer who gave me permission to use all his photos here in the class and jasper's photo comes in as almost everything and dreamweaver right in that top left hand place and probably not where you want it this layer, right? Usually in something like this, you're going to want that image to be aligned and have the text wrap up around it. So no, if you're used to photo shop or especially for used to something like in designer word, you're looking for text, rap or how to align, and you're not going to find anything like that that's all about css so css is not just about stiles cascading style sheets aren't just about creating headlines for aren't just about creating styles for headlines and other elements there also for positioning elements on the page, and in this case, we're going to use something called floats and float that image to the right, which is going essentially align it to the right and that'll bring all the text up around next to it. So if you're using one of the dream we were layouts, you have the advantage that almost all of them include ah float right and afloat left style, and I'll just deconstruct real quick what these do if you double click on the style and notice that that's kind of an abbreviation f l t r t for float right in the nfl f l t e l f t I think for float left it doesn't really matter. You could write out, float left or float right if you were doing them yourself. Just be aware that if you ever change the name of a style, you have to change it in the mail code that corresponds. So what these two styles do is create styles you can use to align things to the right and left by using the float option in the box settings and putting a little bit of margin on the left. If you think about that when you line some to the right usually want a little bit of space on the left, that text doesn't bump right up against it. Similarly, if I look at that float left style, I'm going to see again in the box settings that it's floated to the left and there's just a little bit of space on the right that's all that's in the styles so you could create your own style. You could call it photo right or photo left. You could change this too ten pixels instead of eight if that's not enough all of these things are optional. Once you start to cease house css works, you see that it's, almost infinitely flexible because those are class styles and I know their class styles because they begin with a dot I can use them anywhere on the page and it can use them as often as I like and I can assume that I'll be able to find them in the property inspector because once they're created and dreamweaver they become available in the property inspector the property inspector is this thing down here at the bottom of the screen remember if I select text it shows me the text formatting options if I click on an image it shows me the image options and over here it has a class drop down and in that I will find all of the class styles that are in the style she associated with this page on one of them says float left and one of them says float right so if I choose flow right I'm going to apply that sile to this image so we saw earlier that you can apply styles to a dip tag you can also supply apply styles to an image tack so if I just want a line that to the right I just click on foot right and I align it to the right and it goes over the right cool now the next question people ask me they were always surprised how complicated it is is what if I want to catch it on that what if I want to put his name under that can I just put some text right here? No, sorry, nothing so simple and web design it seems like you could just draw boxer helmet and put a picture on it kind of but not the way you might imagine, so we're back to dip tax write each smell tags called def tags make boxes so if what we want to do is put a caption that stays with that image, the first thing going to do is put a box around it create a style that makes that box the size of the image has room for the text under the image. Well, let me just show you some of the select the image and I'm gonna insert a tiff tag again. You can do that from the insert menu by choosing layout option def tag or if you have the insert panel over here set toe layout or common I like to have it on lay out when I'm working with css the first option is inserted attacks so what they was selected? I can choose inserted tag on bacon wrapped a diff tag around this image. Now I could create a style at the same time, but first I just needed to wrap a deft hang around the image now it looks like it might have selected some text at the same time we're going to fix that in a second but first let's create a style for it no, we had a float right in a float left style already created because we used one of these layoffs that has a bunch of styles but now we need to create a new style that's specific to aligning this image judge and that does just what I want for this image and this again is an example of how you can create class styles to do anything you want in a layout and how he will probably create a lot of styles in your layouts for the things that are specific to how you're laying things out. So down here at the very bottom I can create a new css ruled by clicking on this little icon with a plus sign dream weaver is giving me a little assist it says oh you've selected something that's already styled float right and it's in a paragraph tag and it's in a dip tag with content and container right these are all the things that surround that image the cascade of css are all of these styles that are already applied to it they can say well, thanks a lot dream weaver but in this case I don't want to create a compound style don't create one new simple class style that I'm only going to use in this instance so money of up here I'm gonna choose class the dreamers go say ok let's get rid of all that so don't be confused if you go to create a style and there's already stuff in there, you can just delete it, or you can choose the option you want and start doing it, and now I'm going to create a style called photo box right now again, I could call us anything I want, but I find it helpful, especially at the beginning, if you name your styles in ways that make sense to you as your site gets more complicated, you might want to get even more specific or come up with a naming convention you use across her sight, especially if you're working with a team but photo box right again, if I wanted to, I could call it george no spaces or special characters except hyphens or dashes click ok, and again, we see assess role definition. I log again. So what do we want to do with this style? Well, the first thing I want to do is align that picture to the right now we've got a float right on it, but I want the box to be around it in the whole thing on the right, so I'm actually going to put a float in the box, I'm gonna do multiple things with this one style, I'm also gonna make the style the wit of the picture so that the box goes just around the picture. And how am I going to do that well the picture happens to be selected which is kind of handy so I can see down here in the property is inspector it's one hundred forty four pixels wide cool so if I want to make the box exactly the same it could make one hundred forty four pixels wide and now when I said if you line something to the right and text is going to wrap around the left your private one a little space on the left I'm actually going to put ten pixels of space on the left click ok now that doesn't immediately apply to the did that it was just there by itself I know need to apply that style to the do so I go down to the class and I looked for where's my new style there it is photo box right remember this is all of the class styles applied to this associated with this page but the new one I created has been added and what I choose that it will automatically get applied now what happened a couple of problems here right and this is really common when you first start doing this this is not what I wanted that first paragraph got selected and I didn't mean for it to well that's pretty easy to fix I can just take this exit out of here I'm just going to control access command ex come up here paste it back in here so I'm putting my paragraph back where it was taking it out of that div. Now I'm gonna add a return after the image and here's a trick select the image used arrow key to go the right of the image and then hit return and what's going on, this is kind of screwing up here. Well, I've got an image, a line to the right in a box, a line to the right. I don't want both of those things I want one or the other, and this is a common mistake if you've got something already aligned to the right and then you put something online to the right, you get these kind of weird repercussions, so the first thing I want to do is to take off the float right from the image because I don't want to duplicate it, so there are a couple ways to do that, but remember, whatever you select on the page, the styles are going to show up down here, so here is my image tag with that float, right class style applied to it thinks you know what I don't really want that I want to set the class, I gotta see amounts, you can see it, I want to set the class to none, you don't remove the tag that would take the whole image away. I just want to remove the class that's associated with the image none really soon back out what that does is removed the alignment from that image no, it should fit perfectly in that box but it's given me trouble again what we see in the code to make sure I put that in the right place I have a p tag uh and this is where sometimes these layouts can make it more complicated when you're first getting started remember I said there were all these resets and hear that somebody else created for me one of her recesses for the paragraph tag the way she likes to lay things out she puts patting on paragraph tags I don't really prefer to do it that way I would set these all to zero and then redefine these specifically as I go, but they're two ways to fix it. One of them is I could say you know what? I could leave that on the heading tags but not the paragraph tags removed that paragraph tag and that's going to go away that was a little advanced forgive me or I could have just taken the p tag out from around it because if I'm using margins and patting around it, I don't need the paragraph tag to force the space so the other option would have been to select the image and actually remove the tag the paragraph tag itself and now it's gonna be tight into that box so long way to go a short distance we've got an image in a data tag now when I select the image use the right arrow and then hit return my cursor goes underneath the image now I put that paragraph back around the image now you can put jasper now again if I say well actually that's more space and then then I want to get some extra paragraph tags I can get rid of again if I get rid of that paragraph taggart alas actually tighten everything up a little more extra p tags are really a common thing and during were so watching down here for extra paragraph ted and getting rid of them if you want things tighter and adding them back in if you want to space it out but remember you can also add patting and other options so I have a style here that I created that is float box right and right now it aligns this is everything in the box to the right it puts a little margin on the left so this text doesn't run right into it and it has a whip that's the same as the image but I could add other elements to this I could add things like a border around this I could put a little then solid maybe a one pixel black border around it just to set it off from everything when I apply it immediately shows up there well, you might say well, what that border there no, I kind of want everything set off a little bit and this is to reinforce margins versus patting so margins ad space to the outside padding and space to the inside so watch if I put five pixels of padding and apply it puts just a little bit of padding inside so margin is what puts the space between the diff tag the box and the text patting is what put stuff inside and you could actually create very elaborate picture frames just by playing around with margins patting quarter colors the background colors okay so that's that's acceptable? We could also maybe make that text a little smaller and again I could create a style for text I could apply a heading text tag to that text or I could keep it all in the same style I could be more efficient by just saying everything and photo box right is going to be set so maybe I want this to be a little different font maybe I wanted to be a little bit smaller there are number of ways to do sizes and and css and that could be a little confusing um I'm going to make this point eight why in the world when I used the size they could have pixels points, inches suddenly there's all these different options and there's our relative size and I told you I was keeping it simple and doing things and text size is aa lot of people use pixels and that would be perfectly fine you could also set this to be maybe twelve pixels and size and you'll see what size that is fourteen pixels you know what size that is if used adams the size will be based on the letter m in the front you're using it gives you a relative size based on the font and as you get more advanced that's an advanced hip ends a really good but to start with pixels or a fine way to start a lot of people still expects so you see how you can do text formatting you khun dio alignment you can create borders all that stuff in the styles it also say like you know I want that text center and under the picture we can put that in the same style so let's go back here and let's find centering now centering seems like such a simple thing but not in css almost nothing is simple in css until you learn the basic rules and starts to make sense so one of the basic rules if you want to send her things within a div tag, you'll find the settings for that in the block settings and there you'll see text align center who so again lots of options and the css rule definition not a lot that you're going to use all the time but you can combine them in one style or you can create multiple different styles and apply them if you want to center things within a day of tag and if I if I you'll see you want to use the block setting textile line center if you want to align elements like dave tags you're going to use floats for right and left and if you want to center the entire layout on the page well let me show you if I prove you this I think rome will now work let's test it there we go noticed that this entire layout is centered you see that gray background in the back shows out and the container has centered everything in the middle I might want some more space in here we can do that with pat ings and patting in margins on these elements we want to do some other refinements but how did we get this div tagged this container centered on the page is actually kind of a complicated style so let's look at centering centering within a day of tag is text aligned centering but centering of an actual def tag like that one we want to see what is the style that controls that we click on it and it says well there's a content style and inside that it's inside a container style so if we want the style that actually is everything on the page zoom in again? I'm using a much lower resolution with dreamer than they usually would, so if I wanted the style that controls everything on this page it's a style on a dip tag called container and again most layouts and css start with one death tag around all of the content on the page that's for matter with a style called wrapper or container that controls the width and it's also very common to center it and how do you think you sent her a deaf tag? Would you choose the center option? Wouldn't that be a logical now let's open up that container let's go find that style called container let's double click on let me show you that in the box setting remember margin had space to the outside patting at space to the inside well, if you add the same amount of margin to both sides of a death what you can do by sending it to auto left an auto right you effectively center it believe it or not that's a basic css thing you have to learn seems a little obscure, doesn't it? Let me show that again and just show you a quick what I mean by that because I know that's a lot to throw out and I know I won't get to everything but at least I can make sure you learn the things I do so I just create a new planning document world quick and I just save it and call it centering on dh always put a title right away because that's a good practice see I'm learning my own habits they insert an image and let's just take one of those nice pretty images one of these beautiful women catherine leaping in the air I love the way she jobs and I love the way jasper captures people like this so you put an image on a page and it just goes to the far left to say no I want this centered I wanted centered in the design right so most of us would start by putting a div tag around it but she could also create a style for the image remember you put a dip tag around it by selecting it insert tive and here's kind of an advanced thing you can create the style and apply it all at the same time so we've been putting a div creating a style and then applying the style to the dead this time one then you both at once so I'm inserting and dave around it I'm a create a new css style rule and I want to call this container so am I mean to have around the page right I could put a dot there but because I chose class dream weaver is going put that dot on there for me all class styles haven't died and I'm going to go into the box settings, and I'm going to set the margin to auto right, an auto left because that's what's going to automatically center this peppering the same amount of margin on each side but it's only gonna work if I also set a with marsellus said you set a wit well, that dipped a goes to the full width of the screen unless you tell it otherwise. No, you can set that with and lots of different ways. I could set that with to the nine hundred eighty pixel wit that many people use when they're designing for desktops that's a perfectly fine option, I could also set it to be ninety percent of the page, and then it would have on lee take up ninety percent of whatever browser space was available, and you start to see how that creates a flexible design. But if you've got one hundred fifty pixels of stuff when there's only ninety pixels of space, you can get unpredictable results, so that gets more advanced. I'm just going to do in ninety pixel fixed with because that's the only way, but I would get this auto margins to set click ok, click ok, and it inserts the dip and centers at all at once now that does a lot bigger than that image, but you kind of get the idea of how that center the tiv and here's something I haven't pointed out yet, but they're all these visual aids and dreamweaver you can turn these on and off, so if you're not seeing the little outline of the diff tags, if I turn that off that dev tag disappears if I turn that on css lay out options, that dotted line just shows me where it is. You won't see that line in a browser unless I actually define a border, but during liver gives you that help to see where it is. So if I sent her the due by setting auto on each side, who remembers how it would center the contents of the do I would I could go back to that same style and we set the we sent her the div itself by putting margin on each side we sent to the contents by going the block text align center when I do that, she centers okay, so why? Why rulers of css? Why did you make this so complicated? The answer is pretty complicated, and the answer has to do with all these other rules and css, but I want to make sure you're starting to get these basics we're creating a design with a series of boxes made of def tags were putting content in those boxes, and we're creating styles that we apply to those boxes to control how things are positioned on the page, how they look, what colors they are that's, the fundamentals of html creating the structure of the page and css controlling all of the layout and the design elements. There's another thing that happens a lot, which is page wide settings and again, they're multiple ways to do this there's kind of a cool thing. If you're creating your own page, you gotta modify page properties, and you can get to some page wide settings in a more intuitive interface than all right, I have to create a style for the body tag. Is that edward? Yeah, so you should know that it's the body tag, but you should also know that it's the page properties option also available down here with this button from the properties panel that you can use to set things like the background color so I could set the background color for this entire page by just choosing come background color from here and apply and you see that great coz look dreamweaver created a body tag style for me, so you start to see how they're all these options and dream. We were all these different places that you can find things, but they work on the same fundamental principle we're creating a series of css styles that we're applying to content that's formatted in age to come out let me go back over here and make sure another thing that you absolutely positively must learn to make any sense of the web just how to set links like gosh links like the world go around I can't teach a beginner each to malthus and not at least teach about links so ok links multiple kinds of links we can link to other pages in our sight we can link to images directly and we could link two pages on other people's sites and we can link to email addresses jay's pete's so let's start by linking to an email address but I'll link to mine because I promised I would give that so let me get on to the very bottom it's just changed the copyright on the footer copyright twenty thirteen yeah all rights reserved yeah I'm wasting time typing I'm so sorry um email janine for help janine I am going to regret that I did this but no I really like to help people so janine a digital family please start by going to digital family dot com and seeing if you can answer the question yourself and if you can't you might end up the next frequently asked question on the site so if I want to turn my email address into a link, then I would highlight the text and I would choose one of the link options on the link options you'll find most easily in the insert panel in the common part of the answer panel, you'll find hyperlink and email link. So if I have selected an email, I probably want to click email link cool, unnoticed it immediately said, oh, the text you want a link is the link itself that must be the email address and it put it in for me that makes it super simple to do that the same is true if it's a hyperlink to the website, so visit digital family dot com and look for your answer to your question forest and then email me if you still need how ok, so now I can select digital family dot com, and this time I would choose the hyperlink option. And here I can link to digital family dot com that's the text but the link itself it got confused because that's not enough of an address. I can copy it. Copy and paste is your friend. When you're setting links, you need that http colon slash slash I know nobody uses it anymore. But in the actual link it's good practice to include the http colon slash slash because some older browsers needed and on the internet everything flows more smoothly when you get all that in there. The w's are optional, but it depends on how the site is set up, so if you want to play it safe but the w's in there it's more likely to work, some sites don't need it, but that varies and then targeting is about whether this opens a new tab or a new window or it opens in the window it was already in in a general rule, a lot of people use it if you're linking from one page on your site to another page on your site, you wanted to open in the same window and you would put nothing in the target if you're leading to somebody else's website a lot of times people will open that in a new tab so that your site stays open and in that case you can either choose new or blank they'll both do the same injury. Okay, so we've settling to another site, we've set a link to an email address what about linking to other pages on our site now? We haven't created the pages yet, so that immediately becomes a little bit of a dilemma uh, there's a whole lesson that I do I'm using templates to rapidly create new pages injury mover, but for now I'm just going to create a couple of fake pages justice holder pages and this is actually not a bad practice, so if we create this save we've got the about paige and even index page in here yet because I think there are a bunch of links already in this site um, so we could create ah high jumper page and create a blank page and linked to that and if you're starting with a new sight it's not about idea to just create a bunch of blank pages, set your links to them and then as you actually create those pages, format them and lay them out, you can just save over and replace them and you'll be much better off that way so I can say that and linked to it I'm actually because I'm using the variation of the site because I'm using the project files you already have all these pages, so I'm just going to set three links to pages that already exist if you're starting a new page on a new site creating pages and then linking to them makes this easier even if you haven't made the pages get so if I wanted this to be my high jumpers and this to be my medium jumpers and this to be my low jumpers and this to be my home page, I can just type that text and I'm just replacing the text over here of course I can change that green color by changing the css but to link it I would double click to select the tax and again, they're a couple ways to set links I could go to the hyperlink box I can also go in here the property inspector you see down here there's a link field right now there's a hashtag and they're just like the pound sign that is the universal placeholder for a link so if you ever see that and you'll see that a lot on web pages there's just a pound sign where there should be a link that's just a placeholder to get the styling right for a link before it actually turned into a link over here on the right there's a little tiny icon that looks like a folder that lets you browse to find pages on the site and so now I can say, well, let's see, I wanted to link to the high jumpers I have a page that I just made called high jumpers that it's a blank page or I can use the actual site so you'll see content since we link around kind of mixing my new pages of my old pages, I think you follow something linked to the actual high pay just so that you can see and now let's do medium so again I can go down here I can click on that little icon that looks like a folder any time you see something that looks like a file holder and during lever it means brows click on browse you go to my medium page or media jumpers there we go and I feel like behind the scenes what dream weavers doing when I set these links is putting those linked tags and there it is a h rough isn't that was our um a hyperlink reference the anchor tag and it's why styles for links are a and a visited and active and a hover so again learning a little html helps you understand a lot more c s us and throwing a lot of you want once today just giving you this introduction the link tag is a trap and then the end of the link tag is just this close eh? Okay so usc zuman opened that up just a little bit more so you can see I have links to these two pages remember if you double click and design me which is your white or your encode view and you can see these air in the same folder so there's no no path there except the name of the image but that image has to stay in the same that html page has to say in the same relative location as the html page it's linked to or that link will get broken and that's why you on ly want to change the location of things in the files panel and why you want to do that site set up process so dreamweaver knows how to set those links okay, so we've set a couple links let's set to more using the hyperlink box just to show you it works the same way again. You see a link and there's that browse icon. Looks like a folder. Second over here and find my low jumpers. Yeah, there are low jumpers here somewhere they see low for me. There it is. Ok, it's getting to be the end of the day and the home page. What do we call the home page what's the home page of any main websites and next you guys have learned something today, so if you're working on a new site or you're not sure, index is always going to be the home page in the place you want to link home to. Another thing I regularly do is link the banner itself back to the home page and again, when you select an image, the properties panel is going to change. But if you want to turn an image into a link, it works the same way. Here you see the source of the image. The image is in a folder called images and then it's called jumpstart banner by school ought to be and you see it's a j pang but this field below it lets me link that image. So again, I can use that hyperlink icon in the top right in the insert panel or I can just click on this browse file on aiken linked to the index page, which will take me back home and it's a very common practice of websites toe link the banner of the logo back home we just preview that real quick and show you that even though I just did this here on my local computer, these links will work just like if I were on the on the internet. So if I click on medium, it goes to my medium jumpers by quicken low, it goes to my lower jumpers like like on home, I go to my index page and you see here I've already set these links, and I've done some fancy tricks with css like this little roll over effect that's where you need those different link states so you have one style that's, the active link, another style that's the hover link that eh, however, and then another one that's the visited link after you click on it so you have multiple link styles because there are multiple link states ok, clear as mud all this stuff on the fund jumpers that's my favorite page of this site again you're getting this whole web site in the project files you can deconstruct it, you could poke around, you can learn a lot just from playing with it. I am going to stop and take a couple of questions here because that was a lot I know we're trying to make sure we get a lot of meat into the end of the session here, but I also want to pay a little attention to questions. Also, I was wondering, did you show us how tio link tio are hyper linked to an email like a contact page? We'll know that's a really good question and let me just show you what I did about that. So another good practice and again because I can't cover everything and web design, but I did try to put some things on the site to show you some good practice. Lots of people will tell you should design a web site like a funnel that drives people had taken action than what a lot of people do to get people to actually take that action is create something called the big orange button, even calling bob kind of a term of art in the industry. The big aren't orange button bob so I created a big orange button here that's a schedule in audition I kind of played around two can you jump? Do you have what it takes? Can you leave over steaks? Can you jump in the air with a smile on your face and your hair all of fluff do you think that's enough finish apply the schedule in audition you were a journalist I read a lot of dr seuss's. Okay, all right when I click on this link I'm gonna go to a fake form why is it a fake form? And what are we getting out here? And this is something people ask a lot when I turn it email address into a link I could do that and when you click on an email address that's turned into a link it will launch the email program that is set up on the user's computer and start an email and that's a very efficient way to invite people to email and I do that pretty freely on my site but a lot of people don't do that. Anybody know why so many people don't like to turn their email address into a link because hammers khun go along and scraping off your web site collected and put it in their mailing lists and as soon as you post her email address on the web site and link it you do make yourself more vulnerable the spam that's part of why you see so many forms on the internet gets forms can help hide your email address from those families not a perfect system but a pretty good one the other reason people whose forms is it lets people answer more specific questions as they contact you. Lots of great reasons to use forms and dream. Weaver has lots of tools for building forms. If you're working in a big site with programmers who are helping you with the forms, you can build the forms and html pretty easily with the during lever tools, and they can make them work for you. But if you have never made an h human form before it's a lot more complicated than you'd imagine, and for that reason I made a fake form of this page and I told you to go to the adobe acrobat forms central site. If you go to form central, just google adobe, form central, or follow the link that's in this part in your project files, you'll find an online service that makes it easy to create all kinds of forms and handles all of the really technical part that has to be done on a server in order to process a form again, covering a lot in a short period of time. But when you fill out a form, something has to happen in that content. It doesn't just go to where it's supposed to go? Usually when you fill out a form, you either want that information e mailed to somebody. Where you want it saved in the database or you wanted to place an order in any commerce site where you wanted to search something like forms are highly interactive, and because of that, the html on the form is pretty easy. But the processing are what happens when somebody enters content into that form it's very complicated, so even a relatively simple form, like email me information is a little bit complicated to dio because it requires very advanced programming in a script on your server to collect that data, turn it into an email and send it to automatically, or, like I said, do any of the other things that forms do so for that reason, rather than even begin to teach forms, even in the intermediate to advanced level of dream weaver, I send people to a service like form central. There are others this's, an adobe approved service. You do pay a small fee if you use this a lot. If you google set up web forms, you'll find a number of services that do this for you precisely because it's more complicated than most people realize. So I did throw that in there because I anticipated that question. I like my email address, I'd like to make it easy to reach me. I do probably get more spam is the result. It's up to you whether you want to take the extra trouble to make a form or whether you want to make your email address more accessible, my friends, any other questions burning over there? We have it. We have questions that some of them are more general, right? So one maybe that's appropriate right now because you just showed us that form from anne and because we did in design yesterday we learned how to make forms and interactive forms. The question is, you mentioned that it's common to use photoshopped to do layouts for someone else to code is in design and really good option. It seems better for creating layout. Oh that's such a good question and oh yes, that is a very fine practice and you will find in the industry both. It is probably more colin to see layouts created and photoshopped because photo shop is a more commonly used program. But my friend who did the class yesterday on in design will tell you and designs a much better tool for creating multipage documents and layouts and it's a perfectly fine thing to do your mock up and in design. What I will warn you against is that nifty little export html option and in design not so good anybody who promises toe automatically convert your wonderful web page layout into something that works perfectly on the web is probably promising more than they can deliver and almost every automated photoshopped html or in designed html tool I've seen really left a lot to be desired you're better off to deconstructing it and rebuilding it yourself with some thoughtful time taken to create the css layouts all right, let me go ahead a little bit more and as you have questions feel free to jump in I'm going to go ahead and do a little bit on the front page design and see how far we get with it just because it's prettier to look at so that one doesn't have a sidebar we could just do the one column fixed header and foot or so let's just create that and again remember always save save early often so I'm going to call this in next to because my home page but I'm recreating it you can mess around with these project files as much as you like I'm going to get rid of that I'm going insert my banner image in the in place of it now you might break the banner into pieces and used text I actually have done that so I can have that option but I'm just gonna put the banner in there now to keep things simple have a nice clean banner at the top notice that even though I put that there that little bit of green is poking out I don't like that so I want to go into the header style how do I know that if I select the image they come down here? I'm going fast because this should be a refresher now I've got the image selected you can see that it's in a dip tag form ended with a class style called better so if I want to change the background color in this part of the page probably looking for a style called header and there it is that ugly green color I'm just going to delete that and get rid of the background because the container already has white now I could have white banner and white container but then if I decided I wanted to change everything to blue, I'd have to change it in two places, so one of the things that makes css different from one writer to the next is thinking about being more efficient so any time you can create one style that does the work of three create one style any time you have to have differences create three. But if the goal of css is to create sites that are flexible and easy to update than the more efficient your styles the better okay? So I'm gonna get rid of all this content in the middle remember I'm just shift clicking or click and drag to select all that and I can just delete it to get it out of the way well, I think I deleted too much undue why did my banner going um make sure I'm just getting the contents of that to attack now I'm not seeing this right now let's make sure that we've got all of these options I've got my outlines up care css layout backgrounds you don't want that look at that isn't that ugly? Yeah, but if you're trying to figure out where the css dave tags works sometimes clicking that background captain can help you. I just want to see these outlines so I want to put my for images in place here so I can insert the four images that I got for this naomi I love how they only leaps in the air. Jasper has this amazingly of capturing athletes yoga masters hey does fashion and magazine and all kinds of stuff but he likes to ask models to jump in the air in this studio. This is kind of a collection of extra images he's gotten after he did some catalogue shoot or something of of people leaping in the air. So I'm just putting these images one after another in here insert image let's put the fourth one in no specific order I'm just using the names of the models as the all text but again you generally want to describe that if it's a picture of a person using the name of that person is a perfectly appropriate description but that's not what I want this to look like right let's go open the actual index page remember you can double click on any of these to open these panels and you can click and drag to move around let me go get the index page that is the actual index page and let's see what we did here let's deconstruct it for a second well, first of all four of these are exactly the same height that looks pretty nice here, doesn't it and that's one of the places where I use a little cropping and dream we were to make things equal because if you didnt line him up in photo shop it's perfectly find a crop in a moment here I put a div tag around each one so that I could control the spacing and also so that I could have a caption underneath remember I can't keep a caption with an image unless I have a box around it, so you're immediately going to graduate from just aligning images to aligning dog tags around images if you want text to go with those images and I also have a little border around that image so that's kind of cool now I could create four different styles and apply them to each of these or I could look at this and say, you know what actually the way this measures out this is all equal, distant and I could actually create one style that will work for all four of these and this is where it gets to efficiency, so whether you create four styles or one depends on whether you can use exactly the same formatting on each of them if you needed the placement to be different than you'd have to create too. So I created a style that just a short cut a little bit and also show you kind of a cool technique if you've got a style in a page like this. So what is that style? Well, if I click on it, I can always come down here and see let's click right on it so it's easier. Oh, I called that photo frame that's pretty intuitive, but if you're not sure you can always check no let's, go over here and see oh photo frame okay, it closed my files panel what have we done? I floated it to the left, I put margin on each side and I gave it a wit that was about the same as the image actually it's the same as the image plus them border around the image, so we got to find that style. We've done a couple of well defined samara, but for right now I'm going to right click and copy that style I'm copping it from an internal style sheet in one page actually, it's an external style sheet there, but I'm copying it into an internal style shape here. Here's my style sheet. I'm gonna right click that I'm gonna pace. You can copy a style or multiple styles from one style sheet to another and save yourself a lot of time. And since we don't have a lot of time, I thought I would do that. So no, I want to wrap a diff tag around each of these and I want that style I can do both at once. It's it's remember and lay out in the insert. I have the insert def tag select the image insert choose the class style photo frame that I just added, you want to click ok it's gonna pop it around there now. Everything else popped down below it because we're doing these images and dreamweaver misunderstood and put all of them in one day of tag that's not what I wanted dream weaver. We just cut those out of there. Don't panic when that happens. It's not a big deal what's the other thing that happened my foot or just came up from the bottom it's another really important lesson, but I wouldn't put those images back in this. Second hopefully I won't lose them they're in the copy another land at the moment but I want to take a moment and show you something I was talking about when you float things to the left or right other things wrap up around well that footer right now doesn't know the difference between where those images and and a text that should wrap around an image dream we were in the browser can't tell whether that footer should stay at the bottom of the page or not it's wrapping it because anything that's aligned left should have other things wrapped the right but that's not really what we want we really want that footer to be at the very bottom of the page no matter what but that footers not floated and the thing that's kind of weird about floating and css is that if something's not floated it wraps around the thing floated unless you use something called a clearing element remember when I went through that power point I said another thing you have to learn is how to clear things and this will make it crazy till you learn it so I'm just like that footer style right there's a style called footer let's go down to footer me double click and in the footer in the box settings there's an option called clear and if I say clear both which means clear anything that floats on the writer left before you start this element so that floats and this would wrap or that floats, and this would wrap this is clear it don't let it wrap clear in both directions click ok, and boom! You see how that foot or goes to the bottom of page? I know that that's a little bit advance, but it's also really crucial to creating css lyles being able to clear floats. So if you've heard that term, you know, a little css or you're completely new and you just haven't gotten to this problem yet, you will you have to clear floats so let's see if my images air still there trouble. Okay, now you could just put some spaces in here and separate them a little bit so that dream we were comptel better when we insert these days and each time I'm just going to insert it and apply a style at the same time, putting the same style around all three. So that's pretty easy, just inserting intuitive, choosing the class style as I insert it. So this is a style I've already defined makes it pretty easy to just do this. I copied it over from the other place, no big deal, but we haven't quite finished with this it's not all quite perfect at what all is going on here. Well, for one thing, look at that there's a each one tag in there. Now this is a place for dream weaver can make you crazy, and I love during were but again that's. Why some of the advanced programmer scoff and say, ah, it makes messy code well, because sometimes it doesn't understand what you want. We're trying to work and designed you, which is more intuitive, but in color view, other things are happening, and sometimes it's hard to tell that there's something like an h one tag, but still around an element, so there are a couple ways to get rid of it. I can delete it from code new, and this is why knowing what those h one tags are on that that's for formatting, a headline, not a picture, but it's, adding all this space around this image in a way I really don't want, so I could delete it here, or I can just see it here again, down here in the bottom. Ah, very easy way to delete things, just remove the tag, and I don't have to worry about whether I deleted exactly the right thing. So let's, go back over here and see if the rest of these have that same problem no, that one looks pretty clean what's going on with these so again the first thing have to do is your formatting is make sure that you don't have extra spaces that you don't have enough maybe it put those spaces in between them and we get a little space oh there's a little extra space waiting for the borders of course, because I created that style so that the borders would have room okay, so those should I'll be fine now my problem is that the container is still set to nine sixty and I created this layout for nine eighty let me show that again they created this page from the css layout there was already a container all the way around the page that set the width of the entire page and then they created a bunch of dibs and science that had specific wits when I added borders to that and I actually did the math to figure out exactly what size those should be and how much margin room I had in between each one to create these styles. And right now that fourth one is wrapping down because the container which I changed to nine eighty and my final layout hasn't been changed it so I changed that to nine eighty now there should be enough room for my fourth want to wrap up but if you try to put things side by side by side that are wider than the space available in the container that's what happens and in some older browsers, because margin is measured differently, things will wrap down below and things could get unpredictable and that's where you get to some of the more advanced stuff. The other thing that he said was to create a style that put a photo frame around all of these at once remember we can create compound styles, so if I want to frame around these images but not around the banner I can create a style that on lee goes in that frame so let me select an image choose new css rule and dreamweaver automatically offers to create a compound style that's going to define the image time if it's inside a divide that has photo frame on it inside content inside container and then you wonder why does it say you could be more or less specific? Well, the more specific the mortal override other styles and that starts to matter when you have a whole lot of styles that conflict with each other, but the more general, the more places you can use it without worrying about it. So if I wasn't sure I was always going to have this in something called content maybe would have content one and content to in content three cause on different pages this all can get complicated, you can get more or less more or less specific, so right now I'm just going to create a style less specific by removing the first two requirements that it also being container and also being content and say, I just want this to work if it's an image inside something to find this photo frame, ok? And I'm gonna click ok? And now I can define whatever I want in this case I want to put a border, and I believe what I did was a solid five pixel light gray border and here's kind of a cool thing you can when you're selecting colors, when you're defining colors, you can choose any of these colors, you can go over here and make any color you want, or you can lift colors right out of the page we can so that you can say, you know what? Really just, like, lift that sort of blue gray from there if I want that color and you khun select colors in dream weaver, much like you would select them in photo shop, I'm actually going to use that simple silver gray, but I wanted to see you could lift colors, so we're starting to get somewhere with this layout, right? We've defined boxes that have patting and margin on each side. What else is going on in those boxes? They have a width of two ten because that's the width of the image plus five pixels of border, right? So when I first aligned jasper's little photo with the text around and I created a box that was exactly the size of the photo but this time because I knew I was going to put a five pixel border around it, I set the woods to be to ten plus five pixels of border on each side of the image two hundred plus ten you know what I mean? Even if I didn't say all right, the images two hundred pixels wide, the five pixels on each side adds ten so the width of that box actually has to be to ten then by doing the math of defining nine eighty less to ten times for I figured out that if I put a right margin of seventeen in the left margin of eighteen, they would equally get spread across the page. You can create simpler or more complex layouts, but that's how I got to that margin and patty and that large and impacting is what's controlling the positioning around this when I click on this these air this's, those visual aids and dreamweaver helping me see that that's the margin setting okay, so there's a little bit of margin on each side of these seventeen pixels and eighteen pixels that evens out to be to make them equidistant from one another. The other thing I did was I aligned them all to the left this is a little counterintuitive as well I could have aligned left on a line right? But when you're lining multiple things up side by side it actually works better to just align them all so a line to the left a line of the left line no left a line on the left and they wrap up next to each other if you want things that two ends that aligning the left in the lining to the right makes sense but if you're lining up a syriza boxes which is a really common thing and photo layouts like this aligning all of them to the left and using margin to separate them is an ideal way to do that so the last thing I did was get the height the same three sixteen three, sixteen three, sixteen I can just select that image nifty little cropping tool pops up yes, I know it's really going to permanently change this image? I decided that's ok I want to keep the with exactly the same size that it wass but I wanted to be exactly three sixteen so you can notice that the height field is changing down here as I click and drag and once I get it to where I want I can just double click it crops it kind of cool okay running out of time but I want to share a couple more things margins and patting are really under appreciated when you first started doing css so one of the next things I would want to do is just spread this page out, right? Everything's kind of jammed one on top of each other. I don't want that banner so close to those one a little more space here between the caption I mean, yeah, between the caption that will be here and the stuff at the bottom of the page and again, they're multiple ways to do this. I could add some margin to the top of the photo frame, and then I'll create a space between the frame and the top, or I could add some space to the bottom of the header and it would do the same thing, and you have some choice about how you do that. But in general, if I can put it on one element instead of four, I choose one because it's easier to keep track of where that is. And then if I put other elements on the page, I know that I'll be at the same level. So when I put a little space at the bottom of that header, go to the box, large and bottom let's just put twenty five pixels of space there, you see how it lose everything down a little bit. Right and again, if you're trying to figure out what it is to select it looked down here oh, yeah that's the header! If I put a little margin on the model it'll move everything down. Same thing with the footer I got under the footer doubleclick a little margin on the top I should be able to space everything out there as well. But wait a minute, that one didn't work right? How come? Well, this is another clearing challenge. Long story short if you really want that space, you need to put another dip tag around. All four of these images like the content did that's there and this is why most of these layouts have a header footer and a content in the middle it's in the middle of all this is something called content. They want you to notice that that's a diff tag there's nothing going on and it except that margin I just added, you see how it's way up here it's not actually wrapped around these images that's that same float problem we have a big container that should send everything that's in it except when I aligned everything to the left that container acts like it has nothing in it because it's not floated to have a couple options you could add a float to the container won't actually change the look, but it'll allow it to go into the same floors with things that float or you could put another clearing element in the drags the container to the bottom let's try and make sure this works loaning it to the left so what did I dio? I floated the container to the left. What I did was make the container float the way all the other elements float. And now, because it's around those that float it does the same thing they do. Okay, I know that's a hard thing to get your head around floats or one of the most complicated things when you first started css but they're the fundamental element of how you create these layouts. So understanding that when you felt one thing and not another, you get these conflicts and then you either have to clear things or float them all to make them all consistent. Now if I add weren't space to the top of that footer it should actually work. So if I say that's still not enough I think I want fifty pixels of space and they click ok, well, it should be there but it's not, um actually the better way to do that is to put some padding content me do that that's a different flow clear I'm sorry to complicate things more than it needs to be there we go, okay so if you try one thing and it doesn't work you can always try something else there's another element of clearing there actually multiple levels of clearing a few movil clearing floats you will find many different approaches some short cuts you can build into the css and different ways you can clear floats but if you try to put margin on something and it doesn't work it's probably because of the floats if you put something margin on one place that doesn't work you might find that putting on a different of will work even if you don't know how to clear the float I could go in and put another clearing element inside that dip and make that foot or float work or that footer patting work but I'm not going to do that instead what I'm gonna do is because I'm not using that I'm going to remove it because if you ever ad space to it like a margin to an element and then you decide not to use it even if it's not visible on the page you want to go clean it up or it can come back to haunt you later okay so I went with the easier option I said it on something that worked and that just made it a little easier toe to set up for you but we put a little space around there we could go on and put those captions just select the image click right? Put our high jumpers low jumpers. Now I have that same problem I had with the padding that's already on the paragraph tag, so if I remove the paragraph tag, that image will go back to the way it should when I hit return during, we were automatically does that. So each time I'm either going to have to be more manual and more careful about that, or I'm going to have to go and select the image right click and remove the paragraph tag helps wrong paragraph track the one that's around the image, see what I'm doing, so trying to show you some of the common problems and dreamweaver that you do that, and because there's, already some large and set on that paragraph tag in this layout that I use because there's already patting fifteen pixels as soon as there's a p tag around their fifteen pixels of padding, get added to that image, even though I don't really want them there. So I either have to change the style in that pea tag. I have to not use paragraph tags in these making sense, clear his mind. Any more questions while I finish this out? Yes, please, studio audience, you guys should get first choice on questions. This may be silly, but when you copied the style of the picture over white in all of that stuff copy over didn't all of that stuff like the borders and the and letters really at all and I did that a little fast to save time but I also did that a little fast so let's go back and look at that that's an excellent question so copying stiles is a great trick but let me show you over here I actually had multiple styles I had a photo frame style at a photo frame image style which I recreated when I got over there this is a really good question don't be embarrassed to ask this and then I also have a photo frame each to style I'm going to recreate that one now to show you so I copied one style over just to save myself some time and then I recreated the style I'm going to re create this style but remember you can copy and paste any style from one style sheet to another then the last thing I absolutely have to cover it's how to turn all these internal styles into an external style sheet we'll get to that no matter what we'll see how much further we get I'm going to correct my own mistake john starting network never leave the title saying untitled document harr's I would throw something to me if I could wait oh ok so I'm back over here where we copied the photo frame style right, we pasted it in here and that just gave us the frame, and then we inserted, gives and applying that style the same time and that we created a compound style that's, a tag style for the image tag on ly when it appears in something that's formatted with the class style photo frame. Now I want to create another tag style for the age to tag because I'm gonna format each of these with an age to tag, so they just put in eight to around each of the and you see that using the heading options is a good choice. These are all important pieces of text on this page. If these were important keywords, I might want google to recognize that these are important and formatting them is heading one or heading to tell google they're important. Google generally likes only one heading one tag per page and then as many h two's as you want somebody is h two's for these, but now I realized that's way too big for this layout that doesn't look right at all, so I want the advantage of using the h two html tag, but I wanted to look the way I can create with a style which is anyway I wanted to look, but I may not want to redefine or change the way the heading to looks everywhere and they wanted to on ly apply in this instance so now again if you put your cursor their dream weaver will give you a head start when I create a new style you see the h two tag is already there it's inside the photo frame inside content in container I can leave it all of that and it'll only work if all of those styles replied or I can make it less specific and say I really only care that it's in photo frame the other things might be different on different pages but anytime I have a photo frame with an h two I wanted to look like this and that's what this compound style is going to do and now I could change the font so I could say well, you know let's make this a different font I don't even know what the body fought to find on this is now let's make a georgia so it looks really different if you look at my actual project files I've reversed it I've made most of the body text georgia and most of the headlines ariel but so you see the contrast and since we're running out of time, I'm gonna make that georgia and when I click apply because I've already applied the age two to those it instantly is they're so tag styles don't have to be applied the way cost styles do is have you already applied the tag anywhere that tag appears style automatically gets applied and then I could also make it a little smaller and again I could do that in a pixel size I could do that in a percentage I could do that ends in a really common thing is to use ends because they're a little more flexible so I might do something like one point two ends if you go to that pdf, you'll read a whole description about why use different sizes because I could spend twenty minutes just talking about sizes and css so that pdf you get for free from the creative live site that will show you click ok and you see they fit much better now what if I wanted to center those in there? Where would I do that? What I do that on the age two or what I do that on the photo frame now in theory we could do either, but in practice doing it on the frame is going to be better because the frames when I have on the whole do and centering everything in that debate is going to work best for centering that text. Otherwise I would have to play around with margins and that gets a little weird with content within an element, so I'm gonna go to the block settings I'm just adding another style element to my photo frame textile line center click ok and they're centered ok clear is mod, huh? Making progress a schmalensee s also your friends but they take a while to get to noon how you doing as most good friends are that's right way have a ton of a curiosity for sure and it kind of covers a slew of what you've been covering. Do you want tio? Some question about let's let's do a couple of questions whatever looked like I most common in pressing questions. Let me just say up front. As I said at the beginning, there's no way I can cover everything that has to do with any of these topics. It's an impossible task and one day to teach all of these things and spend a couple days just on css and a couple of days just on the features and dreamweaver, we could spend that long on each team ill so cramming all of that into one day was an impossible task for all of us. But my goal today was really to give you an overview to get you to start to be familiar with these concepts, to get you to start understanding. And you know what? Before I take those questions, let me do the one other thing I know I have tio, which is internal and external styles, right? Remember internal styles are saved with in the html painter on, so if I go up here, you'll see all these styles that I've been creating and all the ones that came with this page member we created a photo frame style we created a photo frame style with an image that's a compound style and it has the border that goes around here look at that that almost makes sense to you know admit it admit it at the beginning that looked like kyra graphics now that start to make sense this is a class style called photo frame and an h to tag so the age to heading that's around that text when it's inside a dip tag formentera right? Right we're getting this so this is where the styles are and this is what css looks like that's my dock type of the top of my html page this is the head area of the h male page this is an internal style sheet in the same document that I'm in and you know that the page itself doesn't even start till the body tag. If you've ever done that check career in a browser and you go view source, you can see what's behind the themes and then you go oh my god maybe I didn't want to look just search for body and you'll skip all that stuff at the top that's usually the really techie css and java script another crazy stuff and you get to the body tag and after the body tag you actually get to the content of the page and you'll start to see the text and the images, so you're just trying to find stuff in a page view in the source, search for body, and then look below there that's where everything that actually displays in the browser window is so we created an internal style sheet when we created this new layout when we did new page layout, and when I do kind of a quick review here. As I do this, we created a nation l page, which shows the layout something I didn't spend a lot of time on was here choosing the doc type again. We've been sticking with the dream weaver cia six defaults because that's what I'm teaching today remover, cc actually defaults to html five looking ahead, but there are other complexities so that we'll get into in future classes. I promise. Then here we chose to add to the head instead of creating a new file. If we chose create new file, we could create an external style shoot at the same time and you actually can create two documents in a special page on all the css as you create one of these layouts, but because we chose at the head, we added all that css to the head. But now I've got a web site we want have multiple pages and on every one of those pages I'm gonna have four pictures and on every one of those pages I'm going to use all of these stiles and I don't want to repeat those and I want to be able to update them across all those pages so now what I want to do is create a new page and I want to choose css so I'm creating a blank css stock and I'm going to go ahead and create it not much there this is just telling the browser this particular files a css file and that's a comment just telling you it's a css file doesn't even have to be there in a safe house and no, you can call your style sheet any thing you want most people call them style's main styles you might have multiple style sheets in one site you might have styles that apply to certain sections unit have styles that applies certain kinds of content and organizing them in separate documents can help you organize that but I'm just going to call this my styles and I want to save it and if you come down here into your files panel we look at what just happened you'll see again because I'm using the project files where I've already created this site and I'm creating this on top of it there's a styles nazi ss these are the styles that applied to the completed pages in this project file. They're already there. This is the my styles, that css that I just created. That's! Just a blank page, right? My styles that css. Now I want to go back to the in next page that I created movement move this notice that you can move these tabs up here represent all the pages that I have open. Just kind of handy close some of these out of the way and just clean this up a little bit don't need to save her. She was just a quick lesson don't need to say that. So this is the completed in next page. This is the one that I just created in the scott's. All of my styles are internal. Another way to indicate that is you see these little brackets here. This tells me that there's a style tag around the styles and then it's an internal style. If it were an external style, it would have the name of the style sheet dot. Css, you're going to see that a second. So what I need to do now is get all of these styles into that style shoot. And I can do that a couple ways I could go into the code and I could copy it and then it could paste it into that css file and that would be fine, but oh, my gosh, there's so many places you could make mistakes there, it scares me even to do that. Not really, I do that sometimes, but I don't recommend it if you're new instead there's a much easier way watch this going to make this a lot bigger so I have more room close that files panels I could see better when I'm doing d'oh drag on that property is panel and I am going to link attach a style sheet now you can attach an external style sheet that has already been created or you could attach one that's blink like the one I just did. If you create one site route, I want to make sure I'm in the root of my site I want to find the documented created calm my styles that css click ok and it's just gonna link it and put it down here. Now I want to move these styles into my external style she look at that, I can just click and drag and move them down, and they can even click and drag all of them at once and move along nifty, huh? So I am just moved all of the styles that used to be in the top of this document over to my style, she look at that, they're all there now in my my styles, that css file, and now if I save this, they're gonna work exactly the same way they're still attached to the page, but now they're in a separate document that I can attach to other pages, and why does that matter? Because in this site, where have multiple pages I'm using the same styles nazi ss this is the completed site you can deconstruct at your leisure where have all the styles for the site? And I attached that same style sheet to every page says you go through there's one last thing I want to show you about how styles work that I think really helped illustrate what styles do, and then I'll answer questions till we run out of time. I hope this brings it all home for you, here's my page completed page from the project files with all the styles I'm in firefox because it has a feature I want to show you. Oh, if I could get to the menu and firefox on windows to get to the firefox manure, you click the option, but this's the problem with using somebody else's computers, I want to find the menu in firefox menu I think if you move your cursor all the way up it should appear just, uh you are my hero. Thank you, mac. User, I do use max just not as much as windows these days. And this is a really obscure thing I almost never dio except for this demonstration. So forgive that little missile air. You're looking at this page with the styles attached. This is the browser saying, oh, here's all the content in a shim oh, here's all the styles on top of it that ad the frames and position things in a line that would make them look the way they do. And not all browsers do this, but fire fox has an option called no style and I want you to see when I remove that style sheet from this page what happens? Boom! Whoa! This is just the age to know this is just the document with the aged well and no styling. Right? Remember, html creates the structure of the page. Css adds the styles on top of it. Now you might wonder why there's a bulleted list here and we didn't get to this, but this is a very common practice. When you have a list of links like a navigation list, you form at it with that on ordered list tag and all those little ally tags and then you create a siri's of styles that transform it so let's see if I can get back here so that when I put that style back on you see how different that looks that's an un ordered list all with css changing the alignment, changing the position giving me those rollover effects so that was a lot to throw at you in one day but it was an introduction to html css and dreamweaver all at once and it should lay the foundation for any kind of website you ever work on and for so many places you can learn more thank you host for keeping me on track what questions can I leave with and how much time do we have the answer them way have a few minutes on dh a lot of questions so thank you internet for the abundance of questions online today um so if it's okay with you go back to a few others our show today I'm going to ask them to collect all these questions for me and as I plan that intermediate and advanced classes that I'm coming back to teach, I'm gonna base among real questions so you will get your questions and we can make that happen um every so we have a lot of photographers in the audience and a lot of them use other doing your programs for photos like the bridge can dream weaver access bridge is there an easy kind of access point in dreamweaver? That's? A really good question and I will get back to you on that and included an intermediate I'll tell you an answer to a question I get from photographers all the time and I wish I had a better answer then I dio, but I do have a powerpoint slide to point you in a direction. Um, all the bloggers want to know what's the easiest way to make a slide show in dream weaver and I even had somebody as recently as a week ago e mailing me about where is that nifty create a slideshow tool and dreamweaver? Because there used to be one but it's not there anymore since dreamweaver eight, that tool was removed and you might think that's crazy adobe! Why don't you make it easier for people to create slide shows? And you know they should, but they don't forgive me for stumbling around. I'm turning in my power point up, so the simple answer is there is no easy way to create slide chosen three were the complicated answer is if you're somebody who likes a lot of design control like my friend jasper. He loved that when I created those rollover effects for the front page of this site and you saw that at the beginning when I roll over those little images the bottom those big image has changed and we were able to position things on that page exactly the way he wanted it because I built that page the way I've been teaching you hear one piece of the time and that's great for high design sites but if you're doing something that really requires a whole lot of photos at once you want to upload a whole lot of full folder full of photos and turn it into a slide show my best advice at the moment is to look at extensions so in this power point which will be included with anybody who buys this will get the power point including this page but you can see here just google adobe extensions for dream weaver and you'll go to the good the adobe extensions page I can't show all these pages because they're not cleared but you can open them at home extended studio dmx zone and a j t x are all companies that make third party extensions for during we were kind of like plug ins for photo shopper filters on dh a number of them have targeted the fact that dream weaver does not create slide shows very well and created tools for doing that so their tools were creating sliders at the top. You're paves a crook, tools for generating slide shows, some of them work better than others encourage you to try them out, most of them charged for their extensions. Part of I don't always get to teach them. Most of them offer returns if they don't work. So before you buy one, make sure they have a good return policy and then be prepared that it's going to add a whole new feature set you have to learn, but if your goal is to create lots of slide shows or image galleries or things like that, unfortunately, the simple answer is dreamweaver isn't as good as you might imagine, so it's not that I neglected to teach that it's that it's really not built into the tool you can manually create them. Alright, janine, these have been coming through throughout the day, but we didn't want to break in with this earlier, but a lot of questions about using dreamweaver versus similar applications. And I know you've talked about how this is a foundational course and understanding can be applied elsewhere, but several questions have come through about muse about fireworks. Um, and is there anything to watch out for and is there a way that you can can you use one file from one to the other to talk just a little bit of sound, much confusion in the world of tools? What about all those other programs? So I just show you that there's a slide for that dreamweaver been around for a long time news kind of new on the market kind of fun adobe made muse muse is adobes answer to the fact that most designers and photographers don't wantto learn h silence, css all due respect to people who don't want to learn these things, you get what you pay for, right? So muse is a completely visual tool you'll never have to do it, she melon, css and if the code it's messed up or you can't make something work, you can't get to the code to fix it so anybody like me is gonna tell you use this kind of pretty to look at creating a really simple site it's great, they're trying to do really complex layout. You can get into trouble in that program with a few ways to fix it. So unfortunately, most tools that limit your options to make it easier also limit your options to make things more advanced all due respect to muse, I've seen some beautiful sights created in it during levers and much more complicated but also much more powerful tool there's also a suite of adobe edged tools that have come out great for html five this is clearly adobe experimenting with some of the latest and greatest so adobe edge is really all about future looking adobe thinking about how you can do job script hd, mylan css together and if you're at the front end and you're really pushing the limits, you might have fun with those tools, but again, those are pretty new in the world of adobe tools, not as tested as I'd like contribute you may or may not have heard of something adobe created years ago sort of a dream weaver light really designed for professional designers like me who create sites entering weaver and want other people to be able to contribute to a site without learning all the technical details it didn't catch on it hasn't been used a lot, but I have had questions about it. Some people use it, I just wanted to throw it on the list. I don't go alive anybody, whoever used go live I'm really sorry, I know that your hearts were broken when it will be killed go live, but dream weaver was the more powerful tolia alive went, uh microsoft front page, not on ly adobe microsoft created front page, killed it, replaced it with expression engine and guess what now they've killed expression engine so I'm getting a lot of dream weaver students who are former front page or expression engine students were really frustrated that microsoft made these tools and then doesn't even support them anymore it's a complicated industry um there was one of their tool that you asked about that's not unless fireworks so fireworks is like photo shop if you designed photoshopped on lee for the web and it dates back to the fact that adobe was originally created by macromedia and macromedia had fireworks and dream weaver and adobe had photoshopping go live and when the company bought when adobe bought all of macromedia's tools it kept dreamweaver and kept fireworks and got rid of go live and kept photo shop and overtime fireworks has been a very fireworks has a very fanatic and enthusiastic user base because it's really integrated well with during mover and really great for creating graphics for the web unfortunately in the latest update to see see fireworks didn't make it so I don't teach fireworks anymore because starting with cc there is no more fireworks the good news is some of the features that people loved and fireworks got built into photo shops sisi so there's some advanced features like you can create a grady int and photo shop and it's really complicated css three to make a grady it now you can right click on that style copy the css on the photo shop and pasted into during liver it's awesome I can't show you that yet, but you'll get a c c class one of these days. Fireworks let you do that pretty easily photoshopped. No, let you do some of that, too, so that's, a quick look at sort of adobes range of tools. I talked a little bit about the difference between wordpress entering we were there really different approaches there? Not something you can just copy a site from wordpress to dream weaver, or vice versa, but you can, um, use dream. We were to work on wordpress. I'm not surprised by that question. Is this slide might see.