Lessons

Lesson Info

HTML Basics

I was having trouble previewing in google I have never had a problem previewing and chrome it threw me for a loop and it turns out in the chat room somebody also said this problem but I'm going to guess very few people have had this problem because it took me a little bit to diagnose it and let me just go off to the dust up here and show you what happened I am not working on my own computer one of the really fun challenges of teaching live on video and creative lives I also get to use somebody else lt's computer while I do it and they actually have to hard drive set up look at this so they have the regular macintosh hard drive and then they have a work drive and they set up this nifty alias so that even though my files are on the work dr they look like they're on the desktop and it turns out dreamweaver doesn't understand aliases and multiple hard drives so most people are going to have this problem but I understand in the chat room there was at least one other person that had this pro...

blem so here's my solution this is you see this little arrow here he had way too small that little tiny arrow says that this is alias and not an actual folder on the desktop so I'm gonna go get my jumpstart talent agency site and I'm gonna put it on the actual desktop of the main hard drive and now all that stuff's gonna work injuring weaver I'm going to show you one more thing injuring weaver about browsers just so that I know you have this going forward you know what we have seen enough of him he's handsome but it's time for some girl eye candy don't you boys agree we bring up the don't start site we're going to be working on um you can preview in dreamweaver I'm jumping around here forgive me bringing you back we have spent the morning looking at a lot of basic setting up sites like this so we have jump start telling agency all set up and that just means we've identified entering we were the main root folder and it can keep track of all our files for us so with the jumpstart talent agency set up in this site set up you know I could just select it and then open the main page the home page of my website gets named yes let's do the audience comes through in next dot html it's what you want to name the home page of any website so that the browser confined it when it gets there knows which of all those files to open when it gets to your domain name and opening that in here I can preview that and what's pretty cool about working and dream we were on your own computer is you, khun build a site on your computer, and then you can preview it and see how it looks in the browser as if it were on the web. And if I opened a seance, safari safari seemed to understand even that weird alias. But when I opened this in google chrome, it gave me a very strange error message and full disclosure there's, some wonderful geeks here that helped me figure out that it was the dual hard drive problem. We actually looked at the address on the hard drive and track that down, so unless you have multiple hard drives, this should never be a problem. But what you may want to know and what is important to know is how to set up browsers so you can do this preview. So let me show you this for everybody who's using the program. The preview options are available from the file menu. You can always preview in browser from here as well. But there's, this wonderful little icon that I use so much, I forget to even pointed out looks like a little globe. You see that when I click, I see that if I'm holding them there we go, I see three different browsers because I've set up those three browsers. I also see adobe browser lab, which would be really nice, except it doesn't exist anymore. Adobe has gotten rid of that it's, a legacy element of csx that doesn't work anymore, but you can set up as many browsers as you have on your computer by choosing that edit vows or option and going into this page, which is really just in your preferences, lots of program preferences and dreamweaver not going to bore you with all of them. But the preview and browser preference is where you set up the browsers that air in that drop down list, I recommend you set up at least three if not four browsers, firefox, chrome safari and internet explorer are the standard ones to set up. Then, if you're going to add a new browser, you simply come here and choose the plus sign. We're going to give a name you can actually call it anything you want. I don't think in genetics floor is even on this computer. Uh, I didn't want to get into some of the hassles of internet explorer. Although the latest versions or not so bad, earlier versions of internet explorer do not display things the way other browser sue that makes some of the web design things that you learn very challenging to put into practice. Browser differences there one of the biggest challenges of web design keeping it simple will help you avoid that that's why we're doing it so I don't see I'ii here already set up the others. Let me reset one up so you can see how it's done. So I'm gonna take firefox off if there's a minus an a plus than selecting something and hitting minus makes it go away, I'm just going to reset firefox, so plus firefox rose and should have done that from the start because I knew I probably wasn't here, so I'm just looking for firefox on this mac hard drive. If you're a mac user, you know you can also cheat and just search for it. Firefox there it is, you want to find the actual application, not the folder around the application that's really important, so if it's enough, if it's inside another folder, open the folder, click on the actual application primary or secondary. If I make this my primary rouser, that'll be the first one on the list, and it will also be a shortcut of twelve if I want a preview in that I actually generally prefer google chrome to be my primary browser, so let me switch that google chrome, then because I put those things on the desktop now, google chrome might even work so ok, so you set up as many browsers as you have. Those browsers are all free also in the pdf and have referred to this a few times. If you register for the class, even if you don't pay for it, you can download the pdf with a whole bunch of goodies, and it tutorials at the very end of that. Pdf are some recommended testing sites. Ultimately, you should test your websites in multiple browsers and even in older versions of browsers to see how they look. Make sure they're gonna look ok to your audience, and you need to think about how many versions back you want to go based on who you're trying to reach. But there are some testing sites in that pdf that are designed to facilitate testing and browsers you might not have on your computer. You can download the latest version so the most popular ones for free and you should, and if you want to go back and see how your page but looking internet explorer seven point oh, and even though we're in a much later version now you'll find those in those browser testing sites in that pdf, I believe candy has a question, yes, so with the tar differs, we always have external hard drives and that's where we keep our photographs, so I see you copy. All the images in but still gave you that era so what should we do? You're confusing two different things, ok? And let me make sure I'm very clear about that then just so I don't confuse us. Let me just hide this for a second and go back to the desktop that's that error message I got so the way that I fixed that should not even be an issue for most of you if you have multiple hard drives. That's okay, it's just if the website main folder for the website um, is in an external hard drive, so use enough hard drive space for your main website folder, and you won't have a preview in google problem. You can have all your high res images on those external drives you could even have optimized images on those external drives when you insert them into dreamweaver dream member will copy them into your roof older, and you'll only end up with the things you're using in your roof older just make sure that route folder is actually on your primary hard drive and you won't have the problem I had before the break. So I have copy both of these here, and I'm just going to do that site set up process one more time because you have to do it every time you work on a site and we'll jump into some html so remembers you get to that either by going to manage sites or just cite new site once you've set up a site that's there, but I'm gonna set up the html site again. You khun name sites whatever you want, but I'm going to find on the desktop a folder called html lesson and we're going to spend a little time now going into html tags, so I've created this page with a bunch of html tags on it. We're going to form at those and see ss we're gonna look at the code behind the scenes at what that looks like and teach you just the most basics html tags before I do that, let me just select c I have ah, did a tagger illness and a container these air, um a channel tags with css styles names on them could actually remove those for a second. So so you get rid of tags. Sorry to confuse you. I just wanted to start over so I could show you how to do that. Okay, sometimes you forget to undo what you did when you start a lawsuit. Ok, so let's start with some basic html formatting on one of the best ways to learn. Html injury mover is here's the split view it's up here at the very top, we have code new split view design do and then live you showed up in some of the later versions it's not in cs for money insurance and c s five it's definitely ncs six and sisi and that gets to the fact that design view and dreamweaver it's really the equivalent of a web browser a couple versions older and live view is the more recent, um, browser specifications. So if you're looking at a web page and dreamweaver and you're using the latest things like css three with rounded corners and fancy fonts, you'll only see those displayed. If you're using live, you could show an example, but just to point the what that is, you're not wondering. Mostly we're gonna be a design. We were split view code view is just the code and oh, boy, I don't want to work with that. I, like split view this middle option it's, the goldilocks choice I can see design do, and I can see the code. So if I look at things like doc type, remember I was talking about the doc type is what appears at the very top of the nation will document that's what tells the browser what flavor or what version of aged, familiar use and exits tomorrow, one point oh, transitional, which is the flavor of html that by default dreamweaver cia six does that's a two line doc type with a whole bunch of stuff you don't have to understand it all dreamweaver puts that in for you automatically I wanted to point out that an html five if you create a document and eighteen h two o five it's a much simpler document doc type but all you really have to know is this stuff at the top you shouldn't delete issue at it it just tells the balls or what version of this okay then you get to the first each tunnel tag now it really should just be html but there's some extra information in here again telling the browser some specifications about how this page is designed again you don't have to worry about that the first time that really matters is this head tag and the head tag which has a close had tagged let's zoom in a little bit and let me make the font size bigger um at the very top in the head region we store things like the page title remember I said before you do anything in your pages should put a title appear that's up here in the code but never displays in the page itself ok for the most part all this stuff up here at the top you don't really have to worry too much about this is also where a lot of java script gets stored this is where internal css files get stored or css rules but the h male page itself really starts with the body attack so body tag is one you should get in your head the body tag matters. The body tag is the tag that controls things that control everything on the page the body of the page so then we start looking to some of these html tags and basically get back into the middle does not there we go. Okay, so a channel texts so we have the head title body tax right? That's all at the top and we have things like paragraph tax now you might be used to be able to just hit the return key and get a paragraph. And what do we get over here when we get these p tags that's, right? I was going to go into preferences at it preferences in on windows. It's added preferences on mac it's dreamweaver preferences and I'm going to go into fonts and I'm gonna make the code view font way bigger. You may or may not want to do this, but it will help you. I believe to see what I'm doing on this video. I make that bigger again I'm working at a computer resolution not optimal for dream weaver I may not be able to do this if I return, if it all huh? Yeah, okay dreamweaver, like most of the creative suite programs, was made to work on a pretty good sized monitor so at this lower resolution, which helps you see things on the video it's a little tricky to use this is not the setting I would prefer, but it makes it easier for you to read and I just increased the ht mo fall in size just so that you can see what I'm doing in the background. You don't have to do that and what doesn't? I want you to be able to see when I inserted those paragraph tags when I hit the return key dreamweaver put in paragraph tags with a non breaking space code between them. I don't have to worry too much about that, but if you put empty paragraph tags and that's what dream weaver will dio paragraph times, they're generally used around thing, so all asian male tags haven't opened a bag like this p for paragraph and a closed tag like this slash b for end paragraph so that's the open paragraph and that's the close paragraph it tells the browser the paragraph starts here and ends there, then there's this thing called the break tag the brake tag because I have to break a rule listen as I teach it is one of the few that doesn't have an open and close break tag is just all by itself break and sometimes it has a forward slash and sometimes it doesn't and that's about whether you using the strict ex html one point oh, or you're using standard a she male operational five a lot of details you don't always have to worry about, but the thing that you do probably want to know is that if you don't have p tags or be tags you don't have any space so I can put as much faces I want so here I put a couple of paragraph tag dreamweaver put that in if I delete that that space goes away and designed you if I'm over here in code new I can put in all the returns I want and it doesn't change design view without paragraph or break tags there's no space in the display so you can kind of put as much space as you want in code view and if that helps you to see things that's fine so in design view if I had the return can get a paragraph and then you say, well what if I just want a space without the whole line break like every time you do that if I type in more tax than they have returned and I type it's more text right that's where the breakdown comes in so the break tag by delete that I hold downshift return no this I wrote that here shift return and I get a break tack okay, so hit return or enter you get a paragraph tag it shift return and you get a break tag and that allows you to create lines one after another versus lines with an extra space with css you can actually get rid of all of that space and have very precise control around the space but in standard html paragraph and break return shift return and we get to some things that are gonna seem kind of obvious like bold ok let's uh zoom back out a little bit so I can see my property inspector down here at the bottom in the property inspector remember the property inspector displays the options for whatever is selected in the workspace if it's not visible goto window and choose properties or you can use the designer lay out like I am if your screen doesn't look exactly like mine. So if I select bold here the word bold and I want to make it bolan it seems pretty obvious to click on that capital b when I click on that I get a tag called strong we just get rid of that break tag so we don't confuse you hear so bold is actually a tag called strong it used to be be wouldn't that make more sense if old was the b tag and not the strong tag and if I do italics you'd think that might be I but no it's emphasis emphasis really yeah emphasis so what's that about and I want to go quickly through the so you don't have to memorize this you just have to start getting familiar with some basic things all tags have open and close the open starts at the beginning the closed tag if I bring this over has a forward slash at the beginning almost all tax data italics is empress is bold is strong okay I can start looking for that that is actually formatting that we can do a css in html not to confuse you h phil has some formatting built in but we're going to override most of that was css but I just want you to be aware of what the h mill is and using a little bold in italics tags here and they're perfectly acceptable heading tags are especially important so you might remember there is heading one and those air also down here at the bottom so having one tag and then I can do the heading to tag and then I can do the heading three tack and look what's happening and this is a trick in formatting and part of why learning some html is helpful. All of these things are separated by break tax and dreamweaver sometimes gets confused if all your stuff is separated by break tags about where those html tags should start and finish I'm gonna throw some paragraph tags in here and it's going to think that it should have h three tags because I haven't aged three around here, it's not making paragraph taxing, and if I put some returns room these I'm getting this kind of messy code. This is why hard core programmers don't always like dream weaver, because all I really wanted was to form at this with an h one, and I've got all this other stuff going on in the background, but because all that text was side by side by side and dream, we heard it was unclear when I was highlighting things where those tags should go, and one of the reasons that I keep split view open house on formatting s so that I can see wait a minute, first thing I wanted to do was highlight that one with an h one, and I wanted to be an age one, okay, now that really is a heading one that I've got this extra break tag I don't even want sometimes that's easier to delete in the code than to try and fix over here. Now I can select the heading to, and I can put the age to tag around it, and I can see that it really gave it in each to tag. This is really important because if the code behind the scenes isn't clean isn't what I really intended to be then I'm going to have some trouble with formatting around that later I got this extra space here that's going to throw off you see how that h three is a little bit lower than I might want it sometimes it's hard to tell there's an extra break tag until you look in the code and you start to understand just a few of these h two mil attacks the paragraph tags and the break tags in particular and then things like oh heading free for age three and now you see I took out that right tag and it lines up better here's kind of a cool thing to anywhere in design new if you double click on something it gets highlighted in code so it's really easy to find your place back and forth and so you know that when I really wanted to be an age four I was trying to get that to be aged for but because these air still close together dream weavers getting confused now I've got these extra break tags and here against I want to clean that up a little bit groups what happened I took a little bit of that bracket no code is very sensitive so that is not going to work right see that that stream we were telling me there's an error my coat something as simple as a little bracket missing makes a big difference. This is why it's so nice to let dreamweaver do some of this stuff for you so you don't have to worry about those little typos. You just have to kind of keep an eye on it to make sure that it's ok now, because I made a change in code view three members asking me to refresh design do now that I cleaned that up if I select this refresh heading for and I'll come down here and she's heading for so you see, each of these gets smaller and I'm cleaning up this code as I go, and sometimes when you think you're getting paragraph tags, you might get heading tags because dream there's a little confused about what you're actually selecting and how it should form at that, so you just have to kind of keep an eye in the background for extra break tags and extra paragraph tags. If you ever have some space in your design, that doesn't quite look right that's probably what's going on is there's just some extra break tag, and sometimes the easiest way to get rid of that is just to go into code view and delete it. Forgive me for moving around, so now you see how heading one heading to heading three, and you can see how those heading tags air spokes toe look and that that's pretty straightforward, right? You've already learned to meet, you know, h one tells the browser to start the heading one for meeting there and close h one tells it to end it there. Just a couple more things, list items are especially problematic when you've got extra spaces around them or not enough space is you really have to have paragraph tags around list items for the torque and that if I look over here in the code, it's still got that h three tie going on. Well, if you see that and you don't want to actually change it in the code, you, if you're a little nervous to do that, there's another way to do it. Let me show you if I highlight this, I can see that the h three is selected I really just want a paragraph tag around there and so the same way that you can apply, heading tags around elements you can apply paragraph tags around them and what's important for that is if you're going to format it something as an un ordered orin ordered list, like a numbered list or a bulleted list. What we mean by that, you first have to have them set off by paragraph tags, or that numbered list won't work. So now that those air both in paragraph tags when I hit the bullets, I'll get bullets, but down here, because these are still just separated by break tags. If I hit the bullet dream, weaver was kind of confused by what I want someone undo you need to make sure that you have paragraph tags around it before you do the bulleted list for those list items to look right if I look in the code here again, just a little more humo and again, I don't expect you to memorize this. You can read their lots of cheat sheets and dream weaver has all this, but you ellis for a kn ordered list and that's how you form out a list and then allies for list item so each of these items is a list item, and that becomes really important in css because if you don't know what those tags are, then the styles that change those tags could be very confusing. So just getting a little familiarity about some of this, so we've still got dreamweaver thinking, I want to know in order less that's really not what I want dream weaver, you are misbehaving and that could be a problem so over here I can come down here and say, wow, how did that in order to list hag end up all the way down there that's the clothes tag right? Because that forward slash for that one ordered list and it's down under all these other things that I didn't even want formatted with the list this document is actually being a little more problematic to format than I even intended and I wanted you to see its grew up but let me just get rid of those break tags and put this close list item here and we'll just have that I'll be one list um I was going to make that an order list on that and on order list let's we're done with less tags they're kind of confusing it let's jump the tables and we don't want to do each tomorrow all day. What about quick question about this from simcox in colorado belted html editor have any trouble shooting aids for example helping to find missing closing tags are unbalanced while you ask the next question is while I'm gonna hold my nose please turn off also another quick display question will's willis creek ass when using split view can you place the windows above and below each other instead of side by side that's an excellent those are both excellent questions so um let me zoom back up for a second so split view is a preference and let me remember where that has I believe that in the preferences and that's a that's a question that may come from somebody who used to use the program there are two ways to fix that and I haven't looked for it and while there is a way to change the orientation of split view I'm gonna come back after the break with that answer because I know I know it and I haven't looked for a while and it's not obvious but you can definitely have split view be either way if somebody knows that wants to chat where that is I would welcome that I'd give you chocolate if you were in the room but by default it side by side now but in some layouts it's it's one above the other some of these layouts will do that for you but there's another way to force that so dpt can not sure this is iraq accurate view split vertically yes see look at that so I'll always know yeah um and here's how you get horizontal u d select split vertically you know that's why it's a little tricky to find so if you don't have you split vertically selected it will be one on top of the other if you select it it will split vertically and that's really completely up to you and how you like to work whether you like to have that code and it also made to spend on the layout and how bigger monitor is where you want that those tags, table tags or something a lot of people ask me about even though we don't use them very much anymore we don't use them for formatting anymore you do still use them if you're working on something like an excel file which I believe if I can get back to my testa I have a little excel file for you so you can see how this works so if you're actually working with tabular data meeting things that might be in an excel file let's see there we go so if we have a little table of the height of our jumpers from our jump start website, I can copy this and now let's look, this is one, two, three, four, five rows and two columns, right? So in dream weaver, I'm gonna want to create a table I'm just going to insert it here insert table and I'm going to make a table that is what was it? Five columns to rose to rose five columns I always get those backwards two columns five rose I think that's right um we can make that table is why it is we want this is the insert table option and I also want you to see which is kind of cool I'll make that the border a little bit thicker whether you're working and design, view or code do those design features are always available so if you have something from excel you saw I copied that from the excel file now I'm just highlighting those table cells and I can just pace this right into here and that tables for men it which is kind of handy the other thing I would recommend is if you have table headers like this that you actually form out those as headers again that's going to change the code a little bit and it's going to indicate to non humans and humans who are visually impaired which of these table cells have data and which ones airhead ourselves and that's particularly important for accessibility. So what do we have for the tags? Well there's a table tag that says start the table here and there's an end table forwards last table it's got some attributes here in html that just set the witham order you can also set those in css but you can suck them right in the html if you want the quick easy fix there's a table row there's a table header and there are table data cells again you don't have to remember this just aren't getting familiar I just want you to be able to go over the code and not go oh this the hat see I didn't tell his loud that time, ok so we have a table now, perhaps the most important what I would call building block of web design today is the day of attack, and they're a couple ways to make give tags and dreamweaver an easy one is to choose, insert, layout, object did attack, and you'll see the dream weaver is going to bring up a dialogue about what kind of depth tag, whether I want to associate a css rule with this at the same time. For now, I'm just going to say, ok, and I want you to see this is a little dotted line here. The diff tag is really just a box on a lot of people get confused, his did tag part of css, no, the depth tag is the html, it creates the box, it creates the structure, the css puts the style on that of tag it tells it how being that gift tag should be, how wide, whether it should have a border, whether it should be aligned to the writer left, and in the code view, you'll see that dip tag is just the word div and close teoh got some extra break tags in here in a paragraph tag, don't worry about that when you really want to see me back there, so I have an open date of tag and a closed of tak, so most web pages that are done to modern standards today are built with a siri's of divx tags and all the content in those death tax and in those days tags you might have on ordered lists and headings tags and break tags and paragraph tags everything goes and if tax and you'll see that in all of the layout span tags are a little different span tags are the difference between in line and block elements I'm just going to take this one in so I can show you that over here you can type span and notice as I start start two types fan and somebody asked are there helpful tools in code you if you start to type in an html tags you know it dreamweaver will try to help you to finish it I didn't let it do that they're um and now that I have a span there if I just put the bracket the close bracket and the forward slash dreamweaver automatically puts in the close ban it assumes I want to close the tag I opened so there are some kind of handy tools there as you start to form at things the image tagging the link tag will look at when we knock it links there very different they don't have opening closed tags and then the body and h e mill closed the page so at the very top up here when a nation will tag that started the document we had a body tag that started the body part of the page, and down here, that body tag it's closed. Okay, so that is the quickest, fastest, dirtiest way I could show you the very basics of a schimmel, but here's, the thing to know if you just go to look at the list of a channel tags, they're all lot of, um, but if you actually look at most web pages, most web pages were made up of paragraph tags break tags a little bold in italics when you want some quick formatting heading tags very important for showing hierarchy, even if you're using styles to make things look very different still want a format that, with heading tags, ordered an un ordered lists, you'll see a lot on the web because grouping things together enlists again is helpful to non humans on your web sites, tables on ly when it's tabular data, but absolutely appropriate when it is and deaf tags really being the building block of your web page. So let me show you what I mean, let's, get done with us. Yeah, actually, let me take some questions quick. Yeah, just real quickly, I didn't see what the span tag dot right, so let's let's, look at what the span tag does in the context of some css spanned hang allows you to essentially put something around text that doesn't force a line break. So if I want to apply styles, this will make more sense as I start to do it. Um, I need something to apply those styles to if it's a day of tagged and there's certain rules about what happens if it's a span tangled and can apply a style to award in the middle of a paragraph as opposed to something bigger. Simple answer hopefully will display this soon and were questions about defining tags. Can you discuss td and tr tags so tnt, our table data, taping row and table header and again without making this just in a sumo class. Let me just show you that real quick because there was a question we're looking to see I selected the table so dream weaver took me right to that place in the code. If I double click on the word jumper, it takes me right there and I can see this table is formatted with a table tag. Each tr creates a table row each t h thies tags th and closed age are each of these table had ourselves and then there's another table row, right, and then their table data cells inside there, okay? So that's, all just the elements of the table broken out and when we used to have to use tables to do all of the layout in web design and we didn't have visual tools like this, the's could get really messy and complicated. And if you open up an old website that somebody else created years ago and you see a whole lot of table in here and it's not tabular data it's just the layout that's a really good time to start over, create the layout, css coffee and paste the content in without the tags because that's, a very old approached a web design. Do we have another burning question? Er sided, great. So what I want to do now is set up a new site and start building our jumpstart site so we can start getting in and practically using some of this. So I'm going to go ahead and I'm going toe set, do the site set up, even though I've done this a couple times jump start talent agency remember, you can call this anything you want, although it's going to objectify used the same name twice, so let's do jump start talent on the desktop? Why did I put it on the desktop? Because of that quirky problem, a month of hard drives on this computer? Otherwise, that should never be a problem for anybody. So I wanna make sure I'm on the desktop and I'm choosing that one and my preview and google chrome should work now save okay, so here's, the web site completed, and I'm just going to use some of the assets in here and add some more pages, you can choose how you do this, you could create a completely new blank site and start over, or you can have this site and just kind of do it on top of it, and it really doesn't matter what we're going toe recreate as much of this site is we have time for today in the class, so I'm going to start by creating some new documents, and the first one I'm going to do is, um, just create a couple of quick, css tricks not even specific to this layout, but just to show you using these assets. So if I just create a new, completely like html five and I'm going to get rid of designed you, I'm just going to insert a couple images in here real quick, and I'll show you there are a couple of ways to insert images, so going to insert image. They can go into this gallery folder and I can start picking some of these wonderful images. Whoops. How come it's saying this isn't there? Ah, what did I do when I created this page? What did I not do that actually always do save it? And that's why I'm getting this her it's actually not an error is just saying we're going to create a temporary path till you actually save that page and we know where it is I'm gonna say, ok? And I'm going to start using just a really, really brief alternate text, but I still suggest that you actually put a description in there. Now, the image is still here and it's fine, but what during liver was saying is that path goes all the way across your hard drive, right that's not gonna work when I put it up on a server because that's not going to the same path, but watch what happens as soon as I save this document that I'm gonna call this test page because I'm just doing this to mess around. A soon as I do, that tumor says, oh, you're in the same folder were in aiken, simplify that path, okay, so that's, why site set up so important that's why saving pages is so important and dreamweaver we'll try to help you along the way, but so I'm just gonna call this test css, then I'm just going to insert a few pictures in here, so I told you, you can insert images in a couple different ways. Let's grab catherine this time, k there for catherine and let's, insert one more let's do it a different way, though, so over here you'll see that I have a folder with this gallery of images, and I can actually just drag them right from here to which is kind of nice. So if I want to just take maybe reno this time, click and drag our torino, so now I've got three pictures in place, all right, that's cool. Now right away you may say, well, those are all different sizes, so this is a place where sometimes if I'm just trying to line up photos and I don't want to go back in the photo shop, I might just do a quick crop of some images, but I'm not going to worry about that here. I just want you to know that you can crop images in dream we were just being where that will actually crop that image file. If you want the bigger version again, you have to go back to photo shop and say that again, let's put three more photos down below this let's put ryan here and maybe nobu get a little boy toy in there for you I told you I'm an equal opportunity I can't he can't a girl on mali is pretty cute let's put her in there too. Okay, so two rows of images that's all right now it's pretty common when you're doing live designed that you might want to create like a page of thumbnails on you probably wouldn't want him all bumped up against each other like that right? You might want them spread around the page and you might want them evenly spread around the page so let me start to show you where css pays off because until now it's been like learning to scuba dive all that stuff you khun die under water from you know not a lot of fun we'll show you that when you start to understand how css works and why you use one tag over another sometimes you can do very powerful things very fast so let's say that I want all of these images spread across the page no, I can create lots of different kinds of new styles and I can do that in a couple of different ways reset my janine workspace I can do that a couple of ways I can use this little button down here the new css rule I'm in the css styles panel on the right here and at the bottom of it if you can see it there are a couple of little icons one of them is this little tiny plus sign but let's be created a new css rule you can also get to this under the format menu css styles new when you create a new style the first thing you got is this new css rule so we're creating a new style we're going to use to form at the images that we inserted with html we inserted the images now we're going to use to css to control where those are and we could create a number of different kinds of styles class styles idee styles tag styles and compound styles in this particular case I'm gonna choose a tag style what tag styles dio are redefine existing h m o so we just learned all those html tags and we saw what the heading one tag looks like what the heading six tag looks like we saw what an unloaded list looks like when you insert an image it puts all the images side by side starting in the top left corner and that's the default htm l but using the tag setting or the tag selector we can redefine any html tag this by the way is all the html I could have talked I tried to limit it to just the things that are most important and the tag that I'm interested in right now is the image tag which is thie I m g for image tack okay and down here it says the selector name will have higher rule to all in the elements ok that's what I want to do I want to change the positioning of all of the images on this page so it's probably a good choice again with some repetition all over this a few times you can define your styles as internal or external in this document on ly internal in the head region of this document or I can create a new external style she link it all at the same time and create an external I'm not gonna worry about that just going to create an internal style sheet which will be saved in this document now that doesn't mean I recommend internal over extra only of different uses and for the most part in actual websites all use external style sheets because they're more efficient but I can always move these styles into an external style she later so you'll see that I often start with an internal style sheet so this document only means I'm creating an internal style shape click ok now we get to this dialogue so again just bear with me here there are a whole bunch of different options in this dialogue these air all formatting settings so if there were text on this page I maybe eighty creating styles about the font family or the size but what I want to do is change the spacing around these images somebody go to the box category the box category has something called padding and margin and you will use this a lot, but the first time you see it, it may not make much sense, but think about it this way if a diff tag is a box I can put padding inside that box I can put margins outside that box and by using padding in margin I can control how close things are to each other and how much room they take up on the page and how much space there is around. So I have images on the page and I want to put space on the outside of them to force them to be apart from each other. I'm gonna put margin space around them and I'm going to show you how by simply adding let's, just start with twenty five pixels of margin on the right and the left and now I've done a lot of things to get here I'm gonna do this again so you'll see it. But it's going to be a dramatic change quickly because I've just said for every image on this page had twenty five pixels of blank margin space on each side and watch what happens when I click ok boom look at that all six of those images moved automatically and I hope that starts to give you a glimpse of why css is worth learning because rather than try and position each of those air create a separate style for each one, I just went boom and they all changed that's pretty cool. Now I've got the style over here, you'll see dreamweaver created a style called image and down here you see the properties. If you don't see this, just move these boxes around until this was visible. You want to see the properties pain underneath the css styles panel I'm looking at all current would only show me whatever selected and what's applied to that all shows all of the styles currently in this document. There also some settings down here, the control what's visible. So get this set up so that you can see what you're doing. So I've created a style for image and if I click on it, you see those properties you see my margin left and large and right. And if I wanted to change that, I have two options. Aiken, doubleclick, go back to this dialogue I was using and change it here. So let's say that's not enough let's put fifty pixels on each side and see how it looks. Ok, cool now have spread them out even more. And then I said, you know, actually, I think I want sixty. Well, you know what? I can do it right here, right in the property of spain. I don't even have to open that back up if I see it and they just want to change it, I can change it there. Cool. What else could I do? Well, I could put frames around these. I could put borders around these. That might be a nice thing to do to my images. So again, double clicking I can go into the border category. Notice that these categories start to make sense is you start creating styles, huh? I want to put a border around here. Wow. A lot of different options. I could put a solid border. I could make it thin or thick. Let's make it five pixels. So you see how many options we have and let's make it a nice light gray color may be a little darker grace. It can see it on this monitor. And now, here's kind of a cool thing. When you're working with styles, you can apply and see how it looks right away. And then if that's what you wanted, you can click ok, so you see all that in one cyle, this particular style is specific to the image time but here's, where you could start to have trouble, you think? Ok, I created a style for image on set. Well, now, let's see what if it the top of this page? I wanted to put that nice banner image I created no again, there are a couple ways to create banners, but I have a nice banner in my jump start. No one has the logo and all that other stuff in it. I think it's in my images folder and go grab that so I couldn't find a jump start on her gets this one again. If you've got a text on an image always good to put that text, note that it's, not it. You know, I'm used to seeing a preview of the images and I'm not used to setting that whole windows user on a mac it's so embarrassing there we go, that's what I want so I could see what I'm doing all right, there we go, so jump start. So I'm inserting the banner just again using insert image and putting it out there. But I want you to see I don't really want that gray bar around my banner I only wanted around those images, so now you get into this challenge about css, which is that there are always multiple ways to do the same thing. So there was some efficiency to using that image tag to all of those images at once, but now every image has a border and that much spacing and that's, not what I want. So then you get into why there are other kinds of style options and why you might want different styles at different times. So let's say, you know what? I think I was wrong about that, I think an image style that did all that wasn't really what I want let's, get rid of that. I'm just going to select it, head to lead and it's gone. I get to start over clean slate so it's easily as you create a style, you can delete a style. So now let's, think about styling there's a little differently. What if before I style these images before I created a style for these images? What if I put them in a def tag so that I could target them separately? Now? Some people will put the diff tags into the page and then insert the content into him that's perfectly fine, but if you've already got some content in a page and you want to insert the deaf tag around it, you can simply select those images choose, insert layout, object deaf tag now. Starting to make sense stream we was asking me, do I want to put a style on at the same time? Well, haven't created the style yet I could well do that in a minute, but this time let's just say ok? And you see that all dream weaver did was put a div tag around these images. I got a split view you'll see that opened if tag and closed of tag, and then between there's a paragraph tag around everything and their three images that's that I m g s r c with the address to the image that the dip tack around three images it's a box when you say, you know what I think for this box, I want to create a style let's say I want one background color between these three images on another background color between big kind, the three images below it, and maybe I want a position them different distances from each other. Well, this is going to take you through three different kinds of styles. Pretty quickly, we created the tag style it applied to all of them. Now we're going to create a class style so their class idea tag and compound styles tag styles redefine existing html tags, you're not going to name those, you're just going to select the html tags you want to redefine but class and I d styles are completely new styles that you can name anything you want which could be a little confusing at first anything yes anything white no spaces there special characters right that's true in almost everything that web design that dash is ok but no spaces there special characters here's the thing that also confuses people class and I d styles work very, very similar with two different rules the way they're written, class styles always start with a dot on I'd styles always start with the pound sign no big deal but that's the rule class styles always start with the dot I d styles always start with a pound sign I'll say that again I promise the other difference that's the class styles could be used as many times as you want I d styles could only be used once per page so why does that matter? Will you say, well, I'd probably use class styles most of the time I might want to use the style again, right? And for the most part you'd be right most of us whose class styles most of the time and until you get more advanced with css you may not even need I d styles because that starts to become important when you start to have increasingly complex css style sheets and you need to get increasingly specific and identify things in a way that you might only use one for page so until you get more advanced with css, I'm not gonna have you worry about that it's kind of like forget the subjunctive and spanish, so you get a little more advanced, I'm still working on that one, ok? So we're going to create a class style now, which means that we select class from this drop down and we're going to enter a name for it and we can call it anything we want, but I'm gonna call this one grow one because I'm going to use it to form at the first row. I find it helpful to name things that have something to do with what I'm doing now. There should be a period at the beginning of this sadat, because it's a class style, but because I chose clash there when I click ok, dream weaver is going to put that dot on there for me, you see that so you can put the dot there if you want, but if you choose class during we were will do that for you. So this is my style for row one and all I wanted to do was poor background color that so let's put a light gray background color uh dark blue so it shows up this isn't gonna be pretty but it's going to demonstrate when I click ok, nothing happened now, when I created a tag style, it immediately applied because it was changing a tag that was already used on the page. This time I've created a class style that is not yet in use on the page. It created the style and it created a div. Now I have to apply that style to the duke and again, they're multiple ways to do it, but the easiest is to selective I'm just clicking on the border of it come down here to properties. Remember the properties panel changes to reflect whatever you've selected, and from here I can see my new style row one has been added to my list of class options. When I click on that that blue background shows up boy, that really is hideous. I have to change that right away, it's making a darker but at least okay, yes, there's a question in the room I know there's some questions online, so when you create a style within this website, if you created another website, will those styles appear well? That's where external style sheets could be really useful and we'll get to that in a bit. I'll copy these styles from the internal style sheet into an external dot css file, and then that file I could move to any site anywhere or use on any or all of the pages in my sight. Let me show you again how I did that and do a little different, and then I'll show you compound styles and how they work, okay? So again, I'm just going to select all three of those, and I'm going to insert a tiff tag again there a couple of ways to do these things, so if I'm in layout in the insert panel over here on the right, you'll see that the insert def tag option is handy, so you could always go up to insert layout object if tag, but if you're doing this a lot, which it happens a lot when you're working with a with layouts like this, select these three and it's just handy over here to click insert def tag again, it's going to just put a box around here, right? So quick, ok, and there's a box that divx tag is just a box think of it as a container, but also think of it as the place I'm going to apply the style so the browser knows where that style should get used, right? So no let's create another style, so new style I can use this little plus I can new, I'm gonna create a class style because I want to be able to use us as many times as I want, and I'm defining a comm pleat lee new style I can start with the dot or not because when I created it as a class style scream, weaver will do that for me but if I'm used to putting the dot in there that's ok, I'm going to call this one road to click ok? And and I'm just gonna put a background color maybe something less hideous how about a light gray that's always a safe choice and I'm gonna click ok and again you're not going to see it until I apply it some selecting the dove tag I'm going on here to class and choosing it and now there's a background cover so all I've done is put boxes around these that have background colors but now here's one of the other things that's kind of cool one style khun do multiple things, so if I wanted to get back that spacing between those two say they're not right next to each other, those images because they will you know what in that role one I'd also like to change the way um the images are positioned now in this case we're going to create a compound style because although we could change the image so applied to all images, we really just want to affect the images in one part of the page and have them be different than the images in another part of the page so now that we've styled these two sections of the page to use different styles on the death tax, we can define image tags that our compound meaning they onley work inside those styles applied to those dip tags and we can start to target things more specifically it's let me show you that real quick and then we'll get we'll we'll keep repeating this some selecting an image because it's going to give me a nifty shortcut this time when I click on new css rule dream weaver is going to immediately say, oh, you might want to compound style and if you're new to see assess the first time you see this would be like, well, what is all that right? I kind of get that role one is a class style I kind of get that I am g and pierre html tags so that's a p tag and an image tag, but what is all that? Well, dream? Weaver is now saying that the style that I'm about to create well on ly impact images if they appear inside something like the stiff tag that's already formatted with a style called road at one it's also picking up that there's a paragraph tag in there that's optional I might say, you know what I don't want that I might get rid of that paragraph tag, but I really want is just to target the image tag inside this deaf tag I may or may not use paragraph tax so you can edit that as you go it's a little advanced but following click ok and now I'm gonna go back and I'm just going to do what I did for those images I'm just gonna put twenty five pixels of patting on each one and now because that style has already applied to the divide and because I'm changing the image tag this is really a tag style compounded by being inside the class style when I apply it instantly apply and I could say I'd like to do that for here but I'd like it to be more space so and create a new style and again during movers go say oh in row two you wanted to find the image tag I can leave the paragraph tag if I know I'm always going to pee tag that's fine that's optional it'll work the same way either way unless I removed the pitak which I'll show you so now I could say ok let's do a box and let's put uh fifty on each side of this one again apply it will instantly if I click ok cool so now you see I've been able tio do compound styles which simply mean siles put together and target things more specifically on the page there's one of the reasons we do compound styles and I'll show you how that p tag this is a part of the screen I want you to really get used to looking at down here in the bottom left you see how I if I click on this image dream weaver told me oh you've selected an image that's inside a paragraph tag that's inside a div with a class style of row two that's inside the body tack right start to see how each melon css right and now I could say you know what let's get rid of that paragraph style there a number of ways to get rid of sorry paragraph tag that's an age to attack their number of ways to get rid of a paragraph tag I could go into the code and I could delete it but it's kind of a handy thing this is a little advanced but I can right click just on that paragraph tag and say remove tag and look at that when I did that that formatting went away why? Because over here I have two class styles one of them says if the images in row one spread it out this is rolling now because I've made the screen smaller it's wrapping now because there's not enough room for that whole row this one says in row two if you're in row two and there's a paragraph tag around you and it's an image shag apply but if that paragraph time goes away it's not going to work anymore so compound styles can look a really complicated at first and you wonder why people string all these things together and they can get as complicated as shakespeare can in writing prose but the simple idea of compound stiles is targeting specifically on lee in this instance will this particular set of styles apply ok ok so that was the quick overview now we're going to go deeper and deeper with some repetition so I don't even need to say that quick quick before you might even be jumping right into this but uh cave be designed group asked can you control the size of the dip tag around the images oh yes and we're going to do we're getting a questions we're going there ok second question what you might be diving into this as well but can you create an action or a preset to bring images in that become all the same size and then I'd love to add on to that can you select images like on the pitch that you were just showing can you select all three images and do an action that makes them all fit within a window if that makes sense evenly few people who are used to working in print just make it so I love these are all good questions let me keep going until you some things that are possible I would say in terms of the preset question you know the best answer to that is set up your macro and photoshopped to resize all the images the way you want them sorry for live around here um get your macro set up in photo shop, optimize all your j pegs to be exactly the same size in photo shop and then bring them into dreamweaver you can click and drag much images and insert them all at once and then create a style that applies to a whole bunch of images and position them all at once that much efficiency I can give you you can set up macros and dreamweaver they're not as efficient as the ones and photoshopped they're not his common tears let me keep pushing ahead here a little bit let me create the about page in wordpress which is a little more complex mean intrigue we were you know I taught worry process a dream we were teach dream where I say wordpress I love both tools they each other place I'm gonna create a new page I'm going to create a blank html page and this time I'm going to start with one of these preset layouts something to scroll down here remember there are all these different options there's fixed and there's liquid what the heck is that? Well, liquid is going to be a little flexible not quite responsive that's ah more advance nothing I'm going to start with fixed at this point because when you're new to css dealing with fixed position with is a little more intuitive than trying to deal with things that move around unpredictable things happen as soon as you start letting stuff move around, you'll get to that and I recommend it but we're going to start with fixed to keep it simple so we're going to do a fixed with a left side bar I get amusing exits to mo one point a transitional if you want to push ahead html five this is where you select that butt sticking with the standard and dreamweaver cia six keeping it basic today we're going to use that option again I'm choosing had to head, which means I want to create an internal style sheet but again I'm going to show you in a little bit how to copy internal styles into an external style sheet and that's generally what I do in the end on a website but I'm going to create this page and dream weaver is going to give me a head start this time and I wanted to show you a page with no style so you could appreciate it first this page has a whole bunch of styles already defined so you see all those styles already there so what do we got here? We got a body style that's a tag style all right? We're going to find a tag on it close the files panel zoom in a little bit we have this is not a compound style this is a style that affects all of the un ordered ordered and I forget what that third list that nobody ever uses is all of those lists at once when it zeroes out the margin and patting that the html automatically put in there and you think why the heck would anybody do that? He started in one of these layouts and already there's something confusing these are called css resets I'm gonna teach you even basic css I have to warn you but not all browsers display css the same way and it's again the challenge of this evolution of the web that html standards have changed css standards have changed and browser makers who are companies that work independently from the w three see that's that's the standards for the web don't always work in sync so it's very common in the history of the internet and in the challenge of designing today that some of the html tags that have standard a little bit of padding above and below the paragraph tag or a little bit of padding above and below the un ordered list will be more patting an internet explorer less padding and fireworks more in safari just using that as an example because those aren't set the same across all browsers many css designers have adopted what we call the resets which means that the first thing we do is zero out the spacing that comes with both to those tags. So the first thing you see in these layouts is some stuff that may not even make sense that's about trying to make sure that all of these tags whenever you use them display more consistently in web browsers then we have some more tag stiles is there actually link styles? Then we have wait hey there's a dot at the beginning of that what's that mean it's ah class style because class styles always start with the dod so if there's no doubt at the beginning it's probably a tag right? These air tag styles even if you don't know a lot about a smell now that colon don't be confused that's because the anchor tag which creates links has multiple states get that bit containers class styles compound styles right so these air on ordered lists on lee when they're in content this is another way of writing a compound style but it basically does the same thing this a northern list this rule that effects on the air unless on ly affects things in the knave active in the dude that's assigned now and then there's a footer, huh? Thank god that was pretty clear, right? You can probably guess that if there's a footer it's going to form at the stuff at the bottom of the page so let's start there because that's the first one that made sense right so if you're not sure if I select something like this I told you this place down here in the bottom right hand corner is only valuable if I select this tiv in a page like this with a whole bunch of styles then this could be something somebody else designed that I got to take over you're working on your church web site and who knows how they designed it you can click on any element come down here to the bottom and say oh whatever is controlling that background color is a class style called footer ok well let's go find it hey look at that on my list of css styles when I'm looking at all the styles I see there's a store called footer and sure enough because I've got the properties pain open so I can see it I could see that background color kind of matches so said you know I think I want that nice silver gray color as my background color I could just change it right there and quickly start changing this layout so the first up is kind of understanding what all these css styles do and some of that fundamentals about when you use these different selectors but the other real challenge is identifying what style is affecting each part of the page so up here if I put my cursor in this space and again I come down here to the bottom and I look ok that must be styled by something called dot header it must be a class style called header that's controlling that hideous green color at the top of the page so if I come over here they're saying look look there's a style called header yes and there is that hideous green u let's just get rid of that completely now I have two choices I could make it white or I can remove that color what do you think happens if I just take that color away and I say there's no color can you see what color is in the background of this page see that dark gray color that's actually the background behind the page there's a dip in the middle somebody asked can we set a with on this so the div that controls the overall size of this page has a whip and everything else in the background depending on how big the riser is is that dark gray color in the background if I take the header color away completely by just elated then that should show through except it's actually inside container that also has that so let me take that away there we go so if I take those colors away that's the container has a white background and the header had a way back when I took those away you see the background color behind it so say well where's that background color controlled well that's in the body tack member everything in the pain, jj is controlled in that body attack. So if you're looking for where is the background color for the whole page that's going to be in the body attack, and again, I can just selected here and changing in this pain, or I can double click on it, and I get all of these tools, and this is one of the things I really love about dreamweaver, cia six on the previous versions is that you can open up a style, and this css rule definition, that when there's, nothing in it, can look a little cryptic, starts to help you identify what's defined for these styles. So the body of this website is defined, so that the background of the entire page is this dark gray color, and I'm going to change it to a very light gray. And when I click, apply, it's, goingto immediately change the entire background, and it also changed the header, and the content does. Those mainly is in the middle that have their own styles, because of what's called the cascade, right, so css, if it's applied to one element, that's around other things, apply so all the other elements in it, until unless that element gets defined with another style that overrides it, this will make more sense in the second, so I've set the background color and because there's no background color in those other days it shows through this is also where I said things like tight but I'm gonna come back to that so now if I go back to that heather and I say well actually I do want the header to be white I want to change that then I can double click on the header they could set the background toe white okay click ok and you see now it's quite so what's happening is dreamweaver looks at this the browser looks at this and first looks at the body tagging this is overall this page should have a great background and this is oh there's a diff tag and that diff tag has a class style attached to it called header and there's a white background to finding the header so just that area the page to be white and then it gets to the next section of the page which is still defined by this content of and there's a container do around the whole thing. So you see how it's layered absolutely remove this again and show you this in layers so we have a body tag then we have a container and again I could put my cursor and can public cursor anywhere in this page go down to the bottom and start to see the hierarchy I'm in a paragraph tag that's inside a dave with class content that's inside it did with class container and over there on the left if I move over is the body attack and I'm gonna take questions in a second but let me just get through this so the body tigers to find us like gray the container contains everything now again you can name this whatever you want that's a very common thing to call the main div around the layout either container or rapper so I double click on container and I want to see what's defined so there's nothing to find there there's nothing to find their weight in box the witness to find so somebody said can you define the width of the death tax absolutely and this is where you do it in the box settings so the width of this entire pages set to nine sixty and if I wanted to change that to b nine eighty which a lot of people use now and they're targeting ipads you could change it to nine eighty if I want to make a twelve fifty because I know people going to his big monitors and I'm not worried about little monitors I could change that here and it will change the width of everything so if I make this twelve fifty and just click apply you see how the whole box got bigger I'm gonna take it back to nine sixty and just keep it at that for now actually I'm gonna make it nine eighty one to make it nine eighty and click ok so the width of that is nine eighty now I could also set a background in that container so let's say if I made the background of that white and clicked apply then everything in the container whoops I made it gray you make it the same color as the background you don't see a difference if you make it white you see so the backgrounds gray and I'm gonna white container inside that okay then just to show you how this works if I change the head or color to blue apply you see that becomes blue so if things are not defined they inherit whatever is around them so there's a lot of inheritance in css if you start to override that with more specific style so this style that only applies to the header is going to override the white style that applies the whole container is going to override the grey style that applies to the whole page and that's kind of where you start to see this cascade as things go down the page that's pretty simple to understand when you're just looking at background colors it can get more complex if some of those things start to conflict or overlap in strange ways so that's just a primer to sometimes this can get more complicated but that's the basics of setting that up so I'm gonna take that blew back out again? You can just in the properties panel select something and delete it and get rid of the color you don't have to have a color and I want to correct a mistake I didn't save this page again, you guys, you could win chocolate if you caught me on these mistakes it's always say whenever you're creating your page, save it. I'm gonna call this about two because it's the new about paige and I'm going to call this about and I'm gonna stop for a second and take a couple questions, but I will tell you I'm a long way from getting through this stuff actually want to put the banner up there just side of something a little more interesting on the screen. So what? I just did this little holder for the logo I recommend you delete that the creator of these layouts also recommend you delete that before you insert your own logo and you can insert as complicated or simple a banner is you want this is kind of an old fashioned banner to go all the way across the page is not always what we recommend, but we're keeping it simple here modern web pages you might have that broken in half so that as you do responsive designs it can change or shift or you might even use the font tag and little images so you have even more flexibility but keeping it simple and basic you're designing for desktops one big banner across the top is a very common thing people have done for a very long time so let's say there's a bunch of text here that's really just instructions about these layout as I mentioned, you can learn a lot about these layouts just by deleting by the leading by reading what's there but I'm gonna delete what's there I'm just going to select all of that content and deleted I just highlighted it and deleted it I want you to notice some remember I said down here you can see a lot of things see how that's his h one so my cursors up there it's still thinks there's a heading one tag there it's still thinks there's a headline there so if I paste a bunch of text or start typing it's going to be in the h one tag because even though I deleted all that text, the tag remained and that's a common challenge and dream were and it's another place where this could be helpful. If you select this and you actually click on the h one tag, then you will get everything including so if I delete this now you'll see that h one tag went away as well if I undo if I select this and I don't select h one tax specifically then a lot of times when you delete something, the tag that was, they're still there, and that could be a little confusing when you're new to dream. Weaver so just watch this is a place to take a glance at the code in the background or take a glance down here what's going on so about jump start and really about the jumpstart photographer this is going to be a page where I give a little credit to the wonderful photographer who let me use the images you see in the site and it's also a chance to show you one of the most common things we do when we're bringing code or when we're bringing text into a code environment like this and some of the challenges. And that is so my jumpstart talent agency if you got the project files when you bought this, you actually have this file. This is a microsoft word document, and I included this because it's so common to copy word information into dream weaver and there are always challenges with that. So I'm just going to select everything in this except maybe that headline because I already wrote it copy just using, you know, command, see, copy, see, I'm sure you don't have to teach you all that. All tapping the switch back and forth. I do a lot of all tapping and web designed, all tab or control tab switch between photoshopping dream weaver and word and whatever tools amusing, and then you might come back here and just say, hey, I should paste, but if you do that, you will get something I call word crowd avoid word cried that's, another technical term um, or it crowd comes from the fact that word has its own weird formatting built in, and that can actually make a mess in the code and make it very hard to do what you want to do. So you want a paste special, so whenever you paste and dreamweaver don't paste paste special if you're coming from word or any other tool. Now, I got that by right clicking, but you can also get that by just choosing at it paste or paste special, and when you pay special, you get this little dialogue, you can paste text you can paste text with structure, so text was structure is going to keep the paragraph list and table tags. The basic html structure that's fine, but you don't want all the fancy formatting from word, or you'll get strange fought commands and things like that that can really mess up your layout quick, okay? And all that comes in, but my paragraphs aren't quite right. This is a really common problem, and I'm just going to hit, delete and return at the end of each of these paragraphs to put these back there's some automated ways to do this. If you're doing huge files, sometimes all you search a replace toe, fix some of this, but if it's just a little file like this, this is a common problem don't think he did something wrong, just pasting this text in and it's very common to have to go in and fix it a little bit. Um, well, us if you're designing for computer and mobile, is it wise to use fixed like dave's? So that's offense tastic question the on ly reason I'm using fixed with gives I said this as I did it is because as I'm teaching the basics of css, working in a fixed with is just more intuitive and more logical, so this site is designed with fixed with as a teaching tool. It also has two different navigation options as a teaching tool. I would never recommend that on the web today, if you're actually designing for the web and as you get more advanced in html css, then absolutely using fluid layouts and things that are more flexible are the way to design for small and large screens today. But the first thing have to do is learn the basics. And while you're just play around in your sandbox and learning the basics with this site, using that fixed with will help you get a sense of how css works and how things work together, without adding the complexity of the fact that things move unpredictably on different size screens. So it's a good question. And this is this more about teaching them how I would actually do it in real life.