Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Discover how to build web sites, prototypes, and more in this course on Adobe Dreamweaver CS6. Author James Williamson shows designers how to take control of their site by properly naming and structuring files and folders; how to create new documents and web pages from scratch or with starter pages; and how to add content such as text, images, tables, and links. James also provides a background on the languages that power projects built in Dreamweaver—HTML and CSS—and introduces the programming features in the application, for developers who want to dig right into the code. The last chapter shows how to finesse your project with interactive content such as CSS3 transitions and Spry widgets.
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 your files. In this movie we will explore that process in a little bit more detail and take advantage of several methods for uploading files to your remote server. I have a feeling that some of you at this point are saying, wait a minute we haven't even built our first file yet, why are we learning how to upload files to a remote server? Now it's a valid point. But the fact of the matter is, site management and file management is so ingrained into Dreamweaver's workflow process that it's very important that you understand how this works before you begin working on sites.
Since some people really like to upload files as they work, other people like to wait until the project is finished before they upload files and folders, and of course, as you're maintaining sites and working on sites that are already live, you're going to need to know this. So this is one of those features that I can teach at the beginning of the course or towards the end course. At this point I prefer to teach it at the beginning of the course, because it really gives you an overview of how Dreamweaver sees and manages all the files that you are working on and some of the options you have available to you. So this is a good thing to learn right off the bat.
The other thing that I wanted to say about this is it's not a requirement for you to take this course for you to have a hosted account on different servers. So I don't want to worry or alarm you about that. You could view this movie more as a demo because even if you do have a hosted account more than likely you're not going to have the directory structure on your remote server that I am going to show you. So really you should view this movie as a demo that you just sort of watch through. You probably won't be interacting with any of your own files during this particular exercise. So I've redefined my site to the 02_06, So if you are playing along with me at home and you do have a hosted account and you kind of want to do some of the stuff along with me, I've just redefined it to 02_06.
I am going to expand my Site panel by clicking on this little expansion icon right up here. Now again on the PC that's going to expand to take up the entire interface, on a Mac you're just going to have a slightly larger floating panel which you can then expand to be as large as you need it to be. When you upload or download files it's not required that you connect to the server originally if you have an account set up, Dreamweaver will sort of automatically do that for you if you tell the file to upload or download. However, if you really want to manage your files and you want to see what's going on in both environments the local files which you'll notice is now on the right-hand side and the remote files which will appear on the left-hand side, then this is a good view do it in.
And it's also a good idea to go ahead and go up right up to this little icon right here that says Connect to Remote Server. When I select that it's going to connect out to the remote server and I am going to see a directory listing right here of all the files currently on my Remote Server. Now if you have a hosted account and you did this along with me, my guess is your directory structure over here on the left-hand side looks a little bit different than mine, and that's okay, there's nothing wrong with that. Probably what you guys are seeing is something similar to mine and if you go out eventually and get a hosted account and you open it up, you're going to see something similar to this as well.
So what are you looking at? Well, we have all these numbered pages over here and those deal with error codes. So if somebody visits your site and a page takes too long to load and it times out or if they look for a page that just isn't there, one of these errors is going to be returned and the content on these pages will be displayed letting them know kind of what happened. In a lot of cases you might want to give them additional information, but hosted companies are going to have just their like default files in there for you, just as a starting point or to make sure that if an error code is given, a message shows up.
You're also going to have other things like this favorite icon (favicon), the _htaccess file that's going to handle your site caching and some of other of your site management capabilities. And those are all things that you will learn more about as you will learn more about hosting a site. And you'll also probably see things like for example a folder that says either www.public.html or even both of those, and if you see those folders, that's where your website is actually going to go. Now, I don't have time in this particular course to go into remote directory structures and kind of how to manage that, so I want to recommend something to you.
After you're done with this course, go out and watch Ray Villalobos' course Managing a Hosted Website, which you'll also find in the Lynda.com Online Training Library. He has got a really nice course setup that describes to you exactly how to manage your hosted environment and what all of that structure that you're going to be seeing and looking at actually corresponds to. Back to our task at hand, I want to start managing files backwards and forwards between my local files and my remote files. Well when I am in this view it's a simple matter of dragging-and-dropping.
Let's say that I wanted to see some of these error messages and make sure that they were consistent with my site design. So if I grabbed the 404 error for example, I can just come right over and drag-and-drop that into my root directory, or if I highlight it, I could also come up and these two icons are the get and put icons. You can think of put as placing or putting to the remote server. You can think of getting as grabbing from the remote server. So in this case I am going to highlight that and I am going to say get, and I am going to get this message that says, hey do also want to grab the dependent files for this folder.
Now dependent files are any resources that are linked inside this file and those are actual resources like external script files or external CSS files or images that might be placed on the page, elements that are needed or resources that are needed for that particular file. Now if you haven't changed those in any way you can say no, or if you just don't need them or in this case the particular file doesn't have any, you can say no and it'll just download that file only. Had I said yes and let's say that had images attached to it, it would have also download the images as well.
Okay, so there is my 404 file. If I double-click that icon I can open this file up in Dreamweaver. You can see it's also going to collapse the Site panel back down to a smaller size. Now I noticed this icon right here that tells me that I am still connected to my Remote Server, so I can still make any changes that I want to this. In this case, the 404 file, the default one, boring. 404 File Not Found, it's a common error, it just means that the file that this person was looking for doesn't exist or has been renamed or moved somewhere else, it's not here anymore. I want to give my users a little bit more information than that.
So I am going to close this and then I am going to open up this error file and if I turn Live view on, you can kind of see there's more to this. It says sorry we don't have what you're looking for; if you're looking for something you can search to find it. Here is some frequent places that you might want to go to, and here is a little more about our lovely academy. So there is a lot more information there, right? So what I am going to do is I am just going to save this. I am just going to do a Save As and I am going to save it right on top of that 404 file.
So I am going to save this and it says are you sure of that, oh yeah I am absolutely sure. And now that 404 file has all the logos, my CSS, all sorts of really cool stuff, so it's going to look a lot nicer and it will be a lot more informative. Everytime you want to upload or download a file, you don't necessarily have to expand this particular panel. Notice for example that I can still go right over here to the Site panel and I can even collapse that even a little bit further. And I could choose Put from here or I could go up to the Document toolbar and right over here I can choose to put this file.
So if I do this, if I choose Put, it's going to take it back out and it's going to overwrite the 404 file that was on the server. Now in this case it's going to say, what about dependent files. Well this one has a lot of dependent files. There are images here, there are CSS going on, there are some script files included with this. So this time I am going to say, yes, and that way Dreamweaver is going to handle a lot of things for me. What it's going to do is it's going to upload not only the 404 file, but any Web fonts that were included, you'll notice it's uploading images up there in the log file and if I expand this panel back out again and I take a look at my remote server, if I refresh this, which is the Refresh button right here, you can see that now there are directories that didn't exist there before.
The reason that those are there is of course I uploaded that file and told it to send all the dependent files as well. What's really helpful about that is if you are not sure which images are located on that page, but you know you needed to upload those, you can say Yes and it will go ahead and upload them. On the other hand, if you know the images that are on that page or the CSS and you know that those items haven't changed, you can say No. And just that file will upload or download and you won't need to worry about overwriting files that frankly don't need to be overwritten and waiting a long time for it to upload all of those resources that it doesn't need to upload.
You may have also noticed in that dialog box that you have the option of disabling that. So you can choose to always overwrite, send those files, never send those files, and you can choose to never see that dialog box again if you don't want to. You can see that uploading and downloading files is pretty easy to do, you can do it from a couple different locations. But what if you have to do a lot of uploading and you're not really sure what's going on within your site, what's new, what's not new, that sort of thing. Well Dreamweaver has a nice little feature called Synchronize, and if I go right up here in the Files panel I can click on this Synchronize with Remote Server.
When I do that, I can tell it to put just Selected Files or I can tell it that I want to synchronize the entire site. Now if I do that I have to be very, very careful and the direction that I place matters in this case. Notice that I can tell it to just put all the newer files on the local server to the remote, I can tell it to go out to the remote, grab any of that files that might be newer out there, maybe I have some team members update some files that I'm not privy to and I can grab those, or I can Get and Put newer files. Now I have to be very careful about Get and Put. Let's say that I have finished working on a file and I upload it and then a coworker of mine is working on the exact same file, but doesn't tell me, finishes it an hour later and uploads it.
Guess what happens? It is overwritten. So in cases of working with a team, you want to be very careful about getting and putting files and you probably want to work with some type of version control so you know who is working on what. Now in this case I am just going to tell it to put newer files to remote. I never ever want to check this box. I wish they would just get rid of it, because this box is the ruin your day box is what I call this checkbox. Delete remote files not on the local drive. Wow! So that means that all of these cgi files, the htaccess, favicon, all that, one fell swoop, gone! So be very, very careful about that checkbox.
In fact never check it. Now the good news is we have this little preview which is going to scan through all the files on my site and then it's going to tell me what's going to happen. So I don't have to commit to this until I'm happy with it, and I can even turn things on and off. So for example, this 400.shtml, I could turn that off. I don't actually need to upload that, I've already got that out there. So I can ignore that one. I could ignore this one. I can select whole groupings of them and tell them to ignore, so any of these within the access directory actually don't need to go up.
Now you can also cloak directories and files by cloaking, I will show you that in just a second. You can go ahead and just select that dialog box and say, hey, these types of files, don't ever upload those. So Photoshop files for example, the PST files that you're building your site from, you might just say, hey, you know what, don't upload those, they're big, they don't need to be on my remote server anyway. I am going to click OK and Dreamweaver is about to do its thing. It's going to take all the files that are on my local site and it's going to push them up to our remote site. Now it's going to take a while to do that. So while it's doing that I want to show you something.
Once that's done I am going to go up to Site and choose Manage Sites. I am just going to edit this site, because I want to show you something really quickly. So if I go into my Advanced Settings, notice I have a section for Cloaking. If I Enable Cloaking I can turn on which files I want cloaked. So I could cloak .PSD files, I could cloak Word documents, things like that that might be in your root folder that you don't want uploaded to the remote server just because of size or they're not appropriate to go online you can cloak those files as well.
Okay, I am going to finish with that and now you can see that on my remote server I have all my files including my index file over there as well as. And so now if I go to the browser and browse out to my site, which is learn.rouxacademy.com, interacting with your remote server is such a common part of your design and development process that Dreamweaver has put those tools at your fingertips, almost every step of the way. It's here in the site panel when you're working on a site, it's here on the Document toolbar, it's up in the Menu, there are so many different areas for you to do get and put.
It's in so many places woven into Dreamweaver that whenever you're working on a file, you always have the option of getting it from the server or putting it to the server and what that does for you is it reduces the amount of time that it takes to go from creating or updating files to having that content live online.
There are currently no FAQs about Dreamweaver CS6 Essential Training.
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.