Home » Internet » Web Design » Website Development Tools

How to manage, upload and synchronise your web site using Dreamweaver CS5.5

13 Comments
- Thanks for reading!
- Before you check out…

149 Like

Like 149

Pin It

Ranked #2,284 in Internet, #134,182 overall

Upload and Maintain your Web Site with Ease

Traditionally I have always relied on a dedicated FTP client to upload my web sites. This may have been manageable in the day, when layout and typography were mostly hard coded into the page, however, with the rise of CSS and employment of Javascript libraries such as jQuery, more and more external assets are instead being referenced, leaving us with neater code..and a bunch of assets to track.

This makes synchronisation of site wide linked assets a must in the day to day running of your web site. If you haven't yet taken advantage of Dreamweaver's site management tools, please read my overview. You may abandon your favourite FTP software in favour of it like I did.

Step 3: Set "Check-out" Prefer...
Step 4: Set "Cloaking" Prefere...
Step 5: Upload your Web Site

Efficient Synchronisation

I will show you how to upload your web site at the touch of a button, directly from Dreamweaver (no separate FTP client required), and how changes made to your local site can be mirrored on your live site in a couple of clicks.

In addition, I will also explain how to "cloak" directories and files both locally and remotely: these are files that you wish to exclude from the uploading or downloading process (useful for masking archive folders, htaccess files, or source files such as Photoshop or Flash project files).

I will also mention Dreamweaver's Check In / Check Out system, which allows several developers and designers to work on the same site simultaneously without fear of overwriting each others work.

Step 1: Define your Site

Open Dreamweaver and create a new site

Step 2: Configure your Remote Server

Set up your Web Server via the Servers tab

Step 3: Set "Check-out" Preference

Dreamweaver's Optional File Check-out system

Dreamweaver's File Check-out system allows multiple developers and designers to work on the same site simultaneously without fear of overwriting each others work. There is also an option to include an alert to your colleague(s) via email whenever an asset update occurs.

All members in the team can clearly see which files have been checked out in the File manager, and which files are available to work on. An alert is issued when a user attempts to open a file that is currently checked out by someone else, and the file remains "Read Only" until it has been republished and "checked in" again by the person working on it.

If you are not working in a team you can leave this option unchecked and opt out of the File Check-out system.

Step 4: Set "Cloaking" Preferences

Specify your Cloaking preferences in Dreamweaver

"Cloaking" allows you to specify files or folders that you wish to be ignored when uploading and synchronising your site. It may be applied to directories and files both locally and remotely (useful for masking archive folders, htaccess files, or source files such as Photoshop or Flash project files).

You may create a site wide cloak that targets specific file extensions or folders (see above fig.4a). You may also cloak files individually by right-clicking on the asset in the File Manager, then clicking "Cloaking" (see above fig.4b). In this way you can either "Cloak" or "Uncloak" as you need on a file per file basis.

Step 5: Upload your Web Site

Upload your Site using the File Manager

Use the File Manager to highlight the site, and hit the Up arrow to "Put File(s)", as shown in the image above. Your Web Site will now commence upload to your remote server. The File Manager is located in the bottom right hand corner of the application.

Step 6a: Synchronise your entire Web Site

How to synchronise your Web Site after it has been updated locally

Use the File Manager to select the site, and hit the highlighted Sync button to "Synchronise with Host", as shown in the image above (Fig. 6a). In the next window, set your synchronise option to "Entire Site", and hit Preview. Your Web Site will now check each locally stored file against the live version on the server and present you with a synchronisation report telling you which files are due to be updated. Clicking OK will complete the synchronisation process.

Step 6b: Synchronise part of your Web Site

How to synchronise any part of your site after it has been updated locally

You may also synchronise individual parts of your site (including dependencies) by highlighting the file in the File Manager and hitting the Up arrow to "Put File(s)". Hit "Yes" in the subsequent window to upload any dependencies. Please see above (Fig. 6b).

In this way, any changes you make on your local site will be mirrored on your live site in a couple of clicks, including all assets and linked files e.g. If you are working on your home page and update an external CSS file and/or Javascript file that is linked to in that page, you need only upload that source page, and all newly updated externally linked files and dependencies will be tracked and uploaded without having to locate each one manually.

Conclusion

My aim in this article has essentially been to help the beginner who is embarking upon his or her first web site adventures. But I hope it also helps those of you who haven't used Dreamweaver's site management tools before, and perhaps gives you an idea of what you can expect if you give it a try.

Thanks for reading and all the best.

UrbanMac

Thanks for reading!

I love to hear your comments

Reply

StaCslns Mar 12, 2012 @ 6:24 am | delete

Wow! Thank you for making this easy! Nice lens!!

Reply

UrbanMac Mar 12, 2012 @ 10:10 am | delete

You're very welcome! Thanks for visiting.

Reply

JaguarJulie Feb 29, 2012 @ 5:45 pm | delete

You know, I believe I have Dreamweaver ... but keep forgetting to see if I can figure it out. I've been doing my website with FrontPage. Good to have some instructions!

Reply

UrbanMac Mar 1, 2012 @ 3:16 am | delete

You're most welcome. Thanks to you I now know how to make great chili! Brilliant, thanks!

Reply

firas_ad Feb 26, 2012 @ 6:20 am | delete

Good tutorial , I liked the screenshots with arrows .

Reply

genuineaid Feb 25, 2012 @ 7:04 pm | delete

I still use Dreamweaver CS3 and I love it.
But thanks for the tutorial :)

Reply

teamunited12 Feb 23, 2012 @ 10:52 am | delete

Good info on the editor...I need that...still using an old frontpage program

Reply

Kids_Corner Feb 21, 2012 @ 9:25 am | delete

This is just what the doctor ordered. I am creating a website in dreamweaver right at this time. Thank you very much!!

Reply

UrbanMac Feb 22, 2012 @ 6:32 am | delete

You are very welcome :-)

Reply

MelonyVaughan Feb 19, 2012 @ 12:17 pm | delete

Great information. Thanks!

Reply

UrbanMac Feb 19, 2012 @ 3:49 pm | delete

Thanks Melony, glad to help.

Reply

Anime-e Feb 18, 2012 @ 10:28 pm | delete

This is truly a great program, and once you learn the "leaner`s curve" of the program you will be able to open up so much opportunity!

Reply

UrbanMac Feb 19, 2012 @ 3:49 pm | delete

Thanks Anim-e, I find it enhances my workflow greatly, as I can edit and upload within the same application.

Show All

Share this Guestbook
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- RSS
- Email

Adobe Flash Builder 4 Premium

Adobe Flash Builder v.4.0 Premium 65069682 5300 points

Share this list
- Stumbleupon
- Facebook
- MySpace
- Twitter
- Digg
- Delicious
- Email

RSS: Featured Lensmaster

Lenses by UrbanMac

Essential Dreamweaver

A list of essential Dreamweaver products

Web Design Tools on Ebay

Items on eBay for Web Developers & Designers

149 Like

by UrbanMac

Hi. I'm a UK designer specialising in new media, web and graphic design. I greatly enjoy writing articles for the online community. I also have a youn... more »

Feeling creative? Create a Lens!

How to manage, upload and synchronise your web site using Dreamweaver CS5.5

Upload and Maintain your Web Site with Ease

Contents at a Glance

Contents at a Glance

Overview - Your Web Site

Efficient Synchronisation

Step 1: Define your Site

Open Dreamweaver and create a new site

Step 2: Configure your Remote Server

Set up your Web Server via the Servers tab

Step 3: Set "Check-out" Preference

Dreamweaver's Optional File Check-out system

Step 4: Set "Cloaking" Preferences

Specify your Cloaking preferences in Dreamweaver

Step 5: Upload your Web Site

Upload your Site using the File Manager

Step 6a: Synchronise your entire Web Site

How to synchronise your Web Site after it has been updated locally

Step 6b: Synchronise part of your Web Site

How to synchronise any part of your site after it has been updated locally

Conclusion

Thanks for reading!

I love to hear your comments

Before you check out...

Which of these Adobe Apps could you not live without?

1

2

3

4

5

6

7

8

9

10

Please pick your widget size and display. Then click "Make the Widget" to get the code that's just right for you.

Voila! Just copy and paste this code into your own site. Have fun!

Oopsey! Please login to Squidoo in order to add this module to your lens.

RSS: Featured Lensmaster

Lenses by UrbanMac

Essential Dreamweaver

A list of essential Dreamweaver products

Web Design Tools on Ebay

Items on eBay for Web Developers & Designers

by UrbanMac

Explore related pages

Essential Guide to Dreamweaver

A complete guide to get you started

Featured Lenses

Profit from your Photography

How to make money from your Photographs

Related Tags

Want our Newsletter?