Creating a site

For each project or Web site you want to create, start by defining a site in Dreamweaver.

When you start Dreamweaver, the opening screen appears. This allows you to open an existing file, create a new html file, or define a new site. To create a new site, go to the middle column ("Create New") and click on "Dreamweaver Site." Or you can go to the Site menu, choose "Manage Sites" and click New Site:

Enter a name for your site. You will see this name when you go to the "Manage Sites" dialog box. This name is only for your reference, and will not be seen by users.

Then designate a folder ("local root folder") that will hold all the files for the site. Click on the folder icon and browse to the folder that you are using for this site.

In this example, the local root folder is Test_Website:

Click Open and then Select. Then in the Manage Sites dialog box, click Done to open your new Website. If the folder you selected already has files in it, the files will appear in the site files panel.

User Interface Overview

The Dreamweaver MX user interface includes a title bar, menus, toolbars, a document window, and panels. The following example includes the Properties panel and the Files panel.

Displaying Toolbars

Dreamweaver M X toolbars make it easy to choose commands without having to go through a menu. To display toolbars, choose View > Toolbars, and choose the toolbars you wish to display.

Note: You can also display the Insert toolbar from the Window menu, as described below under "Displaying Panels.".

We recommend that you keep all three toolbars (Insert, Document, and Standard) on display .

Insert Toolbar

As the name suggests, the Insert toolbar is used to insert things into your Web page. There are several versions of the Insert toolbar (Common is the version shown above). To select another version of the Insert toolbar, click on the down arrow (located just to the right of "Common" on the toolbar).

Document Toolbar

The document toolbar allows you to choose Code View, Design View, or Split View. Unless you are comfortable working with html code, we recommend using Design View for most purposes.

The document toolbar allows you to enter a title for your Web page. This title will appear in the title bar of the user's browser window, so it is important to choose a meaningful title.

Standard Toolbar

The standard toolbar allows you to perform common tasks like creating a new file, opening a file, pasting and cutting content, and undoing an action. You can do all of these tasks using the menus, but this is a convenient way to perform these tasks.

Displaying Panels

Panels are important components of the Dreamweaver user interface. There are many different panels that can be displayed for different tasks. To choose the panels you want to display, go to the Window menu. We recommend that you keep the Insert toolbar, Properties panel, and Files panel open most of the time.

Properties Panel

The properties panel is context-sensitive. Its shows and allows you to change the properties of whatever element in your Web page is currently selected. The properties panel is very important, and should be displayed most of the time you are working in Dreamweaver.

In the following example, the Properties panel is showing the properties of a paragraph of text.

Files Panel

The Files panel displays the files in the root folder of your Website.

Files Panel

If you have defined multiple sites, you can view the files of different sites by choosing a site name in the popup menu at the top of the Files panel.

Document Window

When you open an html file (or create a new html file), it appears in the document window.

If you open multiple html files, tabs appear at the top of the document window, and the current file will be the tab in front (in the following example, "get_started.htm" is the current document. To work on another document, click its tab.

Working with Files and Folders

Because the Files panel is integrated into Dreamweaver, it is much more convenient to manage your files and folders within the program, instead of going back and forth between Dreamweaver and Windows.

Think carefully about how you want to organize your site. If you set up a good organization initially, the site will be easier to maintain and use. One technique that helps to reduce confusion is to keep your images in a separate folder.

To manage site files or folders, first be sure the Files panel is displayed. You can rearrange folders and files by dragging them within the Files panel.

Note: One of the great things about Dreamweaver is that when you work within the Files panel, Dreamweaver keeps track of your links! Dreamweaver will automatically update links when you change your file organization, unless you tell it not to.

Adding Web Pages

To add Web pages to your site, do any of the following:

choose File > New
right-click in the Files panel and choose New File in the popup window
click the File panel menu button () and choose File>New File.

A new untitled html document will appear in your document window. Be sure to save the file in your root folder and give it a file name.

Another way to add a new Web page is to save your current HTML document under a different name by choosing File > Save As.

Working with Existing Files

To open a file, double-click its icon (). (Be sure to click the icon, not the filename. If you click the filename instead, Dreamweaver will think you want to change the name of the file.)

In the Files panel, html files are indicated by the Dreamweaver icon (). If the file is not an html file, it will automatically open in the program used to create it (assuming you have the program on your computer). For example, a Microsoft Word document will open in Microsoft Word.

To delete a file, click its icon and press the delete key.

To change the name of a file, click on the filename (not the icon), and type the new name.

Working with Folders

To view the contents of a folder, click the plus sign ( ).

To create a new folder,

right-click in the Files panel and choose New File in the popup window, or
click the File panel menu button () and choose File>New File.

To delete a folder, click on it and press the delete key.

Exercises

1. Complete the steps for "Set up Your Practice Site" in the Exercise Instructions page. These steps are done outside of Dreamweaver.

2. Become familiar with going back and forth between displaying and hiding the site files window.

3. Create a new Web site within the Dreamweaver site files window. To do this, navigate to "mysite" on your desktop, and make it the root folder. Give your site a name such as "Mysite."

When you create the site and it appears in your site window, it should include all the practice html files as well as a folder called "images" that contains your practice images.

Your "mysite" Files panel should look something like this:

If the "Images" folder is not already open, you can click on its + sign () to open it.

4. Practice working within the Dreamweaver site files window. Create a new folder in your site called "testfolder," and a new html file called "Test." Try renaming the folder and file. Notice that you can do these things within Dreamweaver and that if you leave Dreamweaver the changes you make are reflected in Microsoft Windows. Delete the test files and folders you created.