Lessons

Lesson Info

Creating a New Page

I launched Firefox here for a couple reasons. One of them. It has a tool that I think is helpful in understanding how cascading style shoots work. And what I'm gonna do here is just reduced the size here hugely on make websites bigger and these browsers not smaller. But I want you to see more of this layout than is possible at the screen resolution. So I'm just shrinking this down a little so you can see more of the page because I want to show you how responsive design works. I've used that term a couple times. It's a relatively new thing, so not everybody. Sure, the idea of responsive design is you create one HTML page, and then you create three separate CSS documents targeted to the screen size. And as that screen size hits a certain point, the browser says, Oh, I should use the CSS file that goes with this version of the site for tablets. Oh, I should switch now to the Mobile one, and you can tell the response of sight, because if you click and drag the side of the page, watch what ...

happens when I get to the tablet size. See how radically different that is, and then to the mobile size I can get all the way down. She changing the size of resolution. It doesn't want to go all the way down. There's 1/3 version. Trust me, that gets a little smaller again trying to work in this constraint. The idea is that that change is based on the size of the browser, and it's caused by switching style shades. Now, if you're still new to style sheets, this whole idea that style and content are separate can be a very hard thing to get your head around. And there's a feature in Firefox that I think can really help crystallize This Firefox is the only browser I know has this feature. It may be in others, but it's not a feature most of us would use very often. But it's handy for what I'm about to show you. I'm gonna take the page style, and I'm gonna turn off the style sheet. So first, take a look at this page. Let me just tell you, all of this is done with CSS. All the fonts that color that shape around there. This image is actually a background image in a diff tag, so it's created with CSS. These images are inserted into the page, so they're actually in the HTML. So watch what happens when I turn off the style sheet. Different that looks. So I've just removed all the style information. There's a document, a CSS style document associated with this page, and when the browser can associate those two, it makes the page look like this. But when that style sheets taken away, all that's left is just the HTML and the content that's in the national documents. So I still have the text for those links, but they don't have those rounded corners and the colors and the fancy font. I lost this image completely that big banner, because it was in the background, not inserted into the page, and thats done completely in the styles. Here you see the images that were inserted in the page, those air still there, and you see the text that was in each of those boxes. But again, the stylings completely different. And that's what I mean by separating content from style. And that's a pretty radical look at how different a page could look when the style sheets turned on and when the style shapes turned off. So again, I can't teach you everything there is to know about HTML and CSS in this crash course on Dreamweaver. But until you start to understand that all these things in Dreamweaver that seem really convoluted that I have to go over here to change the fund over here have to do with the fact that modern Web design is done in this way separating style from content. And there are a number of efficiencies that come out of that that once you appreciate, make it worth the effort. But at the beginning, until you understand how it can really be complicated, clear is mine more or less. Okay, so let's go back to Dreamweaver. So all we've done so far is insert this text here and this is HTML. So there's no style at all on this page, right? We haven't created a style sheet at all, But if we wanted to change the style of this headline, we first have to define a CSS style sheet. I'm gonna get ahead of myself. I'm gonna throw an image in here just to make this page prettier before I start doing styles because it'll give you something more interesting to look at on the screen and cause it's a relatively simple thing to show you. We put this headline in. We formatted it with an H one tag. For now, we may change. That's easy to change now. I'm just gonna hit the return key, and I'm gonna insert an image into this page in Dreamweaver, there are a number of ways to do almost anything that's true throughout the suite. There almost always two or three ways to do anything. There's a key command. There's Ah, menu item, and there's usually a panel. So over here in the insert panel, if I choose common, you'll see that one of my options is to insert an image. But you'll also find that under the insert menu, insert image, know right away. Say, cheese Dreamweaver. There's multiple choices for everything or he even inserted imaged. I want an image, a rollover image, fireworks. HTML. Fireworks is get another Adobe program similar to photo shop, but more Web focused, and there's some special integration between fireworks and Dreamweaver. If that seems duplicative, it's because fireworks was created by the same company that created Dreamweaver and Adobe, purchased both of many of the fireworks features Air getting integrated into Photoshopped. Not all of them. Fireworks has a very loyal fan base, albeit smaller, much smaller than Photoshopped. We have time. I'll show you how to make a quick roll over image just cause it's kind of fun, and it's really easy to Dio. But all we want to do right now is inserted image. So insert image right here, or you also can choose the insert image option. I want to show you something else. Remember, we set up this site because we want all of the elements in this site to be in this folder. But if I have a folder of images, optimized images that I have gone in a photo shop, but I've optimized my images and they're not yet in that folder, I want you to see what happens when I insert one. So if I choose this photo open, Dreamweaver says, Whoa, wait a minute. You just tried to insert an image into this website, but that image doesn't live in that site folder. Remember this morning we spent a lot of time setting up the site. Because if you don't have everything in that folder, when you move it to the server, things get broken. It's a dream. We were smart enough to say, Whoa, Nellie, this image is it in this folder and it's giving me the option to copy it in here for more on what's really about. That is, if I've got images in different places on my computer and I didn't think about it, and I'm here and I want that it's okay, great. Thanks, Dreamweaver. Just copy it in here for me. I'm gonna put it in my images folder and I'm just gonna save it and boom, it inserts it into the page and it saves a copy into that folder. It doesn't even move it. It saves a copy. How nice and thoughtful of drink. Right? But also a quick reminder. And if you haven't done that site set up process, that's the first thing you always want to do. So let's see what this looks like. I've got a headline. I've got an image. Now we have a couple of options we can use the preview options on. We can preview in a browser, so let's just preview this in Google chrome dreamweaver, saying, Wait, you've got to save it. You can't preview in a browser till you save it if you haven't already saved and sometimes they're multiple files to say it. Don't be confused by that. You might have an HTML file and a CSS file. They may both need to be saved before you can preview. Dreamweaver will take care of all of that for you so that you save. Hey, cool. You can see this in the browser. You see, I'm using much bigger images of my redesigned site. There's something missing here that a lot of us do on the Web, not responsive design. Like I said, that's a little advanced for taste. Today's class. I wanted to give you a taste of it. I'll show you as much as I can at the end of the day. But what most of us have done for a long time to try and take better advantage of the space and a browser is to center the design right? So everything's kind of a line to the left right now. This would look a little better if at least it was centered in the middle of the page. But if I try to center things in Dreamweaver right away, you're gonna find that it is not intuitive. You're looking for that little center button. You're looking for that button that's in every other program in the world. It has left a line center, a write a line, and it's not here. It used to be in really early versions of Dreamweaver. There were those buttons, but they're gon see Adobe. Why would you take the center button away? Isn't that kind of fundamental? Yes, but in modern Web design, we'll use CSS. We don't just send her things and make that center part of the each meal code. We create a style we associate centering with that style, and we say that in the style sheet. That's why when I took the style off that lay out, everything changed, including the century. All of that isn't CSS. If you're used to styles on a program like in design, you're used to creating headlines, styles and paragraph styles. But in HTML and CSS, styles are used for everything they're used for. The alignment, the positioning, the sizing, all of that stuff can get done in CSS, so it's far more encompassing than even the styles you might have used before. So in order to center this page, the first thing I have to dio is create a style that will center everything on the page. But the way styles work, you define a style, and then you associate it with something in the page. So if you think about it, how would I apply a style to center both of those things at once? Well, I really can't unless I put something else around them. And that's where we get to a fundamental building block of Web design, which they're called DIV. Tags D I. V. Div and def toe dip tags are HTML tags. Some people think give tax must be CSS because DIV tags are html tags there almost on Lee used when you're using CSS that heading one tag you can use whether you see assess or not paragraph tags you can use. Whether you see, assess or not, you can change the way they look with CSS. But def tags really are just dividers. They just create boxes. And so if you don't have a style associated with that box, doesn't really do anything on the page. And for that reason, almost nobody puts a diff tag into a page unless they're using CSS and associating a style with it. So what I'm gonna do is I'm gonna create a do. It's an issue, Mel tag that makes a box. And then I'm going to create a style that tells the browser how why that box should be and that it should be centered within the browser window. This is something you will do over and over and over, and Web design if you get serious about this, but the first time you see it, it can look a little strange because it's not just a straight center process. So in order to center the things the design in the browser window, the first thing I want to do is create a dip again. There are a couple of ways to do this. I can select everything here and then choose the inserted option over here on the right. You see, in my commonly out there Steve, right, those air common layout items like the divider, the diff tag, one of the things to be careful of in one of the reasons I like having split view open when I'm working is sometimes when you're selecting things and designed you. Dreamweaver is not quite clear about what you want to select. And on occasion, Dreamweaver needs a little assistance in making sure. Now I'm pretty sure that it's going to realize I want all of that h one tag and all of that close paragraph tag, even though they're not selected there right now. But let's watch that when we insert the div tag that the DIV tag actually goes around everything I wanted to go around. I've got a headline in an H one tag. I've got an image in a paragraph tag and I want the dip to surround all of it. Don't be confused by this extra paragraph tag with the non breaking space in it. That's just a little extra space at the bottom. I can remove that or not, depending on how I want to clean up my coat. What I want to do is insert a detects I'm gonna click on Did you can also choose inserted same thing again, multiple ways to do the same thing, and a box comes up that's giving me options Dreamweaver is asking. Do you want to wrap that div around the things you selected? Do you want it before the things you selected or after the things you selected in this case, I want to wrap it around, so thank you very much. You know exactly what I want. Then it says, Do you want to associate a style with it at the same time? Again, Very simple. Introduction to CSS. There are different kinds of CSS styles. Most commonly, when you're using dibs, you would associate a class or an I D style. They're similar in holly work, but essentially you divine a style and you give it a name and in the place, case of class and I d tags. In the case of Class and I d styles, you can give them any name you want with HTML tags the names already to find it's an H one tag. It's a diff tag. It's an image tag, but with styles that are class or I D styles, I can name them anything I want. It is common practice for many of us to call the style that we put around everything on the page. A container or a rapper. And when you look at CSS style sheets, you'll often find that there's a style defined called container or rapper that's associated with a div or a box that goes around everything in the layout. But Container and rapper are just names that are common. I could call it George. I could call it Angie. I could call it Lance. It would still be okay. I'm gonna call it Container on and I'm gonna type the word container here. I'm gonna make it a class style because class styles are a little bit more versatile than I d styles. And I'm probably not gonna use I d styles today, but they have some special uses, but many people create entire CSS layouts with just class. I'm gonna make a class style called Container, and I'm creating that style as I put this container around it. This is optional. You could put the div tag there and then create the style and then associate it. You can do it all at once. I'll do variations as we go through. You'll see me create multiple styles and dip tags. Over the course of this class, click OK, so What have I done? Well, let's look in the code over here and make sure it did the right thing first. Hey, look at that. It put the dib. There's my day of open and closed is at the top and bottom of the way I wanted. Thank you very much, Dreamweaver. So I've got my def tag now, and it went ahead and put container a class style names contain Awesome. But here's the thing. All it did when I did that was put the name container and associate it as a class style. Haven't actually defined the style yet. Okay, so what's it mean to define styles and Dreamweaver? And how do you do that again? There are multiple ways to do it. But before you can create a style, you have to decide whether that style is going to be an internal style shape or an external style sheet. Jim, what's the difference between an internal and an external style sheet? I know you know the answer to this world. The difference between internal and external style sheet is on internal style. Sheet is thesis. SS styles are actually written on the same page as the code of the HTML, whereas an external style sheet has a call in that page that goes out and finds it and brings it back in that I could not have explained that better myself. Thank you so much. Poppin with another kind of semi semi question. Absolutely. You were working at home and you were writing code like this Would you be? And I know we play Don't have time for today. Would you probably be commenting your code? Yes, and I made you a little bit of that today. In fact, you know what? Let me go ahead and put a comment around that death tag because that's especially when I would use comments so bad, and that's a really good question. So while I'm cleaning up the code, this little paragraph tag at the bottom I don't really need. I'm just gonna delete it so that it's not cluttering up my design, and it's a good idea to delete any code you don't need. It's sort of like on a word document. If you have an extra return that forces a blank page for no reason. It's a good idea to clean it up, right? So that's all I was doing there. But what he's saying is commenting, and everything that's on this page right now is an HTML tag or a piece of content that's gonna be interpreted by the browser. And if it's inside the body tags, remember on Lee the stuff inside the body tags it will actually display in the browser window. Comments are really just notes to yourself or to other programmers. If you write them correctly, they'll never show up in the browser window. That doesn't mean their secret. If I view the source on your page, I'll see your comments. So don't go slipping things in there. You don't want people to see. They're not really private, but they're really about leaving notes to yourself. And one of the notes that a lot of us leave to ourselves is Where did Tag start meant? Because as you build a page, if you think div tags are the building blocks of my page, I'm gonna have a container that's a diff tag, and then I might have a header with a diff tag, and then I might have the main content and it might have a footer and each one of those may be defined with a diff tag. Then, at the bottom of page, I'm gonna have closed, closed, closed, closed of. And as that page gets long, it's easy to confuse which Davis which, and you'll see this as they build the page. So a lot of us will leave notes. And the way you write a comment is bracket exclamation point dash, dash space. Whatever you want to put in there, I'm just gonna put container tive dash dash bracket. Notice how that's a soft gray color. This color coding and Dreamweaver helps you identify what things are. It's helping you identify the content versus the tags, and comments are always done in this late gray. So that's the way a comment tag should look in html f y I and CSS. They're written slightly differently. Yes. Is there a way to have the program set it up so that that closing bracket is is down? You have the opening bracket closing bracket, and everything in that bracket is indented. Sure, so there are lots of different ways to style your HTML code, and Dreamweaver does have some options. What you're saying is, boy, this would look better to my eye if it were set up more like this, with some inventing to set that off right. Different editors work in different ways, and they're actually preferences and Dreamweaver about that. But one thing that's valuable even to beginners is all this extra space I'm putting in here will not show up in the browser window. And that's confusing to a lot of people on its another little HTML thing. Toe learn. If I go back over to my design view over here, I just put all this space around there. But it did not add space, right? I can put as much space as I want here. And it's not going to change the space between the headline in that image, because the only thing that a browser will interpret when it looks for space is this paragraph tag says. Put a paragraph return there. Now I could put another paragraph returning. If I put my cursor and design new and Dreamweaver and I hit the return tag, you'll see another paragraph comes up with a non breaking space. Dreamweaver puts that non breaking space in there. That's trying to make sure that the browser will respect that paragraph and give you the extra space you just asked for by slipping in an extra return. The purists and Web design will tell you that's a really bad way to put extra space. And most browsers, if you just put 10 returns in a row, will ignore them and compress them. Which is another thing that really confuses people who are into print design. Like I put six returns there, I want space. And then it's not the space you thought you were gonna different browsers interpret that differently. It comes historically from the Web, trying to be really efficient about how it displays information. Ah, whole bunch of paragraph tags has just wasted space. Why would we send that around the Web? Right? CSS gives us some far better tools. It gives us things like margin and padding, which will set in a moment. And we can use that to very precisely control how close things are to each other. So putting a bunch of paragraph tags, although it seems like the quick, easy way to do it is not the best way to add Stace and adding as many paragraph tags as you want in your code just for greater visibility is perfectly fine. The other thing you should know in Dreamweaver And this is something I sometimes forget to point out because sometimes those basic things are easy to miss. So I'm just gonna come down here to the bottom for a second and do this right click if I put it in text and then I hit. So let's put in eager and then it hit return. I'm gonna get a paragraph tag around that you see paragraph a great paragraph, but you don't always want. You don't always want that extra space between their now again with CSS. I can control that. But there's another tag in HTML called the break tag that gives you a line break without that extra space and the easy way to get that. And even in design view, I can just delete the paragraph I had hold down the shift key and hit return and you'll get a break tag. You see that BR tag there? So that's a break tag. So a break tag gives me a line break with no extra space. A paragraph gives me ah, whole extra space, whole extra line break. Okay, But space in the CO. There's nothing Okay, so space in the code doesn't matter space in the HTML If you're in design view hit. Return to get a paragraph hit shift return to get a break. So if you want an address line and you want your address, tow line up one line after another. Just shift return between them. Very simple way to do that. Now, as we get more complicated with CSS, you'll see there's lots of ways to control spacing that are more precise. And this gets me to another issue. That's a little advance for beginning class. I'm just gonna clean all that up off the bottom. Now my extra paragraph. We talked about how browsers display things differently and because browsers display things differently because browser's air, designed by different companies and HTML and CSS were written by this international committee. And they don't always agree on how things should be interpreted, especially things like spacing and margins. So in one browser you might have more space around an H one tag than you would in another. In another browser, you might have more space on the left and right if you set things up one way, then another. And because of those subtle differences, if you're trying to create a really precise layout where every little pixel counts, the default HTML settings and the differences among different browsers and how those air displayed set you up with a problem off the bat and then you start adding styles and those are interpreted differently can get really complicated. And there's a really kind of convoluted solution of this that people have come up with, which is a special extra CSS style sheet that is a reset style sheet. That's a style sheet people create just to sort of zero out all the formatting that exists in HTML before you add back all the formatting and CSS. Before we had CSS, HTML had some basic formatting. That H one tag makes the text 24 point bold and puts an extra line break around it. But if you don't want a whole paragraph return after all your headlines, there used to be almost no way to get rid of that. Now we'll see a sense I could change the definition of H one tags, and I could get rid of that space completely. But if different browsers are already interpreting it differently than off the bat. I'm set up with browser differences. So many people have created a set of styles that basically zero out all the other styles. Um, show you a quick example of that because sometimes it's helpful to visualize. Remember, I did a quick look at these air, the layouts that come with, um, Dreamweaver and if I just create one of those real quick and look at the style. This, by the way, is a style sheet internal to this page, meaning that the styles are at the top of this HTML document. These air, the starter pages that come with Dreamweaver toe help you with some CSS, and they include things like setting the margin and patting 20 for the body time zeroing that out. And for all the a Nord an ordered list tags setting the padding and margin to zero. And for all of the heading tags, setting the margin to zero. And in this case, they chose to set the padding left and right to pixels. That's really I think up to you as a designer whether you want to do that. But these initial styles. And these layouts are about trying to get some consistency across browsers before we start defining our own styles to go on top of them, and many people will just integrate them into the style sheet the way Adobe has done here. Other people will have a special CSS file just with their resets, just with all the things they zero out before they do anything else. And other people will tell you that resets or a bad idea, and you shouldn't use them anyway. So just to keep things confusing, the three common approaches are integrate the resets in the air CFS, create a separate style sheet just for resets, or don't use them at all in an effort to keep things simple. As we look at the basics today, I'm not going to use a reset, but I want you to know there there, and I want to know there's some potential problems and the potential browser differences you'll see if you just create simple styles around HTML. But I still think that's the first thing they teach you before we get to the more complex okay, The other thing I want you to see here is comments, number, anything that's great out as a comment. That's a comment tag in CSS. It's done with the forward slash on the star. Where is in HTML? As we saw, a comment is done with the bracket and the exclamation point and the two dashes. Okay, you can type those and as much as you like. And if you ever forget how they're written, just Google, how to write a comment in HTML and CSS and I guarantee you'll find right away how to do it. And you can add comments surely up to the comments on the CSS. Layouts that come with us are very complex, and they try to explain all the things that are done in those layouts that air designed to try and help things look more consistent in different browsers. So creating those CSS layouts that are built into Dreamweaver and studying those comments is not a bad way toe. Learn a little bit about CSS and to learn a little bit about what those resets or four and what the common problems are among different browsers. How we doing? I know you're all relatively new to this stuff, and that's a lot to throw at you at once. You're looking at me like OK, it's starting to clear. It's starting to sink in. You know, I'll just stop for a second before I create this first style. We've associated a name with the did, but we haven't actually created the style yet. That's gonna center everything on this page. And I think when I first started learning CSS years ago, I just kind of scratched my head for quite a while. It's not an easy thing to learn, so I just want to acknowledge right up front that this is a highly complex thing. Toe learn and what I found Waas. If I just kind of let the first few lectures and lessons and books I read wash over me. Eventually it started to make more sense. And part of the problem with CSS is that until you've learned a fair amount about all of the basic elements, none of them really quite makes sense. And I can't teach all of those basic elements at once, and I can't teach them all today. So if you've got a little CSS, I'm gonna have a couple of tips in here that might be helpful if you have none. Don't worry about trying to understand everything I say. Just try and get the big picture. Oh, right. CSS is about separating content and style, and that means you take the style sheet off how everything looks really different. And Oh, that also means that if we change the headline color later, it'll update across all the pages at once. That's pretty cool. Oh, wait Until we had CSS, we couldn't control how much space there was between elements, at least not right easily. And now, right down to the pixel, You can control how much margin and padding there is. Okay, that's kind of a cool thing. So those basics that make it worth learning you're gonna get today and the general way that works in Dreamweaver. But if you're starting uglies over a little, and your head start to hurt because, wow, this is a lot to take in today. I just want to acknowledge that it is. And unlike some of the other tools on the sweet, I can't even teach the basics of Dreamweaver without teaching you at least some CSS because it's really the only way to create pages anymore. But it really is a lot to teach him one day. So just acknowledging that. Okay? Which is part of why, after teaching the first Dreamweaver basics class here, you convinced me to do in HTML and CSS clothe great. Which was a great class. You know, we learned so much, we really delved into the intricacies of of CSS and lots of html. So thank 11 this you lots more to take you further. Thanks so much. Yeah, that was That was a challenging class to teach. And, you know, there's a lot of basics to it. But I remember on the second day at one point when I got into some of the CSS three stuff and you said something about me taking off my cape and looking like a superhero and you made me feel like 10 feet tall that thank you for that. I think there is an element of mastering CSS and HTML. It can make you feel a little like a superhero. So help that inspires you want to learn? If you Kenbrell pros, you can write code. It's just a matter of learning the same kind of stuff you had to learn to write prose, its grammar and spelling and structure. And you know all those things that you learned in grade school that make rating relatively easy Today. It's a similar process, learning to write code. It's not a big scary thing programming. It's just another thing to learn. And this is relatively simple programming. In fact, the purest wouldn't call HTML programming. They would call it a markup language, but it's really more about formatting than program. Okay, so we put our def tag around here. Her goal with all those tangents with two center of this design in our browser window. And now we've got a box and we've named that box. Now we need to take that name, put it in a style sheet and tell the browser what we wanted to do when it sees that name, and the way we do that is, we decide. First, should we create an internal or an external style sheets? So over here on the right, in the CSS designer panel, you'll see CSS designer, and the first thing is sources not, I have to say. In some ways, the way CSS was handled in Dreamweaver, CS six and before was a little more intuitive when you were first setting up style sheets here in Dreamweaver in C. C. It's a little bit more complicated, so if you've used remover before, but you're still new to Sisi, pay special attention to what I'm about to do, because until you define whether you want an internal or an external style sheet, you can actually create a style. So that's kind of like after you site set up before you create a first page, you have to decide. So is Jim so beautifully described? Internal style sheets are saved within the page. External style sheets are separate files. And so Dreamliners giving me three options here, it says, If you already have an external style sheet, you can attach it. One of the advantages of external style sheets is that you can associate the same style sheet with any or all of the pages in your site. So if I have a page, if I have a website with 10 pages, I might have one style shape associated with each of those 10 pages. When I update that one style sheet, it updates all 10. But there might be times when I want to style that Onley applies to a particular page. Or if I'm just starting to work on a page and I just want to keep everything contained, I might decide just to save those styles in an internal style sheet being there saved in the header area at the very top of the same HTML document. So Dreamweaver is giving me the option here to define my style sheet in page meaning. Put a internal style sheet at the top of the page to create a new style sheet, meaning generate a completely new dot CSS file to associate with this. So I have an external style sheet or to attach a style sheet that I might already have to find somewhere else on the site, and it gives you all of those options at once. But you have to choose one of those to get started. So the first thing I'm gonna dio is create a new CSS style sheet. Sometimes I'll define the style sheet page and then move them to an external sale sheet later. But it's a short day. I'm just gonna go ahead and create this as an external style sheet and associative come back out here, so I'm creating a style sheet. But this is a new document. I need to give it a name. I'm gonna call it Main styles. Click. Okay. All right. So, mean styles? Nazi SS. Now, with any luck, come up here doing that. Also led Dream. We were to create the document. So if you look up here again because I have limited space, really move some things around up here and now I have my index page and I have a main style that CSS. So when I said I want to create a new page unassociated, it put it here. And then it also did something else over here in the header area of the document. It put a link to that style sheet. So I have to documents own HTML style sheet in a CSS style, an html document and a CSS style sheet, and the one is linked to the other. So when the browser gets to this Web page, it says, Oh, I need to interpret the way this looks based on the styles that are in this file that's linked to the top of this. Cool. Got it. Okay, so now I need to actually define the style, right? Let me just show you There is a style sheet here, up here at the top. I've got source code and I've got style sheet. This is another kind of advanced tip. Even if you've used Dreamweaver for a while, you may not have noticed or this may trip you up That you can switch from. This is the style sheet. I haven't defined any styles yet, so it's just got a little bit of coded the top to tell the browser what kind of a file this is. This is the source code for my actual document. And if you like working and split view, it's nice to go switch back and forth, but notice If you get into the style sheet and you lose your source code, just click here and you go back to source code. If you're working on a WordPress document or a really complex file, there might be 20 things linked across here, and each of those files could be opened by clicking on it. So this is Dreamweaver managing the fact that if you have JavaScript re Afonso of other things, they may be separate files and they're all associated with this one HTML document and that's how they're listed across the top. So have a style sheet. I have already determined that I'm gonna call this container the zoom back out a little bit. Bring back up my CSS designer, and I'm gonna close this for a moment. Just again because of limited real estate when you're working in CSS Designer. Pulling this all the way over like this so that you get two columns is much easier. Way to work in designer. So if you're used to previous versions a dream labor where things were pretty much kept over here on the side, drag it out of it and you'll have a much easier time in CSS designer. So we defined a style sheet this Media Tavis for media queries, Media queries Air really generally only used in responsive design, they predate responsive design in that we used to sometimes create, and some people still do one style sheet for the Web and another one for print. For example, it's on a black background with white text on my Web page. It doesn't print so nicely right. I might create a special style sheet for printers and the at media style option allows me to associate different style sheets for different media. But right now, I'm not going to use that so I can close it. I'm just gonna create a style sheet for this one page that's designed just for desktops. Step one of learning how to do this. So I've closed that out of the way completely. But if you're doing responsive design or if you want to print style sheet or something like that, this is where they would appear, and that's where you can work on them. Now I have selected the style sheet that I created and Dreamweaver the little picky about that. It sometimes is annoying. But if you don't actually select that before you do something, it doesn't believe that you know where you're gonna save it. So even though there's only one style shade on here, I have to have it selected. And then I get down to the selector area. Selectors are the names of the styles, and then you define the style within that selector. So I'm going to define a style and I'm gonna call it Container, and I'm gonna start it with the dot and again crash course in CSS. We have class tag and I D styles. Those are the three primary style we're not going to use I D styles, but they always start with a pound sign. Just so you know, you see a style with a pound site. Oh, that's a 90 style class. Styles always start with a docked just the way it is. Don't worry too much about the logic. It's how we identify the difference. So here in the style sheet, I need to put dot container to identify that this style is a class style. In the HTML code itself, we just go back there for a second in the HTML code itself. In the CSS ups in the code. There's no dot and this could be confusing. But don't go trying to put a dot in Over here up. Here we go here where it says class container. The word class identifies that this is a class style Here in the style sheet. The DOT identifies that this is a class time, and those two go together. So dots class associate ID pound I D associate tag styles to find existing HTML tags and have to be exactly the HTML tag. We'll see one of those in a minute, but we're creating a class style that goes with this DIV tag that's going to center this design. Okay, so I've created an external style sheet and associate with Page. I've named a style and created the selector just basically this style and put it here and now I can define what that style is gonna do now. I have many different properties that I can used to define the style, so some of them are kind of obvious text. I can define text, color, fall. It's things like that. I can define the layout so I can define things like with. So if our goal here is to center this design that I have to make the box the diff tag smaller than the entire browser window or there's no way to center right. If I leave the dim to expand to the width of the browser, then I can't center it. If I make the device set with, then I can say whatever space have left over on each side. I want it centered. So how wide should you make a Web page? and he guesses. Actually, I'd love to ask the audience that those of you out there in the chat room have been watching this royal, the Advanced Users. What's your default size for Web pages if you're not doing responsive design? Years ago it was 720 pixels were kept him really small because we had really small monitors. People were still using those 6 40 by 4 80 monitors. Oh, I don't regret the loss of that. And then we got a little bit bigger. And so everybody went to 10 24 by 7 68 But then, you know, the browser bars took up a little room, so maybe it should be like 9 20 Or today, with responsive design, we tend to do a percentage. So we'll say we're gonna make it 90% of whatever size this is. And then when it gets when the size of the window is even smaller, we're gonna make it 90% of that, or 80% of that or 95%. That's how responsive design works. It's done fluidly, but because you're all new, or at least assuming if you're watching a beginner class, you're new to all this. I'm gonna use a fixed with a set pixel with, for now, just a set of size and I'm gonna be a little arbitrary with it. But let's make it 1400 pixels wide. I come down here, the first thing have to do and this is another thing that's a little weird. When you first started using this, I know I want to settle with, even if you know CSS. But you don't know Dreamweaver CC very well. You're moving from CSX to see. See, this is where the style panel is kind of different, and it first could be a little frustrating. I want to type a number in there and I can I can't until I decide which size I'm going to use. CSS can be defined with many different size increments. I can define pixels points, Pikus inches, centimeters millimeters. Nobody ever uses those. For the most part, we is pixels. We use percentages or we use ends. Yeah, they're all Don't worry. For now, I'm just gonna pixels because most people know pixel. That's a dot, right? Every little dot equals one pixel. Cool. So if I make this 1400 pixels. Maybe a little wide for this resolution. We'll see. But I wanted to make this big toe to show off the idea. So I'm gonna make it 14 pixels, 1400 pixels wide. So I've now settled with on that box, and now I want to center it. Now, if you learned this, you know right away how to do it. But if you've never learned this, this is very strange, because again, you're looking for the center option. But know what we're saying is we've got a box we've set a with. Now what we want to do is make sure that it's centered on the page, and the way you do that is using the margin setting margin had space outside of a div patting ad space inside of a dude. What we're gonna tell the browser is use however much face there is and put the same amount of margin on each side, and that will effectively center the dip on the way you do that is, you set the margins to auto. Let me zoom in on this a little bit so you can see this is actually one of my favorite things about this new CSS designer panel is it has some very nice visual tools to help you. See, Margin goes outside of the box. So think of this is your div this box. But it also could be an image represented by this box margins ad space outside of a box patting ad space inside a box and in this case, were setting the margins toe auto. So let's scroll back out. And let's preview this in a browser again and see if it worked. Okay, What I do wrong. Okay. Margin set to auto on container 1400. Fix may be too wide. They are you ready for the survey? Oh, yes. Let me come back to let me fix this real quick. Sure. Thank you. That's so nice. That's so nice of you. I did have a pending survey going. I better come back to that. Okay, So that should They're so yes, I just said that with too wide for this resolution. And I you know, I'm used to working on my laptop and feeling constrained that I come here with this projector. It makes it even smaller. So you don't see that def tag? Because dibs are invisible unless you add a border, will add borders The things. But there's an automatic amount of margin on each side. Okay, Yeah, let's hear what that panel. What? What's my survey? Say? Survey says Bethany. Sit 9 60 Ginny 0 608 100 We got 9 60 to 10 80 10 24 12 80 10 80 80. I'm about 12. I've been doing things were untrue. Yeah, like And I do one page, single page sites. Ha. So I like 1200 pixels as a with I was gonna play it up to 1400 but apparently not on this screen. So hopefully that won't throw off my other sizing too much. I may have to play with them a little bit as we go through, but it actually illustrates why we do responsive design. His responsive design says, you know, adjust this layout based on the size of the screen because I don't know if you're looking at this on your cell phone while you wait for the bus or you've thrown this up through Web TV on that 80 inch projector monitor you have in your living room, right? So responsive design is about designing for all those variables. But basic CSS training really limits me to starting with the basics