Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Uploading files

From: Dreamweaver CS6 Essential Training

Video: Uploading files

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.

Uploading files

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.

Show transcript

This video is part of

Image for Dreamweaver CS6 Essential Training
Dreamweaver CS6 Essential Training

90 video lessons · 54556 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 1m 4s
    1. What is Dreamweaver?
      1m 4s
  2. 5m 44s
    1. Welcome
      1m 4s
    2. Using the exercise files
      2m 17s
    3. Learning web design
      2m 23s
  3. 1h 0m
    1. Looking at the Welcome screen
      5m 9s
    2. Exploring Windows and Mac interface differences
      5m 6s
    3. Arranging panels
      8m 44s
    4. Managing workspaces
      10m 14s
    5. Exploring the Application toolbar
      6m 21s
    6. Exploring the Document toolbar
      8m 47s
    7. Working with the Property inspector
      9m 30s
    8. Using the Insert panel
      6m 30s
  4. 53m 3s
    1. Understanding basic site structure
      3m 46s
    2. Exploring file naming conventions
      2m 10s
    3. Defining a new site
      5m 23s
    4. Managing files and folders
      7m 57s
    5. Adding remote servers
      7m 4s
    6. Uploading files
      12m 46s
    7. Previewing in browsers
      9m 11s
    8. Managing multiple sites
      4m 46s
  5. 36m 41s
    1. Creating new documents
      6m 49s
    2. Setting up new document preferences
      5m 30s
    3. Setting accessibility preferences
      6m 49s
    4. Working with starter pages
      4m 32s
    5. Managing starter pages
      13m 1s
  6. 37m 23s
    1. Getting text into Dreamweaver
      8m 43s
    2. Importing Word documents
      4m 6s
    3. Adding structure to text
      7m 35s
    4. Creating lists
      4m 35s
    5. Creating definition lists
      4m 0s
    6. Using the Quick Tag Editor
      8m 24s
  7. 44m 41s
    1. Exploring the Code toolbar
      5m 41s
    2. Setting code preferences
      7m 19s
    3. Using code hints
      8m 8s
    4. Wrapping tags
      5m 7s
    5. Adding comments
      6m 29s
    6. Using snippets
      7m 32s
    7. Formatting source code
      4m 25s
  8. 1h 19m
    1. Setting CSS preferences
      9m 32s
    2. An overview of the CSS Styles panel
      9m 23s
    3. Creating a new CSS rule
      6m 42s
    4. Using the CSS Rule Definition dialog
      7m 25s
    5. Organizing styles
      7m 22s
    6. Modifying style properties
      6m 17s
    7. Controlling CSS through the Property inspector
      6m 37s
    8. Attaching external style sheets
      5m 54s
    9. Using CSS visual aids
      7m 3s
    10. Using CSS Inspect
      6m 48s
    11. Using the Code Navigator
      6m 39s
  9. 1h 11m
    1. Managing assets in Dreamweaver
      7m 30s
    2. Setting external image editing preferences
      4m 26s
    3. Placing images on the page
      10m 12s
    4. Exploring Photoshop integration
      7m 17s
    5. Modifying Smart Objects
      9m 42s
    6. Modifying image properties
      8m 4s
    7. Styling images with CSS
      6m 45s
    8. Using background graphics
      7m 28s
    9. Positioning background graphics
      10m 10s
  10. 36m 23s
    1. Link basics
      3m 17s
    2. Setting site linking preferences
      2m 19s
    3. Creating links in Dreamweaver
      9m 17s
    4. Using absolute links
      3m 43s
    5. Using named anchors
      6m 41s
    6. Creating an email link
      5m 25s
    7. Creating CSS-based rollovers
      5m 41s
  11. 44m 30s
    1. Reviewing table structure
      5m 20s
    2. Importing tabular data
      6m 46s
    3. Creating accessible tables
      6m 11s
    4. Exploring basic table styling
      9m 42s
    5. Styling alternate rows
      8m 57s
    6. Creating custom table borders
      7m 34s
  12. 59m 15s
    1. Understanding how forms work
      2m 45s
    2. Reviewing form design
      3m 44s
    3. Creating accessible forms
      5m 16s
    4. Setting form properties
      2m 39s
    5. Using the fieldset and legend tags
      2m 52s
    6. Inserting text fields
      6m 56s
    7. Inserting list menu items
      7m 54s
    8. Inserting checkboxes
      4m 14s
    9. Inserting radio button groups
      3m 52s
    10. Inserting submit buttons
      2m 25s
    11. Exploring basic form styling
      8m 2s
    12. Exploring form element styling
      8m 36s
  13. 33m 25s
    1. Adding CSS3 transitions
      8m 29s
    2. Spry overview
      2m 44s
    3. Using Spry widgets
      3m 57s
    4. Adding Spry effects
      8m 1s
    5. Using the Widget Browser
      7m 4s
    6. Extending Dreamweaver
      3m 10s
  14. 1m 2s
    1. Additional resources
      1m 2s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS6 Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.