Michael T Ganschow Green: Hello delayed scheduled people, this is yet another section of JRC 175 so that you might grab it and watch it and download it and folded and spindle it and mutilated today will be.
Michael T Ganschow Green: The first of the page layout days using html and CSS, otherwise known as the SI s s box model because the web is nothing but a series of building blocks little alphabet blocks that we're going to learn how to start stacking today to make interesting things happen.
Michael T Ganschow Green: Before I do that i've got a couple of pieces of.
Michael T Ganschow Green: Class business to go over first of all.
Michael T Ganschow Green: pop a little screen share and.
Michael T Ganschow Green: We may I may you guys so first of all, congratulations on your project ones, this class is.
Michael T Ganschow Green: overwhelmingly in terms of design talent, probably the best average level class I have taught.
Michael T Ganschow Green: The best of you are equal to the best that I have ever taught design wise and the middle average is much higher.
Michael T Ganschow Green: than great many of my other classes and, if you think i'm just blowing sunshine go back and look up some of the other critiques that are down.
Michael T Ganschow Green: At the bottom, they will compare them to these critiques i'm just as a reminder to all of you guys.
Michael T Ganschow Green: So we got the final posts on please everyone, go and provide your critiques for everybody's finals so far, there are only three or four posts per thread, and I would like to see that jump off here i've been doing a few each day.
Michael T Ganschow Green: And working my way through them, so please just do a few each day they're due Friday night by midnight.
Michael T Ganschow Green: So if you just do a few each day you shouldn't have any problem getting them all done.
Michael T Ganschow Green: But, please, to be leaving feedback for your fellow students plus these designs are really good you guys I guarantee you want to see.
Michael T Ganschow Green: What your classmates whipped up here, this is, this is really something you guys have done one hell of a job so.
Michael T Ganschow Green: Like pat yourselves on the back and all of that, because this is this is super good the designs i'm seeing here i'm really curious to see how this is going to translate once we start.
Michael T Ganschow Green: showing you guys html and CSS more seriously than we have so far, which is going to start today how that will help your project to building and your project three going forward so thank you for that and don't forget to.
Michael T Ganschow Green: Add your two cents in on everybody's projects there's its final critique time, so we want to hear final critique don't just hide out there.
Michael T Ganschow Green: You posted final projects, and I would like to see that many posts on everybody's through.
Michael T Ganschow Green: Alright, so today we're going to introduce another project in theory it's supposed to do this on open lab day, but I did I refrained because it wasn't sure how many of you are going to attend so.
Michael T Ganschow Green: We have a new project being popped into the into the ether here, yes, yes, new project dropped yo.
Michael T Ganschow Green: We have project three now project three is a lot of fun um so it's I call it into our web plastic surgery this project is meant to build your dream Weaver skills.
Michael T Ganschow Green: Well, working on your design process and web aesthetics and learning about website planning and information architecture.
Michael T Ganschow Green: At the completion of this project you'll have a working understanding of the planning the website web design and production using information architecture to create an effective interface uploading and managing a live site.
Michael T Ganschow Green: you'll be redesigning and existing website of your choice and building a five page prototype.
Michael T Ganschow Green: not take advantage of this opening by making a poor choice, there must be enough content or you must propose the enough, the addition of content, and it must be feasible.
Michael T Ganschow Green: Be realistic be conscious of the project deadline, you must vince me in the viability of your choice do pick a site that interests you so.
Michael T Ganschow Green: i'm going to change this due date here a little bit since I pushed the whole project back so project three has a.
Michael T Ganschow Green: Pretty immediate due date, since I am assigning this today and i'm going to go in here and i'm going to change the.
Michael T Ganschow Green: Project assignment sheet and put out an announcement about that, by the way, i'm going to change this date, right here so.
Michael T Ganschow Green: The original due date that I had was the fourth because I was going to hand this thing out last Thursday, but in this case, since i'm handing it out today the due date for your bad websites, will be a week from today, so that is the.
Michael T Ganschow Green: let's have a look here I think it's the will give me a full month for you yo let's go back out month.
Michael T Ganschow Green: Is the night so i'm going to change this project sheet tonight and put up a fresh, one that will have the bad websites.
Michael T Ganschow Green: By the night that i'm going to put out an announcement as well after class reinforcing that but that due date is changing to the ninth so find three badly designed websites and oh God the web's full of them if you need any help finding bad websites, I can send you links.
Michael T Ganschow Green: Poor Kendall asked for some not too long before this class and I just bombarded her with so many bad websites, like all of the bad websites I, I think, I think.
Michael T Ganschow Green: I think I damaged or a little bit so let's see here um so we've got three went three badly designed websites.
Michael T Ganschow Green: email me your three choices or message me via canvas with your three choices indicate if you have a particular favorite among the choices and if it's terrible enough I should put I should put quotes around favorite.
Michael T Ganschow Green: The instructor will approve it, and you can proceed please have these dead websites to me by 309 it says three or four, but this project was originally intended to be handed out last class so 309 and i'm going to change that and and set that up so that.
Michael T Ganschow Green: So that you guys get the correct one so first of all go out and find three bad websites email me or message me and canvas with those bad websites to like look through them and and with a horrified grimace approve or disapprove of your life choices.
Michael T Ganschow Green: Then, research, the existing site, be sure to take notes so you'll not have to redo your research, when you begin to work on the information architecture and design.
Michael T Ganschow Green: Not understanding the content is the number one complaint clients make about graphic designers document only researchers you're going to be turning to see and, along with the rest of your preliminary work.
Michael T Ganschow Green: establish goals for the site now i'm a lot of you guys have asked me research questions throughout the Semester.
Michael T Ganschow Green: And one of the things I do to help you guys guide your research is in these later projects, starting with this one.
Michael T Ganschow Green: and continuing on to a project for is I make you guys fill out a site needs and goals analysis, so I should probably dump all this in the chat and.
Michael T Ganschow Green: spot the chat open so First things first we're going to yes go away go away, thank you so first here's the project three assignment sheet Come on, thank you, the chat paste and then here is the.
Michael T Ganschow Green: site needs and goals analysis oops need to do that backup make that link bounce into its own tab I thought it did no not that way cool Thank you.
Michael T Ganschow Green: Alright, so here's the site needs and goals analysis, so the site needs and goals analysis and there's the handout in chat the site needs and goals analysis is a worksheet that basically guides your.
Michael T Ganschow Green: Your research it's it's kind of a set of loose delineation and guidelines to help you, with your researching so basically what you're doing is you're going to write me a little teeny tiny essay well you're researching that answers these questions.
Michael T Ganschow Green: This thing's not meant to be filled out I didn't I didn't built to be filled out so there's write me a little sad that talks about your research.
Michael T Ganschow Green: i'm answering all these questions now this guy this site needs and goals thing is a version of the one that I use when i'm building websites or other big design projects professionally, so this is kind of my research guide and I wanted to give it to you guys as a way to.
Michael T Ganschow Green: To help guide your research and to help focus, where you want to look as you're researching if you can answer all the questions.
Michael T Ganschow Green: That I have that i've posed to you here you'll have done all the research, you need to design a great project.
Michael T Ganschow Green: So this site needs and goals analysis is very important and it's one thing that I that I really stress with these last couple of projects and then with the projects in GR C 275 so basically as you're researching.
Michael T Ganschow Green: go through and create your own site needs and goals analysis is basically a little essay.
Michael T Ganschow Green: To God research be sure to evaluate at least two competitors sites in your analysis, not only want to put the redesign and context and also give you ideas for both information architecture and design.
Michael T Ganschow Green: This should be at least one page, but not much more than two pages on create a site map that shows the navigational system of the site with all pages label now.
Michael T Ganschow Green: We haven't talked about site maps, in a few weeks, let me when site site map, let me show you what one of these looks like so basically the site map is just showing me.
Michael T Ganschow Green: it's basically a flow chart essentially sitemap is a with the Web designs the fancy web design terminology for flow chart Okay, and these little flow charts basically show me how all of the pages work together.
Michael T Ganschow Green: In fact, if you want to you know use these image examples I will just steal this Google search and paste it into the chat as well.
Michael T Ganschow Green: bang so that will kind of show you what i'm looking for with site mapping how to the pages on your website in a relate, you know So where do you enter the site.
Michael T Ganschow Green: From there where can you go, how do you access deeper pages, etc, etc, etc yeah so these these guys and you can do them any way you want, in whatever software you want.
Michael T Ganschow Green: If you even want to hand draw your flow charts.
Michael T Ganschow Green: Your site maps, a lot of a lot of people like to hand draw these things out of mind hand drawing here because i'm not we're not taking the appearance of it.
Michael T Ganschow Green: I just want to see you putting some thought into how the whole thing will kind of navigate through what page they're going to enter on what put where they're going to go from there navigation as they get in that kind of thing so.
Michael T Ganschow Green: These maps are basically sort of guideposts in how the whole site is going to be structured so for project three that's going to be part of it, so you get to whip up a little sitemap for it as well and that sitemap.
Michael T Ganschow Green: will show the navigational system of the website with with all your pages labeled and then we come to the usual design stuff develop a.
Michael T Ganschow Green: Meaningful concept by brainstorming mind mapping list making and or.
Michael T Ganschow Green: Anything else that stretches your creativity, be sure to document this discoveries need to turn it in that's going to go and you're working graphics along with your site needs and goals analysis.
Michael T Ganschow Green: and your sitemap and begin the design and development by sketching least at least 12 thumbnails about how you might redesign the homepage.
Michael T Ganschow Green: This this design will carry over into the rest of the site and focus your thumbnails on your homepage.
Michael T Ganschow Green: Trying to wide variety of compositions and your thumbnails a sketch that simply moves the location of one image is not a different idea, only a variation.
Michael T Ganschow Green: Choose at least two different scans just out of your thumbnails and develop each further into a mobile sized rough.
Michael T Ganschow Green: And a computer sized rough for the homepage the rough layouts must be created on a computer and the software of your choice and must include a color type faces.
Michael T Ganschow Green: navigation and images and or text so basically so that we have something to critique build it in the software of your choice build a homepage design and then.
Michael T Ganschow Green: And do it as completely as possible so that we can critique it.
Michael T Ganschow Green: Then you're going to create a second set of rough layouts for each idea showing how the design would carry over, on the other, pages of the site, so what you're building me is a homepage rough and then an inner page rough.
Michael T Ganschow Green: Each of these at computer and at mobile side so so essentially you're building me for roughs.
Michael T Ganschow Green: per each sketch that you've picked out of your thumbnails so I kind of want to see a homepage in an inner page but you're going to be building full sites and I want to see.
Michael T Ganschow Green: I want to see.
Michael T Ganschow Green: I want to see kind of your process on this, want to see how I because some websites have.
Michael T Ganschow Green: Very different home pages from inner pages some websites have very similar typically the homepage on a website is built for maximum readability that is it's built to attract the I think of.
Michael T Ganschow Green: When you're building home pages for websites think of like a magazine ad you're really trying to drag people in and kind of grab them so that show, I want to kind of see like what you want to do, for your homepage whether it looks similar to your inner pages will not.
Michael T Ganschow Green: And then I want to see what an inner page would look like, so one home page one inner page in.
Michael T Ganschow Green: Mobile and computer for each of your sketches yes that's eight roughs that's a lot don't worry i'll be changing the due date on this one as well, I promise.
Michael T Ganschow Green: we're going to shift all the dates back on this thing a little bit.
Michael T Ganschow Green: Just because I decided to give you a little more time to to learn some stuff and a little more time to work on this so yeah that's a lot of roughs but but, once you.
Michael T Ganschow Green: Once you pull the designs once you get a good feel for how your homepage you look it shouldn't be too much to take that design and make it a little bit more informational for your.
Michael T Ganschow Green: Inner page, and if you need inspiration on the homepage inner page dichotomy feel free to go look at the project three sub forum and look at some other people solutions so, then you turn those in for preliminary critique.
Michael T Ganschow Green: And once the directions been selected set up your site for beginning to create and prepare your content and build your web pages in dreamweaver actually gonna build this much like project to.
Michael T Ganschow Green: As a fully functioning website, we I fact project to used to be part of part of this used to build two minutes for this thing yesterday, yes to build your your.
Michael T Ganschow Green: Your project one out as a real page and then this five pager and people got completely confused by that, so I split it out into its own project.
Michael T Ganschow Green: And then, of course, he has the skills and knowledge increase let's say you need to decide what type of buttons dibs and layout tags to use i'll tell you all about that as we go on.
Michael T Ganschow Green: When to create text as an image and when to use default text and where to add internal and external links etc again we'll go over all of that, as I teach you how to build.
Michael T Ganschow Green: And then, as your skills and knowledge increase because it's going to be like hockey sticking from here on out i'm just going to be packing you guys full of all sorts of.
Michael T Ganschow Green: Very strange facts from here on out and then feel free to revise and refine your website as you're building it.
Michael T Ganschow Green: add a link from your project to homepage to your project three and include a brief description of the project, for example, the project overview from your site needs and goals analysis.
Michael T Ganschow Green: And then, once you've completed your site you're going to make a nice little style guide now the style guide is another one of these little questionnaires okay this guy is.
Michael T Ganschow Green: style guides are or brand guidelines, you might have heard them called in the industry there, they tend to go by, either name are.
Michael T Ganschow Green: they're usually small documents, a few pages that contain the critical elements of a brand and a layout so that other TEAM members who are working on something or future designers who may be working on the project can understand what your thoughts and ideas, where i'm going to put up.
Michael T Ganschow Green: style guides are deeply pretentious a lot of them are because it's a lot of designers justifying the big money clients have paid them so some people write these great great long essays for their style guides i'll put up a few i'll see if I can snag this.
Michael T Ganschow Green: One of my very favorites is when Pepsi redesigned the logo from like a Pepsi with like a solution it to like like the fat guy tipping over which is their current logo, the company that.
Michael T Ganschow Green: company that did it wrote this long enormously pretentious style guide that basically said that this new Pepsi logo was an artistic discovery on par with the mathematical discovery of the golden mean and with us or Isaac newton's up.
Michael T Ganschow Green: discovery gravity yeah no i'm talking like that level of like spelunking up your own backside what's the weather like up there i'm not asking you to make pretentious.
Michael T Ganschow Green: screeds for your style guide basically just answer the set of questions that I have in your style guide and it also doesn't need to be like.
Michael T Ganschow Green: 15 or 20 pages, like some of these are a couple pages tops will cover you, but basically you're just saying what are the colors the fonts, what are the.
Michael T Ganschow Green: What are the proper usages of your design, you know.
Michael T Ganschow Green: Anything you would want to know as a designer who's coming into a project like three quarters of the way through.
Michael T Ganschow Green: By placements things like that well.
Michael T Ganschow Green: i'll go get some style guides off of my work server and show you guys in the class or two because man, some of them are are some of them are some of them sure are so I will get you some style guide examples, so you can see what they've done i'm not asking for like like.
Michael T Ganschow Green: i'm not asking you for a for a.
Michael T Ganschow Green: SEC.
Michael T Ganschow Green: i'm not asking you for the French Bray smoking a cigarette in a long cigarette holder.
Michael T Ganschow Green: it's level of pretentiousness i'm not you know where I talking the.
Michael T Ganschow Green: Where you know you've painted for four different colored strokes on a canvas and you call it your childhood, because each stroke represents the layer
Michael T Ganschow Green: A different layer of your childhood, which you unappealing like an onion through the mean of oil painting, no, no, nothing like that, and trust me some of these are I just need to know.
Michael T Ganschow Green: fonts colors layout examples, basically, if you just go through the if you just go through the.
Michael T Ganschow Green: nice little handout that needs and goals this guy nice little style guide question if you just kind of follow this up you'll.
Michael T Ganschow Green: you'll be just fine, but I kind of show you some style guides at some point, all right so um let's see uh but uh but uh but uh but uh be thorough.
Michael T Ganschow Green: This should be at least one page, but I think you can make one page about your design, I know you guys all you're all proud of your designs you're gonna you're going to be able to talk about it.
Michael T Ganschow Green: And then you're gonna upload your entire site html CSS folders working graphics preliminary work, etc.
Michael T Ganschow Green: On your student folder and the client server and the due date listed below post your link and present your project for final class critique on the forum.
Michael T Ganschow Green: So instead of posting designs you're going to just post a link to it, like you, like you do with your project to because the things going to be online.
Michael T Ganschow Green: Remember, to introduce yourself and explain how your design solves this project and why you designed it the way you did, and so that zipped working graphics folder will have all your preliminary work in it will go over that, as well as things go on so.
Michael T Ganschow Green: i'm going to change up the due dates a little bit here.
Michael T Ganschow Green: At least the website approval due date is going to get moved up my calendar here, so the website approval due date is going to get moved to the ninth since I put this thing out a day late.
Michael T Ganschow Green: I am for very good reason i'm also going to scoot back the preliminary do data class to Thursday the 25th.
Michael T Ganschow Green: And then I think.
Michael T Ganschow Green: Let me check the syllabus real quick here, out of the way out of the way yeah Thank you okay so i'm gonna check the syllabus real quick because I don't want to crowd project for too much, but let's see here let's go home shed you will.
Michael T Ganschow Green: I think.
Michael T Ganschow Green: I think i'm going to actually.
Michael T Ganschow Green: I think i'm going to.
Michael T Ganschow Green: i'm going to push back the.
Michael T Ganschow Green: The final due date on that thing too I think i'm going to push it back, but.
Michael T Ganschow Green: I think i'm gonna push it back from the ninth.
Michael T Ganschow Green: of March, Michael March.
April, please.
Michael T Ganschow Green: do get out of the way i'm thinking, the way okay there we go, so I was having to do April 9 I think I need kick it back to the 16th that Friday and shuffle a couple of things around so i'm going to release a.
Michael T Ganschow Green: i'm going to change up the due dates on the project and i'm going to release an announcement tonight with those revised due dates, but off the top of my head i'm going to kick the.
Michael T Ganschow Green: due date for project three back a week, the final due date for project three back a week to the 16th i'm going to move the preliminary critique due date to Thursday the 23rd and i'm going to move the.
Michael T Ganschow Green: This due date from the fourth to the from the fourth to the ninth of because I pushed everything back by class so i'm going to.
Michael T Ganschow Green: change these two dates around and i'll put up an announcement for that.
Michael T Ganschow Green: i'm also going to change around a couple of other things as well in the class schedule, so you guys will i'll be putting up fresh ones, though, so my apologies for the confusion on the due dates i've just kind of thinking of that right now.
Michael T Ganschow Green: When I pushed it back and since i'm shoving everything back I might as well do all the due dates for the project.
Michael T Ganschow Green: So this is a much bigger project than you guys are used to from project one and project to there's a lot more moving parts you're.
Michael T Ganschow Green: you're redesigning a an actual existing website and God there's a lot of bad websites out there, I just low.
Michael T Ganschow Green: Ticket if you feel free to go and find some of these guys and redesign them or have you know one feel free as well remember to send me three bad ones, so that I can see your your terrible.
Michael T Ganschow Green: Terrible terrible websites, you have found then basically you're going to go through, and while you're researching you're just kind of.
Michael T Ganschow Green: jot your notes down in the form of a site needs and goals analysis, research up those questions that I have in the needs and goals analysis handout and.
Michael T Ganschow Green: Then you're going to do your thumbnails minimum 12 pick two designs out of those thumbnails and give me a sample homepage and a sample inner page of each design.
Michael T Ganschow Green: In computer and mobile format so that's like eight rough so it's a lot of roughs I get it, but.
Michael T Ganschow Green: Once you get a homepage settled on the inner page should pretty much design itself either you're going to take that homepage and make a similar page aside different content.
Michael T Ganschow Green: or going to take those design assets you set up for your homepage and you're gonna make a much simpler, more streamlined inner page for that thing.
Michael T Ganschow Green: You also while you're doing that sketch me out a sitemap how's the whole thing and a link and interrelate and I set that Google example of some site maps in chat there for those who want to grab it.
Michael T Ganschow Green: Then you go through critique which is its usual South over the course of a week there'll be I don't know probably 2530 of you posting things up so everybody you just do a little a few a night and get everybody there preliminary feedback.
Michael T Ganschow Green: And then you start building.
Michael T Ganschow Green: Actually I probably.
Michael T Ganschow Green: you'll you'll you'll know enough to start building a little beforehand to So if you want to start getting some basics in.
Michael T Ganschow Green: And then see what preliminary has to say, you can do that i'm kind of pushing everything around to give you some extra time here on this one, because it is a bit of a whoa This is like a whole nother level up.
Michael T Ganschow Green: Once you get a built and you're ready to put it live you're going to make a style guide a style guide.
Michael T Ganschow Green: Bam there's the I just inserted the PDF and chat a style guide, which will basically.
Michael T Ganschow Green: it's sort of a set of notes that you put together for anybody who comes after us working on things now, this is another thing that I do professionally with my websites is.
Michael T Ganschow Green: It unless the customer specifically asked me not to I will whip up a little style guide a very simple one, not any the not any of the guard ones.
Michael T Ganschow Green: Just to kind of tell me what I was working on a jog my memory, if I come back to it after a year, or if it gets handed over to somebody else that they'll know what's going on.
Michael T Ganschow Green: And then, once that's done, then you put it online for critique i'm going to change all the dates on that, though.
Michael T Ganschow Green: So my apologies on the date confusion, I know somebody can be what well what i'm doing is because I introduced this a class late deliberately i'm going to kick all the dates back by a class or in the case of the final week because that way.
Michael T Ganschow Green: that'll give you guys more time to work on it so before I move on to start talking about the box model and laying things out in html and all of that um.
Michael T Ganschow Green: Do we have questions on this there's probably a lot of them so i'm gonna give you guys some time here do we have questions on project three.
Oh they're all stunned silence.
Michael T Ganschow Green: Yes, Okay, yes 38 routes so.
Michael T Ganschow Green: you're going to pull your two good designs out of your thumbnails so for your thumbnails you're going to just concentrate on doing homepage designs for your thumbnails Okay, then.
Michael T Ganschow Green: What you're going to do is you're going to pull your two best designs and you're going to build me computer and phone roughs of those homepages God so there's for.
Michael T Ganschow Green: Your computer and a phone phone rough the phone rough of one of your designs and a computer and a phone rough, of the other design Okay, then you're going to take those designs and you're going to also show me.
Michael T Ganschow Green: What an inner page on the website will look like, so the homepage is this great big kind of advertorial bring people in I want to see are your inner page is going to be similarly that way or they're going to be more informational focused.
Michael T Ganschow Green: and so forth, and so that is a.
Michael T Ganschow Green: A mobile and a computer rough of one of your inner pages and a mobile in a computer off of the other inner page that gives eight.
Michael T Ganschow Green: Basically it's it's four pages, essentially, but I want to see how they behave at computer size and at.
Michael T Ganschow Green: phone size, so I hope that that cleared up.
Michael T Ganschow Green: cool cool cool cool cool good good so other questions on project three there's a lot of moving parts here and I want to make sure that everybody's pretty locked down with it.
Michael T Ganschow Green: And if you have if you come up with any later on feel free to dump them in the chat asked me verbally I don't mind you're talking at me or email me or message me in canvas.
Michael T Ganschow Green: Because i'm going to change a few things around on the dates on that guy tonight and you'll get you'll get the announcement in the email i'ma send it to everybody.
Michael T Ganschow Green: Right, I think everybody's to in shock.
Michael T Ganschow Green: don't worry right up into pieces it'll be just fine I promise you you're gonna flush a lot of skill set by the time this thing starts coming to to.
Michael T Ganschow Green: Really build some kick ass websites so starting tonight, and lastly i'll finish off the.
Michael T Ganschow Green: The class business by once again reminding you guys, please go and leave feedback for your fellow students and project one, and I think you guys are gonna want to see each other's project ones, because this class is like.
Michael T Ganschow Green: I want to I wanna I want so badly, to give you guys the the skills to realize these designs on the web in browsers I think you can really, really kick out the jams and I think that's going to be cool.
Michael T Ganschow Green: As as you guys learn how to build these things.
Michael T Ganschow Green: cool alright, so any other questions on anything I went over here in the kind of class business.
Michael T Ganschow Green: cool beans okey dokey.
Michael T Ganschow Green: let's start messing around here all right right dreamweaver already open or, should I got it already open whoo messing around with other class things cool cool cool alright so.
Michael T Ganschow Green: i'm going to move you guys over here and i'm going to close up chat, although I will keep.
Michael T Ganschow Green: On keep an eye out on it periodically okay so let's see here minimize this down, you can appear alright.
Michael T Ganschow Green: let's see what we got here so right now, our in in the class files, yes, we are, because we have our index that's a bunch of ducks.
Michael T Ganschow Green: fact about pull this open in the browser using my lovely browser preview elected to i'll look at that jack with everything scrolling over the top of him he's great we'll come back to him later.
Michael T Ganschow Green: we'll come back to him later alright, so let me.
Michael T Ganschow Green: delete my site root and Riyadh it again so that for for practice on site routing you guys don't necessarily have to do this, but I want to demonstrate this as many times as I can, because it's key to make he trained me for work properly.
Michael T Ganschow Green: So i'm going to delete my class demonstration forth with all of the lovely ftp server information trapped on it, oh no we're deleting our ftp server to yes, yes, we are.
Michael T Ganschow Green: By the by you cannot undo this action i'm wondering where can and do this action, but look what i've done i've now fully committed myself to.
Michael T Ganschow Green: deleting this guy the local root folder does not exist, I am aware that's an old one, thank you, cancel I want to go to the next one.
Michael T Ganschow Green: I just want to close out of this one, because i'm going to make a new one site manage sites, give me a new one, the new one come on now, what are we doing here well we're gonna go G RC 175 class demonstration.
Michael T Ganschow Green: Number fun and we're going to go find my local site folder which should be on my desktop although for some of you, it may be on a hard drive.
Michael T Ganschow Green: plugged into your computer I don't know how you're working setup here, so if you don't immediately see it on your desktop don't worry it's you know where you put it so we're going to click choose so that that's all pointed in here now.
Michael T Ganschow Green: And then we're going to go advanced settings set our images folder I don't think we'll be playing with too many images tonight, but it never hurts to set an images folder, just in case because you never know when a duck may creep out and get stuck to your design.
Michael T Ganschow Green: Then we're going to go down to jquery here we're not gonna be doing any jquery tonight, but again, you never know so it's always good to set scripts folder up like so tiffany boo say.
Michael T Ganschow Green: same is the same as the way i'm aware i'm aware, in fact, you know what i'm going to delete.
Michael T Ganschow Green: Oh it's one of those other ones I don't really know what bye bye i'm going to go.
Michael T Ganschow Green: And we're too much about it, I was going to delete it, but you know what you know what not to cancel um.
Michael T Ganschow Green: I selected the wrong site look at this, I was talking about sites I clicked off of my site to delete the other one and now we're going to go done as it should pop up over here.
Michael T Ganschow Green: there's our index folder and our lovely zipped working graphics folder that we used for ftp and you're working graphics, by the way, good work, everybody getting your.
Michael T Ganschow Green: Work and graphics folders into your student folders I went through them, I saw a bunch of them up there, so again, thank you for that.
Michael T Ganschow Green: You guys did a wonderful job getting those up and getting your designs up for project one now you got to do to finish it office go give everybody a piece of your mind, even just a little piece work.
Michael T Ganschow Green: Okay, so now we're going to play around with what's called the box model minimize dream up here, and let me show you the box model.
Michael T Ganschow Green: So i'm websites are basically nothing but a series of alphabet style building blocks there Bay there they're just a bunch of little squares stacked all around and inter relating to each other.
Michael T Ganschow Green: And this inter relation of squares is called the CSS box model we put this in chat screwed this down because the browser because the zoo chrome is clipping over the top of the browser chrome and this CSS box model is basically meant to represent all of the lovely little.
Michael T Ganschow Green: lovely little boxes that you're going to use to build, so there are fundamentally four parts to the CSS box model.
Michael T Ganschow Green: So.
Michael T Ganschow Green: starting off with your content now your content is typically a piece of text or an image inside of one of these boxes, there are other content types.
Michael T Ganschow Green: tables and things like that, but nine times out of 10 it's going to be either an image or a piece of text Okay, and that is this, that is, the.
Michael T Ganschow Green: informational element that is within your box that you're building maybe a box within a box and then the box content, maybe a few more boxes you don't know.
Michael T Ganschow Green: Then we have padding, which is the space between your content and the edge of your box so from their content to the edge of your box, that is your padding here.
Michael T Ganschow Green: Then you have your border your border is the line around the edge of the box okay in print design, this is called a stroke.
Michael T Ganschow Green: The box model it's called a border and.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: From your border to the next object around it, whether it's another piece of content, another box and other whatever.
Michael T Ganschow Green: That distance between objects is called the margin Okay, so you hear me referring to all different pieces of this box model tonight and for the rest of the Semester because.
Michael T Ganschow Green: All of this is very important Okay, this is the primary structure, through which websites are laid out is this box model and really boxes within boxes within boxes within boxes, that is, the, that is, the.
Michael T Ganschow Green: Primary methodology that all of this is laid out with and so we're going to be playing around a lot with this box.
Michael T Ganschow Green: model as time goes on, starting tonight.
Michael T Ganschow Green: So questions on this box model at all right now.
kianabohm: Is the border box like as.
kianabohm: Small as a stroke usually.
Michael T Ganschow Green: Correct so so.
Michael T Ganschow Green: Borders are usually pretty.
Michael T Ganschow Green: Much pretty much handled like strokes and print design and that, by and large they're done with points.
Michael T Ganschow Green: Although sometimes they're done with other measurements to CSS.
Michael T Ganschow Green: Things so you have like 18 measure feasible to you, but typically they're done with points and to end typically.
Michael T Ganschow Green: Unless you unless you're really doing something for aesthetics they're not going to be more than one or two points on your border and they're very, very much like strokes in print design.
Michael T Ganschow Green: So if you're familiar with those borders, it will be second nature, usually just aligned on the edge and.
Michael T Ganschow Green: I get why they showed a bigger border on this model here, mostly because they wanted it big enough to include the word border but you're you're you're very rarely going to be using a.
Michael T Ganschow Green: Border this thick if you are you've got a statement to make that's for sure.
Michael T Ganschow Green: that's a good question other box model questions.
Michael T Ganschow Green: All right, should we build some boxes.
Michael T Ganschow Green: Okay, so these boxes, that the box model speaks of.
Michael T Ganschow Green: are primarily layout tags the header nav main footer that I showed you on our ducks website, along with the DM and a couple of others and, in fact.
Michael T Ganschow Green: i'm going to build a.
Michael T Ganschow Green: New page here, that is.
Michael T Ganschow Green: That will have a main and a couple of dibs in it that will will play with how they interrelate.
Michael T Ganschow Green: i'm going to add other deals in there too alright cool so.
Here we go.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So.
let's.
Michael T Ganschow Green: minimize this guy and in the dream Weaver.
Michael T Ganschow Green: So I was originally thinking of doing this in the deck page, but the deck page is a little cluttered right now don't worry.
Michael T Ganschow Green: When I can abandon it we're going to come back to the deck page we promise promise promise promise we're gonna come back to the deck page, I promise, but this one is we're going to make a boxes page to play around with this box model so to do that i'm going to make a brand new html.
Michael T Ganschow Green: So i'm going to go file new.
Michael T Ganschow Green: html.
Michael T Ganschow Green: Make sure it's got no bootstrap no pre processors no none of that on it and i'm going to go ahead and click create now under monitoring leavers already configured how I like it.
Michael T Ganschow Green: i've got my i've only got three palettes over here and they stretch the length of the screen I got to files and insert and a CSS designer over here, I have my.
Michael T Ganschow Green: My splits set with the design view on the bottom and split horizontally, rather than vertically depends on what feel free to mess around with those settings and and come up with a dream Weaver that.
Michael T Ganschow Green: works for you, because dream leverages got a very customizable interface, much more so than a lot of other adobe programs and I highly recommend tinkering around with it as you're getting stuff set up.
Michael T Ganschow Green: So now time to.
Michael T Ganschow Green: Do a magnified share portion of screen.
Michael T Ganschow Green: And we're going to move this over here and we're going to add this into the code here on our brand new you know Come on, I want you to shift a a hey what are you doing portion of screen, I want you to get tinier and wider Thank you okay so.
Michael T Ganschow Green: we're going up here to these does html and i'm going to do a little cleanup and the html first to make it a little easier to read we're going to turn this into a proper development page here I think i'm going to stretch this down a hole with the by.
Michael T Ganschow Green: html area gene and i'm gonna drop these guys down so that they open up I got a lot of questions on spacing and html.
Michael T Ganschow Green: Again, except for the very first space that you put in html does not recognize them so when you put in spaces you there you're mostly doing it so to organize the code, so you can kind of see what's going on.
Michael T Ganschow Green: give my page a page title, because as as all of you are aware, page titles are very critical real estate so i'm going to give this a nice page title i'm going to go move God it's full of boxes.
Michael T Ganschow Green: We go, because you know what we're going to fill it up a boxes in just a second so boom it's full of boxes and you know what.
Michael T Ganschow Green: You know what let's fill it full of boxes i'm gonna need some boxes me someone come in here and my body tag and first of all i'm going to start off with a layout tag a layout tag okay we're called this mean.
Michael T Ganschow Green: I don't mean I guess you're doing mean yeah, why not mean means a good gentle tag dream weavers already yelling at me about you haven't closed your main i'm aware.
Michael T Ganschow Green: By the way, as you're coding and dreamweaver these little red numbers are really handy they'll tell you where where errors are in your code really quick, so you don't you don't you don't have to read through your code and see where it's broken, which is, which is just.
Michael T Ganschow Green: Just just marvelous back in the day when I first started having to learn this you might have.
Michael T Ganschow Green: 25,000 lines of code and you have to go through it letter by letter figuring out what's broken where and your website.
Michael T Ganschow Green: Oh man it's enough to.
Michael T Ganschow Green: it's enough to make you question what you're doing with yourself when you're doing that.
Michael T Ganschow Green: So inside my means i'm going to insert a couple of simple boxes and these i'm going to make with.
Michael T Ganschow Green: My dibs good old fashioned div tags talk a little bit about these guys do is short for division.
Michael T Ganschow Green: There the oh gee layout tag that predate all the rest of these layout tags and they work pretty much like them in that they have no intrinsic value they're not.
Michael T Ganschow Green: bolding type or making a link or setting an anchor point or inserting an image or anything like that they're just they're all there is to sit there with their with their palm out in like a hotel mater de getting asking you to apply styling to them, which we will shortly.
Michael T Ganschow Green: So, before I do anything else I think it's time to save so i'm going to go ahead and save this thing into my root folder here we go I think i'm going to call this thing of a Bob.
Michael T Ganschow Green: boxes because, why not boxes and I am going to mash save there we go, so now boxes has been saved i'm sure you guys are all excited about that so questions on anything i've done here so far.
Michael T Ganschow Green: Just a slight variation on what stop it just a slight variation on what we have done previously.
kianabohm: What is the main tag do again.
Michael T Ganschow Green: main tag is a layout tag that's designed to designate in your document, where the main part of your content is it's largely a filler tag for the middle of the website.
Michael T Ganschow Green: Different.
Michael T Ganschow Green: Different html5 tutorials use a different middle tag some of them will tell you to use an article tag some of them will tell you to use a section tag.
Michael T Ganschow Green: I personally prefer to use a main just because I think it's very descriptive of this is the main area of where my content is going to be.
Michael T Ganschow Green: there's between all those tags there's no real wrong way to use those we'll talk about articles and.
Michael T Ganschow Green: sections, a little bit later and how they interrelate with means and things like that, but.
Michael T Ganschow Green: i'll just use the main because it's kind of a good middle tag i'm not going to use a header or footer on this, because this thing's mostly we're gonna be playing with boxes, but it's a good kind of master container for all of our.
Michael T Ganschow Green: Our other.
Michael T Ganschow Green: box experiments we're going to be playing with this week.
Michael T Ganschow Green: that's a good one to other questions.
Okay.
Michael T Ganschow Green: cool alright, so the box is saved.
Michael T Ganschow Green: we're going to do a full screen share and we're going to see what this looks like.
Michael T Ganschow Green: In a browser to be a nice blank white page let's find out shelley.
Michael T Ganschow Green: there's some design minimalism right there for you guys, that is just textbook minimalist design, while while i'm here in a browser window.
Michael T Ganschow Green: i'm going to go over to my bacon eggs and bacon Epsom i'm going to fetch a little content, allowing her to for my each of my div tags, so we can mess around with content within and content with out.
Michael T Ganschow Green: So i'm going to go sure we'll just give me bacon and i'm going to grab.
Michael T Ganschow Green: A couple lines off this paragraph.
Michael T Ganschow Green: And i'm gonna come to one give.
Michael T Ganschow Green: And i'm going to insert the text with no P tag, by the way.
Michael T Ganschow Green: Just raw text and they put a P tag later, but for now just raw text oh look at that there it is cool beans okay so, then I am going to come and grab some more bacon wisdom here.
let's go.
Michael T Ganschow Green: oops good we'll grab that.
Michael T Ganschow Green: And we'll put it in place.
Michael T Ganschow Green: Now, once i've got my text in place here, I am going to commented out.
Michael T Ganschow Green: Why am I doing this because i'm going to use these comment tags on, let me zoom in here we're still a full screen hang on one second we share.
Michael T Ganschow Green: Like whiteboard this portion screen share all right, so let me zoom in a little bit so you guys can see here so i'm gonna come in here, and I am.
Michael T Ganschow Green: got yes, I know I am comment yesterday move where you can make the child, I mean I know i'm going to click on you i'm going to come in here and i'm going to.
Michael T Ganschow Green: comment, this text out so it'll be invisible will make it visible a little later, but for now it's going to be invisible so that.
Michael T Ganschow Green: I could just play with the dibs as boxes in the meantime.
Michael T Ganschow Green: Alright, so with my texts placed i'm ready to style Has anybody got any questions any questions bubbled up well i've been inserting text and showing you guys the beautiful screen in the browser.
Heather Amistani: Okay, so I was just copying what you were doing.
Heather Amistani: and your games are still blue for my aren't they always grey.
Michael T Ganschow Green: grey Okay, so that means that there is an improperly closed comment tag somewhere in your text, so I would check at the end of your text and see if you have a dash dash bracket there because you don't what will happen is this.
Michael T Ganschow Green: To see how now my entire paint like everything after my first tip there went Gray.
Michael T Ganschow Green: yeah if you put a dash dash bracket to close it up and boom everything comes back in so I.
Michael T Ganschow Green: Think yeah so did you find it.
Michael T Ganschow Green: Yes, cool excellent a.
Michael T Ganschow Green: cool yeah so anytime you see that that is by the way.
Michael T Ganschow Green: Actually really helpful with.
Michael T Ganschow Green: thing that comment tax do because you can use them to remove bad html or to find a bad html.
Michael T Ganschow Green: In a sea of your code by commenting out smaller and smaller chunks so you can essentially without having to be really brave and delete vast chunks of your website.
Michael T Ganschow Green: You can eliminate broken chunks down until you just find what's broken, so you don't have to just like you know randomly delete massive amounts of your page is very, very handy.
Michael T Ganschow Green: means other questions.
Michael T Ganschow Green: let's uh let's give this thing a little style shall we.
Michael T Ganschow Green: want to put a CSS on this bad boy and we're going to we're going to give it some style, so this over here like so.
Michael T Ganschow Green: So I am going to.
Michael T Ganschow Green: come over here to my CSS designer drop down.
Michael T Ganschow Green: i'm going to make a new CSS file.
Michael T Ganschow Green: By clicking on this little plus sign right here and i'm going to say, create a new CSS file well when I do that.
Michael T Ganschow Green: opens up this little pop up over here, it says, create a new CSS file, and I say you better believe it buster i'm going to create a new CSS file and i'm going to do that by clicking browse here, so I know what folder to sticking in.
Michael T Ganschow Green: notice it's going to try and try and stick by CSS file in my main directory, no, no, no, no dream Weaver, no, no, we wanted in the CSS folder Thank you.
Michael T Ganschow Green: And we're going to call this CSS i'm going to call the CSS we can call it whatever we want, but i'm going to call my inbox controller, you call yours, whatever you like it's up to you pink flamingos.
Michael T Ganschow Green: Michael is crazy.
Michael T Ganschow Green: This is the the box master.
Michael T Ganschow Green: The the the the the the cube wizard whatever you want to call it, you call it whatever you like.
Michael T Ganschow Green: And I click OK, and now suddenly oh in my html up in my head tag i've suddenly sprouted a link to my style sheet also everything up here is suddenly changed i've got another round of tabs there's my box controller CSS right there.
Michael T Ganschow Green: And then so i'm going to go ahead and i'm going to click save all okay so um.
Michael T Ganschow Green: So let's see here hang on one second so.
Michael T Ganschow Green: So Kathy You were right.
Michael T Ganschow Green: Here right, where I was where I was clicking in here right or were you back out here on the create a new CSS file.
Michael T Ganschow Green: So what I did in that thing is, I went to my plus sign over here in my CSS designer to create a new CSS file, I came here to my create a new CSS file window right here, I clicked browse.
Michael T Ganschow Green: which opened up my root folder and my root folder was trying to start to put this thing in.
Michael T Ganschow Green: In the main route, so what I did was I double clicked on my CSS folder and then I went here to save as I gave it a file name and I saved it so my case mine is called box dash Controller and it's all set.
Michael T Ganschow Green: And when I did that I have suddenly sprouted a link to box dash controller, instead of tabs up here that show me my box dash controller code and my boxes html was requesting to be saved, so I did a file save all to.
Michael T Ganschow Green: To save those guys i'm also going to come over here and tab in my link, so I can see at a glance that it's in my head tag to boot, just like that all right.
Michael T Ganschow Green: Mr around a little bit.
Michael T Ganschow Green: You know what.
Michael T Ganschow Green: Last time we've played with CSS.
Michael T Ganschow Green: I use the CSS designer over here.
Michael T Ganschow Green: I think this time i'm going to hand code a few things oh snap here we go michael's hand coding look out it's all over now baby blue.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: cool so.
Michael T Ganschow Green: let's hand code some CSS ducks okay.
Michael T Ganschow Green: So first things first First things first.
Michael T Ganschow Green: I think this thing needs a background color.
Michael T Ganschow Green: So you guys know where this is going alright chat.
Michael T Ganschow Green: Give me a background color.
Oh.
Michael T Ganschow Green: they're paralyzed with the indecision about a background color neon pink i'm probably going to mute that because we're going to be looking at neon pink slip and all these colors bright colors.
Michael T Ganschow Green: let's see what else we get here i'm probably going to going to mute the color choices just slightly because you're going to have to stare at this for quite a while so neon pink line green Emerald rust like a few people go.
Michael T Ganschow Green: i'm going to save this chip to save this chat log, by the way, as I save all the chat logs and i'm going to come back and references for colors.
Michael T Ganschow Green: All right, so Look, we got votes for eggshell alright cool, but I will keep Emerald neon pink line green rust and pastel pink in mind.
Michael T Ganschow Green: As we start playing with boxes because we're going to be making a lot of boxes here and playing like weird Shell games with them okay so let's have some fun so i'm going to code me.
Michael T Ganschow Green: A nice eggshell white background color hand code well sort of him code dreamweaver is going to help me out a little bit and you'll see here in a second so First things first.
Michael T Ganschow Green: In order to color the background I need to target my body tag, which is the tag that contains everything that's visible in a browser so in order to do that I just typed in the word body with nothing in front of it and.
Michael T Ganschow Green: Then i'm going to add a set of curlicue brackets, so that I can come in here and start typing in properties and values in this case, our property that we're going to be throwing in is a background color.
Michael T Ganschow Green: Okay let's mix us up an eggshell know once I get colon and kick out on background color Well, first of all, the color coded this purple very nice.
Michael T Ganschow Green: Excellent and then the color picker pops up now CSS is comes with a series of word colors which every browser.
Michael T Ganschow Green: More or less renders correctly when you use them and they're basically all these little kind of word colors you can just punch in the word and it will color things, however we're doing custom colors and I was requested eggshell so let's go slightly warm.
Michael T Ganschow Green: Something like that a gentle warm eggshell there we go.
Michael T Ganschow Green: Bob.
Michael T Ganschow Green: Now it inserts an rgb a mix, because I have my my guy set to insert rgb mixes and then I simply finish off with a semi colon and i'm all set.
Michael T Ganschow Green: So the rgb a is a mix of red green and blue that's the first three common numbers and then this last number right here is actually a set of percentages, that is your alpha transparency.
Michael T Ganschow Green: 0.00 is completely transparent, as if there's no color there 1.00 is fully opaque just full color and then, as you decimal down Point seven 5.5 Point two 5.3 3.1 what all that is that makes it further and further transparent let's see what this.
Michael T Ganschow Green: The same place that we add our assets, when we do our own website um, how do you mean allison.
Michael T Ganschow Green: Oh, you mean the.
Michael T Ganschow Green: mean like where you're feeding your background images and stuff in.
Michael T Ganschow Green: Yes, yeah okay yeah yeah i'm the background color background color is not where you do it if you're feeding something in like a.
Michael T Ganschow Green: Like a programmatic gradient or a linked background image, like our docs if we if we open our deck up and popped it open you'd see it in, there is a as a different background property called background image.
Michael T Ganschow Green: And there's a few different ways, you can see all the as I cleaned it up, you can see all the different values, we can have in here, so we can stick in an image.
Michael T Ganschow Green: We can stick in linear and radio gradients we can stick in repeating gradients and we can stick in a URL as well ducky himself if I open Mr duck up his index dot html master ducky here is done as a background image URL right here.
Michael T Ganschow Green: On our duck walk.
Michael T Ganschow Green: So i'm not going to use the background image, this time because we've got a pretty eggshell background, if I hover over the top of my rgb a.
Michael T Ganschow Green: This guy So how do we bring up the color picker browse count Okay, so when you want to browse the color and I am going to just.
Michael T Ganschow Green: copy paste this down here so that I can paste it back because I don't want to remix my head gel.
Michael T Ganschow Green: When you when you when you're making a color in here so there's two ways to to browse the color if your hand coding it the.
Michael T Ganschow Green: End dreamweaver the color picker pops up right after you hit colon to separate the property and value here.
Michael T Ganschow Green: If you're using the CSS designer palette to do it over here in the CSS designer palette that is.
Michael T Ganschow Green: In the properties area you click right here to the background and the cut the background color mixer is right there okay right there at the top of the background.
Michael T Ganschow Green: But if your hand coding it all you've got it, yes, I know I know i'm still in zoom all you got to do is come basically right here as you're finishing typing your.
Michael T Ganschow Green: Your property and it will come up with this values drop down.
Michael T Ganschow Green: And then you just and you can either click one of the word colors or you click color picker here, I have my color picker set rgb a because I like rgb a it's it's totally awesome.
Michael T Ganschow Green: And then that way, then you can you can select whatever color you want my case mine is a subtle eggshell subtitle eggshell even very nice sort of warm white.
Michael T Ganschow Green: New robin's egg blue maybe two maybe i'll do that for the container.
Michael T Ganschow Green: So hopefully that answered your question kiana.
Michael T Ganschow Green: Other questions, while we're while we're Q amp a in here.
We.
Michael T Ganschow Green: Should tweet tweet tweet tweet tweet alright so then.
Michael T Ganschow Green: let's start adding other colors shall we let's add a color for our so we've got a.
Michael T Ganschow Green: we've got a main here.
Michael T Ganschow Green: And we've got our gives here okay so let's add background colors for those guys as well, so let's see here we've got several background colors to choose from, so I think Emerald would make a nice contrast in background color for my lovely little div tags so.
Michael T Ganschow Green: I am going to.
Michael T Ganschow Green: come in here and i'm going to add in a main selector put a couple of curlicue brackets on this guy and go background.
color.
Michael T Ganschow Green: All right, little Green, you say away every man should be a color one hang on a SEC, let me see.
You too.
Michael T Ganschow Green: Several pretty close Emerald Greens, but no, no actual Emerald with an e will find that we're going to bring up the color picker and we're going to get us a beautiful Emerald green.
Michael T Ganschow Green: still a little more looks like a beautiful tree lined background, there we go and look at nature there's a nice Emerald right there.
Michael T Ganschow Green: So we'll do a nice Emerald for our main.
Michael T Ganschow Green: lead for our dibs well let's kick them off with a little pink I think we need to neon pink here so for our div tags i'm just going to do a div class for those Dudes.
Michael T Ganschow Green: will do a background color for these guys so we'll do a background color.
Michael T Ganschow Green: we're going to use a word for that neon pink let me see here we've got let's see a fuchsia there we go that's Nice and neon pinky fam will use a word color for that so that they're all set and ready to go alright so i've got a nice set of colors here so.
Michael T Ganschow Green: let's see what this looks like in a browser shall we so to do that i'm going to go file save all and then we're going to go to New share yes ma'am let's go basic full screen share all right we're gonna come down here to my preview are known as the wizard which shows me a nice.
Michael T Ganschow Green: Future box.
Michael T Ganschow Green: And I say crow.
Michael T Ganschow Green: Oh, all I see is my eggshell where where did my boxes go well.
Michael T Ganschow Green: here's the first piece of the box model.
Michael T Ganschow Green: Unless you specify one or more dimensions, with the box model boxes are invisible in html and CSS.
Michael T Ganschow Green: At CBS s the boxes, have no value to them, so if we're not putting stuff in there we're not going to see anything So what we need to do right away, is, we need to give these guys a little bit of dimension.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: here's another fun fact for you every html tag that is subject to the box model all layout tags, plus a couple of tags that have a.
Michael T Ganschow Green: Certain display property sat on them if you provide them with no width at all period, no width will.
Michael T Ganschow Green: Instead, go to 100% of the available space of their container so they will stretch horizontally 100% of the width of whatever is containing them, so if you want something to be 100% of the area don't even set it with for it still you don't need to come and, in this case i'm not gonna.
Michael T Ganschow Green: i'm not going to settle with.
Michael T Ganschow Green: i'm going to just set a height for our main so we can start seeing things OK.
cool.
Michael T Ganschow Green: So for my main.
Michael T Ganschow Green: You know what.
Michael T Ganschow Green: i'm going to set the main just yet we're going to do an exam we're going to do exact dimensions, first on our little dips so they're nice little boxes and we can see them then i'll add dimension to my main how about that.
Michael T Ganschow Green: Alright, so we're going to go.
Michael T Ganschow Green: Hello chrome alright so let's go back to my zoomed in.
Michael T Ganschow Green: portion screen there we go so First things first is i'm going to make my dibs into little boxes okay so we've got a background color fuchsia.
Michael T Ganschow Green: And we need to give them some dimensionality okay so i'm not gonna let them just kind of faff out to 100% of the width of my browser window, which is what they're doing right now i'm going to give them a much narrower width and a height.
Michael T Ganschow Green: So.
Michael T Ganschow Green: i'm with the night.
Michael T Ganschow Green: are pretty simple in CSS.
Michael T Ganschow Green: Just as simple as width.
Michael T Ganschow Green: And now we can put in whatever we want for the width we have a million different measurements for these widths.
Michael T Ganschow Green: Most of the time, and when you're going to be using percentages, but occasionally you will use exact sizes and when you do you're usually going to use ends or pixels.
Michael T Ganschow Green: For most of my demos I use pixels but you'll see some other demos vertu use mz rams for their sizes that's just fine for most of my main layout tags.
Michael T Ganschow Green: i'm going to actually be using percentages, but these little guys, I wanted to be firm boxes okay firm boxes so in order to do that i'm going to give them a pixel width so i'm going to go, I want to make these dibs.
Michael T Ganschow Green: When the big big but not too big so i'm going to call them 300 pixel with boxes.
Michael T Ganschow Green: And then i'm going to give them a height, which is he gh T again um we're typically not using a ton of heights.
Michael T Ganschow Green: In html except when you want to clearly define something like a button or a box or something like that, then you bring in the height well i'm trying to clearly define boxes here so we're going to bring in some boxes and i'm going to go height.
Michael T Ganschow Green: What are 300 pixels will make these little squares so that are neat little squares.
Michael T Ganschow Green: Now, if I hit save all on everything file save all and a screen share this so that you guys can actually see what i've done what have I done.
Michael T Ganschow Green: desktop one share, and we go out to the browser oh snap dog things have opened up, we have our nice Emerald main we've got this pink wall of doom over here, that is our two letter blocks being stacked on top of each other what's happened well.
Michael T Ganschow Green: here's what's happened and why we don't use a ton of heights in.
Michael T Ganschow Green: In web design when objects that don't have an assigned height or that have their height assigned as a Min height, which will be using quite a bit of this semester.
Michael T Ganschow Green: i'm real stretch or be stretched by their content, so when we first started out our main had no none 08 height on him he still doesn't have any height on him.
Michael T Ganschow Green: Neither, though, did our lovely dibs Okay, but what we did with those dims was we gave them within height, and so what they did was a stacked on top of each other, like letter blocks, because everything in html is vertical.
Michael T Ganschow Green: So they stacked on top of each other, like letter blocks and now that has Wednesday open this means, so that we can see it in all of its Emerald goodness.
Michael T Ganschow Green: there's your first layout trick you want to be very judicious with heights and let your content do a lot of the stretching it will help preserve your flexibility and functionality down the road very, very handy questions so far.
kianabohm: So you're stacking them like towards you like on the Z axis.
Michael T Ganschow Green: No, no they're actually stacked on top of one another on the next thing i'm going to do is i'm going to go change the color of one of them, so you can see that.
Michael T Ganschow Green: But basically, what these are is, these are two neon pink 300 pixel by 300 pixel boxes stacked on top of each other html as a rule, because the all the tags are assembled vertically in the code stacks everything vertically to.
Michael T Ganschow Green: And so, this stalking is something that can be really worked with in design, particularly.
Michael T Ganschow Green: On a mobile design, where you have like a thin stovepipe you're playing with you can use kind of this natural html stacking tendency to really work with you.
Michael T Ganschow Green: i'm right now, it looks like a big column right because of the same color but we're going to go change the color on one of them real quick here, so you can see the stalking you in action okay.
Michael T Ganschow Green: So that's a good question though other questions.
Michael T Ganschow Green: Like the questions i'm getting today you guys are engaged.
kianabohm: Just now, when I hit save all on my dream we're very document it closed out everything.
Michael T Ganschow Green: Oh Oh, it sounds like dreamweaver crashed, although if you have a.
Michael T Ganschow Green: If you have your site root created when you restart dreamweaver.
Michael T Ganschow Green: You were your site should still be preserved over here in the files, so you should be able to fire up dreamweaver and everything should be over here, so you can go reopen it.
Michael T Ganschow Green: that's that's interesting look at that you killed dreamweaver you gone and done it.
Michael T Ganschow Green: So, as it said just a second ago in order to differentiate our.
Michael T Ganschow Green: gives I got to change the background color of one of them, because our deeds naturally come up this bright neon pink that was requested who requested the neon pink.
Michael T Ganschow Green: olivia, so this is olivia's neon pink here hope you're happy olivia um so i'm going to change the background color of one of these deb's real quick here.
Michael T Ganschow Green: And i'm going to do that by using a different kind of styles we've been playing with tag styles this whole time I think it's time for the class to have its very first class style because.
Michael T Ganschow Green: This whole page right here, is it just lacks class, and I think it needs, I think it needs a little class so.
Michael T Ganschow Green: i'm going to go into one of my device here and i'm going to add a little attribute on to the the tag in order to attract a class style test and then i'm going to put a class style in it change the background color and we're going to have loads of fun.
Michael T Ganschow Green: So i'll change the color of the second day of here real quick so in order to do that, let me get a new screen share back to the zoomed in version, so you can see the code.
Michael T Ganschow Green: And what i'm going to do is i'm going come into my second day of and i'm going to go to the first opening tag idea this tag right here.
Michael T Ganschow Green: And i'm going to collect between the wii and the close bracket on the opening tag here.
Michael T Ganschow Green: And i'm going to insert an attribute this is exactly like inserting that H R E, F link tags we start off with an A you do a space you put in an HR E, F equals quotation marks your link, and it goes.
Michael T Ganschow Green: Work you don't make the sound, so in this case, I want to put a class style in here so i'm going to add an attribute called class.
Michael T Ganschow Green: equals quotation marks OK, so now whatever word I put in here will be the name that I will call for my class style.
Michael T Ganschow Green: So I think i'm going to call this second div just extraordinarily difficult to remember totally an obvious name of two.
Michael T Ganschow Green: Okay, so i've added a noun an attribute class equals quotation marks to so that now, I can go in and I can directly target this one div here, based on this class right here okay.
Michael T Ganschow Green: So i'm going to go into my Dev pinky and i'm going to add in a class style now.
Michael T Ganschow Green: Class styles have an ever so slightly different selector then tag styles to textiles have nothing in front of the word in them if you see.
Michael T Ganschow Green: A selector in a CSS That has nothing in front of the word that is a tag silence looking for an html tag automatically apply to okay.
Michael T Ganschow Green: Class styles when you see them have a period in front of them notice I typed in a period and dream leavers already read through my document and looked for any appearances, have any class styles me to use their name it's already pre supplied to so i'm going to put brackets on to here.
Michael T Ganschow Green: let's see here so we've got neon pink let's do lime green for this second one, I think so for two we're going to change the background color out on it.
Michael T Ganschow Green: lime green ahoy I think I think we may actually have a lime green and the colors we use the green yeah we we have long green.
Michael T Ganschow Green: let's see, we have a line we do look at that right there look at that all right heather you were thinking ahead, we have a word color here for for lime green.
Michael T Ganschow Green: bloom alright, so now i'm going to go file save all and I am going to fire my before the fire my browser window open let's go back to the full size desktop and i'm going to go pop this up and look at that so now, you can see one 300 by 300 pixel box, we have a tag style of.
Michael T Ganschow Green: of bright screening neon pink and then I have another one that is also 300 by 300 but it's been overridden it's got a class style on it, saying.
Michael T Ganschow Green: No, no, no, and I don't want this one to be neon pink I want it to be lime green so notice know what I want to save that when I hit that button Thank you notice what I have done here.
Michael T Ganschow Green: So what I have done is I have used this class style right here to override the fuchsia background color I have on my dims okay.
Michael T Ganschow Green: i've made this override that class styles, are designed for precision targeting and in the cascade that is who gets preference over what when there are conflicts, the class style overrides a tag style okay.
Michael T Ganschow Green: overrides a tag style so i'm overriding the background color on this div here okay with with this lime green here.
Michael T Ganschow Green: questions on what i've done.
Michael T Ganschow Green: that's how you.
kianabohm: override why didn't why didn't it due to both the boxes.
Michael T Ganschow Green: Why, I didn't do it to both the boxes is because I went into my html.
Michael T Ganschow Green: And on that div right there I add on the second dip I added in a little attribute a class of two so class equals quotation marks and I put into you can put in whatever word you want for classes there's no.
Michael T Ganschow Green: there's no needed nomenclature for as long as you keep them all lowercase in their special characters no spaces.
Michael T Ganschow Green: You can name them whatever you like, so I gave it a class of two and then I went into my CSS here and I called out to, and I said only on things that have a class at to throw in the lime green background to get a booth.
Michael T Ganschow Green: that's what finances are so awesome because you can use them for direct precise targeting of things in your document very cool.
kianabohm: And they can be applied to multiple.
kianabohm: Absolutely, when I.
kianabohm: Had that class.
Michael T Ganschow Green: Exactly So if I wanted to have like let's say.
Michael T Ganschow Green: I wanted to.
Michael T Ganschow Green: Oh let's say I want to make my main lime green also okay so let's say I want to do line green for everybody right, I might do something like make a class of line green Okay, and then I might do class lime green and then on my main I can also apply that class of lime green.
Michael T Ganschow Green: loan loan green Michael Lang green and now save now by pop this open loop to the main.
Michael T Ganschow Green: And then.
Michael T Ganschow Green: notice everything's down lime green because it's overwritten so you can apply classes as many times as you want, that is, that is their biggest advantage to is not only are the absolute precise target errors, but they are.
Michael T Ganschow Green: But they are.
Michael T Ganschow Green: They can be used repetitively throughout the document so if you have like a common color or a common type style or a common, something that you that you're going to use a lot, it probably behooves you to just make a class style of that guy and apply it to.
Michael T Ganschow Green: The apply it to anything you want that style to appear on.
Michael T Ganschow Green: So, for example, if I wanted to change the size of my to give also because right now it's inheriting 300 pixels by 300 pixels here.
Michael T Ganschow Green: I could just put a smaller size or a bigger size in my to style here, but if I wanted to use that sizing down the road, I might make a I might make a class style of something like 200 X 200.
Michael T Ganschow Green: And then bracket ology bang oh you don't like numbers do you Oh yes, unexpected token oh yeah you don't want numbers fine, so I might make it 200.
Michael T Ganschow Green: You like that better.
Michael T Ganschow Green: 200 200 and then do a width.
Michael T Ganschow Green: 200 pixels.
Michael T Ganschow Green: be excellent pikas know pockets, Michael height.
Michael T Ganschow Green: 200 pixels and then I can add other classes.
Michael T Ganschow Green: Colin legal I can add other classes save.
Michael T Ganschow Green: file sable in here by simply coming into my class right here say, have the one word if I do too, and then I do a space, I can add other classes in here, so now i've got the box is going to be much smaller boop.
Michael T Ganschow Green: notice it's now 200 pixels um because I added that sizing class in so you can add multiple classes in and and and along with precise targeting.
Michael T Ganschow Green: One of their big strengths is you can set like a handful of clients styles that you think you're going to be used all over the document and just drop them in and and lay them out in there.
Michael T Ganschow Green: they're actually inside of the darker green box and.
Michael T Ganschow Green: that's what's.
Michael T Ganschow Green: that's what's holding the gritty the bigger green box open, so the green box is basically their their container but it's elastic so it's being stretched by whatever size, we put on these guys.
Michael T Ganschow Green: Which is, which is really cool so um the taller we make them the taller the green box will become which is pretty slick and again that's why we don't play with fixed heights all that much in web design because of that we can stretch everything it's all a gumby or laffy taffy.
Michael T Ganschow Green: Or perhaps it can be made.
kianabohm: Other ideas like Is this all like a demonstration of one box model like these are the four boxes that you were describing.
Michael T Ganschow Green: No actually the this is demonstration of the box model, right now, this is just sizing of the boxes, essentially, and how the boxes kind of interrelate so.
Michael T Ganschow Green: This so so we're starting off kind of making our boxes and then we're going to play around with other elements of the box model in a little bit here.
Michael T Ganschow Green: But basically, what what we're doing now is we're just sizing some boxes and playing with class and tag styles to kind of show you how class and tag styles interrelate as well.
Michael T Ganschow Green: Because you know.
Michael T Ganschow Green: i'll never, never pass up the opportunity to teach a little.
kianabohm: BONUS now.
Michael T Ganschow Green: So, right now, these boxes.
Michael T Ganschow Green: Are their own deals, so you.
Michael T Ganschow Green: can see here here's my first day of there's my second day of and there's my container main and in my CSS that's reflected as well i've got all these guys here now um there's a lot of.
Michael T Ganschow Green: A lot of chatter about how to properly organize your CSS selectors these these rules over here.
Michael T Ganschow Green: And there is the only area where order matters is when your styling links and we'll get to those when we get to links the rest of them, you can stack in whatever order you want.
Michael T Ganschow Green: You can stack them by type, you can stack them by location, you can stack them by whatever.
Michael T Ganschow Green: I prefer when I am building CSS assistances to stack them by where they appear in the code so very soft my body stuff up at the top.
Michael T Ganschow Green: And then i'll have like a header and the nav and then you know mean and then footer and then anything in in those guys.
Michael T Ganschow Green: I will have them in the order they appear through out the document and that way what that does for me is that lets me.
Michael T Ganschow Green: That I can immediately reference by the location of where that that Stat either class style or tag or ID or whatever appears in the document I can immediately then go to my CSS and scroll until I hit that point and CSS to so I can essentially build them together, which is really cool.
Michael T Ganschow Green: Other questions that's good.
Michael T Ganschow Green: Well, I blow my nose.
Michael T Ganschow Green: Look deaths and things yelling at me for being muted you're muted stop talking now I wasn't talking it's blowing my nose okay so questions on CSS questions on.
Michael T Ganschow Green: colored boxes.
Michael T Ganschow Green: cool all right.
Michael T Ganschow Green: So we've got our we got our boxes kind of colored we've got our boxes kind of sitting there doing things i've got one of them is slightly smaller than the other.
Michael T Ganschow Green: we've got all kinds of weird stuff happening here so let's actually engage in the box model proper here, shall we I think that'll be I think that'll be fun that'll be fun.
Michael T Ganschow Green: So what i'm going to do in order to engage in the box model property prop that properly is i'm going to go to my main big green box my container my main tag and i'm going to add in a bit of adding to it.
Michael T Ganschow Green: Now, what will this do padding will add space between the edge of the main and the objects contained within it in the content within it.
Michael T Ganschow Green: So if we go back to our box model chart here it's going to add distance between our content and the edge of the box, so in this case it's going to add distance between these two boxes here and the edge of the green box okay.
Michael T Ganschow Green: know what I want to say that when you get that but.
Michael T Ganschow Green: Alright, so let's go and let's zoom back in again.
Michael T Ganschow Green: up there, we go zoom back in again and i'm going to come over here to my main and i'm going to add a little bit of padding now dreamweaver helps you along here really cool it does a really cool little thing here, so if I add in padding.
Michael T Ganschow Green: And I hit colon I do a space and I start typing in numbers let's say I want to add, we could do panning and pixels or percentages or m's or rams or whatever we want to do.
Michael T Ganschow Green: i'm going to do my padding in pixels so as soon as I start adding in a number here dreamweaver brings up this little chart showing us what exactly we're modifying here.
Michael T Ganschow Green: If you put one number in for your padding it will modify all four corner all four sides, so the top the right the bottom and the Left so basically it basically goes Ping Ping Ping Ping counter clockwise clockwise through the whole thing so top right bottom left as it's going through.
Michael T Ganschow Green: So if I add a number in here like 20 pixels what that will do is that will add in 20 pixels of padding throughout the document okay I love this little tool, by the way.
Michael T Ganschow Green: If I come here and I add another number in I go space and I add another number in that, then this first number is the top and the bottom padding and then this second number is the Left and the Right padding and.
Michael T Ganschow Green: If I add a third number this third number then becomes the bottom padding so I have 20 pixels for my top padding 40 pixels for my right and left 30 pixels for my bottom padding.
Michael T Ganschow Green: And then, if I add another different number like say 10 pixels then that turns my padding left into 10 pixels so.
Michael T Ganschow Green: Each of these numbers that i'm adding with spaces is altering the way padding works, let me do this again to demonstrate this so that you guys were watching this pre recorded can can back up and soon in slow motion.
Michael T Ganschow Green: The first number I add in here okay.
Michael T Ganschow Green: If I stop at this first number right here like this, so if I stopped at this first number, it will evenly apply that padding fully across the entire Square.
Michael T Ganschow Green: If I add a second number to this thing okay just a second number, it will now add that second number to the right and the left and it will add the first number to the top and the bottom.
Michael T Ganschow Green: If I add a third number, it will continue to add this second number to the right and the left, but it will only add the first ever to the top in this new third number to the bottom.
Michael T Ganschow Green: And then, if I add a fourth number, it will add that number to the left, so I can change how am I padding works, all the way through by adding in multiple numbers came.
Michael T Ganschow Green: However, typically for padding I mostly use one number sometimes too, but occasionally, you may be called upon to use a specific edge now if you don't want to control all of the patterns from one.
Michael T Ganschow Green: property or you just need to add padding on one side or another.
Michael T Ganschow Green: If you come in here, and you type in padding and you put in a dash, then you can pick which edge you add padding to so I could go padding top come in here and put a number in and then i'm only targeting the top with this number, the rest will remain without padding.
Michael T Ganschow Green: I don't generally prefer to do it this way, if i'm going to be targeting multiple edges, I prefer to use.
Michael T Ganschow Green: This methodology if i'm going to be targeting multiple edges, the only time I will use padding dash whatever is if i'm just padding at the bottom.
Michael T Ganschow Green: Just patting at the top just padding on the sides whatever if i'm padding across multiple edges i'll just come in here and do padding colon and then type in what numbers, I would like here.
Michael T Ganschow Green: Like so i'm really handy i'm just going to do 20 pixels all the way around of padding for the demonstration, though.
Michael T Ganschow Green: But you guys can put whatever padding you would like.
Michael T Ganschow Green: So if I go file save all.
Michael T Ganschow Green: The then we're going to do.
Michael T Ganschow Green: Would screw.
Michael T Ganschow Green: ups when it went away to stop it, no, no, no, we don't need more menus I need my share Thank you full screen share.
Michael T Ganschow Green: So once I open this thing up in the browser now with 20 pixels of padding notice.
Michael T Ganschow Green: there's a nice little margin around this guy right here now so technically margin it's technically padding but it's creating from a design perspective margin it's creating a little distance between the edge of our container box and our boxes here okay.
Michael T Ganschow Green: So what pattern technically does technically, is it adds width and height, to the.
Michael T Ganschow Green: containing object, so that it pushes itself away from the content, when you have an object that is already 100% of the width like our main here it functionally.
Michael T Ganschow Green: adds an extra bit of percentage to it.
Michael T Ganschow Green: Now, when it's the browser window like this it doesn't do much of anything what that does is basically it just kind of rebounds back when it hits the edge and it pushes this guy here.
Michael T Ganschow Green: If you're adding padding to a shape within another shape that's actually going to affect the width it's going to add whatever you put in for your padding.
Michael T Ganschow Green: to your to your width and height and other dimensions that you add the padding in so as we get into layout stuff.
Michael T Ganschow Green: This week and next, you will see some of the some of the issues that can cause when we add padding in with changing widths and things like that.
Michael T Ganschow Green: will run into that throughout the Semester and i'm sure you will as well, one of the nasty things with padding is that you have to take it into account when you are.
Michael T Ganschow Green: When you are calculating sizes, simply because it will stretch boxes on you, if you add it in it'll push the box out.
Michael T Ganschow Green: By that far now that's a little flop padding has, but in my opinion, more than makes up for it by the Nice effects it has so padding is distance from the from an object to another object next to it.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's play with another one's more do that pattern questions i'm sure there's several pattern questions so padding questions, for me, I need a padded cell, yes, yes, you do.
Michael T Ganschow Green: No padding it's colored orange and nothing is happening okay So where are you adding your pattern Kathy on on which tag are you adding your padding.
Michael T Ganschow Green: Under the background color so on your MIT so oh in on your main or because there's several background colors here, because if it's in the body to not going to do anything, well, I will do something, but it'll be different if it's in the main.
Michael T Ganschow Green: that's what i'm playing with okay so you're in the main, and your main is not doing anything i'm can you share your screen Kathy and I will let me turn my screen sharing up, and let me take a look at your code real quick and we will, and I will see what you got going on here.
Michael T Ganschow Green: Oh cuz i'm going to computers okay all right, then.
Michael T Ganschow Green: Because, unfortunately without seeing your code I can't troubleshoot it.
Michael T Ganschow Green: So if it's So if you are adding the padding to the main what I would do is check your background color.
Michael T Ganschow Green: To make sure that your background color has a semi colon after it here, because if it doesn't let that happen is the pattern will not be read by the CSS it will think it's actually part of the value of background dash color.
Michael T Ganschow Green: yep cool cool cool cool cool cool, so what happened was and it happens to me all the time when i'm hand coding CSS is I get ahead of myself and I forget to close up the.
Michael T Ganschow Green: One of the one of the rules with a semi colon and.
Michael T Ganschow Green: And then, what will happen, and this is how your child, by the way, if it's happened to you, so if you don't have so if you've if you missed a semi colon the rule itself the the the property itself will will light up orange and orange in dreamweaver color coding, and in a dd and a lot of.
Michael T Ganschow Green: Of.
Michael T Ganschow Green: You know a lot of.
Michael T Ganschow Green: text programs that are built to cody and orange typically means a value, rather than a property so should you come across like you know you've got some some some.
Michael T Ganschow Green: One of your CSS rules is broken and the properties you're entering are not showing check the color on them if they come through orange that means there's a missing semi colon and trust me I can't tell you how many times that's happened to me.
Michael T Ganschow Green: It happens more on like when i'm coding in a text file or something like that, where I don't have the color coding but but it's happening here because I get cross eyed after working in the code for a while other pattern questions.
Michael T Ganschow Green: Okay, you.
Michael T Ganschow Green: know.
Michael T Ganschow Green: What you guys to notice something, though.
Michael T Ganschow Green: What i've got this thing open in the browser here notice.
Michael T Ganschow Green: That there isn't ever so slight little bit of padding so i'm not sure if it's padding or margin, we will see ever so slight distance between our container box here and the edge of the browser window okay.
Michael T Ganschow Green: Every browser does this at all of them at a different amount of edge in and around our body tag okay.
Michael T Ganschow Green: If you would like to get rid of this Okay, if this is a problem, actually we're going to see you know i've always just done.
Michael T Ganschow Green: Both padding and margin with this, but we're going to find out where Michael is going to learn today with you guys.
Michael T Ganschow Green: we're going to figure out which one it actually is whether this is padding or margin around the edge I believe it's padding but, if not.
Michael T Ganschow Green: It will be margin, and we will zero that out as well, so this little scene is little white line around the edge of my Green Box, that is the natural amount of padding the chrome puts in around the edge of the browser window, if you want to eliminate that it's really straightforward i'm.
Michael T Ganschow Green: going to come up here to my body tag we'll find out if it's padding.
Michael T Ganschow Green: come up to my body and i'm going to add a pattern of zero px.
Michael T Ganschow Green: Save maybe margin actually but we're gonna find out.
oops.
Michael T Ganschow Green: isn't fact margin okay so um one of the things that you will hear in a ton of html tutorials is to come up here into your body tag and zero out your padding and margin.
Michael T Ganschow Green: What you're doing by, that is, you are eliminating this little bit of white space or in our case eggshell white space around the edge can.
Michael T Ganschow Green: So it's not padding but they say the zero the panning out just you know, so you don't have too much this is actually margin so i'm going to do a margin.
Michael T Ganschow Green: equals zero px as well, save file save all now boom, our main goes to the edge of the browser window so like that Michael learn something to he's always.
Michael T Ganschow Green: just gone in and zeroed out the margin and the panning but i've never figured out that the which one exactly that white space was so that's margin look at michael's learning with you guys so that's margin now margin is a different deal than padding okay panning is the distance from.
Michael T Ganschow Green: The content inside an object to its edge, so these squares are inside of this object, and then we have this distance right here around them to the edge that's padding okay.
Michael T Ganschow Green: margin is distance between objects and i'm going to add some margin to my div tags here to kick him apart, a little bit okay.
Michael T Ganschow Green: So we're gonna go we're gonna come in here and we're going to.
Michael T Ganschow Green: So, again, I came up to my body i've zeroed out the padding and margin in my body, what did that do that kicked out that little edge around the edge of my browser window.
Michael T Ganschow Green: So if you have questions on that and that's what that actually you know what let's pause for station identification and see if anybody has any questions on that or anything else.
Michael T Ganschow Green: Right now, because i'm working info cramming here just info cramming into your brains and those of you who are watching this thing later on pre recorded and pause and backup the poor people here you're here live and i'm just getting a stream of consciousness so good times.
Michael T Ganschow Green: All right, I don't see any questions so i'm going to add some margin to my Dev here so we're going to go zoom.
Michael T Ganschow Green: zoom in portion of screen share all right now.
Michael T Ganschow Green: let's add some margin to our dibs so these boxes can be kicked apart, a little bit.
Michael T Ganschow Green: So when I come to here to my Dev and i'm going to modify my idea of right here.
Michael T Ganschow Green: And i'm going to put in margin margin works, the exact same as padding in terms of coding you start putting in numbers.
Michael T Ganschow Green: And in, and it does the same thing, where, as you put in a space and add a number it.
Michael T Ganschow Green: changes which edges they're applying to So if you have two numbers, the first number is going to be your top and bottom margin second number is going to be here in left and right if you have one it'll be the same margin, all the way around if you have three that will be your.
Michael T Ganschow Green: Top right and left as a second number and then your bottom is the third number, and if you have for.
Michael T Ganschow Green: That is, of course, your top you're right your bottom your left in that order okay now, I just want a regular old margin here, so I think i'm going to do to match.
Michael T Ganschow Green: Know make it a different number than my body let's redevelopment of my patent let's make it a different number than my padding how about will do a nice even number, though, to make my life easier how about 24 pixels of margin around these boxes and then I go file save all.
Michael T Ganschow Green: And then we're going to change your screen share back to the main.
Michael T Ganschow Green: desktop.
Michael T Ganschow Green: desktop and now there's distance between the squares and additional distance between the edges of the squares and the edges of my container So what is what's happening here now well.
Michael T Ganschow Green: what's happening is some box model math Okay, so the distance between the edge of my box and the edge of my main is 40 pixels okay.
Michael T Ganschow Green: So I have in invisible 20 pixels pushing out from my box here and hitting right about here and invisible 20 pixels pushing in from my main creating a nice 40 pixel buffer around everything Okay, so that is.
Michael T Ganschow Green: That is margins and patterns inter reacting okay so um.
Michael T Ganschow Green: questions on what you're seeing here or questions on dear God, what have I done.
Michael T Ganschow Green: Is we're just pulling that information it's pouring it in pouring it in like cider in your ear.
Michael T Ganschow Green: margin and adding come out here to my lovely chart which I pasted in the chat earlier there's my content there's my padding here's the edge of the box and there's my margin okay.
cool.
Michael T Ganschow Green: All right.
stun.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: we've done content, well, we did a lot of content, the last couple of weeks we've now done padding we've now done margin.
Michael T Ganschow Green: Should we add a border to them.
I think things might get scary.
Michael T Ganschow Green: orders are fun you guys are gonna like borders, this is the most complex.
Michael T Ganschow Green: Property we've played with yet will be bored so before we jump into borders we're good with margin and patent.
Michael T Ganschow Green: we're going to be using these all the time for the rest of the Semester oh one other thing on margin for leap into borders.
Michael T Ganschow Green: You can also precisely target margin like you can with padding so margin dash whatever direction left top left bottom right.
Michael T Ganschow Green: You want to choose, if you do a margin dash left it will give it only margin from that side, and it will only push the object off from that side, so you can target them the same way that you can target padding.
Michael T Ganschow Green: as well, so we're going to be using that along with padding dash whatever edges quite a bit through out semester.
Michael T Ganschow Green: All right, let's circle border on borders are fun borders are crazy Oh, what is your NUTS all right border.
Michael T Ganschow Green: Border border Colin border is one of these like margin, the padding where it's a property with several values Okay, so you can set your border to be.
Michael T Ganschow Green: Oh, a whole bunch of different things So the first thing when you when you type in a border border colon.
Michael T Ganschow Green: You get a whole bunch of things you can select you can either start off with the color and pick a good color for your border or you can pick a thickness of your border.
Michael T Ganschow Green: Or you can pick what type of your border is okay um I usually choose to start with the thickness of my border Th ICC, yes, yes thickness of my border, so what i'm going to do here is i'm going to start off with making a border for all of my div tags.
Michael T Ganschow Green: And i'm going to make that border one pixel so a decent size border enough to show you know what yeah one pixel one pixel.
Michael T Ganschow Green: Then we have a bunch of different options of what kind of border, we can have so Those are some generic sizes their medium thick thin I usually prefer to use more precise numbers typically pixels with my borders.
Michael T Ganschow Green: Then I can set what kind of border can be I can have a dashboard or.
Michael T Ganschow Green: A dotted border a double border a grooved border a hidden border an inset border no border at all and outset border a rigid border or a solid border, so you know what i'm going to do i'm going to make a nice solid border from my first border so it's just a line and.
Michael T Ganschow Green: Then I can add in whatever color, I would like to so here's my color picker notice my color pickers and option here so let's see what was the color pile.
Michael T Ganschow Green: So i've done Emerald i've done neon pink i've done lime green i've got an eggshell background all right rest rest rest color rust colored border even that rustic theme okay so let's let's do let's do a rest colored border on that guy.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: we're going to go to the color picker here let's make some rost whilst whilst.
Michael T Ganschow Green: scholars board.
Michael T Ganschow Green: rust we needed to be redder oh look at that that's thriving that's oxidation X in slow motion fire right there you guys.
Michael T Ganschow Green: oxidation look at that look at that free Radicals are slowly burning up our border there we go so once I get that done I mass return, so I get my color and then.
Michael T Ganschow Green: I put in a semi colon to put a little bow on everything she Ching.
Michael T Ganschow Green: that's a border, let me show you what it looks like in a big boy browser and kind of see it in the wizard wig was awake is trash wheezy waiter is a liar was he was a trash fire don't pay attention to it.
Michael T Ganschow Green: Fresh please there they go, you know what thicker border, so you guys can see him one this one moment hold please let's make these borders three pixels so you can actually see them.
Michael T Ganschow Green: Bam rust colored borders ahoy everybody look at the action so again how did I build my border.
Michael T Ganschow Green: zoom again on human OK, so my border.
Michael T Ganschow Green: Is I came in here and I typed in a property of border.
Michael T Ganschow Green: colon and then I have several options valid can arrange my border I can you color size type of border I can do size type color I do whatever I want i'm a size type color guy when I make my border so i'm going to go to pixels of border solid.
Michael T Ganschow Green: And then we're going to put a color picker on this thing and we're going to grab a rust oxytocin oxytocin.
Michael T Ganschow Green: There is some rust right there makes it a little more on there we go yeah look at that that's exactly the color you want to see on the bottom of your car excellent touch more red.
Michael T Ganschow Green: um there we go damn and a nice little semi colon but.
Michael T Ganschow Green: Then I go big screen.
Michael T Ganschow Green: Oh no the CSS has been changed.
Michael T Ganschow Green: Yes, it has look at that look at those borders on there just so cute.
Michael T Ganschow Green: But what about what different gives to have different borders more cool I can I, I could put the border on anything I could put I can put the second border.
Michael T Ganschow Green: i'm not to class styles that are modifying the Steve already I could put it in here on my number two style if I wanted, I could put it here in my 200.
Michael T Ganschow Green: Or, I can make a whole separate style a third class style come in here to my html and another space, right here and put in a third class style for a terrible border.
Michael T Ganschow Green: But I think i'm going to add it on to my to class style here So what are we going to do let's see what's the last remaining color the last remaining color and my to.
Michael T Ganschow Green: pass down pink let's do pastel pink so we're going to go border.
Michael T Ganschow Green: let's make it annoyingly large five pixels.
Michael T Ganschow Green: let's go dotted because dots are all is good for comedy.
Michael T Ganschow Green: Then we're going to go.
Just.
Michael T Ganschow Green: All right, here we go pastel pink it is you asked for it here we go pastel pink dots all over my border look at this majestic design, we have here ma'am pastel.
Michael T Ganschow Green: thing here, look at that ain't that beautiful questions on borders.
Michael T Ganschow Green: What if I want to specifically target an edge with a border yeah What if I want for my to do not have a border all the way around this pastel pink dots okay what am I just wanted on one edge.
Michael T Ganschow Green: Well that's no problem you just do border dash whichever and you want to add so there's border dash left so we're gonna make door dash left pastel pink on to.
Michael T Ganschow Green: Look at me and we're going to hang out there now let's go and make each of the borders on to a different border just to break skulls so i'm going to do my next slide is going to be a border.
Michael T Ganschow Green: Top.
Michael T Ganschow Green: one.
Michael T Ganschow Green: let's go, we got like five pixels maybe we'll go six pixels dashed.
Michael T Ganschow Green: let's grab a color let's grab a color let's go.
Banning nice berry.
Michael T Ganschow Green: going up here.
you're flowing.
Michael T Ganschow Green: and go Sir alright So there we go there is a Huckleberry blue dashed top bang is like that, and then we're going to do a.
Michael T Ganschow Green: board right.
Michael T Ganschow Green: Which is going to be four pixels.
Michael T Ganschow Green: let's see what we want to do with this one i'm going to do with this one how on a double border yeah let's double this thing up and then let's add some colors in here so for our next color.
Michael T Ganschow Green: i'm going to do since purple pink so kind of the theme here we'll just do a nice violet right on the edge of that thing, yes, there we go yeah I got down the line border violet all right, and then Lastly, a border bottom or your bottom.
Michael T Ganschow Green: colon ah let's go back to the five pixels.
Michael T Ganschow Green: And let's see what we want to do with this guy I think i'm going to make him what kind of watermelon ridges we could do solids will be two groups you do devils dotted stashed ah, what the hey we're going to groove it up a little bit.
Michael T Ganschow Green: Then we're going to come here we're going to pick some colors purple is the theme go back up here to purple and we'll go a nice warm Bam Bam Bam Bam.
Michael T Ganschow Green: Okay, but Michael Why would I want to only border one edge well have you ever seen on website.
Michael T Ganschow Green: Where they're doing column separator between lines of type that's this.
Michael T Ganschow Green: You ever seen where you can see where it looks like a light is being cast on the box, because to have the borders on one side or lighter colors and to have the borders or darker colors that's this you can target individual edges with your border So there we go.
Michael T Ganschow Green: Border questions yell or questions on anything i've gone over.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So.
Michael T Ganschow Green: That concludes the lecture for this class i'm going to give you the remaining half hour of class as open lab to ask me questions.
Michael T Ganschow Green: i'm going to come through and i'm going to label my CSS here and then i'm going to put it online in the class files, so you can download it and, and you can also download my lovely html page of squares.
Michael T Ganschow Green: So you can see what we got going on here so we've done margin we've done padding done borders we sized boxes, we stretched a container that has no size, I mean this is madness you guys so we've made it quite a ways.
Michael T Ganschow Green: Next class we're going to get into some really freaky layout stuff like how to stack boxes next to each other, because an html they all stack vertically right So how do I make html boxes fit horizontally, how do I do it.
Michael T Ganschow Green: cascading style sheets and some real queasy manager.
Michael T Ganschow Green: So.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: All right, then i'm going to spend the next little bit here labeling my CSS so that you when you guys download it, you can see what different things are for and then.
Michael T Ganschow Green: You guys can.
Michael T Ganschow Green: And then you can ask me questions in the meantime, while i'm doing it otherwise, that concludes class.
Michael T Ganschow Green: I am releasing you guys, if you want to go a little bit early or, if you would like to.
Michael T Ganschow Green: Or, if you want to hang out and watch me label this thing, please feel free and, if you want to ask me questions, while i'm labeling this thing again.
Michael T Ganschow Green: please feel free So do you pre recorded people I bid you adieu it's just going to be open lab from here on out for the remaining half hour class so i'm going to.
Michael T Ganschow Green: Stop the recording unless something comes up here that I think would be good for you guys to know, and one of the questions I get asked alrighty then so let's go pause.