Dreamweaver

From DreamHost
(Redirected from Setting up Dreamweaver)
Jump to: navigation, search

Overview

Adobe Dreamweaver is a powerful web development tool that helps you create a custom website from scratch. It combines a simple-to-use WYSIWYG editor, basic templates, the ability to code (and view) your website for various screen sizes (i.e., mobile and tablet), and an FTP/SFTP interface.

The following article provides instructions on how to use DreamWeaver to connect to DreamHost’s servers via FTP. For more information on using Dreamweaver to build a website, please visit Adobe.

Setting up your site in Adobe DreamWeaver CC

When you open Dreamweaver, you’ll see various options in the top toolbar.

To set up a new site in Dreamweaver:

  1. Open Dreamweaver.
    01 Dreamweaver.fw.png
  2. Click the ‘Site’ tab in the top toolbar, and then select the ‘New Site...’ option.
    The Site Setup box opens:
    02 Dreamweaver.fw.png
  3. Enter the following:
    • Site Name: You can use any name you wish for your site name.
    • Local Site Folder: Enter the path on your local computer where you’ll save your files for your site.

Adding a server connection

To add a new server connection in Dreamweaver:

  1. Open the Site Setup box.
    03 Dreamweaver.fw.png
  2. On the top left of the Site Setup box, select the ‘Servers’ tab.
  3. Click the plus (+) sign that appears directly beneath the ‘Name' field.
    The server settings box opens:
    04 Dreamweaver.fw.png
  4. Enter the DreamHost server settings in the following fields. This information is used to connect Dreamweaver to your DreamHost web server:
    • Server Name: Name of the site without the "http://". For example, if your site is http://www.example.com, enter example.com.
    • Connect Using: Depending on how the user is set up, enter either FTP or SFTP. View the Enabling Shell Access article for further details on choosing a type of user.
    • FTP Address: Name of the DreamHost server or the name of the site itself. View the Finding your FTP server hostname article for details on how to obtain your servername.
    • Username: Name of the FTP user with which the domain has been set up. You can find the user name on the (Panel > ‘Domains’ > ‘Manage Domains’) page. It’s to the right of the domain under the ‘Web Hosting’ column.
    • Root Directory: This is also known as the Web Directory. It’s most likely your site name with a forward slash at the end. You can confirm your Web Directory on the (Panel > ‘Domains’ > ‘Manage Domains’) page. Click the Edit button to the right of your domain, and then you can view it in the first section.
    • Web URL: This is the site name. Enter the full URL here, including the "http://".
    • Port: For an FTP user, enter port 21. For an SFTP or Shell user, enter port 22.
  5. After you enter the server settings, click the Test button to confirm the connection.
    The following box appears showing a successful connection:
    07 Dreamweaver.fw.png
  6. Click the Save button to save these settings.

Uploading your files to DreamHost

Once you set up and saved a successful connection to your server, you can use Dreamweaver to upload your site files at any time.

Follow these steps to upload your files from your local folder to the remote DreamHost server:

  1. Expand the far right panel (CSS Designer, Files, Assets, and Insert tabs) that contains all of your sites information.
    05 Dreamweaver.fw.png
  2. Select the ‘Files’ tab. (Be sure not to confuse this with the 'File' tab within the top toolbar).
  3. Select the site you wish to upload from the first dropdown menu. This is the ‘Site Name’ that you created during the setup process.
  4. Select ‘Local view’ from the second dropdown menu that appears next to your site. This allows you to view and upload the site files that you saved locally on your computer.
  5. Click the 'up' arrow. When you scroll over the up arrow, it says: Put file(s) to “Remote Server example.com”, which is the site hosted on DreamHost’s servers.
  6. Wait until the files finish to upload. A dialog box appears showing the progress.
  7. Click the second dropdown menu and select 'Remote server' to view the files on your DreamHost server.
    The following shows that the 'DH Test Pic.jpg' file was successfully uploaded to the remote server folder. You can drag and drop it into and of the Dreamweaver directories as needed:
    06 Dreamweaver.fw.png
Lightbulb wiki.png Tip: Once you get the hang of uploading your files, you can simply click Site > Put within the top top toolbar (or, Ctrl+Shift+U) to quickly upload your files to the server. This is a more seamless way to move your files, and is especially helpful when you're making a lot of edits to your website and you don't have the right-hand panel open.


See Also