Docstoc

Transferring Files Using Dreamweaver

Document Sample
Transferring Files Using Dreamweaver Powered By Docstoc
					Web Design
           Santa Barbara




Transferring Files Using
Dreamweaver CS4




                            Scott Nelson
                    Web Design Santa Barbara
                      www.WebDesignSB.com
                   Updated December 10, 2011
Transferring Files Using Dreamweaver
                                                                                                   December 10, 2011



Table of Contents
Table of Contents ....................................................................................................... 2
Background and Purpose ............................................................................................. 2
Site Definition ............................................................................................................ 3
  Site Preparation ...................................................................................................... 3
  Disk Space ............................................................................................................. 4
  Local Info ............................................................................................................... 5
  Remote Info ........................................................................................................... 7
Transferring Files ....................................................................................................... 9
  Connecting ............................................................................................................. 9
  Refreshing the File List ............................................................................................. 9
  Uploading – Putting ............................................................................................... 10
  Downloading – Getting ........................................................................................... 10
  Synchronization .................................................................................................... 10
Creative Commons ................................................................................................... 14



Background and Purpose
Dreamweaver CS4 not only allows the design and creation of web pages, but it allows you
to transfer files to (Put) and from (Get) an Internet web server.


                                                                         Web server hosting
                                                                         your web site: this is
  Changes are made
                                                                         the Remote Site.
  to your Local Files
  and then Put
  (uploaded) to the
  web server



                                                   Internet
 Happy web
 developer using                                                                                        Happy web
 Dreamweaver CS3                                                                                        site visitor

                                                    Files on the web
                                                    server can be
                                                    viewed
                                                    (downloaded) by
                                                    web site visitors



In Dreamweaver, you always work on a local copy of the web site files. Once you have
created, modified or deleted your local files, those changes can be transferred to your
hosted Internet web site. Web site visitors cannot see web site changes that are on your
local site. Only the changes you transfer to the Internet web server can be seen by web site
visitors.



Document1
                                                      Page 2 of 14
Transferring Files Using Dreamweaver
                                                                        December 10, 2011

Dreamweaver has an expanded Files panel that allows you to view the files and folders on
your Local Files (by default on the right) and on your Remote Site (by default on the left).




Site Definition
Before you can transfer files to and from your web server, you need to prepare the local
site, and setup Dreamweaver to connect with your Internet web site hosting server.

Site Preparation
As discussed in the Production Folder documentation, it is important that only web-ready
files are transferred to the web site. Make sure you have removed any files, documents and
images that are not an active, or soon to be active, part of the site from your Local Root
folder. The website folder is your Local root folder.




Document1
                                        Page 3 of 14
Transferring Files Using Dreamweaver
                                                                          December 10, 2011


Disk Space
Web site hosting services allow you to upload a specific amount of files to the web server,
before you incur additional charges. Though many hosts offer ridiculous (what I mean by
ridiculous is that if all of their customers were to use the maximum amount of space, there
would not be enough disk space on the server to accommodate all of the sites) amounts of
space, it is important that you know the footprint or total disk space your site takes up.

1) Open Windows Explorer, right-click on the website folder, and then select Properties
   from the pop-up menu.




2) The sum of all the files in your site is the Size field. In this example, Scott Place on
   the Web! has a footprint, or total disk space, of 199 KB.




Document1
                                         Page 4 of 14
Transferring Files Using Dreamweaver
                                                                           December 10, 2011




   Note that the Size on disk figure is larger. This has to do with how the disk is
   segmented. This will vary from disk to disk.

Local Info
Before you open and edit an HTML file, you must first define a site. If you do not, it is quite
probable that Dreamweaver will render any links in the page nonfunctional.

At the very minimum, you must define the Site Root folder. In this example, you will enter

3) If you are in the Digital Arts Center, use Finder or Windows Explorer to copy your Site
   Root folder from your removable media to a working share on your workstation.

4) Open Dreamweaver and select Site, New Sites…, and then click on the Advanced tab.
   a) Site name:
      You may enter virtually anything in this field. It will only show to you. In this
      example I will enter: Scott's Place on the Web!
   b) Local root folder:
      This is the single most important entry. This is the folder in which your home page,
      or the first page of your web site will reside. If you have followed the Production
      Folder method, this is the website folder, inside your Production Folder.

       The website folder, when properly selected, will appear in the Select: field. Also
       notice that you will not see any files in the web site folders. This is by design.




Document1
                                         Page 5 of 14
Transferring Files Using Dreamweaver
                                                                        December 10, 2011




   c) Default images folders:
      This should be a folder named images that is inside your local root folder. If you
      created and exported your image slices from Photoshop, you will have this folder
      already created. If you do not have this folder, create one.
   d) Select Links relative to: Document
   e) If you are using the Tango Students Hosting, then
      HTTP Address: http://StudentX.com.TangoStudents.com/
      (where X is the student number you were assigned)
   f) Select Case-sensitive links: Use Case-sensitive link checking
   g) Select Cache: Enable cache




Document1
                                       Page 6 of 14
Transferring Files Using Dreamweaver
                                                                         December 10, 2011




Remote Info
The Remote Info section of this documentation is written for students hosting on the Tango
Students Internet web site host. If you are hosting your site on another server, you settings
will be different.

1) Click on the Remote Info category.

2) Change the Access to FTP to reveal the setting for a File Transfer Protocol (FTP)
   connection.
   a) FTP Host: ftp.TangoStudents.com
   b) Host Directory: studentX .com/wwwroot/ (where X is the student number you
      were assigned)
   c) Login: studentX (where X is the student number you were assigned)
   d) Password: as assigned
   e) Use Passive FTP checkbox checked
   f) Maintain synchronization information checked




Document1
                                        Page 7 of 14
Transferring Files Using Dreamweaver
                                                                         December 10, 2011




   g) Click on the Test button. You should receive a message letting you know that Adobe
      Dreamweaver CS3 connected to your Web server successfully. Click on the OK
      button to clear the message.




       i)   If you do not receive this message, check your settings, especially your password
            carefully and try the test again.

   h) Click on the OK button to accept the settings and close the Site Definition window.
      The web site cache must be created and you will be prompted. Click on the OK
      button to clear the message and create the site cache.




Document1
                                         Page 8 of 14
Transferring Files Using Dreamweaver
                                                                           December 10, 2011

3) Click on the Done button in the Manage Sites window. In the Dreamweaver Files panel
   you should see your site files and folders.

Transferring Files
It is often desirable to view both the local and remote files at the same time. Clicking on the
Expand button in the Files panel un-docks and expands the Files panel to view both
Local Files and the Remote Site file. Clicking on the Expand button again will restore the
Files panel to the docked view.




You do not need to expand the Files panel in order to transfer files.

Connecting
The Connect button connects your local workstation to the
Internet web server. However, Dreamweaver automatically
connects if the command you choose requires it, so the
Connect button is not something you really need to use
directly.

Refreshing the File List
The Refresh button causes Dreamweaver to refresh the list of
files in the active Files panel window. My experience has
shown that Windows/OS the local files automatically refresh
quickly. On Mac/OS, I notice that after creating new files, the
new file sometimes does not display in the Files panel until
you click on the Refresh button.



Document1
                                         Page 9 of 14
Transferring Files Using Dreamweaver
                                                                            December 10, 2011


Uploading – Putting
When you want to upload, or Put, a file or folder to your Internet
web site, click on the file or folder in the file list in the Files panel
to select it and then click on the Put button. You can also Put
directly from the page editing window, either Design, Split or
Code views.

The very first time you upload your site, click on the top
folder, or site root, and then on the Put button.

You will be prompted, "Are you sure you wish to put the entire site?" Click on the OK button
to upload the entire site. Putting the entire site is how you perform the first upload of your
web site.




After you have put the entire site, it is a good idea to test the site in a web browser, making
sure all image and render correctly and that all links work.

To keep the site up-to-date, I recommend using the Synchronize function explained later
in this document.

Downloading – Getting
Downloading, or Getting, a file, folder or site is similar to
Putting. To Get files, first click on the Connects to remote
host button, and then click on the Expand button to see a list
of files on the Remote Host. Select a file, folder or the entire
site in the Remote Site window.




Click on the Get button to transfer the file form the Internet web server to your local
computer.

Synchronization
Synchronization is the coolest thing since sliced bread. Dreamweaver synchronization
function keeps track of where the latest versions of each file on your web is. When invoked,
it will transfer all of the files necessary to make a mirror copy of the site, either the Remote
Site or the Local Site.




Document1
                                           Page 10 of 14
Transferring Files Using Dreamweaver
                                                                          December 10, 2011

1) In the Files Panel, click on the Synchronize button.

2) In the Synchronize menu, do one of the following:
   a) To synchronize the entire site, select Entire Site Name
       Site.




   b) To synchronize selected files only, select Selected Local Files Only (or Selected
      Remote Files Only if the Remote view of the Files panel was where you made the
      most recent selection).

3) Select the direction in which you want to copy the files. You will perform one of the three
   (a, b or c) possibilities below. In most cases, you will perform the first option, Put
   Newer Files to Remote.

   a) Put Newer Files to Remote
      This command Puts (uploads) all the local files that do not exist on the Remote Site
      or have changed since the last upload.




       Select whether to delete the files on the Remote Site that do not have counterparts
       on the Local Site. If you select Put Newer Files to Remote and you select the
       Delete option, then any files in your Remote Site for which there are no
       corresponding files in the Local Site are deleted.

       Selecting Delete remote files not on local drive is a great option to make sure
       your Local and Remote sites are exactly in sync. It will also delete files that are
       orphaned when you rename a file in the Local Site. Normally, you would have to find
       the file on the remote site and delete it manually.

       i)   Click the Preview… button.

   b) Get Newer Files From Remote
      Downloads all the remote files that don’t exist locally or have changed since the last
      download.



Document1
                                         Page 11 of 14
Transferring Files Using Dreamweaver
                                                                          December 10, 2011




       Select whether to delete the files on the Local Site that do not have counterparts on
       the Remote Site. If you select Get Newer Files From Remote and you select the
       Delete option, then any files in your Local Site for which there are no corresponding
       files in the Remote Site are deleted.

       i)   Click the Preview… button.

   c) Get And Put Newer Files
      Places the most recent versions of all the files on both the local and the remote sites.
      No files are deleted from either site.

       i)   Click the Preview… button.




4) Before you can synchronize the files, you must preview the actions Dreamweaver
   performs to accomplish this task. If the newest version of each chosen file is already in
   both locations and nothing needs to be deleted, an alert appears informing you that no
   synchronization is necessary. Otherwise, the Synchronize dialog box appears to let you
   change the actions (put, get, delete, and ignore) for those files before executing the
   synchronization.




Document1
                                         Page 12 of 14
Transferring Files Using Dreamweaver
                                                                            December 10, 2011




   a) Verify the action that will be performed for each file. If you are satisfied, click on the
      OK button.
   b) If there are files marked for deletion, you will be prompted one more time to confirm
      the deletion.




   c) To change the action for a particular file, select the file, and then click one of the
      action icons at the bottom of the preview window.

       In this example, I do not want to delete the file mike.htm on the Remote Site, so I
       click on the file, and then on the Ignore Selected Files button.




   d) Click on the OK button to continue with the synchronization.
   e) Other options:
      i) Compare
          The Compare action works only if you installed and specified a file comparison

Document1
                                        Page 13 of 14
Transferring Files Using Dreamweaver
                                                                         December 10, 2011

           tool in Dreamweaver. If the action icon is grayed out, the action cannot be
           performed.
       ii) Mark Selected Files As Already Synced
           This option lets you specify that the selected file or files are already
           synchronized.

5) Click on the OK button to synchronize the files. You can view or save the details of the
   synchronization to a local file.

Creative Commons


This document was created by Scott Nelson for the purpose of assisting students of the
Santa Barbara City College, Multimedia Arts and Technologies, Web Design I, (MAT153)
class.

This document is licensed under a Creative Commons Attribution-Noncommercial-Share
Alike 3.0 Unported License. You are free to copy, distribute and transmit this work and to
adapt this work. You must attribute the work to Scott Nelson, Scott@WebDesignSB.com
(but not in any way that suggests that I endorse you or your use of the work). You may not
use this work for commercial purposes. This license verbiage is attributable to Creative
Commons (http://www.CreativeCommons.org/).

Registered Trademarks found in this document and are the sole property of their respective
legal owners.




Document1
                                       Page 14 of 14

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:2
posted:12/10/2011
language:
pages:14