In this lecture, our instructor, Candyce Mairs, goes over uploading files to a web server. She shows how to use the put function, explains what dependent files are, and uses the files panel to upload files.
Once the web server has been set up within Dreamwaver, you use the Put command to upload our files to the server
There are 2 ways to do this
If I have a file open that I have just modified, I will use the Site menu to upload the file
You can use Site->Put or Ctrl/Cmd U
Since I already have the file open, that is a great method for uploading a single file at a time
The Files panel does a much better job if you need to upload more than one file at a time
Simply select the various files you wish to upload, and click the Put arrow
Uploading Files to the Web Server
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
Let's take a look at uploading some files into the Web server, and then viewing them out on the Web.0000
I have my Wanderlust Travel website all set up here, and I did install and give Dreamweaver the information to connect with my Web server; now, how do I go about doing that?0008
Well, the easiest method is to just choose some files from within my Local Files panel; since this is the first time I am going to upload information, I have to be careful how I am going to do this.0021
And because I have some many files here, I don't really need to upload everything to the server; normally, if this was your first time uploading, you would want to upload everything.0035
What I am going to do is limit this to my homepage for now--so how do I do that?0047
I am going to select my homepage (which is index), and I am going to click the blue arrow that says "put"; notice, it says "Put files to the remote server"; I'll go ahead and do that.0055
Now, it is asking me about dependent files; I will say yes, since this is the first time.0071
While it is uploading those, I will give you an idea of what a dependent file is: a dependent file is a file that this page needs in order to work correctly out on the Web.0078
Let me go out into Firefox and go ahead and preview this...so, I'll go out to Firefox; I'll plug in my Web address, and that will be cmairscreate.com; and this will be wanderlust; and let's see the file.0091
Guess what--there it is; now, because I said "upload the dependent files," my images were uploaded; my styles were uploaded; you can see, my navigation doesn't quite have all of the styles in it, so I'll have to check that out.0111
But if I scroll, even my slideshow is all set up; Dreamweaver asked me about it and knew exactly which files to upload, and my page is all set.0130
I can use the Files panel; whatever files I select within this panel--those are the files that, when I click the blue arrow, are going to go up to my Web server.0141
I can have this file open and accomplish the same thing if I go up to Site, Put; so, if the file is open in Dreamweaver, right here, I can go up to the Site menu and choose Put, and it would upload it exactly the same way.0156
What I tend to do is: if it's a single file, I will quite often have it open; I have just modified it, and then I will go in this direction.0173
If I want to upload a bunch of files, I will go ahead and select them within the Files panel and click the blue Put.0183
It is as easy as that to upload to your Web server using Dreamweaver; I had it all set up--the Web server information was there; my connection was working; so, I select the file and click the blue arrow to put it onto my server.0193
Just make sure you always go out into the browser to double-check and make sure it is looking fine once it is out on the Web.0210
That is how you upload a file to the Web server.0219
Educator.com recommends Adobe Dreamweaver CS6 for use with the Educator Dreamweaver course. Adobe Dreamweaver CS6 software enables you to make cutting-edge web designs and mobile apps while generating HTML5 and CSS3 code. Use the fluid grid layout system and HTML editor to design projects for smartphones, tablets, and desktop screens. Support for CSS3, jQuery Mobile, and Adobe PhoneGap Build frameworks streamlines the mobile app development process. Check your designs with Live View and Multiscreen Preview. Add rich typography and CSS3 transitions to create compelling projects.
Educator.com recommends the Adobe Dreamweaver CS6 Digital Classroom to go with our Dreamweaver course. In this book-and-DVD package, expert instructors provide a complete course in basic Dreamweaver that you can access at your own speed. Step-by-step instructions in the book are supported by lesson files and video tutorials on the DVD, presenting the newest version of Dreamweaver in 16 self-paced lessons. You'll learn to use style sheets, dynamic HTML, multimedia, databases, and much more to design, develop, and maintain your website.