Getting Started With Dreamweaver MX

 

Answer the questions:

1.     Where will my web pages be created, tested, published?

Þ          If you have a Web server or an application server where Web Pages are created, then you will need to “point” to that server.

1.     If you do not have a web server available to you at all times, or an application server running a Web site, you will need to create a Webserver.

2.     Steps for creating a Web server

Getting started

If you’re a Windows user, you can install and run the following web servers on your computer: Microsoft Personal Web Server (PWS) or Internet Information Server (IIS), a full-featured version of PWS. You can also install the web server on a networked Windows computer so other developers on your team can use it.

Note: Windows Millennium Edition (Me) does not support any version of PWS or IIS. For more information, see the Microsoft website.

PWS or IIS may already be installed on your computer. Check your folder structure to see if it contains a C:\Inetpub or D:\Inetpub folder. PWS and IIS create this folder during installation.

If the folder does not exist, do one the following:

Note: Service Pack 6 or higher must be installed on your computer to install the NT 4.0 Option Pack. Download the Service Pack from the Microsoft website.

 

3.  Testing the web server

To test the web server, create a simple HTML page with an .htm or .html file extension and save it in the Inetpub\wwwroot folder on your computer. The HTML page can consist of a single line, such as: 

<p>My web server is working.</p>

Save the page as myTestFile.htm. Next, open the test page in a web browser with an HTTP request. If PWS or IIS is running on your local computer, enter the following URL in your web browser:

http://localhost/myTestFile.htm

If PWS or IIS is running on a networked computer, use the networked computer’s name as the domain name. For example, if the name of the computer running PWS or IIS is kojak-pc, enter the following URL in your browser:

http://kojak-pc/myTestFile.htm

Note: For more information on computer names, see Web server basics.

If the browser displays your page, the web server is running normally.

If the browser fails to display the page, make sure the server is running. Double-click the web server icon in the system tray (the icon looks like a hand holding a web page). The Personal Web Manager dialog box appears. If the Publishing panel tells you web publishing is off, click the Start button.

If the page still fails to open, make sure your test page is located in the Inetpub\wwwroot folder and has an .htm or .html file extension.

4. Web server basics

A web server is software that serves web pages in response to requests from web browsers. A web server is sometimes called an HTTP server.

Suppose you want to use PWS to develop web applications. If the server is started, an icon appears in the system tray on the lower right corner of your desktop telling you PWS is running. (The icon depicts a hand holding a web page.) Double-clicking this icon launches Personal Web Manager, which you can use to administer your web pages. The following shows Personal Web Manager:

This is a picture of the feature being described.

The default name of your web server is the name of your computer (cnadeau_pc1, in this example). You can change the server name by changing the name of your computer. If your computer has no name, the server uses the word localhost.

The server name stands for (or is an alias for) the server’s root folder, which is most likely C:\Inetpub\wwwroot. You can open any web page stored in the root folder by entering the following URL in a browser running on your computer:

http://myServerName/myFileName

For example, if the server name is mer_noire and a web page called soleil.htm is stored in C:\Inetpub\wwwroot\, you can open the page by entering the following URL in a browser running on the local computer:

http://mer_noire/soleil.htm

You can also open any web page stored in any subfolder of the root folder by specifying the subfolder in the URL. For example, suppose the soleil.htm file is stored in a subfolder called gamelan, as follows:

C:\Inetpub\wwwroot\gamelan\soleil.htm

You can open this page by entering the following URL in a browser running on your computer:

http://mer_noire/gamelan/soleil.htm

When the web server is running on your computer, you can replace the server name with localhost. For example, the following URLs open the same page in a browser:

http://mer_noire/gamelan/soleil.htm

http://localhost/gamelan/soleil.htm

Note: Another expression you can use instead of the server name or localhost is 127.0.0.1 (for example, http://127.0.0.1/gamelan/soleil.htm).

 

5. A first look at the Dreamweaver workspace

In Windows, Dreamweaver MX provides two workspace layouts to choose between: an all-in-one-window integrated layout and a floating layout much like that of Dreamweaver 4. On the Macintosh, only the floating layout is available.

This section explains how to choose an initial workspace layout in Windows (see Choosing a workspace layout (Windows only)). This section also describes the primary elements of the workspace in both Windows and Macintosh (see Windows and panels overview and Menus overview).

6. Choosing a workspace layout (Windows only)

In Windows, the first time you start Dreamweaver, a dialog box appears that lets you choose a workspace layout. If you change your mind later, you can switch to a different workspace using the Preferences dialog box.

To choose a workspace layout:

Select one of the following layouts:

Dreamweaver MX Workspace is an integrated workspace using MDI (Multiple Document Interface), in which all Document windows and panels are integrated into one larger application window, with the panel groups docked on the right. Recommended for most users.

Note: Most of this guide assumes that you’re using the integrated Dreamweaver MX workspace.

Dreamweaver MX Workspace, HomeSite/Coder-Style is the same integrated workspace, but with the panel groups docked on the left, in a layout similar to that used by Macromedia HomeSite and Macromedia ColdFusion Studio, and with Document windows showing Code view by default. Recommended for HomeSite or ColdFusion Studio users and other hand-coders who want a familiar workspace layout. To choose this layout, select the Dreamweaver MX Workspace option, then select the HomeSite/Coder-Style option.

Note: You can dock panel groups on either side of the workspace in either of the integrated workspace layouts.

Dreamweaver 4 Workspace is a workspace layout similar to the one used in Dreamweaver 4, with each document in its own separate floating window. Panel groups are docked together, but are not docked into a larger application window. Recommended only for Dreamweaver 4 users who prefer to use a more familiar workspace.

 

7. Windows and panels overview

The following are brief descriptions of the windows and other elements in Dreamweaver’s workspace. Some specifics on how to use these windows appear later in this guide; for more detailed information, see Dreamweaver Help (Help > Using Dreamweaver).

The Welcome window provides tips on setting up your workspace for various purposes, and information on new features for those who have used previous versions of Dreamweaver.

The Insert bar contains buttons for inserting various types of “objects,” such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set various attributes as you insert it. For example, you can insert an image by clicking the Image icon in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar.

The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

The Document window displays the current document as you create and edit it.

The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties.

Panel groups are sets of related panels docked together under one heading. To expand a panel group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s title bar.

The Site panel allows you to manage the files and folders that make up your site. For more information, see Set up a local site. It also provides a view of all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh).

Dreamweaver provides many other panels, inspectors, and windows not shown here, such as the History panel and the Code inspector. To open Dreamweaver panels, inspectors, and windows, use the Window menu.

9. Menus overview

This section provides a brief overview of the menus in Dreamweaver.

The File menu and Edit menu contain the standard menu items for File and Edit menus, such as New, Open, Save, Cut, Copy, and Paste. The File menu also contains various other commands for viewing or acting on the current document, such as Preview in Browser and Print Code. The Edit menu includes selection and searching commands, such as Select Parent Tag and Find and Replace, and provides access to the Keyboard Shortcut Editor and the Tag Library Editor. The Edit menu also provides access to Preferences, except on the Macintosh in Mac OS X, where Preferences are in the Dreamweaver menu.

The View menu allows you to see various views of your document (such as Design view and Code view) and to show and hide various kinds of page elements and various Dreamweaver tools.

The Insert menu provides an alternative to the Insert bar for inserting objects into your document.

The Modify menu allows you to change properties of the selected page element or item. Using this menu, you can edit tag attributes, change tables and table elements, and perform various actions for library items and templates.

The Text menu allows you to easily format text.

The Commands menu provides access to a variety of commands, including one to format code according to your formatting preferences, one to create a photo album, and one to optimize an image using Macromedia Fireworks.

The Site menu provides menu items to create, open, and edit sites, and (on the Macintosh) to manage files in the current site.

The Window menu provides access to all of the panels, inspectors, and windows in Dreamweaver.

The Help menu provides access to Dreamweaver documentation, including help systems for using Dreamweaver, creating extensions to Dreamweaver, and reference material for a variety of languages.

In addition to the menu-bar menus, Dreamweaver provides many context menus, which give you easy access to useful commands pertaining to the current selection or area. To display a context menu, right-click (Windows) or Control-click (Macintosh) an item in a window. All items in context menus can also be found in menu-bar menus.

10. View the sample site

The examples used in this guide are drawn from a small sample site for a fictional company called Global Car Rentals. Before beginning the lessons, view the sample site in a browser to get an idea of what you’ll be creating as you work through the lessons.

To view the sample site in a browser:

  1. Open the Samples folder in the Dreamweaver application folder. Then open the GettingStarted folder, then the FinalSite folder.
  2. Double-click the index.htm file in the FinalSite folder to view the site in a browser.
  3. When you’re done viewing the sample site, proceed to whichever chapter of this guide interests you the most.

 

LESSON 2 Creating Your First Website in Dreamweaver

This chapter provides a series of brief lessons that guide you through the process of creating a simple static website using the visual authoring tools in Macromedia Dreamweaver MX. For information on using the hand-coding tools in Dreamweaver, see Editing code in Dreamweaver; for information on creating a database-driven dynamic web application, see Understanding Web Applications.

The order of lessons in this chapter follows one possible workflow for creating a site. When creating your own sites, you can follow whatever workflow is most comfortable for you.

To create a static website:

  1. Plan and prepare (see Set up a local site and Add assets to your site).
  2. Create pages (see Create and save a new page).
  3. Lay out and set up the pages (see Adjust the layout and Set a page title).
  4. Add content to your pages (see Add styled text and Add images).
  5. Link pages together (see Add text links between pages and Create rollovers for graphical links).
  6. Publish your site (see Preview in browser and Set up a remote site, then publish).

 

1. Set up a local site

The most common approach to creating a website using Dreamweaver is to create and edit pages on your local disk, and then upload copies of those pages to a remote web server to make them publicly available. It’s possible to use Dreamweaver in other ways (such as running a web server on your local computer, or uploading files to a staging server, or using a mounted disk as if it were your local disk), but the lessons in this guide assume that you’re working locally and then uploading to a remote server.

In Dreamweaver, the word site is used as shorthand to refer to any of the following things:

Normally, you would start creating a website by planning it: figuring out how many pages to create, what content appears on each page, and how the pages are connected to each other. In this lesson, though, the site you’re creating is a very simple one, so it doesn’t take much planning: it will consist of only two web pages, with links between them. So for this site, you can skip the planning, and proceed to creating a site definition.

You’ll create a site definition using the Site Definition dialog box. You can fill in this dialog box in either of two views: Basic or Advanced. The Basic approach guides you through site setup step by step. If you’d rather edit site information without guidance, you can click the Advanced tab at any time.

The following procedure describes how to set options in the Basic version of the dialog box, which is also known as the Site Definition Wizard. For details of how to set options in the Advanced version, click the Advanced tab and then click the Help button.

To define a site:

  1. Choose Site > New Site. (That is, choose New Site from the Site menu.)

The Site Definition dialog box appears.

  1. If the dialog box is showing the Advanced tab, click Basic.

The first screen of the Site Definition Wizard appears, asking you to enter a name for your site.

  1. In the text box, enter a name to identify the site within Dreamweaver. The name can be anything you want. For example, you could name the site Global Car Rental.
  2. Click Next to proceed to the next step.

The next screen of the wizard appears, asking if you want to work with a server technology.

  1. Select the No option to indicate that for now, this site is a static site, with no dynamic pages.

To set up a site to create a web application, you would need to choose a dynamic document type—such as Macromedia ColdFusion, Microsoft Active Server Pages (ASP), Microsoft ASP.NET, Sun JavaServer Pages (JSP), or PHP: Hypertext Preprocessor (PHP)—and then supply information about your application server (For more information, see Developing a Web Application in Dreamweaver MX).

  1. Click Next to proceed to the next step.

The next screen of the wizard appears, asking how you want to work with your files.

  1. Select the option labeled “Edit local copies on my machine, then upload to server when ready (recommended).”

There are a variety of ways that you can work with files during site development, but for the purposes of this lesson, choose this option.

  1. The text box allows you to specify a folder on your local disk where Dreamweaver should store the local version of the site’s files. It’s easier to specify an accurate folder name if you browse to the folder rather than typing the path, so click the folder icon next to the text box.

The Choose Local Root Folder for Site dialog box appears.

  1. In the Choose Local Root Folder for Site dialog box, start by navigating to a folder on your local disk where you can store all of your sites. Don’t click OK yet.

Note: This sites folder will eventually contain multiple sites, so don’t choose the sites folder as the local root folder. You will soon create a local root folder for this particular site inside the sites folder.

If you don’t already have a sites folder, create one now (using the folder-creation button in the Choose Local Root Folder for Site dialog box). Name the folder Sites. The recommended location for the sites folder depends on your operating system:

  1. Still in the Choose Local Root Folder for Site dialog box, create a new folder inside your Sites folder. Name the new folder GettingStarted, and click OK to dismiss the Choose Local Root Folder for Site dialog box.

This new folder is the local root folder for your site.

Click Next to proceed to the next step.

The next screen of the wizard appears, asking how you connect to your remote server.

  1. For now, choose None from the pop-up menu. Click Next to proceed to the next step.

The next screen of the wizard appears, showing a summary of your settings.

  1. Click Done to finish.

You can set up information about your remote site later (see Set up a remote site, then publish); for now, the local site information is all you need to start creating a page.

An alert appears to tell you that Dreamweaver will create a site cache. The site cache is a way for Dreamweaver to store information about the site, to make various site operations faster.

  1. Click Done to finish.

You can set up information about your remote site later (see Set up a remote site, then publish); for now, the local site information is all you need to start creating a page.

An alert appears to tell you that Dreamweaver will create a site cache. The site cache is a way for Dreamweaver to store information about the site, to make various site operations faster.

14. Click OK to allow Dreamweaver to create the site cache.

The Site panel now shows the new local root folder for your current site, and an icon to let you view all of your local disks in a hierarchical tree view. The icon is labeled Desktop (Windows) or Computer (Macintosh).

The Site panel normally shows all the files and folders in your site, but right now your site doesn’t contain any files or folders. When there are files in a site, the file list in the Site panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop.

If you already have a set of local HTML files that you want to use to create a website, you can use the file browser in the Site panel to copy those files into your newly created site’s folder. However, you may want to complete the lessons in this guide using the files provided with Dreamweaver before you start using your own files.

If you already have a website on a remote server and you want to edit that site using Dreamweaver, see Editing existing websites in Dreamweaver.

15. Add assets to your site

After creating a local site, if you have already created assets (images or other pieces of content) for the site, place the assets in a folder inside the local site’s root folder. Then when you’re ready to add content to your pages, the assets will be ready to use.

The images and text files for the Global Car Rental site are provided with Dreamweaver. If you’re creating the Global Car Rental pages, you must copy the images for the site into your site’s local root folder. You can do this using the Site panel.

The assets are inside a folder called Design. For simplicity and consistency with the rest of this Getting Started guide, you’ll copy the entire Design folder into your site, then work inside that folder.

To copy a folder of images into your site’s local root folder:

  1. If the Site panel isn’t already open, open it by choosing Window > Site.

The Site panel appears. (If the Site panel was already open, it may not appear at this step. If the Site panel does not appear, choose Window > Site again to display it.)

  1. In the Site panel, expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
  2. Expand folders as necessary to reach the Dreamweaver application folder.
  3. Expand the Samples folder.
  4. Expand the GettingStarted folder in the Samples folder.
  5. Select the Design folder in the GettingStarted folder and press Control+C (Windows) or Command+C (Macintosh) to copy it.

The Design folder contains a folder named Assets, which contains various assets related to the site, including an images subfolder.

  1. Still in the Site panel, scroll to your site’s local root folder (the folder that you created when you defined the site) and select that folder. Then press Control+V (Windows) or Command+V (Macintosh) to paste a copy of the Design folder into your site.

16. Create and save a new page

Now that your site is set up, you can create web pages to populate it.

When you started Dreamweaver, a blank HTML document was automatically created. Before you proceed, close that document.

To close the default blank document:

Choose File > Close.

To create a new page:

  1. Choose File > New.

The New Document dialog box appears.

  1. In the category list on the left, select the Page Designs category.

The list in the middle column of the dialog box is relabeled Page Designs. A list of pre-designed page designs appears.

  1. Scroll down in the Page Designs list and choose the item named Text: Article D with Navigation.

Note: There is another item with a similar name. Be careful not to choose the item named Text: Article D, which has no navigation bar.

A small preview of the page appears on the right side of the dialog box.

If you prefer, you can create a page using any of the other provided page designs, or create a page with no preset design by choosing an item from the Basic Page category. The rest of this lesson assumes that you’re using the Text: Article D with Navigation page design.

  1. Make sure the Document radio button is selected at the lower right of the dialog box.
  2. Click Create.

A new page appears, using the layout you chose, in a new Document window. The page is filled with placeholder “Lorem ipsum” text to show how the page design will look when real text is added to it.

  1. Save your document

To save your new page:

  1. Choose File > Save.
  2. In the Save As dialog box, browse to the Design folder inside the site root folder.

Reminder: the site root folder is the folder you created when you set up the site in Set up a local site.

  1. Enter the filename index.htm.
  2. Click Save.

The filename now appears in the title bar of the Document window, in parentheses, after the words “Untitled Document.”

 

LESSON 3 Adjust the layout

The predesigned pages provide a starting point, but they’re unlikely to exactly match the layout you need for your own pages.

To modify the layout of a page, use Dreamweaver’s layout tools. This guide touches on some of the tools, but for more information, see Presenting Content with Tables, Laying Out Pages in Layout View, and Animating Layers.

First, remove the layout elements that you don’t need. To create the Global Car Rental page layout, remove several unnecessary tables and cells. See Remove unnecessary elements.

Then add image placeholders and adjust the widths of table columns (using Dreamweaver’s Layout view) to make everything fit nicely. See Add an image placeholder and Make a column autostretch.

1. Remove unnecessary elements

In any predesigned page design, there are likely to be elements that you don’t need for your final page. You can select such elements and delete them.

If you’re creating the Global Car Rental page, the following elements in the standard page design are unnecessary:

The general procedure for removing an element is to select it and then to press Backspace (Windows) or Delete (Macintosh). The following procedures show how to select and delete each unnecessary element. When you’re done, check to make sure you’ve removed everything you intended to remove, then save the document.

To remove unnecessary navigation links:

  1. Choose View > Table View > Standard View to ensure that you’re viewing tables in Standard view.
  2. In the document’s navigation bar, drag from the table cell with the “Sic Amet” link to the table cell with the “Consectetur” link.

Both table cells are highlighted to indicate that they’re selected.

  1. Press Backspace (Windows) or Delete (Macintosh).

The table cells are removed. The other table cells (the “Lorem,” “Ipsum,” and “Dolor” links) automatically expand to fill the width of the table.

To remove the unnecessary text-column title:

  1. At the top of the text columns, click the word Title.
  2. In the tag selector at the bottom of the Document window, click the leftmost <table> tag, the one that appears immediately to the right of the <body> tag. (If you can’t see the <body> tag in the floating workspace, widen the Document window.)
  3. Press Backspace (Windows) or Delete (Macintosh) to remove the table containing the title.

Note: There are two <table> tags in the tag selector, because the title area is a table nested inside another table. In this case, you should delete the outer table, indicated by the leftmost <table> tag.

To remove the unnecessary box in the sidebar header:

  1. In the right column, to the left of the word News, click in the box containing the exclamation point.
  2. In the tag selector, click the rightmost <td> tag to select the box around the exclamation mark.
  3. Press Backspace (Windows) or Delete (Macintosh).

To remove the unnecessary copyright bar:

  1. Scroll to the bottom of the page. Click anywhere in the copyright bar at the bottom.
  2. In the tag selector, click the leftmost <table> tag, the one that appears immediately to the right of the <body> tag. Then press Delete to remove the table containing the copyright information.

To check and save your page:

  1. Look at your page to make sure you’ve removed unnecessary elements.

Your page should now look similar to the following image:

  1. Save your document.

 

LESSON Add an image placeholder

Now create a placeholder to stand in for the image that you’ll add later.

To add an image placeholder:

  1. Click at the beginning of the main text column, at the top left of the text, just before the first boldface word of the text. Then press Enter (Windows) or Return (Macintosh) to put a blank line before the text. Then click in the new blank line.

The insertion point should now be on a line by itself. If it isn’t, place the insertion point on the blank line.

  1. Choose Insert > Image Placeholder.
  2. In the Image Placeholder dialog box, enter a name for the placeholder (such as SplashImage) and a width and height. For the Global Car Rental page, enter 523 for width and 220 for height.

Note: Placeholder names must start with a letter and can contain only letters and numbers.

  1. Click OK.

A gray box with the specified dimensions appears. This is a placeholder for an image, used to help you lay out pages without having to have the final images on hand.

  1. You may need to widen your document window to see the column of text on the right.

 

LESSON  Make a column autostretch

The sidebar column of text on the right in the index.htm page is a fixed width. To make it change its width as the visitor resizes the browser window, make the column autostretch. Then adjust the width of the wide column containing the image placeholder.

To make the left column autostretch:

  1. If the Insert bar is not showing, choose Window > Insert to display it.
  2. In the Insert bar, click the Layout tab.
  3. Click the Layout View button to switch to Layout view.
  4. Read the informational dialog box, then click OK.

For each table in your page, a green tab appears at the table’s upper left corner. The tab is labeled “Layout Table.”

  1. In the Document window, click the Layout Table tab above and to the left of the image placeholder you inserted, to select the table that contains both text columns.

A column header appears over each of the two text columns, showing the width of each column.

  1. If the Document window is too narrow to show all of the column on the right, widen your Document window.

Even after you widen your Document window, other Layout Table tabs may obscure the number showing the width in the column header on the right. Don’t click those other Layout Table tabs.

  1. Carefully click the column header over the right column. (Be sure to click above the top of the green Layout Table tabs in the right column.)

A pop-up menu appears.

  1. In the pop-up menu, choose Make Column Autostretch.

A dialog box appears, titled Choose Spacer Image, to prompt you to choose a spacer image.

Note: If you have already chosen a spacer imager at some point, this dialog box does not appear; in that case, the right column is now set to Autostretch. If the dialog box does not appear, skip the rest of this procedure.

  1. In the Choose Spacer Image dialog box, select the Use an existing spacer image file option and click OK.

Another dialog box appears, titled Select Spacer Image File.

  1. In the Select Spacer Image File dialog box, browse to your local root folder and open the Assets folder. Then open the Images folder and select spacer.gif, and click OK (Windows) or Open (Macintosh).

The right column is now set to Autostretch; in a browser, the right column will be as wide as possible after the left column is drawn at its fixed width.

To adjust the width of the main text column:

  1. Click the column header over the left column and choose Make Cell Widths Consistent from the pop-up menu that appears.

The left column is now set to a fixed width (equal to the width of the image plus the cell padding and cell spacing amounts).

  1. Click the Standard View button in the Insert bar to switch back to Standard view.
  2. Save your document.

LESSON   Set a page title

You can set a variety of properties for a page, including its title, background color, text color, and so on. (To set page properties, choose Modify > Page Properties.) But if you just want to set the page title (the title that appears in the browser’s title bar), you can do that in the Document toolbar.

To set a page title for your document:

  1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.

Dreamweaver’s Document toolbar appears. In the integrated workspace, it appears at the top of the document area by default; in the floating workspace, it appears as part of the Document window.

  1. In the Title text box, where it says “Untitled Document,” type a title for the page, such as Global Car Rental Home Page. Then press Enter (Windows) or Return (Macintosh) to see the page title update in the Document window’s title bar.
  2. Save your document.

 

LESSON   Add styled text

You can type text into the Document window, or copy and paste it from another source (such as a Microsoft Word file). See Add text. Then you can format the text using the CSS Styles panel. See Add styles to the text.

Before entering text, make sure you’re in Design view by choosing View > Design.

Add text

As you enter and format text in Design view, Dreamweaver creates the underlying HTML code. To enter code directly, use Code view. For information on Code view, see Editing code in Dreamweaver.

The predesigned pages provided with Dreamweaver contain placeholder “Lorem ipsum” text; if you’re basing your page on a predesigned page, you’ll have to replace the placeholder text with your own text when you’re ready to start adding content. It can be useful to leave the placeholder text in place until you’re done with design and layout, though, so that you or your client can look at the layout without being distracted by the text.

To add text to your page:

  1. Triple-click in the bold placeholder text at the top of the left column (under the image placeholder) to select the entire bold paragraph.
  2. Type Safety Tips (or your own heading text if you prefer).
  3. Select the three paragraphs of placeholder text below the horizontal rule.
  4. Type the following text (or your own text if you prefer):

The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch!

  1. In the right column, triple-click the word “News” and type Globe-Trotter Promotions to replace it.
  2. In the Site panel, locate the promotions.txt file in your Assets folder. Double-click the file’s icon to open it.

This file contains copy for Global Car Rentals special promotions.

Note: In this sample site, the file containing the copy is a text file. For other sites, you may be given HTML documents generated by Microsoft Word; you can import that HTML and clean it up using Dreamweaver’s Import Word HTML command. For more information, see Opening existing documents.

Note that the text file appears in a new Document window with a dark bar down the left side. This window is in Code view, and can’t be switched to Design view because the file is not an HTML file.

Note: If you prefer, use your own text on the page instead of using the provided text.

  1. In the promotions.txt Document window, press Control+A (Windows) or Command+A (Macintosh) to select all the text, then choose Edit > Copy to copy the text.
  2. In the index.htm Document window, select all of the placeholder text in the lower cell of the right-hand column, and choose Edit > Paste.

The text is pasted into the table.

  1. Click just before the word “Rent” (the second paragraph of text you just pasted), and choose Insert > Horizontal Rule to put a horizontal line between the two promotions.
  2. Save your document.
  3. Switch to the promotions.txt file. Close that file by choosing File > Close.

LESSON   Add styles to the text

There are several ways to style text in HTML. One approach is to use Cascading Style Sheets (CSS) to define specific HTML tags as being formatted in specific ways.

This lesson shows how to create a simple CSS style sheet from a predesigned style sheet, then apply the new style sheet to text and modify the styles.

To create a CSS style sheet:

  1. Choose File > New.
  2. In the New Document dialog box, select the CSS Style Sheets category from the category list on the left.

The list in the middle column of the dialog box is relabeled CSS Style Sheets. A list of pre-designed style sheets appears.

  1. In the CSS Style Sheets list, select a style sheet. For the Global Car Rental site, select Basic: Verdana, which redefines the body, td, and th tags by specifying fonts for them. Then click Create

Dreamweaver creates a new text file containing a small set of predefined CSS styles.

  1. Choose File > Save to save the new CSS file. Save it in the site’s assets folder; name it text.css (or any other name you like).
  2. Choose File > Close to close the CSS file.

To style your text using CSS styles:

  1. In the Window menu, choose an HTML file (such as index.htm).

Note: If your system preferences are set to not show file extensions, the index.htm file appears in the Window menu with the name index.

  1. Choose Window > CSS Styles to display the CSS Styles panel.
  2. At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.

If you haven’t previously defined styles for this document, no styles are available.

  1. At the bottom of the CSS Styles panel, click the Attach Style Sheet button.

The Link External Style Sheet dialog box appears.

  1. In the Link External Style Sheet dialog box, click Browse to locate a style sheet.
  2. In the Select Style Sheet File dialog box, browse to and select the new style sheet you created in the assets folder, then click OK (Windows) or Choose (Macintosh) to attach the style sheet.
  3. In the Link External Style Sheet dialog box, click OK to attach the style sheet.

The style sheet’s name and contents appear in the CSS Styles panel. The styles defined in the style sheet are applied to the text in the HTML document. For example, body text appears in Verdana.

  1. Save your document.

To edit the styles in the style sheet:

  1. At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.
  2. Select the name of the CSS file in the CSS Styles panel and click the Edit Style Sheet button at the bottom of the CSS Styles panel.

A dialog box appears showing the names of the styles in the style sheet.

  1. Select one of the styles, such as body, and click Edit.

The CSS Style Definition dialog box appears.

  1. Enter a size for the text, such as 13 pixels. Adjust other options as you like.
  2. Click OK to redefine the style.
  3. Edit the other styles. To create the styles used in the Global Car Rental site, set the body, td, and th styles to a size of 13 pixels.
  4. When you’re done editing styles, click the Save button to save your changes and close the stylesheet dialog box.

The changed styles are applied to your document. For example, body text appears in 13-pixel Verdana.

LESSON  Add images

In this lesson, you can add images to the page you’re working on. If you have your own images, you can use them instead, but the first time you try adding an image, we recommend using one supplied with Dreamweaver’s sample site.

If you haven’t already followed the procedure in Add assets to your site for copying the Global Car Rental site’s assets into your site’s local root folder, do so now.

To add an image to your document:

  1. Save your document if you haven’t already done so.

You can insert an image into an unsaved document, but if you do, a dialog box will appear, informing you that the URL used for the image will be the full local path to the image. If you take this approach, Dreamweaver fixes the URLs when you do save the document, but it’s easiest to save the document before adding images.

  1. To insert an image in place of an existing image placeholder, double-click the placeholder. For example, to insert the company logo at the top left of the Global Car Rental page, double-click the small placeholder that’s labeled “image (100 x 50).”

The Select Image Source dialog box appears.

  1. Near the bottom of the dialog box, make sure that the Relative To pop-up menu is set to Document.

For information on document-relative and root-relative URLs, see About document locations and paths.

  1. Browse to an image in your assets folder (such as logo.jpg).
  2. Click OK or Select (Windows) or Open or Choose (Macintosh) to insert the image.

In the Document window, the image appears where the placeholder was.

  1. Click the large image placeholder that you created in Add an image placeholder to select it. (Don’t double-click it.)

You can use the same approach that you used for the other placeholder to replace this placeholder with an image, but the following instructions provide an alternate approach.

  1. Make sure the Site panel and the Property inspector are showing (choose Window > Site Files and Window > Properties if they aren’t visible).
  2. In the Property inspector, drag from the Src text box’s Point-to-File icon to the Site panel. (Make sure to drag from the Point-to-File icon next to the Src text box, not the one next to the Link text box.) Continue to hold the mouse button down as you point to the assets folder (if the folder is closed); the folder opens. Continue to hold the button down as you point to the images folder; that folder opens as well. Continue to hold the button down until the pointer is over the vintage.jpg file. Release the mouse button to select vintage.jpg.

In the Document window, the image appears where the placeholder was. If the wrong image appears, look at the filename in the Src text box; if you selected the wrong file, drag the Point-to-File icon again.

  1. To insert images in places where you don’t already have placeholders, click in the Design view to place the insertion point where you want the image, then choose Insert > Image.

If you insert an image for which the image file isn’t inside your site’s local root folder, Dreamweaver provides the option to automatically copy the image into the site.

  1. Save your document.

 

LESSON   Set background colors

In the predesigned pages provided with Dreamweaver, the background colors of table cells are mostly set to gray; for most sites, you’ll have to change the colors to match your site’s color scheme.

To set the background color of a table cell:

  1. If the Property inspector isn’t open, choose Window > Properties to open it.
  2. If the Property inspector is collapsed (showing only its title bar), click the expander arrow in the title bar to expand it.
  3. If the Property inspector isn’t showing all properties, click the expander arrow at the lower right corner of the Property inspector to view all properties.
  4. Control-click (Windows) or Command-click (Macintosh) a cell to select the cell. For example, in the Global Car Rental sample page, there’s now a table cell that contains the logo image for the car rental company; Control-click or Command-click the cell that contains that logo image.

The lower half of the Property inspector shows cell properties. If the lower half of the Property inspector isn’t visible, click the expander arrow at the lower right corner of the Property inspector to view all properties.

  1. In the Property inspector, click the Background Color button that appears next to the lower of the two Bg labels.

The color picker appears and the pointer changes to an eyedropper.

  1. Select a color. You can either select a color in the color picker’s palette, or click anywhere on your display to select the color of the pixel you clicked. For example, click the background of the Global logo image to make the background color of the table cell match the image background color.

The table cell’s background color changes to the color you picked.

  1. Repeat that procedure for each table cell that you want to change the background color of. In the Global Car Rental sample page, change the background colors of all of the navigation-bar table cells and of the header cell in the second column of text (the cell that now contains the text “Globe-Trotter Promotions”), to make them all match the background color of the Global logo.
  2. Save your document.

 

LESSON   Look at the code

Take a quick time-out for a look at what Dreamweaver is doing when you add content to a page. As you add text, images, and other content, Dreamweaver generates HTML code.

Dreamweaver lets you view your document in either of two ways: Design view (where the document looks much like it would look in a browser), and Code view (where you can see the underlying HTML code). You can also use a split view that shows both Code and Design views.

To view the HTML code for your document:

  1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
  2. In the Document toolbar, click the Code and Design view button.

The window splits, showing the underlying HTML code.

You can edit the code in Code view. Changes you make to the code don’t appear in Design view until you refresh the view.

To make code changes appear in Design view, do one of the following:

Dreamweaver provides many advanced features to help you code in Code view; see Editing code in Dreamweaver for more information.

When you’re working on your own pages, you can whichever view is most comfortable for you. We’ll assume for the rest of this chapter that you’re using Design view.

To show Design view only:

  1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
  2. In the Document toolbar, click the Design view button.

 

LESSON    Create a second page

In this lesson, you’ll create a second page for your site; in the next lesson, Add text links between pages, you’ll create links between the pages.

There are several possible ways to create a second page. In this lesson, you’ll create a second page by making a copy of the first one, so that the second page will have the same layout as the first.

Note: If you want to create a layout of your own from scratch instead, you can either use the Dreamweaver table-editing tools or Layout view. Other layout options include frames and layers. None of these options are covered in this lesson, however.

In a more complex site, the best way to make sure all your pages have the same layout would be to use a template. For information about where to read about table editing, Layout view, frames, layers, and templates, see Further reading.

The second page to create in the Global Car Rental site is the customer service page. You’ll create the customer service page by making a copy of the main (index.htm) page, then removing content that shouldn’t appear on the customer service page, then adding new content.

For more information on how to add and format text, see Add styled text.

To create a copy of your first page (index.htm):

  1. In the Site panel, right-click (Windows) or Control-click (Macintosh) the filename of the first page you created, index.htm (or whatever name you gave the file).
  2. From the context menu, choose Duplicate.

A copy of the file appears.

Tip: If the copy doesn’t appear immediately, click the Refresh button in the Site panel to make it appear.

  1. Select the new duplicated file. Pause for a moment, then click it again to make the filename editable (this is the same technique used in Windows Explorer and in the Finder).
  2. Give the new file a new name, such as customerService.htm.

To remove unnecessary material from the new page:

  1. Open the new customerService.htm page by double-clicking it in the Site panel.

Look at the Document window’s title bar to be sure that you’re looking at the customerService.htm file. The title bar should say “Global Car Rental Home Page” and then a folder name and a filename; the filename should be customerServe.htm (or whatever you named it in the previous procedure).

  1. In the customerService.htm page, select the large image (the image showing the car in the main text column) by clicking it.
  2. In the tag selector, click the <td> tag.
  3. Press Backspace (Windows) or Delete (Macintosh).

Everything in the table cell, including the image and the text, is deleted.

  1. Save your document.

To add text to the new page:

  1. In the Site panel, locate the custServInfo.htm file in your Assets folder. Double-click the file’s icon to open it.

This file contains content to be added to the customer service page. If you were creating your own site, you would add your own content here, but for the purposes of this lesson, this content is provided for you.

  1. In the custServInfo.htm Document window, choose View > Code to view the HTML code.
  2. Still in the custServInfo.htm Document window, press Control+A (Windows) or Command+A (Macintosh) to select everything in the file.

If you’re not in Code view when you do this, you may have to press Control+A or Command+A several times to select everything; if the insertion point is inside a table cell, Select All initially selects only that cell. For simplicity, switch to Code view before selecting everything.

  1. Press Control+C (Windows) or Command+C (Macintosh) to copy everything.
  2. Switch back to the customerService.htm document. Click inside the now-empty main text column (the wide column on the left).
  3. Choose Edit > Paste HTML.

The HTML code that you copied from the custServInfo.htm file is pasted into this document. (If you choose Edit > Paste instead of Edit > Paste HTML, the HTML code is pasted into Design view as if it’s text. If HTML code appears in your Design view at this step, choose Edit > Undo and try again.)

The text.css style sheet is already attached to this page, so text is formatted automatically.

LESSON  Add text links between pages

You can create links at any stage of the site-creation process. If you’re following the lessons of this guide in order, then you’ve already created your pages and placed content in them; so in this lesson you’ll create links between the pages you’ve created.

The following are two other general approaches to creating links for a site:

To create a link from the customer service page to index.htm:

  1. Switch to the customer service page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
  2. In the bottom of the wide text column on the left side, select the words “Home Page”.

If you didn’t add text to the left column of the customer service page when you created it, enter the words Home Page in that text column and select those words.

  1. If the Property inspector isn’t open, open it by choosing Window > Properties.
  2. Click the folder icon next to the Link text box in the Property inspector. Browse to the index.htm file in your site’s local root folder.

LESSON  Create rollovers for graphical links

A rollover image is an image that appears to change when a visitor to your site points to the image with the pointer. For example, a button on a page may appear to light up when the visitor points to it.

A rollover image consists of two images: the image displayed when the page first loads in the browser, and the image displayed when the pointer moves over the original image.

Note: When creating a rollover, make sure to use two images that have the same dimensions.

To create a rollover:

  1. Switch to the main (index.htm) page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
  2. In the Document window, place the insertion point where you want the rollover image to appear. On the Global Car Rental main page, for example, double-click in the navigation-bar table cell that says “Lorem” and press Backspace (Windows) or Delete (Macintosh) to delete the text, leaving the insertion point in the cell.
  3. Choose Insert > Interactive Images > Rollover Image.
  4. In the Insert Rollover Image dialog box, type a name for the image, such as home-image, in the Image Name text box.

This gives the image a unique name, and makes it easily identifiable in the HTML code.

  1. In the Original Image text box, click Browse; then navigate to the btnHome.jpg file in your site’s images folder (inside the assets folder). Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).

The Original Image text box indicates which image to display when the page first appears in the browser.

  1. In the Rollover Image text box, click Browse; then navigate to btnHome_on.jpg in your site’s images folder. Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).

The Rollover Image text box indicates which image to display when the pointer is pointing to the image in the browser.

  1. Make sure the Preload Rollover Image option is selected so the rollover images load when the page opens in the browser, ensuring a quick transition between images when a user moves the pointer over the original image.
  2. In the When Clicked, Go To URL text box, click the Browse button and browse to index.htm.

The index.htm file is the file that you’re editing, so this step causes the rollover image to link to the page that you’re placing the rollover image on. It might seem unnecessary to have a link to the page that the link is on, but you’ll be using the same set of navigation rollovers on other pages as well, so this link will allow visitors to return to the index.htm page from other pages that contain this navigation bar.

  1. Click OK to close the dialog box.

The specified original image appears in the document.

  1. Save your document.

Note: Rollover images don’t change when you point to them with the pointer in the Dreamweaver Document window; rollover images work only in a browser. To make sure your rollovers work, you have to preview your document in a browser. For information on previewing, see Preview in browser.

For the Global Car Rental site, create two more rollovers in the other two navigation-bar table cells (the ones that say “Ipsum” and “Dolor”): one rollover that uses the btnCustomerService.jpg and btnCustomerService_on.jpg images, and is linked to customerService.htm, and another rollover that uses the btnLocations.jpg and btnLocations_on.jpg images, and is linked to locations.htm. Note that you haven’t yet created the locations.htm file; just type the filename into the When Clicked, Go To URL text box in the Insert Rollover Image dialog box.

LESSON   Copy the navigation bar

Now that you’ve created a working navigation bar, you can reuse it in all of your pages. In this lesson, you’ll copy the navigation-bar table cells and paste them into your second page.

There are a variety of other ways to reuse content in Dreamweaver, including library items, templates, and snippets.

To copy the navigation bar into another page:

  1. In the index.htm file, click in the table cell that contains the Home rollover image.
  2. In the tag selector, select the rightmost <tr> tag.

The table row containing the three navigation-bar rollovers is selected.

  1. Choose Edit > Copy.
  2. Switch to the customerService.htm file.
  3. Click in the navigation-bar table cell that says “Lorem.”
  4. In the tag selector, select the rightmost <tr> tag.
  5. Choose Edit > Paste.

The navigation-bar rollover images are pasted in place of the existing table cells.

  1. Save your document.

 

LESSON   Preview in browser

The Design view gives a rough idea of what your page will look like in a browser, but the only way to be sure how it will look is to preview it in a browser. Each version of each browser has its own quirks; Dreamweaver strives to produce HTML that will look as similar as possible from one browser to another, but sometimes differences can’t be avoided. (That’s why Dreamweaver doesn’t display a preview directly; there’s no way for Dreamweaver to mimic all the different behaviors of all the different browsers.)

Preview in Browser shows how the pages will look when you’ve published them.

To preview your pages:

  1. If index.htm isn’t the current document, switch to it. (If it’s not open, open it.)
  2. Press the F12 key.

Your primary browser starts if it’s not running already. It displays the index page.

Note: Dreamweaver should automatically detect your primary browser and use that for previewing. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and choose File > Preview in Browser > Edit Browser List. The Preview in Browser Preferences dialog box appears; add the correct browser to the list. For more information, click the Help button in the Preferences dialog box.

  1. Move the pointer to point to the rollover images to see the images change. Click links to make sure they work.

LESSON  Set up a remote site, then publish

You’ve now created a small but functional website. The next step is to publish it by uploading the files to a remote web server.

Before you can proceed, you must have access to a remote web server (such as your ISP’s server, or a server owned by the client you’re working for, or an intranet server within your company, or an IIS or PWS server on a Windows computer). If you don’t already have access to such a server, contact your ISP, your client, or your system administrator.

The following procedure works best if your remote root folder is empty. If your remote site already contains files, then create an empty folder in your remote site (on the server), and use that empty folder as your remote root folder.

The following procedure assumes that you have set up a local site. For more information, see Set up a local site.

To connect to a remote site:

  1. Choose Site > Edit Sites.
  2. Select a site (such as Global Car Rental) and click Edit.
  3. Click the Basic tab at the top of the dialog box.
  4. You’ve already filled in the first few steps in the Basic tab, when you set up your local site, so click Next a few times, until the Sharing Files step is highlighted at the top of the wizard.
  5. In the pop-up menu labeled “How do you connect to your remote server?”, choose a method for connecting to the remote site.

The most common method for connecting to a server on the Internet is FTP; the most common method for connecting a server on your intranet is Local/Network. If you aren’t sure what to choose here, ask the server’s system administrator.

  1. If you choose FTP, enter the following options:

In many cases, this text box should be left blank.

  1. If you choose Local/Network, then click the folder icon next to the text box and browse to the remote site’s root folder.
  2. Click Next.
  3. Don’t enable check-in and check-out for this site.

If you and your co-workers are working together on a larger site, check-in and check-out help to prevent you from overwriting each others’ files. For this site, though, you don’t need this feature.

  1. Click Next.
  2. Click Done to finish setting up the remote site.
  3. Click Done again to finish editing the site.

To upload your pages to a remote site:

  1. In the Site panel, select the site’s local root folder.
  2. Click the Put Files button.

All of the site’s files are uploaded to the remote site.

  1. Open your remote site in a browser to make sure everything uploaded correctly.

 

LESSON   Further reading

Dreamweaver is a big application, with dozens of powerful features. This guide only touches on the basics.

This chapter of Getting Started focused on using Design view to create a static site. For information on Code view and hand-coding in Dreamweaver, see Editing code in Dreamweaver. For information about the basics of creating a database-driven web application, see Understanding Web Applications and Developing a Web Application in Dreamweaver MX.

For more detailed information on topics covered in this chapter of Getting Started, see the following topics in Dreamweaver Help:

In addition to information on specific topics, Dreamweaver Help provides information about other resources, such as the Macromedia Support Center and online discussion forums. For information about such resources, see Welcome to Dreamweaver.