Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Whether you like to upload your files incrementally throughout the development process or all at once after a project is finished, Dreamweaver gives you a variety of options for connecting to your server and uploading files. In this chapter, we'll explore the Files panel in a little more detail and take advantage of several methods for uploading your files to your remote server. So I've defined the 16_05 folder as our root directory. And the first thing I want to do is expand my Site panel out a little bit more so I can see the full panel.
Now, the way to do that, let's come over to the Files panel and you'll notice a series of icons and you're looking for this icon, the far right one. That is the Expand icon. You want to go ahead and click that. Now, Mac users and PC users are going to notice a little something different here. PC users, the Site panel pretty much takes over the whole screen. It just blows up and the rest of Dreamweaver sort of goes away. For you Mac users, you'll notice that your Site panel is expanded but it's also floating over Dreamweaver itself. You're free to resize that, move it around, place it wherever you want.
It's really a personal choice and in the capabilities remain exactly the same. So the first thing you want to do when you're uploading files or downloading files from your remote server is to connect to it. And you'll notice that right up here in our Site panel toolbar, we have this little plug symbol that is the connection to the remote host indicator. I am going to go ahead and click that. When you do that, it's going to go out connect to your remote site and it's going to retrieve your remote data. So what I'm seeing in the left pane right now is my live site for my ExploreCalifornia.org.
On the right-hand side is my local site. So that's my development environment. I've got my remote environment on the left. I've got my local development environment on the right-hand side. Now more than likely, the first time you access your remote server, there won't be a whole lot on there. Your site that you are defining locally contains all the files. So probably the things that are in your remote server are just some of the default things that your web hosting company has placed. For example, we have all these error messages, 400, 401, 403, 404. And if somebody reaches your pages in error or can't find a certain page, those messages are going to show up.
So one of the things I am going to do is I am going to go ahead and select all six of those on the remote server, and I want to download those to my local site so that maybe I can redesign them and make them fit my site. So there are a couple different ways to do this. And as a matter fact I am going to do this one at a time so I can show you a couple of the different methods. Well, first off, if you select a file or series of files, you can right up here to your Site panel toolbar, highlight the Get files from remote, and just click. Now, anytime you upload or download a file, Dreamweaver is going to ask you this question, unless you tell it not to show it again.
It's going to ask you if you want to get any of the dependent files. Dependant files would be files that are linked to this page such as CSS files or images that are on the page, that sort of thing. Any other external files necessary for people to view that file or for that file to be functional. In this case, I am just going to say No because I only want that particular file. It's tempting to turn that off, but I'll be honest with you. Sometimes I do want to the dependent files to upload or download, and sometimes I don't. So I pretty much just leave that dialog box coming up, sort of knowing beforehand what I need to do it. All right.
So there now locally I have my 400.shtml. So that's good. Now, there are other ways to do this as well. I could select the 401, for example, and I could right click that and I could choose Get. Same dialog box comes up and I have my option and then I can go ahead and download that file. Now, there are other ways to doing this as well. Let's say I select the remaining files right here. I can then take those files and simply drag them from one pane to the next. So I can drag them right there into the root directory. When I let go, it's going to ask hey, you want the dependent files? And in this case, let's say No.
It's going to go ahead and bring all those down at the same time. Now obviously, the more files you move at once, the longer it's going to take and how fast this operation is, is largely dependent upon your Internet connection. So for really, really large file transfers, you should have a fairly fast connection and you should have little time to kill in between uploading or downloading all those files. That's especially true for the first time you upload your site as you are going to have a large amount of files to upload all at once. Okay, I want to take a look at one of those files that we just copied over.
So in my Files panel, I am just going to double click the icon for the 404 page, and sure enough it says File not found. The requested URL does not exist. That's a boring looking page. But that's the default 404 page from my web hosting company. And honestly I'm not paying them to design cool 404 sites. So I'm okay with that. What I am going to do though is go over to my assets folder and I'm going to open up my own error page, which I like better. It fits the branding of my site. It gives them a message that maybe a little humorous. I'm trying to diffuse the situation, and below that I'm giving them some contact information and forms to fill out in case there's a real problem going on.
So I want that to replace the 404 file but my Web server uses that 404 page where there is an error. So I just can't use this error.htm. So what I am going to do, I'll close the 404 file and then I am going to do a Save As. Going in my root directory, I am going to overwrite that 404 page and save it. Now, when I do that, notice that it gives me the option of updating links. So I'm going to choose Yes. That way all my graphics and everything will be current on the page. And there now, the error page is now the 404 page. Well, it's the 404 page locally, but it's not the 404 page remotely.
So in order to do that, I've got to expand the Files panel back out again and either drag and drop it over, or use my icons right? Wrong. When you're working on a page, if you're far enough long in your site process that your site's already live and you're just doing maintenance or if you are just doing what we are doing, you can upload and download files at any point in the design process. So right after saving my 404 file, I notice on the Document toolbar here are those Get and Put icons. If I grab that pulldown menu, notice that I can put this file on my remote server.
I am going to put it, and this time I am going to put the dependent files, just in case I have a graphic on this page that I haven't uploaded to my remote site yet. So I am going to go ahead and do that and off it goes. Now, you'll notice that if there are some problems, like maybe there's a file remotely that is newer than the file you have locally, Dreamweaver is going to let you know about that. Notice that its telling me that hey, your CSS file has changed on the remote server since you last put it. Putting the file may override changes. Do you want to put the file anyway? In this case, I am going to say Yes. Dreamweaver is really just trying to save you from yourself at that point.
It's just going to go ahead and say Yes to All, and make sure that you don't overwrite any changes that were just made by you or another team member. Now, because we're uploading dependent files, notice that it's taking a little bit longer and it gives you a list of all the files that it's uploading as well. Now, there is yet another way to upload files. If you wanted to upload one of these other files, let's say you've worked on one of these other files and you want to upload it as well, you could simply right click it in your Files panel and choose Get or Put. The Files panel doesn't have to be expanded either. You can highlight a file and used Get and Put right here as well.
So interacting with your remote server is such a common part of your design and development process, Dreamweaver has put those tools at your fingertips at almost every step of the process. In addition to making it easy to transfer files between servers, Dreamweaver also have some pretty powerful site management tools and we are going to explore using them in our next movie.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.