Lessons

Lesson Info

Creating a Page

We set up this site we looked a little bit of the interface no let's set up a completely blank site like we're starting from scratch we've got nothing it's our first website and during liver we come to dream weaver once again your first instinct is to create a new page when we do first we create a new site nice job anna goal so we create a new site now we can call this anything you like. I recommend that the very first late if you've never created a site and dream weaver and even if you have I recommend that everybody have a site they call sandbox what do you think you do in the sandbox you play you experiment you throw dirt at each other oh no no that's me I throw things you had anything thrown at you almost got a host with that one but I won't do if you fell asleep you were falling asleep. I'm just picking on your meghan inside. All right, so I'm creating a site from scratch it's called sandbox it doesn't exist. So how do I select the holder if it doesn't exist yet? Right? Well, when...

I click on this I could have created a folder already and just named it on my heart I haven't done that in the interface of windows or mac whatever use but both windows and mac have a mechanism for creating a new folder as you set up a site in in windows it's up here in the top new folder and mac it's down here but I'm just gonna create a new folder and I'm gonna call it sandbox now again I could call the folder itself anything I want this is just for my reference I know this is where I'm to save everything in sight and I'm gonna create that you know I'm going to select it so it's a little strange I created dreamweaver you'd think between where we get the head this is the folder I want by no I still have to choose it and you want to make sure that the name of the folder is up here when you select it this one has nothing in it because it's a blank folder so again just two steps site name local site folder safe and now I've set up my site even though there's nothing in it so that's how you start a new blink a sight nothing going on now you get to create a new page now your instinct to go to file new is really good and we're just going to go to file new and we're going to create a new page wait a minute how many options are there for creating a new page in this program right? So let's just take a moment to a quick overview of what these options are so here you can create a blank page you can create a blank template you can create a fluid grid layout that's how I created that antonio gaudi site but responds to different screen sizes. So this is a feature set it's a whole big new feature set that was added in dreamweaver five I do remember sex forgive me. You can create a page from a template so once you create a template you can use shortcuts to create a page from a template you can create a page from a sample whatever those are and then there's other because if that's not enough right so let me simplify it for you if you're new to dream weaver just start with blank page first thing I want to do on the left just choose blank page we're going to start there now we get to page type. Okay this second column so html well looks pretty good, but look at all these other options. Remember I was talking about how word process created with php if you were making a theme for a wordpress flog you choose php, you'd still be laying it out and hln css but the file itself would be php similarly, I mentioned cold fusion dot net espy java don't worry about that java script like I said, is not job that's part of why it's up here action script these air just scripting lee, which is not the full on programming languages represented more down here, so we're going to start with just a basic h two o phile, so look at that right off the top all you have to remember about the new window blank page html I could do that it's the first choice on both lists so far. Ok, now we are going to spend some time looking at these layouts, but we're not going to be that first, but I just want you to see if I just kind of click through these. There are a whole bunch of kind of preset layouts and dream were that air about giving you a head start on all the css you need to create most websites, so I'll show you how to use those layouts on how to customize those layouts, but the first thing we're gonna do as a completely clean slate ah blank page and each time out with no layout whatsoever let's, just create that cool now when you create a page injuring river, I always recommend the very first thing you do is save that page save early and often but save especially in dream weaver because again, we're keeping everything in that same folder because everything's got to be linked together and until you actually save the file, dreamweaver doesn't know where it isthe right because I don't know I'm gonna save it on your desktop or in the folder you set up right? So the very first thing we're gonna do is save it so I'm just gonna come down again many options in this menu keep it simple file safe and I got a pretty straightforward window if this is my home page one, I'm gonna call it index yes, we're going to always call the home page in next on each email because that is the first page the browser will open when it comes to our sandbox website we're not really going to put this online it could happen save it that's all you have to worry about this point, so I've saved it and now you see up here it's called index dot html okay, we'll talk more about next html in html five and I'll get to some of that, I promise, but for now we're just creating our first pitch. The other thing I recommend you do first because it's so easy to forget and it looks so bad if you do is to get your page a title. Now up here at the very top you see this title field, this doesn't actually display in the page itself it's what's at the very top of the browser window and it's also have somebody bookmarks your page it's the words that go there also if google matches your page in search results it's the first thing at the top so you really don't want the words on title document really does and it's so easy to forget so good habit create a page, save it entitling every time create a page saving entitle it every time so I'm gonna call the sandbox because it's the sandbox I was worried about a theo I might be putting a couple key words in there this is not an s e o class but just to point out the title field is especially valuable in the world of a ceo so if you're worried about search engine optimization, be thoughtful about what you put in that title don't just put the word home actually put the name of your business and a couple of key words relevant to your business in that title field you'll do much better ok, so hey I have a blank page what can I do? I'll bet I can type in here right? You think I could just type let's try it let's try how high can you jump because we are going to do a lot of jumping in this class I'm just going to return so got how high can you don't so I typed in some text I had returned that seems pretty straightforward let's insert an image in there just to make an interesting right so choose insert image now I set up the site but I don't have any images in there ultimately you want to make sure that all of the images and files of your website are in that folder but here's kind of a cool thing about dreamweaver it will find them for you so if I just go back into my project files or actually I have a whole another folder of stuff in my dream we were one o one course folder don't go into here and grab one of these really big images just for fun grab my big jumper who now I just clicked to select an image I'm gonna insert lots more images you'll get to see this again but I just clicked to insert an image that's not in the folder I set up my site and remember says whoa baby, I don't know where that isthe if you linked out over there and then you upload your site later and it's still on your hard drive you're going to have a broken image link on your web site nobody likes that doesn't look pretty so dream weaver is offering to copy that women jj into the folder that I set up how cool is that? Said great let's just say yes and so it says ok let's save it it's giving me the same name it has aiken rename it if I want to call him big jumper and I'm gonna save and it's going to ask me for alternative text and here's another thing about one design there's so many little details I teach you one simple thing like insert an image and I've got to go on six different tangents just part of why will insert images over and over again but alternative text just to give you a moment here is text that appears if the image is not seen so this is text that I'll never show up on the screen unless the image isn't there so you really just want to write a description so I'm just going to say guy jumping you can write whatever you want it's all good quick ok, yes so I've heard that you should always name your images what they are so that when google scans your sight all of those things will pop up was you love how informed you are? Absolutely but you just brought up a really good question. So if you're thinking about search engine optimization from the start, the file name of your image as well as the alternative text are also key word rich places. So for example, if I put up a picture of myself, I always try to name it janine dash warner dot it about shaping or whatever it is we'll look at some image formats and a little bit and then when I insert that page of my website I make the ultimate alternative it one more time the alternate text ginny mourner and then when you go to google and you search for jimmy mourner and you hit that image button that picture shows up because google recognizes that it's me so if you want to change google results on your picture name it your name give the all text her name have your name appear on the page put it up on the internet where google confined it and it will probably start showing up in google image search is so that's just a little example of what you're talking about and that's really true across the board now you never want to do what's called keywords stuffing again I don't want to spend a lot of time on this you know but just a quick word of morning if you start naming your image is sex sex sex, sex, sex google will figure out right away that your website about health care products probably isn't related and they will bump you out of the search results so be honest the accurate provide good information and google will love you all right? So we're working in the fan box and we just inserted some text in their new page and we just threw in a photo to see how it would look and we've got some text here called that says how high can you don't we have this giant photo in this little tiny boat attacks toe we might want to make that text bigger right now there are lots of ways to format text and most of them involve css but we haven't learned css yet so let's start with the simple down here at the bottom of the screen is something called the properties inspector and what's kind of cool about the property's inspector is whatever you select on the screen the options related to that element will show up in the property inspector so if I click on the image you see everything change down here two image options but when I selected the text it gave me text formatting options and one of the text formatting options bc known here for matt one of those options is heading one heading to heading three heading for counterintuitive if you're used to fought sizes but heading one is the largest heading six is the smallest so the biggest headline on my page I'm going to select heading one we scroll back out and you see that text has changed when we just undo that and we'll redo it again so if I do so it's highlighted I went down here I chose heading one and boom it jumped to big text right now you may not like that big time's bold headline one do you want all of your headlines still look like I don't but that's where css comes in so in a little bit we'll start adding css to change the way those headings look but we're still going to use that heading one tag and it gets back to google and other things a good approach to web design is to think about how do I create a site that's hierarchical how do I create a site that says the heading one is the most important headline in the page? And then if I had a second headline that was next most important I'd format that is heading to and then the third most important would be heading three and that's because not all of the things that visit your web page are human I know it's kind of scary isn't it all these little bots like google's bots and all these others come to visit her web site and they can't see the size of that text or the color of that text they need another indication of what's the most important what's the second most important what's the third most important so some of the things we do in web design are actually for non humans there about identifying the hierarchy of the information on the page ok, so how we doing? We inserted an image we put in a little text before mounted it we're getting the basics right? Ok, so that image got copied in because we've got this image on our hard drive and I just want to open this up and show you down here and this was something you could do it any time you've got code you if you're really a code head, you've got designed you appear in the corner here we see code split and design view. I spend most of my time in split view on what's cool about split view is it lets me have the advantage of designed you. I can see how this is probably gonna look in a browser on. I have to qualify that because not all browsers have created equally. We'll come back to that point, but I can see the design and I can see the code at the same time so I can see that this image is here and I just want you to notice something here. This image of this guy says image source and then it has the name of the image. Now, as you start to build the site and it gets for complicated, you're probably not gonna want all of your images and all your text files on the same folder. It's kind of like when you start saving stuff on a new computer and you save everything on the desktop because you know everything on your computer should be saved on the desktop, and then one day he woke up and you couldn't even see your dust off anyone and you realize maybe you should organize things in the folders so dreamweaver sites are kind of like that a lot of people start they just start throwing stuff into that one main site folder and then one day they go I wish I could organize that better, so if you start moving things around in the main interface of windows or mac you're going to break all those links that you're going to set this will make more sense is we do it, but I want to point out right away that if you want to do something like creating images folder to store your images, just close this back out of the way make this bigger you're going to want to do that in this files panel and what's cool about this files panel is that not only can I create a new folder here so I can just right click new folder and that works on mac or windows just right click new folder much like you're creating a new folder anywhere else and I can call this images I can actually call this anything I want graphics or my stuff but I cannot use spaces or special characters I'll say this over and over, but when you're creating now that we're in that main site folder now that we're creating the files in the folders in that folder we have to be really careful about what we name things so no spaces, no special characters the underscoring the hyphen are ok the hyphens actually the preferred one but other than that just letters and numbers so I created an image is folder and I called it images not my space images that would be a problem in linking and I want to take that image file and I'm going to drag it on the semen again I'm just going to take it and when it drag it into that images folder I'm just organizing my site a little bit and when I dio dreamweaver should automatically fix that image link now on windows it'll give you a little note and it will say are you sure you want to do that? You see I save way try that again I'm up here I say I have saved this page I have inserted an image I am now moving that image into a sub folder thank you and dream, weaver says oh you're changing the location of that image relative to that page I need to adjust the link that tells the browser howto find that image when it's looking at that page so say yes please update that for me and it's going to change that address and don't worry if this code still looks kind of cryptic to you no gobbledygook that's a scientific term by the way but notice now that the sources image slash big jumper dyke j p because dream weavers now added that there's an image is folder before that image if you've ever seen those long, you are always to someone said she got the domain name and then some things last something's last something those air folder names going down to the page name if it's built dreamweaver. So that is why you have to do that site set up in the first place because dream weaver has to know the location of this image in relation to this page to be able to set that lincoln have that image display, and the same is true when you link from one page to another and again that's all about making sure that when we upload that to the server, everything goes in that same relative location. So if you've built a site and you've got a whole lot of holders just laying around in the files panel here and you want to organize them that's totally fine, it could be very helpful, but on ly organized them in this files panel in dream, we were not on your hard drive, like you would organize all the stuff you saved on your desktop and later realized maybe that wasn't the best place to save everything. Okay, so that's, why you do site set up and that just a glimpse at how linking works and sort of the relative location of liking quickly. About images did you say whether they will automatically pick up or excuse me when you important image into dream weaver will automatically pick up any tagging your metadata that you've inserted into it in light room are photoshopped that is an excellent question and I'm pretty sure yes, I'm pretty sure king right click on that image because it's just copying that image with everything that goes with it so if you right, click on that image and view it in you're in the interface of mac or you download that image later and look at it. In fact, I know that because one of the ways that some people figure out fake images or the location of people internet sleuths those of us who like to stock each other online I don't do it a lot but you know potentially I've been known to cyber sock one of the tricks that someone must do is download a picture look at the metadata see where and when it was taken so yes, that stuff does convert nothing's happening to this image dream weaver is just creating a perfect copy and putting it in this folder just to make sure it's in the right place but that's a great question janine, we do have some basic questions if you don't mind us through a few of these so for for danish dude with when I insert my picture into the site it won't show up in the files place so I can't see the pictures in the folder now I tried to make a whole new site but the index files doesn't show ok, so let's talk about a couple things sometimes when you copy things let's bag do go or to the windows or mac interface and I just put a whole folder of images into that site root cause I haven't linked him in and I just want to copy him all at once cool then it might come back to this files panel and they won't be there and that's why this little refresh button exists if you scroll in here if you click refresh then it should reload this and sometimes when you copy things outside of dream weaver they won't show up until you click refresh and then they'll be there if you re set up your sight and you set it up with folder that the index pages not in that it's not going to be there but if the index pages in the folder and you set it up a properly it should be there we're going to do that site set up a couple more times and I'll point out some places you might run into trouble okay? So we also have another question from annette de can you make up relevant and appropriate folders prior to be getting construction of the site and create presets actions to handle images or other when you're bringing in components what is organized by person you I know going that love you and that I guess if you are organized enough not to save everything on your desktop, I recommend that in fact, in the big world of web design, where people are creating big, complicated sites, we often go through a whole process called site mapping and prototyping and wire framing and all these terms you do not have to worry about at this level that have to do with really thinking through that organization and setting up that structure in advance. So especially if you're working in a big, complicated site, the more time you spend thinking about that structure and how people are going to navigate through your site and all of that stuff before you start doing what I'm doing the better, absolutely, but if you're like most people in your diamond in the dream weaver and you're just throwing everything in that folder, women around the files panel works pretty well little fix things, but going that I highly recommend that approach. Okay, maybe one more question and from floor emcee when and why should I answer no to the update of the location when I move an image into another folder? That's a great question in general you're always going to say yes it is possible that you aren't going to use it in the same place you don't care about the link or basically I think dream weaver is just giving you the option before I change the code for you and to make sure you're aware that I'm changing the code I'm going to warn you but there would be very, very rare occasions when you wouldn't want to do that if you want the image to still show up in the page say yes to that update request absolutely cool so I'm just gonna close this and as I close the dream we was going to say don't you want to say that page and was that why not? You know it's in the sandbox I could go back goodbye and again I really recommend that the first site everybody created during lever they call sandbox or some playful thoughtful name you like better um you can name it after your dog fight oh that's ok, but a place that you can play an experiment because one of the things I see too is people start building their site get really into building the first page of their site as they're still learning and they end up with code that doesn't quite work and then they spend more time trying to fix it then they want if they just started over again so if you've been kind of messing around with a page and during weaver and it's starting to be a mess and you can't even figure out why it's enough start over create a new page just copy that mike's content over leave all the code behind reform at it it's pretty quick and dreamweaver that's often much faster and more efficient and trying to figure out where that code is broken in the page so don't be afraid to just start over an experiment so we set up the sandbox but no let's try setting up another side and this time let's think about downloading an existing site and how we would do that because a lot of you might have a site that lives on the web somewhere you want to get it on your computer so you could work on it. Most of us do that this way inward press a lot of times you'll be building the site on the server as well as viewing it on the server and dream we were you get to build it all on your computer where nobody else can see it and then just upload it when you're done and you know it's right? You can actually do that with wordpress but there's a lot of complex sitting into making that work again I can talk more about that of people have questions but let's just jump into making another new site so there's a manage sites option over here and I want you to see that the two sites that I set up during we were remembers so once you've set up a site it's there and you can start switching from one site to another if you're working on multiple sites so that's kind of handy, but we're going to create another new slate so let's just click new site and I'm going to do the jump start site again, but this time I'm gonna get the one that's already on the server. That side actually is on the web at a fake look well at a really whirl but it's a fake site, so I'm gonna call this jump start from the web just to distinguish and here's another thing I suggest if you have old site on the web and you want to download all of it and started playing with it but it was built in tables or frames or just css that's sold you're afraid to touch it, download it and keep it in one folder and then create a new folder set that one up in dream weaver and just copy the content over as you rebuild those pages, so I want to kind of do that effect as we will rebuild the jump starts like together in this class, so I'm gonna call this jump start from the web so I can distinguish between the new jumpstart sign I'm gonna create and this one that I downloaded and I can switch back and forth injuring we were easily again the site name is just for my benefit and the animal identify a folder but in this case I'm going to create another new folder because this is on the server I want a copy it down to my hard drive I need a folder to save it so this is jump start from the web and I'm gonna create it here and I'm gonna select it now be careful if you set up a site and you don't see what's supposed to be inside it make sure that you've actually selected the name here the question about why don't I see my index page? Maybe you didn't select the right folder it's really easy to select the folder above or below in windows you actually got a little name down here that tells you the name of the folder that's being selected and gives you a second chance to make sure you've got the right folder but here you can see I'm selecting the folder I named so choose and then you can double check here if you just use your arrow key and scroll over to the right here you'll see there is the name of the folder and I know for sure I've selected the right folder you want that top main folder ok safe so again, there's nothing in here because it's a new folder, but now I need to do the server set up, and I want you to see that from this menu you saw before. Now I have all of these whoops during a scroll in there go have all of these sites jump start from the web that trump start? We did from the beginning, the sandbox and below it is something that says manage sites and I'm gonna click in there and that brings you into the manager state dialogue, and here you see all three of my sites, you can also get to there from here so site, new site or site manage sites both go to the same dialogue and you'll get a list of any and all sites you've already set up. You can select any of them here in these little tiny icons at the bottom, this one will delete the site it won't actually delete the files on your hard drive. It'll just remove the site set up from dream were so if you just want to clean out some old sites, you can just click the minus sign and get rid of them. You're not actually going to hurt the files on your hard drive, this one will let you edit the currently safe site, which is what we want to do, it looks like a little pencil then you'll see this icon throughout the interface and dreamweaver this little pencil, anytime you see that it means at it, so I've selected the site I wanna work on and I'm clicking on reddit and that's actually going to bring me right back into that site set up window, and it could have done all of this at once, but I wanted to show you the sights set of processes, just two steps, and then you can always go back into this dialogue to do more things, like set up your server connection. So dream weaver has all these tools to build websites, but it also has a feature set to let u f t p anybody know what ftp stands for? File transfer protocol. You will not be tested on this, so ftp file transfer is really just a very simple way of copying files from one computer to another. All ftp is about is transferring files from one computer to another and in dream weaver, those ftp features what allow you to take that folder full of images and files on your hard drive and copy or ftp them? We like to say that because it makes us look cool, we ftp them up to the server, or we ftp them down from the server so the server set up processing about to show you. We'll help you both to publish your sight when you're done or to download a site that's already on the web if you're just getting some and so we clicked on servers, right? So we had the site set up would know the second option down its servers, knowing that this blank window now again, this changed after doing movers see us for the same ultimate feature set, but if you're using cs for before, this will look a little different, you still want to go to where you set up the servers. In this case, we're going to do the plus sign to create a new server connection you actually can connect to multiple servers or one site, but that's really advanced and you don't have to worry about it. For the most part, most people creating small to medium websites have a one folder on their hard drive one connection toe one server work it's published that's all we're going to do today, so we clicked on plus we've got this screen. The first thing it says is what's the name of your server that's really something you can put whatever you want I happened to have the site host of the dream host there are many servers dream host, host, gator bloo host there are many different web hosting services out there those three are often recommended and they're in the pdf file that anybody who registers for this class king yet so if you haven't found a host, those are ones that I've heard good things about but there are many more advanced ones rackspace if you really want a high end service there many options so the server named you actually could just put my web server it doesn't matter this is again for your reference you have many different ways of connecting don't be confused by all this this is just for secure ftp if you have an e commerce site and your server has extra secure protocols or you have a special encryption, you might require that if you're working within a big company and you have to get through a firewall or do some of those other things you might use one of these other options if you've never seen any of these options if none of those look familiar to choose ftp and don't worry about it that's the that's, the default that's all you need so I mean my surname connecting via ftp file transfer protocol that's right? For those of you who want to win a bar bet later I've never won a bar bet with that but you know, okay, so ninety the ftp address I cannot tell you what you're after he addresses there's no way for me to know this next three pieces of information actually the next four you have to get from your web hosting company so I have mine that works for my service you're gonna get yours when you sign up for web hosting at any of these big web hosting companies they're going to send you an email that has all this buried in it and all due respect to have hosting companies they're probably going to send you an email with seventeen paragraphs of text and some were buried in the middle are these three little pieces of data there are crucially important to you so if you miss that the first time that he mailed it to go back, find that email if you have to email them again or call them and ask for it what you need is the ftp address your user name and password those are really the three most important pieces of information and the ftp address is usually going toe look something like this in my case it's ftp dot jump start talent agency dot com it's must the spelled correctly or you will be in trouble ftp dot jumpstart talent agency no that's how my server works some servers don't require the ftp dot some of them have a different thing dot some of them have a different name completely that really is something I have to get from your service prior and it has to be typed perfectly then you're going to use her name now my user name you know really have to worry about a whole lot I'm being a little transparent here this is a fake site please don't hack it it just messes it up for the other students. Thanks. Okay, but it's not a live site otherwise I probably wouldn't be showing you this passwords never show up on the screen because even idiots like me try not to get the password away. All right, so we've got an ftp address we've got a user name and password and then there's this test button that I highly recommend you use because what this does is go make sure that that connections gonna work so dream weaver is now going toe look and it says, well, I didn't write on the first try if you made a spelling error if you've gotten one of those things wrong will say sorry couldn't do it and the reason I like to do that before I go on is it's like three different steps to get into this dialogue. So if I get all the way out and try to connect and it doesn't work that have to go all the way back in to fix it so that little test button is really handing this root directory button is route this root directory field is also very important and I'll come back to that in a moment, but first I want to show you where you find that because even your host may or may not tell you the root directory that you need but once you actually connect you khun see what it isthe so I'm going to say this that was a lot of steps going to say this but we're gonna look at again and now it's his during the rush to recreate the cash don't worry about it just click ok it's kind like browser cashing it's just a way dreamweaver speeds things up true heroes all kinds of little helpful dialogues thank so not replying okay quick done so now that's it I'm done what a way to you know I set up the server where is the connect to server button not going to find it easily up there it's down here I mean that files panel on how handy that isthe right so I could scroll in and show you all these things but what I want to show you is over here on the very far right is a button watch what happens when I do this clique that makes the whole thing bigger and this is designed for ftp so this far right hand button that you see whether it's expanded or not expands this files panel and then you can see these buttons a little better this one synchronizes will come back to that one this one puts files this one gets files and there's all these other things this one it's one that looks like an outlet plugging itself in that one connects to the remote server so if I click on that dream weavers and I'm going to go and establish a connection to my server which I believe will work because we just tested it look so now when I see is this is what's on my server at my web hosting company this is what's on my local computer notice that says local files and remote sir now the opposite works when I'm done with the site and they have a whole bunch of files here and I want to publish them I'm going to select them all and choose put and put him up there right now I want to go find those files, download them and get them right where I said there's the route folder on your hard drive and you could on your server and you could find that once you got up there this is what I mean by that when you first log into your web hosting you're going to see multiple folders on most servers but you really want to get in to this one remember this was my ftp dot jumpstart thailand agency dot com and here's the clue what do we call the first page of any website what's the home page called come on index nice so from upon the server stumbling around trying to figure out which of those folders is actually the public folder that I want to put my stuff in. I'm gonna look for that index file that's, my clip and even most hosting services. If you haven't published your site yet, they usually have a temporary page up there called in next that will be a clue. So if when you get your hosting that just says website coming soon, that's probably just a temporary index page you'll find when you log in with these ftp features, so now I know that actually jumpstart talent agency dot com is the route folder and all of the files and folders in my sight right here. So if I want to download the home page, I can just click and drag it over here. That's one way and dream, weaver says, do you want to get the dependent files? What the heck does that mean? So many extra warnings injury here would removers saying is that index page has a bunch of images inserted into it might even have some style sheets attached to it. Those air dependent files, if all you get is that one little index page, those images are going to be there, you won't see him so during movers think should I get everything that goes with that or not? And this time I'm going to say no, but you can see that it worked I copied the index page into mine jumpstart folder gonna copy one more page just so you can see that you can copy a one page at a time or more little pages so if I want the about paige, I can just click drag it over here and it copies right in I'm not going to get the dependent files just going to get that one file because it's more efficient in my experience to actually copy the entire images folder at once, and that will take a little bit, so I'm not going to bother to download this entire site, but I want to show you a couple things, so I'm going to get out of this, we're going to go back and we're going to set that route folder, and I want you to see that when I logged back in next time, these two folders will mirror each other better because here's the problem right now if I say, well, I've done a bunch of edits to my index patient, I'm done, I'm going to click on that index patient, I'm gonna upload, I'm just going put it up there no, don't worry about the dependent files, I'd turn that off, but look what dream weaver just did and this is a problem lots of new people have when they publish a site for the first time. Because I'm not locked into the root folder on my server because I'm not in the folder that has thean next page. That's actually the folder that's accessible to the real web when I just clicked on that image and said, put it up during liver, put it up too high in the structure, it put it outside that folder, and nobody will ever see that file as a result. It's a really easy mistake to make so it's a little advanced but it's such a common mistake. I wanted to point it out. I want to show you how to avoid that problem in the first place. We're going toe disconnect so the same way we put men into connect, we're gonna unplug it to this connect I'm gonna close the files panel now and just goes right back to where it wass but I'm gonna go back into that site, manage sites so you can do that here you can do it from the files panel select the site that I want to edit. That little pencil is my edit button click on that. I want to go back into that server set up area now I've set up the server, you can see that it's listed here so again, I want to select it. And you'll see again that pencil appears they can get back into this dialogue, whereas editing it so that's how you get back into their but now what I want is to set up that root directory right and well noticed out there that the root directory was called jumpstart talent agency dot com and rather than risk typos, which I am prone to, I'm going to use copy and paste because copy and paste is your friend you can quote me on that copy and paste is your friend, especially in web design because typos are death and one doesn't so look at that I screwed up even doing that is copy and paste that's kind of pathetic I missed the j and I need a forward slash so here's the two things to watch the root directory this field is always going to start with a forward slash that tells whatever program you're looking to go to route forward slash means go to root this will start to make sense after awhile but route is the top level the main level of your site and then you want whatever that folder was calling your folder might be called public or html docks or web pages on your server it depends on how your server works mine uses the domain name click save click save so all I've done is add that one element I'm just saving it, closing it back down again, when you go to use ftp it's really helpful to expand it so that little icon at the far right lets you expand that would know it makes a lot easier to see what you're doing gives you a clue here that this little plug in button is how you connect. I'm going to go through this and then I'm gonna stop and take questions I've pros, so I'm connecting to the internet and now look at this this time when I logged, and instead of seeing those three folders, it doesn't have the log folder in the mall directory folder that were up there. Those extra things my web host has, it just goes in till I mean folder and what's cool about that is that now, if I don't know it's something like audition, I just click on that and I clicked the get button and I say, no, you don't have to give me all the files again. It brings it right down into the right place. Now I have a perfect mirror between the folder on my hard drive and the folder on my web, sir, and the secret to that is making sure that that root directory field is filled out, and now all of the fdp features a war. Back and forth and even this kind of cool synchronized feature and what synchronized does is let's say you worked on the site you've got a perfect copy in both places and then you change maybe you update three of the pages on your local computer and then you forget which three you updated if you click on synchronize dreamweaver, we'll figure out where you made the changes and synchronize them so that they match now if you're doing special things or you have things on the server that aren't on your hard drive, don't use the synchronized option dreamweaver will fix things you know what fixed, but if you have a perfect copy of what's on your website and what's on your server synchronizes it really handy tool if you have sights set up in cs three is there any easy way to move the sites into csx? Bring all of the sort of info with it oh that's such a good question if you have a whole bunch of sites set up, there is a way tow export that site set up stuff, but I'm not sure it existed and cs three, if you're away from c s six to see see you could do that um and it gets a little advanced type I won't get into it, but honestly I'm not even sure that existed and cs three so I would probably just get all those folders and a place on your hard drive where they're easily easy to get to like I have a folder on my hard drive called websites and inside and I have an embarrassing number of website folders, but every time I do site set up, I know where to go on my hard drive and they're all in there and it just makes it easy to set them up, and the good news is, as I pointed out in the newer versions, those two steps are all it takes to do the basics. Of course, then you do have to do the ftp set up, so google that or go to dream weavers help files and you will find some fairly advanced tips about sharing things like the server set up because if you've got ah whole bunch of sites and the server information set up that can take a while to reset up. Um, but that gets a little advanced, so I'm going to differ a little other question, yeah, just to clarify for paula joe, I have a server set up for my photo blawg can I set up other websites on the same server? That depends on your hosting service? So what you should do is contact or hosting provider and ask them many servers are set up so that you can have unlimited domain names or five don't remains or it depends on the service you pay for, so within one monthly fee you can often have multiple sites I haven't unlimited set up arrangement and a virtual private server, which is a pretty advanced level setting but it depends completely on your host. So yes, and then there are some technical things you'll have to learn about how your web host works to set each of those up yourself the advantage of just doing one side at a time and paying your service provider to do that is they take care of all the setup on there and if you get a service where you can have multiple sites set up in one account you are going to have to learn how to do some things on the server that could be a little cryptic at first, but you'll usually find the directions on your hosting service and so just to clarify for ur ur before starting to make any website a dream where you have to have a host server we're going green. Oh goodness gracious, no, you could tell the website look at on your comm peter never put it online that's press sickly fine most of us don't do that most of us still tight because we want to share them with the world, but if your goal is just to create a little website to show a client or create a little website too run on your own computer, you'll see in a moment everything I do on my computer, I can view in a browser on my computer. When I started, I showed all those different websites, most of those are on this local hard drive. They're not on the public internet. A couple over, the more I was going back and forth, but you can view things in a web browser on your computer, just like you can in a browser that's somewhere else. Great great fields, another one from from todd, australia when you were showing the code view is the doc type html. Oh, you are an advanced use us, and I will come back to that. We're going to do a quick crash course on the most important actual tags, and I will go over the difference between html five and ex html doc tights. And if that doesn't even make sense to you will come. Ok, ok, so we got up to the server. We downloaded the site now if you wanted to download the whole thing and I'm just so you can actually shift, click and select everything at once and just say, get and dreamweaver will work for a really long time to download all of those files to your computer, and then you'll have them all locally. Since I already have it, I'm not going to waste that time. I don't have the magic of video fast forward, because this is live. So I'm gonna close out of that, and I'm going to remind you that we already have the jumpstart talent agency here and again. No, if you scroll in here, you can see I have jump start from the web jump start that I set up here. The copy that I already have, and sand box a little bit will create a new version. And we'll build that jumpstart site together from beginning to end.