Michael T Ganschow Green: alrighty then Hello everyone, welcome to another round of web learning so today will be a we're going to start off with a file transfer protocol lecture what is file transfer protocol, you ask it is the methodology we use to put files on the Internet.
Michael T Ganschow Green: The reason why i'm going to show it to you guys is because Well frankly it's the easiest well.
Michael T Ganschow Green: I it's good training for what you're going to be using for your other projects and it's a very easy way to get your preliminary work to me if we were meeting physically.
Michael T Ganschow Green: You would have your preliminary work to me in a Manila envelope with your name in the class and your URL and all that on it, but in this case.
Michael T Ganschow Green: We won't have that ability, because this is an online class we don't even know if each other or real like you guys could be eight or 10 like Ai chat bots for all I know.
Michael T Ganschow Green: Who just keep building the websites and designs, but this this way at least you'll be able to generate files your little chat bots and you'll be able to put them online so that I can see what you have done.
Michael T Ganschow Green: Because otherwise you won't be able to there's no proof, you did any of the preliminary work so other than the critique which you all did very nicely Thank you.
Michael T Ganschow Green: And we got an end just in time because we got another one starting up on Friday Okay, so that being said, make sure the recording is running recording is running excellent so.
Michael T Ganschow Green: So today we're going to start off with ftp and then we are going to get into some a building blocks of the Web will start talking about whitson heights and.
Michael T Ganschow Green: Additional background colors and we're just generally going to make like a really, really bad looking top bar on our website today, yes, the pink one alright so.
Michael T Ganschow Green: Before I get started, showing you guys file transfer protocol does anyone have any questions.
Michael T Ganschow Green: Alright i'm going to take your silence is the fact that you're either too scared or tired to move and we're going to continue on so some of you.
Michael T Ganschow Green: have stayed around for the little kind of after class bits that I do when my lectures done, but we still got time to burn have seen me actually put files online modded files and put them online.
Michael T Ganschow Green: So those are so those of you might find some of this process, familiar okay.
Michael T Ganschow Green: So here's what we're going to do.
Michael T Ganschow Green: All right, let's do some screen sharing shelly Hello screen share.
Michael T Ganschow Green: scoot you guys over here so that I can actually use my.
Michael T Ganschow Green: files alright, so we have our lovely root folder here, which contains just I mean just it's absolutely beautiful.
Michael T Ganschow Green: html I mean just look at this it's gonna it's gonna win an award someday you guys, I mean eventually we're going to start, I will I will kick it up a notch today and we will put a gradient background, so you can see how to do that in dreamweaver.
Michael T Ganschow Green: Is gradients very nice alright so we've got that in there and a few other things so let's go into my root folder here.
Michael T Ganschow Green: And i've got my CSS folder to contain my cascading style sheets, of which there is already one in here.
Michael T Ganschow Green: i've got an images folder for linkedin images which I have a terrifying duck who knows all of your secrets the duck knows what you did last summer.
Michael T Ganschow Green: i've got my index, which is my homepage which we're going to make look increasingly terrible as a class goes on i've got a script that is empty, but it will one day contain scripts that will modify pages in this website.
Michael T Ganschow Green: Then I have a working graphics folder full of all sorts of things now what I would like you guys to do is when you turn in your preliminary work.
Michael T Ganschow Green: Go ahead and stuffing all into your working graphics folder so pictures of your sketches you know.
A scans.
Michael T Ganschow Green: Your notes, whatever digital files, you want to include in your preliminary work all of that should go in your work and graphics folder.
Michael T Ganschow Green: It will, when you're building real websites out in the real world, and so it should here, so I want you to stuff it full of all of your preliminary work your thumbnail sheets your notes your research your everything like that.
Michael T Ganschow Green: What I want you to do is I want you to take your work and graphics folder and I want you to compress it zip it in the in our case zip it so we're going to zip this thing i'm going to do it the MAC way.
Michael T Ganschow Green: Which is compress the PC way is you right click on it and you go send to that two thirds the way down send to.
Michael T Ganschow Green: zip folder but my case i'm going to do compress what this will do is this will take my work and graphics folder and it will create a zip file now what a zip file is is it's a a master file made around a folder.
Michael T Ganschow Green: And what happens is it takes everything in that folder and sort of compresses them together into one file it's kind of this.
Michael T Ganschow Green: If your folder is like a bucket of fruit like we've pulled a bunch of jello in there now and we built a jello mold that has all of your file sort of.
Michael T Ganschow Green: In suspended animation within it so um.
Michael T Ganschow Green: So zip file is a pretty much an industry standard way for moving big files or moving folders because a lot of.
Michael T Ganschow Green: Various file transfer things don't like folders ftp is not one of them ftp actually likes folders.
Michael T Ganschow Green: Now, the reason why i'm making you zip it and compress it is two reasons, one to get you in practice of zipping things, because as graphic designers should be zipping files all the time to zip them off to wherever and to.
Michael T Ganschow Green: Its practice because, for your future websites, starting with project to i'm going to have us zip you're working graphics folder before you put the whole website live.
Michael T Ganschow Green: Now, this will, this is actually kind of a check for you guys, because a lot of people wind up linking things out of the working graphics folder and that's a big, no, no, you don't want to you don't want to mix.
Michael T Ganschow Green: files that are going to be shown in the browser and your active kind of development files, you want to keep them separate So if you zip you're working graphics folder and a bus whole bunch of image links on your website, you know yeah.
Michael T Ganschow Green: So this is kind of a test for that as well, so good practice on that so once you have zipped then we're going to put it online so questions on any of this so far.
Michael T Ganschow Green: Alright, so this online.
Michael T Ganschow Green: So be.
Michael T Ganschow Green: Online times okay so First things first i've never bothered to memorize the student password I signed you people so i'm going to go get the the handout here.
Michael T Ganschow Green: ftp info sheets i've done some info sheets for the ftp programs that we have in the computer labs up at mcc you may have a slightly different ftp program on your home computer and they may work slightly differently and.
Michael T Ganschow Green: It doesn't particularly matter which ftp program you have, as long as you know how to work it the server information is very basic so one we're going to start off with is files zilla.
Michael T Ganschow Green: file zilla is a is a kind of an industry standard cross platform ftp program that works quite well for what it does, especially can and works.
Michael T Ganschow Green: pretty much identically.
Michael T Ganschow Green: From one platform to another again, aside from the os keyboard command shifts you know anything that's control on a PC is command there, otherwise it pretty much works, the same anyway so we're going to kick off this.
Michael T Ganschow Green: This ftp demonstration, with a little bit of.
Michael T Ganschow Green: This way, with a little bit of.
Michael T Ganschow Green: files zilla so open up file zilla here files ella's always got a brightly colored red and white icon regardless of the program so we'll fire open files.
Michael T Ganschow Green: So.
Michael T Ganschow Green: There are a couple of different ways of hooking up your website here, so this is the file zilla interface.
Michael T Ganschow Green: And this thing may look quite complex when you're starting out there's a lot going on here but it's not all that horrendous okay so up here you have a notification area up top right here this notification area will tell you what's going on on the server as you are.
Michael T Ganschow Green: putting things up or taking them down.
Michael T Ganschow Green: below that you have two columns here is your local site which is on your computer wherever you've set your local site to be if it's.
Michael T Ganschow Green: If it's not set anywhere it just defaults to your hard drive the C drive on a PC or your hd on a MAC.
Michael T Ganschow Green: And then over here is the remote site, this is a server itself, in our case we're going to be using the magic file transfer protocol connect Austin Texas.
Michael T Ganschow Green: Hopefully, their backup generators are running well I think they have power now, so we should be able to actually do this we'll find out here, and then down here is a.
Michael T Ganschow Green: it's a cue that shows you where your files are in the uploading process, how far they've loaded etc, etc, etc now.
Michael T Ganschow Green: There are two ways to hook up to this thing, there was a quick connect up here, which is very nice for just quickly jumping in and out of websites it's the one that I use for our class website when i'm loading up and down files, however, you can also in.
Michael T Ganschow Green: file zilla set a.
Michael T Ganschow Green: kind of a site root of file zilla style site route and you do that by coming up here and clicking on the little served these little three little server icons.
Michael T Ganschow Green: up here in the top left you go to the top left to your file zilla and you find there's like three little towers, like a bunch of lines connecting little town we're just supposed to represent servers.
Michael T Ganschow Green: And if you click on this, you get what's called the site manager and the site manager works very much like dreamweaver site manager.
Michael T Ganschow Green: So you can go ahead and set up, you know anything you want, so if you're going to be using you're going to be connecting to a website regularly it probably behooves you to set it up in the site manager.
Michael T Ganschow Green: However, I am lazy and i'm not going to do that we're going to set this up quick connect to get you guys in practice in writing and host names usernames and passwords when you connect ftp so.
Michael T Ganschow Green: any and all ftp connections, when you guys get your own hosting to start building your very own websites for like portfolio or whatever they'll send you the ftp information and most ftp information consists of either three or four things that you will get.
Michael T Ganschow Green: you'll get a hostname and host name is basically the address of the server that you're hosted on so that you can.
Michael T Ganschow Green: dial into it and.
Michael T Ganschow Green: And access it add files to it and get everything all set up, then you have a username and the username is pretty much like a username anywhere else it's a unique username.
Michael T Ganschow Green: To that particular ftp account so not necessarily to a server server can have multiple ftp accounts but it's that username for that particular ftp account so for you guys that is GR C 175 dash student oh in our host name is.
Michael T Ganschow Green: dot net firms.com net firms is the name of the hosting company that is hosting our website, thirdly you'll get a password which I have right here, never bothered memorizing and it's on the handout, so why should I I don't need to use my memory, when I got it on paper.
Michael T Ganschow Green: And then optionally i'm going to fourth one which is a port which is the preferred port that the server connects through m.
Michael T Ganschow Green: Net firms just uses the standard ports, so we don't have to get any like freaky geeky with the port settings here so hostname let's connect us up to a server before I do that do you have any questions on file zilla sell far.
kianabohm: ftp is file transfer Program.
Michael T Ganschow Green: file transfer protocol, but yes, yes, yes it's basically a.
Michael T Ganschow Green: Specific.
Michael T Ganschow Green: it's basically a specific.
Michael T Ganschow Green: interchange language essentially that lets you sling files on and off the web and you'll find as designers you won't just be using this for websites, a lot of printers.
Michael T Ganschow Green: will have email caps on how big the files that you can send them usually about 20 megabytes and anything bigger typically than want you to connect to their ftp server and ftp it to them.
Michael T Ganschow Green: So you'll be using this a lot actually to move big files around if you get into print design as well, so this is good stuff to know.
Michael T Ganschow Green: Other questions.
cool.
Michael T Ganschow Green: All right, let's wrap this thing up so up here in the top left i'm going to start off by filling out my host GR C 175 dot net firms.com.
Michael T Ganschow Green: And GR C 175 dot net firms calm in the host yeah then for the username we are going to go G RC 175 dash student.
Michael T Ganschow Green: And then lastly we're going to type in the password and this password for this semester is exclamation point in fact we'll have an apprentice way down, so I can type it well, that things visible guys so.
Michael T Ganschow Green: The password is exclamation point spring with a capital S so capital S lowercase P R I n G, and the number 21.
Michael T Ganschow Green: And then G RC in all capitals 175 and then another exclamation point.
Michael T Ganschow Green: Then, if I smack quick connect you'll see all the statuses come in chug chug chug chug chug chug and it connects to the server and it says yay I retrieved a directory setting chug chug chug chug chug it, so now we are connected to the server.
Michael T Ganschow Green: actually here, let me throw in chat real quick i'm looking at this, this thing here, but you guys are probably like what, why does he keep putting all this stuff over the top here there's the ftp info for file zilla so you can look at it on your own so now.
Michael T Ganschow Green: You will see something has happened, first of all, we have all of our hostname and La mama mama mama mama mama mama mama cat Mr dmc up here and now we have a.
Just shifted this a little bit So you can see where we are.
Michael T Ganschow Green: By the way, notice i'm using double headed arrows to move my windows around a little bit and set things so we're going to go, so we need a little more one more final action over there alright so.
Michael T Ganschow Green: A couple things have happened the logo hasn't changed any the locals just pointed at your computer so.
Michael T Ganschow Green: um.
Michael T Ganschow Green: So, but what's happened is suddenly poof a remote site has appeared over here this remote site is the server or, rather, this is the students work.
Michael T Ganschow Green: folder on the server so when you go to find your stuff Jesse 175 dot com slash student slash spring dash 2021 slash your name, and if you notice in here as i'm scrolling through oh snap it's everybody's name yo what what whoo look at all that, yes, there's all 32 of you in here.
Michael T Ganschow Green: At the moment, you are all represented by little names in here.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Now we're all set hooked into the the server we've got a local site ready to go the status says everything's connected got everything set so we're ready to rock and roll now, before I actually rock and roll and throw up my work and graphics folder yes on this thing.
Michael T Ganschow Green: Do we have any questions.
Michael T Ganschow Green: okey dokey so i'm going to minimize my browser in the background, so I can drag and drop so here's a really cool thing with file zilla so files LM works in a couple of ways.
Michael T Ganschow Green: You can either go over here to your local drive and find.
Michael T Ganschow Green: Wherever whatever you're looking for you get to go through, and you know just kind of find the files you're looking for the folders and one, and the second widget surfer around and see if you can find it blah blah blah, and then you can.
Michael T Ganschow Green: find a final for here and drag and drop it to your server over here so that is the end of that is the thing you can do Okay, but that takes a while.
Michael T Ganschow Green: I don't tend to use that all that much what I instead do is I I like to drag and drop.
Michael T Ganschow Green: From my desktop because this thing works, a couple of different ways here, so let me scoot you guys over here so there's some room to move some things around here so.
Michael T Ganschow Green: What I can do.
Michael T Ganschow Green: Is I can come over here.
Michael T Ganschow Green: And I can get all set up to place my file, so I could go here.
Michael T Ganschow Green: And I could find a file and drag it and drop it or I could find a file and I think the the upload command now this button shows you how much i've.
Michael T Ganschow Green: I use the upload command, so what I usually do is I just come over here into my remote site and basically this area here.
Michael T Ganschow Green: Is the overall site, this is all the folders in the site and then this area here is whatever folder you are clicked on.
Michael T Ganschow Green: So in this case i'm clicked on the main directory, the main folder that contains everything, so these two duplicate each other all right, but should I come in the folder structure here in the kind of middle right and Double Click on my name.
Michael T Ganschow Green: Now there's this empty folder here that is waiting waiting to have a working graphics folder put into it.
Michael T Ganschow Green: Now notice this hasn't changed any, this is the list of folders that contain this guy but this folder is wide open and now there's nothing here, because there was nothing in the Michael Gantt chart green folder Michael Green is empty he's non existent he's just full of hot air.
Michael T Ganschow Green: By the way, I actually.
Michael T Ganschow Green: I had a.
Michael T Ganschow Green: instructor critique one year.
Michael T Ganschow Green: In the evaluations That said, I was full of hot air, I laughed so hard at that all right, so what i'm gonna do is i'm going to take my work and graphics folder and i'm going to drag and drop it in like this now, I can see down here suddenly my my.
Michael T Ganschow Green: My status my queue has opened up and it's showing a file, it says that all look we've got this nice big file we've got 15 seconds have been spent uploading it we got another 45 left there's one file in the queue and it seems to be transferring Nice and successfully okay.
Michael T Ganschow Green: Wait goes chug chug chug chug chug chug here, it goes putting on 19 megs of itself, we got some big images in there, plus we got that really freaky geeky website you guys made me make.
Michael T Ganschow Green: And it's it's a doozy and so it'll take a minute to put it all up, it will likely take quite a while, for your.
Michael T Ganschow Green: Working graphics folders to go up as well, so don't sweat it if it tells you it's like you know if you've got a huge one.
Michael T Ganschow Green: With a bunch of stuff inside this is going to be an hour well that's fine just let it run in the background, put the file i'm gonna make a cup of tea whatever.
Michael T Ganschow Green: You know, go onto YouTube video or something and let your files dental work in the background, because you don't minimize it and work on it now.
Michael T Ganschow Green: Look at that it's uploaded the queue is finished and it's switched the cue from the queue to the successful transfers queue and the date and time in that Nice and, if we look in our files here.
Michael T Ganschow Green: You see a working graphics dot zip you know so, for example, if I Double Click on olivia's folder here there's nothing in there, but by Double Click on mine there is my.
Michael T Ganschow Green: Working graphics but, again, we have everybody's different folder here, so what I do to get that to happen, I just clicked and drag from my desktop into that open window there now if you're updating your files on a website i'm file zilla is going to be nice enough to nag you about.
Michael T Ganschow Green: there's two files here, at the same name what what what am I supposed to do with that.
Michael T Ganschow Green: So you so you can say not I wanted to do anything I want you to override it only override if it's newer that kind of thing so i'm going to say over right that's right it over the top put up another working graphics here we go check it chug chug chug chug chug it there, it goes.
Michael T Ganschow Green: so well, this is chug chug chug chugging let me pull up chat and see if we've got any questions so does anybody have any questions on what i've done so far.
kianabohm: So this is kind of like you, allowing us to be like a site administrator because we're able to like add stuff to the website.
Michael T Ganschow Green: that's correct that's correct.
Michael T Ganschow Green: I made you you basically fish with a nice little bucket of water here, so I made you a bucket of water to swim in I used to give my class i'm.
Michael T Ganschow Green: Complete carte blanche access to the server and I can show effect here what I will do is once i'm done demoing download i'll show you what the whole website structure looks like the reason why I don't anymore, is because um I had a student a.
Michael T Ganschow Green: misplaced their files and go to delete their files and instead I completely deleted the entire class website, including the forum.
Michael T Ganschow Green: which was an adventure of a of an evening to put back together, so you guys i'm sorry you guys can't have anything nice but i've given you a nice little bucket of water to play, and so you can only.
Michael T Ganschow Green: You can you, the only break it, you can do is to each other's websites you can't say completely erase an entire semesters worth of work by accident of all of your of.
Michael T Ganschow Green: everybody's posting things that was fun So if you dig through the form a little bit you'll come across preliminary critique posts where folks are uploading images for all the links are broken, that was the Semester that they deleted that now downloading files from.
Michael T Ganschow Green: files ella is a little more difficult than uploading them uploading them pretty much just a drag and drop affair now if some of you have seen me messing around with this again in the.
Michael T Ganschow Green: kind of that after class period that we have where there's where you'll see me try and drag and drop out of here and nothing happens in order to remove a file from.
Michael T Ganschow Green: or not removed, but in order to download a file from a a website or from a server you have to use this local directory thing so you've got to surf through your local directory until you find the folder where you want to download the thing.
Michael T Ganschow Green: And then you click on your working graphics and you download boob the entire.
Michael T Ganschow Green: structure chug chug chug chug chug chug here goes downloading now, it should be decently fast downloading as well, but it depends on your Internet connection so.
Michael T Ganschow Green: Whatever connection, you have may or may not be quite as fast downloading and uploading or uploading is downloading usually connections are much faster downloads as they are uploaded so this should take much less time than, for example, a.
Michael T Ganschow Green: Then uploading files.
Michael T Ganschow Green: So there it goes downloading and once it's done if I minimize this and I move that there should be on he where did it go I put it on the desktop did I not.
Michael T Ganschow Green: not put it up put it on my desktop Where are you at your somewhere here, it should be in my files and let's open it up didn't open it up, I will laugh if it auto opened it oh.
Michael T Ganschow Green: There it is if it was a snake, and when it kicked me right in front of me don't look at that there's my work and graphics zip that I just downloaded off this thing by.
Michael T Ganschow Green: coming through my MAC hunting for my desktop and sticking it there.
Michael T Ganschow Green: You guys can also hunt for hard drives here, you have the whole structure your computer laid out here, so if you've got hard drives plugged in You can check those and drag and drop files to it, you can do all kinds of things okay.
Michael T Ganschow Green: So questions on uploading and downloading files with file zilla.
Michael T Ganschow Green: Oh.
Michael T Ganschow Green: So in the working graphics folder olivia i'm looking for all of your preliminary work basically so.
Michael T Ganschow Green: Like photographs or scans of your sketches of photographs or scans of any like physical notes, you took all of your thumbnails any of your.
Michael T Ganschow Green: You know all of your preliminary your roughs you're in in any of the ideation you did to get there, your research things like that basically all of the preliminary work.
Michael T Ganschow Green: That you would ordinarily turn in in a graphics class in the Manila envelope because typically.
Michael T Ganschow Green: Typically i'd have you turn in your preliminary work in the Manila envelope so everything that you did is preliminary work throw it in this working graphics folder make a zip of it and put it online mostly so I can give you a preliminary agree yeah exactly exactly exact so um.
Michael T Ganschow Green: What working graphics is like a big version of a research folder because it's all in like the research, you did, plus the native files you use to build it so yes yeah very much like a research folder but like plus all of your.
Michael T Ganschow Green: original files your word Doc sure pst is your eyes your imdb files your GPS is you know things like that So yes, very much so.
Michael T Ganschow Green: Alright, so let's have a look i'll show you guys the site structure.
Michael T Ganschow Green: The overall.
Michael T Ganschow Green: site structures, you can kind of see one of these looks like so that you don't so that you don't have the first one that you see is your own and you don't know where you'll go so.
Michael T Ganschow Green: Here i'm going to put in the username for the overall website like I said, you can have multiple ftp accounts, by the way for these guys, so I am multiple ftp accounts on this server there are I don't know I think there's about five or six on this one.
Michael T Ganschow Green: But this one is the master ftp and it gets the whole server yes, establishing a new tab Thank you check a check out there, it goes okay so typically when you guys get your own hosting.
Michael T Ganschow Green: There will be the server will look something like this, there may be a few more folders to it.
Michael T Ganschow Green: They may have a few other things loaded depending on how the server is configured this server is very simple, because it's very old so it's only got a.
Michael T Ganschow Green: stats folder and a public underscore html folder this public underscore html folder is where all of your hosted websites will live on the server.
Michael T Ganschow Green: Some servers will call it a www folder as well same difference does exact same thing.
Michael T Ganschow Green: So if I Double Click on it, then I have a whole bunch of these little folders.
Michael T Ganschow Green: i've got a server scripts folder i've got a temp folder and then I have all these little folders that are four different websites I host on here so.
Michael T Ganschow Green: i've got 175 to 75 to 88 i've got one for testing i've got my IWC St web resources page, I think I showed you guys that one If not, I will in a little bit and I got a few other websites that.
Michael T Ganschow Green: Friends host on here as well, I know i'm a giver so I like giving away hosting space occasionally because i've got a pretty decent sized server here, you know toast all of you crazy people's stuff so.
Michael T Ganschow Green: Our class lives in the gic 175 folder.
Michael T Ganschow Green: So we'll go the other way and so here's the structure on it, so you guys can see it.
Michael T Ganschow Green: So there is a CSS folder which if I Double Click on this CSS folder there are a bunch of CSS files in here doing various things for.
Michael T Ganschow Green: The website some some just for a couple of individual weird pages and some for the broader website so master, for example, goes across everything mean is a couple of touches for the homepage reset goes across everything cleans off all the browser default browser defaults in a bit.
Michael T Ganschow Green: Not found is specifically for my for for error page, so I don't know how many of you have explored around the class website, a little bit, but if you go somewhere that does not have a.
Michael T Ganschow Green: That does not have a corresponding address you'll get my custom 404 page oops you found a dead link, but that keeps the website navigation intact, so you can go back do whatever so that's that style i've got a couple of other things.
Michael T Ganschow Green: This Isaac one i'll show you the Isaac thing in a second so i'm there CSS.
Michael T Ganschow Green: And then here's images.
Michael T Ganschow Green: Images is exactly when I talked about this is all the files that I want visible on the browser so it's the usual images that you might expect.
Michael T Ganschow Green: But I also in here are all of the class files and becca class files going back three years in here.
Michael T Ganschow Green: there's all the images down there we get some PNG some gifts jpg etc, we got all kinds of demonstrators all sorts of downloadable files and then up here, I have.
Michael T Ganschow Green: All the class pdfs the assignments that any of the downloadable that's the TMC logo you guys download for anything requiring the TMC logo.
Michael T Ganschow Green: And then the recordings folder is all of the class recording stuff okay.
Michael T Ganschow Green: So that's the images folder that's mostly downloadable files many more downloadable files really than actual images for the websites, but in whatever.
Michael T Ganschow Green: That i've got a scripts folder I don't really do a ton of scripting with this guy i've got a couple of things that i've played with but I don't really do a ton of scripting for them.
Michael T Ganschow Green: But I do have a scripts folder just because good structures now got a couple of folders in here that you guys don't in your route folders.
Michael T Ganschow Green: Simply because i'm doing a couple of extra things with this site that i'm not going to ask you guys to do on yours, so, for example, I have a folder here called forum.
Michael T Ganschow Green: The forum folder is all of the files that run the Forum, the drive the forum and make it work basically they hook, up to a database and show you your forum data.
Michael T Ganschow Green: And then down here, I have a student website.
Michael T Ganschow Green: This or student website, excuse me a student.
Michael T Ganschow Green: directory this student directory contains every student file that i've gotten since they, let me take this class online, so I believe it dates, all the way back.
Michael T Ganschow Green: To 2007 I believe from when when I stopped having students turn things in physically so i've got student projects back from here that are.
Michael T Ganschow Green: old enough to be freshman in high school right now, which makes me feel unbelievably old guys i'm a Boomer and i'm just realizing it so um.
Michael T Ganschow Green: that's the student folder your student folder, by the way, when you guys are accessing the ftp.
Michael T Ganschow Green: Is this spring 2021 folder right here soon as I click on it see there's all your names, the bench if I click on the Michael ganja green folder you have burrs there's my work in graphics so that you are a little bucket of water right there is that student spring 2021 folder.
Michael T Ganschow Green: So that's pretty much the how what the website looks like there's all of our oh below this is all of our html files so there's the class recordings page.
Michael T Ganschow Green: there's the homepage there's not found there's a project one through four there's the student work page, so all the pages that are running it.
Michael T Ganschow Green: are here as well, so this is an overall site structure so as you can see, I do practice what I preach um so um let me show you the Isaac page, so the old Isaac pages leftover one that I show people some time and what it is, is a student asked if we could put animated gifts.
Michael T Ganschow Green: As background images.
Michael T Ganschow Green: I believe in isaac's or Isaac theory one moment and it turns out, yes, yes indeed, you can isaac's theory you go, you can indeed put.
Michael T Ganschow Green: animated gifts as background images.
Michael T Ganschow Green: There it is it's a shifting animated gif as a background image yay So yes and yes, you can make animated backgrounds, I don't know why I showed you all that, because now we're gonna have animated backgrounds all over the place and i'm going to start crying again um but.
Michael T Ganschow Green: that's what that's about I always get questions on that one when when people see it what's that about so now you've now you know and knowing is half the battle so.
Michael T Ganschow Green: questions on server access here so basically you come in grab your ftp and phone any of the ftp and folks will work by the way this doesn't change, regardless of what program we have.
Michael T Ganschow Green: Then you go up here into the quick connect because it's easy you put in your host in our case, that is GR C 175 dot net firms COM.
Michael T Ganschow Green: Then you put in your username which, in the case of the student account is GR C 175 dash student.
Michael T Ganschow Green: And then come over here to password and you enter exclamation point spring with a capital S a capital S lowercase PR I n G 21.
Michael T Ganschow Green: And then, a capital G RC and then 175 and another exclamation point and that is your password logged right in and then it will present you with a will present you with this lovely little list of.
Michael T Ganschow Green: Student names and you go find your name it's somewhere in here, I promise you, and then you can Double Click on your name and just load files in off of the off of your desktop now.
Michael T Ganschow Green: What have you been loaded in files that are a bunch of bunk you want to you want to clear them all out well you can't just.
Michael T Ganschow Green: download them because downloading downloads a copy of the file the original file is still there on the server so in.
Michael T Ganschow Green: file zilla if you want to get rid of something you right click on it or control click if you are if you're unfortunate enough to have a MAC mouse at the one little click.
Michael T Ganschow Green: Anyway, you right click on this on the on the file, you want to clear out and it'll pop up with a contextual menu here.
Michael T Ganschow Green: Well, about three quarters the way down that contextual menu is delete so you can click that and it says, are you sure you would like to delete this file out of here and you're like yeah it's junk I want it gone and so boom.
questions.
kianabohm: Can you show us one more time how to access thousand initially.
Michael T Ganschow Green: Sure sure so files ella if you do not already have it, I guess, actually, this is a good question because I didn't go over this so nicely done.
Michael T Ganschow Green: If you do not have files ella our lab computers up at the mcc do, and I do, but if you would like to go get files for yourself it yes computer I know i'm not typing in the zoom file like.
Michael T Ganschow Green: file zilla is available via download from its little website now my only real issue with file zilla and it's very minor one is sometimes when you try and download it.
Michael T Ganschow Green: You have to be careful, because it will offer to download other things, so I click download let's see if I get the download offer no doesn't look like it so.
Michael T Ganschow Green: All you gotta do is you come, by the way it detects what kind of computer you have so if you're on a.
Michael T Ganschow Green: windows machine when you click the download file zilla client, you will get an offer for windows, but it's auto detected that i'm coming in, on a MAC os X, and so I can when I click this bang, it will grab a copy Oh yes, here we go it.
Michael T Ganschow Green: Is do you want the paid version ha.
Michael T Ganschow Green: You want the PDF manual you know need the PDF manual I just showed you everything you really need to know about using it, and the rest of it, you can Google whoo I see you want the free one with all of the ftp and abilities, but you don't need any of the.
Michael T Ganschow Green: Any of the fancy stuff if you want the fancy stuff you know pay for it, I don't even know how much it costs honestly i've never used the pro version but, but you can go download it.
Michael T Ganschow Green: And you can grab let's see what the other selected the manual let's see what that does i've never actually downloaded the version I see it costs five bucks to download the manual.
Michael T Ganschow Green: know you can Google what the manual has in it so and I just showed you everything you'll need to know so going into free version come on click hi I button.
Michael T Ganschow Green: Oh, I know i've got the chat window in the way i'm aware the chat back over here so then, if you just want the free one that just gives you a standard ftp.
Michael T Ganschow Green: Secure ftp ftp over to less than a download and now of course up there, it goes it's downloading I love it gave a broken a broken thing and then it downloaded the the thing I like in that have downloaded it twice congratulations and thank you.
Michael T Ganschow Green: Because I clicked a couple of times, like me, being a patient banging the stone a couple of times over here cheese alright so once it has downloaded itself, then you go into your downloads folder.
Michael T Ganschow Green: And there will be, I can delete this one.
Michael T Ganschow Green: There will be a nice little let's go to the trash.
Michael T Ganschow Green: there'll be a nice little.
Michael T Ganschow Green: For whatever your computer prefers like MAC prefers to have its applications.
Michael T Ganschow Green: come in tars I think the PC side it's a zip file, then you can dump them you just Double Click and unzip it or a deep uncompressed it.
Michael T Ganschow Green: And it will open up and then there's the application right there and on a MAC you basically drag and drop this application into your applications folder now.
Michael T Ganschow Green: i'm not going to do that because i've already got a nice little files ella sitting right here in fact i've got several of them because keep downloading new versions whenever prompt me files ella seven is the latest.
Michael T Ganschow Green: Probably go clean that out, but if you don't have one on your MAC you drag and drop that to your applications and then fire it up just Double Click on it, and it will pop up looking pretty much not like you lie.
Michael T Ganschow Green: Oh, I closed it well that's that's that's a drag oh cuz I downloaded a thing oh yeah okay remember my good good good okay cool it was pounding because i've downloaded another one.
Michael T Ganschow Green: So it will come up pretty much naked like this and then all you gotta do is come up here and enter in hosting information.
Michael T Ganschow Green: So, yes that's how you get file zilla if you don't have it.
Michael T Ganschow Green: Be careful if it tries to download any.
Michael T Ganschow Green: Any other applications, none of it's bad it's just things like you know we're going to add a toolbar to your browser rumor yeah, no, no, so no no just tell it now now you only want the one so other questions.
Michael T Ganschow Green: All right, well why by file Villa.
Michael T Ganschow Green: Now that.
Michael T Ganschow Green: i've got files for fetch two fences and other ftp program but I don't think our I don't even have fetch on my computer our.
Michael T Ganschow Green: I don't think our labs have it either so let's not worry about fetch what I am going to worry about, though, is dreamweaver.
Michael T Ganschow Green: So if you're not comfortable downloading and installing an ftp application on your computer and I don't blame me if you're not.
Michael T Ganschow Green: there's nothing particularly challenging about them, but you know one less application bloating your thing that's fine dreamweaver has an ftp program built right into it it's actually built into the site root system and.
Michael T Ganschow Green: So, in order to use dreamweaver to do the ftp here's how you do that.
Michael T Ganschow Green: Or you got dreamweaver there yet dreamweaver so there's our class file let's go site manage sites, because i'm going to delete the site and rebuild it again why because site roots are important to know so i'm going to do this until well for the first several lectures anyway so.
Michael T Ganschow Green: i'm going to highlight my website here and i'm going to be like you know what Nan giant negative sign minus you can't undo deleting a site root you guys, oh no yes i'm aware.
Michael T Ganschow Green: goodbye and it's gone so now i'm going to create a new side and i'm gonna call this GR C 175 class demonstration site.
Michael T Ganschow Green: s T site we go three.
Michael T Ganschow Green: And i'm going to go find my root folder which is on my desktop some of you might have your root folder on a hard drive.
Michael T Ganschow Green: or in some other folder on your local blah blah blah it's all good so we're going to go find my root folder my case to my desktop yours might be wherever so i'm going to highlight GR C 175 click choose some already halfway done.
Michael T Ganschow Green: All right now.
Michael T Ganschow Green: i'm going to go to local info and i'm going to set my images folder so we're going to point this and an images folder right here.
Michael T Ganschow Green: And mash the delightful choose button and then lastly i'm going to go to jquery and i'm gonna click my little folder over here and we'll go find my scripts folder highlight that and mash the lovely choose.
Michael T Ganschow Green: So, from this point you guys are pretty familiar with site creation i've done this a few times now and we're gonna keep doing it.
Michael T Ganschow Green: doing it and doing it and doing it until you know it perfectly I want it to be autonomic like breathing or like.
Michael T Ganschow Green: How your digestion functions one to like Barry itself into the ID on your sense of smell we forget how to ride a bicycle and tie shoes, but dad government you're going to know how to how to do a root folder and dreamweaver so that websites won't break.
Michael T Ganschow Green: Alright, so we're going to save yeah yeah mainly it's already in one Wayne Wayne really i'm aware.
Michael T Ganschow Green: Okay, so that's pretty much standard root folder creation, so you go here and suddenly boom over here in the files menu all of our little guys and clicked up yada yada yada you guys have been through this a couple three four times now yeah.
Michael T Ganschow Green: But.
Michael T Ganschow Green: Now, just as you're like starting to get an idea of how to set up a root folder i'm going to add an additional layer of complexity, why because i'm a monster.
Michael T Ganschow Green: So not only if you want to ftp through dreamweaver do you have to hook it up to the local server this is that local file, which basically means the local the call on a local server What it means is just a folder on your computer but hey.
Michael T Ganschow Green: adobe's dramatic so we're going to manage sites were to hook our lovely little root folder up to a remote server.
Michael T Ganschow Green: Oh, so to do that, we have to Double Click on our existing site here, you can also do this by the way, what i'm about to do here, when you create the overall site route, so if you know where your server is you can throw that in for the site root and just get going um.
Michael T Ganschow Green: But if you're not sure.
Michael T Ganschow Green: Then, or if you're or, if you want to do, the first thing and then come back I got to do is Double Click on the name.
Michael T Ganschow Green: In manage sites and you can come in and Edit so my case i'm going to add a remote server to this root folder okay so questions on dreamweaver site roots why add a server it.
Michael T Ganschow Green: Alright let's add in a server so First things first i'm going to go down here and i'm going to grab the dream Weaver.
Michael T Ganschow Green: ftp information.
Michael T Ganschow Green: Well, it looks pretty similar doesn't it.
Michael T Ganschow Green: yep because that's because it is similar ftp software's all work pretty much on the same principles so.
Michael T Ganschow Green: Up GR C 175 dot net firms.com so let's add a server.
Michael T Ganschow Green: Now you'll notice, we have a list here.
Michael T Ganschow Green: When the plus sign, what does that mean well, that means is, you can have multiple servers attached to a site root, so if you're sending files two different servers or something like that and dreamweaver.
Michael T Ganschow Green: it's not most ftp programs have pretty much one server per site that you set up local site root.
Michael T Ganschow Green: In dreaming those cases, you can tennis servers what are you feeling that takes.
Michael T Ganschow Green: Like certain mail.
Michael T Ganschow Green: Alright, so in this case i'm going to answer.
Michael T Ganschow Green: That one right here, so I click the plus sign, so I go right here in the middle of my my site setup area here and I go poop and expect this plus sign.
Michael T Ganschow Green: Well now, here we go, we can start act at that, yes, you can start adding servers i'm losing my language it's been that kind of day you guys.
Michael T Ganschow Green: Alright, so we can have the server name and much like site names it doesn't really matter, so you can actually use capital letters and spaces, if you feel like it i'm going to call this class server.
Michael T Ganschow Green: Then we choose our connecting to the server we can use ftp secure ftp and all kinds of other connection protocols, in our case we're just going to use regular old ftp because we're not like slinging around like credit cards here.
Michael T Ganschow Green: So don't need anything terribly secure so for my ftp address, I am going to input, the ftp address from my lovely little PDF flyer job GR C 175 dot net firms.com G RC once in five.net firms.com and then for my username according to the flyer is GR C 175 dash student.
Michael T Ganschow Green: So here we go GR C 175 dash student.
Michael T Ganschow Green: And then, lastly, for my password we've got exclamation points spring 21 GR C 175 or you can be cheeky like the instructor and you can you know you know what i'm just going to copy all these characters.
Michael T Ganschow Green: and paste them in.
Michael T Ganschow Green: And one of the nice things that dreamweaver offers you down here is a test buttons mash test and dreamweaver will go and hunt through and look, and it will say like I found it, I found your server i've connected successfully yeah so we've connected successfully so.
Michael T Ganschow Green: How did I get here how did I make this actually once it's done here I click SAVE, how do I make this.
Michael T Ganschow Green: I click the plus sign right here and I input a server name at the top, now the server name does not necessarily have to.
Michael T Ganschow Green: agree with web naming conventions, you can put a capital and spaces in that thing because it's only for dream weavers purposes here's the class server sitting right here, for example, I told us connect via ftp then for the ftp address I entered FT GR C 175 dot net firms COM.
Michael T Ganschow Green: For the login I enter which dreamweaver calls username I entered GR C 175 dash student student is all lowercase.
Michael T Ganschow Green: And then, for the password.
Michael T Ganschow Green: I have to do an exclamation point spring with a capital S that's capital S lowercase PR I n G 21 at the numbers two one and then capital G capital R capital seed and then the numbers 175 and an exclamation point.
Michael T Ganschow Green: Or you can just copy paste it off the PDF like I did, then I clicked the test button the the.
Michael T Ganschow Green: dreamweaver went out and found server did a test connection to it and said yeah it all works, yes, yes, it does work so well you guys alright so and then and then, once you click OK there it flashes back to this guy any match the SAVE button that's how we did that.
Michael T Ganschow Green: So i'm gonna go ahead and save my route for yeah yeah yeah no way to route folders pointing at the same two routes pointing at the same root folder wham wham wham.
Michael T Ganschow Green: Cash now being recreated wham wham wham okay so it's got that all created so again questions on adding a server to your dream Weaver site route just another layer of complexity in dreamweaver site roots, just when you thought you were getting a handle on them i'm awful I know.
Michael T Ganschow Green: Alright cool I guess you're too scared you're tired to move sweet.
Michael T Ganschow Green: same again, yes, I know.
And done.
Michael T Ganschow Green: Okay well that's great no Michael but how do I actually put things up on the server well the observant among you may have noticed that my files palette has changed slightly.
Michael T Ganschow Green: I now have a set of buttons has appeared between the search area here and file information up here i've got a little plug i've got a couple of arrows i've got a little circle, with the arrows pointing and i've got this weird kind of.
Michael T Ganschow Green: Expanding Square.
Michael T Ganschow Green: This expanding square is very critical, so what i'm going to do so it's up here, if you look in your upper right of your dream lever it's up here.
Michael T Ganschow Green: i'm going to click on the expanding Square and suddenly my files menu.
Michael T Ganschow Green: or palette stops being a palette and turns into a pop up window because Bob and it pops up right in the middle to worry doesn't work if you don't make the sound.
Michael T Ganschow Green: I realized that i've been doing this whole thing I just realized it right now, without using that lecture zoom in feature poop.
Michael T Ganschow Green: i'm a bad instructor so what i'm gonna do is i'm going to zoom in in this middle here share screen Vance portion.
Michael T Ganschow Green: Share alright so where did it go where did my audio and my files vanished dreamweaver don't do this to me my fight, yes, there, it is high files all right let's surround this with loving love love love love love here with our little guy alright So what do we got here.
Michael T Ganschow Green: So this side over here is the local side you remember how files and I had local over here yeah dreamweaver sticks it over here, so this is basically just everything that is in the files palette that we have been.
Michael T Ganschow Green: kind of poking around in a little bit so far, the last couple of classes that over here, this is all of your remote information that is your server okay.
Michael T Ganschow Green: Now up here you've got a little plug and that's basically that plug is how you connect to the remote server and make your server files pop up over here.
Michael T Ganschow Green: You can also see the site ftp logs don't worry about that it's not your website you don't care about the ftp logs you can also i'm.
Michael T Ganschow Green: Using interface here to download files from the remote server or upload files into the.
Michael T Ganschow Green: into the remote server I prefer to use the drag and drop method myself, and you can also refresh both the local view and the remote view via this guy here now, if I click the collapse again, it will snap back.
Michael T Ganschow Green: It will snap back up here into the top right of my dream Weaver turning back into a files menu but that's not what we want, we want it to look like this, so that we can upload files OK, so now.
Michael T Ganschow Green: We are set and ready to start uploading files in dreamweaver we've tested our connection using the test button we've entered our server information correctly, so we have at least we have our our one server you can put more than one of you like in there.
Michael T Ganschow Green: we've got a root folder all set up, we set it up or excuse me, our site root all set up, we set it up for at least the third time, possibly more so let's hook up to the server learn to do that I come up here and I click on this little plug right there.
Michael T Ganschow Green: So now suddenly poof after some thinking we now have a big pile of files over here, look at all you people I tell you, looking back at each other, see.
Michael T Ganschow Green: it's like that Time Magazine where they published a mirror on the front of it because it couldn't tell who to make person of the year graduations the website looks back at you so.
Michael T Ganschow Green: If I want to add files to my folder here's me on come over here and I Double Click on my folder so it's selected.
Michael T Ganschow Green: And then I have to be really careful okay I don't particularly actually like the way dreamweaver does ftp I like the way file zilla doesn't much better we go into the server and you Double Click on the folder and you have the little like inside folder.
Michael T Ganschow Green: area there, we can drag and drop files into with dreamweaver you know, to take work in graphic you to grab whatever files, you want to upload my case it's working graphics file and drag it right over the top of my name.
Michael T Ganschow Green: And then, it says okay i'm going to show you the activity good.
Michael T Ganschow Green: Now you have to be very careful, because if you miss here when this thing is running i'm going to drag it again i'm going to will just have actually it's working right now, so I can't drag it again well once it's done dreamweaver is also a little slower than.
Michael T Ganschow Green: Then files as well.
Michael T Ganschow Green: But if you miss it will drop the file into a neighboring students folder here so hello, we just hang up I get to frisky and get you hanging up.
Michael T Ganschow Green: Okay, so oops not in what you want your dream Weaver.
Michael T Ganschow Green: yeah I think I might have hung up we'll see here now there goes is just thinking of it just kind of straining there to get the.
Michael T Ganschow Green: To get the zip file through So here we go we'll see when the zip POPs in um yeah So if you miss your files we get dumped into one of your neighboring students folders I do not like that.
Michael T Ganschow Green: That ftp methodology one bit of their code now it's in So if I miss, for example, and I take work and graphics and I go oh spaghetti o's and drop it right into olivia's folder.
Michael T Ganschow Green: loops now i'm uploading a file into her folder and so that can create problems, you can override each other's files and all of that, so I recommend going to getting file zilla or another ftp program there's several good ones for each platform.
Michael T Ganschow Green: windows has cute ftp is another very good one os X MAC os has cyber duck, which is a very good ftp program as well there, there are quite a number of them out there.
Michael T Ganschow Green: But so if you've got another one don't worry about it, you don't have to go get files or have to use dreamweaver if you've already got one on your computer feel free to use whatever you're comfortable with.
Michael T Ganschow Green: It doesn't matter, really, but if you don't want to go get files zilla you're basically stuck ftp and with dreamweaver using this kind of precisely targeted kind of slightly.
Michael T Ganschow Green: there's less margin for error here, in my opinion than there is in file zilla so while this is transferring here i'll take a second and ask do we have any questions sorry I polluted your student folder olivia i'm going to delete that one second.
Michael T Ganschow Green: All right, so deleting a folder.
Michael T Ganschow Green: or deleting an object I don't folder a file whatever.
Michael T Ganschow Green: So normally do do delete something one of these guys.
Michael T Ganschow Green: You highlight it dreamweaver.
Michael T Ganschow Green: And then control click on it okay now dreamweaver hides it's delete instead of having it be in the pop up menu here it is under this edit fly out menu.
Michael T Ganschow Green: We do cuts and copies and can paste in files, you can duplicate files, you can rename files, but the one we're most concerned about is delete right here will say.
Michael T Ganschow Green: Are you sure, and I say yes i'm sure and boom it just cleaned out olivia's folder So there you go again sorry about messing up the carpet.
Michael T Ganschow Green: So um.
Michael T Ganschow Green: Do delete files you basically just highlight them i'm going to clean mine out to why not let's remove the scourge of working graphics.
Michael T Ganschow Green: So I right click on it or control click if you're stuck with a single button mouse on some next and where you pull a person, and then you go down 1234 down to the edit fly that menu out and halfway down that edit menu is delete it says you sure.
Michael T Ganschow Green: i'm sure.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: That is how you put files up.
Michael T Ganschow Green: So.
Michael T Ganschow Green: I will be doing a duplicate of this lecture at the beginning of next class because next class is basically an open lab.
Michael T Ganschow Green: For you guys to ask me all sorts of questions and I will hopefully give you answers or go over things or whatever clarification you need for the project so next class will be open lab and i'll be duplicating this little bit in front of it.
Michael T Ganschow Green: So um any questions on anything other than ftp you got project questions or anything like that.
Michael T Ganschow Green: Should we jump into our.
Michael T Ganschow Green: Our website.
kianabohm: So for project one upload we're only uploading the working graphics folder.
kianabohm: me and the rest is in the forum.
Michael T Ganschow Green: Correct so basically the.
Michael T Ganschow Green: Post your final design in computer and mobile format.
Michael T Ganschow Green: Along with your to information will links up on the forum and then all of your preliminary work basically goes in your work and graphics folder along with all your digital files, this is all the stuff you'd hand in in the Manila envelope if this were a real physical class.
Michael T Ganschow Green: And then that goes into work and graphics folder on the server it's a little earlier typically than I have you guys doing ftp but I figured this was the easiest way with the tools available to get the files from you guys.
Michael T Ganschow Green: let's get to some practice where you're not going to blow a site up if you mess this up.
kianabohm: And do our photoshop files go in, where he can graphics to.
Michael T Ganschow Green: That is correct.
kianabohm: That is correct.
Michael T Ganschow Green: All of your digital files, if you built it in photoshop it goes in there, if you built an illustrator because in there to built in indesign whatever you built it in pick your poison.
Michael T Ganschow Green: Other questions.
Michael T Ganschow Green: cool all right well since we're here in dreamweaver already let's start messing.
Michael T Ganschow Green: With our I saw thing.
Michael T Ganschow Green: um well, you can well it's not just with file silla Kathy.
Michael T Ganschow Green: By uploading anything to the server I can see what you've uploaded so what i'm going to do is basically when this is due on Friday and you guys go in and you upload your work and graphics folders and then and then you'll have a week to critique each other's projects, once you.
Michael T Ganschow Green: Once you.
Michael T Ganschow Green: turn in everything that I will go in and I will check to see who's who has uploaded their their files on the on the site, and I will use that for grading, so this is essentially the.
Michael T Ganschow Green: Essentially, showing me your research showing me your work and you're working graphics folder along with having all of your all of your.
Michael T Ganschow Green: All of your.
Michael T Ganschow Green: native digital files that you use to make things So yes, by uploading it to my server i'll be able to get your files and give you a preliminary work great.
Michael T Ganschow Green: If this were a physical graphics class usually what we do is we, we have folks turned in a Manila envelope with their name on it basically.
Michael T Ganschow Green: But since I can't see you guys physically something about all of us, suddenly dying we're we're we're restricted to being in our little digital pots here.
Michael T Ganschow Green: Are the questions that's a good one.
Michael T Ganschow Green: yeah i'll be able to see everybody's files that you upload.
Michael T Ganschow Green: So you can turn them in properly.
that's a good one.
Heather Amistani: So for the working graphics folder.
Heather Amistani: You have to put both cuz we had to upload to preliminary critiques.
Heather Amistani: Do we only have one of those networks and graphics.
Heather Amistani: folder now, or will we be putting both of them.
Michael T Ganschow Green: No, no, no, the.
Heather Amistani: Whichever one doesn't get picked.
Michael T Ganschow Green: throw or whichever one you don't.
Michael T Ganschow Green: You didn't pick throw it in there, anyway, as well because technically the preliminary critique is part of the preliminary work, so you can throw that one in the working graphics, the only thing we're the only whichever one you the one you picked.
Michael T Ganschow Green: goes up on the server and then the original files used to make that are in the work and graphics like ups, these are your illustrators or whatever, and the other one should go in there, too, since you probably still got it.
Heather Amistani: Thank you.
Michael T Ganschow Green: No problem.
Michael T Ganschow Green: Q amp a session good good feedback here.
Michael T Ganschow Green: So i'm feeling like blowing up that nice little pink website, we made already because we really can with CSS Oh, we really can the CSS this is this is good times so.
Michael T Ganschow Green: I think we should, because we can, I think we should so in order to start blowing this up, let me return my.
Michael T Ganschow Green: files thing to a proper state here so first of all i'm going to click on the plug to disconnect from the server by server and then i'm going to click my little.
Michael T Ganschow Green: expand or contract or here so that my files go back here and then i'm going to stop screen sharing and go back to the main screen share will be bouncing back and forth once again between the overall screen share and the separate screen shares, which is always one.
Michael T Ganschow Green: That i've got everything here and ready to rock so i'm going to open up my index dot html Hello there index dot html.
Michael T Ganschow Green: preview you in a browser will start with chrome work out from there hey look at that it is pretty dang pink.
Michael T Ganschow Green: Now you guys selected a bunch of colors the end of class last time, so what i'm going to do is i'm going to go into the class recordings for last class and i'm going to grab the chat transcript where you guys started.
Michael T Ganschow Green: Putting in colors so let's see we have the purple which we got there we got some sky blue we got some barney purple we got some cream sickle we got some tinkerbell green.
Michael T Ganschow Green: We got a little bit of elmo read and some big bird yellow all of the names of these colors, by the way, so we're gonna we're gonna start using some of these other colors here on our terrible website so for those who weren't there.
Michael T Ganschow Green: Sorry, you weren't there for color picking now you get to live with everybody's choices, but fortunately there's a.
Michael T Ganschow Green: A chat log So you can see, who suggested what so for particularly odious color was suggested, you can you can you can yell at them it's very nice very, very democratic that way so.
Michael T Ganschow Green: let's go in and let's start messing around, so what i'm going to do first is i'm going to hide everything so we're basically stuck with our background color again because I want to put a gradient in here.
Michael T Ganschow Green: So I can show you guys how to put in a gradient so let's do this so let's start hiding things so i'm going up to our header the and we're going to comment these guys out so i'm using a comment tags which For those of you.
Michael T Ganschow Green: Who are either of you have not seen the other classes, yet or are fresh in or whatever, a comment tag is a bracket an exclamation point in a dash dash.
Michael T Ganschow Green: And then it's finished by a dash dash and a bracket i've already got closed and one here on my comment tags that i'm using to label my various tags so i'm just adding a opening.
Michael T Ganschow Green: bracket right here to hide everything bracket exclamation point dash dash boop that hides that.
Michael T Ganschow Green: Then we're going to go.
Michael T Ganschow Green: bracket exclamation point dash dash to the Bu.
Michael T Ganschow Green: And now everything's hidden and it should just be where's my where's my there it is, it should just be a pink blob and it is in fact a beautiful pink blob.
Michael T Ganschow Green: So I think this background, right here this lovely it's not really pink it's kind of meeting it's kind of a pale purple I think this pale purple background here.
Michael T Ganschow Green: it's going to need a gradient now, we have all sorts of terrible color examples here, I could, if I was feeling it properly calorie I could.
Michael T Ganschow Green: Make it go to like barney purple or even a sky blue, which I think it look good.
Michael T Ganschow Green: I don't think so, I think, I think, maybe we'll make it go a nice cream sickles so let's see let's get some good color references for a cream sickle color.
Michael T Ganschow Green: let's see here alright so we're talking like kind of a yellow orange that actually might look good with the purple let's do let's do a gradient from that pale purple to crean sickle.
Michael T Ganschow Green: So selected cream sickle here that's an olivia suggest and our livia here comes your cream seco gradient enjoy so.
Michael T Ganschow Green: Talk talked a little i've shown you a little bit of the CSS designer area so we're going to zoom in and hit the zoom.
Michael T Ganschow Green: zoom zoom zoom zoom zoom in zoom so you can zoom while you zoom so I can come over here and we are going to get into the CSS designer menu Doo Doo Doo Doo Doo Doo Doo Doo Doo Doo Doo Doo a shrink that down ooh alright so she has this designer me.
Michael T Ganschow Green: master CSS with a with a body tag on it there goes so i'm going to body tag style now remember my remember selectors last time.
Michael T Ganschow Green: So from the selector lecture we have one selector in our cascading style sheet and it is a tag selector and I can tell that because it's got nothing in front of the.
Michael T Ganschow Green: Of the selector if there was something in front of the selector that means it's a different type of CSS rule, but in this case, this little style right here, this is a tag style styling my body tag.
Michael T Ganschow Green: In this case, it's put into making the font white and a nice gotham saying Sarah and whatever the default colors are, and then a background color of this lovely kind of.
Michael T Ganschow Green: Like a purple but it's got a little pinky magenta mixed in.
Michael T Ganschow Green: And we achieve that by a couple of a couple of things we came down here we clicked so in our CSS designer here i'm looking at i'm telling you guys, I was gesturing over guys.
Michael T Ganschow Green: guys guys i'm sorry I was just going over here at the code and I realized, while you guys can see.
Michael T Ganschow Green: My CSS designer palette say hang on a second, so what I was mentioning when I said a like all we got is the one selector here a body.
Michael T Ganschow Green: And the reason why I know that it's a tag selector is because there's nothing in front of this body and then we're making the background color this lovely kind of pinky purple our type is white and the font family is a nice sancerre of gotham so.
Michael T Ganschow Green: That being said, let's come back here to this thing.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: I think, ladies and gentlemen, it's gradient time.
Michael T Ganschow Green: There we go gradient so I can click around through my properties here, and if I click on the last one that will take me down to my background color so my background color is I need a gradient for my background, and I think I do oh yeah I think I do so.
Michael T Ganschow Green: i'm going to go and i'm going to make a gradient so to do that I click on my lovely little gradient selector right here, this brings up.
Michael T Ganschow Green: Open this up a little bit, oh no, no, no, no, no, no, no, no, we need to expand hey.
Michael T Ganschow Green: hey i'm don't want to move the whole box, I want to move the corner, so they can see my gradient tool Thank you hope we're going to kick it out a little more than fine.
Michael T Ganschow Green: we're going to kick it out a little more Okay, so this gives us this lovely gradient palette that we have here now.
Michael T Ganschow Green: This works like a gradient palette in any other software, except that the unlike a lot of adobe software, so you have the gradient flat dreamweaver has it on its side.
Michael T Ganschow Green: So this little house right here is one color or one into the gradient and this little house right here is another color or another end of the gradient okay.
Michael T Ganschow Green: So I think i'll turn this red i'll take my eyedropper tool, right here, and I will come down and click right in the middle of my body here to make it Nice and purple okay.
Michael T Ganschow Green: So I can make it Nice and purple I can also darken or lighten the purple as needed with that slider there.
Michael T Ganschow Green: Or, I can change the hue which we're going to in a second I can also make that transparent, yes, you can radiate to transparency because rgb is a miracle, and we should all celebrate it.
Michael T Ganschow Green: You can make a color go from a color to a transparency all generated in a browser, by the way, you're welcome so.
Michael T Ganschow Green: But i'm not going to do that, I want 100% want to fall, I want the full shining majesty of my purple and in lieu of white because purple white is so lame you guys.
Michael T Ganschow Green: i'm going to go purple to cream sickle so let's go it's kind of a yellowish orange so we're gonna need a little orange in that.
Michael T Ganschow Green: Little more orange than that, like so that's a little butterscotch yellow further down orange orange orange you like, to be yeah we go there, we go that's a good cream second there we go.
Michael T Ganschow Green: alrighty then there we go cream second okay so here oops I clicked off of it to go.
Michael T Ganschow Green: check the chat and see if anyone asked questions and ran away with my gradient, so there is hey pop that he wants you to pop further open, thank you, I chose my gradient right here at already exists it's our background technically.
Michael T Ganschow Green: And it goes from purple to cream circle, and as soon as you click off of it.
Michael T Ganschow Green: It closes up and it makes a gradient.
Michael T Ganschow Green: So once I got that cream second set and I got my rg it's already set to rgb a because I said everything to rgb a in my dream.
Michael T Ganschow Green: Then all you got to do is either hit return or click off of it, and it will create your gradient.
Michael T Ganschow Green: Now for those that have been watching their code if you're building this at home or watching me here, you will notice suddenly you know what Why do I have this whole big like this hang on one second.
Michael T Ganschow Green: will notice some hey clicking down here going to drag it smaller Thank you you'll notice suddenly that your CSS has sprouted some big long selectors here background dashing image colon linear gradient.
Michael T Ganschow Green: And then, has a direction, and then it has one rgb color and then another rgb a color Okay, this is the actual code used for a gradient and because.
Michael T Ganschow Green: browsers are not quite ironed out using background images a gradient we actually have to specifically call out some browsers that to this dash webkit dash most.
Michael T Ganschow Green: And dance show that's calling out webkit browser is that is a chrome and microsoft's new browser his name just flew right out of my head Moses mozilla firefox and oh is opera another browser.
Michael T Ganschow Green: So with that said i'm going to go file save just like that alright, so now let's let's check this out in a in a browser.
Michael T Ganschow Green: Oh snap dog it's not being a big gradient it's a whole bunch of lines, oh no, no, no, no what's going on, oh no well what's happening here is a little.
Michael T Ganschow Green: A little.
Michael T Ganschow Green: A little background image issue that you run into so what's happening is it's filling the gradient in all across the body tag right.
Michael T Ganschow Green: Well, the body tag has no defined height or anything like that, so what happens is it fills in the gradient.
Michael T Ganschow Green: And then, once it reaches the end of the body tag or reaches the bottom of the body tag it just starts tiling like any other background image, so we have to do a couple of things here to keep this to keep it from tiling so.
Michael T Ganschow Green: dreamweaver, we have to do a couple of months in here in background over here so we're going to go to stop screen share and zoom back in again Doo Doo Doo Doo Doo Doo Doo Doo Doo Doo Doo Doo share.
Michael T Ganschow Green: over here.
Michael T Ganschow Green: All right, so.
Michael T Ganschow Green: By the way, if you guys are having any issue with the zooming in that i'm doing, let me know if you want me to go back to teaching.
Michael T Ganschow Green: Everything at a maximally kind of zoomed out regular screen, please, please feel free to let me know i've been trying to zoom in so that you can see more detail on my screen, as I go through these things.
Michael T Ganschow Green: All right, so.
Michael T Ganschow Green: Let me do a couple of things here to our background image so got some background image modifications, here we discussed them last last class of class before last class I believe it's the background position is where you say you can move a background image around on the.
Michael T Ganschow Green: On the.
Michael T Ganschow Green: Basically, wherever the the the within the object and contains the background image, up to and including your body tag background size, you can set your image, so that it will.
Michael T Ganschow Green: It will you can you can resize it one way or another, or you can set it so it fills in the full browser window.
Michael T Ganschow Green: background clip again don't worry about that guy background repeat, we can set if the background image repeats.
Michael T Ganschow Green: background or agenda again don't worry too much about him and then background attachment where we can set if the background will scroll.
Michael T Ganschow Green: Or that is the background will move when you scroll the website up or down was that the background will stay fixed in its location and everything will scroll over the top of it in order to make this gradient work, we have to come down here to background attachment and set it for fixed.
Michael T Ganschow Green: And you can see over here in my CSS i've suddenly gotten a new property and value of background attachment fixed Okay, so if I go save with that fixed all stuff and open this up suddenly.
Michael T Ganschow Green: We have a beautiful, let me, let me here hang on bathing this full Majesty one second we're gonna go back to the main desktop.
Michael T Ganschow Green: Look at that it's like a nice beautiful like China beach style sunset so.
Michael T Ganschow Green: Was it olivia suggested that yes, good on you olivia for suggesting cream circle as a background color So yes, we now have a very nice just top to bottom sunset.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: let's modern gradient a little bit So yes, so the the secret sauce to that whenever you're doing gradients and you have this happen.
Michael T Ganschow Green: Is you have to set the background attachment to fixed if it's like for a full body tag they work a little better on in discreetly sized objects objects that have a width and height.
Michael T Ganschow Green: you'd might not necessarily have to do this with those factors should work okay most objects, but because the body tag functionally doesn't it's just whatever the browser window is.
Michael T Ganschow Green: Then, then we have to be.
Michael T Ganschow Green: Then you have to basically fix it in place.
Michael T Ganschow Green: Yes, it's just so alright so let's do one more gradient modding shall we.
Michael T Ganschow Green: So we allow open the gradient tool back up again, let me zoom back in boop boop boop boop zoom backing.
Michael T Ganschow Green: One of these days i'm going to see if zoom has keyboard commands to do this so i'm not constantly having bounced in and out of one another and get you guys all see sick.
Michael T Ganschow Green: With what we're doing here so let's kick this out a little bit so we get the full gradient of friends want to wonder makes the.
Michael T Ganschow Green: Dolby sound.
Michael T Ganschow Green: We open it up alright so other things we can do with this gradient our opening up Thank you so.
Michael T Ganschow Green: Right now, the gradient runs from the top, to the bottom it's what's called a 180 degree gradient Okay, that means that it starts at the top and rolls to the bottom, however up here we have a little compass, we can move around, so I can take this little compass, and I can turn it anywhere.
Michael T Ganschow Green: That I want, then this will turn the gradient on its side or from a corner or whatever, so, for example, if I set this thing to 360 degrees and, by the way.
Michael T Ganschow Green: You can, if you if you don't want to use this one, you can simply Double Click on the degree thing and punch in the number you want, but is much more fun to use a little circle doesn't work for you to make the sound, by the way.
Michael T Ganschow Green: Are to now bring this in from the corner 308 degree gradient I hit return.
Michael T Ganschow Green: I go file save all.
Michael T Ganschow Green: Something gets saved and then.
Basic.
Michael T Ganschow Green: share.
Michael T Ganschow Green: Then we're going to go check it out now look at that the gradient is running diagonally now looks really nice.
Michael T Ganschow Green: So.
Michael T Ganschow Green: That little that little run around circle right did this little guy right here, we open up your grading thing go.
Michael T Ganschow Green: Just kind of done work to make noise room you just change the direction and then you got to save this thing you can change the direction that your gradient comes from boom, I want to go back to the top corner, though, because I like that better.
Michael T Ganschow Green: gimme.
Michael T Ganschow Green: 300 you know i'm gonna go back to good old fashioned 308 degrees, why not.
Michael T Ganschow Green: Bam.
Michael T Ganschow Green: All yeah diagonal 308 degree gradient background action.
Michael T Ganschow Green: Beautiful excellent.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: So set a gradient and we set the background attachment to fixed look at all the code generated.
Michael T Ganschow Green: Why did it generate that much code for gradient wow dream weavers got to cover all of its basis and browsers are still not 1,000% sure how you should write a gradient so you have to basically grab them and say hey hey hey hey.
Michael T Ganschow Green: hey.
Michael T Ganschow Green: work.
Michael T Ganschow Green: questions.
Michael T Ganschow Green: you're making gradients Now I know.
Michael T Ganschow Green: You got your dream weavers open furiously making gradients how many colors can I add oh that's a good question.
Michael T Ganschow Green: Here here gradient colors I just asked a question to myself how many colors can I add so right now.
Michael T Ganschow Green: My lovely background radiant is a two color gradient What if I want to add more colors What if I want to come in here and I want to say and what's the next what's another color out of that pile.
Michael T Ganschow Green: Of I want to add what do we got here sky blue barney purple tinkerbell big bird yellow so let's say I want to add a bright pink and yellow right in the middle of my gradient.
Michael T Ganschow Green: just cause cuz I want to ruin the look of it, I want everyone to to to rue the day that I decided to do this well.
Michael T Ganschow Green: Next to the gradient right here, I got to do is see where these to see where the two houses are right here and I click in the middle and then you can add another color like say big bird yellow.
Michael T Ganschow Green: How about a big bird yellow everyone I think that's suitably big and bird and yellow when he returned save.
Michael T Ganschow Green: Oh yeah look at that look at that look at that that color is so big bird you're going to have to explain Mister Mister hooper's depth to your gradient here, look at all of that.
Michael T Ganschow Green: All right, so what do we got here, we got a chat somebody's pocket, but yet what if I want to add a pattern from I got.
Michael T Ganschow Green: Oh yeah no olivia we're getting there we're getting there, that is a background image, so you know what.
Michael T Ganschow Green: You know what olivia has got some ideas here should we put should we put a background image in here and mess, with it, I think we should.
Michael T Ganschow Green: I think we should so in order to do that i'm going to have to make my gradient go away, but I don't want to delete the gradient guys I think it's pretty so in so i'm going to hang on to that gradient and we may see it again for other nefarious purposes, so what am I going to do well.
Michael T Ganschow Green: I don't think i've shown you guys a C s s comment tag yet have so you guys know how to do commentary and html right bracket exclamation point dash dash write your comment dash bracket can.
Michael T Ganschow Green: CSS is a little different with its with its comment tags So here we go, so let me, let me zoom you guys in here we go no stops here we're going to go share screen advanced portion of screen share.
Thank you.
Michael T Ganschow Green: I so i've got this lovely little piece of C s s right here what I want to do is, I want to make sure i'll come on tiger.
Michael T Ganschow Green: What I want to do is, I want to make sure that these gradients right here, we don't lose them because they're a masterpiece you guys, especially before the big bird yellow one in the middle and I want to keep them okay.
Michael T Ganschow Green: So let me show you how to write a CSS comment OK.
Michael T Ganschow Green: So i'm going to click here in my CSS at the end of my semi colon right here, which is, at the end of my font family you guys can click after any other one of the Rules, if you want.
Michael T Ganschow Green: And i'm going to i'm going to do a hard return, so I get a fresh line here, and I can start writing CSS comments okay.
Michael T Ganschow Green: So, in order to write a CSS comment you go forward slash star does everything great out as soon as I did a forward slash star much like as soon as I do, a bracket exclamation point dash dash everything grades out.
Michael T Ganschow Green: This.
Michael T Ganschow Green: Is a CSS comment.
Michael T Ganschow Green: Okay now how do I close it.
Michael T Ganschow Green: Easy peasy star forward slash.
Michael T Ganschow Green: My backgrounds to suddenly come back in.
Michael T Ganschow Green: So what are we doing.
Michael T Ganschow Green: I am commenting.
Michael T Ganschow Green: out these backgrounds.
Michael T Ganschow Green: So we can shove in.
Michael T Ganschow Green: A background image.
Michael T Ganschow Green: And i'm come right here to my last of by gradients here.
Michael T Ganschow Green: star forward slash boom my background attachment came back online.
Michael T Ganschow Green: And you know what up until days around my comment, so I can see boop right where that is look at that with some beautiful beautiful till day So what have we done well.
Michael T Ganschow Green: We did not delete our we did not delete our gradients and what we've done is we've commented them out, and this is a very common debugging measure.
Michael T Ganschow Green: That you guys can do yourselves in both CSS and html if you've got some code that's being kind of weird you can start commenting out chunks of it and see where the breakage is or, if you have something you want to preserve.
Michael T Ganschow Green: Like these guys, you can you can comment them out now what if I don't want them cluttering up the middle of my body tag here, what if I want to keep them in my CSS, but I just don't want them in the way Well, this is easy easy peasy all you gotta do.
Michael T Ganschow Green: Is highlight what you want to move and go edit.
Michael T Ganschow Green: cut or command X control X on a PC and then it can come down and paste those rules elsewhere.
Michael T Ganschow Green: it's going to paste those properties and values elsewhere outside of your main CSS rule, so now i've just got to stray properties floating around that I can always go and get when I need to and copy paste into.
Michael T Ganschow Green: Anything I want to apply our delightful little sherbet big bird purposely gradient to whenever we feel like okay.
Michael T Ganschow Green: So questions on CSS commenting you can use it for the same comment stuff that you're used to.
Michael T Ganschow Green: Writing notes to yourself and things like that, and the color that I highlighted the gradient and it showed a little picture.
Michael T Ganschow Green: You can use it, you can use it for writing notes to yourself, you can also use it for clipping out.
Michael T Ganschow Green: recalcitrant pieces of code without deleting it come very handy so again, it is star, it is forward slash star comment.
Michael T Ganschow Green: And then star forward slash bang, just like that in the chat bang bang.
Michael T Ganschow Green: So that is a CSS comment, so now we've commented out the gradient I even copied and pasted cut and pasted it out of the style so now, when I save everything file save all I go to my browser my browser.
Michael T Ganschow Green: it's it's only purple you guys we returned to our base purple color took it away Oh yes, we did the gradient has gone, but not gone forever it's just on vacation.
Michael T Ganschow Green: alright.
kianabohm: So.
I have a question my goal.
kianabohm: and none of my like background colors or.
kianabohm: gradients and stuff are showing up when I preview it is that because I don't really have any source code built yet.
Michael T Ganschow Green: Well i'm not sure, because I can't see your file so hang on a minute.
Michael T Ganschow Green: Let me do a make sure you've done a sable and saved both your html and your CSS one second what i'm gonna do.
Michael T Ganschow Green: Is i'm going to stop screen sharing here kiana and, if you would like to you can share your screen there's a little green button down at the bottom of zoom here.
Michael T Ganschow Green: That says share screen and and and with me not sharing, you should be able to so let's see your code here and we'll see if we can fix it.
kianabohm: Okay.
kianabohm: yeah this.
Michael T Ganschow Green: screen sharing okay so let's see you've got a.
Michael T Ganschow Green: let's see so you've got your html had your Meta you've got a so right now that, so you don't have a like a site root set because you see how that the link to your style sheet is file.
Michael T Ganschow Green: colon triple slash in the that is pointing and that's a what's called a static link so So if you put this file on line that link will break.
Michael T Ganschow Green: So so looks like this is a you don't have a site root set or you didn't have one when you made that link so that may be part of your trouble let's see your CSS here.
Michael T Ganschow Green: That looks fit background color that looks good color it looks good okay so go to file save all on these guys and save them all.
Michael T Ganschow Green: Okay, and then hover over your background color real quick, so I can see what it is because dreamweaver a pop up.
Michael T Ganschow Green: Over just over the top of the rgb, as you can see we're looking for here okay so it's a purple cool cool cool all right now I go and preview this guy in a browser here I think it's the static link to your CSS that's causing it to be a little weird.
Michael T Ganschow Green: let's go yeah okay so Shaun white and yeah okay so um I believe what's wrong is that the CSS file is not quite linked to your website so is your.
Michael T Ganschow Green: CSS file in the same root folder as your as this html.
kianabohm: i'm Probably not.
Michael T Ganschow Green: That well, that would that would explain it then so what's happening is your CSS file is is breaking, so this is this X website dash or X dash website dash to html you have it should be.
Michael T Ganschow Green: It should be loose leaf, and then, in whatever folder that contains it there should also be a little folder called CSS that has your master CSS and living in it.
Michael T Ganschow Green: because, basically, what that what's happening here is this is what's called a static link and you hear about these in web tutorials and and and what causes them typically is that.
Michael T Ganschow Green: Either the site root has broken in whatever program is being used to make it where there was not one setup so that's usually where the files are located in different folders.
kianabohm: So I didn't like try to link like an external CSS file I just built it like I just built a new one in here so i'm not sure if I understand like where that would be like when you're setting up.
Michael T Ganschow Green: Okay, so when you create it.
Michael T Ganschow Green: This should be in a folder called CSS click back on your master source code let's see where it is exactly because really was trying to link to it.
Michael T Ganschow Green: So it's in a project 01 root folder in a folder called CSS um can you minimize your dream Weaver and show me that project 01 folder see what's in there.
Michael T Ganschow Green: Oh good keep yourself on a drive good good okay so let's see there's project 01 there it is.
Michael T Ganschow Green: So I don't see your html in there, so let's so let's try something real quick okay go back to your ex website to html and dreamweaver here.
Michael T Ganschow Green: What I wanted to do is do a quick file save as.
Michael T Ganschow Green: we're going to stuff it in that folder so go to your project to see you've got an example 01 here an example website route here so you've got your CSS file any project 01 in two different folders so.
Michael T Ganschow Green: So so depending on here's what we can do, whichever way you want to do it, we can either move your html into your project 01 thing or we can move the CSS out here to your example website route which way, do you want to go.
kianabohm: and
kianabohm: Which 1am I closer to doing right now.
Michael T Ganschow Green: um well it's six of one half dozen have another at this stage let's move your CSS into the example website route, so I didn't hit cancel on this one.
Michael T Ganschow Green: And let's go back to the your desktop and grab that folder where we were.
Michael T Ganschow Green: OK cool, so what we're going to do here is we're going to go to go into your CSS folder in your project 01 root folder here.
Michael T Ganschow Green: All right now either right or control click I don't know if you've got what kind of mouse, you have but.
Michael T Ganschow Green: You can right click or control click on that master CSS alright cool go ahead and click copy master CSS it's about two thirds of the way down on that flight menu right there.
Michael T Ganschow Green: You go and then now we're going to back up the folder chain, a little bit so click back to the folder that's holding the project 01 root folder cool now click example website Ruth.
Michael T Ganschow Green: don't worry about it.
Michael T Ganschow Green: All right now click in Double Click on your CSS folder right there.
Michael T Ganschow Green: And right click or control click in there and paste item there you go so that should paste in your CSS there it goes paste it right in now, we can click back in your html we're going to fix your link real quick.
Michael T Ganschow Green: So um so basically every so delete everything before the forward slash CSS back to the quotation mark basically so file colon triple slash kiki school web design project 01 projects here one root folder pull all of that out.
kianabohm: We.
Michael T Ganschow Green: don't need basically.
Michael T Ganschow Green: yeah basically all the way back to the coating yep.
Michael T Ganschow Green: Now delete the file as well go on the go to the file colon take that out as well now add a quote.
Michael T Ganschow Green: Oh it's true isn't it adorable look at it all okay.
Michael T Ganschow Green: Any help, so what we're gonna do we're let it help here so first of all click the two or it's got that little drop down menu there click CSS slash trying to find it in your route, this is this is so cute dreamweaver you're so adorable is your master CSS click on that.
Michael T Ganschow Green: So okay now see you have a straight like CSS manager CSS quote after that history out.
Michael T Ganschow Green: i'm going to being adorable and helping you.
Michael T Ganschow Green: Bring we were considered to be a little too helpful if you know what I mean all right now go ahead and do a file save all.
Michael T Ganschow Green: All right, let's see let's know assessing in a browser and let's see if it's hooked up properly.
kianabohm: Hot.
Michael T Ganschow Green: Air is haha so that was so that's a that's actually a pretty good DEMO there because.
Michael T Ganschow Green: it's better to the learn final organization now, then when you have a big complex website and a single broken link, I promise you, so this is this is, this is a really good time to learn those things.
Michael T Ganschow Green: Because Michael Michael is a self taught web designer.
Michael T Ganschow Green: So, Michael I had to learn proper final organization during a client presentation someday when i'm.
Michael T Ganschow Green: Completely inebriated and teaching one of these classes, I will not fit into a story that's a whole whole kettle of fish so better that better that you learn it in a classroom environment, then when you have an angry customer let's just put it that way.
Michael T Ganschow Green: So that's good we got it fixed excellent excellent excellent okay cool yeah let's go back to or main here, so we commented out where you went when we left off, where did we leave our hero, we had commented out and cut and pasted out our.
Michael T Ganschow Green: Our gradient here so that we could add in a background image because i've.
Michael T Ganschow Green: been requested to put in a background image so i'm a man of my word I have a duck in my image folder so what we're going to do is we're going to shove, a whole bunch of ducks in the background i'm sure that's exactly what you know, everybody like to see so we're going to do that.
Michael T Ganschow Green: we're gonna we're gonna get some ducks going on here, so do do do do let's go body.
Michael T Ganschow Green: And oh whoa hang on hang on hang on Michael we need the zoom dn one looking you look at you look at you look at you, Michael, we need to do the advanced portion of screen zoom in so you people can actually see what the heck i'm doing instead of squint and my full screen resolution screen.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: Let me know, by the way, if this helps my using zoom to zoom in zoom zoom zoom zoom the see things a little easier if not I can teach it just full screen as well.
Michael T Ganschow Green: So let's go to background boop instead of scrolling will just click on here.
Michael T Ganschow Green: So we have a couple of different things, so we already, we had to use their gradient here so notice see this is the background image property right buddy is the gradient here got a background attachment fixed set you know.
Michael T Ganschow Green: i'm going to throw out my background attachment fixed now I could come up here into my file highlight and deleted, but i'll show you the dream Weaver way to do it to take out fixed well adding back in and a bit don't worry it's not going well, that would be back soon.
Michael T Ganschow Green: You can click the little garbage can what's the already existing.
Michael T Ganschow Green: properties and if you click the garbage can delete them they're gone.
Michael T Ganschow Green: So now let's put in a background in the chat, why not.
Michael T Ganschow Green: So, in order to put a background image I come down here to my background image property right here and I go to URL.
Michael T Ganschow Green: And I could manually type in a file path by wanted, but we're using dreamweaver for reason here let's use some of the helpful things like what we saw with kiana where it was where was forced linking her CSS right there.
Michael T Ganschow Green: So let us, let us use it helpful thing we're going to pop this little folder open now, what is this little folder done when I clicked it you guys didn't see but I saw what it's done is it has.
Michael T Ganschow Green: popped up in my images filter in a nice little fly out menu, so I can click my ducky high ducky when I can click open.
Michael T Ganschow Green: or yeah i'm down, we have just the most horrifying background ever I go file save all the STOP share we got it we gotta we gotta take this on the big screen here, so we can do this, here we go let's give me some share action here alright so so now let's do a file sable and.
Michael T Ganschow Green: Oh, look at that.
Michael T Ganschow Green: So you were asking for a pattern, yes, well, there is a pattern look at that action, so a pattern a pattern for everyone.
Michael T Ganschow Green: So there we go it's and also um if you don't give background images any further instructions.
Michael T Ganschow Green: They will tie all to fill the space of wherever they're in so those of you who don't have zoom constrained monitors and have additional resolution probably see significant more deaths than I do right now, because we're ducking we're duck and everything here So here we go.
Michael T Ganschow Green: let's mess with our deck background image, a little bit So you can see what all is involved with putting a duck in the background of your website okay.
Michael T Ganschow Green: i'm gonna do something else actually real quick, here too I think we've got enough to trigger scrolling so what i'm going to do.
Michael T Ganschow Green: Is i'm going to turn on a couple of additional things in my website i'm going to go back to my source code and i'm going to uncommon went boom my footer so pops up again i'm going to comment, the main in.
Michael T Ganschow Green: don't have anything in the others will leave those in see this will trigger scrolling.
Michael T Ganschow Green: And there's the duck sitting right there that Turkey, yes, it does okay so notice, as I scroll, by the way, I have a foreground Doc as well just keep things, Nice and Nice and simple.
Michael T Ganschow Green: In fact, you know what you know what hang on one minute let's make this DEMO a little easier to fire up photoshop imma change the color one of my ducks i'm going to make we're gonna we're gonna make this a to deck website you guys it's all your fault.
Michael T Ganschow Green: You know, proper instructor would have class practice and perhaps had a different image ready, but i'm just winging it here so let's just let's just wing it so i'm going to go here.
Michael T Ganschow Green: And we're going to hey hey photoshop hey I know you were going to we'll go colored wheel, I know photoshop want to make a duck that will that will look different than the other duck so what we're going to do.
Michael T Ganschow Green: i'm going to minimize all these Dudes come over here a gic on 75 and we're going to be like hi Doc he's in working graphics here there, he is Hello ducky.
Michael T Ganschow Green: How about.
Michael T Ganschow Green: We take you.
Michael T Ganschow Green: I know it's gonna take you a second opened him up he's he's majestic like that photoshop I get it.
Michael T Ganschow Green: chug chug chug chug chug chug chug chug chug chug chug chug it's almost like my computer is running like seven graphic software's and projecting itself onto the Internet.
Michael T Ganschow Green: All right, so i'm gonna go we're gonna go to image mode adjustments and we're going to go invert so he's now all right now we're going to go export pizza and we're going to go export as.
Michael T Ganschow Green: A duck as a jpeg so we're going to export him as a jpeg let me see what is ducky ducky is a jpeg alright cool so we're going to go, this is a jpeg I and we're gonna go.
Michael T Ganschow Green: Sure, why not we'll go export.
Michael T Ganschow Green: Now I want to put this guy not in my working graphics folder, but in my images, thank you very much, because I want to have multiple images what we're going to call this guy is not ducky dot jpg he already exists, instead, this is jackie's evil dashes Michael fascist evil twin.
Michael T Ganschow Green: Save and there we go I look at that action now, we don't want to say that don't say thank you alright, so now we don't have to ducks in our images, so we can add want to make decays evil twin the background image almost like he's stalking ducky in the main here, so let me go to my CSS.
Michael T Ganschow Green: And we're going to go to my background and i'm going to change out my duck.
Michael T Ganschow Green: I scroll too quickly so go to the background and click my folder and i'm like you know what you know what I know I want evil Doc from my background, thank you, so now we can see it scrolling This should help the DEMO a little maybe.
There we go.
Michael T Ganschow Green: Okay, there we go so that's helping the scrolling right they're going to Nice dark background image over a light foreground image see Alex scrolling like that so nice so duck ish so while it scrolls like this, this is a background image that is set in our lovely.
Michael T Ganschow Green: lovely CSS over here, let me clear the chat off the top of my CSS hey get back here for the chat off my CSS yet over here.
Michael T Ganschow Green: That has a background attachment of default and the background deep attachment is the default background attachment is scroll So when I open up my lovely little.
Michael T Ganschow Green: browser window right here my decays will scroll with this guy right here, so now we have ducks ducks images and we look in our CSS.
Michael T Ganschow Green: You may notice you're looking in your own CSS, you will notice instead of background image with a bunch of gradient stuff you get background image colon and again, instead of linear gradient it says, you are L and a set of parentheses, and then i'll link to decays evil twin.
Michael T Ganschow Green: Now let me highlight something here i'm actually going to zoom in on this things that you guys can see, because this is very important, later on, yeah.
Michael T Ganschow Green: Alright, so there is something very different about this link than you guys are used to come on heroin come on i'm clicking here to close you Thank you so still getting used to the zooming alright so.
Michael T Ganschow Green: notice here my background image so got background image colon and then i'm going to URL and a set of parentheses wrapping a link and this looks rather a lot, like the.
Michael T Ganschow Green: IMG src link, we have to our foreground duck here it's very similar but one difference well a couple differences one, it says URL that's a CSS shorthand for link to a file you'll come across these URLs throughout universal resource locator, by the way, it's an acronym.
Michael T Ganschow Green: So i'm in CSS you come across this a couple of times but URL and then it goes to find the image well in the image it's images slash jackie's evil twin which again is pretty similar to images slash ducky but on the front of it, we have dot dot slash dot dot slash is a magic.
Michael T Ganschow Green: totem in linking basically what dot dot slash does is dot dot slash is a unique linking command and it basically says.
Michael T Ganschow Green: climb out of whatever directory this file is in and go to the directory containing and essentially go to the folder containing it and then look for this link right here.
Michael T Ganschow Green: Okay, so dot dot slash is pretty magic our CSS lives in its own folder it's living in a folder called CSS is basically.
Michael T Ganschow Green: To keep it, and in order to help it run living in a folder called CSS Okay, so what this link says is go out of the folder CSS and into whatever folder contains that CSS folder.
Michael T Ganschow Green: In our case it's our websites main directory basically the master root folder that contains everything okay.
Michael T Ganschow Green: So this is a This is basically telling this link go out of the CSS folder then go into the images folder that's within that folder and find decays evil twin jpg so.
Michael T Ganschow Green: anytime you're having image breaking issues with links and you're pretty sure you did your links correctly check where the file that you're linking from is so, for example, like a script.
Michael T Ganschow Green: Which is going to be in your scripts folder will also need dot dot slashes when it points to images on CSS assuming you put them in the right place.
Michael T Ganschow Green: And that CSS folder will also need dot dot slash so just be mindful of where the file you're linking from is if you're having trouble linking files.
Michael T Ganschow Green: Look at that look at all that knowledge I just dropped random Internet fact of the day dot dot slash will be using those quite a bit throughout the Semester okay so.
Michael T Ganschow Green: Before I get back to modifying our background image ducky do we have any questions i've been kind of rambling along here for a little while, so I have a question pause so that you guys can gather your thoughts.
kianabohm: Are we didn't do this together, like a lot of time.
Michael T Ganschow Green: Oh yes, yes, yes and you'll be able to download these files, so you can take a look at my file and take a look at your file.
Michael T Ganschow Green: In fact i'm going to go through the CSS when clients has done here and i'm going to comment.
Michael T Ganschow Green: On each of these CS on each of these property and value combos on what they're doing as well.
Michael T Ganschow Green: so that you can kind of see what each one is doing.
Michael T Ganschow Green: So it's sort of a little explainer of what we've gone over what I would recommend if you want to practice, it is just you know you've got a nice little scratch website you're building their sort of along with the lecture.
Michael T Ganschow Green: What I would recommend is once this recording pops up, it should finish baking in the next one to two days.
Michael T Ganschow Green: You can watch the recording and like do some image linking both background image linking and, if you want, you can even go grab the recording of the html class which is last Tuesday, where I went over image linking as well and kind of practice along.
Michael T Ganschow Green: Because the the, the best way with all this stuff because it's a particularly the first few times as you're doing it it's very complex.
Michael T Ganschow Green: is to just practice it basically that's that's why I pre record these classes are not pre record my record these classes when they're running and stuff like that, so you can always go back and reference them.
Michael T Ganschow Green: I also have it set transcripts to so so you can you can get a good, you know if you're not sure what word I used, you can see if the transcript I.
Michael T Ganschow Green: Get can provide any more help if not you can always email me or message me through canvas with questions so.
Michael T Ganschow Green: Again, please feel free to to message me.
Michael T Ganschow Green: whenever, wherever pretty responsive on canvas though of us, those of you talk to me also i'm also quite responsive on email as well, so feel free to email me as well, so yeah just practice it.
Michael T Ganschow Green: it's gonna it's going to take a bit and we'll be we'll be doing a ton of this stuff I promise you kiana throughout the Semester images in particular we're going to be doing a lot of variations with them and we'll be messing around with them and and doing things like that, so I would.
Michael T Ganschow Green: don't worry over much if you're struggling with it a little bit now the nice thing with the self directed self paced classes, is that you can always go back and grab the class and.
Michael T Ganschow Green: grab the particular you know lecture and what I went over stuff with.
Michael T Ganschow Green: So other questions I was good.
Michael T Ganschow Green: Alright, so let's mess with our deck a little shall we got a duck white.
Michael T Ganschow Green: So now we're going to we're going to mess with them a little bit we're gonna play around.
Michael T Ganschow Green: With some of these background image modifier is here because we've got a pattern of ducks now just rolling through everything here looks great, by the way this website is just just just staggering look at these ducks will slow pan you across these ducks look at these docs just.
Michael T Ganschow Green: All right, let's let's fix this then let's let's mess around with these Dudes.
Michael T Ganschow Green: OK, so the very first thing typically you can play around with with background images, so we got our link to the to the ducky right here dot dot slash images slash ducky evil twin dot jpg who's sitting in our images folder in our site route.
Michael T Ganschow Green: Then we're going to mess around with repeats a little bit, so the default repeat is what's called repeat background repeat repeat what that means is basically cover every every X 10 square inch of the browser window with these ducky background pictures okay.
Michael T Ganschow Green: However, there are other options, there is repeat X, which if I select repeat X and do a file save all and then give you the big screen share.
Michael T Ganschow Green: means that the ducks.
Michael T Ganschow Green: are only repeating in a horizontal line notice notice that it reverts to our lovely little purple right here okay.
Michael T Ganschow Green: So again, repeating along the X Axis one line of ducks So if you have ever seen background images or background patterns that repeat along an edge, this is what they're doing repeat X is the horizontal version.
Michael T Ganschow Green: If you want to have them repeat along the vertical version you come over here, and you set up zoom back in again.
Michael T Ganschow Green: You come back here, and you set.
Michael T Ganschow Green: repeat why why so now we're repeating why hey here we go pete why what does this do wow what this does.
Michael T Ganschow Green: quicker at this time zone master desktop what this does.
Michael T Ganschow Green: Is this repeats the ducks down one side so they're going to the ducks down the left side Okay, so one repeating across the top one repeat them down the left.
Michael T Ganschow Green: And then, oh no no don't want to save you want to save over to your save all right now.
Skills zoom load.
Michael T Ganschow Green: That y'all can see.
Michael T Ganschow Green: All right, so.
Michael T Ganschow Green: There is also this last one right here, which is no repeat.
Michael T Ganschow Green: No repeat just means there is only one ducky Okay, so if I go here portion the screen share signaling a portion screen give me.
Michael T Ganschow Green: My share as well Oh, I can share two of them ooh share alright cool so now we're full screen sharing so um.
Michael T Ganschow Green: there's only one ducky now he's not rolling down the edge, as you can see underneath our our ducky picture here he's just in the top left corner i'm.
Michael T Ganschow Green: cool means, so now we can play around with background position because we just have the one image of a duck he is not repeating.
Michael T Ganschow Green: Now you can do a little bit of playing around with background positioning with repeating, you can move the repeat column or row up or down with positioning but it's much easier to play with when you just have a no repeat single image, like Mr ducky here.
Michael T Ganschow Green: yeah we're getting faster alright so with that i'm going to play with some other things that we can do here Okay, so I have background position which is.
Michael T Ganschow Green: Actually, a fairly unique property you've come across these guys.
Michael T Ganschow Green: it's a property that has multiple values associated with it background position in this case has two values associated with it and X value and a y value so you can.
Michael T Ganschow Green: control the horizontal and the vertical with positioning based on these numbers access the first one, why is the second one so whenever numbers you're putting in there will position it.
Michael T Ganschow Green: At that level now how is it calculating this position, I was it deciding what are these numbers that we're putting in what do they mean well everything on the web defaults to.
Michael T Ganschow Green: default from excuse me not to from the top left corner of the object that contains it so in our case, this image is applied to our body tag.
Michael T Ganschow Green: Now what that means is that he is in he was going to default to the top left corner, because everything.
Michael T Ganschow Green: Unless we tell it otherwise default to the top left corner of what's containing it so areas boom right in the top left corner of our body tag okay.
Michael T Ganschow Green: So on the move them around using these background positions and there's quite a lot of numbers, we can use, we can either use right and Center we can use pixels points.
Michael T Ganschow Green: pikas inches centimeters millimeters per cents EMS rams x's and whatever the heck ch is our saw us pixels and I will say, for his distance from the.
Michael T Ganschow Green: Left let's go to no, no, no, no, no, no, you you, you are helping dreamweaver don't help ski i'm going to start getting angry.
Michael T Ganschow Green: Alright, so we're going to go 200 px right here now yep there we go So what did that to what did that 200 px do.
Michael T Ganschow Green: Well, what it did was it kicked him over a little bit from the left side he's now 200 pixels over from the left side when he firmly there today browser.
Michael T Ganschow Green: Pretty firmly there to no matter what I do he's stuck there if I want to get it a little more flexible, I might instead of doing 200 pixels do something like 5%.
Michael T Ganschow Green: And what 5% will do is that let's do one more 5% will do is to 10% what 10% will do is that more than 10% let's go 20% so he's Nice and big here we go what 20% will do.
Michael T Ganschow Green: Open up my browser window.
Michael T Ganschow Green: Yes, it will kick him over and then, as my browser window size changes it will shift, so what he's doing is he's recalculating on the fly what 20% of this.
Michael T Ganschow Green: browser window is and then he is repositioning himself as he goes now, you will find as we get further and further in with the web.
Michael T Ganschow Green: that a great deal of the work you guys will be doing will be in percentages, and the reason why we do that, why we use very few a hard width or hard.
Michael T Ganschow Green: positions on anything, is that we really can't control the size of the browser window that's displaying our website so we want to keep it as movable and flexible as possible.
Michael T Ganschow Green: So i've been rambling on again for a little while do we have more questions.
kianabohm: So you're just shooting in the dark, when you first put in a percentage.
Michael T Ganschow Green: pretty much well what I what I typically do is I am look at that at 3% over here you dreamweaver what have you done made a mess of my CSS um so.
Michael T Ganschow Green: What i'm typically doing is i'm kind of eyeballing it so you know i'll take i'll take a rough gas of what percentage, and then I will preview it in a browser window and i'll say Okay, this is this needs to be a little further or a little less.
Michael T Ganschow Green: Based on the size of my browser window and I will basically refine it down typically my workflow is I have whatever i'm coding in.
Michael T Ganschow Green: You know dreamweaver visual studio or whatever open on one monitor and then a either a live preview where a dead preview that i'm refreshing a bunch of the browser, on the other one so i'm so.
Michael T Ganschow Green: If I have like a like a nice rough in front of me I can use, like some of the graphics and stuff like that to measure any exact heights I need.
Michael T Ganschow Green: And then typically i'm playing i'm just kind of rule of thumbing it, you know eyeballing Okay, this seems to be about.
Michael T Ganschow Green: This far with let's try that Okay, we need to expand a little bit, we need to contract a little bit.
Michael T Ganschow Green: You know that kind of thing, some people are much more scientific about their sizing but i'm an art brain I kind of come from the like you know stick my thumb up and take a look at this thing, and you know mess around a little bit and shift so it's.
Michael T Ganschow Green: there's you know there's different strokes for different folks some of these tutorials you see they're really locked in about where they're putting things.
Michael T Ganschow Green: stuff like that, and some are much more kind of loosen and and kind of playing with it a little bit so yeah for me i'm a shot in the dark kind of guy looks about right.
Michael T Ganschow Green: And then I will refine later as needed but some people like to get really kind of locked in on their stuff and as we get further into various positions i'll show you guys how to lock things in much more and how to kind of blend the two a little bit good time.
Michael T Ganschow Green: Other questions.
Good.
Alright cool.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's mess around a little further.
Michael T Ganschow Green: So um the other number over here in background positioning Doo Doo Doo Doo Doo Doo Doo Doo is your height distance from your top so I could throw in a number here now.
Michael T Ganschow Green: All that stuff I said about percentages really only works with width with html percentage heights.
Michael T Ganschow Green: it's an html doesn't support them it's a lot of browsers display them in very strange ways, so we don't tend to use percentage heights.
Michael T Ganschow Green: a ton typically if we're doing vertical distances usually we use something a little more exact like an m or a Ram and m is a unit of measurement equal to the size of a capital M and the default rim sizes basically a 12 point capital m roughly.
Michael T Ganschow Green: From the whatever the browser's default font is a Ram is a relative and it will scale that 12 points based on the browser side So you see those used a lot we use them and type, but a lot of web designers use them in.
Michael T Ganschow Green: sizing as well, for me, i'm just going to do pixels off the top i'm i'm i'm a simple man likes me some pixels we're going to do some pixels So if I do 150 pixels of vertical.
Michael T Ganschow Green: background position with that does that kicks Mr Decker route down off of my top by 150 pixels.
Michael T Ganschow Green: So you can see, now I can move kind of move my background image around in my browser window by using distances from the left and from the top questions.
kianabohm: Save us pixels it's fixed.
Michael T Ganschow Green: Correct So if I come in here and I take my browser window and I close it up stop pumping for me Doc there we go see how here how it's basically just kind of.
Michael T Ganschow Green: it's not it's not doing anything it's just kind of sitting and letting the browser kind of sweep it away, whereas if I move we're moving horizontally it shifts.
Michael T Ganschow Green: that's the difference really between percentages and fixed sizing that fixed sizing is pretty much there, no matter what happens with the window, whereas percentages and some other sizes are reactive, which is really handy.
Michael T Ganschow Green: And I.
Michael T Ganschow Green: It would be very nice it would be extremely nice if vertical percentages worked but typically we're only really dealing with a handful of static virtual or vertical.
Michael T Ganschow Green: Measurements on any entire site, most of the time we're actually letting the content stretch our vertical sizing so we're not usually playing with it a whole time.
Michael T Ganschow Green: So.
Michael T Ganschow Green: But we even this even this we use very limited this background positioning most of the time what we're using background position for.
Michael T Ganschow Green: is to pin an image to an edge or to rapidly Center it Okay, so instead of using these percentages like we've done here with the little drop Downs what I nine times out of 10 when i'm using background position for is.
Michael T Ganschow Green: Setting the horizontal the Center and the vertical the Center So if you guys have torn apart CSS and you've seen.
Michael T Ganschow Green: background position Center Center like that so background position colon Center Center what this What this means is that, no matter where the wind, no matter where in the in the browser window, it is Mr dechy.
Michael T Ganschow Green: will be centered again notice it's shifting slightly vertically, but it's behaving a little a little bit oddly on the vertical front.
Michael T Ganschow Green: Vertical sizing is still that vertical percentages without some heavy duty work or not not not quite there yet.
Michael T Ganschow Green: So Center Center unlocks a couple of things for us centering him like this.
Michael T Ganschow Green: We can set him up as a full screen background image, this one you actually can't even technically doing without it, but I like to have it expand out from the Center when I do full screen background images okay.
Michael T Ganschow Green: So, in order to do a full screen background image, you have to come down here and use this background size property.
Michael T Ganschow Green: background size comes in a couple of different flavors it comes in.
Michael T Ganschow Green: cover and contain Now you can do course you can resize your background image by changing the size of him here with pixels.
Michael T Ganschow Green: And percent and all of that, if you want I tend to if I want to change the size of a background image I go into the image itself and photoshop and I adjust the size there.
Michael T Ganschow Green: Rather than doing it via CSS so I don't have to either have a smaller image that deteriorates as I stretch it.
Michael T Ganschow Green: Or have a bigger image that loads the big image and then shrinks and and CSS and slows down my website so mostly what I use background size for are these two guys here cover and contain so i'm going to do a background size cover sable.
Michael T Ganschow Green: And now you can see i've got a duck who is covering the entire screen guy so cover and contain are very similar.
Michael T Ganschow Green: So what they do is they look at the width and height of the image and they expanded in slightly different ways okay.
Michael T Ganschow Green: So cover will take a look at an image and whatever it shortest dimension is whether it's it's it's taller than it is wide or wider than it is tall.
Michael T Ganschow Green: It will take whatever the shorter those two is so if the image is, I believe ducky is slightly taller than he is wide he is actually.
Michael T Ganschow Green: He said he taller than he is wide, it will take the width because that's the shorter of the two dimensions and it will stretch the image along that until it hits the edge of whatever's containing it in this case I browser window.
Michael T Ganschow Green: So it took our duck if I turn it off here, it took our duck.
Michael T Ganschow Green: save it took our duck right here, who was basically a vertical rectangle.
Michael T Ganschow Green: And it blew him up.
Michael T Ganschow Green: blew him up so that he has short side, which is with it blew him up so that he is wide edges touch the sides of the browser window okay.
Michael T Ganschow Green: Now, what does that mean well, it means that any that the height, which is where he's taller will get pushed off of the browser window, it will it will clip him off of the browser window.
Michael T Ganschow Green: So you'll notice here i'm scrolling Mr duck along and you can see some other bits of him to you know he's not fully there but it's widening, to the point where you can fit and then any access height, there is it just has clicked it off out of the browser window.
Michael T Ganschow Green: This is one way to do full screen images okay here's the other.
Michael T Ganschow Green: Now contain works, the opposite way it stretches the image, if I go background contain it stretches the image along its long axis so ducky is taller than it is wide.
Michael T Ganschow Green: With contain it takes that and it stretches his height, so that it hits the top and bottom of our browser window boom time then.
Michael T Ganschow Green: But, but if there's anything left over any left over whips along the sides, it just leaves whatever background color we set to show through so now, you see, we get the full duck experience here but.
Michael T Ganschow Green: But he's got sides that are not covered with the image now these guys neither is better or worse than the other okay so neither of these guys is better or worse than the other, it is.
Michael T Ganschow Green: It is up to you, which one works better, if you want to kind of high ducky since here, you can do a black background color and what that will do is it will merge into the sides of the image and it will.
Michael T Ganschow Green: Basically, make the fact the image doesn't go all the way across invisible but that's really up to you, which version you use most times, unless I explicitly need an image to be visible i'm usually using background size cover.
Michael T Ganschow Green: say now, one last thing before we finish class up here because class wraps up at 830 so we got a couple of minutes notice that ducky is scrolling with my design okay.
Michael T Ganschow Green: I think I think I want to make him look, especially menacing and have him just staying fixed they're just fixed to Minnesota so i'm going to add one additional thing to my background image here.
Michael T Ganschow Green: And I am going to go background attachment fixed and what does that do nothing except that the website content scrolls over the top of ducky purely hora horrifying scary as all get out.
Michael T Ganschow Green: So questions on background images questions on gradients questions on ftp.
Michael T Ganschow Green: cool beans next class will be an open lab i'm going to repeat my ftp lecture at the beginning of it, so that those who weren't able to attend today can see that and will also be good reinforcement.
Michael T Ganschow Green: So if you have questions, for me, or you have anything other if you don't feel like messaging me or emailing me in the meantime shift to that class asked me the questions and I will provide you with answer.
Michael T Ganschow Green: So do we have any last question.
Michael T Ganschow Green: pattern background.
Michael T Ganschow Green: looks like everybody's kind of sending on out of here, so I am going to turn the recording off goodbye, and good luck recording people so i'm going to turn them off stop the recording.