How To Create and Manage a Site in Dreamweaver

Published:
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web page visually and whatever you see on the screen while developing appears in the viewer's browser when published.

This article describes how to get started with Dreamweaver.  We'll leave it up to you do create your web site's content.

Creating a site

You must define a Dreamweaver local site folder for each new website you create. Dreamweaver needs to know where your site files are in order to create all the internal links correctly and to update them when you move files to a different location within your site.

When you open Dreamweaver you can choose to "Create New Dreamweaver Site" from the Welcome Screen, or you can always select New Site under the Site menu. You will be presented with the Wizard to create a New Site.  You can follow the Basic Wizard to create the site, but we will Choose Advanced on the Tab Menu for this example.

1. Local info

Type in the name for your web site, this is the name just for you to use with Dreamweaver.  Choose the Local root folder for your project. This folder determines where on your computer the website files are saved. Choose Default images folder. Leave the check on "Links relative to Document".  Type the URL of your web site. This is the real address of the website where pages will be stored once they are finished.
Local Info screen

2. Remote info

Typically, the remote folder is on the computer where web server is running.

These settings can always be adjusted later through Manage Sites menu.

FTP, or File Transfer Protocol, is the usual way how you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to your web host's computer is known as "publishing" or "uploading" your pages. You will need to enter the information that your web host provided you when you first signed up for a web hosting account

Type the address of your FTP server.   Some web hosts tell you that you need to place your web pages in a folder called "www".  Others require you to place them in a "public_html" directory.  If your web host tells you to simply upload the files when you connect via FTP, leave the box blank.

Enter your FTP user name or login name into the box for Username. Enter your password in the box for Password. If you don't want to have to keep entering your password every time you publish your page, you can leave the "Save" checkbox activated.

Now you can Test your connection on button to check that you have entered all the information correctly.
 
Dreamweaver offers the ability to control access to your files through check in and check out. You should only need this if you have numerous people accessing the same site. Otherwise, uncheck “Enable file check in and check out."
Remote Info screen

3. Testing server

We choose the server technology we will use.  In our case we need ASP VBScript.  If you are planing to use pure HTML you can choose None.

Next we declare how we will connect to our testing server. Because we test files on our computer we choose Local/Network, and choose the Testing server folder. Its the same folder where we keep our files.

Next we declare our URL prefix for testing server. We use Virtual Directory we created in IIS.
Testing Server screenThese are all of the settings that we need to start working on our web project.  You can press OK now to start working on your pages if you want.  

Other Options
We will just briefly list another options.  You can always adjust all other settings later.

Cloaking

Site cloaking enables you to exclude folders and file types from operations such as Get or Put (used for uploading or downloading files through FTP). You can cloak individual folders, but not individual files. To cloak files, you must select a file type and then all files of that type will be cloaked. These settings are specific for each site.
Cloaking screen

Design notes

Design Notes are notes associated with a file, but stored in a separate file.
Design Notes screen

Site Map Layout

You can view a local folder for a Dreamweaver site as a visual map of linked icons, called a site map. Use the site map to add new files to a Dreamweaver site, or to add, modify, or remove links. The site map shows the site structure two levels deep, starting from the home page. It shows pages as icons and displays links in the order in which they are encountered in the source code.
Site Map Layout screen

File View Columns

When you view a Dreamweaver site in the Files panel, information about the files and folders is displayed in columns.  You can customize the columns view on this screen.
File View Column

Contribute

Contribute combines a web browser with a web-page editor. It enables web page visitors to browse to a page in a site that you created, and to edit or update the page if they have permission to do so. Contribute users can add and update basic web content, including formatted text, images, tables, and links.
Contribute

Templates

When you create a template file by saving an existing page as a template, the new template in the Templates folder, and any links in the file are updated so that their document-relative paths are correct.
Templates

Spry

Spry is Adobe's JavaScript framework that controls dynamic effects and widgets, such as the Spry Menu Bar. When you insert a Spry widget, data set, or effect in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that location. Here you can change the default location where Dreamweaver saves Spry assets.
Spry
1
4,621 Views

Comments (2)

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Kechka,

Great step by step tutorial.
cool thanks!

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.