Adobe 38028779 Getting Started Guide
Adobe 38028779 - Macromedia Dreamweaver - Mac Manual
 |
UPC - 718659742201
View all Adobe 38028779 manuals
Add to My Manuals
Save this manual to your list of manuals |
Adobe 38028779 manual content summary:
- Adobe 38028779 | Getting Started Guide - Page 1
Getting Started with Dreamweaver - Adobe 38028779 | Getting Started Guide - Page 2
Flash, FlashCast, FlashHelp, Flash in this guide, then you manual may be printed out, reproduced, distributed, resold, or transmitted for any other purposes, including, without limitation, commercial purposes, such as selling copies of this documentation or providing paid-for support services - Adobe 38028779 | Getting Started Guide - Page 3
Contents PART 1: INTRODUCTION TO DREAMWEAVER Introduction 11 What you can do with Dreamweaver 8 11 What's new in Dreamweaver 8 12 Installing Dreamweaver 8 13 Registering Dreamweaver 8 13 Typographical conventions 14 Chapter 1: Learning Dreamweaver 15 Where to start 15 Getting the most from - Adobe 38028779 | Getting Started Guide - Page 4
Review your task 75 Insert images 76 Insert and play a Flash file 83 Insert Flash Video 86 Insert text 89 Create links 94 Preview your page 129 Define a remote folder 130 Upload your local files 133 Troubleshoot the remote folder setup (optional 134 PART 3: ADVANCED TUTORIALS Chapter - Adobe 38028779 | Getting Started Guide - Page 5
-based page layout 153 Examine the design comp 154 Create and save a new page 156 Insert layers 157 Add color to the page 171 Chapter 10: Tutorial: Displaying XML Data 173 Locate your files 174 Review your task 175 Learn about using XML and XSL with web pages 176 Learn about - Adobe 38028779 | Getting Started Guide - Page 6
PART 4: APPENDICES Appendix A: Understanding Web Applications 217 About web applications 217 How a web application works 219 Authoring dynamic pages 224 Choosing a server technology 226 Web application terminology 227 Appendix B: Installing a Web Server 231 Getting started 231 Installing - Adobe 38028779 | Getting Started Guide - Page 7
Appendix G: Setup for Sample PHP Site 301 Setup checklists for PHP developers 302 Configuring your system (PHP 302 Defining a Dreamweaver site (PHP 311 Connecting to the sample database (PHP 315 Index 321 Contents 7 - Adobe 38028779 | Getting Started Guide - Page 8
8 Contents - Adobe 38028779 | Getting Started Guide - Page 9
1 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 11 - Adobe 38028779 | Getting Started Guide - Page 10
- Adobe 38028779 | Getting Started Guide - Page 11
environment, 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 . Dreamweaver also provides tools that make it easy to add Flash assets to web pages. 11 - Adobe 38028779 | Getting Started Guide - Page 12
simple and accessible, helping you accomplish more in less time. Following are a few of the key new features in Dreamweaver 8: ■ Zoom tool and guides ■ Visual XML data binding ■ New CSS Styles panel ■ CSS layout visualization ■ Code collapse ■ Coding toolbar ■ Background file transfer ■ Insert - Adobe 38028779 | Getting Started Guide - Page 13
at www.macromedia.com/go/dw_documentation for late-breaking information or instructions. To install Dreamweaver: 1. Insert the Dreamweaver CD into your , restart your computer. Registering Dreamweaver 8 To get additional Macromedia support, it's a good idea to register your copy of Macromedia - Adobe 38028779 | Getting Started Guide - Page 14
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 > menu item name. Items in submenus are shown in this format: menu name > submenu - Adobe 38028779 | Getting Started Guide - Page 15
All of the Dreamweaver documentation is available in both electronic help and PDF format. This chapter contains the following topics: Where to start 24 Where to start The Dreamweaver documentation includes information for readers from a variety of backgrounds. This section helps you understand - Adobe 38028779 | Getting Started Guide - Page 16
In Using Dreamweaver (Help > Using Dreamweaver), you get a more comprehensive idea of what you learned in this Getting Started with Dreamweaver guide by reading Chapter 1, "Exploring the Workspace," Chapter 2, "Setting Up a Dreamweaver Site," Chapter 3, "Creating and Opening Documents" and Chapter - Adobe 38028779 | Getting Started Guide - Page 17
For experienced web designers who are new to Dreamweaver: 1. Begin by reading the tutorials in this Getting Started with Dreamweaver guide. 2. In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1, "Exploring the Workspace" to learn more about the Dreamweaver user interface. 3. Although - Adobe 38028779 | Getting Started Guide - Page 18
your background. For experienced hand-coders: 1. Begin by reading Chapter 8, "Tutorial: Working with Code" in this Getting Started with Dreamweaver guide. 2. In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1, "Exploring the Workspace" to learn more about the Dreamweaver user interface - Adobe 38028779 | Getting Started Guide - Page 19
For web application developers who have not used Dreamweaver: 1. Begin by quickly reading this Getting Started with Dreamweaver guide to familiarize yourself with the basics of using Dreamweaver. 2. In Using Dreamweaver (Help > Using Dreamweaver), read Chapter 1, "Exploring the Workspace" to learn - Adobe 38028779 | Getting Started Guide - Page 20
Dreamweaver interface, with • View online: http:// detailed beginner livedocs.macromedia.com/go/ tutorials. Intended livedocs_dreamweaver/ for beginning • Get the PDF: users, as well as www.macromedia.com/go/ dw_documentation intermediate and advanced users who want to learn about new - Adobe 38028779 | Getting Started Guide - Page 21
the JavaScript Reference API, both of which • View online: http:// let you perform various supporting tasks when developing Dreamweaver livedocs.macromedia.com/go/ livedocs_dreamweaver/ • Get the PDF: www.macromedia.com/go/ dw_documentation extensions. Intended for advanced users who want to - Adobe 38028779 | Getting Started Guide - Page 22
documentation livedocs_coldfusion/ set. (The full set is • Get the PDF: available on www.macromedia.com/go/ LiveDocs.) cf_documentation Intended for : Select model, and other types of reference manuals, mainly Help > Reference. For a full list of manuals, click the Book pop-up menu in the - Adobe 38028779 | Getting Started Guide - Page 23
Dreamweaver Documentation Resource Center Product manuals www.macromedia.com/go/ in PDF format, dw_documentation errata, tutorials, and release notes. Macromedia Online Forums Discussion and problem-solving information by Dreamweaver users, technical support representatives, and the Dreamweaver - Adobe 38028779 | Getting Started Guide - Page 24
To search for a specific phrase, enclose it in double quotes. 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 - Adobe 38028779 | Getting Started Guide - Page 25
Using the index You can find information quickly with the index. To use the index (Windows): 1. In Dreamweaver Help, click the Index tab. 2. Scroll to an index entry in the alphabetized list and double-click it to display the indexed information. To use the index (Macintosh): 1. In Dreamweaver Help, - Adobe 38028779 | Getting Started Guide - Page 26
■ 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. Discussing the Dreamweaver documentation with LiveDocs The Dreamweaver documentation is also available online in - Adobe 38028779 | Getting Started Guide - Page 27
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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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 Show Code and Design Views Show Design View No Browser/Check Errors Validate Markup File Management Server Debug Document Title - Adobe 38028779 | Getting Started Guide - Page 32
The status bar at the bottom of the Document window provides additional information about the document you are creating. Document size and estimated download time Tag selector Window Size pop-up menu Set magnification Zoom tool Hand tool Select tool The tag selector shows the hierarchy of tags - Adobe 38028779 | Getting Started Guide - Page 33
time for the page, including all dependent files such as images and other media files. For more information, see "Setting download time and size preferences" in Using Dreamweaver. For more information about using the status bar, see Chapter 1, "Exploring the Workspace" in Using Dreamweaver. The - Adobe 38028779 | Getting Started Guide - Page 34
enables you to insert dynamic elements such as recordsets, repeated regions, and record insertion and update forms. 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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - Page 39
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. The Properties pane lets you - Adobe 38028779 | Getting Started Guide - Page 40
NOTE To choose a workspace layout the first time you start Dreamweaver: 1. Select one of the following layouts: Designer is an integrated workspace using MDI (Multiple Document Interface), in which all Document windows and panels are integrated into one larger application window, with the panel - Adobe 38028779 | Getting Started Guide - Page 41
NOTE To combine separate documents into tabbed windows: ■ Select Window > Combine as Tabs. To change the default tabbed document setting: 1. Select Dreamweaver > Preferences, and then select the General category. 2. Select or deselect Open Documents in Tabs, and click OK. Dreamweaver does not alter - Adobe 38028779 | Getting Started Guide - Page 42
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 - Adobe 38028779 | Getting Started Guide - Page 43
XML, 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. XSL, - Adobe 38028779 | Getting Started Guide - Page 44
It's a good idea to save your file in a Dreamweaver site. For more information, see Chapter 3, "Tutorial: Setting Up Your Site and Project Files," on page 49. To create a new blank document: 1. Select File > New. The New Document dialog box appears. The General tab is already selected. 2. From the - Adobe 38028779 | Getting Started Guide - Page 45
Opening files in Dreamweaver In Dreamweaver, you can easily open and edit your documents. To open a file: 1. Select File > Open. 2. In the Open dialog box, select the file and click Open. Accomplishing basic tasks in Dreamweaver 8 45 - Adobe 38028779 | Getting Started Guide - Page 46
46 Dreamweaver Basics - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - Page 48
- Adobe 38028779 | Getting Started Guide - Page 49
NOTE CHAPTER 3 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 - Adobe 38028779 | Getting Started Guide - Page 50
, see "Specifying where dynamic pages can be processed" in Using Dreamweaver. You can set up a Dreamweaver site by using the Site Definition Wizard, which guides you through the setup process, or by using the Site Definition Advanced settings, which let you set up local, remote, and testing folders - Adobe 38028779 | Getting Started Guide - Page 51
NOTE The sample files included with Dreamweaver contain assets for the sample website you'll build using these Getting Started with Dreamweaver tutorials. The first step in creating the site is to copy the sample files from the Dreamweaver application folder to an appropriate folder on your hard - Adobe 38028779 | Getting Started Guide - Page 52
3. 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. The local folder is the - Adobe 38028779 | Getting Started Guide - Page 53
6. 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: 7. - Adobe 38028779 | Getting Started Guide - Page 54
on a remote computer, running a web server, that will hold published copies of your local files. You can follow the rest of the tutorials in this guide to create the Cafe Townsend sample site, or you can work on your own web pages. When you're finished creating and editing pages, proceed - Adobe 38028779 | Getting Started Guide - Page 55
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. Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. You can use - Adobe 38028779 | Getting Started Guide - Page 56
. As the web designer, it's your job to transform the comp into a working web page (most likely with the help of other graphics designers and Flash developers). 56 Tutorial: Creating a Table-based Page Layout - Adobe 38028779 | Getting Started Guide - Page 57
page for Cafe Townsend, a fictional restaurant. If you haven't created the cafe_townsend local root folder, you must do so before you proceed. For instructions, see Chapter 3, "Tutorial: Setting Up Your Site and Project Files." 1. In Dreamweaver, select File > New. 2. On the General tab of the New - Adobe 38028779 | Getting Started Guide - Page 58
page in a web browser. 7. Select File > Save to save your page. Insert tables Next you'll add a table that will hold text, graphics, and Macromedia Flash assets. 1. Click once on the page to place the insertion point in the upper-left corner of the page. 2. Select Insert > Table. 3. In the Insert - Adobe 38028779 | Getting Started Guide - Page 59
4. 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 59 - Adobe 38028779 | Getting Started Guide - Page 60
ABOUT... 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. - Adobe 38028779 | Getting Started Guide - Page 61
8. Click OK. A second table with one row and three columns appears below your first table. 9. Click to the right of the table to deselect it. 10. 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. ■ Enter - Adobe 38028779 | Getting Started Guide - Page 62
NOTE NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 63
2. Click once inside the first row of the first table. 3. 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 - Adobe 38028779 | Getting Started Guide - Page 64
7. 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). 8. Click once inside - Adobe 38028779 | Getting Started Guide - Page 65
9. In the Property inspector, enter 140 in the Cell Width (W) text box and press Enter (Windows) or Return (Macintosh). 10. Click once inside the second column of the second table. 11. In the Property inspector, enter 230 in the Cell Width text box and press - Adobe 38028779 | Getting Started Guide - Page 66
14. 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: 15. Click the Exit Expanded Tables Mode link at the top of the Document window to return to Standard mode. 16. Save your page. 66 Tutorial: - Adobe 38028779 | Getting Started Guide - Page 67
code and does not appear on the page. It's important to provide alternative text for most of your images so that people who use screen readers or text-only browsers can receive the information provided by the image. In the case of a banner graphic, which merely displays a logo for a website, it - Adobe 38028779 | Getting Started Guide - Page 68
ABOUT... About image placeholders An image placeholder is a graphic you use until final artwork is ready to be added to a web page; it is not a graphic image that displays in a browser. Before you publish your site, replace any image placeholders you've added with web-friendly graphic files such as - Adobe 38028779 | Getting Started Guide - Page 69
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. 1. Click once inside the first cell of the three-columned table. 2. Click the tag (cell tag) in the tag selector to select the cell. 3. In the Property - Adobe 38028779 | Getting Started Guide - Page 70
4. 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. 5. Click once inside the second cell of the three-columned table. 6. Click the tag (cell tag) in the tag selector to - Adobe 38028779 | Getting Started Guide - Page 71
1. Select Modify > Page Properties. 2. 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 - Adobe 38028779 | Getting Started Guide - Page 72
black. 4. 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," you'll learn how to add assets to the page using the - Adobe 38028779 | Getting Started Guide - Page 73
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. After you've added content to your pages, you can preview your work in a browser so - Adobe 38028779 | Getting Started Guide - Page 74
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," some steps and illustrations in the tutorial will not match what you see on your screen. 74 Tutorial: Adding Content to Pages - Adobe 38028779 | Getting Started Guide - Page 75
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 - Adobe 38028779 | Getting Started Guide - Page 76
NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 77
4. Select the banner_graphic.jpg file and click OK. Dreamweaver replaces the image placeholder with the banner graphic for Cafe Townsend. 5. Click once outside the table to deselect the image. 6. Save the page (File > Save). Insert images 77 - Adobe 38028779 | Getting Started Guide - Page 78
Insert an image by using the Insert menu 1. 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). 2. Select Insert > Image. 3. In the Select Image Source dialog box, navigate to the images folder inside the - Adobe 38028779 | Getting Started Guide - Page 79
Insert an image by dragging 1. Click once inside the last row of the last table on the page (just below the colored table cells). 2. 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. If the - Adobe 38028779 | Getting Started Guide - Page 80
NOTE Insert an image from the Assets panel 1. Click once inside the center column of the three-columned table (the first table cell that is colored light tan). 2. In the Property inspector (Window > Properties), select Center from the Horz pop-up menu, and select Top from the Vert pop-up menu. This - Adobe 38028779 | Getting Started Guide - Page 81
ABOUT... 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 - Adobe 38028779 | Getting Started Guide - Page 82
NOTE 7. 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. 8. Click once - Adobe 38028779 | Getting Started Guide - Page 83
could easily change (without affecting the rest of the web page) to display information about the event, instead of featured food items. To insert the Flash FMA file, you need to insert HTML code that embeds the file in the Dreamweaver page. The easiest way to do this is to insert - Adobe 38028779 | Getting Started Guide - Page 84
might be animated_logo.fla. When you've finished working on a FLA file in Flash, you must export the file to a format that can be played on the web in Flash Player. When you export FLA files in Flash, they are converted to SWF files and designated by a .swf extension. SWF files (not FLA files - Adobe 38028779 | Getting Started Guide - Page 85
NOTE 5. 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 - Adobe 38028779 | Getting Started Guide - Page 86
, as well as a set of playback controls, when viewed in a browser. The Insert Flash Video command gives you the following options for delivering video content to your site visitors: Progressive Download Video downloads the Flash Video (FLV) file to the site visitor's hard disk and then plays it - Adobe 38028779 | Getting Started Guide - Page 87
pop-up menu. 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 - Adobe 38028779 | Getting Started Guide - Page 88
cannot determine the dimensions of the FLV file. In such cases, you must manually enter the width and height values. The value in the Width and Height file. You can adjust these values arbitrarily to change the size of the Flash Video on your web page. When you increase the dimensions of a video, - Adobe 38028779 | Getting Started Guide - Page 89
8. 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. (You may need to click the Refresh button in the Files panel - Adobe 38028779 | Getting Started Guide - Page 90
once inside the third table cell of the three-columned table (the cell to the right of the column that contains the graphic and the Flash video). 5. Select Edit > Paste. The text from the text file appears in the selected table cell. 90 Tutorial: Adding Content to Pages - Adobe 38028779 | Getting Started Guide - 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. 6. Make sure the insertion point is - Adobe 38028779 | Getting Started Guide - 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. 1. Click once in the first column of the three-columned table (the column that is colored reddish-brown). 2. Type the word - Adobe 38028779 | Getting Started Guide - Page 93
4. 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. The - Adobe 38028779 | Getting Started Guide - Page 94
NOTE 6. 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. 7. Save your page. - Adobe 38028779 | Getting Started Guide - Page 95
1. 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. 2. In the Property inspector (Window > Properties), click the folder icon next to the - Adobe 38028779 | Getting Started Guide - Page 96
them in the Document window in Dreamweaver; links work only in a browser. To make sure your links work correctly, preview your page in a browser. For instructions about how to do this, continue to "Preview your page in a browser" on page 96. 6. Save your page. Preview your page in a browser The - Adobe 38028779 | Getting Started Guide - Page 97
1. Make sure the index.html file is open in the Document window. 2. 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. If the - Adobe 38028779 | Getting Started Guide - 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. 98 Tutorial: Adding Content to Pages - Adobe 38028779 | Getting Started Guide - Page 99
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. In - Adobe 38028779 | Getting Started Guide - Page 100
begin this tutorial with the completed add_content.html file, instead of the index.html file from Chapter 5, "Tutorial: Adding Content to Pages," certain steps and illustrations in the tutorial will not match what you see on your screen. 100 Tutorial: Formatting Your Page with CSS - Adobe 38028779 | Getting Started Guide - Page 101
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 - Adobe 38028779 | Getting Started Guide - Page 102
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. When you use CSS - Adobe 38028779 | Getting Started Guide - 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. The defined styles "cascade" to the elements on your web page - Adobe 38028779 | Getting Started Guide - Page 104
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 - Adobe 38028779 | Getting Started Guide - Page 105
ABOUT... 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 - Adobe 38028779 | Getting Started Guide - Page 106
, the code should look like following example: TIP For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel. 5. Save the - Adobe 38028779 | Getting Started Guide - Page 107
1. In the Document window, open the Cafe Townsend index.html file. (You can click its tab if it's already open.) 2. Select the text of the first paragraph that you pasted into the page in Chapter 5, "Tutorial: Adding Content to Pages". 3. Look in the Property inspector and make sure that the - Adobe 38028779 | Getting Started Guide - Page 108
5. In the CSS Styles panel (Window > CSS Styles), click the Attach Style Sheet button in the lower-right corner of the panel. 6. 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. 7. Click OK. The text in the - Adobe 38028779 | Getting Started Guide - Page 109
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. 1. Make sure the - Adobe 38028779 | Getting Started Guide - 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. 5. Click plus (+) to expand the - Adobe 38028779 | Getting Started Guide - Page 111
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" - Adobe 38028779 | Getting Started Guide - Page 112
4. Select cafe_townsend.css from the Define In pop-up menu. It should be selected by default. 5. 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. 6. In the CSS Rule Definition dialog box, do the following - Adobe 38028779 | Getting Started Guide - Page 113
), select bold from the Styles pop-up menu. TIP For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel. The bold class - Adobe 38028779 | Getting Started Guide - Page 114
3. Repeat step 2 to apply the bold class style to the first four words of the second paragraph. 4. 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 - Adobe 38028779 | Getting Started Guide - Page 115
Create a new rule for the navigation 1. Open the cafe_townsend.css file if it isn't already open, or click on its tab to see it. 2. Define a new rule by typing the following code in the file, after the .bold class style: .navigation { } This is an empty rule. The code in the file should look - Adobe 38028779 | Getting Started Guide - Page 116
5. 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. 6. 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 - Adobe 38028779 | Getting Started Guide - Page 117
add a few more properties to the .navigation rule. TIP For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel. Format the - Adobe 38028779 | Getting Started Guide - Page 118
8. 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 - Adobe 38028779 | Getting Started Guide - Page 119
10. Enter #993300 as the hexadecimal value and press Enter (Windows) or Return (Macintosh). 11. Locate the display property (you might need to scroll down), click - Adobe 38028779 | Getting Started Guide - Page 120
14. Click Show Set Properties so that only your set properties appear in the Properties pane. 15. 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. 16. Save the cafe_townsend.css file and close it. You've now - Adobe 38028779 | Getting Started Guide - Page 121
Apply the rule 1. With the index.html page open in the Document window, click the word Cuisine so that the insertion point is somewhere in the word. 2. In the tag selector, click the rightmost tag. This action selects all of the text for the specified tag, or link. 3. In the Property - Adobe 38028779 | Getting Started Guide - Page 122
's important that you use the tag selector to select each link individually, and then assign the class styles one at a time. If you're having trouble formatting the link text, make sure that a space (not a return) is between each linked word or words. Also make sure that the space between two - Adobe 38028779 | Getting Started Guide - 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. 1. Open the cafe_townsend.css file. 2. - Adobe 38028779 | Getting Started Guide - Page 124
4. Click once at the end of the rule and press Enter (Windows) or Return (Macintosh) a few times to create some space. 5. Paste (Edit > Paste) the copied text in the space you just created. 6. Add the :hover pseudo-class to the pasted .navigation selector, as follows: 124 Tutorial: Formatting Your - Adobe 38028779 | Getting Started Guide - Page 125
7. In the new .navigation:hover rule, replace the current background-color (#993300) with #D03D03. 8. Save the file and close it. 9. 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 - Adobe 38028779 | Getting Started Guide - Page 126
1. With the index.html page open in the Document window, click the tag in the tag selector. Clicking the tag selects everything between the open and close tags in the Document window. To see the selection, click Code view at the top of the Document window. 126 Tutorial: - Adobe 38028779 | Getting Started Guide - Page 127
website is to publish the page. To publish the page, you must define a folder on a remote site and upload your files to that folder. For instructions, continue to the next tutorial. (Optional) Center the contents of the page 127 - Adobe 38028779 | Getting Started Guide - Page 128
128 Tutorial: Formatting Your Page with CSS - Adobe 38028779 | Getting Started Guide - Page 129
129 Define a remote folder 130 Upload your local files 133 Troubleshoot the remote folder setup (optional 134 Learn about remote sites After re working for, an intranet server within your company, or an Internet Information Services (IIS) server on a Windows computer. If you don't already have - Adobe 38028779 | Getting Started Guide - Page 130
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. You also need to have a local site defined before you - Adobe 38028779 | Getting Started Guide - Page 131
as your remote folder, or you can create a remote folder after you've established a connection with the server. In either case, continue with the instructions in this tutorial until you're connected to a remote server. After you've established a connection, you can use the Dreamweaver Files panel to - Adobe 38028779 | Getting Started Guide - Page 132
your user name and password in the appropriate text boxes. ■ If your server supports SFTP, select the Use Secure FTP (SFTP) option. ■ Click Test to 's root folder. For more information, click Help in the dialog box. 10. Click OK. Dreamweaver creates a connection to the remote folder. 11. Click Done - Adobe 38028779 | Getting Started Guide - Page 133
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. 1. In the Files panel (Window > Files), - Adobe 38028779 | Getting Started Guide - Page 134
Troubleshoot the remote folder setup (optional) A web server can be configured in want.) Be sure that you indicate the remote system's root folder as the host directory. If you have problems connecting, and you've specified the host directory using a single slash (/), you might need to specify a - Adobe 38028779 | Getting Started Guide - Page 135
"cannot put file," your remote folder may be out of space. For more detailed information, look at the FTP log. In general, when you encounter a problem with an FTP transfer, examine the FTP log by selecting Site > Advanced > FTP Log. Troubleshoot the remote folder setup (optional) 135 - Adobe 38028779 | Getting Started Guide - Page 136
136 Tutorial: Publishing Your Site - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - Page 138
- Adobe 38028779 | Getting Started Guide - Page 139
's underlying code, and how to add and edit code manually. If you've already set up your site and completed , set up your site by following the instructions in "Tutorial: Setting Up Your Site and Page with CSS," on page 99 certain steps and illustrations in the tutorial will not match what you see on - Adobe 38028779 | Getting Started Guide - Page 140
NOTE NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 141
view. When you're working on your own pages, you can use whichever view is most comfortable for you. Most of the tutorials in this guide assume that you're using Design view. Look at the code 141 - Adobe 38028779 | Getting Started Guide - Page 142
NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 143
3. 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 img tag is selected, including the opening and closing angle brackets. 4. If it isn't already enabled - Adobe 38028779 | Getting Started Guide - Page 144
NOTE 6. 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 div from that list. You can also select the HTML Tags category, and then select the div tag in the right pane, - Adobe 38028779 | Getting Started Guide - Page 145
9. Click OK to close the tag editor and insert the tag. Dreamweaver inserts the div tag in your page, wrapping it around the image tag. 10. Click Close to close the Tag Chooser. 11. Save your page. Edit a tag Next, you'll use the Tag inspector to quickly make changes to a - Adobe 38028779 | Getting Started Guide - Page 146
6. Still in Code view, find and click in the img tag for the banner_graphic.jpg image at the top of the page. The Attributes tab of the Tag inspector shows information about the img tag's attributes. 7. In the Tag inspector, click in the empty text box beside the alt attribute, and type Cafe - Adobe 38028779 | Getting Started Guide - Page 147
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. 1. Open the index.html page in Code view, if it's not already open. 2. In the Document window, select the alt attribute name (not the attribute - Adobe 38028779 | Getting Started Guide - Page 148
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 already open. 2. In Design view, select the street_sign.jpg image (it's below the Flash Video placeholder) and press Delete. Now you'll use code hints to reinsert the - Adobe 38028779 | Getting Started Guide - Page 149
3. 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 tag, type - Adobe 38028779 | Getting Started Guide - Page 150
5. With the insertion point between the opening tag and the closing tag, type an opening angle bracket ( - Adobe 38028779 | Getting Started Guide - Page 151
10. In the Select File dialog box, navigate to the street_sign.jpg file (it press Enter (Windows) or Return (Macintosh). 12. Leave the quotation marks empty, because this image is only an illustration. Use the Right Arrow key to move the insertion point to the right of the quotation marks. 13. Type - Adobe 38028779 | Getting Started Guide - Page 152
Print your code You can print your code to edit it offline, archive it, or distribute it. To print code: 1. View a page in Code view. 2. Select File > Print Code. 3. Specify printing options, and then click OK (Windows) or Print (Macintosh). 152 Tutorial: Working with Code - Adobe 38028779 | Getting Started Guide - Page 153
and created the cafe_townsend local root folder, you must do so before you proceed. For instructions, see Chapter 3, "Tutorial: Setting Up Your Site and Project Files." In this tutorial for "nesting," tables can cause problems for disabled people who are using screen readers to view web pages. 9 153 - Adobe 38028779 | Getting Started Guide - Page 154
margins, background colors, and so on. Additionally, people using screen readers to view web pages have a much easier time browsing pages built them. The layers act as content blocks that hold assets like images, Flash files, text, and so on. Dreamweaver layers are absolutely positioned elements. - Adobe 38028779 | Getting Started Guide - Page 155
. As the web designer, it's your job to transform the comp into a working web page (most likely with the help of other graphics designers and Flash developers). Examine the design comp 155 - Adobe 38028779 | Getting Started Guide - Page 156
page for Cafe Townsend, a fictional restaurant. If you haven't created the cafe_townsend local root folder, you must do so before you proceed. For instructions, see Chapter 3, "Tutorial: Setting Up Your Site and Project Files." 1. In Dreamweaver, select File > New. 2. On the General tab of the New - Adobe 38028779 | Getting Started Guide - Page 157
page. Insert layers Next you'll add layers to the page. A layer is an absolutely positioned element that you can use to hold images, text, Flash files, and other content. For more information about layers, see "Learn about CSS-based page layout" on page 153. Draw a new layer 1. With the index_css - Adobe 38028779 | Getting Started Guide - Page 158
2. Click Draw Layer. The mouse pointer changes to a cross when you move it over the page. 3. Drag a layer of any size onto the page and release the mouse button. 4. Click the selection handle at the upper-left corner of the layer to make sure that it is selected. 5. With the new layer selected, do - Adobe 38028779 | Getting Started Guide - Page 159
6. Open the Layers panel (Window > Layers). You'll see that Dreamweaver has added the new layer (banner_graphic) to the list of layers. 7. Click once outside the new layer to deselect it. 8. Save your page. Add more layers Now you'll add more layers to the page. You'll use the first layer ( - Adobe 38028779 | Getting Started Guide - Page 160
3. 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. ■ In the Top (T) text box, enter - Adobe 38028779 | Getting Started Guide - Page 161
4. Click once outside the new layer to deselect it. 5. 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 - Adobe 38028779 | Getting Started Guide - Page 162
6. 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 - Adobe 38028779 | Getting Started Guide - Page 163
TIP NOTE 7. 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. ■ Select the second layer, - Adobe 38028779 | Getting Started Guide - Page 164
8. 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. TIP You can also move selected layers one - Adobe 38028779 | Getting Started Guide - Page 165
10. After your layers are in position, disable CSS Layout Backgrounds (if it isn't already) by selecting View > Visual Aids and deselecting CSS Layout Backgrounds. Add - Adobe 38028779 | Getting Started Guide - Page 166
4. 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. ■ Press Enter (Windows) or Return - Adobe 38028779 | Getting Started Guide - Page 167
6. Create another layer in the center_content layer by clicking Draw Layer and dragging another layer, as the following example shows: 7. Click the new layer's selection handle to make sure the layer is selected. 8. With the new layer selected, do the following in the Property inspector: ■ Click in - Adobe 38028779 | Getting Started Guide - Page 168
9. 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 - Adobe 38028779 | Getting Started Guide - Page 169
10. Create one more layer in the center_content layer by clicking Draw Layer and dragging another layer as the following example shows: 11. Click the new - Adobe 38028779 | Getting Started Guide - Page 170
13. 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. 14. Save your page. 170 Tutorial: Creating a CSS-based Page - Adobe 38028779 | Getting Started Guide - Page 171
Add color to the page Now you'll add color to the page by setting background colors for some of the layers, and for the background of the entire page. 1. Select the navigation layer by clicking its name in the Layers panel (Window > Layers). TIP You can change the width of the Name column in the - Adobe 38028779 | Getting Started Guide - Page 172
and select black (#000000) from the color picker. 10. Click OK. Your page background turns to black that can hold assets such as images, text, and Flash Video files. Your next step is to add the 't complete that tutorial, you can use the illustrations as a reference while adding content to the - Adobe 38028779 | Getting Started Guide - Page 173
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 186 Add a Repeat Region XSLT object 188 Attach the XSLT page to the XML page 191 Learn about other deployment options 194 10 173 - Adobe 38028779 | Getting Started Guide - Page 174
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 - Adobe 38028779 | Getting Started Guide - Page 175
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. The right column of - Adobe 38028779 | Getting Started Guide - Page 176
of parent and child tags. Like most 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: 03/01/2004 Displaying XML Data with Macromedia - Adobe 38028779 | Getting Started Guide - 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. In the way that - Adobe 38028779 | Getting Started Guide - Page 178
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 " - Adobe 38028779 | Getting Started Guide - Page 179
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 - Adobe 38028779 | Getting Started Guide - Page 180
NOTE Attach an XML data source to the XSLT page Next you'll attach an XML data source to the page using the Bindings panel. 1. 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. - Adobe 38028779 | Getting Started Guide - Page 181
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 - Adobe 38028779 | Getting Started Guide - Page 182
5. 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. 6. With - Adobe 38028779 | Getting Started Guide - Page 183
Bind XML data to the XSLT page Now you're ready to bind XML data to the page. 1. 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. It uses the - Adobe 38028779 | Getting Started Guide - Page 184
NOTE 4. 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 - Adobe 38028779 | Getting Started Guide - Page 185
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 - Adobe 38028779 | Getting Started Guide - Page 186
5. In the Property inspector, click the Italic button. 6. 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 - Adobe 38028779 | Getting Started Guide - Page 187
3. 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. 4. When the XML schema appears in the dialog box, select the link - Adobe 38028779 | Getting Started Guide - Page 188
NOTE 5. 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 element contains the name of the HTML file containing - Adobe 38028779 | Getting Started Guide - Page 189
3. Select Insert > XSLT Objects > Repeat Region. Add a Repeat Region XSLT object 189 - Adobe 38028779 | Getting Started Guide - Page 190
4. In the XPath Expression Builder, select the repeating element menu_item. (Repeating elements are indicated by a small plus sign). 5. 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 - Adobe 38028779 | Getting Started Guide - Page 191
NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 192
5. 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. 6. Save the specials.xml page. 192 Tutorial: Displaying XML Data - Adobe 38028779 | Getting Started Guide - Page 193
7. 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 - Adobe 38028779 | Getting Started Guide - Page 194
Learn about other deployment options In this tutorial, you learned how to create an entire XSLT page to use as part of a client-side transformation. But you can also use entire XSLT pages for server-side transformations. When you use an entire XSLT page for a server-side transformation, you build - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - Page 196
196 Tutorial: Displaying XML Data - Adobe 38028779 | Getting Started Guide - Page 197
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 - Adobe 38028779 | Getting Started Guide - Page 198
show Macromedia ColdFusion dialog boxes. However, you can complete the lessons in this tutorial by using any of the server models that Dreamweaver supports. Review your task Your task is to build the following dynamic pages for the Cafe Townsend website: ■ A page that displays the comments already - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - Page 200
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 - Adobe 38028779 | Getting Started Guide - Page 201
NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 202
NOTE If the dialog box you see looks more complex than the preceding dialog box, click Simple. 3. In the Name text box, enter rs_Comment. 4. 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 - Adobe 38028779 | Getting Started Guide - Page 203
the second pop-up menu, select Ascending. This step specifies that the retrieved records are listed in alphabetical order by customer last name. 10. Click Test to test the recordset or DataSet. The records from the database that match your recordset or DataSet selection criteria are displayed in - Adobe 38028779 | Getting Started Guide - Page 204
Next, you'll create a page that lists the records that currently exist in the COMMENTS table. You will dynamically generate the page rather than manually entering the information. You'll start by creating a table to structure the data list. 1. In the Cafe Townsend document, place the insertion point - Adobe 38028779 | Getting Started Guide - Page 205
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 entered into the database. The completed dialog box should look - Adobe 38028779 | Getting Started Guide - Page 206
5. 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. 6. Save your page. Add dynamic fields to the table You're now ready to add - Adobe 38028779 | Getting Started Guide - Page 207
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. 1. In the Document window, - Adobe 38028779 | Getting Started Guide - Page 208
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. ■ - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - Page 210
3. 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. The Record Insertion - Adobe 38028779 | Getting Started Guide - 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. 1. 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 (-). ■ - Adobe 38028779 | Getting Started Guide - Page 212
3 through 6 for the EMAIL form field, with a label of Email, displaying as a Text Field and submitting as Text. 9. In the Form Fields list, select COMMENTS. 10. In the Label field, enter Comments. 11. Set the type of form object for the Comments form field by doing one of the following: ■ If - Adobe 38028779 | Getting Started Guide - Page 213
The dialog box should look similar to the following example when you are done: 12. Click OK to close the dialog box and create the record insertion form. The Record Insertion Form application object is inserted in the document. 13. Save your page. Create a record insert form 213 - Adobe 38028779 | Getting Started Guide - Page 214
NOTE 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. 1. In the Files panel, Control-click (Windows) or Command-click (Macintosh) - Adobe 38028779 | Getting Started Guide - 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 231 Setup for Sample ColdFusion Site 237 Setup for - Adobe 38028779 | Getting Started Guide - Page 216
- Adobe 38028779 | Getting Started Guide - Page 217
to request based on the visitor's actions, this kind of page is called a dynamic page. Web applications are built to address a variety of challenges and problems. This section describes common uses for web applications and gives a simple example. A 217 - Adobe 38028779 | Getting Started Guide - Page 218
. At the end of the month, Chris gathers all the e-mail messages and awards employees small cash prizes according to their point totals. Chris's problem is that the fitness program has grown too successful. So many employees now participate that Chris is inundated with e-mails at the end of each - Adobe 38028779 | Getting Started Guide - Page 219
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 - Adobe 38028779 | Getting Started Guide - Page 220
server, this kind of page is called a static page. Strictly speaking, a "static" page may not be static at all. For example, a rollover image or Flash content (a SWF file) can make a static page come alive. However, this documentation refers to a page as static if it is sent to the browser without - Adobe 38028779 | Getting Started Guide - Page 221
the page. This special software is called an application server. The application server reads the code on the page, finishes the page according to the instructions in the code, and then removes the code from the page. The result is a static page that the application server passes back to the web - Adobe 38028779 | Getting Started Guide - Page 222
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" in Using Dreamweaver. The instruction to extract data from a database is called a database query. A query consists of search criteria expressed in a database - Adobe 38028779 | Getting Started Guide - Page 223
Here's an illustration of the process of querying a database and returning data to the browser: Step 1 - Web browser requests dynamic page. Step 2 - Web server finds page and passes it to application server. Step 3 - Application server scans page for instructions. Step 4 - Application server sends - Adobe 38028779 | Getting Started Guide - Page 224
> Trio Motors Information Page About Trio Motors Trio Motors is a leading automobile manufacturer. Be sure to visit our #department# page. - Adobe 38028779 | Getting Started Guide - Page 225
The embedded instructions on this page perform the following actions: 1. Create a variable called department and on your server. Here are the most popular languages for the five server technologies supported by Dreamweaver: Server technology ColdFusion ASP.NET Active Server Pages (ASP) Java Server - Adobe 38028779 | Getting Started Guide - Page 226
also tightly integrated with Dreamweaver. If you're familiar with other server technologies, such as JSP, PHP, ASP, or ASP.NET, Dreamweaver offers great support for these as well. Which server technology you choose also depends on the application server you plan to use for your web application. An - Adobe 38028779 | Getting Started Guide - Page 227
To learn more about JSP, visit the Sun Microsystems website at java.sun.com/products/jsp/. To learn more about PHP, visit the PHP website at www.php.net/. Web application terminology This section defines frequently used terms relating to web applications. An application server is software that helps - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - Page 230
230 Understanding Web Applications - Adobe 38028779 | Getting Started Guide - Page 231
232 Testing IIS 233 Testing the Macintosh web server (PHP developers 233 Web server basics 234 Macromedia does not provide technical support for third-party software such as Microsoft Internet Information Server. If you need assistance with a Microsoft product, please contact Microsoft technical - Adobe 38028779 | Getting Started Guide - Page 232
> Add or Remove Programs, or Start > Control Panel > Add or Remove Programs. 2. Select Add/Remove Windows Components. 3. Select Internet Information Services (IIS) and click Next. 4. Follow the installation instructions. You can test the web server after installing it. 232 Installing a Web Server - Adobe 38028779 | Getting Started Guide - Page 233
NOTE 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: My web server is working. Next, open the test page in a - Adobe 38028779 | Getting Started Guide - Page 234
NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 235
NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 236
236 Installing a Web Server - Adobe 38028779 | Getting Started Guide - Page 237
-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process. This chapter contains the following sections: Setup checklists for ColdFusion developers 237 Configuring your system - Adobe 38028779 | Getting Started Guide - Page 238
as a server, copy the sample database to the remote computer. 2. Create the connection in Dreamweaver. Configuring your system (ColdFusion) This section provides instructions for two common system configurations: one in which ColdFusion is installed on your hard disk, and one in which ColdFusion is - Adobe 38028779 | Getting Started Guide - Page 239
The following illustration shows the two configurations described in this section: Local configuration (for Windows users only) Remote server configuration (for Macintosh or Windows users) WINDOWS PC Dreamweaver - Adobe 38028779 | Getting Started Guide - Page 240
server for processing before sending the page to the browser. For more information, see "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 - Adobe 38028779 | Getting Started Guide - Page 241
the Administrator user account. 2. Close all open applications. 3. Double-click the ColdFusion MX 7 installer file. 4. Follow the onscreen installation instructions. Some screens in the installation wizard are self-explanatory. For the following screens, however, select the following options: ■ At - Adobe 38028779 | Getting Started Guide - 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 - Adobe 38028779 | Getting Started Guide - 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. - Adobe 38028779 | Getting Started Guide - Page 244
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. - Adobe 38028779 | Getting Started Guide - Page 245
NOTE Copying the sample files If you haven't already done so, copy the sample files from the Dreamweaver application folder to a folder on your hard disk. To copy the sample files: 1. Create a new folder called local_sites in your user folder on your hard disk. For example, create one of the - Adobe 38028779 | Getting Started Guide - 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: 1. In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click New, and then - Adobe 38028779 | Getting Started Guide - Page 247
the server: across a local network (the Local/Network option), or by using FTP. There are other options in the Access pop-up menu, but this guide doesn't cover them. For information about the other options, see Using Dreamweaver. 3. Enter the path or FTP settings to the web server folder you created - Adobe 38028779 | Getting Started Guide - Page 248
1. 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 - Adobe 38028779 | Getting Started Guide - Page 249
TIP NOTE 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. 5. Click OK to define the site and dismiss the Site Definition - Adobe 38028779 | Getting Started Guide - Page 250
NOTE Connecting to the sample database (ColdFusion) During installation, Dreamweaver copies a sample Microsoft Access database to your hard disk. This section describes how to create a connection to the sample database. For information about connecting to another database, see "Database Connections - Adobe 38028779 | Getting Started Guide - Page 251
NOTE NOTE 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. It's better to place the file in a folder that's not publicly - Adobe 38028779 | Getting Started Guide - Page 252
following: ■ Check the settings for the folder that Dreamweaver uses to process dynamic pages (see "Specifying where to process dynamic pages" on page 248). ■ Consult "Troubleshooting Database Connections" in Using Dreamweaver (Help > Using Dreamweaver). 252 Setup for Sample ColdFusion Site - Adobe 38028779 | Getting Started Guide - Page 253
7. 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. - Adobe 38028779 | Getting Started Guide - Page 254
254 Setup for Sample ColdFusion Site - Adobe 38028779 | Getting Started Guide - Page 255
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 - Adobe 38028779 | Getting Started Guide - Page 256
server, copy the sample database to the remote computer. 2. Create the connection in Dreamweaver. Configuring your system (ASP.NET) This section provides instructions for two common system configurations: one in which Windows 2000 or Windows XP Professional is installed on your hard disk, and one in - Adobe 38028779 | Getting Started Guide - Page 257
The following illustration shows the two configurations described in this section: Local configuration (for Windows 2000 or XP users only) Remote server configuration (for Macintosh or Windows users) - Adobe 38028779 | Getting Started Guide - Page 258
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. Make - Adobe 38028779 | Getting Started Guide - Page 259
package from the Microsoft website at http://msdn.microsoft.com/netframework/ downloads/framework1_1/ and follow the installation instructions on the website. You install the Framework as a Windows update. 3. Download the Microsoft .NET Framework 1.1 Software Development Kit (SDK) from the same - Adobe 38028779 | Getting Started Guide - Page 260
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" list, followed by the Web Sites folder, and then the Default Web Site folder. Right-click your - Adobe 38028779 | Getting Started Guide - Page 261
NOTE Copying the sample files If you haven't already done so, copy the sample files from the Dreamweaver application folder to a folder on your hard disk. To copy the sample files: 1. Create a new folder called local_sites in your user folder on your hard disk. For example, create one of the - Adobe 38028779 | Getting Started Guide - Page 262
from the server: across a local network (the Local/Network option) or using FTP. There are other options in the Access pop-up menu, but this guide doesn't cover them. For information about them, see Using Dreamweaver (Help > Using Dreamweaver). 262 Setup for Sample ASP.NET Site NOTE - Adobe 38028779 | Getting Started Guide - Page 263
1. 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 - Adobe 38028779 | Getting Started Guide - Page 264
TIP The URL prefix should always specify a directory, rather than a particular page on the site. Also, be sure to use the same capitalization you used when you created the folder. 4. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web - Adobe 38028779 | Getting Started Guide - Page 265
NOTE To upload the samples files to the web server: 1. 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. 2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to - Adobe 38028779 | Getting Started Guide - Page 266
NOTE Before attempting to connect to the sample database, copy the database to the remote computer's hard disk. 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\ - Adobe 38028779 | Getting Started Guide - Page 267
(see "Specifying where dynamic pages can be processed" on page 263). ■ Deploy the supporting files by selecting Site > Advanced > Deploy Supporting Files. ■ Consult Chapter 29, "Troubleshooting Database Connections," in Using Dreamweaver (Help > Using Dreamweaver). 9. Click OK. The new connection - Adobe 38028779 | Getting Started Guide - Page 268
268 Setup for Sample ASP.NET Site - Adobe 38028779 | Getting Started Guide - Page 269
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). For more information - Adobe 38028779 | Getting Started Guide - Page 270
as a server, copy the sample database to the remote computer. 2. Create the connection in Dreamweaver. Configuring your system (ASP) This section provides instructions for the two most common system configurations for ASP: one in which Microsoft IIS is installed on your hard disk, and one in which - Adobe 38028779 | Getting Started Guide - Page 271
The following illustration shows the two configurations described in this section: Local configuration (for Windows users only) Remote server configuration (for Macintosh or Windows users) WINDOWS PC Dreamweaver - Adobe 38028779 | Getting Started Guide - Page 272
see whether it contains a C:\Inetpub or D:\Inetpub folder. IIS creates this folder during installation. If IIS is not installed, install it now. For instructions, see "Installing a Web Server" on page 231. After installing the web server, you need to install an application server. Installing an ASP - Adobe 38028779 | Getting Started Guide - Page 273
Testing the installation You can test the ASP engine of IIS by running a test page. To test the ASP engine of IIS: 1. In Dreamweaver or any text editor, create a plain text file and name it timetest.asp. 2. In the file, enter the following code: This page was created at on - Adobe 38028779 | Getting Started Guide - Page 274
NOTE 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 - Adobe 38028779 | Getting Started Guide - Page 275
(in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, then doubleclick Administrative Tools, then double-click Internet Information Services). b. Expand the "local computer" list, followed by the Web Sites folder, and then the Default Web Site folder. c. Right-click your - Adobe 38028779 | Getting Started Guide - Page 276
NOTE Copying the sample files If you haven't already done so, copy the sample files from the Dreamweaver application folder to a folder on your hard disk. To copy the sample files: 1. Create a new folder called local_sites in your user folder on your hard disk. For example, create one of the - Adobe 38028779 | Getting Started Guide - Page 277
from the server: across a local network (the Local/Network option) or using FTP. There are other options in the Access pop-up menu, but this guide doesn't cover them. For information about them, see Using Dreamweaver. Defining a Dreamweaver site (ASP) 277 NOTE - Adobe 38028779 | Getting Started Guide - Page 278
1. 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 - Adobe 38028779 | Getting Started Guide - Page 279
3. 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. 4. In the URL Prefix text box, enter the root URL you would enter in a - Adobe 38028779 | Getting Started Guide - Page 280
NOTE To upload the samples files to the web server: 1. 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. 2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to - Adobe 38028779 | Getting Started Guide - Page 281
drivers installed on a Windows system" in Using Dreamweaver. 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. You can download MDAC for free from the Microsoft website at http://msdn.microsoft.com/data/mdac - Adobe 38028779 | Getting Started Guide - Page 282
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 - Adobe 38028779 | Getting Started Guide - Page 283
folder Dreamweaver uses to process dynamic pages (see "Specifying where dynamic pages can be processed" on page 278). ■ Consult Chapter 29, "Troubleshooting Database Connections" in Using Dreamweaver. 7. Click OK. The new connection appears in the Databases panel. The sample ASP application is now - Adobe 38028779 | Getting Started Guide - Page 284
284 Setup for Sample ASP Site - Adobe 38028779 | Getting Started Guide - Page 285
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). For more information on these - Adobe 38028779 | Getting Started Guide - Page 286
as a server, copy the sample database to the remote computer. 3. Create the connection in Dreamweaver. Configuring your system (JSP) This section provides instructions for two common system configurations: one in which Microsoft IIS is installed on your hard disk, and one in which IIS is installed - Adobe 38028779 | Getting Started Guide - Page 287
The following illustration shows the two configurations described in this section: Local configuration (for Windows users only) Remote server configuration (for Macintosh or Windows users) WINDOWS PC Dreamweaver - Adobe 38028779 | Getting Started Guide - Page 288
If IIS is not installed, install it now. For instructions, see "Installing a Web Server" on page 231. If you do not have a JSP application server, you can download and install the Developer Edition of Macromedia JRun, a full-featured JSP this guide doesn't cover using JRun on a Macintosh. 288 Setup - Adobe 38028779 | Getting Started Guide - Page 289
is installed, you can install the JRun application server. 5. Select the option on the splash screen to install JRun. 6. Follow the onscreen instructions to finish installing and testing the program. 7. Once the installation is complete, create a JRun connector to your IIS web server by selecting - Adobe 38028779 | Getting Started Guide - Page 290
(in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, double-click Administrative Tools, and then double-click Internet Information Services). b. Expand the "local computer" list, followed by the Web Sites folder, and then the Default Web Site folder. c. Right-click your - Adobe 38028779 | Getting Started Guide - Page 291
NOTE Copying the sample files If you haven't already done so, copy the sample files from the Dreamweaver application folder to a folder on your hard disk. To copy the sample files: 1. Create a new folder called local_sites in your user folder on your hard disk. For example, create one of the - Adobe 38028779 | Getting Started Guide - Page 292
from the server: across a local network (the Local/Network option) or using FTP. There are other options in the Access pop-up menu, but this guide doesn't cover them. For information about them, see Using Dreamweaver. 292 Setup for Sample JSP Site NOTE - Adobe 38028779 | Getting Started Guide - Page 293
1. 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 - Adobe 38028779 | Getting Started Guide - Page 294
TIP The URL prefix should always specify a directory, rather than a particular page on the site. Also, be sure to use the same capitalization you used when you created the folder. 4. In the URL Prefix text box, enter the root URL you would enter in a web browser to request a page in your web - Adobe 38028779 | Getting Started Guide - Page 295
NOTE To upload the samples files to the web server: 1. 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. 2. Click the blue Put Files arrow icon in the Files panel toolbar, and confirm that you want to - Adobe 38028779 | Getting Started Guide - Page 296
download it from the Sun website at http:// java.sun.com/j2se/. After downloading the installation file, double-click it to run the installer. Follow the onscreen instructions driver's limitations, see TechNote 17392 on the Macromedia Support Center at www.macromedia.com/go/17392. After installing - Adobe 38028779 | Getting Started Guide - Page 297
Setting up the database (server on remote computer) This section applies only if your web server is running on a remote computer. If your web server is running on the same computer as Dreamweaver, skip to "Creating a database connection" on page 298. Before attempting to connect to the sample - Adobe 38028779 | Getting Started Guide - Page 298
installed, download and install the Microsoft Data Access Components (MDAC) 2.5 and 2.7 packages on the remote computer. You can download MDAC for For instructions, see the following articles on the Microsoft website: ■ If the remote computer runs Windows 2000, see Article 300596 at http://support. - Adobe 38028779 | Getting Started Guide - Page 299
Dreamweaver uses to process dynamic pages (see "Specifying where dynamic pages can be processed" on page 293). ■ Consult Chapter 29, "Troubleshooting Database Connections" in Using Dreamweaver (Help > Using Dreamweaver). 7. Click OK. The new connection appears in the Databases panel. The sample - Adobe 38028779 | Getting Started Guide - Page 300
300 Setup for Sample JSP Site - Adobe 38028779 | Getting Started Guide - Page 301
three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process. This chapter contains the following sections: Setup checklists for PHP developers 302 Configuring your system (PHP - Adobe 38028779 | Getting Started Guide - Page 302
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. Configure your system: 1. Make - Adobe 38028779 | Getting Started Guide - Page 303
your Windows system (PHP) This section provides instructions for two common Windows configurations: one in which Chapter 23, "Setting Up a Web Application" in Using Dreamweaver. The following illustration shows the two configurations described in this section: Local configuration (for Windows users - Adobe 38028779 | Getting Started Guide - Page 304
IIS create this folder during installation. If IIS is not installed, install it now. For instructions, see "Installing a Web Server" on page 231. After installing the web server, install hard disk or on a remote Windows computer.) You can download and install it from the PHP website at www.php.net - Adobe 38028779 | Getting Started Guide - Page 305
downloads.php. 3. Double-click the installer file you downloaded and follow the onscreen installation instructions. 4. After PHP is successfully installed, download (;) at the start of the line tells PHP to ignore the line. 10. Delete the semicolon at the start of the line to enable the extension. - Adobe 38028779 | Getting Started Guide - Page 306
enabling the MySQL extension, see the PHP website at www.php.net/manual/en/ref.mysql.php. For more information on the application server, see the PHP documentation, which you can download from the PHP website at www.php.net/download-docs.php. After installing PHP, you can test the server to make - Adobe 38028779 | Getting Started Guide - Page 307
NOTE 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 > Source in - Adobe 38028779 | Getting Started Guide - Page 308
(in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, double-click Administrative Tools, and then double-click Internet Information Services). b. Expand the "local computer" list, followed by the Web Sites folder, and then the Default Web Site folder. c. Right-click your - Adobe 38028779 | Getting Started Guide - Page 309
Configuring your Macintosh system (PHP) If you're a Macintosh user, you can run PHP pages on your computer using the Apache web server and PHP application server installed with your operating system. Configuring your system consists of making sure the web server and PHP application server are - Adobe 38028779 | Getting Started Guide - Page 310
NOTE 5. 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 - Adobe 38028779 | Getting Started Guide - Page 311
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: 1. Copy the sample files to a folder on your hard disk (see "Copying the sample files" on page 311). 2. Define the - Adobe 38028779 | Getting Started Guide - Page 312
2. 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: - Adobe 38028779 | Getting Started Guide - Page 313
NOTE 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: 1. In the Advanced tab of the Site Definition dialog box, select Remote Info from the Category list. The Remote Info screen appears. 2. In - Adobe 38028779 | Getting Started Guide - Page 314
1. 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 - Adobe 38028779 | Getting Started Guide - Page 315
describes how to create a connection to the sample database. This section assumes you have installed and configured MySQL on your local or remote computer. To download and install the database system, visit the MySQL website at www.mysql.com. Connecting to the sample database (PHP) 315 - Adobe 38028779 | Getting Started Guide - Page 316
starting, make sure MySQL is installed and configured on your local or remote computer. Download the latest version from the MySQL website at http://dev.mysql.com/downloads/. For development purposes, download and install the Windows Essentials version of the MySQL database server. To create the - Adobe 38028779 | Getting Started Guide - Page 317
3. In Windows, enter your username (if any) and password, and then press Enter. The MySQL client's command prompt appears, as follows: mysql> 4. 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 - Adobe 38028779 | Getting Started Guide - Page 318
8. 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 - Adobe 38028779 | Getting Started Guide - Page 319
uses to process dynamic pages (see "Specifying where dynamic pages can be processed (PHP)" on page 313). ■ Consult Chapter 29, "Troubleshooting Database Connections" in Using Dreamweaver (Help > Using Dreamweaver). 8. Click OK. The new connection appears in the Databases panel. The sample - Adobe 38028779 | Getting Started Guide - Page 320
320 Setup for Sample PHP Site - Adobe 38028779 | Getting Started Guide - Page 321
, web. See web applications ASP application servers, installing 272 time, displaying 273 troubleshooting 274 web applications, setting up 269 ASP.NET DataSets 201 languages used with 225 .NET Framework 258 servers, supported 258 web applications, setting up 255 Assets panel 81 assets, adding to - Adobe 38028779 | Getting Started Guide - Page 322
pop-up menu 33 documents displaying in tabs (Macintosh) 40 saving 57, 156 downloading, setting the time 33 drivers for databases 222, 227 dynamic pages about 228 294 uploading to server 214 Flash inserting SWF files 83 playing content in Dreamweaver 85 Flash Video, inserting 86 fonts, changing size in - Adobe 38028779 | Getting Started Guide - Page 323
Internet Information Services) 226 about 231 administrative tool, launching 260 ASP.NET support 258 installing 153 table-based 55-72 links, creating 94 Live Data view 208 troubleshooting 249, 264, 279, 294, 315 local folders defining 52-54, 224 downloading 315 N Netscape Enterprise Server 229 numeric - Adobe 38028779 | Getting Started Guide - Page 324
142 Preview in Browser about 96 changing Preferences 97 Preview in Browser, troubleshooting dynamic pages ASP 279 ASP.NET 264 ColdFusion 249 JSP 294 PHP 214 PWS (Microsoft Personal Web Server) 229 about 231 ASP.NET support 258 Q queries database 222 defined 227 testing 203 R Record Insertion Form - Adobe 38028779 | Getting Started Guide - Page 325
225 server-side scripting languages 225 servers about 234 access options 132 application servers 221 ASP.NET support 258 HTTP 234 IP addresses 235 root folders 247, 262, 277, 292, 313 testing 233 troubleshooting 233 uploading files 133, 249, 279, 294, 315 ASP.NET 264 web servers, defined 229 See - Adobe 38028779 | Getting Started Guide - Page 326
tutorials adding content to pages 73 creating table-based page layout 55 formatting your page with CSS 99 publishing your site 129 typographical conventions 14 U uploading files sample 315 URL Prefix option 248, 264, 279, 294, 314 V variables in CFML 225 VBScript 225 views Code view 140 Live Data
-
1 -
2 -
3 -
4 -
5 -
6 -
7 -
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
-
326
 |
 |
Getting Started with Dreamweaver