web design software serif
our next step is going to set up dreamweaver.so if you remember from our last step, we got our ftp settings from cpanel. we're goingto have to find a site in dreamweaver. i'm running in windows 8 and i'm going to bringup dreamweaver, actually i'll create a shortcut for that in my toolbar here at the bottom.dreamweaver is actually one of my favorite programs. little interesting history, thiswas not originally owned by adobe, i've been using dreamweaver so long, that when i firstused it, it was actually owned by macromedia. you're going to notice that my site is a littledifferent that yours because i already have the setup, let me refresh it, and i have multiplesites in here. so i've got my web105 site, but i'm going to need to set put a new onefor web175. i'm going to explain two possible
ways to do this. i'm going to create a newsite and i'm going to call it web 175. i need to find it in my existing sites. actuallyi have nothing in here, so i'm going to go ahead and create a new folder for this. i'mgoing to hit that and i'm going to call it web175 and i'm going to remember that i haveit stored in my documents folder. then i'm going to hit open and then hit select. thisis pretty much the way you should be starting. then i'm going to have to go to the servers,and add my server on. my server, i'm going to call it web175 because i'm also teachingvarious other classes - javascript, web scripting, things like that, so i have bunches of filesup here, and i reset up a different site for each one. so my ftp address here is goingto be meri.mccdgm.net, my username is meri,
and my password is whatever i changed it to,when i was forced to reset it. now, if i test this now it's going to work but it's not goingto be right. so if i hit test, it tells me that it works but it's not correct becausei don't want to be just doing this at the root level. i want to put it in public_htmland then i want to go on one step further and i want to do /web175 because this is goingto be specifically a site for this class. now i want to test that again. for that towork you had to create your folder, like we did in the first video for this class. oncethat's done, i can hit save, i can hit save, and this brings me into this main screen.but i'm actually going to do one thing further because when i was in cpanel, i set up a fewfolders, so i can select the whole site and
i can hit download, and should have a blankindex page that i set up, and my labs, images, and css folders, which at this point shouldbe completely empty. i forgot i put eli.jpg in labs. eli should be in images. so i canmove that around and i can refresh the site - this is syncing it. and i'm going to synchronizethe entire site and hit preview. so it is going to tell me that i should get eli, butreally i just want to put eli, so i'm going to select put, and i'm going to delete eliin labs. so i want eli to exist in images but now in labs because it's a picture. theni'm going to hit ok and that will synchronize my site. if you're working on multiple computers,that's how you keep everything up to date. the last thing you do when you leave, is youupload you site, and the first thing that
you do when you start is you download it,to make sure that you're on exactly the same copy. otherwise you can get into version controls,which i'm not going to get into right in this video. this leaves me where i can get started,editing my first file. to create a new file when you're in dreamweaver. see, i have anindex.html, this is going to link to my other options but our first video is going to bein labs. i created the folder here, i'm going to right click on it. and before we actuallycreate any labs, i'm going to create a new file inside of my labs. and again, i'm goingto call it index.html. because that's going to organize the lab folders or the lab filesthat we do. so if i double click on that, i'm in here, where i can work in it. thisreally isn't a hand coding class but it is
set up, because i've been using this already,to html5 by default. and you can tell that with the doctype html. typically in this class,we're either to going to work in the split view or in the design view. personally, ilike to code and it's good to know it because you can really set up and take total control.but there are a few things i want you to set up in every blank page. you're always goingto start with a title, this one is going to be meri's lab directory and i'm going to havea little bit of fun here. it's really easy to work in dreamweaver. i can just type, andit's just like working in word and you can put up your first and last name. now, thisis going live on the internet, so you might not want to do that. however you want to doit, i don't care if people see this on the
internet, otherwise i wouldn't be puttingmy videos up for the whole world to see. there is nothing personal or embarrassing here.so i'm going to just have links to lab 1, but it's not really what i want to do. whati really want to do is to insert, a table, and i want it to be, we'll say, 15 rows, that'sgoing to be a good start, 2 columns, table width 90%, border thickness of 1 pixel, cellpadding 3, and, this let's you determine if you're having a header cell on the top - there'sgoing to be a header, and on the left there's going to be a header. that's important becauseit actually changes, actually i want both, and the caption will be labs and descriptions."these are the web175 lab assignments". these are important things that i'm putting in herebecause they would help for browsers for the
blind. then i'm going to hit ok, and i'm reallygoing to get into this later, but that's just putting a caption in here for me. there arethings i like and things i dislike about this setup. i'm going to leave it as it is forright now, we're going to go ahead and move that over. this is going to be "lab number","lab description. so we're going to put in, for each one, lab number "1" and this is goingto be "your first page". i'm not completely and totally in love with the way the pagelooks and i'm not going to spend a lot of time on it. but i do want to show you, thatyou can go simply to the page properties, and you can handle both, the appearance ofboth css and html. so, right now it's the default font of whatever the user has setas a default font in their browser. i really
prefer a sans-serif. these are font familiesand i'm kind of a fan of this one. sans-serif works better on monitors. now size here, wecan set to, these are by default pixels, i'm going to go ahead and leave them as 14. i'mnot going to play with the text color or background color here, but i could. and we have otheroptions we'll get into in the future videos. but the big thing i wanted to do is i wantedto change everything to being a sans-serif font because i really prefer that. now thenext thing that i'm going to do, i have a few things that i just prefer in page layout.i want this table to be centered, so here i'm going to select the table and this givesme some basic options for it. i'm going to choose to center the table and then i alsowanted to select my name here, up at the top,
and i don't want it to be a paragraph. i wantit to be a heading 1. and that's pretty traditional. you should have the heading one tag at thebeginning of most pages and then i can format that as well. i'm going to go into the css,and modify the default heading rules for the h1. so i can actually add a new css rule.dreamweaver is so powerful. i love this. i'm going to hit edit 1 and i'm going to chooseany element. i'm going to choose the id, no that's not what i want, i want the tag. i'mgoing to redefine the h1 tag. then i'll hit ok. and i really just want to make a couplechanges. i'm going to make it purple because that's one of my favorite colors, and makethe font size a little bit larger, and i want my h1 tag to be bold and then i want to gointo my box setting, no my block setting. because
this is where my text alignment is. and iwant to go into center. i'm going to hit apply here and then hit ok. so this is really simplewebsite and i want to finish saying what i was going to say here, "meri's web 175 labsamples". so you're going to pretty much set up a page like this, linking to each yourlab samples to make it easy for me to find and grade them. one of the cool things aboutdreamweaver is that you can then go to split mode, and i can see all of the code that itcreated for me. and i can see that it's significantly faster to work in dreamweaver but if i wantedto go and tweak the code, i could. and it's put in my css right here for the page andwe're going to be playing with a lot of these different things. now it's really importantwith the start of this class that you understand
some of the basics of html and css. so hopefullythis is not the first time you're seeing code. if it is, that's ok, we're going to do a quickreview of it over the next week and a half, or so. so if you'd like to, you can go ahead,and create a simple page like this, have it say your name and your lab directory, or yourlab samples. and i kind of like lab samples better than lab directory. this is my indexpage for my lab, it's technically my first lab, but we're going to to a real lab afterthis. but this is just getting set up so i can just link to things. now here i can linkto this. i could actually make it a little easier to link to by calling it lab 1, andthat just gives you a bigger area to click on, then i'm going to highlight it and inhere, i'm going to go back to my html and
the link will be to lab1, actually it worksbetter if you have lab01 or really 01lab.html. so that's what i'm going to name it. and thereason i changed that is because that will make them neatly lined up. because i knowwe're going to have more than ten, and it's going to alphabetize them, so if i start with01, they are going to show up in order. so by putting in what it's going to be named,i know that the link will work as soon as i create the page. and it's always going tolink in the same folder, if i don't put a directory path. if it already existed, thereare some better ways over here for finding my link, rather than just typing it in. andi'll show you those in some of the future labs. so just for getting setup, your indexpage should just have a table, and you can
play with your widths here, just by draggingthem around. i'm not going to tell you how wide they are. and for me you can add cssif you want to. i just like things centered and pretty. i also like to test these, andright now what i did, i'm on a windows machine, i have mac as well if you have any questions,i hit f12. that's going to launch it it whatever browser i have set by default. and wheneveryou launch it, it's going to ask if you want to save changes to index. i'm going to hityes, and here you go, this is what it looks like, when it's published. great, i'm happywith that, so what i want to do now, and there is two ways to do it, i want to upload this.so i can do this right here, by choosing put, and yes, i'm going to include the dependentfiles but there aren't any. there will be
in the future. and i can go back out there,and i can check. here, you'll notice meri.mccdgm.net/web175/index.html. that's the page we were just modifying. soi need to refresh it and if i did this right, it should upload. so i'm concerned becausei'm not seeing it uploading. oh, that's because i did the index in the labs page, not thetop level index. let's fix that. so here we will just make this really simple. i'm notgoing to format it or anything, i'm just going to put labs and then we will have projects.i'll add more to this later. this is just my top level index page. and let's go aheadand let me show you, how to link to an existing page. so i've selected labs, and i'm justgoing to drag right there. labs/index.html this is not a good page. i will put my titlein here. "meri's web 175", and i'm going to
choose file, save all, and i'm going to putthis up there. i'm going to hit put. and there we go, now let's refresh it, meri's web 175,if i click on labs, here is my labs samples. you're going to see that dreamweaver is reallya lot faster that hand coding. it gives you a lot of control but knowing how to hand codebefore you start will give you a lot more power because you will really understand howlayout works. so that's just getting you set up, so you can start working. you should setup your server, do the basic pages that i just did, a couple of index pages, with justyour name on them. just make sure you can upload to the browser and find it. becauseyou're going to have to copy and paste your links, so when you're getting ready to handthem in in class, you're going to select,
copy, and then you'll paste your link to thecanvas page to hand in your assignments. because you're going to hand in links. so test that,make sure it's working, you won't hand in this particular one but i will check for itin a future assignment.
Tidak ada komentar:
Posting Komentar