Learn Dreamweaver CS3 Tutorial

This site provides you with a foundation for working with Adobe Dreamweaver. Follow along with the tutorial, download the lesson files, and view the videos. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver training classes.

Excerpt from Dynamic Learning - Dreamweaver CS3

What you’ll learn in this lesson: Creating a site definition Establishing local root and remote folders Adding and defining pages Selecting, viewing, and organizing files with the Files panel Uploading and downloading files to and from your remote server

Creating a New Site

Dreamweaver’s strength lies in its powerful site creation and management tools. You can use the software to create everything from individual pages to complete web sites. The pages you create within your site can share similar topics, a cohesive design, or a common purpose. And, once your Dreamweaver site is complete, you can efficiently manage and distribute it from within the program itself.

Starting up

Before starting, make sure that your tools and panels are consistent by resetting your workspace. See “Resetting the Dreamweaver workspace” on page 3.

You will work with several files from the dw02lessons folder in this lesson. Make sure that you have loaded the dwlessons folder onto your hard drive from the supplied DVD. See “Loading lesson files” on page 3.

Creating a new site

In Dreamweaver, the term site refers to the local and remote storage locations where the files that make up a web site are stored. A site can also include a testing server location for processing dynamic pages. To take full advantage of Dreamweaver’s features, you should always start by creating a site.

The easiest way to create a new site in Dreamweaver is to use the Site Definition wizard. Choose Site > New Site, and the wizard appears.

You can also use the Manage Sites dialog box to create a new site. We discuss this and other functions of the Manage Sites dialog box later in this book.

In this lesson, we begin by using the Site Definition wizard to accomplish the following tasks:

• Define the site
• Name the site
• Define the local root folder
• Set up a remote folder
• Explore advanced settings
• Save the site

By default, the Site Definition wizard opens with the Basic tab selected. The options available here will help guide you through the essentials of defining your site. The Advanced tab allows you to set up local, remote, and/or testing servers directly.

The first screen you see in the Basic tab of the Site Definition wizard allows you to name your site. Avoid using spaces (use underscores instead), periods, slashes, or any other punctuation in your site name, as doing so will likely cause the server to misdirect your files.

To create a new site:

1 Launch Dreamweaver CS3, if it is not already open, then choose Site > New Site. First, you have to name the site. In the Name field, type museum_site.

2 If you are working directly on a web server (instead of locally), you can also enter the HTTP address of your server in this window. Because we’ll be working locally in this lesson, entering an HTTP address isn’t necessary, so leave the HTTP Address field blank and press Next.

3 You can use Dreamweaver to build web applications using any of five server technologies: ColdFusion, ASP.NET, ASP, JSP, or PHP. Each technology corresponds to a document type in Dreamweaver. Since we won’t be using any of these server-scripting environments for this lesson, leave the radio button next to No, I do not want to use server technology selected, then press Next to proceed to the next screen in the wizard.

At this point, you need to set up a local root folder, which is where Dreamweaver stores the files with which you’re currently working. The local root folder definition screen allows you to enter information regarding where you’ll be working with your files during development.

4 In this lesson, you’ll be working locally and uploading to the server when you’re ready, so click the first of the two radio buttons listed, labeled Edit local copies on your machine. Dreamweaver asks where you want to store your files locally. You can either create a folder on your hard drive and build your site from scratch, or use a pre-existing folder of content that you’ve already created for this site. You’ll use the second option for this lesson.

To ensure that the links you set up on your computer will work when you upload the site to a web server, it is essential that you store all the site’s resources in one main folder on your hard drive, then identify it within Dreamweaver. This is because the links will only work properly if all the site’s elements remain in the same relative location on the web server as with your hard drive.

5 Click on the folder icon () to the right of this field to navigate to your prebuilt files.

6 Navigate to your desktop and locate the museum_files folder inside the dw02lessons folder you copied to your desktop earlier.

7 Click Open to open this folder, then press Select (Windows) or Choose (Mac OS) to choose this as your local root folder. The field will now show the path to your newly defined local root folder. Press Next.

8 In most cases, the remote folder is the location on the computer where your web server is running. This is where you’ll upload and store your files for deployment to the Web. When you set up a remote folder, you have to choose a method for Dreamweaver to upload and download files to this server. The drop-down menu on this screen offers you a list of access options. Choose FTP (the most commonly used method) from the drop-down menu.

9 Additional fields for FTP address, folder location, login, and password appear. These fields are required to gain FTP access to a server.

10 You do not have to define your remote folder at this stage. Dreamweaver allows you to define your remote folder at a later time, like when you’re ready to upload. In this lesson, you’ll work locally now and define your remote folder using the Files panel later. From the drop-down menu, choose None for the remote connection choice. Press Next.

11 The final screen in the Basic tab of the Site Definition wizard is a summary of all the settings you just selected. Check that your local information, including the site name and the location of your local root folder (museum_files), are correct. If they aren’t, press the Back button to bring you back to the screen containing the error.

Note that the Remote Server and Testing Server options reflect that you’ll set them up later.

You’ve now completed the site definition process, using the Basic interface of the Site Definition wizard. Don’t close the wizard yet, though, as you’ll now explore the options found under the Advanced tab.

Advanced site-creation options

Don’t ignore the Advanced tab of the Site Definition window, as it offers access to many settings that aren’t available in the Site Definition wizard.

The Advanced tab also offers access to all the settings options available in the wizard’s Basic tab, so you can go straight to the Advanced tab to create a site when you gain more experience with Dreamweaver.

To create a new site, using Advanced options:

1 Click the Advanced tab in the Site Definition dialog box.

2 From the categories on the left, choose Local Info.

3 Note that the Site Name and the Local Root Folder fields are populated by the information you entered using the wizard.

The information you set in the Local Info window identifies the site files in Dreamweaver and enables the software’s site management features. One of the more important Local Info settings is case-sensitive link checking.

The case-sensitive link checking feature ensures that your links will work on a Unix server, where links are case-sensitive. If you’re using a Windows or Mac server, this doesn’t matter as much, but it is a good idea to follow the strict naming and linking conventions of a Unix system in case you ever move your site to a different server.

4 Click the checkbox next to Use case-sensitive link checking.

The remaining categories to the left of the Advanced tab of the Site Definition window help to define your site’s production, collaboration, and deployment capabilities. They include the following:

Remote Info is necessary to upload the site files to the web server. Contact your server administrator to determine which method to use for your site.

Testing Servers act like public servers in order to test dynamic pages and connections to the database.

Cloaking allows you to specify file types or specific files that you do not want uploaded to the server.

Design Notes are a collaboration tool that keeps notes regarding the development of the page or site.

Site Map Layout is useful for understanding how your site files connect to one another.

File View Columns is an organizational tool. If you want to share the custom columns with others, you must enable Design Notes as well.

Contribute enables users with basic word processing and web browser skills and little or no HTML knowledge to create and maintain web pages.

Templates can be automatically updated with rewritten document paths using this option.

Spry is a JavaScript library for web designers. It allows designers to build pages that provide a richer experience for their users.

At this point, you are finished defining your settings, so press OK; Dreamweaver creates a site with the settings you have defined. Note that the Files panel on the right side of your screen displays your local root folder and all of its enclosed content files.

You are now ready to build pages for your web site.

Adding pages

Dreamweaver contains many features to assist you in building pages for your site. With these features, you can define properties for those pages, including titles, background colors or images, and default text and link colors.

It’s important to consider that users will view your pages with different browsers on different platforms (and in different languages). Fortunately, Dreamweaver also includes tools that allow you to create and test pages to ensure compatibility with most users.

To add a page to your site:

1 Choose File > New. The New Document dialog box opens.

2 You can create a new page using a predesigned layout, or start with a blank page and build a layout of your own. In this exercise, you’ll start with a blank page. Click on the Blank Page category on the left side of the New Document window.

3 In the Page Type column, you can select the type of page you want to create (e.g., HTML, ColdFusion, etc.). Select HTML.

In the Layout column, you can choose to base your page on a prebuilt design (created using Cascading Style Sheets (CSS), which are discussed in detail earlier in this book). These predesigned layouts fall into one of four categories:

Fixed columns do not resize based on the user’s browser settings. They are measured in pixels.

Elastic columns adapt to the user’s text settings, but not when the browser window is resized. These columns are measured in ems (a traditional typography measurement).

Liquid columns resize if the user resizes the browser window, but not if the user changes the text settings.

Hybrid columns combine any of the other three options (e.g., three-column hybrid).

4 Click on <none> in the Layout column to build the page without using a prebuilt layout.

5 Leave the DocType setting at XHTML 1.0 Transitional. The DocType drop-down menu defines the document type and compliance with different versions of HTML. XHTML 1.0 Transitional is the default setting and is suitable in most cases.

The Layout CSS and Attach CSS settings are irrelevant here, since you didn’t choose a CSS-based layout for this page.

6 Press Create to create a new blank HTML page.

Saving a page to your site

You should get accustomed to saving pages to your local root folder early and often. It is very important that you store all of your site’s resources in one main folder on your hard drive so that the links you set on your computer will work when your site is uploaded to a server.

1 Choose File > Save.

2 In the Save As dialog box, navigate to your Desktop, and locate the museum_files folder (your local root folder, as defined earlier).

3 In the Name field, name your file index.html.

The Internet standard for naming your home page, or the first page users see when they access your site, is index.html. The only time you should not name your home page index.html is if your server administrator requests another name, such as home.html or default.html.

4 Leave the Save As Type field set to All Documents (which includes the .html file extension), and select None from the Unicode Normalization From drop-down menu.

5 Click Save to save the page in your local root folder.

1 2 | Next

Order the Dynamic Learning: Dreamweaver CS3 book, authored by AGI Dreamweaver Training Instructors. These are the instructors that teach AGI's Dreamweaver Training Classes.