Lessons

Lesson Info

HTML and CSS

Do you have to learn html and css this was where the class gets bogged down for a lot of you like really do I have to learn each yoon sees us and what are they and why should I care? The simple answer is no the better answer is yes and somewhere in between is what I want to try and help you with today give you a crash course in html there are way more tags that will cover but I'm gonna show you the ones that get used the most and matter the most and I'm gonna try and help you understand how h melon css work together and I'm gonna confess that what makes it really hard to teach dream were today is I'm not just teaching them how to use a program that has a lot of complicated features I also have to teach you some very complicated concepts in html css and I have to teach those simultaneously or you can't do anything and that means that at the beginning when you're really a beginner I'm just going to start throwing vocabulary at you and concepts that just let him wash over you just listen ...

to these words over and over to start to let the stuff so can start with a power point that just kind of gives you an overview and then we're going to get in and be doing it in dream weaver and hopefully between that combination some of these concepts will start to make sense, so the first thing to understand is that html, the hypertext markup language tags like the heading tags and table tags and give tags, and you'll see more of that are used to make the structure of a document. Think of it as sort of box is getting lined up on a page, and then css cascading style sheets, or what add all the style that's, what makes this blue and changes this fun, and even makes these rounded corners and css three the images can be inserted with the image tag a nation out, or they could be inserted into the background using css, so that could be a little confusing, and one is not right or wrong, there's some efficiencies to using css, but it is not incorrect to insert images and keeping things simple. Today, that's what I'll do, a lot of in this particular layout, this image is inserted into a background, and these air inserted into the page. So this image is done with css, and these air done with h team out, but the positioning of those images, the positioning of this text over the image in the background, all that this done with css, so that's, the big picture, the fundamentals of all, or nearly all web sites of the same you lay out the content and h two mil you create and apply styles to add formatting and you have things like a diff tag with information in it so def tags make boxes many other tags make boxes and then stiles get applied to those boxes and say how big the box should be, how small the box should be we should be aligned the right or the left that could stunned what styles and styles and this kind of throws people tio can be class I d tag or compound styles those air style selectors we're going to talk a lot about that so if you heard those words before and you were wondering where they fit into styles they're just different flavors of styles different kinds of styles right? So depending on what you're going to do with the style or how you want it to be used in the page, you'll choose one of those all that css then there's age to mouth so that was complicated she made a little bit and tell you there are different flavors of h two mil so when mobile first came out they came out with this family w m o nobody uses that anymore mobile web sites are now done actually mostly in h five a small one point out that's when I started in the nineties very vanilla boring you could I remember when centering became possible on the web and then we start being able to align things to the right and left oh my goodness gracious you worrying about thought fancy funds on the web? You don't know how good you have it for years now we've use something called x html transitional they're actually a few flavors of ex html don't be confused, it's really just html it's, because a lot of this comes from xml and interacts with x amount, but this isn't xml. This is x html this is really just ht mo, but by default dreamweaver cia six creates ex html transitional one point oh, still a common flavor, really just a little more strict believe it or not, than other forms of h two o h well, five got a little more lenient and added a bunch of the attacks but otherwise it's basically the same and all the tags I'm going to show you in a minute art work the same in a channel five an exceptional transitional, so if you've got a little each email, if you know that the strong tag makes things older, you've learned that the h one is the heading one tank awesome you have a great start that has not changed there are some things that have changed and come and gone you can't send her things and html anymore no, you gotta ucsf's for that but we'll get so html css work together now there's been a lot of talk about it show five the superhero it's channel five the truth is it's little sidekick css three does an awful lot of work so people got all excited about html five because now you can have rounded corners and drop shadows and all that that's really css three working with html five the biggest difference about html five and there was a question about this earlier. Is this dark type? Well, look at this again, but the doc type is the very first thing at the very top of any html page. This is just a really simple html document don't worry about it, we're going to go through what these tags are, but this is what a simple asian all document looks like, and the doc type just tells the browser what flavor of h m o you're using and the html five dock type is really simple and clean and you'll see the xt html no one takes like three lines of text, so occasional five actually simplified somethings this is a very simple style sheet, so it's got a body tag this's a class style with a container and I can tell it's class because it's got a dot on it yeah, that makes a lot since right now, right? So tag styles are html tags that are restyled, so this is taking the default font for the page and changing that font class styles have a dot id styles have a pound sign I'm saying this fast and I do not expect you to memorize it because you have a cheat sheet in that pdf and I'm gonna repeat it a lot very common to have style names like container header content footer, right? We're looking at that in the photo shop document and why it's nice to name those layers and photoshopped in the same way that they're likely to be named in the layout, but in truth class and I d styles community and anything you want, you can call it fred or george, but usually we go with things like container, header and footer because they have a descriptive meaning they tell us something about what they are take a moment and tell you that learning css is a lot like learning to scuba dive. It took me a while to come up with this metaphor and abuse it before, but here's what I figured out when I learned to scuba dive, which is totally awesome my leg, the first thing I had to do was spend like six weeks of night classes sitting in african classroom learning vocabulary die of charts, how long I could stay down and eighty feet before I die on the way up really? Most of learning scuba diving in the classroom is learning all the ways you can die underwater that's pretty much what it's about but when you get done with that and you actually get to dive into the ocean and see stuff like this jellyfish ah that's. Amazing. Cool, beautiful experience, right, c it's just it's kind of like that. I know it seems crazy maybe not quite as exhilarating. A scuba diving, but seriously, think about it. First, you just have to learn some basic vocabulary when you use internal and external style sheets were going get to that in a minute. Why you would choose a class style over an ied style attacks that we're going to get that it's like, learning the dive tables in the vocabulary when you get done. When you once you learned those base six, you get to do something really beautiful. You get to lay out really beautiful websites and it's kind of like learning this go out. So first we have to learn some fundamentals. Okay, so there are internal style sheets, which means that the styles are saved in the same document as the h two o five. There are external style sheets that means those styles all that code that creates, whether something's blue or green or tahoma fall inter helvetica all those styles can be saved in the ancient document, in the top of an internal style sheet or in a separate document within dot css extension, we call that a css file as an external file. No, why would you use one or the other again? We'll look at this some more, but internal style sheets on ly work on the page they're connected to external style sheets. If you take the time to save all those in a separate file and then link it to the page what's cool about that is you can use the same css file across any or all of the web pages in your sight and that's where you get to the rial efficiency of css because if I've done something like created a headline style that's high school, teal green, and then I decide later that I really can't stand that I want purple. If I've got an external sile sheet with that definition, then when I change it in that one external style sheet, it affects every headline throughout the site and I can't change things very quickly if I'd done the mullah's internal style sheets, I have to go into each page and change it on each page, so then people say, well, why would you ever use an internal style shape? Well, the other thing have to know about stiles is they can conflict with each other and if you're using them across multiple pages maybe I create a sidebar for the front page and then on an inside page I want to side bar that's different well, I could either call it something other side bar one sidebar to side bar three or I might just create a quick internal style she that only affects that page and I know it's not going to mess up something on another page without me realizing so sometimes you do internal style sheets cause it's efficient and I'll do that when we're building some things when I first get started often start with an internal just so I see and I've got everything in one place and then I'll move those styles to an external style sheet link them back to the page and then I can link them to all the other pages I create and get the full efficiency so that's the first thing internal versus external style sheets and we'll look at that again then there's this thing called inline styles just to really throw you if you just want a quick little bit of style information right in place with the code you can do an inline style almost never used because it really defeats the purpose of css which is to have global styles that work across lots of things so don't worry too much about then we have selectors I talked about that again class tag idea and compound well, look at these more in the program but that's just like different kinds of styles that you can use in different ways and there's something called floats when you're aligning things and web pages you don't align left on the line right? You float them left and you float them right and when things float left and float right, other things move around them so if I how this ball and I floated to the right a little tiny american come up next to it but then like weird, unpredictable things can happen when you float things around so then you get into things called clearing elements I know is your head start in heart so when we start floating things that we have to start clearing things because sometimes if you float one thing and another thing when you've got a clear stuff before the next stuff comes or paints overlaps and yeah, we'll get all that and then there's whether things display in line or block like is each element going to be a separate box that forces a return on the page or can those things beside by side in line with each other so you'll see that there are a whole lot of other things like positioning and stuff we're not going to able to get to in a basic class most of what we're going to do in this class are these first few things on this list one more kind of metaphor to help you before I dive into the code, and that is that writing code is a lot like writing prose, so just because, you know, grammar and spelling doesn't mean you write like everybody else it's us and another thing that could be really complicated, especially if you're looking at the css and something like a wordpress blawg, I'm gonna teach you really simple, clean, basic, css in this class, and then you're going to go look at a wordpress log and you may or may not be able to understand all the css based on what you learn, even if you've got the fundamentals and it's a little bit like I can teach you grammar and spelling. But you may not write like shakespeare, and you may have trouble reading shakespeare if you haven't learned all that funky language, they just right, or the complex city. And stephen king has his style in isabel indyk isabel allende, I've always been you and me and mean can't face early ending, um, is million days a chili and author, one of my favorites, and I do teach in spanish as well as english. I couldn't resist that, but yeah, really s o writing prose and writing code are actually kind of similar and one of the challenges about learning css because I will teach you the basics and I will show you the basics and then you make a look at somebody else's code and they may write a little different it may look like this yeah gobbledygook that technical term I taught you earlier you all need to remember that one gobbledygook but at the end of the day like I said most web pages air written in h m o there styled with css if it's a wordpress bog and maybe some php in there as well and a little java script for those rollover images those sliders that motion on the page okay that's the basics that's the basics so remember we created a new document and they're all these different lay out and these are all css layouts so let's just pick one deconstructed quickly to show you a little bit of this and then after lunch we'll get into this deeper so we could create something like this it's got a header on a footer in a sidebar on that's a fairly complicated layout and if I create it all those air hideous colors aren't they she did that on purpose I know the woman who designed these lay out she's a brilliant css person but she did that because she expects you to change those colors not because she well I don't know she might be a fan agree and I could be wrong but I want you to see over here when I load this and there's a style over here now this is the css panel. If it's not visible to you remember you can change the workspace I'm using the designer workspace so if you choose designer you re set designer that should appear there at least in the last several versions if I click this little arrow here zoom in you'll see that there are a list of styles here that go with this page ok and these are internal styles how do I know these are internal styles? Well, I just created that quickly I had a choice to make I chose internally you didn't even see that, did you? But I know it's in sternal because these little brackets which representational tags tell me that that's an internal style she and I can tell it's an internal stuff she because if I use split view and I go up to the top I see that all of the style information and you may still not even be able to tell the difference between css and html by looking at it. Hopefully that will change after lunch but you see here these are the styles that's, a style for the body tag that controls the body, html tag and that's really the high level elements on the page things like the background color of the page the font setting for the whole page all this great textile leaves these air comments. If you're new to looking at html css or any other kind of programming code, it may surprise you how much programmers actually write comments in there. And you can learn a lot about cia assassin a show by reading all of the comments that were placed in here so all that gray is telling you why these styles were done the way they were. So once you get some of these fundamentals, these comments might actually start to make sense to me like, oh, she did that because that browser it'll mess this thing up if I don't do that, huh? Yeah, that problem with designing things for everything on the planet that we get to the body tag. You see this body tag here that tells me that the final pages started everything that displays in the browser window is going to be contained between the two body tags. So now that style for body starts to make more sense, right? The body tag surrounds all of the code on the page. The body style is page level setting. Yeah, so much to learn, it's. Okay, we come back from lunch. We're going to do a lot more of this very slowly, step by step html and then css last questions before we go after a break yeah just give a couple in there and thank you for giving us a teaser what we're going to do when we come back a question from dream boats and you said that you teach ins spanish dream boats in colorado are all the key words in css and h email in english are their non english versions I don't even showing on it answer that um I'll tell you a funny story I was teaching a class in the bogota, colombia last fall and I actually tend to do more speaking about technology trends than how to stuff like this in spanish and I was teaching for the first time in front of an audience how to insert a background image into the page and so I said I know obama's opponents a photo a pastel apac in a coma lisa who said this background I had told the audience beforehand but I didn't know everything all the words that I might need and I just to translate myself said so now that I want to put an image in the background of this page how do you translate that word background komal see they say background on the entire audience turned to me and said background I said you know how hard it is to translate a word you all say in english and spanish and you see that a lot you see that a lot so many of the words we use in english get used even when you're working in spanish so if you hear me talk about technology and spanish by a block of the internet port okay on the world wide web this right it's a mix of spanglish and it's because of the mix there are some issues about a special characters that you'll need the accents and the days and all of that I can show you you could just insert html special characters and you'll get teo other and you'll find all those special characters you need for spanish so if you're writing in spanish that's where you find that you can also find that from the insert menu if you choose text, you'll find some special characters here but the easy way to do it is just insert html special characters other and you bring up a dialogue that has all those if you have the right key commands, then you can insert those into dream weaver and a few coffee and paste from word into dreamweaver you can also bring some of those accents over that way I'm not sure if I answer this question but hopefully that helps our international audience a little bit dreamweaver is in I think thirty six different languages now if you go to the adobe website and look it up you'll see there are many different versions with the interface of the program in different languages and some setting specific to those special characters for that language excellent quick question kind of going back tio organization hedrick ass is it possible to exclude files off the local dr friendless six so that these files are not updated or over it and all the web server when an excellent advanced question so if you're working on a site let me go back to the site and I'll just do a quick refresher on something as I answer this question I'm not going to save that because that was just giving you a quick dive in the css way over your heads to show you what's coming um if I switch over here to the jump start from the web or actually made a connection to the internet on and then I can go in to manage the sights I could do that down here or up there manage sites jump start for the web and at it and I go into advanced settings I go into something called cloaking so here's where you're gonna find this in the advanced settings this was true and cs three and cs faras well there's a cloaking option under advanced settings you and abel cloaking you can cloak files and say if there's anything in there that's a psd file for example don't upload it to the server this is going to exclude flash and psd by default because those are common things to exclude but you could put dot tiff here and any other file formats and dot doc so what this will dio is any files in those formats will not get uploaded when you use the automatic synchronizing. Okay, that should answer that question for him a little bit advanced, but always nice to know that there are more options here in this site. Set up window great looking for him on this. Maybe advanced may not probably know raul questions or re mendez from portugal and then daddio creative also had a similar question. S o for a home page with a full screen background image, what should its size beast that it's compatible with every resolution since I'm x and epics, and then also daddio creative, how many pixels show your body frame b for best viewing on a fifteen inch, seventeen inch monitor? If only there were a perfect absolute answer to that? Um, what I will tell you is that most of us, if I make a new document, the blank screen, just another little quick look at css. So most of us start a css layout if we're creating it from scratch by inserting a diff tag and you'll see in a moment that div tags really just create boxes on a page, so if I just click ok, you got it. Dave tag a box and then it's very common as the first style in a site to create a new style again, I'm going fast. We're going to the break, we're going to come back and we're gonna look a lot more of this. But let's say I'm going to create a style called container that's going toe contain everything in my page and in that style I'm going to define the width of my page. I mean, the css rule definition of created the style is a class style, and we're going to look more of this going to the box category I'm gonna settle with now this is where it matters don't make that nine hundred eighty pixels do I make that nine hundred sixty pixels? So I make that five thousand pixels what size should that be? In the old days when we designed for really low resolution? We do like seven sixty in the more modern times when we thought ten twenty four by seven sixty eight was a safe rule. A lot of people went to nine sixty or nine eighty the layouts that come with dreamweaver cia six if you choose one of the fixed layouts are all set to nine sixty. A lot of people have up that mountain nine eighty in part because it's nice to have that extra twenty pixels of space to play around with and in part because nine hundred eighty pixels wide also looks pretty good on an ipad screen so if you're just worried about desktop and tablet nine hundred eighty pixels is a pretty good size to go for not necessarily gonna work right on your cell phone your website will still open but texas going to kind of hard to see so nine hundred eighty pixels is the simple answer to the standard fixed with size that many people use other people have up that now two twelve fifty because most monitors get bigger if you're doing a responsive lay out what you're really doing is creating three or more different designs set for different whips that's why there's no exact answer and then the other question that you asked which is again a very astute questions if I click ok, you'll see this div now I can apply that class style container and it'll make that exactly nine hundred eighty pixels so now everything else in my website is going to go in that box and I know it will be that what that's the beginning of how a lot of layouts are created and that's where that with matters but then you said what about that background image? How big should that be well, I could insert one of those big giant images let's see if I can quickly get to my big photos um sorry trying to remember where I am and what I'm jumping around is always a challenge um it's not in there it's in here uh giant there we go. Julian picture that's what I want giant picture okay um so I am setting a background image that isn't in this folder or so looking weaver wants me to coffee it over and that's fine I'm just going to save it not even to bother with alternative text so you're talking about an image like this how big should be to fill the screen? Well let's just preview this in a browser and see what happens we have to save it to preview it call it a test that makes no sense at all to me dream weaver is pretty good at previewing things see if safari likes it better there we go not sure why google didn't want to open that for us google home so you say, well, that was a huge image but look there's a little bit of space here so this is why it gets hard to answer this question because it depends on what size monitor your targeting, how big that background in the chippy? It also depends on how much band what you think your audience has, so if you want your creative director who's got one of those giant apple monitors to have that image fill the background and look good you may have to do two thousand pixels mind you're probably end up with a really big file size that is not going to work very well on an iphone with somebody with low bandwidth or somebody with an older computer there is an advanced setting and css which is background with one hundred percent it's off the top of my head but if you google bill entire background with background image there is a cs a setting that's not even included in dream weaver but you could insert into the code yourself that will stretch the image to fill the entire background no matter what I can look that up or if you email me I will give out my email address um I can send that to so if you really want that full full background look I'll give you two last tips on then I know it's time for lunch if you're going to do this the best thing to do is to use those released dude images so that you can compress the heck out of them and they still look good black and white images make great big backgrounds really fuzzy images and this photographers you know blurring everything in the background makes everything in the front pop or anyway so blur the heck out of that background image compress it, dennis far as you can stand in that safe for web dialogue and you might get that really big image down to a small enough file size that I don't work even in a pretty big size and then the one hundred percent trick can take it to the highest level. Good questions and big images are very hot on the web right now, so I definitely know photographers want to show their images in the biggest size possible as we were as you were in let's say for image are safer web dialogue you're sharing kind of the standards standard pixels and started sizes to say, how do you recommend designers and artists out there that are creating sites with ever changing standards? Do you have to go back into the site and read? And just every every time or do you recommend kind of going ahead and making the larger? Obviously that might slow down? Where do you find that ballots? You know, I've asked a couple other web design teachers that question recently because I'm trying to figure out we're all trying to figure out how do you even answer that? So seventy two pp I has been the answer for a decade or more because that's what most computer monitors respected ninety six is something a lot of people have moved to, and one hundred fifty is a place a lot of people have gone I wouldn't generally go over one hundred fifty today unless you're doing something like creating something on lee for the ipad. If you're creating a website that is optimized for the super high resolution ipads, you might go to a higher resolution. But you're kind of in your own at that point, because that's a pretty specialized case, most of us are trying to design things that work across a lot of devices. So ninety six, one hundred fifty, if you're a photographer and you care so much about your image, is pushing two hundred fifty and your future proofing your sight for a while, some day in the same way, you know, I could say the same thing about pixel resolution cameras. When, when we went from eight megapixels to fifty, did you go retake all those photos? You couldn't, at least on the web, you can re optimism.