Michael T Ganschow Green: I hope so alrighty then have low pre recorded people you in the pre recorded world who are watching this post live, welcome to another round of.
Michael T Ganschow Green: JRC 175 are we continuing on with menus and then perhaps getting into buttons and then seeing where we can take it from there we'll see.
Michael T Ganschow Green: we'll see where it can go on this, I believe, unless my brain has lied to me which you just want to do, on occasion, I believe this is the last class before spring break i'm gonna check my schedule.
Michael T Ganschow Green: Yes, it is so congratulations on the Spring break everyone, I will continue, of course, to be available throughout that to.
Michael T Ganschow Green: To be a resource and a sounding board, but there will be no classes.
Michael T Ganschow Green: On either Tuesday or Thursday of next week and in observance of spring break but.
Michael T Ganschow Green: That doesn't mean much because this is technically in a synchronous clients anyway so um if you guys have questions, or whatever you know where to find me, you can always email me, you can always you know grab me as million ways to get Ahold of me.
Michael T Ganschow Green: But there won't be any any classes next week because spring break hey I thought i'd give you guys a couple of extra evenings to exhale.
Michael T Ganschow Green: I certainly could use an evening to access so.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Before I get started.
Michael T Ganschow Green: I have something to show you so.
Michael T Ganschow Green: Gavin.
Michael T Ganschow Green: Has dug up a most interesting document truly massive it's over 50 megs it's 62 pages long.
Michael T Ganschow Green: it's apparently.
Michael T Ganschow Green: i'm.
Michael T Ganschow Green: Research it a bit more, but it appears to be a giant style guide about style guides so it's essentially this big long essay and this great kind of.
Michael T Ganschow Green: What style guides are all about what they're for what they're used for done in the style of a style guide.
Michael T Ganschow Green: Talking about every little piece of a style guide what it's good for what they're meant for what they help why we make them, etc, etc, etc, and it's a really, really interesting document, so I think i'm going to throw it up on the website and then toss a link up on the forum, probably in.
Michael T Ganschow Green: One of the research areas if anyone would like a link to this thing it's a great document hit me up and, once this thing is live on the website.
Michael T Ganschow Green: And I put a link in the forum, I will pass that link to you guys as well, then you ask the direct link, but I think i'm going to think i'm going to throw this in resources, this is a really, really cool essay on style guide so that's.
Michael T Ganschow Green: That that's really cool this this whole documents, really, really neat it's done very much in the style of that have have a corporate style guide.
Michael T Ganschow Green: And so, a couple of you have been asking me style guide questions as well, actually you've you've been asking me style guide questions, which is good you're kind of thinking of them.
Michael T Ganschow Green: So that's something you really need to worry about a ton right now that's more toward the end of project three but i'm glad that i'm getting them.
Michael T Ganschow Green: One of the neat things is, I believe you style guide you and I believe is converted their style is yes, there we go.
Michael T Ganschow Green: You and our has converted their style guide into an online document so you can kind of see a good clean example of an online document, this is their style guide relating to their block and logo, in fact, I think.
Michael T Ganschow Green: let's see vector whole this whole area up here actually is the.
Michael T Ganschow Green: This whole area up here actually is their style guide this whole.
Michael T Ganschow Green: brand voice logos and colors typography stationery that kind of thing so.
Michael T Ganschow Green: i'm going to copy this and put it in the chat here.
Michael T Ganschow Green: Because I we got sent this today, actually, we were doing something with them oh Oh, you know what nice color style I probably should share my screen.
Michael T Ganschow Green: hang on a SEC, let me show you that document, I was, I was rolling along that was screen shared and instead you guys minimized.
Michael T Ganschow Green: that's a good start to the day least i'm recording alright, so let me show you this thing, first of all I want to fire open chat and I am going to put up that you went our style guide it was talking about, so this whole.
Michael T Ganschow Green: UN our style guide and posting is basically all their colors and logo usages for their black in logo.
Michael T Ganschow Green: As well as a whole bunch of links up at the top along the along the top edge here to various other topics of interest in new nr styles very fascinating article, but this has been This is like a very nice example of a clean and simple style guide.
Michael T Ganschow Green: You know this thing could be condensed into a couple of pages like i'm asking you to do for your style guides really cool um so here's this document, I was talking about.
Michael T Ganschow Green: it's this thing right here it's this really beautiful guidebook looking thing.
Michael T Ganschow Green: That is a.
Michael T Ganschow Green: it's basically a style guide about style guides.
Michael T Ganschow Green: And it's this nice big high resolution.
Michael T Ganschow Green: series of essays really tutorial essays and.
Michael T Ganschow Green: style guides that are.
Michael T Ganschow Green: That are.
Michael T Ganschow Green: Really in depth, I mean really in depth i'm wondering things 50 megs and 62 pages i'm wondering if zoom will actually let me attach the thing let's find out, shall we, I know, yes, I know let's go to downloads and we're going to grab this thing and we'll see if it will.
Michael T Ganschow Green: that's currently uploading it right now excellent so fast Internet so i'm gonna let that run in chat for a little bit while uploads, but this is this guidebook i'm also going to throw it online i'm going to put it up.
Michael T Ganschow Green: In my class files for download and throw it up on the forum, but it is a really great look at why we make style guides why we do style guides what style guide for who they help some tips on making a style guide.
Michael T Ganschow Green: there's a really, really, really neat document Gavin in this class dug it up.
Michael T Ganschow Green: From a resources group that he found.
Michael T Ganschow Green: it's really, really good i've been i've been enjoying perusing it it's actually taught me a couple of things about style guides truth be told.
Michael T Ganschow Green: Which is, which is really cool this is this is good, this is a good resource so i'm going to throw it up the class files and make it downloadable.
Michael T Ganschow Green: On the forum probably throw it in one of the resources threads anybody wants to direct download link thread from the website once I get it up to feel free to message me or hit me up about it.
Michael T Ganschow Green: alrighty then, so this is really awesome though this is a, this is a good resource so before I get started digging in on our.
Michael T Ganschow Green: Our lovely.
Michael T Ganschow Green: lovely drop down menu.
Michael T Ganschow Green: Does anybody have any questions.
For I get rolling.
I dropped in.
Michael T Ganschow Green: Alright cool so oh hang on one moment guys, it has been one of those days, I have to go grab my notes real quick so everybody talk amongst yourselves and I will be back.
Michael T Ganschow Green: One second because I managed to leave my notes, I know i've left them on my other desk so let me go grab them and I will be right back.
Michael T Ganschow Green: Apologies for the interruption there, but I needed to go get my notes for a couple of things that we're going to be talking about here.
Michael T Ganschow Green: On menus let's see if there's been any questions asked in the chat since unless I know there are not okay cool.
Michael T Ganschow Green: Alright, so um if you have any questions of course feel free to ask or deposit them into the chat so let's see where we left off, where uh where are we in the Grand scheme of things here so.
Michael T Ganschow Green: We have us a nice little menu.
Michael T Ganschow Green: That rolls over when we roll over the top of these guys.
Michael T Ganschow Green: we've got grooves in between our buttons here we've got.
Michael T Ganschow Green: we've got a dark colored groove on the right and a light colored groove on the left to it looks like the punched in so we just have a couple more things to do, and then we are solid So here we go.
Michael T Ganschow Green: First things first I added a couple too many after looking at a few of these builds.
Michael T Ganschow Green: I added a couple of too many properties.
Michael T Ganschow Green: In my menu so i'm going to go in and we're going to do a little addition by subtraction and i'm going to talk over why i'm removing these guys right here so here is my code right here.
Michael T Ganschow Green: Its first things first is i'm going to come to my NAB ul and i'm going to take out a couple of extraneous properties and i'll tell you why they're extraneous so.
Michael T Ganschow Green: list style image actually doesn't need to be here this style image, these days, and the current CSS spec.
Michael T Ganschow Green: is actually handled by this list style type none up here, so we don't need to reinforce having no image that's an excess.
Michael T Ganschow Green: property right there and looked up a couple of these and looked at why and look at what they've done.
Michael T Ganschow Green: And then looked up why they done, and then it turned out you don't really need to do that anymore that CSS to point out thinking, this is the hazards of being taught by an old man so list list ash style dash type none.
Michael T Ganschow Green: is enough to remove the bullets handily from your.
Michael T Ganschow Green: Oh yes, i'll see but hang on a second but I remove all the bullets from your navigation file save all and.
Michael T Ganschow Green: and leave it functioning just the same and you don't have to waste a property.
Michael T Ganschow Green: Now this next one caused me problems when I was playing around with tonight's class DEMO so today, when I was practicing it, I was building drop down menus because that's going to be one of the things we go over today how to do drop down menus out of a.
Michael T Ganschow Green: Out of a menu, so you know you roll over a button another menu drops down here that might have additional pertinent information drops down right there So how do we do this well.
Michael T Ganschow Green: We have to put them in you in a menu.
Michael T Ganschow Green: I hope you like menus dog because we put a menu in a menu, so you can menu, while you menu.
Michael T Ganschow Green: And they have to style it so it goes all hidden that's why I had to grab my notes, because I got all my notes that I took today on this, so one of the things that was causing some problems Was this a line items Center was causing the.
Michael T Ganschow Green: The.
Michael T Ganschow Green: drop down menu buttons to a bit to not stretch with the content that was fitting inside them were or, rather, they were stretching but they're all stretching to different widths and it was caused by this a line items since.
Michael T Ganschow Green: Property here it's related to display FLEX So if I remove this a line items property boom our menu is not affected, at least as constructed and our drop down will work that much better yeah.
Michael T Ganschow Green: So, though, so that's a little addition by subtraction I removed the list style image property up here, out of my ul and I removed.
Michael T Ganschow Green: The.
Michael T Ganschow Green: Line items Center.
Michael T Ganschow Green: justify content as well.
Michael T Ganschow Green: So questions on either those or questions on anything else.
Michael T Ganschow Green: OK OK.
Michael T Ganschow Green: So now.
Michael T Ganschow Green: We only have just one more thing we got to do, and this menu is basically done.
Michael T Ganschow Green: So, all we got to do is, we have to complete these little grooves here okay.
Michael T Ganschow Green: And the grooves are being driven by this border right and this border left style here okay so.
Michael T Ganschow Green: You this border left, right here is a light color so that is on our menu, that is, the light shine that's running immediately inside of the dark.
Michael T Ganschow Green: And then, this border, right here, this is the dark shadow of that, so this is creating a nice little nice little group we actually made groups like this in photoshop.
Michael T Ganschow Green: Well, this is actually a nice exercise to do, putting these grooves in here because it lets us play with a few more selector types, so let me pull up my new cheers when we're in the Caribbean.
Michael T Ganschow Green: let's see here so.
Michael T Ganschow Green: Doo Doo Doo Doo Doo Doo boom alright.
Michael T Ganschow Green: So time time.
Michael T Ganschow Green: To add a little bit of extra styling Okay, so we haven't we actually have not styled our list items really in here, we have our overall an ordered list in our navigation and our buttons proper the buttons proper are these.
Michael T Ganschow Green: A tags right here in our list items we haven't styled our list items and we're really.
Michael T Ganschow Green: we're really gonna per se we're only going to style one were two of them with some pseudo class style, so you remember.
Michael T Ganschow Green: When we were playing with a roll over here or colon hover our very first pseudo class style that basically just said when a mouse hovers over this button, please change its background color to that lovely tomato color okay.
Michael T Ganschow Green: So we're going to add in another pseudo class style this time we're going to add it to our list items we're going to put a row, on the first list item and a row on the last list item okay so.
Michael T Ganschow Green: a row, do you miss and row you guys i'm just misleading you all over the place, a border we're gonna put a border on the first list item kind of border on the last one okay so here's we're going to do.
Michael T Ganschow Green: So now have ul Li this would be what we would do if we were styling the list items right the selector would look something like that NAB ul Li let's cool but we don't want to style all of the list items we just want to style, the first and last list item okay.
Michael T Ganschow Green: So.
Michael T Ganschow Green: In order to do that well there's ways to do it, I could throw classes, on the first and last list item, and I could.
Michael T Ganschow Green: If I could do class styles for each of these rows or I can do it this way, now the way i'm going to show you next is really good if you are using if you're.
Michael T Ganschow Green: styling a website where you might have access to the cascading style sheet, but you don't necessarily have access to the html yeah so.
Michael T Ganschow Green: which happens a lot in things like wordpress websites and juma websites and other kinds of websites with that are.
Michael T Ganschow Green: run by content management systems where the code, maybe in fragments all over the place and you've got this CSS that your styling it with so it's often better.
Michael T Ganschow Green: To do it using some of these targeting pseudo class styles we're going to use in just a second here so we've already done a colon hover which is on a roll over right.
Michael T Ganschow Green: Well, when you have a list of items, for example, like our.
Michael T Ganschow Green: Our another list here where we've got like a whole bunch of items in here, in this case, we got four list items.
Michael T Ganschow Green: I want to just start with just the first list item just the very first list item so.
Michael T Ganschow Green: There exists a pseudo class style to do this to target the first object in a group and then to target the last object in a group and they're called a first child and last child So if I go Nam ul Li colon notice no space first child what am I doing i'm styling my first list item okay.
Michael T Ganschow Green: here's my border right with it's nice dark edge, so what i'm gonna do is i'm going to come up here to my first child and i'm going to put this border right in i'm just copy pasting it out of that other one but i'm going to change what it's select because there is already.
Michael T Ganschow Green: there's a nice bright border left on my on the left side of my a tag that this is filling up so i'm going to convert this on my list item to a border left also so there'll be effectively two stripes next to each other and.
Michael T Ganschow Green: What does that do well, if you look at my DEMO right here, adding that one guy in right here.
Michael T Ganschow Green: That puts now, we have two of these in right here, so it looks like we have the first of our group, so, if you look right here on the Left edge of the button.
Michael T Ganschow Green: there's the dark line on the left side of the list item that is making my lovely menu right here, and then.
Michael T Ganschow Green: A light line that's on the left side of the button itself the a tag that is making the other bit of that groove there so again.
Michael T Ganschow Green: I did a nap ul Li first child and that colon first child targets, the very first of these list items, so that we can only style that one so when you've got groups of objects.
Michael T Ganschow Green: This is how you pick out one of the objects, other than by making a class style and sticking that class style on your on your particular object in this case, you can do it without having to get into class styles and without even having to modify the html so.
Michael T Ganschow Green: We got a first child right here all set and ready to go so colon first dash child boom ups, with my browser go boom there we go right there colon first dash child.
Michael T Ganschow Green: Now we need to target the very end child, so we can use this same selector now have you ul Li Colin last child.
Michael T Ganschow Green: So this is going to target the last of my.
Michael T Ganschow Green: of my list items.
Michael T Ganschow Green: Now, at the end of my thing here i've got a dark one already set up, so all I need to do is set up.
Michael T Ganschow Green: set up a.
Michael T Ganschow Green: White color border and is this one right here.
Michael T Ganschow Green: Except instead of a border left as it is on our button i'm going to turn it into a border right.
Michael T Ganschow Green: Why am I going to do that because I wanted on the right most edge of the last list item, and when I do that.
Michael T Ganschow Green: There it is right there think making a note my chatting away get out the way chat see there's my nice little light edge right there shrink making a nice little highlighted point so it looks like this thing is grooved all the way across.
Michael T Ganschow Green: Yes, I took a bit of work and we had to use a new type of.
Michael T Ganschow Green: A new type of.
Michael T Ganschow Green: pseudo class style so now done a colon hover when you roll over something with a mouse do this.
Michael T Ganschow Green: And we've now also done a first child when they have a clump of objects select the first object, and so you basically come here.
Michael T Ganschow Green: And you make a selector to select that object in this case we're selecting out of a group of list items, so I go.
Michael T Ganschow Green: Inside my nav inside my own order list find list items and then apply whatever's in here to the first of those list items that is in there okay.
Michael T Ganschow Green: Then this one says go look in your nav look in your own ordered list look for a pile of list items and apply this particular rule to that last list item.
Michael T Ganschow Green: Now I see why I wanted to save that for the start of this class rather than the end of last one, because I did not want to give you a tapioca brains.
Michael T Ganschow Green: The end of class tapioca brains that one I wanted you to when you had a few fresher neurons to get this one, so we now have a nice little for button.
Michael T Ganschow Green: Should we blow it up, I think we should.
Michael T Ganschow Green: I think it'd be fun to blow it up questions on menus.
Michael T Ganschow Green: questions on links.
Michael T Ganschow Green: questions on rollovers we will be using the rollovers all throughout the Semester.
Michael T Ganschow Green: hang on a minute, what did I do here, having a zoom malfunction one second.
Michael T Ganschow Green: Alright hope everybody can still hear me zoom was behaving a little weirdly Okay, so any questions questions questions.
Michael T Ganschow Green: Nobody in kick anybody because zoom is being really weird.
Michael T Ganschow Green: Are you doing zoom sorry about this got to do a quick bit of troubleshooting here real quick.
Michael T Ganschow Green: Alright cool there we go okay sorry about that alright so let's add a drop down menu in on our system here so drop down menus are our little weird not gonna lie are a little weird in how they're built in html okay.
Michael T Ganschow Green: So, in order to add a drop down menu to an already existing list item, and this can either be a drop down menu or fly out menu So if you built.
Michael T Ganschow Green: A vertical menu, rather than a horizontal one like i'm demoing here, you can I have these menus fly out the side as well i'm just going to DEMO one, the drop straight down, but you can move them around, and I will show you how in one moment So here we go.
Michael T Ganschow Green: let's let's go into the html and let's add in a drop down let's say we're going to put in some.
Michael T Ganschow Green: A drop down in our products here so let's say when we roll over our product button, we wanted to drop down and open up another menu so in order to do that what i'm gonna do is i'm going to put a an entire an ordered list a ul Li chain inside of this.
Michael T Ganschow Green: list item right here so i'm going to come right after the button that's containing it within a couple of return, so that I can open this thing up and then i'm going to put in a ul.
Michael T Ganschow Green: couple close that ul up.
Michael T Ganschow Green: And set of allies, we can put in as many as we like.
Michael T Ganschow Green: boom boom boom boom boom i'm gonna probably just do for you guys can do as many as you want this is your world, and you can do as many as you want.
Michael T Ganschow Green: boom boom boom boom boom now.
Michael T Ganschow Green: I got a few I got at least one email asking about formatting of these buttons one of you said hey um, why do you open them up so broadly I saw a tutorial where they looked like this.
Michael T Ganschow Green: Where the list item and the a we're all wrapped together in one line that is actually a perfectly valid way to build that.
Michael T Ganschow Green: As I open this up you'll see there's a button right there.
Michael T Ganschow Green: A little drop down right there, everything is exploding, everything is exploding don't worry don't worry don't worry it'll get better get better I must I must be good we're gonna be good, this is going to be just fine just fine just fine okay so.
Michael T Ganschow Green: Let me add a few more in but it's perfectly valid button, as you can see.
Michael T Ganschow Green: So.
Michael T Ganschow Green: master CSS there we go let's go, oh no whoops no need to style it just yet let's add a few more of these in, and I will add them in in the one line way, so you guys can see that these are perfectly viable as well, so we're gonna go a traffic.
Michael T Ganschow Green: equals quotation mark pound sign oops I need of what now you like, I said, Miss collect as you belong inside my a tag Thank you.
Michael T Ganschow Green: put some products here.
Michael T Ganschow Green: let's do a little more.
equals quotation.
And then we're gonna go.
Michael T Ganschow Green: we're going to do.
Michael T Ganschow Green: Here we go a stretch Armstrong, why not, and lastly.
Michael T Ganschow Green: A dodge coin.
Michael T Ganschow Green: Why not.
Michael T Ganschow Green: Okay, so if I hit save on this, you will notice.
Michael T Ganschow Green: that everything is gone a little wild my button has been stretched.
Michael T Ganschow Green: To to unrecognized ability i've got another i've got things inside of things they're going all over the place, things again we have man man man what am I done what am I done well, this is what an untitled drop down menu looks like so let's do a little a little.
Michael T Ganschow Green: bit of styling on him jelly.
Michael T Ganschow Green: So first things first.
Michael T Ganschow Green: We got to make one mother of a selector to select this thing okay so prepare your brains for some stretching because we're going to need to like.
Michael T Ganschow Green: stretch them out Okay, because here comes this selector and this selector is in saying you guys a Nam ul Li ul okay So what is this styling Okay, so this is styling emory and ordered list.
Michael T Ganschow Green: That is inside of a list item that is inside of another an ordered list that is inside of a nap tag.
Michael T Ganschow Green: madness madness Dudes and do that madness so we're now styling kind of the overall menu so was doing a version of what we did up here.
Michael T Ganschow Green: down here in our opening closer button so here is what that means or here's what we can do with that guy okay so First things first we have to give this this thing a position of absolute.
Michael T Ganschow Green: Why do we have to give this a position of absolute.
Michael T Ganschow Green: Well, because when we do that this prevents our button from getting stretched all crazy like now, we just have this menu hanging out underneath the button awesome all right.
Michael T Ganschow Green: Now, also instead of our buttons kind of cramming around to fill space we're going to change the direction in which they are stacked effectively okay so we've got our.
Michael T Ganschow Green: we've got a default display FLEX on what a default display FLEX does it puts a FLEX direction of horizontal on anything so if we want this to stack vertically again in the html way we actually have to change its FLEX direction, so we have to go FLEX direction.
Michael T Ganschow Green: Horizontal axis not horizontal it's FLEX direction column.
Michael T Ganschow Green: You n n FLEX direction columns and now we're going to save this and look at that now oh em gee it's almost it's almost it's all most a proper drop down menu.
Michael T Ganschow Green: We just need to do just a little more styling and we will be there, can you say see how relatively limited the styling really needs to be to do this.
Michael T Ganschow Green: functionally if we didn't have we would be done actually if we didn't have these.
Michael T Ganschow Green: These folders that I need to take off up all of my drop down buttons would basically be done, but since we do i'm going to take those borders out and i'm going to add some borders to the top and bottom of my buttons So here we go.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So, in order to style my buttons here.
Michael T Ganschow Green: here's the style that I got to do.
Michael T Ganschow Green: All right, everybody hold on to your butts because this is going to be NUTS NAB ul Li ul Li a what is that mess well what that says yes style.
Michael T Ganschow Green: anchor links within list items that are within our lists that are themselves within list items that are themselves within an ordered list that's all in a nav.
Michael T Ganschow Green: loose baby oof that is a compound selector I told you, we were getting buck wild with compound selectors when I first mentioned these like a month ago.
Michael T Ganschow Green: Well, here we go it's time I hope you guys liked this or not I.
Michael T Ganschow Green: don't really care, this is what you gotta do to make a drop down menu, whether you like it or not here you go congratulations yet is a drop down menu so First things first is i'm going to clear off my borders okay so to do that i'm going to go border right.
Michael T Ganschow Green: yeah when you buy one and he border right border left.
Michael T Ganschow Green: Know you're gone to.
Michael T Ganschow Green: None by Okay, and because these tags are inside of the other tags suddenly poof oh don't you give me that faith Thank you suddenly poof they're gone.
Michael T Ganschow Green: they're gone, in fact, the only borders, we have in place are the ones that are appearing on our list items which we're going to deal with in one second okay.
Michael T Ganschow Green: fact you know what what i'm going to deal with as list items right now also so again, this is all this is all just for cosmetics functionally it's pretty much all ready to go, except for the actual.
Michael T Ganschow Green: drop down menu function, but I want to get rid of this one dark border right here, and this one light border right here so that's going to require just a little bit of styling but don't worry it's it's it's going to be insane it's all right so right.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: ul Li ul Li.
First, child.
Michael T Ganschow Green: don't worry i'm gonna be annotating all of this crap so that you know what it means.
Michael T Ganschow Green: So the first child has a border left not anymore it doesn't first child border left no.
Michael T Ganschow Green: With none for that border, and then you know what i'm a lazy man i'm a lazy man so i'm going to copy this.
Michael T Ganschow Green: i'm going to paste this here i'm going to turn this into a last child and i'm going to say border right none So what do we do well, we cancelled out the borders we just put on our list items up here.
Michael T Ganschow Green: We can send them out when they appeared on our list items in the drop down menu lot of cosmetic bouncing back and forth here.
Michael T Ganschow Green: On the left, the upshot of it all is that now hey hey don't just show this Thank you now, we have a nice clean drop down right here that I can add whatever I want to.
Michael T Ganschow Green: So, for example, if I wanted my drop down a is to have a slightly different color okay so maybe maybe maybe the a has a desert color a color that says background color.
Michael T Ganschow Green: Oh.
Michael T Ganschow Green: Sure forest green there is to make the background color forest green on our drop down.
Michael T Ganschow Green: Oh that's zoom.
Michael T Ganschow Green: This is.
Fresh.
Michael T Ganschow Green: There we go maybe it also needs, I think it could use.
Michael T Ganschow Green: Just possibly.
Michael T Ganschow Green: A different role.
Michael T Ganschow Green: So to do that.
Michael T Ganschow Green: Here we go Nam ul Li ul Li a colon hover your God, what have you done what have we done background color.
Michael T Ganschow Green: let's go.
Michael T Ganschow Green: Violent now let's go.
Michael T Ganschow Green: we'll go see green make it a gentle over you guys a gentle over.
Michael T Ganschow Green: Oh, look at that Nice gentle rollover.
Michael T Ganschow Green: So now it's time to add some borders on these guys.
Michael T Ganschow Green: And we can either do notch borders, like we did before, or we can just do.
Michael T Ganschow Green: You know what I think i'm just going to do.
Michael T Ganschow Green: A border.
Michael T Ganschow Green: Just a regular white line border in between them, I think i'm going to put that white line border around the edges too so we're going to undo our border nuns.
Michael T Ganschow Green: That we did here on the Li ne I think i'm going to change this instead of to a nun to a one pixel Michael no spacing there one pixel solid white border.
Michael T Ganschow Green: And a one pixel solid white border on the left.
Michael T Ganschow Green: And a one pixel solid white border on the top.
Okay.
Michael T Ganschow Green: Yes.
Michael T Ganschow Green: Should wrap our drop down menu there it is and a nice set of little white edges that you may notice, I did not do a border bottom that's fine we're going to do it on this last child list item so shrink we get a border right along the bottom here so let's see here let's go.
Michael T Ganschow Green: Last child border.
Michael T Ganschow Green: Bottom one pixel solid white.
Michael T Ganschow Green: fresh air, it is look at that it's now a complete drop down menu kind of idea I got an idea ooh ooh ooh hang on a SEC hang on I just had this idea I just had this idea on our colon hover maybe instead of see green.
Michael T Ganschow Green: Maybe we go color picker.
Michael T Ganschow Green: grab a nice green like so.
Michael T Ganschow Green: Make it like a little transparent.
Michael T Ganschow Green: Look at that, yes, let's do that so let's do a transparent rollover why, because I can.
Michael T Ganschow Green: What does that look like let's find out.
Michael T Ganschow Green: Oh yeah look at that they're gonna make a little less transparent, though.
Michael T Ganschow Green: let's go Point seven.
Michael T Ganschow Green: it's a little less transparent and that's that looks freaky freaky like shower last all right let's go 85 there we go.
yeah look at that.
Michael T Ganschow Green: It just slightly transparent when you go over the top of it, oh pistachios or or.
Michael T Ganschow Green: or.
Michael T Ganschow Green: We have it be a solid version of this color.
Michael T Ganschow Green: right here.
Michael T Ganschow Green: what's kind of Nice dark green I like that, and then we have this color.
Michael T Ganschow Green: But transparent.
Michael T Ganschow Green: drop down menu so it's like glass.
Michael T Ganschow Green: I think that would look cool save there is our ever so slightly transparent drop down menu that when you roll over it, it glasses in yeah that's cool absolutely want to do.
Michael T Ganschow Green: So we've done a drop down menu with tremendously complex selectors okay we've done a ul Li we've done a nav ul Li ul what that's done is that lets us.
Michael T Ganschow Green: At a position of absolute to our overall drop down menu so that does not stretch our button hideously and then it lets us add a FLEX direction column to took the FLEX direction row that FLEX or nearly puts in and turn it back vertical again then.
Michael T Ganschow Green: I went over here and I made a Nam ul Li ul Li first child and then a border left none to remove the colored border left on that first child.
Michael T Ganschow Green: I then did a nav ul Li ul Li last child to remove the border right there and to add a white border bottom to it, so the very bottom of our menu whatever white border on it, then I did Nam ul Li ul Li a.
Michael T Ganschow Green: That has a background color on it, that is ever so slightly transparent kind of Emerald green look at that action.
Michael T Ganschow Green: With a border right one pixel solid right a border left one pixel solid white and a border top one pixel solid white to complete the border boxing on each button.
Michael T Ganschow Green: Then, lastly, I took that same semi transparent green color and for my nav ul Li ul Li a colon hover which is my rollover state of my buttons I took that same color and it just made it fully opaque.
Michael T Ganschow Green: So we're after all that do we have any questions.
Heather Amistani: Okay, so I don't know what I did wrong.
Michael T Ganschow Green: But I took a.
Heather Amistani: drop down menu.
Michael T Ganschow Green: Oh let's see here um share your let me stop sharing real quick and you can share your screen and let us see what's happened here.
Michael T Ganschow Green: Okay, so there is let's see ul Li you a nav ul Li ul nav ul Li ul first child NAB you lie a forest green Okay, so that looks good i'm save that before you do anything else.
Michael T Ganschow Green: Okay, then go to your so then go into your source code let's see what your source code menu looks like here.
Michael T Ganschow Green: You know, a like a like a yep that looks good okay now let's see it in a browser window.
Michael T Ganschow Green: Okay interest oh interesting okay um let's go back to your your refresh real quick just to see if it's done anything but then look okay.
Michael T Ganschow Green: So let's go back to you because it looks like they're actually sitting separate hang on a SEC let's go back to your access, I think I know what might be wrong, I think I might have missed it.
Michael T Ganschow Green: yeah let's pop this open yes okay here's what's happening here's what what what you're missing and your drop down right there so notice that you got your Li a link buttons right there right.
Michael T Ganschow Green: yeah what's the what the reason why they're just slotting into the main menu like you're seeing there.
Michael T Ganschow Green: Is because they're not wrapped in a ul so right after the end of your product anchor tag there up top to see where he left yeah no No, sorry at the top of your drop down menu, so you got your regular menu here so go down to product.
Michael T Ganschow Green: The word product.
Michael T Ganschow Green: And now click right after product i'm sorry, right after the closing a on product okay.
Michael T Ganschow Green: Give me a return.
Michael T Ganschow Green: Now, give now put in a bracket ul bracket.
Michael T Ganschow Green: Oh sorry i'm sorry a carrot the html brackets sorry that CSS.
Michael T Ganschow Green: And then see that all see how it automated close 11 to dream Weaver does that i'm copy that close gotta cut that close guy when cut him and then go to the end of your dodge coin button there yep and do a return and paste that close okay now.
Michael T Ganschow Green: yep there you go kick that back yep there you go there you go all right now, save that.
Michael T Ganschow Green: Now let's see it in a browser.
Michael T Ganschow Green: There it is OK.
So now.
Michael T Ganschow Green: There is one other thing because you're straight it's still stretching it's been so let's go into your CSS real quick.
Michael T Ganschow Green: Okay univ you ll.
Michael T Ganschow Green: O m underneath ul Li ul position is POs I T io n that's why it's not applying.
Michael T Ganschow Green: don't you love it when it does that yeah alright save and let's double checking in your browser.
Michael T Ganschow Green: To the Bu that looks like a drop down menu to me.
Michael T Ganschow Green: Look at it.
Michael T Ganschow Green: yeah not a problem not ever don't you love how the devil is just in the details, and all this crap.
Michael T Ganschow Green: This is people like Michael why you so weird and then and then people take my web design class and they don't ask me that question again.
Michael T Ganschow Green: Because this will drive you to madness because it's all this little crap.
Michael T Ganschow Green: In in and sometimes you have thousands and thousands of lines of code to go through to figure out what's broken now one of the nice thing is is if the code is legit broken.
Michael T Ganschow Green: dream Weaver will flag it for you puts a little red number on the side which is super handy didn't used to, but when it's stuff like that, where it's just like.
Michael T Ganschow Green: A tag is missing, but it's not necessarily expected to be there, like, for example, and a on a drop down menu that's inside.
Michael T Ganschow Green: You know the html stack of just be like oh it's more buttons on the bottom left and stretch it through and dreamweaver won't flag that and you gotta go hunting that's always fun so good times good times.
Michael T Ganschow Green: Well, glad we were able to help.
Michael T Ganschow Green: Oh, not a problem, not a problem at all.
Michael T Ganschow Green: So I got one other thing I got to do on my drop down, though.
Michael T Ganschow Green: Which is just kind of hanging out here, and all of its semi transparent glory and that's I gotta turn it into a drop down.
Michael T Ganschow Green: Where it actually vanishes you know and stuff and junk when you.
Michael T Ganschow Green: When you click on it, and then it actually POPs itself back open, you know kind of sorta ish maybe when you're when you're roll off of it so.
Michael T Ganschow Green: This is going to require this this is going to require a little bravery here you guys okay alright so so be brave, for me, all of you, because it's it's.
Michael T Ganschow Green: still stuck to be brave, here we go alright, so we got a Hydra menu goodbye menu, so we have to come up here to a Nam ul Li ul selector right here.
Michael T Ganschow Green: And then we gotta go return, and we have to hide it, we have to hide it if the hobbit you guys using our magical display property, we got to make this go away.
Michael T Ganschow Green: display colon none.
Michael T Ganschow Green: And now menu.
Michael T Ganschow Green: it's gone.
Michael T Ganschow Green: Oh snap it's gone its way we deleted it we only did it it's gone menus never coming back you guys it's it's it's poor 40 on the curb for it.
Michael T Ganschow Green: Oh, but wait, yes, well, we just need the mother of all selectors to make it happen Okay, the the.
Michael T Ganschow Green: selector that will that's going to start it's going to put micro fractures in your brain i'm sorry but it just is this is one of these things it's just going to happen.
Michael T Ganschow Green: This selector is a little wild.
Michael T Ganschow Green: Follow along now.
Michael T Ganschow Green: ul.
Michael T Ganschow Green: l I know space colon hover space ul.
Michael T Ganschow Green: brackets.
Michael T Ganschow Green: What is this what have we done what kind of a selector is this madness Okay, so let me explain to you what selector i've just written here NAB ul Li colon hover ul what am I done well.
Michael T Ganschow Green: What i'm doing is i'm writing a style that will be applied to an ordered list inside of list items inside of an ordered list inside of nametags but.
Michael T Ganschow Green: But it will only be applied when the list item that is containing the ul is hovered over okay NAB ul Li hover ul and here's what we're going to put in there here's a magic we're going to put in their display.
Michael T Ganschow Green: colon block okay.
Michael T Ganschow Green: So what does this mean what have I done what this means is that, when I hover over product suddenly a menu appears a drop down menu even.
Michael T Ganschow Green: Oh snap you guys oh my What have we done, oh no look at that it's a drop down menu using the craziest selector in the history mankind Nam ul Li colon hover ul so.
Michael T Ganschow Green: What this means is that by this style right here our drop down menu is hidden okay until until by this style here we roll over.
Michael T Ganschow Green: One of our buttons like so and there it is, and it POPs right in okay this used to take lines and lines and lines and lines and lines and lines and lines of javascript to do back in the day.
Michael T Ganschow Green: But now, with the power of compound selectors and pseudo class styles Thank you CSS three, with the power of those we can now build what would amount to be javascript in our C S, yes, look at that boom self i'm going to ask, because I know you're going to have them any questions on that.
Michael T Ganschow Green: that's madness.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: I have a question for Michael but Michael Why would you do it that way, why would you use such a complex series of selectors in such a complex way.
Michael T Ganschow Green: Years why.
Michael T Ganschow Green: Because this set of selectors.
Michael T Ganschow Green: Is generic they're all tagged selectors So if I should come in here and I want to add in another menus on another one of my buttons like say under my about here, if I want to throw in a whoops.
Michael T Ganschow Green: An ordered list.
Michael T Ganschow Green: weapon a set of list items.
Michael T Ganschow Green: Put in here just a couple of testers i'm going to put about.
Michael T Ganschow Green: Why.
Michael T Ganschow Green: Do you do this.
Michael T Ganschow Green: Who do you think you are.
Michael T Ganschow Green: Save now.
Michael T Ganschow Green: For.
Michael T Ganschow Green: These work just the same as these their value neutral value neutral.
Michael T Ganschow Green: Okay.
cool.
Michael T Ganschow Green: Value neutral.
Michael T Ganschow Green: Alright, so value neutral any other questions on drop down menus.
Michael T Ganschow Green: madness you guys know.
Michael T Ganschow Green: You can.
Michael T Ganschow Green: keep going on these if you if you want, you can make these drop down menus run as deep as you like, so you can put inside of one of these airlines another set of URLs.
Michael T Ganschow Green: And you can manipulate those as well now to style them requires an even crazier series of selectors a nav ul Li ul Li ul.
Michael T Ganschow Green: So Nam ul Li ul Li ul and then a Nam ul Li ul Li ul Li and then a Nam ul Li ul Li ul Li a get the button.
Michael T Ganschow Green: yeah no, you can you can run these you can string together Nam ul Li ul well.
Michael T Ganschow Green: To the cows come home getting these menus and you can run these as deep as you want or as your design specifies.
Michael T Ganschow Green: questions on any of this madness.
Michael T Ganschow Green: Alright, that.
Michael T Ganschow Green: should make a button, or just a just a regular old single button like a big shiny click here Call to Action button, I think we should we can play around with some of the other features on here too, so nice big shiny button let's do that.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So imma put a big shiny button in here.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So.
Michael T Ganschow Green: i'm gonna go into my html.
Michael T Ganschow Green: And i'm gonna come here underneath my H1 and i'm going to insert a button now html.
Michael T Ganschow Green: Three five excuse me see this three html5 has a tag for this.
Michael T Ganschow Green: it's called button bracket button bracket and then rank and closing slash button bracket and.
Michael T Ganschow Green: i'm going to put in click here exclamation point.
Michael T Ganschow Green: What does that to that makes a big shiny button that could use some styling though and could use some functionality notice it's not going anywhere.
Michael T Ganschow Green: So why isn't it going anywhere why don't I have the little hand over it like I do here, why doesn't this work well.
Michael T Ganschow Green: html.
Michael T Ganschow Green: button tags are built as a software triggers typically for some form of script if we just want to build a leaky link button out of this we got to wrap this thing in a tags and so i'm going to wrap it in a tags a a we're gonna wrap it in a tags.
Michael T Ganschow Green: A and.
Michael T Ganschow Green: Space H RAF equals quotation marks bracket there we go.
Michael T Ganschow Green: Alright, so or no, no, no, no, what did I do I wrapped my each one one moment I was looking at the wall.
Michael T Ganschow Green: We just want the button, to be a link not our H1 tag don't wrap your H1 last the button tag there it is safe.
Michael T Ganschow Green: Right now we're ready to go places it's technically a link in fact I could put a link to oh let's see here.
Michael T Ganschow Green: http colon slash slash www.ge see 175 dot com and then we're going to go save moon we're going to go fresh and then i'm going to go cliquey and away it goes to my website, in fact.
Michael T Ganschow Green: i'm going to make it go into another another tab target you remember, do you remember our targeting from like all those months ago now, almost two months ago blank.
Michael T Ganschow Green: Blank blank.
Michael T Ganschow Green: So now, when I hit save come back to my browser fresh Bam so opening up in another tab look at that madness.
Michael T Ganschow Green: it's a button, but but Michael how do I make it look pretty well, we got to use the magic of style sheets here now, in the case of a button these, this is actually a good spot for a class style so i'm going to do that because I can.
Michael T Ganschow Green: I try i'm not going to do that, I mean he was this button tag right here button because i'm a lazy while loon so i'm going to use this button tag.
Michael T Ganschow Green: button.
Michael T Ganschow Green: To make my buttons.
Michael T Ganschow Green: All right, just make my button let's make my button.
Michael T Ganschow Green: will make my button, Nice and fat so i'm going to give it a Min width.
Michael T Ganschow Green: Of 300 pixels.
Michael T Ganschow Green: And me and height.
Michael T Ganschow Green: 100 pixels no no 100 pixels to tie 75 pixels.
Michael T Ganschow Green: So, to make it Nice and big fresh air, it is starting to get a little bigger and we go yeah big button big big button let's see here now we're going to go boop and we're going to go so we're gonna put them in with donor button to me in height let's do.
Michael T Ganschow Green: Tomorrow, large the.
Michael T Ganschow Green: type.
let's go.
Michael T Ganschow Green: let's go do I want to make this.
Michael T Ganschow Green: How big.
Michael T Ganschow Green: This guy let's go.
Michael T Ganschow Green: To em nice big.
Michael T Ganschow Green: yeah click here yeah alright cool so.
Michael T Ganschow Green: Then we're going to add a bit of styling to add a bit of styling to it yeah.
Michael T Ganschow Green: Because I think it needs some now we have not actually gone into the CSS designer too much over here but i'm going to go in there to put a gradient on this thing, because I think it needs a gradient I really do I really do.
Michael T Ganschow Green: So we're going into my nav master i'm gonna go down here to my button just put a gradient in the background of this thing i'm thinking i'm thinking for my background gradient.
Michael T Ganschow Green: i'm thinking about going.
Michael T Ganschow Green: Right flaming red.
Michael T Ganschow Green: To a nice deep like candy apple red like that.
Michael T Ganschow Green: i'm thinking like that.
Michael T Ganschow Green: See how that looks oh yeah now we're getting there now we're getting somewhere now we're cooking with gas alright, so we got a nice background we're gonna nice thing going here and let's mess around with a little more let's go.
Michael T Ganschow Green: let's go font weight bold because that font is too light for me bold font weight bold it's nice thick and we're going to get the font color.
Michael T Ganschow Green: white.
Michael T Ganschow Green: stands out against that candy apple safe.
Michael T Ganschow Green: And it makes us a.
Michael T Ganschow Green: Big bright fonts and now.
Michael T Ganschow Green: Now we just got to do a couple of more things.
Michael T Ganschow Green: Like put a border around the whole thing.
Michael T Ganschow Green: going to go border.
Michael T Ganschow Green: Border two pixels no one pixel.
Michael T Ganschow Green: White one pixel solid white.
Michael T Ganschow Green: Oh semicolon.
Michael T Ganschow Green: Has that.
Michael T Ganschow Green: needs to be to pixel solid white.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: We haven't really played around in here with the other function that border does okay so we've talked about border drawing lines on the edge of making a standard like design style stroke like we've done here Okay, where you basically have a.
Michael T Ganschow Green: lying around your shape yeah.
Michael T Ganschow Green: Border else's got another trick up at sleep it's got a.
Michael T Ganschow Green: A nice little property called here coming back into the html is a little property called border radius.
Michael T Ganschow Green: Border radius rounds corners, so you can pick how far you want your corner, to be rounded like let's say we want a a border radius of 25 pixels on this guy.
Michael T Ganschow Green: Well, when I pop this guy open or it's a little too pill like i'm going to dial that back a little bit, but notice it's rounded the corners.
Michael T Ganschow Green: But I think I think I think 15 pixels will probably do us just fine there we go look at that it's a button it goes places but it's not quite fully functional okay not quite fully functional.
Michael T Ganschow Green: it's missing a couple of things.
Michael T Ganschow Green: Well, first of all.
Michael T Ganschow Green: I think it's missing a drop shadow.
Michael T Ganschow Green: So i'm going to add that in.
Michael T Ganschow Green: misspelled drop shadow, oh no excuse me, not a drop shadow Michael not a drop shadow Michael box shadow.
Michael T Ganschow Green: Then is then going to be five pixels.
Michael T Ganschow Green: Of offset by let's go five pixels of horizontal by five pixels of vertical.
Michael T Ganschow Green: With a blur of eight pixels.
Michael T Ganschow Green: A spread of two pixels and we're going to make the color black.
Michael T Ganschow Green: i'm going to lighten up on that black color I would imagine but.
Michael T Ganschow Green: we're gonna tighten this whole thing up just a little bit so we're going to get rid of, let me get rid of that we're going to make these guys three pixels.
Michael T Ganschow Green: And for our color we're going to go.
Michael T Ganschow Green: we're gonna go dark.
Michael T Ganschow Green: Gray believe that would go save.
Michael T Ganschow Green: it's not dark enough dark blue.
Michael T Ganschow Green: was probably better as black.
Michael T Ganschow Green: Except we're going to dial out the diffusion there we go.
Michael T Ganschow Green: yeah looks good there we go and a text shadow, why not.
Michael T Ganschow Green: Why not.
Michael T Ganschow Green: let's go to pixels.
Michael T Ganschow Green: To pixels.
Michael T Ganschow Green: Five pixels black.
Michael T Ganschow Green: yeah we go tech shadows drop shadows it's the button it goes places for we're missing one piece of functionality, which i'm sure everyone has noticed by now.
Michael T Ganschow Green: How do you know what to link it's big and shiny right, but if I come over the top it's not making the little hand there's no little I see the hand see the hand there's no little hand where's my hand.
Michael T Ganschow Green: I don't see a hand.
Michael T Ganschow Green: Why is there no hand.
Michael T Ganschow Green: I want to hand.
Michael T Ganschow Green: Well then, let's give it a hand.
Michael T Ganschow Green: let's give it a hand.
Michael T Ganschow Green: How do I do that well.
Michael T Ganschow Green: CSS gives you the power to property called cursor.
Michael T Ganschow Green: And yes, you can make your cursor all sorts of things all sorts of things up to and including your own custom image then URL right there you load your own.
Michael T Ganschow Green: custom cursor image God help us all that i've shown you this, yes, you can make the cursor over your links some little.
Michael T Ganschow Green: screaming monkey face I don't know you can make it where it looks like a link pointer but it's pointing with the middle finger i've seen that too i'm just going to use a stock pointer right here, right now, so now, when I go over the top, it points like a good link.
Michael T Ganschow Green: God good link.
Michael T Ganschow Green: Okay point.
Michael T Ganschow Green: point.
Michael T Ganschow Green: Like a good link look at that work.
Michael T Ganschow Green: All right, questions on how to do a button there's a button you guys, I think this one might need a rollover to I think I think I think I think we got to put a rollover on it, you guys.
Michael T Ganschow Green: yeah he needs a rollover for for for great justice here let's put a roll over on it.
Michael T Ganschow Green: roll over time.
Michael T Ganschow Green: But.
Michael T Ganschow Green: colon hover.
Michael T Ganschow Green: cryptology.
Michael T Ganschow Green: let's put a rollover on it, that is we'll just have its background shadow get changed law background.
Michael T Ganschow Green: gradient get changed we go from red the red to.
Michael T Ganschow Green: I don't know, maybe a blue.
Michael T Ganschow Green: There we go go to that blue, and you are going to be this blue.
Michael T Ganschow Green: ever go.
Michael T Ganschow Green: Solid save.
Michael T Ganschow Green: button.
Michael T Ganschow Green: Just made big shiny freestanding button yay.
Michael T Ganschow Green: That.
Michael T Ganschow Green: goes places does things you guys like things to do things there you go we're we're we're doing things like that.
Michael T Ganschow Green: questions on button building so button building starts off using this.
Michael T Ganschow Green: This.
Michael T Ganschow Green: X html button X html it's actually an html5 button tag time, which is intended as a.
Michael T Ganschow Green: firmware trigger its intended basically so not a firmware trigger is a software trigger so that when you program up an application.
Michael T Ganschow Green: or your program up like some little script to do something boom, you can trigger of one of these buttons the reason why we do it with the button tag rather than just doing it with a particularly style a tag.
Michael T Ganschow Green: Is because if you have a CSS failure, the button will still be obvious in your document so, for example, should my CSS somehow some way magically the power of comment tags, for example, become unlinked.
Michael T Ganschow Green: From here it'll still be a button and it'll still go places okay it'll still be obviously a button okay oh.
Michael T Ganschow Green: Those improperly built like oh look they're not links I just discovered html html error, what did I do Oh, but a hearse.
Michael T Ganschow Green: No one knows aren't doing anything ah ref a age ref at her Michael at her.
Michael T Ganschow Green: Age RAF ago now, their links somebody if the CSS becomes disconnected you still have a button that's doing things here.
Michael T Ganschow Green: And also get to me get you some experience with buttons because we're gonna be playing with them in another month or so when we get into forums, which will be really fun let's put the CSS back on here, though the single weird naked.
say.
Michael T Ganschow Green: Alright, so questions on buttons.
Michael T Ganschow Green: drop down.
menu.
Michael T Ganschow Green: and
Michael T Ganschow Green: One moment you guys, I will be back in one second go attend to something really quick and then I will be.
Michael T Ganschow Green: Back to go over some ideas some just additional final things and then I want to give you some time at the end of class here in order to ask me questions about your projects or about anything as we head into spring break here so.
Michael T Ganschow Green: Come back and i'll wrap some things up, and then we will roll so i'll be back in one minute to show you guys how to keep your email links from getting harvest by spammers and.
Michael T Ganschow Green: In a couple of other links setup things in we using CSS and then we will will bounce we got basically another half hour class give or take and then right here alright cool i'll be back in one moment.
Michael T Ganschow Green: Alright cool so take care of that so now we're just going to do a little bit on links and then we will be good to go.
Michael T Ganschow Green: So you can use CSS you can use these techniques you've used on our buttons throughout the document here, both in our menu here and.
Michael T Ganschow Green: In our button proper to style links in your document okay so i'm going to add a couple of links in my body copy here and i'm going to show you guys how to style them come so we're going to do here, open up my notes there we go so.
Michael T Ganschow Green: i'm going to add in a couple of links into my body copy and then we're going to mess around with them.
Michael T Ganschow Green: So i'll just grab a couple of random words and throw.
Michael T Ganschow Green: Each ref not her.
Michael T Ganschow Green: H ref test links around them here real quick So there we go boop there's one.
Michael T Ganschow Green: And then here's another.
Michael T Ganschow Green: Alright cool some grab my notes real quick.
Michael T Ganschow Green: My notes real quick.
notes real quick.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: So let me show you a few more pseudo classes and use them on how we.
Michael T Ganschow Green: How we style.
Michael T Ganschow Green: Our mix.
Michael T Ganschow Green: So we've got kind of some links which should show up as a couple of pieces of blue text in our text there's one and there's another time, we are all set and ready to go alright so.
Michael T Ganschow Green: yeah I was just thinking in my CSS here, instead of having this just be a button.
Michael T Ganschow Green: i'm going to make this a compound selector.
Michael T Ganschow Green: A button, so that way, this only apply to buttons that are inside of a tags just a thought and some good compound selector practice and notice it doesn't affect anything here.
Michael T Ganschow Green: The reason why I was thinking of, it is because we're going to style the general a tags that we have coming up here so.
Michael T Ganschow Green: we're going to mess around with four different class styles here.
Michael T Ganschow Green: So first things first is what we're going to do is we're going to style our link anchors are little guys in the text, a couple of these these Dudes here, these couple of generic link anchors that I threw in the text here.
Michael T Ganschow Green: And to do that will need a pseudo class to do it, we could in theory do it with just an a style but um, but there are so many different anchor tags here I mostly just want to use anchor tags that are links and i'm going to use a.
Michael T Ganschow Green: pseudo class style to cover it, which is a colon.
Michael T Ganschow Green: A colon link this will only style anchor tags that are used as links and notice that it will interfere with these guys here with our buttons here because we've got these guys specifically called out with these.
Michael T Ganschow Green: lovely lovely compound selectors here and also they're they're a little further down the chain that our main a's here so we've got an a link.
Michael T Ganschow Green: i'm not going to change the size of the type of no change its color though so we're going to go color.
Michael T Ganschow Green: we're going to make our link, something that stands out, but maybe fits a little better with our blue so maybe.
Michael T Ganschow Green: Maybe a nice like some kind of Orange maybe yeah let's go orange don and now we're going to go orange red so it's all brighter orange red on our links.
Michael T Ganschow Green: Fresh what happens by saved and.
Michael T Ganschow Green: Why are you playing my my a.
Michael T Ganschow Green: Why are you playing you my link.
You shouldn't be changing color on a Caesar already clicked on.
Michael T Ganschow Green: Maybe you're being funny.
Michael T Ganschow Green: Not a minute.
If I do this.
Michael T Ganschow Green: Fresh, why are you not applying.
Michael T Ganschow Green: that's interesting.
Michael T Ganschow Green: It does not seem to be applying color well that's it, let me see if I can troubleshoot this real quick so.
Michael T Ganschow Green: You don't like that color do you.
Colin.
Michael T Ganschow Green: No clue.
Why you're not applying.
Michael T Ganschow Green: hang on Is it because you're in a paragraph tag not just gonna apply generically well hang on a minute.
Michael T Ganschow Green: Find out.
Michael T Ganschow Green: nope that is a that should be overriding that color that is weird, why are you not overriding your browser color Hall, because you should be okay, so this is being just very strange in general, because it should be, what happens if I go.
Michael T Ganschow Green: let's see what happens if I go font weight.
Michael T Ganschow Green: font weight.
Michael T Ganschow Green: Bold.
French.
Michael T Ganschow Green: What you're not applying at all, why are you.
Michael T Ganschow Green: Gentlemen CSS and I got disconnected.
Michael T Ganschow Green: file sable.
Michael T Ganschow Green: haha hang on a minute, let me see if I can troubleshoot why a regular old a not doing anything ECON link is there any tags.
Michael T Ganschow Green: For weight.
Michael T Ganschow Green: color.
Michael T Ganschow Green: This wasn't a DEMO part of the DEMO expected to really break.
Michael T Ganschow Green: All right, let's go orange red fun we're going to go important.
Michael T Ganschow Green: something has gone wrong what.
Michael T Ganschow Green: wow.
Michael T Ganschow Green: Okay something's broken in my CSS here let's see let's just do a quick check, you know paragraph bracket.
Michael T Ganschow Green: color.
Michael T Ganschow Green: Okay yeah something's definitely broken, because those are peas, those are peas right there let's go.
Michael T Ganschow Green: hang on a second just double checking some things let's go to page source, are you even updating yeah there's on your device pre I know when you have that.
Michael T Ganschow Green: team whoa oh you're some kind of oh interesting okay you're just showing that window, no.
Michael T Ganschow Green: files update right so i'm going to try something here real quick and i'm going to close up my DEMO see if the DEMO was lying to me so just not P greening down there either so that's interesting this paragraph style should be taking so something's up with my style sheet.
Michael T Ganschow Green: That missed comma somewhere or something like that um let's take these stick these back to button.
Michael T Ganschow Green: Save.
me friends.
Michael T Ganschow Green: We publish out to chrome did you do you think no all right well we've got an interesting breakage here sorry about the lecture D railing guys.
Michael T Ganschow Green: But this is interesting and I, and I think you guys might just might want to see my troubleshooting process a little bit here alright let's see if it's something to do with any of this so i'm gonna come up here.
Michael T Ganschow Green: i'm going to put this right at the top, just to see if it's any interference okay you barely all right fine we're going to go pee brackets ology color green.
Michael T Ganschow Green: Save.
Michael T Ganschow Green: Know interesting interesting interesting interesting okay I don't know why okay that's weird I don't know why.
Michael T Ganschow Green: Do here back too far, oh there's that.
Michael T Ganschow Green: I don't know why this is happening, this is interesting i've never i've so what you're seeing guys as an error, I have never had before, and dreamweaver where it's just not responding to some tag styles without.
Michael T Ganschow Green: any particular explanation, it was rolling before, and then I got up and then I came back and it's not working, what is it done so again, my apologies for the tremendously entertaining troubleshooting here actually trying to figure out what has broken so we're going to go paragraph bracket.
Michael T Ganschow Green: color.
Michael T Ganschow Green: glue.
Michael T Ganschow Green: All right, there's that fresh okay so let's do a class style test class and fresh and.
Michael T Ganschow Green: Class equals.
Michael T Ganschow Green: Oh it's not responding at all my okay that's not responding either test.
Michael T Ganschow Green: Oh, we are my whole dream weavers being weird all right i'm gonna have to quit restart dreamweaver real quick so we're going to go test class that underscore dash a dash.
Michael T Ganschow Green: yeah Oh, this is, we are you guys one minute so we're going to take this class off i'm gonna quit and restart my dream Member, this is just being really weird save that was odd alright dreaming real quick dreamweaver let's restart it.
Michael T Ganschow Green: goes down dreamweaver.
Michael T Ganschow Green: yeah sorry about the fumbling around here you guys, but I want to make sure, want to see if I get this fixed thing to show you a couple of additional things and hopefully not have to, in theory, like you, well, it should work this way we'll see what this does here.
Michael T Ganschow Green: that's weird man shouldn't shouldn't completely stop working like that I don't know what's causing it.
Michael T Ganschow Green: Alright we're back.
Michael T Ganschow Green: Close navigation and reopen it from my files over here.
Right.
bracket ology.
Michael T Ganschow Green: yeah you're broken i'm sure you are oh get away chrome away browser chrome get up here you and we're going to go well whoa where'd my source code go.
Michael T Ganschow Green: This is all really Oh, you were taking a moment on what is up with the line during remember this is this is some weird stuff Okay, so there is that alright so we're back to where we were the drop Downs work.
Michael T Ganschow Green: yep they're working there's my links there's my links, but button roles okay that's good all right let's try this again I don't know why it did that let's just try a quick test with a paragraph bracket color.
Michael T Ganschow Green: Green semi colons say.
Michael T Ganschow Green: Fresh yeah okay it's working now alright sweet I don't know what happened there, I think I was a dream Weaver breakage but now we are working, so if I come in here and I do an A colon link.
Michael T Ganschow Green: I bet you my links will suddenly be green Yes, they will there, they are OK cool so it's working again alright so back to where we were I don't know 10 minutes ago, this whole thing blew up, so the the the the style to style your links is a colon link.
Michael T Ganschow Green: which I have right over here and i'm dying them green to match my drop downs, why not animals are going to make my buttons bold so we're going to go font we're not my buttons my links font weight bold.
Michael T Ganschow Green: The fresh.
Michael T Ganschow Green: font weight bold see now they stand out right there and right there.
Michael T Ganschow Green: And you know what let's strip off the text decoration to text decoration none.
Michael T Ganschow Green: say.
Michael T Ganschow Green: Fresh there, they are okay cool cool cool cool cool cool are now we need to do is give them a little rollover to give them that says oh interesting it's actually dying, the ones up here it shouldn't so.
Michael T Ganschow Green: What i'm going to do to make sure that it does say I thought it wouldn't die those up there, but, since it has i'm going to make this a pseudo class style to have just sticking my regular old links in a.
Michael T Ganschow Green: Paragraph just inside a P tag fresh and we go, so now we're friends and go, so now there's these guys here now I just need to put a rollover on them so i'm going to do that real quick.
Wait a minute.
Michael T Ganschow Green: Interesting that overrides it.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: Well, why not why okay so.
Michael T Ganschow Green: hang on i'm just going to come up here and change this guy to an A colon link to.
Michael T Ganschow Green: That should fix don't want to keep these links timings as simple as possible.
Michael T Ganschow Green: Fresh damn yep there we go that works okay.
Michael T Ganschow Green: Now it's still going though i'm now you know what fine we're going to we're not going to be bold and large we're gonna come down here, I will just go and say.
Michael T Ganschow Green: P, a link there we go okay so.
Michael T Ganschow Green: Then i'm going to add in a couple of other link styles here to these guys so i'm gonna come in here and i'm going to add in a nice roll over for each of these guys.
Michael T Ganschow Green: So to do that i'm going to come in here and i'm going to do a p.
Michael T Ganschow Green: A colon hover Czar roll over as you guys have already experienced from our menu up top we're going to go pee a colon hummer and we're going to go.
Michael T Ganschow Green: Well, the p don't worry the piece not required for your linking you can actually do them with aes i'm just doing these guys, so they don't interfere with my buttons so a colon however we're going to have the hover be.
Michael T Ganschow Green: something nice and Nice and look at this chocolate Brown, why not, so what a colon hover of a chocolate brown on it.
Fresh.
Michael T Ganschow Green: boop.
Michael T Ganschow Green: boop there we go boop boop.
Michael T Ganschow Green: Do to do to do to do.
Like that action there we go.
Michael T Ganschow Green: Alright cool so.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: One more thing two more things actually.
Michael T Ganschow Green: P, a colon active.
Michael T Ganschow Green: Now there's active is pretty interesting Okay, so what active is is active is so if a regular link style and a colon link is whatever.
Michael T Ganschow Green: The loading state of a particular link is and hover is what happens when he put a mouse over the top of it, so a colon link is whatever color the links load is equal and hover is whatever color the links become when a mouse goes over the top, active is whatever color.
Michael T Ganschow Green: The links become as they're being clicked so these guys will flash one second of bright red.
Michael T Ganschow Green: Once they're clicked on my refresh that as i'm clicking on them there's a quick flash of red, as I am clicking on them okay.
Michael T Ganschow Green: As i'm clicking on them and see just this brief is flashing red as i'm clicking on them now notice when I did that they both turned purple because they both linked to the same place, which is hashtag so the purple means those links are visited if you would like to hide.
Michael T Ganschow Green: This color if you want to make your links not have a visited color or you would like to control the visited color, then what we'll do is we're going to come right after link here and i'm going to go a colon visited.
Michael T Ganschow Green: And i'm gonna make my visited link color.
Michael T Ganschow Green: A dark green.
Michael T Ganschow Green: Fresh.
Michael T Ganschow Green: So now they're a slightly lighter green before they're visited.
Michael T Ganschow Green: let's make one of them, not a hashtag we're going to make them to different things so that we can see the visited versus non visited so i'm going to make one of them an exclamation point and another one, a number three just junk filler characters actually go three and four, why not.
Michael T Ganschow Green: So fresh.
Michael T Ganschow Green: whoops link not found now notice it's a slightly darker green compared to that green there and as i'm clicking on it i'm getting a bright flash of red.
Michael T Ganschow Green: Now these guys are the only CSS styles that require themselves to go in a specific order okay.
Michael T Ganschow Green: back you know what know what.
Michael T Ganschow Green: i'm gonna leave the i'm going to take these guys i'm going to keep them Nice and simple.
Michael T Ganschow Green: And then i'm going to come up here.
Michael T Ganschow Green: Going my navigation here NAB ul Li a and i'm going to go a font weight.
Michael T Ganschow Green: Not bold font weight.
Michael T Ganschow Green: Normal.
Michael T Ganschow Green: This should work now and keep things a little simpler.
Michael T Ganschow Green: refresh oh and i'm going to make a white apparently the.
Michael T Ganschow Green: color white is fine.
There we go.
Michael T Ganschow Green: yeah refresh and we go cool Okay, so what are these okay.
Michael T Ganschow Green: bit i've apparently know what worry about that later I may just make a.
Michael T Ganschow Green: I may just make a separate page for these guys just to make it cleaner but i'm these guys actually have to be in a specific order.
Michael T Ganschow Green: Because this visited if you put it underneath the hover color the hover will hide it and the visited won't work, so they actually have to be in link visited hover and active order.
Michael T Ganschow Green: In order to work they're the only CSS styles, I know that actually have to be arranged in a specific order these at these at these.
Michael T Ganschow Green: A colon status pseudo class style, so this link at the top has to come first and he will style what the link looks like when they load this.
Michael T Ganschow Green: visited link comes next, and he will style with the link looks like when you load a page but it's a link you've already clicked on hover will style what it looks like when a mouse hovers over it, an active lifestyle what it looks like exactly as it's being clicked on okay.
Michael T Ganschow Green: questions on that and sorry for the confusion it's it was having some menu interference issues and I ended up having to shift some things up all annotate this later on, before I put it online.
Michael T Ganschow Green: For you guys to download along with that guidebook.
Michael T Ganschow Green: Other questions.
Michael T Ganschow Green: yeah sorry about the confusion it's been one of those Scotland kind of days, but there's been a lot of info and it sounds like you guys from the questions that I have gotten are getting it so.
Michael T Ganschow Green: If you have more of course you know where to find me so it's just one other little thing to do, and that is how to set up an email links and you guys just setting up email links in your project to both how to do it in the code and then how to edit it so that it does it safely and.
Michael T Ganschow Green: let's go file save all.
Michael T Ganschow Green: So linking to an email is a little different than linking to a regular web page we've been through lead page links it's just.
Michael T Ganschow Green: A draft equals quotation marks either the name of the page or the URL https colon slash slash www.blog.com that goes that goes to another page.
Michael T Ganschow Green: Either externally or internally from your website so we've played enough with those guys we've been revisiting them pretty much every other week since the Semester started, so now we are going to do something slightly easier.
Michael T Ganschow Green: So.
Michael T Ganschow Green: What we're gonna do is we're going to add an email link in here so down at the bottom here i'm going to add one more paragraph tag paragraph paragraph and i'm going to i'm going to add a text that says email me or you can put your you know what know what my email.
Michael T Ganschow Green: My email and again Shaw at ti m si dot EDU and.
Michael T Ganschow Green: In a ch O w to mcc.edu, which are all you guys should know.
Michael T Ganschow Green: And i'm gonna wrap it into maker tax, a.
Michael T Ganschow Green: yo and i'm coming here to link it a draft equals quotation marks now i'm email links are very interesting because you actually have to in the link itself trigger the browser to come and or to.
Michael T Ganschow Green: You trigger the browser to generate a behavior on the user's computer yeah so what you want to do when you click on an email link, yes, the browser needs to go into the user's computer and open up, whatever their default email client is OK.
Michael T Ganschow Green: You know, for most of you it's probably outlook or MAC mail them so in order to do that the little browser command, we have to put in front of the link before we do anything else is mail to ma te O one word mail to one word colon and then we insert the email and.
Michael T Ganschow Green: mail to colon then we insert the email.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Once this link is clicked on poop it will open up Bam a male client look at that look at that, with a two already set it's clicked into the subject it's ready to go, so it so there's a male ready to go okay.
close down male Thank you bye bye.
Michael T Ganschow Green: OK so again, you click on that pop there's mail ready to go on my computer it was on a phone that link would go to that link would be.
Michael T Ganschow Green: A come on me stop it stop it.
Michael T Ganschow Green: Stop stop stop stop stop stop okay you're close now that's good I sweet cool okay so um if it's on your phone it would open up an email link in your phone the same way pop open the POP open.
Michael T Ganschow Green: an email, either in the browser or would open up your email APP in your phone depending on how your phone is configured yeah now these email links, though just by putting them on a website like this makes them vulnerable to spam so one of the.
Michael T Ganschow Green: One of the things that is recommended that you do if you're just going to be willing to put your email out there, like this is, you have to make it secure.
Michael T Ganschow Green: And the way to do this is through a process that i'm not making it up, this is the actual name of it is called munching email munching so you want to find a good one actually I should have one of my history heroes messing around with it earlier let's see here.
Michael T Ganschow Green: let's see oh much better my other browser hang on a SEC so.
Michael T Ganschow Green: email lunch email.
Michael T Ganschow Green: lunch.
Michael T Ganschow Green: er email messenger let's see.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: No, I don't want to do the javascript method hang on a second we don't want to get you guys using scripts just yet.
Michael T Ganschow Green: Managing there's another one that I found early your.
Michael T Ganschow Green: That is.
Michael T Ganschow Green: A good one to go project honey pot yep, this is it they've got a good manager right here, so what we're gonna do.
Michael T Ganschow Green: Is i'm going to here's the link.
Michael T Ganschow Green: email address cool so.
Michael T Ganschow Green: Here we go here's how you hide an email, so this actually program that manages your email, and what munching does is when you do it is basically munching takes your.
Michael T Ganschow Green: Your.
Michael T Ganschow Green: text email and breaks it up essentially into code and there are a lot of very good managers out there there's one that I put in the.
Michael T Ganschow Green: In the chat is a pretty good one here too it's one that doesn't require extra scripting so i'm going to manage my email love that term I love it i'm going to giggle every time I use it all through the Semester you guys and you can't stop me, so I am going to.
Michael T Ganschow Green: I am going to actually i'm going to manage this thing twice First things first is i'm going to manage my link email right here so i'm going to manage it where it has the mail to em aim to no space in the front of it, so this bit will be encode.
Michael T Ganschow Green: paste this in here i'm going to say lunch there goes and we're going to copy paste this huge big string of friggin numbers in here.
Michael T Ganschow Green: To do to do to do paste that in there and then i'm going to manage this, one more time and i'm just going to manage my text email right here munch we're gonna go.
Michael T Ganschow Green: Bam munch there, it is now.
Michael T Ganschow Green: there's that one lunch yeah so look at this looks like a big long dominated string of numbers and letters and punctuation punctuation and it's all madness well, let me show you what it looks like in a browser.
Michael T Ganschow Green: browsers know how to read these so it reads it back into an email but box can't read it, so people that scraped so so your email might get taken if somebody manually reads your website type thing email in and.
Michael T Ganschow Green: and start spamming you that way, and that certainly wait there's certainly a way that people do that, that is, unfortunately, difficult to defend against that using contact forms but.
Michael T Ganschow Green: You know you can't really defend against somebody scraping and putting it in but automated box, for whatever reason don't really like these munches and so, even though this things visible and can in fact send an email I mail there it is look at that.
Michael T Ganschow Green: let's see don't say and you.
Michael T Ganschow Green: don't say and quit you bye bye.
Michael T Ganschow Green: Even though, even though that thing works box, the scrape it can't really see him so it always helps to manage them to keep your email from getting scraped and like I said Kimberly protected from people just.
Michael T Ganschow Green: typing it, you know looking the link out, but if you wanted to do that all you have to do is instead of having your email visible here like this, you just change your button from that into.
Second.
Michael T Ganschow Green: into.
Michael T Ganschow Green: email me.
Michael T Ganschow Green: And now, your email address is entirely hidden it's managed here, and it does not appear as visible text in the document for somebody to grab an email, and then you just click that and boom boom here comes the email.
Michael T Ganschow Green: So i'm going to put this messenger I believe on already included this messenger on the.
Michael T Ganschow Green: In the forum resources, but I will also put it in there i'll double check and make sure it's in there when I put up the.
Michael T Ganschow Green: The style guide sheet, so does anybody have any questions.
Michael T Ganschow Green: alrighty then well I i'm going to give you the remaining half hour of class here to work on things or ask me questions or whatever i'm going to go through and i'm going to annotate all of my code here.
Michael T Ganschow Green: So that you guys can see what I was doing and what I was working on and why I was doing things when you download these class files so i'll be talking out loud here, as I inserted as I insert my commentary throughout this.
Michael T Ganschow Green: This page here, so if you guys want to work along or ask me questions or anything like that I am here for that.
Michael T Ganschow Green: For the remaining half an hour otherwise, that concludes our broadcast day and happy spring break you guys.
Michael T Ganschow Green: So i'm going to go to stop and start sharing real quick here to pause the recording so you pre recorded people have a great spring break as well, and hope things go well for y'all y'all alright so later recording people.