California Career and Technical Education Standards

• IT.B.B2.2 Understand the differences between various Internet protocols (e.g., http, ftp, ...
• IT.B.B5.1 Understand the purpose, scope, and development of a Web site.
• IT.B.B5.5 Know strategies for optimizing Web design for fast delivery and retrieval.

California Academic Content Standards (Reinforced)

• ELA.9-10.R.CAGT.2.6 Demonstrate use of sophisticated learning tools by following technical direction...2

• "The files are INSIDE the computer!!!" - Hooks / Set

  Have you ever seen the movie "Zoolander" with Ben Stiller and Owen Wilson?  In that movie, the character played by Owen Wilson is named Hansel, a famous male model.  Being rather dim-witted, self-absorbed and technically challenged, Hansel rather accidently learns that some important computer files that show how Zoolander was brainwashed are inside of a certain computer.  Rising to occasion, Hansel brings the computer to a crowd and tells everyone he's going to show everyone the files that are "in the computer."  He takes the computer, raises it over his head and smashes it to pieces on the ground, hoping to show everyone some paper files that prove his point.  Obviously, the computer merely breaks into a million pieces and the real computer files are probably gone for good.

  Well, we're not quite that technically-challenged as Hansel, but we haven't yet learned how to upload our web site files out to the Internet.  

  Today you'll find out how to send files to the Internet for your business, finally making your site "live" and viewable by the public.

   
• Background information - Lecture

  You should now have your local files for your business partner ready to go to the Internet.  The domain name and web host should have been chosen and arranged for by now.  You are now ready to transfer your files from your local site to the hosting server, the company you chose to host your domain.  This is called the “remote” site.  You will use Dreamweaver to manage both the local and remote files. 

  What you will need:

  You will need the site address for putting files into the remote site.  Typically when you set this up with your hosting company, they should have shown you what your site FTP address is.  It would have been possibly in an email to your business owner or perhaps on the management screens at the hosting company when you were logged in.  The remote site in our example today is   ftp.billslandscaping.com   .  You will also need the FTP username and password to access the remote host.  Without it you cannot do anything at their site.  The administrator name and password for the site is not necessarily the FTP username and password.  It’s handled differently on various hosts.

   
• Demonstration #1, setting up the site in Dreamweaver - Demo / Modeling

  First turn off your monitors and watch this demo.  Follow along with the handout “Steps to setting up your local and remote site in Dreamweaver.”  (See the Resources and Materials inside this section.)

  You will go to Dreamweaver and choose to MANAGE your sites.  You go to the menu bar and choose SITES and click on MANAGE.   Choose your existing local site that you’ve created for your business.  Choose to EDIT this business site.  If you haven’t created that yet you would have to CREATE a site. On the ADVANCED tab, choose LOCAL INFO and be sure that you’ve correctly identified your local copy of your business files (you may have several sites by now in this class).  Be sure the local root folder for this business’s files has been correctly chosen as well as the default folder for the images. 

  Now you’ll go to ADVANCED tab, REMOTE INFO.  The ACCESS mode is probably set to NONE so let’s change that to FTP (File Transfer Protocol).  This is the method for transferring the files from our local machine or Intranet out to the Internet.  You’ll see that there are other methods for use there but in most cases FTP is the method of choice. 

  In the FTP HOST area, type in the address for your company on that hosting server, the information you received from your hosting server company.  In this case we’ll simply type in   ftp.billslandscaping.com     and nothing else.  No http, no colons, no slashes.

  We’ll leave the “Host Directory” area blank.  Most servers know who we are and where our files go just by the username and password, but that again is different on various servers. 

  In the “Login” and “Password” area, type in your username and password you received for performing FTP tasks on this server for your site.   That is also some information that you would have received either in an email from the company or would have to be set up when you were on their web site when managing the hosting site.  The “FTP USERS” is usually a tab at your hosting server that you choose to set up. 

  Now that we’ve got everything typed in, click on TEST and see if it works.  If you’re successful then you can click on O.K. and DONE.  The option to “save” the password is up to you.  When you use logins to login to our local computers and use your own private profiles (such as we do here at this school), it could be safe to save your password as long as you log off the local computer when finished.  If this is a public computer like at a library and the users share profiles then you would never want to save passwords locally.

  If Dreamweaver says it was unsuccessful at contacting the remote host then you’ve misspelled something.  Check the name of the remote host, your FTP username and password.  It may require some checking on-line at the hosting company’s website or it may involve a phone call for tech support if you can’t figure it out.

  Now turn on your monitors and do what I just did.

   

  • Steps to setting up local and remote site in Dreamweaver [ Download ] This is a student handout, Steps to setting up local and remote site in Dreamweaver.doc
• Students Perform The First Task, Setting Up Remote Site - Independent Practice

  Have all students follow the handout:  “Steps to setting up your local and remote site in Dreamweaver.doc”  (see attachments in section above).  Help students as needed.

   
• Demonstration #2, Next Step, How To Upload Your Files To The Remote Host - Demo / Modeling

  This is fairly simple but turn off your monitor and watch this demo.  I'll be following the handout "Uploading Files from the Local Site to the Remote Site.doc”  See the resources/materials section within this activity below.

  Now that the remote host has been set up in Dreamweaver, you will choose to upload your local files on the local host (your computer or our Intranet) to your remote host.

  In Dreamweaver, after we’ve set up the local site and remote host, we will choose to upload or “put” these files (as FTP calls it).  Go to the FILES window open at the right of the screen.  If it’s not open, go to WINDOW in the menu at the top and click on FILES.  That window should pop up at the right of the screen but you may have chosen to have such panels and windows open various locations so check all over your screen.

  Click on the first file that visitors would come to at your site.  It’s probably called “index.htm” or it could be “home” or “default”.  Either way, open that file and check it for accuracy.  Whether or not you have that file open, you can right click on that file in the “FILES” window and choose to “PUT:.  That tells Dreamweaver to upload the file out to the remote host.  It may ask you if you want to put “dependent” files.  That would be the files that are needed to show the entire web page, like CSS and images.  Choose “yes” and the files and folders will all be uploaded. 

  Alternatively you can choose to “put” the entire site by going up to the / at the top of the files window.  But that would put everything in your entire site, including test files, Photoshop files that you used to create your web graphics, etc.  These files are not needed and are sometimes very large, so use this option of putting the entire site cautiously.

  Now you can go view the actual site on the Internet by going to your web browser and typing in the site address, not the FTP address, but in our demonstration it would be www.billslandscaping.com.   

  If you make changes to local files, you would save the changes like you normally do, and then again choose to “put” the files.

   

  • Uploading Files from the Local to the Remote Site [ Download ] This is the student handout for the 2nd demonstration/activity "Uploading Files from the Local to the Remote Site"
• Students Perform The Second Task, Put Their Files To The Remote Site - Independent Practice

   

  Have all students follow the handout:  “Uploading Files from the Local Site to the Remote Site.doc”  (see attachment in the section above).  Help students as needed.