demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

DreamWeaver Settings for Site Publishing

tools / dreamweaver

Estimated reading time: 5 minutes, 47 seconds

Previously we have covered general preference settings for DreamWeaver. The instructions that follow are primarily intended for students in my full-time web development program. For those students: keep these instructions with you at all times, add this article to your favourites, or know where to find it. I am not going to indulge endless questions of "How do you set up a connection to the server again?".

It is very important to note that the settings made in these steps are specific to that machine. If you try to work on your site from another machine, it is likely that you will need to recreate some or all of these settings for that specific installation of DreamWeaver, or import those settings from a .ste file, discussed later.

Finally, note that the details of some of these steps will change depending on the server and folder you are publishing to. The specific server and folders settings shown here will not work outside the SAIT campus.

Step 1: Organize Your Site

Put the files that you want to be on your site in a specific folder on your network drive or a USB stick. For school work, do not work from files on the local hard drive: you are sure to lose them when the computer is re-imaged, be unable to reach them when that computer is being used by another student.

The folder should contain your HTML and CSS pages, JPEG and GIF images (placed in an images sub-folder) and originals (such as .PSD and .AI files) placed in an originals folder. The folder name that contains all of this can be whatever you wish.

Step 2: Set up your site in DreamWeaver

DreamWeaver needs to have access to the site content you are working on. It calls this version of the site the "local folder", but it could be a folder stored anywhere: on the computer, on a CD, on a network. To give DreamWeaver access to this content, and to tell it where to publish to, we will set up a site.

From the Site menu, choose New Site.

Dreamweaver Manage Sites window screenshotWe’ll step through the process to create our first site. First, let’s name our site by clicking on New….

In the dialog box that appears, name your site. The name of the site can be anything, since it is referenced by DreamWeaver exclusively, but the site name is visible to anyone else using DreamWeaver on that machine, no matter what their login, so calling the site "My Site" could lead to confusion.

Your Local Site folder is where you keep your local copy of your files. This could be anywhere, but I would strongly recommend that you point it towards a folder on a USB stick, portable hard drive, or a network folder.

Click on Servers. On this panel, we need to tell DreamWeaver where our website will be published: that is, details about the website server. DreamWeaver actually assumes we have two servers: a private production server for testing files, and a public remote server that hosts our website for the outside world. In our case, the two are one and the same.

Dreamweaver Server SetupClick on the + icon in the lower left-hand corner of the panel. The Server Name can be whatever you wish, but the other details must be exactly as follows:

  • The FTP address of the web server is webapp.ict.sait.ca

  • Your FTP username and password are those provided by your instructor. Write these down on something that will not be misplaced and that will always be with you in class.. The password and username will be automatically saved on your machine once you progress past this step, but the information will only be stored on the machine you are using at the moment by default.

  • The root directory (the folder that we are going to upload the site to) is: yourclassname/yourfirstinitalyourlastname

  • The Web URL should be automatically completed for you. It should be of the form http://webapp.ict.sait.ca/users/yourclassname/
    yourfirstinitalyourlastname

Test the connection by clicking the Test button. If you find that the server takes a long time to connect (more than 20 seconds) open the More Options panel and turn on Use Passive FTP.

Click on Advanced at the top of the panel and turn on Automatically upload files to server on save. This ensures that any changes you make to files in the local copy of the site will be uploaded to the remote server when you save them. (This would typically not be done in a real world production environment - you would want to thoroughly test any changes to files locally before uploading them to the server - but for the purposes of class turning the option on avoids a great deal of confusion.)

At this point, you could set the Testing Server model to PHP MySQL if you wished to. It is not important that you do so unless you are planning to use a database for the site.

Finally, click Save.

You have returned to the main site setup panel. If you are not running a production server, your remote and testing servers are one and the same: turn on the checkbox beneath Testing. if you need to change anything about the server setup, click the pencil icon.

That’s it: we’re all done setting up DreamWeaver!

Step 3: Publish Your Site

Dreamweaver Files TabPress the F8 key (on the Mac, CMD-SHIFT-F). This brings up your Files tab, which, in its minimized state, shows the local files of your current site. Press the Maximise button on the right side of the tab, which expands the tab to two windows, with your local files on the right side, and your files on the web server on the left. At the moment, your part of the web server is empty. You can prove that by connecting to the server (the small button with three circles on it).

There are several ways to copy your local files to the web server. The easiest is to select them as you would any other files (using the shift or control keys to make multiple selections) and press the green upright arrow, which means "upload files to server".

Once accomplished, you can view any file you wish: select it (in either the local or remote view) and press the F12 key.

Finally, it is probably a good idea to Export the settings we have just created. Exporting the settings as a .ste file allows us to load the site settings into another installation of DreamWeaver. Returning to the Manage Sites window, click on Export. I would recommend saving the settings file somewhere on your Network drive or a USB key, anywhere but the local folder of your site. Saving the .ste file in your local folder will mean that it is likely to be uploaded to your server… which means that anyone with enough smarts now has the ability to pick up the username and password for your site.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.