1. Manuals
  2. Brands
  3. MACROMEDIA Manuals
  4. Software
  5. DREAMWEAVER 8-GETTING STARTED WITH...
  6. Getting started

MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER Getting Started

Hide thumbs
Table of Contents

Advertisement

Quick Links

Getting Started with Dreamweaver

Advertisement

Table of Contents
loading

Related Manuals for MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER

Summary of Contents for MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH DREAMWEAVER

  • Page 1 Getting Started with Dreamweaver...
  • Page 2 Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally.

  • Page 3: Table Of Contents

    Contents PART 1: INTRODUCTION TO DREAMWEAVER Introduction ..........11 What you can do with Dreamweaver 8 .
  • Page 4 Chapter 5: Tutorial: Adding Content to Pages ....73 Locate your files..........73 Review your task .
  • Page 5 Chapter 9: Tutorial: Creating a CSS-based Page Layout ..153 Learn about CSS-based page layout ......153 Examine the design comp .
  • Page 6 PART 4: APPENDICES Appendix A: Understanding Web Applications ....217 About web applications ........217 How a web application works .
  • Page 7 Appendix G: Setup for Sample PHP Site ....301 Setup checklists for PHP developers ......302 Configuring your system (PHP).
  • Page 8 Contents...

  • Page 9: Part 1: Introduction To Dreamweaver

    PART 1 Introduction to Dreamweaver Part One of this book introduces you to Macromedia Dreamweaver 8, and includes installation information and a workspace overview. It also provides a list of available resources for learning Dreamweaver. This part contains the following sections: Introduction .

  • Page 11: Introduction

    Dreamweaver provides you with helpful tools to enhance your web creation experience. This guide introduces you to using Macromedia Dreamweaver 8 if you’re unfamiliar with any major aspect of it.The tutorials in this guide lead you through the process of creating a simple but functional website.

  • Page 12: What's New In Dreamweaver 8

    Cascading Style Sheets (CSS), JavaScript, ColdFusion Markup Language (CFML), and other languages. Macromedia Roundtrip HTML technology imports your hand-coded HTML documents without reformatting the code; you can then reformat code with your preferred formatting style.

  • Page 13: Installing Dreamweaver 8

    “What’s new in Dreamweaver 8” in Using Dreamweaver (Help > Using Dreamweaver). Installing Dreamweaver 8 This section explains how to install Dreamweaver. Be sure to read the release notes on the Macromedia website at www.macromedia.com/go/dw_documentation for late-breaking information or instructions.

  • Page 14: Typographical Conventions

    To register Macromedia Dreamweaver 8, do one of the following: Select Help > Online Registration and fill out the electronic form. Select Help > Print Registration, print the form, and mail it to the address shown on the form. Typographical conventions The following typographical conventions are used in this guide: Menu items are shown in this format: menu name >...

  • Page 15: Chapter 1: Learning Dreamweaver

    CHAPTER 1 Learning Dreamweaver Macromedia Dreamweaver 8 includes a variety of resources to help you learn the program quickly and become proficient in creating your own web pages. All of the Dreamweaver documentation is available in both electronic help and PDF format.
  • Page 16 For web-design novices: Begin by reading Chapter 2, “Dreamweaver Basics,” on page 27. Then continue by doing the tutorials in this book. The tutorials are divided into two sections. The first five tutorials are for beginners, and take you through the process of developing a small but functional website from start to finish.
  • Page 17 For experienced web designers who are new to Dreamweaver: Begin by reading the tutorials in this Getting Started with Dreamweaver guide. In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1, “Exploring the Workspace” to learn more about the Dreamweaver user interface.
  • Page 18 Connect to a database. (See “Connecting to a database” in Chapter 23, “Setting Up a Web Application”.) Read the overview at the beginning of each chapter in Using Dreamweaver to determine whether its topics are of interest to you. Experienced hand-coders If you are an experienced hand-coder, this section will point you to sections of the Dreamweaver documentation that are most appropriate for your background.

  • Page 19: Getting The Most From The Dreamweaver Documentation

    For web application developers who have not used Dreamweaver: Begin by quickly reading this Getting Started with Dreamweaver guide to familiarize yourself with the basics of using Dreamweaver. In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1, “Exploring the Workspace” to learn more about the Dreamweaver user interface.
  • Page 20 Accessing the Dreamweaver documentation The following table summarizes the documentation included in the Dreamweaver help system. You can purchase printed versions of select titles. For more information, see www.macromedia.com/go/buy_books. Title Description/ Where to Find It Audience Basic introduction • View in Dreamweaver: Select Getting Started Help >...
  • Page 21 Audience Description of the • View in Dreamweaver: Select Extending Help > Extending Dreamweaver Dreamweaver Dreamweaver • View online: http:// framework and livedocs.macromedia.com/go/ application livedocs_dreamweaver/ programming • Get the PDF: interface (API). www.macromedia.com/go/ Intended for dw_documentation advanced users who want to build...
  • Page 22 Using ColdFusion A selection of the • View in Dreamweaver: Select Help > Using ColdFusion most important • View online: http:// books in the livedocs.macromedia.com/go/ ColdFusion livedocs_coldfusion/ documentation • Get the PDF: set. (The full set is www.macromedia.com/go/ available on cf_documentation LiveDocs.)
  • Page 23 Accessing additional online Dreamweaver resources The following table summarizes additional online resources for learning Dreamweaver. Resource Description/ Where to Find It Audience Dreamweaver TechNotes, plus www.macromedia.com/go/ Support Center support and dreamweaver_support problem-solving information for Dreamweaver users. Dreamweaver Articles and www.macromedia.com/go/...

  • Page 24: Using The Dreamweaver Help System

    Using the Dreamweaver help system The online help system available in the Help menu provides detailed information on all tasks you can perform with Dreamweaver. To see a list of documents available in Help, see “Accessing the Dreamweaver documentation” on page This section covers the following topics: “Opening Help”...

  • Page 25: Using The Index

    Using the index You can find information quickly with the index. To use the index (Windows): In Dreamweaver Help, click the Index tab. Scroll to an index entry in the alphabetized list and double-click it to display the indexed information. To use the index (Macintosh): You can start typing In Dreamweaver Help, click the Index link in the table of contents.
  • Page 26 Printing the Dreamweaver Documentation The following books are available in PDF format on the Macromedia website at www.macromedia.com/go/dw_documentation: Using Dreamweaver Getting Started with Dreamweaver Extending Dreamweaver Dreamweaver API Reference You can print all or part of the PDF on your own printer or you can bring the PDF to a copy shop.

  • Page 27: Chapter 2: Dreamweaver Basics

    CHAPTER 2 Dreamweaver Basics To get the most out of your Macromedia Dreamweaver 8 experience, you should understand the basic elements of the Dreamweaver workspace. This chapter introduces you to the most important and commonly used workspace elements, and tells you how to accomplish some basic tasks in Dreamweaver.
  • Page 28 “The Coding toolbar” on page 35 “The Property inspector” on page 36 “The Files panel” on page 37 “The CSS Styles panel” on page 38 The workspace layout In Windows, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows and panels are integrated into a single larger application window.
  • Page 29 On the Macintosh, Dreamweaver can display multiple documents in a single window with tabs that identify each document. Dreamweaver can also appear as part of a floating workspace in which each document appears in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows.
  • Page 30 The Document window The Document window shows the current document. You can select any of the following views: Design view is a design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see viewing the page in a browser.
  • Page 31 The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites. Show Code View No Browser/Check Errors Validate Markup Show Code and Design Views File Management Show Design View Visual Aids Server Debug Document Title...

  • Page 32: The Status Bar

    View Options allows you to set options for Code view and Design view, including which view should appear above the other. Options in the menu are for the current view: Design view, Code view, or both. Visual Aids lets you use different visual aids to design your pages. For more information about using the Document toolbar, see Chapter 1, “Exploring the Workspace”...
  • Page 33 The Window Size pop-up menu (visible in Design view only) lets you resize the Document window to predetermined or custom dimensions. For more information, see “Resizing the Document window” in Using Dreamweaver. To the right of the Window Size pop-up menu are the estimated document size and estimated download time for the page, including all dependent files such as images and other media files.
  • Page 34 The Flash elements category enables you to insert Macromedia Flash elements. The Favorites category enables you to group and organize the Insert bar buttons you use the most in one common place.
  • Page 35 The Coding toolbar The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and expanding code selections, highlighting invalid code, applying and removing comments, indenting code, and inserting recently used code snippets. The Coding toolbar is visible only in Code view and appears vertically on the left side of the Document window.
  • Page 36 The Property inspector The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. For example, if you select an image on your page, the Property inspector changes to show properties for the image (such as the file path to the image, the width and height of the image, the border around the image, if any, and so on).
  • Page 37 The Files panel You use the Files panel to view and manage the files in your Dreamweaver site. When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, as well as expand or collapse the Files panel. When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list of files.
  • Page 38 The CSS Styles panel The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Styles panel lets you switch between the two modes.

  • Page 39: Customizing The Dreamweaver 8 Workspace

    In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document.
  • Page 40 Coder 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 the Document window showing Code view by default.
  • Page 41 To combine separate documents into tabbed windows: Select Window > Combine as Tabs. To change the default tabbed document setting: Select Dreamweaver > Preferences, and then select the General category. Select or deselect Open Documents in Tabs, and click OK. Dreamweaver does not alter the display of documents that are currently open when you change preferences.

  • Page 42: Accomplishing Basic Tasks In Dreamweaver 8

    Accomplishing basic tasks in Dreamweaver 8 This section describes how to accomplish basic tasks such as creating, opening, and saving files. For more detailed information, see Chapter 3, “Creating and Opening Documents” in Using Dreamweaver. This section contains the following topics: “About Dreamweaver files”...
  • Page 43 , or Extensible Markup Language files, have a .xml extension. They contain data in a raw form that can be formatted using XSL (Extensible Stylesheet Language). For more information on working with these types of files, see Chapter 36, “Displaying XML Data in Web Pages” in Using Dreamweaver.
  • Page 44 To create a new blank document: Select File > New. The New Document dialog box appears. The General tab is already selected. From the Category list, select Basic Page, Dynamic Page, Template Page, Other, or Framesets; then, from the list on the right, select the type of document you want to create.
  • Page 45 Opening files in Dreamweaver In Dreamweaver, you can easily open and edit your documents. To open a file: Select File > Open. In the Open dialog box, select the file and click Open. Accomplishing basic tasks in Dreamweaver 8...
  • Page 46 Dreamweaver Basics...
  • Page 47 PART 2 Tutorials Part Two of this book contains five basic tutorials that take you through the steps of building a web page. The web page you’ll create is the home page for Cafe Townsend, a fictional restaurant. This part contains the following sections: Tutorial: Setting Up Your Site and Project Files .

  • Page 49: Chapter 3: Tutorial: Setting Up Your Site And Project Files

    Tutorial: Setting Up Your Site and Project Files This tutorial introduces you to the concept of a Macromedia Dreamweaver 8 site and shows you how to set up the project files for the Cafe Townsend sample website. In Dreamweaver, a site generally consists of two parts: a collection of files on a local computer (the local site), and a location on a remote web server that you upload the files to when you’re ready to make...

  • Page 50: Set Up Your Project Files

    A Dreamweaver site consists of as many as three parts, depending on your computing environment and the type of website you are developing: Local folder is your working directory. Dreamweaver refers to this folder as your local site. The local folder is usually a folder on your hard disk. Remote folder is where you store your files, depending on your environment, for testing, production, collaboration, and publication.
  • Page 51 In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\. On the Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend. About local and remote “root” folders The local “root” folder of your Dreamweaver site is often the main or top-level folder for your website. It usually corresponds to an identical folder on the remote site (web server).

  • Page 52: Define A Local Folder

    Copy the cafe_townsend folder into the local_sites folder. The cafe_townsend folder is the folder that you will use as the root folder (main folder) for your Dreamweaver site. Define a local folder You must define a Dreamweaver local folder for each new website you create.
  • Page 53 In the Default Images Folder text box, specify the images folder that already exists in the cafe_townsend folder. You can click the folder icon to browse to and select the folder, or enter a path in the Default Images Folder text box. The Site Definition dialog box should now look as follows: Click OK.
  • Page 54 The Files panel now shows the new local root folder for your current site. The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop.

  • Page 55: Chapter 4: Tutorial: Creating A Table-Based

    Page Layout This tutorial explains how to create a table-based page layout in Macromedia Dreamweaver 8. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and Macromedia Flash content.
  • Page 56 A comp consists of any number of page elements that the client has requested for their website. For example, the client might say, “I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips.”...

  • Page 57: Create And Save A New Page

    You’ll notice that the graphic designer has provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. In the next sections, you’ll use Dreamweaver to lay out this design. You can also open the original comp file if you want to see it on the computer screen.

  • Page 58: Insert Tables

    Select File > Save to save your page. Insert tables Next you’ll add a table that will hold text, graphics, and Macromedia Flash assets. Click once on the page to place the insertion point in the upper-left corner of the page.
  • Page 59 Click OK. A table with three rows and one column appears in your document. The table is 700 pixels wide with no border, cell padding, or cell spacing. Insert tables...
  • Page 60 More about tables Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. When you create multiple rows with multiple cells, the cells form columns. Technically, a cell is a division within a horizontal row, and a column is the vertical accumulation of those cell divisions.
  • Page 61 Click OK. A second table with one row and three columns appears below your first table. Click to the right of the table to deselect it. Insert a third table by selecting Insert > Table and entering the following values in the Insert Table dialog box: Enter 1 in the Rows text box.

  • Page 62: Set Table Properties

    You may see the Table selector (indicated by green lines) after you insert a table. You can always make the Table selector disappear by clicking outside the table. You can also disable the Table selector by selecting View > Visual Aids > Table Widths. Set table properties Now you’ll set precise table properties, using Expanded Tables mode, a feature that temporarily adds cell padding and spacing to tables and...
  • Page 63 Click once inside the first row of the first table. In the Property inspector (Window > Properties), enter 90 in the Cell Height (H) text box and press Enter (Windows) or Return (Macintosh). If you cannot see the Cell Height text box, click the expander arrow in the lower-right corner of the Property inspector.
  • Page 64 In the Property inspector, enter 24 in the Cell Height text box and press Enter (Windows) or Return (Macintosh). You should now have three rows of differing heights in the first table. Next you’ll set properties for the second table (the table that contains three columns).
  • Page 65 In the Property inspector, enter 140 in the Cell Width (W) text box and press Enter (Windows) or Return (Macintosh). Click once inside the second column of the second table. In the Property inspector, enter 230 in the Cell Width text box and press Enter (Windows) or Return (Macintosh) Set the width of the third column to 330 pixels.
  • Page 66 In the Property inspector, enter 24 in the Cell Height text box and press Enter (Windows) or Return (Macintosh). Your layout should now look as follows: Click the Exit Expanded Tables Mode link at the top of the Document window to return to Standard mode. Save your page.

  • Page 67: Insert An Image Placeholder

    Insert an image placeholder An image placeholder is a graphic that you use until final artwork is ready to be added to a web page. An image placeholder is useful when you lay out web pages because it allows you to position an image on a page before you actually create the image.
  • Page 68 GIFs or JPEGs. If you have Macromedia Fireworks, you can create a new graphic from a Dreamweaver image placeholder. When you select the image placeholder and click the Create button in the Property inspector, Fireworks opens and presents you with a new canvas.

  • Page 69: Add Color To The Page

    Add color to the page Now you’ll add more color to the page by setting colors for some of the table cells and for the background of the page. Click once inside the first cell of the three-columned table. Click the <td> tag (cell tag) in the tag selector to select the cell. In the Property inspector (Window >...
  • Page 70 In the Background Color text box, enter the hexadecimal value #993300 and press Enter (Windows) or Return (Macintosh). The color of the table cell turns to reddish-brown. Click once inside the second cell of the three-columned table. Click the <td> tag (cell tag) in the tag selector to select the cell. In the Property inspector, click once inside the Background Color text box, enter the hexadecimal value #F7EEDF, and press Enter (Windows) or Return (Macintosh).
  • Page 71 Select Modify > Page Properties. In the Appearance category of the Page Properties dialog box, click the Background Color color box and select black (#000000) from the color picker. Picking colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red).
  • Page 72 Click OK. Your page background turns to black. Save your work. Your page layout is now complete. The layout contains a number of tables that can hold assets such as images, text, and Flash Video (FLV) files. In the next tutorial, Chapter 5, “Tutorial: Adding Content to Pages,”...

  • Page 73: Chapter 5: Tutorial: Adding Content To

    CHAPTER 5 Tutorial: Adding Content to Pages This tutorial shows you how to add content to web pages in Macromedia Dreamweaver 8. You can add many different kinds of content to web pages, including graphics, Macromedia Flash files, Macromedia Flash Video files, and text, to name a few.
  • Page 74 The finished version of the tutorial, table_layout.html, is located in the completed_files/dreamweaver folder, within the cafe_townsend folder that you copied to your hard disk in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.” If you begin this tutorial with the completed table_layout.html file, instead of the index.html file from Chapter 4, “Tutorial: Creating a Table-based Page Layout,”...

  • Page 75: Review Your Task

    In this tutorial you’ll add assets to the home page for Cafe Townsend, a fictional restaurant. You’ll learn how to add images, a Macromedia Flash file, a Macromedia Flash Video file, and text. When you’re finished, the page will look like this: You’ll notice that the text on the page is not yet formatted.

  • Page 76: Insert Images

    You can find the required assets for this tutorial in the cafe_townsend root folder that you copied to your hard drive in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.” If you didn’t complete that tutorial, you must do so before you proceed. The tutorial lets you know exactly where to find the assets as you go along.
  • Page 77 Select the banner_graphic.jpg file and click OK. Dreamweaver replaces the image placeholder with the banner graphic for Cafe Townsend. Click once outside the table to deselect the image. Save the page (File > Save). Insert images...
  • Page 78 Insert an image by using the Insert menu Click once inside the third row of the first table (two rows below the banner graphic you just inserted, just above the colored table cells). Select Insert > Image. In the Select Image Source dialog box, navigate to the images folder inside the cafe_townsend folder, select the body_main_header.gif file, and click OK.
  • Page 79 Insert an image by dragging Click once inside the last row of the last table on the page (just below the colored table cells). In the Files panel (Window > Files), locate the body_main_footer.gif file (it’s inside the images folder), and drag it to the insertion point in the last table.
  • Page 80 Insert an image from the Assets panel Click once inside the center column of the three-columned table (the first table cell that is colored light tan). In the Property inspector (Window > Properties), select Center from the Horz pop-up menu, and select Top from the Vert pop-up menu. This aligns the contents of the table cell in the middle of the cell, and pushes the cell’s contents to the top of the cell.
  • Page 81 The Assets panel You can use the Assets panel to view and manage assets in your current site. The Assets panel displays assets for the site associated with the active document in the Document window. You must define a local site before you can view assets in the Assets panel. For more information, see Chapter 3, “Tutorial: Setting Up Your Site and Project Files,”...
  • Page 82 Do one of the following: Drag the street_sign.jpg file to the insertion point in the center table cell. Click Insert at the bottom of the Assets panel. If the Image Tag Accessibility Attributes dialog box appears, click OK. The street_sign.jpg graphic appears on the page. Click once outside the table to deselect the image.

  • Page 83: Insert And Play A Flash File

    Insert and play a Flash file Next, you’ll insert a Flash file that plays a photographic slide show of Cafe Townsend’s featured food items. The Flash file you’ll insert is a flexible messaging area—or FMA—file. An FMA is a common type of Flash application that displays an informational message to the audience.
  • Page 84 About Flash files When you build assets in Macromedia Flash, you work in FLA files, the default file type for the Flash application. FLA files are designated by a .fla extension. For example, if you are working on an animated logo for a website, the filename of the Flash file might be animated_logo.fla.
  • Page 85 In the Property inspector (Window > Properties), click Play. If you cannot see the Flash Play button, click the expander arrow in the lower-right corner of the Property inspector. Dreamweaver plays the Flash file in the Document window, showing you what site visitors will see when they view the page in a browser. In the Property inspector, click Stop to stop playing the Flash file.

  • Page 86: Insert Flash Video

    Streaming Video streams the Flash Video content and plays it on a web page immediately. To enable streaming video on your web pages, however, you must have access to Macromedia Flash Communication Server, the only server that can stream Flash Video content.
  • Page 87 A preview of the selected skin appears below the Skin pop-up menu. The Skin option specifies the look and feel for the Flash Video component that will contain the Flash Video content. For more information on how to select different skins for Flash Video components, see www.macromedia.com/go/flv_tutorial. Insert Flash Video...
  • Page 88 In the Width and Height text boxes, do the following: In the Width text box, type 180. In the Height text box, type 135 and press Enter (Windows) or Return (Macintosh). The value in the Width and Height text boxes specifies the width and You can click Detect height in pixels of the FLV file.

  • Page 89: Insert Text

    Click OK to close the dialog box and add the Flash Video content to your web page. The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your Flash Video content on a web page.
  • Page 90 Insert body text In the Files panel, locate the sample_text.txt file (in the cafe_townsend root folder) and double-click the file’s icon to open it in Dreamweaver. You’ll notice that this window is in Code view, and cannot be switched to Design view (the view you’ve been working in until now) because the file is not an HTML file.
  • Page 91 Depending on your monitor resolution, the three-columned table widens to accommodate the text. Don’t worry about how this looks right now. In the next tutorial, you’ll learn how to use CSS to format the text so that everything fits in the table appropriately. Make sure the insertion point is still inside the table cell where you just pasted the text.
  • Page 92 Insert text for a navigation bar Next you’ll insert text for a navigation bar. However, the text won’t look like a navigation bar until you format it in the next tutorial. Click once in the first column of the three-columned table (the column that is colored reddish-brown).
  • Page 93 Repeat the previous step until you’ve entered the following words with a space between each one: Articles, Special Events, Location, Menu, Contact Us. Do not press Enter (Windows) or Return (Macintosh) when you type. Use only the Spacebar to separate words, and let the words wrap naturally.

  • Page 94: Create Links

    In the Property inspector (Window > Properties), select Top from the Vert pop-up menu. This aligns the text you just typed to the top of the table cell. If you cannot see the Vert pop-up menu, click the expander arrow in the lower-right corner of the Property inspector.
  • Page 95 With the index.html page open in the Document window, select the word Cuisine that you typed in the first cell of the three-columned table. Be careful to select the word Cuisine only, and not the space after it. In the Property inspector (Window > Properties), click the folder icon next to the Link text box.

  • Page 96: Preview Your Page In A Browser

    Repeat the previous steps to link each word or set of words that you typed for the navigation. You want to create six more links: one for Chef Ipsum, Articles, Special Events, Location, Menu, and Contact Us. Link each word or set of words to the menu.html page, and be careful to avoid the space before and after the words or set of words when you create your links.
  • Page 97 Make sure the index.html file is open in the Document window. Press the F12 key (Windows) or Option+F12 (Macintosh). Your primary browser starts if it’s not running already and displays the index page. Dreamweaver automatically detects your primary browser and uses that for previewing.
  • Page 98 You now have a web page full of content. The next step is to format some of the content to make it more appealing. In the next tutorial, you’ll learn how to use CSS to format the text that you added. Tutorial: Adding Content to Pages...

  • Page 99: Chapter 6: Tutorial: Formatting Your Page With Css

    CHAPTER 6 Tutorial: Formatting Your Page with CSS This tutorial shows you how to format text on your page using Cascading Style Sheets (CSS) in Dreamweaver. CSS provides you with greater control over the appearance of your page by letting you format and position text in ways that HTML cannot.

  • Page 100: Locate Your Files

    Locate your files In this tutorial, you’ll begin with the Cafe Townsend index page to which you added content in Chapter 5, “Tutorial: Adding Content to Pages.” you did not complete that tutorial, you can either complete it before proceeding, or you can open the finished version of the tutorial and begin with that.

  • Page 101: Review Your Task

    Review your task In this tutorial, you’ll use Cascading Style Sheets (CSS) to format the text on the home page for Cafe Townsend, a fictional restaurant. You’ll create different kinds of CSS rules to format the body text. You’ll also format the link text on the left side of the page to create a navigation bar.

  • Page 102: Learn About Css

    For more information about CSS, proceed to the next section. To start creating CSS right away, proceed to “Create a new style sheet” on page 104. Learn about CSS Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content on a web page.
  • Page 103 The term cascading refers to your ability to apply multiple styles to the same element or web page. For example, you can create one CSS rule to apply color and another rule to apply margins, and apply them both to the same text on a page.

  • Page 104: Create A New Style Sheet

    Create a new style sheet First, you’ll create an external style sheet that contains a CSS rule that defines a style for paragraph text. When you create styles in an external style sheet, you can control the appearance of multiple web pages from a central location, instead of setting styles on each individual web page.
  • Page 105 More about CSS rules CSS rules can reside in the following locations: External CSS style sheets are collections of CSS rules stored in a separate, external .css file (not an HTML file). The .css file is linked to one or more pages in a website by using a link in the head section of a document.

  • Page 106: Attach A Style Sheet

    Don’t forget to include a semicolon at the end of each line, after the property values. When you’re finished, the code should look like following example: Save the style sheet. For more information Next you’ll attach the style sheet to the index.html page. about any CSS property, check the O’Reilly reference...
  • Page 107 In the Document window, open the Cafe Townsend index.html file. (You can click its tab if it’s already open.) Select the text of the first paragraph that you pasted into the page in Chapter 5, “Tutorial: Adding Content to Pages”. Look in the Property inspector and make sure that the paragraph is formatted with the paragraph tag.
  • Page 108 In the CSS Styles panel (Window > CSS Styles), click the Attach Style Sheet button in the lower-right corner of the panel. In the Attach External Style Sheet dialog box, click Browse and browse to the cafe_townsend.css file that you created in the previous section. Click OK.

  • Page 109: Explore The Css Styles Panel

    Explore the CSS Styles panel The CSS Styles panel lets you track the CSS rules and properties that affect a currently selected page element, or the rules and properties that affect an entire document. It also lets you modify CSS properties without opening an external style sheet.
  • Page 110 You set the background color for the page in Chapter 4, “Tutorial: Creating a Table-based Page Layout” by using the Modify Page Properties dialog box. When you set page properties in this manner, Dreamweaver writes a CSS style that is internal to the document. Click plus (+) to expand the cafe_townsend.css category.

  • Page 111: Create A New Css Rule

    Create a new CSS rule In this section you’ll use the CSS Styles panel to create a custom CSS rule, or class style. Class styles let you set style attributes for any range or block of text, and can be applied to any HTML tag. For more information on different types of CSS rules, see “Learn about CSS”...
  • Page 112 Select cafe_townsend.css from the Define In pop-up menu. It should be selected by default. Click OK. The CSS Rule Definition dialog box appears, indicating that you are creating a class style called .bold in the cafe_townsend.css file. In the CSS Rule Definition dialog box, do the following: In the Font text box, enter Verdana, sans-serif.

  • Page 113: Apply A Class Style To Text

    Click OK. For more information Click All at the top of the CSS Styles panel. about any CSS property, check the Click the plus (+) button next to the cafe_townsend.css category if the O’Reilly reference category isn’t already expanded. guide included with You’ll see that Dreamweaver added the .bold class style to the list of Dreamweaver.

  • Page 114: Format The Navigation Bar Text

    Repeat step 2 to apply the bold class style to the first four words of the second paragraph. Save your page. Format the navigation bar text Next you’ll use CSS to apply styles to the link text for the navigation bar. Many web pages use images of colored rectangles with text inside them to create a navigation bar, but with CSS, all you need is linked text and some formatting.
  • Page 115 Create a new rule for the navigation Open the cafe_townsend.css file if it isn’t already open, or click on its tab to see it. Define a new rule by typing the following code in the file, after the .bold class style: .navigation { This is an empty rule.
  • Page 116 In the CSS Styles panel, make sure All mode is selected, select the new .navigation rule and click Edit Style in the lower-right corner of the panel. In the CSS Rule Definition dialog box, do the following: Enter Verdana, sans-serif in the Font text box. Select 16 from the Size pop-up menu, and select pixels from the pop-up menu immediately to the right of the Size pop-up menu.
  • Page 117 Click OK. For more information Now you’ll use the CSS Styles panel to add a few more properties to the about any CSS .navigation rule. property, check the O’Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O’Reilly CSS Reference from...
  • Page 118 In the CSS Styles panel, make sure the .navigation rule is selected and click Show List View. List view reorganizes the Properties pane to display an alphabetical list of all available properties (in contrast to Set Properties view, the previous view, which shows only those properties you’ve already set). Click in the column to the right of the property.
  • Page 119 Enter #993300 as the hexadecimal value and press Enter (Windows) or Return (Macintosh). Locate the property (you might need to scroll down), click display To see how your once in the column to the right, and select block from the pop-up menu. work affects the external style sheet, keep the...
  • Page 120 Click Show Set Properties so that only your set properties appear in the Properties pane. Click on the cafe_townsend.css file to display it. You’ll see that Dreamweaver has added all of the properties you specified to the file. Save the cafe_townsend.css file and close it. You’ve now created a rule to format the navigation bar text.
  • Page 121 Apply the rule With the index.html page open in the Document window, click the word Cuisine so that the insertion point is somewhere in the word. In the tag selector, click the rightmost <a> tag. This action selects all of the text for the specified <a> tag, or link. In the Property inspector (Window >...
  • Page 122 Repeat step 1 through 3 for each of the individual links in the navigation bar. You must assign a navigation class style to each <a> tag or link, so it’s important that you use the tag selector to select each link individually, and then assign the class styles one at a time.
  • Page 123 Add a rollover effect Now you’ll add a rollover effect so that the background color of the navigation bar blocks change whenever the mouse pointer passes over one of the links. To add a rollover effect, add a new rule that contains the :hover pseudo-class.
  • Page 124 Click once at the end of the rule and press Enter (Windows) or Return (Macintosh) a few times to create some space. Paste (Edit > Paste) the copied text in the space you just created. Add the :hover pseudo-class to the pasted .navigation selector, as follows: 124 Tutorial: Formatting Your Page with CSS...

  • Page 125: (Optional) Center The Contents Of The Page

    In the new .navigation:hover rule, replace the current background-color (#993300) with #D03D03. Save the file and close it. Open the index.html file in the Document window and preview the page in a browser (File > Preview in Browser). When you hold the mouse over any of the links, you can see the new rollover effect.
  • Page 126 With the index.html page open in the Document window, click the tag in the tag selector. <body> Clicking the tag selects everything between the open and close <body> tags in the Document window. To see the selection, click Code <body> view at the top of the Document window.
  • Page 127 In the Property inspector (Window > Properties), click the Align Center button. Dreamweaver inserts CSS <div> tags that center the body content of the page. In Design view, a dotted line borders the area that the <div> tags center. Save the page. Your page is now finished.
  • Page 128 128 Tutorial: Formatting Your Page with CSS...

  • Page 129: Chapter 7: Tutorial: Publishing Your Site

    Tutorial: Publishing Your Site This tutorial shows you how to set up a remote site with Macromedia Dreamweaver 8 and publish your web pages. A remote site is usually a place on a remote computer, running a web server, that holds copies of your local files.

  • Page 130: Define A Remote Folder

    The procedures described in this tutorial work best if your remote root folder is empty. If your remote site already contains files, create an empty folder in your remote site (on the server), and use that empty folder as your remote root folder.
  • Page 131 Creating a remote folder with Dreamweaver If Dreamweaver is your only means of access to the remote server, you won’t be able to create an empty folder on the remote server until you’ve completed the remote settings in Dreamweaver and established a connection. If that’s the case, you can either define your host directory as your remote folder, or you can create a remote folder after you’ve established a connection with the server.
  • Page 132 For more information, click Help in the dialog box. If you selected FTP, enter the following options: Enter the host name of the server (such as ftp.macromedia.com). In the Host directory text box, enter the path on the server from the FTP root folder to the remote site’s root folder (cafe_townsend).

  • Page 133: Upload Your Local Files

    Upload your local files After you set up your local and remote folders, you can upload your files from your local folder to the web server. To make your pages publicly accessible, you must upload them even if the web server is running on your local computer.

  • Page 134: Troubleshoot The Remote Folder Setup (Optional)

    Troubleshoot the remote folder setup (optional) A web server can be configured in many ways. The following list provides information about some common issues you may encounter in setting up a remote folder, and how to resolve them: The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access.
  • Page 135 Many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server’s disk with another folder elsewhere. For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory;...
  • Page 136 136 Tutorial: Publishing Your Site...
  • Page 137 PART 3 Advanced Tutorials Part Three of this book contains tutorials that introduce you to more advanced features in Dreamweaver. You do not need previous knowledge of HTML or other languages to complete these tutorials, but be aware that the tutorials in this part are more complex than the tutorials in the previous part.

  • Page 139: Chapter 8: Tutorial: Working With Code

    CHAPTER 8 Tutorial: Working with Code As you add text, images, and other content to a web page, Dreamweaver 8 generates HTML code. This tutorial explains how to use Code view to display a document’s underlying code, and how to add and edit code manually.

  • Page 140: Look At The Code

    Look at the code Dreamweaver lets you view your page in either of two ways: Design view (where the document looks much like it would look in a browser), or Code view (where you can see the underlying HTML code). You can also use a split view that shows both Code and Design views simultaneously.
  • Page 141 The window splits, showing both the Design view and the underlying HTML code. Refresh button You can edit the code in Code view. Changes you make to the code don’t appear in Design view until you either click Refresh in the Document toolbar, or click anywhere in Design view.

  • Page 142: Switch To The Coding Workspace (Windows Only)

    If you didn’t already do so during installation, you can (optionally) make your Windows workspace look and feel more like the popular coding environments of Macromedia HomeSite and ColdFusion Studio. Macintosh users cannot change the workspace. To switch to the coding workspace: Select Window >...
  • Page 143 Switch to Code view by clicking Code view in the Document toolbar, or by selecting View > Code View. You’ll see that the code for the selected image is selected in Code view. Make sure the entire tag is selected, including the opening and closing angle brackets.
  • Page 144 In the Tag Chooser, expand the HTML Tags category, followed by the Formatting and Layout subcategory; then select General. A list of tag names appears in the right pane; select from that list. You can also select the HTML Tags category, and then select the div tag in the right pane, without first expanding Formatting and Layout.

  • Page 145: Edit A Tag

    Click OK to close the tag editor and insert the tag. Dreamweaver inserts the tag in your page, wrapping it around the image tag. Click Close to close the Tag Chooser. Save your page. Edit a tag Next, you’ll use the Tag inspector to quickly make changes to a tag’s attributes.
  • Page 146 Still in Code view, find and click in the tag for the banner_graphic.jpg image at the top of the page. The Attributes tab of the Tag inspector shows information about the tag’s attributes. In the Tag inspector, click in the empty text box beside the attribute, and type Cafe Townsend;...

  • Page 147: Look Up Information About A Tag

    Look up information about a tag If you need help with a tag’s attributes and attribute values, you can look up reference information within Dreamweaver. Open the index.html page in Code view, if it’s not already open. In the Document window, select the attribute name (not the attribute value) in an tag.

  • Page 148: Add An Image With Code Hints

    For information about another tag or attribute, select the tag or attribute from the appropriate pop-up menu in the Reference panel. Add an image with code hints To add code to the page manually, click in Code view and start typing. You can use the code hints feature to speed up your work.
  • Page 149 Switch to Code view by clicking Code view in the Document toolbar, or by selecting View > Code View. In Code view, the insertion point should be between an open and a close paragraph tag, as follows: If you don’t see an open and a close paragraph tag before the closing table cell </td>...
  • Page 150 With the insertion point between the opening tag and the closing <p> tag, type an opening angle bracket (<). <p> A list of tags appears at the insertion point. You can set the length of the delay before the list appears by selecting Edit >...

  • Page 151: Check Your Changes

    In the Select File dialog box, navigate to the street_sign.jpg file (it’s in the images folder in the cafe_townsend root folder), and click OK (Windows) or Choose (Macintosh). The URL of the image file is inserted as the value of the attribute, and the insertion point appears after the closing quotation mark.

  • Page 152: Print Your Code

    Print your code You can print your code to edit it offline, archive it, or distribute it. To print code: View a page in Code view. Select File > Print Code. Specify printing options, and then click OK (Windows) or Print (Macintosh).

  • Page 153: Chapter 9: Tutorial: Creating A Css-Based

    CHAPTER 9 Tutorial: Creating a CSS-based Page Layout Chapter 4, “Tutorial: Creating a Table-based Page Layout,” you learned how to use Dreamweaver’s table design features to create a page layout. In this tutorial, you’ll learn how to use Cascading Style Sheets (CSS) to create a similar layout.

  • Page 154: Examine The Design Comp

    Typically, you don’t begin building a website by opening Dreamweaver and laying out pages right away. The first steps to creating a website begin on a piece of paper, or in a graphics-editing application like Macromedia Fireworks. Graphic designers usually sketch out a piece of comprehensive artwork (also known as a “comp”) for the website in order to show it to the...
  • Page 155 A comp consists of any number of page elements that the client has requested for their website. For example, the client might say, “I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips.”...

  • Page 156: Create And Save A New Page

    You’ll notice that the graphic designer provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. In the next sections, you’ll use Dreamweaver to lay out this design. You can also open the original comp file if you want to see it on the computer screen.

  • Page 157: Insert Layers

    In the Document Title text box at the top of your new document, type Cafe Townsend. This is the title of your page (different from the filename). Your site visitors will see this title in the browser window title bar when they view the page in a web browser.
  • Page 158 Click Draw Layer. The mouse pointer changes to a cross when you move it over the page. Drag a layer of any size onto the page and release the mouse button. Click the selection handle at the upper-left corner of the layer to make sure that it is selected.
  • Page 159 Open the Layers panel (Window > Layers). You’ll see that Dreamweaver You positioned the has added the new layer (banner_graphic) to the list of layers. banner_graphic layer Click once outside the new layer to deselect it. by using precise pixel values in the Save your page.
  • Page 160 With the new layer selected, do the following in the Property inspector: Click in the Layer ID text box and rename the layer flash_fma. In the Width (W) text box, enter 700px. In the Height (H) text box, enter 166px. In the Left (L) text box, enter 20px.
  • Page 161 Click once outside the new layer to deselect it. Select View > Visual Aids > CSS Layout Backgrounds. Dreamweaver adds background colors to your layers. These colors are randomly selected and do not appear on the published web page. They are merely visual aids that Dreamweaver provides to help you see where layers and other kinds of block elements appear on the page.
  • Page 162 Next, drag three more layers onto the page, underneath the banner_graphic layer and the flash_fma layer. Remember to click Draw Layers in the Insert bar each time before you drag a new layer. 162 Tutorial: Creating a CSS-based Page Layout...
  • Page 163 After you have three more layers on the page, use the Property inspector to do the following: Select the first layer, name it header, and size it to 700 pixels wide by 24 pixels high. Press Enter (Windows) or Return (Macintosh) to apply your last entry.
  • Page 164 Next, select the header layer and drag the selection handle until the header layer is positioned directly beneath the flash_fma layer. You can check your position from time to time as you drag the layer by clicking outside the layer to deselect it. Select and drag the center_content layer and the footer layer, or use the You can also move arrow keys on your computer to position the layers, as the following...
  • Page 165 After your layers are in position, disable CSS Layout Backgrounds (if it You can also use the isn’t already) by selecting View > Visual Aids and deselecting CSS Visual Aids button on Layout Backgrounds. the Document toolbar to enable or disable CSS Layout Add layers inside a layer Backgrounds.
  • Page 166 With the new layer selected, do the following in the Property inspector: Click in the Layer ID text box and rename the layer navigation. In the Width (W) text box, enter 140px. In the Height (H) text box, enter 350px. In the Left (L) text box, enter 20px.
  • Page 167 Create another layer in the center_content layer by clicking Draw Layer and dragging another layer, as the following example shows: Click the new layer’s selection handle to make sure the layer is selected. With the new layer selected, do the following in the Property inspector: Click in the Layer ID text box and rename the layer flash_video.
  • Page 168 Drag the flash_video layer or use the arrow keys on your keyboard to position the layer as the following example shows: 168 Tutorial: Creating a CSS-based Page Layout...
  • Page 169 Create one more layer in the center_content layer by clicking Draw Layer and dragging another layer as the following example shows: Click the new layer’s selection handle to make sure the layer is selected. With the new layer selected, do the following in the Property inspector: Click in the Layer ID text box and rename the layer text.
  • Page 170 Drag the text layer or use the arrow keys on your keyboard to position the layer as the following example shows: It’s OK if you see dotted lines on the borders of a layer. It means that your layers are overlapping by a pixel or two. Save your page.

  • Page 171: Add Color To The Page

    Add color to the page Now you’ll add color to the page by setting background colors for some of You can change the the layers, and for the background of the entire page. width of the Name Select the navigation layer by clicking its name in the Layers panel column in the Layers panel by dragging (Window >...
  • Page 172 Once you’ve set the background colors for all three layers, click once to the right of all of your layers to make sure nothing is selected. Next you’ll change the background color for the entire page by modifying page properties. The Page Properties dialog box lets you set a number of page properties, including the size and color of page fonts, the colors of visited links, page margins, and much more.

  • Page 173: Chapter 10: Tutorial: Displaying Xml Data

    CHAPTER 10 Tutorial: Displaying XML Data This tutorial shows you how to create a web page that displays XML data. Displaying XML data involves retrieving information stored in a local or remote XML file and rendering that information on the page. The key benefit to using XML data on web pages is separating content from presentation.

  • Page 174: Locate Your Files

    Locate your files The files you’ll need to complete this tutorial are located in the xml folder, inside the cafe_townsend root folder that you copied to your computer in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.” If you did not complete that tutorial, you must do so before proceeding.

  • Page 175: Review Your Task

    Review your task Cafe Townsend, a fictional restaurant, currently posts a list of daily specials on their website. They use an HTML table with a series of table rows to display the information. The left column of each row displays the name of the item and the item’s description.

  • Page 176: Learn About Using Xml And Xsl With Web

    HTML tags, all tags in an XML schema have an opening and closing tag. The following example illustrates the basic structure of an XML file: <?xml version=“1.0”> <mybooks> <book bookid=“1”> <pubdate>03/01/2004</pubdate> <title>Displaying XML Data with Macromedia Dreamweaver</ title> <author>Charles Brown</author> </book> <book bookid=“2”> <pubdate>04/08/2004</pubdate>...
  • Page 177 XML documents do not contain any formatting—they are simply containers of structured information. (You’ll notice that the sample code contains no font, table, or heading tags.) Once you have an XML schema, you can use Extensible Stylesheet Language (XSL) to display the information.

  • Page 178: Learn About Xslt Pages

    This tutorial takes you through the steps of creating an XSLT page and performing a client-side transformation (mainly because the client-side workflow is much easier to execute, and doesn’t require the use of an application server.) For more information about other ways to deploy XSLT pages, see “Learn about other deployment options”...

  • Page 179: Convert An Html Page To An Xslt Page

    For additional resources, including tutorials that teach you more about server-side transformations, see www.macromedia.com/go/dw_xsl. Convert an HTML page to an XSLT page You’ll begin by converting the existing specials page for Cafe Townsend— an HTML page—into an XSLT page that can display XML data.

  • Page 180: Attach An Xml Data Source To The Xslt Page

    Attach an XML data source to the XSLT page Next you’ll attach an XML data source to the page using the Bindings panel. In the Bindings panel (Window > Bindings), click the XML link. You can also click the Source link at the upper-right corner of the Bindings panel to add an XML data source.

  • Page 181: Alter The Xslt Page Layout

    For a guide to the symbols in the schema, see “Creating XSLT pages” in Using Dreamweaver (Help > Using Dreamweaver). Alter the XSLT page layout Now that you’re going to use XML data on the page instead of static text, you won’t need all the table rows.
  • Page 182 In the Property inspector (Window > Properties), select None from the Style pop-up menu. This step removes the menu class style from the selected text. In a normal workflow, you might not do this. You’re removing all styles here so that you can learn to apply styles to XML data later on. With the text still selected, press Delete.

  • Page 183: Bind Xml Data To The Xslt Page

    Bind XML data to the XSLT page Now you’re ready to bind XML data to the page. In the Bindings panel (Window > Bindings), select the item element and drag it to the empty table cell. An XML data placeholder appears on the page. The placeholder is highlighted and in curly brackets.
  • Page 184 In the Bindings panel, select the description element and drag it to the insertion point. Another XML data placeholder appears on the page. Depending on your monitor resolution, the placeholder may move to the next line. Don’t worry about this now. When you display the page in a browser later on, the data will populate the table accordingly.

  • Page 185: Apply Styles To The Xml Data

    Apply styles to the XML data Now you’ll apply styles to the item and description XML data placeholders. When you apply styles to an XML data placeholder, the text of the placeholder itself displays the styles. Later, when you preview the page in a browser, the resulting XML data will also display the assigned styles.

  • Page 186: Create A Dynamic Link

    In the Property inspector, click the Italic button. Save the page, and then preview your work in a browser by pressing F12 (Windows) or Option+F12 (Macintosh). For more information about applying styles to XML data, see “Applying styles to XSLT fragments” in Using Dreamweaver (Help > Using Dreamweaver).
  • Page 187 In the Select File dialog box, select Data Sources. If you’re on a Windows computer, the option is located at the top of the dialog box. If you’re on a Macintosh computer, the option is located at the bottom of the dialog box. When the XML schema appears in the dialog box, select the link element.

  • Page 188: Add A Repeat Region Xslt Object

    Click OK. Dreamweaver creates a dynamic link. In the XML file, each link element points to an HTML page containing a picture of the respective menu item. If you open the specials.xml file and look at the code, you’ll see that each <link>...
  • Page 189 Select Insert > XSLT Objects > Repeat Region. Add a Repeat Region XSLT object 189...
  • Page 190 In the XPath Expression Builder, select the repeating element menu_item. (Repeating elements are indicated by a small plus sign). Click OK. In the Document window, a thin, tabbed, gray outline appears around the repeated region. (You’ll need to deselect the table to see it.) Later, when you preview your work in a browser, the gray outline will disappear and the selection will expand to display the specified repeating elements in the XML file.

  • Page 191: Attach The Xslt Page To The Xml Page

    Attach the XSLT page to the XML page Once your XSLT page is finished, you must attach it to the XML page. When you use Dreamweaver to attach the page, Dreamweaver inserts a link to the XSLT page at the top of the XML page. The XML page is the page to which your site visitors will browse when viewing the page online.
  • Page 192 Click OK to close the Attach an XSLT Stylesheet dialog box. Dreamweaver inserts the reference to the XSLT page at the top of the XML document. Save the specials.xml page. 192 Tutorial: Displaying XML Data...
  • Page 193 Preview the XML page (not the XSLT page) in a browser by pressing F12 (Windows) or Option+F12 (Macintosh). The XML page is displayed in a browser, styled with the XSLT page you created. Remember, your site visitors will browse to the XML page (not the XSLT page) once you’ve deployed both pages to your server.

  • Page 194: Learn About Other Deployment Options

    XSL transformations” in Using Dreamweaver (Help > Using Dreamweaver). For tutorials and other resources that teach you about working with XSLT fragments, visit www.macromedia.com/go/dw_xsl. Following is the workflow for performing server-side transformations with XSLT pages: Set up a Dreamweaver site. See Chapter 2, “Setting Up a Dreamweaver Site”...
  • Page 195 If appropriate, add a Repeat Region XSLT object to the table or table row that contains the XML data placeholder(s). See “Displaying repeating XML elements” in Using Dreamweaver. Do one of the following: Use the XSL Transformation server behavior to insert a reference to the XSLT fragment in your dynamic page.
  • Page 196 196 Tutorial: Displaying XML Data...

  • Page 197: Chapter 11: Tutorial: Developing A Web Application

    CHAPTER 11 Tutorial: Developing a Web Application In this tutorial, you’ll learn how to use Macromedia Dreamweaver 8 to quickly begin developing dynamic database-driven web applications, allowing you to present information retrieved from a database on your web pages. You’ll display data on web pages for the Cafe Townsend site, using a sample database provided with Dreamweaver.

  • Page 198: Before You Begin

    Define a connection to the database. You can’t complete this tutorial until you’ve completed those tasks. The screen shots in this tutorial show Macromedia ColdFusion dialog boxes. However, you can complete the lessons in this tutorial by using any of the server models that Dreamweaver supports.
  • Page 199 The page that lets Cafe Townsend staff view the comments in the database will look as follows: The page that lets visitors send the comments will look as follows: Review your task 199...

  • Page 200: Open A Document To Work In

    Open a document to work in A good starting point for developing a database application is to create a page that lists records stored in the database. In the application you’re building in this tutorial, you’ll create a dynamic web page that lists information drawn from the customer comments table of the database.

  • Page 201: Define A Recordset

    Define a recordset Now you’ll create a recordset to select the data you want to display. A recordset is a set of information extracted from a database by a database query. (In ASP.NET, a recordset is known as a DataSet.) A database query is a way to request data from a database by using specified search criteria, usually in a language called SQL.
  • Page 202 If the dialog box you see looks more complex than the preceding dialog box, click Simple. In the Name text box, enter rs_Comment. In the Data Source pop-up menu (ColdFusion) or Connection pop-up menu (other server page types), select connTownsend. The Recordset or DataSet dialog box updates with data from the database.
  • Page 203 In the first Sort pop-up menu, select LAST_NAME, and in the second pop-up menu, select Ascending. This step specifies that the retrieved records are listed in alphabetical order by customer last name. Click Test to test the recordset or DataSet. The records from the database that match your recordset or DataSet selection criteria are displayed in the Test SQL Statement window.

  • Page 204: Display The Database Records

    Click OK to close the Test SQL Statement window. Click OK to close the Recordset or DataSet dialog box and create a recordset or DataSet. The recordset appears in the Bindings panel. The Document window doesn’t change. If you don’t see all of the recordset fields in the Bindings panel, click Plus (+)
  • Page 205 In the dialog box, set the following options: In Rows, enter 2. In Columns, enter 4. Leave Table Width set to 100 percent. Leave Border Thickness set to 1. In Cell Padding enter 2. In Cell Spacing, enter 2. In the Header section, select the Top option. In the Summary text box, provide a textual description of the table for the benefit of visitors who use screen readers, as follows: This table lists all of the comments that visitors to this site have...

  • Page 206: Add Dynamic Fields To The Table

    In the top row of the table add labels for the table entries: In the first cell of the table, enter First Name. In the next cell, enter Last Name. In the next cell, enter E-mail. In the last cell, enter Comments. Save your page.

  • Page 207: Set A Repeated Region

    Set a repeated region The table you created contains only one row for data. To display all of the records, you must set that table row as a repeated region. When viewed in a browser, the table contains a row for each record that matches the recordset search requirements.

  • Page 208: View Your Page

    View your page Next, you’ll view the page. To view a page in Dreamweaver as it would look when the server processes it, you can use Live Data view. With the Cafe Townsend document still active, do one of the following to view the data in your pages: In the Document toolbar, click Live Data View.
  • Page 209 Add a Record Insertion Form application object You can use a Record Insertion Form application object to create a form that allows visitors to enter data into a database. The application object lets you select which fields to include in the form, label the fields, and select the types of form objects to insert.
  • Page 210 To add a record insertion object to your page, do one of the following: In the Insert bar’s Application category, select Record Insertion Form Wizard from the Insert Record pop-up menu. Select Insert > Application Objects > Insert Record > Record Insertion Form Wizard.
  • Page 211 Create the insert form In the Form Fields section of the Record Insertion Form Wizard, you define the form that a visitor enters data into. In the Record Insertion Form Wizard, remove the fields you don’t want included in the form by doing the following: Select COMMENT_ID and click Minus (-).
  • Page 212 Leave the Default Value field empty. For some web applications, you would use this field to set initial text for the field in order to let the user know what kind of information to provide. In this case, the field label “First Name” makes clear that the visitor is supposed to enter their first name.
  • Page 213 The dialog box should look similar to the following example when you are done: Click OK to close the dialog box and create the record insertion form. The Record Insertion Form application object is inserted in the document. Save your page. Create a record insert form 213...

  • Page 214: Copy Files To The Server

    Copy files to the server Next, you’ll copy the files you’ve updated to your server. After you copy the files, you’ll view the insert record page, add a comment or question, and submit the data to test the application. In the Files panel, Control-click (Windows) or Command-click (Macintosh) the files named “view”...
  • Page 215 PART 4 Appendices Part Four of this book contains appendices that provide additional information about concepts presented in previous sections. This part contains the following sections: Understanding Web Applications......217 Installing a Web Server .

  • Page 217: Appendix A: Understanding Web Applications

    APPENDIX A Understanding Web Applications A web application is a collection of web pages that interact with visitors, with each other, and with various resources on a web server, including databases. Before you start building your own web applications, you should be familiar with the concepts discussed in this chapter.
  • Page 218 Common uses for web applications Web applications have many uses for both site visitors and developers, including the following: Let visitors find information quickly and easily on a content-rich website. This kind of web application gives visitors the ability to search, organize, and navigate content as they see fit.

  • Page 219: How A Web Application Works

    Janet proposes an intranet-based web application that performs the following tasks: Lets employees enter their mileage on a web page using a simple HTML form Stores the employees’ mileage in a database Calculates fitness points based on the mileage data Lets employees track their monthly progress Gives Chris one-click access to point totals at the end of each month Janet gets the application up and running before lunchtime using...
  • Page 220 The final content of a static web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example: <html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body>...
  • Page 221 In the case of web applications, certain lines of code are undetermined when the visitor requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section. Processing dynamic pages When a web server receives a request for a static web page, the server sends the page directly to the requesting browser.
  • Page 222 Accessing a database An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information, see Appendix A, “Beginner’s Guide to Databases”...
  • Page 223 Here’s an illustration of the process of querying a database and returning data to the browser: Step 1 - Web browser Web browser requests dynamic page. Request Response Step 9 - Web server sends finished page to requesting WEB SERVER browser Step 2 - Web server finds page and...

  • Page 224: Authoring Dynamic Pages

    If you plan to build small low-cost applications, you can use a file-based database, such as one created in Microsoft Access. If you plan to build robust, business-critical applications, you can use a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or MySQL. If your database is located on a system other than your web server, make sure you have a fast connection between the two systems so that your web application can operate quickly and efficiently.
  • Page 225 The embedded instructions on this page perform the following actions: Create a variable called department and assign the string to it. "Sales" Insert the variable’s value, , in the HTML code. "Sales" The application server returns the following page to the web server: <html>...

  • Page 226: Choosing A Server Technology

    Framework, you can choose ASP.NET. PHP is an option if you have access to a web server with a PHP application server; JSP is an option if you have access to a web server with a JSP application server (such as Macromedia JRun).

  • Page 227: Web Application Terminology

    “How a web application works” on page 219. Common application servers include Macromedia ColdFusion, Macromedia JRun Server, the Microsoft .NET Framework, IBM WebSphere, and Apache Tomcat. A database is a collection of data stored in tables. Each row of a table constitutes one record and each column constitutes a field in the record, as shown in the following example.
  • Page 228 A dynamic page is a web page customized by an application server before the page is sent to a browser. For more information, see “How a web application works” on page 219. A recordset is a set of data extracted from one or more tables in a database, as in the following example: Number LastName FirstName...
  • Page 229 The Dreamweaver development environment supports the following server technologies: Macromedia ColdFusion Microsoft ASP.NET Microsoft Active Server Pages (ASP) Sun Java Server Pages (JSP) PHP: Hypertext Preprocessor (PHP) You can also use the Dreamweaver coding environment to develop pages for any other server technology not listed.
  • Page 230 230 Understanding Web Applications...

  • Page 231: Appendix B: Installing A Web Server

    If you’re a Windows user and you want to develop ColdFusion sites, you can use the web server included in the developer edition of the Macromedia ColdFusion MX 7 application server, which you can install and use for free. For more information, see Appendix C, “Setup for Sample...

  • Page 232: Installing Internet Information Server

    If you’re a Windows user and want to develop ColdFusion applications, you can instead use the web server installed with the developer edition of the ColdFusion MX 7. For more information, see Appendix C, “Setup for Sample ColdFusion Site,” on page 237.

  • Page 233: Testing Iis

    Testing IIS To test the web server, create a simple HTML page called myTestFile.html and save it in the Inetpub\wwwroot folder on the computer where the web server is running. The HTML page can consist of a single line, such as: <p>My web server is working.</p>...

  • Page 234: Web Server Basics

    Next, open the test page in a web browser with an HTTP request by entering the following URL in your web browser: http://localhost/~your_user_name/myTestFile.html By default the Apache server runs on port 80. If the browser displays your page, the web server is running normally. If the browser fails to display the page, make sure the web server is started by opening System Preferences and looking at the Sharing preference panel.
  • Page 235 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.html file is stored in a subfolder called gamelan, as follows: C:\Inetpub\wwwroot\gamelan\soleil.html You can open this page by entering the following URL in a browser running on your computer: http://mer_noire/gamelan/soleil.html When the web server is running on your computer, you can replace the...
  • Page 236 236 Installing a Web Server...

  • Page 237: Appendix C: Setup For Sample Coldfusion Site

    APPENDIX C Setup for Sample ColdFusion Site Macromedia Dreamweaver 8 comes with sample ColdFusion pages to let you build a small web application. This chapter describes how to set up the sample application. Setting up a web application is a three-step process. First, configure your system.

  • Page 238: Configuring Your System (Coldfusion)

    Define a Dreamweaver site: Copy the sample files to a folder on your hard disk. Define the folder as a Dreamweaver local folder. Define a web server folder as a Dreamweaver remote folder. Specify a folder to process dynamic pages. Upload the sample files to the web server.
  • Page 239 The following illustration shows the two configurations described in this section: Local configuration Remote server configuration (for Windows users only) (for Macintosh or Windows users) WINDOWS PC MAC or WINDOWS PC Dreamweaver Dreamweaver ColdFusion Server Website root folder in c:\Inetpub\wwwroot\ Network or ftp access WINDOWS SERVER...
  • Page 240 “Understanding Web Applications” on page 217. You can download and install a fully functional developer edition of ColdFusion MX 7 from the Macromedia website at www.macromedia.com/go/coldfusion/. Make sure you select the Windows version of the ColdFusion MX 7 Developer Edition. A copy of ColdFusion MX 7 Developer Edition is also available on the Dreamweaver CD (Windows version only).
  • Page 241 To install ColdFusion MX 7: If applicable, log in to your Windows system using the Administrator user account. Close all open applications. Double-click the ColdFusion MX 7 installer file. Follow the onscreen installation instructions. Some screens in the installation wizard are self-explanatory. For the following screens, however, select the following options: At the Installer Configuration screen, select the Server Configuration option.
  • Page 242 At the Select Installation Directory screen, accept the default C:\CFusionMX7 folder by clicking Next. At the Configure Web Server screen, select the Built-in Web Server option at the bottom of the screen. 242 Setup for Sample ColdFusion Site...
  • Page 243 At the RDS Password screen, make sure the Enable RDS option is selected, and then enter and confirm a password. For more information, see the ColdFusion documentation in Dreamweaver (Help > Using ColdFusion). After installing and starting ColdFusion, create a root folder for your web application.

  • Page 244: Defining A Dreamweaver Site (Coldfusion)

    By default, ColdFusion sets up its web server to serve pages from the CFusionMX7\wwwroot folder. The web server will serve any page in this folder or in any of its subfolders in response to an HTTP request from a web browser. After configuring your system, you must define a Dreamweaver site.
  • Page 245 If you installed Dreamweaver to its default location, the path to the folder is as follows: In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\ On the Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend Copy the cafe_townsend folder into the local_sites folder. The cafe_townsend folder is the folder that you will use as the root folder (main folder) for your Dreamweaver site.
  • Page 246 Defining a local folder After you copy the cafe_townsend folder, define the folder that contains the ColdFusion sample files as a Dreamweaver local folder. To define the Dreamweaver local folder: In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click New, and then select Site. The Site Definition dialog box appears.
  • Page 247 Defining a remote folder After you define a local folder, define a web server folder as a Dreamweaver remote folder. To define the Dreamweaver remote folder: In the Advanced tab of the Site Definition dialog box, select Remote Info from the Category list. The Remote Info screen appears.
  • Page 248 Specifying where to process dynamic pages After you define the Dreamweaver remote folder, specify a folder to process dynamic pages. Dreamweaver uses this folder to display dynamic pages and connect to databases while you’re developing your application. To specify the folder to process dynamic pages: In the advanced Site Definition dialog box, click Testing Server in the Category list.
  • Page 249 If the folder specified in the Remote Folder text box is c:\CFusionMX7\wwwroot\MySampleApps, the URL prefix should be as follows: http://localhost:8500/MySampleApps/ The ColdFusion web server runs on port 8500 by default. Click OK to define the site and dismiss the Site Definition dialog box, The URL prefix and then click Done to dismiss the Manage Sites dialog box.

  • Page 250: Connecting To The Sample Database (Coldfusion)

    If you installed Dreamweaver to its default location, the path on your local hard disk to the database file (tutorial.mdb) is as follows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data \tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh) 250 Setup for Sample ColdFusion Site...
  • Page 251 In the Database File text box, enter the path to the tutorial.mdb database file. If ColdFusion is running on your local computer and you installed Dreamweaver to its default location, the path is as follows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tutorial.mdb Connecting to the sample database (ColdFusion) 251...
  • Page 252 If ColdFusion is running on a remote computer, enter the path to the database file you placed on the remote computer in “Setting up the database (server on a remote computer)” on page 250. For more information, see the ColdFusion documentation in Dreamweaver (Help >...
  • Page 253 Expand the connTownsend branch, and then expand the Tables branch. If the Tables branch contains three tables as follows, the sample ColdFusion application is set up for the Getting Started with Dreamweaver tutorials. For more information, see “Tutorial: Developing a Web Application” on page 197.
  • Page 254 254 Setup for Sample ColdFusion Site...

  • Page 255: Appendix D: Setup For Sample Asp.net Site

    APPENDIX D Setup for Sample ASP.NET Site Macromedia Dreamweaver 8 comes with sample ASP.NET pages to let you build a small web application. This chapter describes one way to set up the sample application. This chapter applies to ASP.NET developers. For information on ASP, see “Setup for Sample ASP Site”...

  • Page 256: Configuring Your System (Asp.net)

    Define a Dreamweaver site: Copy the sample files to a folder on your hard disk. Define the folder as a Dreamweaver local folder. Define a web server folder as a Dreamweaver remote folder. Specify a folder to process dynamic pages. Upload the sample files to the web server.
  • Page 257 The following illustration shows the two configurations described in this section: Local configuration Remote server configuration (for Windows 2000 or XP users only) (for Macintosh or Windows users) WINDOWS 2000 or XP MAC or WINDOWS PC Dreamweaver Dreamweaver IIS 5 or higher .NET Framework Website root folder in c:\Inetpub\wwwroot\...
  • Page 258 Checking for a web server To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers. ASP.NET pages work with only one web server: Microsoft IIS 5 or later. IIS 5 is a service of the Windows 2000 and Windows XP Professional operating systems, so you can use these two versions of Windows to run ASP.NET applications.
  • Page 259 To install the .NET Framework and SDK: Check to see if the .NET Framework is installed on your system by reviewing the list of applications in the Add or Remove Programs dialog box (Start > Control Panel > Add or Remove Programs). If Microsoft .NET Framework 1.1 is listed, the Framework is already installed and you do not need to install it again.

  • Page 260: Defining A Dreamweaver Site (Asp.net)

    To make sure the Scripts permission is enabled for the folder, start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, double-click Administrative Tools, and then double-click Internet Information Services). Expand the “local computer”...
  • Page 261 If you installed Dreamweaver to its default location, the path to the folder is as follows: In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\ cafe_townsend\. On the Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend. Copy the cafe_townsend folder into the local_sites folder. The cafe_townsend folder is the folder that you will use as the root folder (main folder) for your Dreamweaver site.
  • Page 262 Defining a local folder After copying the cafe_townsend folder, define the folder containing the ASP.NET sample files as a Dreamweaver local folder. To define the Dreamweaver local folder: In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, and then select Site.
  • Page 263 Enter the path or FTP settings to the web server folder you created in “Creating a root folder” on page 259. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still considered to be the remote folder.
  • Page 264 In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix.

  • Page 265: Connecting To The Sample Database (Asp.net)

    To upload the samples files to the web server: In the Files panel (Window > Files), select the root folder of the site in the Local View pane. The root folder is the topmost folder in the list. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.
  • Page 266 C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data \tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh) You can place the file in any folder on the remote computer, or you can create a new folder for it. In either case, write down the full path to the database file on a piece of paper.
  • Page 267 The path may vary depending on where you installed Dreamweaver. For example, you might enter this path as the value of Data Source for a database on your local hard disk: Data Source=C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_ assets\data\tutorial.mdb; Or you might enter this path for a database on a remote server: Data Source=C:\users\Denman\Sites\data\tutorial.mdb;...
  • Page 268 268 Setup for Sample ASP.NET Site...

  • Page 269: Appendix E: Setup For Sample Asp Site

    APPENDIX E Setup for Sample ASP Site Macromedia Dreamweaver 8 comes with sample Microsoft Active Server Pages (ASP) web pages to let you build a small web application. This chapter describes how to set up the sample application using Microsoft Internet Information Server (IIS).

  • Page 270: Configuring Your System (Asp)

    Configure your system: Make sure you have a web server. Install an application server. Test your installation. Create a root folder. Define a Dreamweaver site: Copy the sample files to a folder on your hard disk. Define the folder as a Dreamweaver local folder. Define a web server folder as a Dreamweaver remote folder.
  • Page 271 The following illustration shows the two configurations described in this section: Local configuration Remote server configuration (for Windows users only) (for Macintosh or Windows users) WINDOWS PC MAC or WINDOWS PC Dreamweaver Dreamweaver Website root folder in c:\Inetpub\wwwroot\ Network or ftp access WINDOWS SERVER Website root folder in...
  • Page 272 Checking for a web server To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers. Make sure Microsoft IIS is installed and running on your hard disk or on a remote Windows computer.

  • Page 273: Testing The Installation

    Testing the installation You can test the ASP engine of IIS by running a test page. To test the ASP engine of IIS: In Dreamweaver or any text editor, create a plain text file and name it timetest.asp. In the file, enter the following code: <p>This page was created at <b>...
  • Page 274 Looking at the source code (View > Source in Internet Explorer) will confirm that the page does not use any client-side JavaScript to achieve this effect. If the page doesn’t work as expected, check for the following possible errors: The file does not have a .asp extension. You typed the page’s file path (C:\Inetput\wwwroot\timetest.asp) instead of its URL (for example, http://localhost/timetest.asp) in the browser’s Address text box.

  • Page 275: Defining A Dreamweaver Site (Asp)

    Make sure the Read and Scripts permissions are enabled for the folder by doing the following: Start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, then double- click Administrative Tools, then double-click Internet Information Services).
  • Page 276 Locate the cafe_townsend folder in the Dreamweaver application folder on your hard disk. If you installed Dreamweaver to its default location, the path to the folder is as follows: In Windows: C:\Program Files\Macromedia\Dreamweaver 8\ Tutorial_assets\cafe_townsend\. On the Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend.
  • Page 277 Defining a local folder After copying the cafe_townsend folder, you define the folder containing the ASP sample files as a Dreamweaver local folder. To define the Dreamweaver local folder: In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, and then select Site.
  • Page 278 Enter the path or FTP settings to the web server folder you created in “Creating a root folder” on page 274. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still considered to be the remote folder.
  • Page 279 In the Access pop-up menu, select the same method (Local/Network or FTP) you specified for accessing your remote folder. Dreamweaver enters the settings you specified in the Remote Info category. Leave the settings unchanged. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application.

  • Page 280: Connecting To The Sample Database (Asp)

    To upload the samples files to the web server: In the Files panel (Window > Files), select the root folder of the site in the Local View pane. The root folder is the topmost folder in the list. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.
  • Page 281 (tutorial.mdb) is as follows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\ data\tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh) You can place the file in any folder on the remote computer, or you can create a new folder for it. There are potential security issues if you place the database file inside the Inetpub folder on the remote computer.
  • Page 282 Set up a DSN called CafeTownsend pointing to the sample database on the remote computer. For instructions, see the following articles on the Microsoft website: If the remote computer runs Windows 2000, see Article 300596 at http://support.microsoft.com/default.aspx?scid=kb;en-us;300596. If the remote computer runs Windows XP, see Article 305599 at http://support.microsoft.com/default.aspx?scid=kb;en-us;305599.
  • Page 283 Click the DSN button and select CafeTownsend from the list of DSNs. If you’re using Dreamweaver on a Windows computer, during installation, Dreamweaver created a DSN called CafeTownsend, which points to the Microsoft Access database in the Dreamweaver application folder. Click Test.
  • Page 284 284 Setup for Sample ASP Site...

  • Page 285: Appendix F: Setup For Sample Jsp Site

    APPENDIX F Setup for Sample JSP Site Macromedia Dreamweaver 8 comes with sample Java Server Pages (JSP) web pages to let you build a small web application. This chapter describes one way to set up the sample application using Microsoft Internet Information Server (IIS).

  • Page 286: Configuring Your System (Jsp)

    Define a Dreamweaver site: Copy the sample files to a folder on your hard disk. Define the folder as a Dreamweaver local folder. Define a web server folder as a Dreamweaver remote folder. Specify a folder to process dynamic pages. Upload the sample files to the web server.
  • Page 287 The following illustration shows the two configurations described in this section: Local configuration Remote server configuration (for Windows users only) (for Macintosh or Windows users) WINDOWS PC MAC or WINDOWS PC Dreamweaver Dreamweaver JSP application server Website root folder in Network or c:\Inetpub\wwwroot\ ftp access...
  • Page 288 IIS. (IIS may be located on your local hard disk or on a remote computer.) If you do not have a JSP application server, you can download and install the Developer Edition of Macromedia JRun, a full-featured JSP application server, from the Macromedia website at www.macromedia.com/go/jrun/.
  • Page 289 Follow the onscreen instructions to finish installing and testing the program. Once the installation is complete, create a JRun connector to your IIS web server by selecting Start > Programs > Macromedia JRun 4 > Web Server Configuration. For instructions, see the JRun documentation.

  • Page 290: Defining A Dreamweaver Site (Jsp)

    Make sure the Read and Scripts permissions are enabled for the folder by doing the following: Start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, double-click Administrative Tools, and then double-click Internet Information Services).
  • Page 291 If you installed Dreamweaver to its default location, the path to the folder is as follows: In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\. On the Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend. Copy the cafe_townsend folder into the local_sites folder. The cafe_townsend folder is the folder that you will use as the root folder (main folder) for your Dreamweaver site.
  • Page 292 Defining a local folder After copying the cafe_townsend folder, define the folder containing the JSP sample files as a Dreamweaver local folder. To define the Dreamweaver local folder: In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, then select Site.
  • Page 293 Enter the path or FTP settings to the web server folder you created in “Creating a root folder” on page 289. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still considered to be the remote folder.
  • Page 294 In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web application. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix.

  • Page 295: Connecting To The Sample Database (Jsp)

    To upload the samples files to the web server: In the Files panel (Window > Files), select the root folder of the site in the Local View pane. The root folder is the topmost folder in the list. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to upload the entire site.
  • Page 296 (it does not support concurrent use by multiple threads). For more information on the driver’s limitations, see TechNote 17392 on the Macromedia Support Center at www.macromedia.com/go/17392. After installing the bridge driver, set up the database if necessary, and then create a database connection in Dreamweaver.
  • Page 297 (tutorial.mdb) is as follows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\ data\tutorial.mdb (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.mdb (Macintosh) You can place the file in any folder on the remote computer, or you can create a new folder for it. There are potential security issues if you place the database file inside the Inetpub folder on the remote computer.
  • Page 298 Make sure the Microsoft Access Driver, version 4.0 or higher, is installed on the remote computer. To find out whether the driver is already installed, see “Viewing the in Using Dreamweaver. ODBC drivers installed on a Windows system” If the driver is not installed, download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.7 packages on the remote computer.
  • Page 299 Click the Plus (+) button on the panel and select ODBC Database (Sun JDBC-ODBC Driver) from the pop-up menu. The ODBC Database (Sun JDBC-ODBC Driver) dialog box appears. Enter connTownsend as the connection name. (Windows only) Do one of the following: If your server is on your local computer, select the Using Driver On This Machine option.
  • Page 300 300 Setup for Sample JSP Site...

  • Page 301: Appendix G: Setup For Sample Php Site

    APPENDIX G Setup for Sample PHP Site Macromedia Dreamweaver 8 comes with sample PHP pages to let you build a small web application. This chapter describes one way to set up the sample application using Microsoft Internet Information Server (IIS). For more information on this web server, see “Installing a Web Server”...

  • Page 302: Setup Checklists For Php Developers

    Setup checklists for PHP developers To set up a web application, you must configure your system, define a Dreamweaver site, and connect to a database. This section provides checklists for each task. The tasks are described in more detail in the rest of the chapter.
  • Page 303 Configuring your Windows system (PHP) This section provides instructions for two common Windows configurations: one in which Microsoft IIS is installed on your hard disk, and one in which IIS is installed on a remote Windows computer. If you want to use a different configuration, see Chapter 23, “Setting Up a Web in Using Dreamweaver.
  • Page 304 To configure your system: Make sure you have a web server (see “Checking for a web server (Windows)” on page 304). Install the PHP application server (see “Installing a PHP application server (Windows)” on page 304). Test your installation (see “Testing the PHP installation (Windows)”...
  • Page 305 With PHP 5, the extension that allows PHP to work with a MySQL database server is not installed or enabled by default by the Windows installer. You must install and enable it manually. To install PHP 5 on a Windows system: If applicable, log into your Windows system using the Administrator account.
  • Page 306 In the temporary folder containing your unzipped PHP files, locate the file called libmysql.dll and copy it to the C:\Windows\system32 folder. This file is required so that IIS can work with PHP 5 and MySQL. Restart IIS. For more information on enabling the MySQL extension, see the PHP website at www.php.net/manual/en/ref.mysql.php.
  • Page 307 The test page should open and display a time of day, as follows: The specified time is known as dynamic content because it changes every time you request the page. Click your browser’s Refresh button to generate a new page with a different time. Looking at the source code (View >...
  • Page 308 Creating a root folder (Windows) After the server software is installed, create a root folder for your web application on the system running Microsoft IIS, and make sure the folder has the necessary permissions. To create a root folder for your web application: Create a folder called MySampleApps on the system running IIS.
  • Page 309 PHP and MySQL. For information on this process, see www.macromedia.com/go/php_macintosh. To test the Apache web server and PHP application server: Configure the server as described in the article on the Macromedia website. In Dreamweaver or any text editor, create a plain text file and name it timetest.php.
  • Page 310 In your web browser, enter the following URL and press Return: http://localhost/~your_user_name/timetest.php The test page should open and display a time of day. The specified time is known as dynamic content because it changes every time you request the page. Click your browser’s Refresh button to generate a new page with a different time.

  • Page 311: Defining A Dreamweaver Site (Php)

    Defining a Dreamweaver site (PHP) After configuring your system, copy the sample files to a local folder and define a Dreamweaver site to manage the files. To define a Dreamweaver site: Copy the sample files to a folder on your hard disk (see “Copying the sample files”...
  • Page 312 If you installed Dreamweaver to its default location, the path to the folder is as follows: In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\. On the Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend. Copy the cafe_townsend folder into the local_sites folder. The cafe_townsend folder is the folder that you will use as the root folder (main folder) for your Dreamweaver site.
  • Page 313 Defining a remote folder After defining a local folder, define a web server folder as a Dreamweaver remote folder. To define the Dreamweaver remote folder: In the Advanced tab of the Site Definition dialog box, select Remote Info from the Category list. The Remote Info screen appears.
  • Page 314 To specify the folder to process dynamic pages: In the advanced Site Definition dialog box, click Testing Server in the Category list. The Testing Server screen appears. Dreamweaver needs the services of a testing server to generate and display dynamic content while you work. The testing server can be your local computer, a development server, a staging server, or a production server, as long as it can process PHP pages.

  • Page 315: Connecting To The Sample Database (Php)

    Uploading the sample files After specifying a folder to process dynamic pages, upload the sample files to the web server. You must upload the files even if the web server is running on your local computer. If you don’t upload the files, features such as Live Data view and Preview in Browser may not work properly with dynamic pages.
  • Page 316 C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\ data\insert.sql (Windows) /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/insert.sql (Macintosh) If the computer running MySQL is a Windows computer, copy the insert.sql script to Program Files\MySQL\MySQL Server 4.x\bin. If the computer running MySQL is a Macintosh, copy the insert.sql script to your Documents folder in your home folder.
  • Page 317 In Windows, enter your username (if any) and password, and then press Enter. The MySQL client’s command prompt appears, as follows: mysql> On the Macintosh, enter the following command: mysql -uUser -pPassword For example, if your MySQL user name (also known as an account name) and password are Tara and Telly3, enter the following command: mysql -uTara -pTelly3...
  • Page 318 At the system command prompt, populate the new CafeTownsend database in MySQL. In Windows, use the following command: cd \ cd Program Files\MySQL\MySQL Server 4.x\bin mysql -uUser -pPassword CafeTownsend < insert.sql On the Macintosh, use the following command: mysql -uUser -pPassword CafeTownsend < ~/Documents/ insert.sql This command uses the insert.sql file to add tables and records to the CafeTownsend database you created in step 5.
  • Page 319 Click Test. Dreamweaver attempts to connect to the database. If the connection fails, do the following: Double-check the server name, user name, and password. Check the settings for the folder Dreamweaver uses to process dynamic pages (see “Specifying where dynamic pages can be processed (PHP)”...
  • Page 320 320 Setup for Sample PHP Site...

  • Page 321: Index

    Index Symbols Assets panel 81 assets, adding to a site 51 .NET Framework 226 attributes, reference information 147 installing 258 Numerics background color, setting 69, 171 127.0.0.1 IP number 235 Bindings panel 201 Access. See Microsoft Access C# (language) 225 Active Server Pages.
  • Page 322 ColdFusion DBMS (database management system). See database installing 240 management systems web applications, setting up 237 defining remote folders 247, 262, 277, 292, 313 ColdFusion Administrator 251 definitions of web-application terms 227 ColdFusion Markup Language (CFML) 224 Design view 140 ColdFusion MX Server Developer Edition 240 Document toolbar ColdFusion Studio 142...
  • Page 323 Mac OS X running Apache and PHP 309 placeholders for 67 servers 233 Insert bar Macintosh, tabbed documents 40 Application category 207, 210 Macromedia JRun 226 categories 33 installing 289 Insert Record object 208 Microsoft Access 224 installing Microsoft Internet Information Server (IIS). See IIS .NET Framework 258...
  • Page 324 Oracle 9i database 224 Record Insertion Form dialog box 210 record-insertion forms, creating 208 records displaying 204 inserting 208 pages recordsets displaying database data 222 creating 201 dynamic, creating 224 defined 228 dynamic, defined 217 testing 203 dynamic, processing 221 See also databases record-insertion 208 Reference panel 147...
  • Page 325 server technologies choosing 226 table header menu 60 defined 228 tables supported 225 about 60 server-side scripting languages 225 creating layout with 55–72 servers database 222 about 234 Expanded Tables mode 62 access options 132 inserting 58–62, 204 application servers 221 setting properties 62–66 ASP.NET support 258 Tag Chooser 142...
  • Page 326 tutorials adding content to pages 73 XML (Extensible Markup Language) creating table-based page layout 55 about 176 formatting your page with CSS 99 applying styles 185 publishing your site 129 creating links with 186 typographical conventions 14 displaying on web pages 173 XSL (Extensible Stylesheet Language) 177 transformations, client-side 178 See also XSLT...

This manual is also suitable for:

Dreamweaver 8

Table of Contents