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 inspector (Window > Properties), click once inside the Background Color text box. The text box is located directly next to the Background Color (Bg) color box.
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 select the cell. 7. In the Property inspector, click once inside the Background Color text box, enter the hexadecimal value #F7EEDF, and press Enter (Windows) or Return (Macintosh).
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. A B OU T. . . Picking colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). A web-safe color is one that appears the same in Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when using 256-color mode.
3. Click OK. Your page background turns to 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 various insertion features that Dreamweaver provides.
CHAPTER 5 Tutorial: Adding Content to Pages 5 This tutorial shows you how to add content to web pages in Macromedia Dreamweaver 8. You can add many different kinds of content to web pages, including graphics, Macromedia Flash files, Macromedia Flash Video files, and text, to name a few. After you’ve added content to your pages, you can preview your work in a browser so that you can see what it will look like on the web. In this tutorial, you will complete the following tasks: Locate your files . . . . .
The finished version of the tutorial, table_layout.html, is located in the completed_files/dreamweaver folder, within the cafe_townsend folder that you copied to your hard disk in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.” N OT E 74 If you begin this tutorial with the completed table_layout.html file, instead of the index.html file from Chapter 4, “Tutorial: Creating a Table-based Page Layout,” some steps and illustrations in the tutorial will not match what you see on your screen.
Review your task In this tutorial you’ll add assets to the home page for Cafe Townsend, a fictional restaurant. You’ll learn how to add images, a Macromedia Flash file, a Macromedia Flash Video file, and text. When you’re finished, the page will look like this: You’ll notice that the text on the page is not yet formatted. That’s because you’ll learn how to format the text by using Cascading Style Sheets (CSS) in the next tutorial.
You can find the required assets for this tutorial in the cafe_townsend root folder that you copied to your hard drive in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.” If you didn’t complete that tutorial, you must do so before you proceed. The tutorial lets you know exactly where to find the assets as you go along. Insert images After you create your page layout, you are ready to add assets to the page. You’ll start by adding images.
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 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 cafe_townsend folder, select the body_main_header.gif file, and click OK. NO TE If the Image Tag Accessibility Attributes dialog box appears, click OK. A long colored graphic appears in the table row.
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. NO TE If the Image Tag Accessibility Attributes dialog box appears, click OK. 3. Click once outside the table and save the page (File > Save).
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 aligns the contents of the table cell in the middle of the cell, and pushes the cell’s contents to the top of the cell.
A BO UT . .. The Assets panel You can use the Assets panel to view and manage assets in your current site. The Assets panel displays assets for the site associated with the active document in the Document window. You must define a local site before you can view assets in the Assets panel. For more information, see Chapter 3, “Tutorial: Setting Up Your Site and Project Files,” or Using Dreamweaver.
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. NO T E If the Image Tag Accessibility Attributes dialog box appears, click OK. The street_sign.jpg graphic appears on the page. 82 8. Click once outside the table to deselect the image. 9. Save the page.
Insert and play a Flash file Next, you’ll insert a Flash file that plays a photographic slide show of Cafe Townsend’s featured food items. The Flash file you’ll insert is a flexible messaging area—or FMA—file. An FMA is a common type of Flash application that displays an informational message to the audience. The message can change based on the needs of the business.
A BO UT . .. About Flash files When you build assets in Macromedia Flash, you work in FLA files, the default file type for the Flash application. FLA files are designated by a .fla extension. For example, if you are working on an animated logo for a website, the filename of the Flash file might be animated_logo.fla. 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.
5. In the Property inspector (Window > Properties), click Play. N OT E If you cannot see the Flash Play button, click the expander arrow in the lower-right corner of the Property inspector. Dreamweaver plays the Flash file in the Document window, showing you what site visitors will see when they view the page in a browser. 6. In the Property inspector, click Stop to stop playing the Flash file. 7. Save the page.
Insert Flash Video Next you’ll insert a Flash Video file, using the asset provided. 1. With the index.html page open in the Dreamweaver Document window, click once above the graphic that you placed in the center column of the three-columned table. In the previous section, you created some space before you inserted the graphic—this is where you should click. 2. Select Insert > Media > Flash Video. 3. In the Insert Flash Video dialog box, select Progressive Download Video from the Video type pop-up menu.
4. In the URL text box, specify a relative path to the cafe_townsend_home.flv file by clicking Browse, navigating to the cafe_townsend_home.flv file (located in cafe_townsend root folder of your site), and selecting the FLV file. 5. Select Halo Skin 2 from the Skin 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.
6. In the Width and Height text boxes, do the following: ■ ■ TIP In the Height text box, type 135 and press Enter (Windows) or Return (Macintosh). The value in the Width and Height text boxes specifies the width and height in pixels of the FLV 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, the picture quality of the video usually decreases.
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 to see the new files.) These files are stored in the same directory as the HTML file to which you’re adding Flash Video content (in this case, the cafe_townsend root folder).
Insert body text 1. In the Files panel, locate the sample_text.txt file (in the cafe_townsend root folder) and double-click the file’s icon to open it in Dreamweaver. You’ll notice that this window is in Code view, and cannot be switched to Design view (the view you’ve been working in until now) because the file is not an HTML file. 2. In the sample_text.txt Document window, press Control+A (Windows) or Command+A (Macintosh) to select all of the text, and then select Edit > Copy to copy the text. 3.
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 still inside the table cell where you just pasted the text. If it isn’t, click inside the table cell. 7. In the Property inspector (Window > Properties), select Top from the Vert pop-up menu.
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. 92 1. Click once in the first column of the three-columned table (the column that is colored reddish-brown). 2. Type the word Cuisine. 3. Press the Spacebar and type Chef Ipsum.
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 fixed width of the table cell determines how many words fit on a line. 5. With the insertion point still in the first cell of the three-columned table, click the tag in the tag selector.
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. N OT E 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. Create links A link is a reference, inserted in a web page, that points to another document. You can turn almost any kind of asset into a link, but the most common kind of link is a text link.
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 Link text box. 3. In the Select File dialog box, browse to the menu.html file (which is in the same folder as the index.html file), and click OK (Windows) or Choose (Macintosh). 4.
5. Repeat the previous steps to link each word or set of words that you typed for the navigation. You want to create six more links: one for Chef Ipsum, Articles, Special Events, Location, Menu, and Contact Us. Link each word or set of words to the menu.html page, and be careful to avoid the space before and after the words or set of words when you create your links. This is only a set of dummy links; in a real-world site, you would link each word in the navigation to its own distinct page.
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. N O TE Dreamweaver automatically detects your primary browser and uses that for previewing. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and select File > Preview in Browser > Edit Browser List.
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.
CHAPTER 6 Tutorial: Formatting Your Page with CSS 6 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 this tutorial, you will complete the following tasks: Locate your files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Review your task . . . . . . . . . . . . . . . . .
Locate your files In this tutorial, you’ll begin with the Cafe Townsend index page to which you added content in Chapter 5, “Tutorial: Adding Content to Pages.” If you did not complete that tutorial, you can either complete it before proceeding, or you can open the finished version of the tutorial and begin with that. The finished version of the tutorial, add_content.
Review your task In this tutorial, you’ll use Cascading Style Sheets (CSS) to format the text on the home page for Cafe Townsend, a fictional restaurant. You’ll create different kinds of CSS rules to format the body text. You’ll also format the link text on the left side of the page to create a navigation bar.
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 to format a page, you separate content from presentation.
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, ultimately creating the design you want.
Create a new style sheet First, you’ll create an external style sheet that contains a CSS rule that defines a style for paragraph text. When you create styles in an external style sheet, you can control the appearance of multiple web pages from a central location, instead of setting styles on each individual web page. 1. Select File > New. 2. In the New Document dialog box, select Basic page in the Category column, select CSS in the Basic Page column, and click Create.
A BO UT . .. More about CSS rules CSS rules can reside in the following locations: External CSS style sheets are collections of CSS rules stored in a separate, external .css file (not an HTML file). The .css file is linked to one or more pages in a website by using a link in the head section of a document. Internal (or embedded) CSS style sheets are collections of CSS rules that are included in a style tag in the head portion of an HTML document.
Don’t forget to include a semicolon at the end of each line, after the property values. When you’re finished, the code should look like following example: TI P 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 style sheet. Next you’ll attach the style sheet to the index.html page.
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 paragraph is formatted with the paragraph tag. If the Format pop-up menu in the Property inspector says “Paragraph,” the paragraph is formatted with the paragraph tag.
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 Document window is formatted according to the CSS rule in the external style sheet.
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 index.html page is open in the Document window. 2. In the CSS Styles panel (Window > CSS Styles), click All at the top of the panel and examine your CSS rules.
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 cafe_townsend.css category. 6. Click the p rule. All of the properties and values that you defined in the external style sheet for the p rule appear in the Properties pane below. 7.
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” on page 102. 1. In the CSS Styles panel, click New CSS Rule in the lower-right corner of the panel. 2. In the New CSS Rule dialog box, select Class from the Selector Type options.
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: ■ ■ ■ In the Font text box, enter Verdana, sans-serif. In the Size text box, enter 11 and select pixels from the pop-up menu immediately to the right.
Click OK. 8. Click All at the top of the CSS Styles panel. 9. Click the plus (+) button next to the cafe_townsend.css category if the category isn’t already expanded. You’ll see that Dreamweaver added the .bold class style to the list of rules defined in the external style sheet. If you click the .bold rule in the All Rules pane, the rule’s properties appear in the Properties pane. The new rule also appears in the Style pop-up menu in the Property inspector. Apply a class style to text T IP 7.
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 create a navigation bar, but with CSS, all you need is linked text and some formatting.
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 something like the following example: 3. Save the cafe_townsend.css file. Next you’ll use the CSS Styles panel to add properties to the rule. 4. Open the index.html file if it isn’t already open.
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: ■ ■ 116 Enter Verdana, sans-serif in the Font text box. Select 16 from the Size pop-up menu, and select pixels from the pop-up menu immediately to the right of the Size pop-up menu. ■ Select Normal from the Style pop-up menu. ■ Select None from the Decoration list.
Click OK. Now you’ll use the CSS Styles panel to add a few more properties to the .navigation rule. TIP 7. 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.
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 already set). 9. Click in the column to the right of the background-color property. To see the full wording of a property, hold the mouse over the property.
10. Enter #993300 as the hexadecimal value and press Enter (Windows) or Return (Macintosh). Locate the display property (you might need to scroll down), click once in the column to the right, and select block from the pop-up menu. 12. Locate the padding property, click once in the column to the right, enter 8px as the value, and press Enter (Windows) or Return (Macintosh). 13. TI P 11. To see how your work affects the external style sheet, keep the cafe_townsend.
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 created a rule to format the navigation bar text. Next you’ll apply the rule to the selected links.
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 inspector (Window > Properties), select navigation from the Style pop-up menu. In the Document window, the appearance of the Cuisine text changes entirely.
4. Repeat step 1 through 3 for each of the individual links in the navigation bar. You must assign a navigation class style to each tag or link, so it’s important that you use the tag selector to select each link individually, and then assign the class styles one at a time. 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 links is not itself linked.
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. Select the entire .navigation rule. 3. Copy the text (Edit > Copy). A B OU T .. .
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 .
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 see the new rollover effect. (Optional) Center the contents of the page Lastly, you’ll use the tag selector to select all of the HTML in the document, and center the document’s contents.
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.
2. In the Property inspector (Window > Properties), click the Align Center button. Dreamweaver inserts CSS tags that center the body content of the page. In Design view, a dotted line borders the area that the tags center. 3. Save the page. Your page is now finished. The last task of building your 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.
Tutorial: Formatting Your Page with CSS
CHAPTER 7 Tutorial: Publishing Your Site 7 This tutorial shows you how to set up a remote site with Macromedia Dreamweaver 8 and publish your web pages. A remote site is usually a place on a remote computer, running a web server, that holds copies of your local files. Users access the remote site running on the web server when they view your pages in a browser. In this tutorial, you will complete the following tasks: Learn about remote sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 proceed. For more information, see “Tutorial: Setting Up Your Site and Project Files” on page 49.
A B O UT . .. Creating a remote folder with Dreamweaver If Dreamweaver is your only means of access to the remote server, you won’t be able to create an empty folder on the remote server until you’ve completed the remote settings in Dreamweaver and established a connection. If that’s the case, you can either define your host directory as your remote folder, or you can create a remote folder after you’ve established a connection with the server.
7. Select an Access option. The most common methods for connecting to a server on the Internet are FTP and SFTP; the most common method for connecting to a server on your intranet, or to your local computer if you’re using that as a web server, is Local/Network. If you aren’t sure what to select, ask the server’s system administrator. For more information, click Help in the dialog box. 8. If you selected FTP, enter the following options: ■ ■ Enter the host name of the server (such as ftp.macromedia.
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), select the site’s local root folder (cafe_townsend). 2. Click the blue Put Files arrow icon in the Files panel toolbar . 3. When Dreamweaver asks if you want to put the entire site, click OK.
Troubleshoot the remote folder setup (optional) A web server can be configured in many ways. The following list provides information about some common issues you may encounter in setting up a remote folder, and how to resolve them: ■ The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access. If you encounter problems with FTP access, ask your local system administrator for help.
■ Many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server’s disk with another folder elsewhere. For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely.
Tutorial: Publishing Your Site
3 PART 3 Advanced Tutorials Part Three of this book contains tutorials that introduce you to more advanced features in Dreamweaver. You do not need previous knowledge of HTML or other languages to complete these tutorials, but be aware that the tutorials in this part are more complex than the tutorials in the previous part. This part contains the following sections: Tutorial: Working with Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Tutorial: Creating a CSS-based Page Layout . .
CHAPTER 8 Tutorial: Working with Code 8 As you add text, images, and other content to a web page, Dreamweaver 8 generates HTML code. This tutorial explains how to use Code view to display a document’s underlying code, and how to add and edit code manually. If you’ve already set up your site and completed the previous tutorials, you can continue working in the same index.html file. If you haven’t completed the previous tutorials, you can still complete this tutorial.
Look at the code Dreamweaver lets you view your page in either of two ways: Design view (where the document looks much like it would look in a browser), or Code view (where you can see the underlying HTML code). You can also use a split view that shows both Code and Design views simultaneously. 1. NO TE If you did not complete the index.html file by doing the previous tutorials, see the introduction of this tutorial for how to proceed. 2. N OT E 140 Tutorial: Working with Code Make sure the index.
The window splits, showing both the Design view and the underlying HTML code. Refresh button You can edit the code in Code view. Changes you make to the code don’t appear in Design view until you either click Refresh in the Document toolbar, or click anywhere in Design view. 3. (Optional) To show Design view only, click Design view. 4. (Optional) To show Code view only, click Code view. When you’re working on your own pages, you can use whichever view is most comfortable for you.
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. NO T E Macintosh users cannot change the workspace. To switch to the coding workspace: ■ Select Window > Workspace Layout > Coder. Add a tag with the Tag Chooser Next, you’ll use the Tag Chooser to wrap a div tag around one of the images on the page.
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, select View > Code View Options > Word Wrap to enable word wrap. 5. Right-click (Windows) or Control-click (Macintosh) the selected text, and then select Insert Tag from the pop-up menu.
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. NO TE You can also select the HTML Tags category, and then select the div tag in the right pane, without first expanding Formatting and Layout. 7. Click Insert. A tag editor for the div tag appears. 8.
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 11. Close to close the Tag Chooser. Save your page. Edit a tag Next, you’ll use the Tag inspector to quickly make changes to a tag’s attributes. The Tag inspector displays the attributes of the tag that’s selected in the Document window. 1. Open the index.html page in Code view, if it’s not already open. 2.
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 Townsend; then press Enter (Windows) or Return (Macintosh). Dreamweaver displays the new value in the Tag inspector and changes the code in the Document window. 8. 146 Tutorial: Working with Code Save your page.
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 value) in an img tag. 3. Right-click (Windows) or Control-click (Macintosh) the selected text, and then select Reference from the pop-up menu.
4. For information about another tag or attribute, select the tag or attribute from the appropriate pop-up menu in the Reference panel. Add an image with code hints To add code to the page manually, click in Code view and start typing. You can use the code hints feature to speed up your work. In this section, you’ll use code hints to add the street sign image to the Cafe Townsend index page. 1. Open the index.html page, if it’s not already open. 2. In Design view, select the street_sign.
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 them in as follows: Place the insertion point between the opening tag and the closing tag. 4.
5. With the insertion point between the opening tag and the closing tag, type an opening angle bracket (<). A list of tags appears at the insertion point. N OT E TIP To quickly scroll to a tag, start to type the tag name. You can set the length of the delay before the list appears by selecting Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh), and then selecting Code Hints from the category list on the left.
10. In the Select File dialog box, navigate to the street_sign.jpg file (it’s in the images folder in the cafe_townsend root folder), and click OK (Windows) or Choose (Macintosh). The URL of the image file is inserted as the value of the src attribute, and the insertion point appears after the closing quotation mark. 11. Press the Spacebar, select the alt attribute from the hints menu, and press Enter (Windows) or Return (Macintosh). 12.
Print your code You can print your code to edit it offline, archive it, or distribute it. To print code: 152 Tutorial: Working with 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).
CHAPTER 9 Tutorial: Creating a CSS-based Page Layout 9 In Chapter 4, “Tutorial: Creating a Table-based Page Layout,” you learned how to use Dreamweaver’s table design features to create a page layout. In this tutorial, you’ll learn how to use Cascading Style Sheets (CSS) to create a similar layout.
A CSS-based layout—that is, a layout that uses block elements instead of table rows and columns—contains much less code than a table-based layout of the same nature. CSS-based layouts generally use tags instead of tags to create CSS layout blocks used for layout. You can position these CSS layout blocks anywhere on the page, and assign properties to them such as borders, margins, background colors, and so on.
A comp consists of any number of page elements that the client has requested for their website. For example, the client might say, “I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips.” Based on that discussion, the designer begins planning the layout of the site, and makes sketches of sample pages that fulfill the client’s requirements.
You’ll notice that the graphic designer provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. In the next sections, you’ll use Dreamweaver to lay out this design. You can also open the original comp file if you want to see it on the computer screen. You can find the comp, homepage-mockup.jpg, in the fireworks_assets folder of the cafe_townsend folder that you copied to your hard drive in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.
6. In the Document Title text box at the top of your new document, type Cafe Townsend. This is the title of your page (different from the filename). Your site visitors will see this title in the browser window title bar when they view the page in a web browser. 7. Select File > Save to save your 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.
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 the following in the Property inspector (Window > Properties): ■ Click in the Layer ID text box and rename the layer banner_graphic. ■ In the Width (W) text box, enter 700px.
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 (banner_graphic) as a reference point for positioning the other layers. You’ll also use the CSS Layer Backgrounds feature to help you position and distinguish between layers. 1.
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 111px. ■ Press Enter (Windows) or Return (Macintosh) to apply your last entry. Dreamweaver sizes and positions the new flash_fma layer. . The flash_fma layer is 700 pixels wide by 166 pixels high.
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 you see where layers and other kinds of block elements appear on the page. You can optionally disable CSS Layout Backgrounds again by selecting View > Visual Aids and deselecting CSS Layout Backgrounds.
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.
7. After you have three more layers on the page, use the Property inspector to do the following: ■ ■ ■ Press Enter (Windows) or Return (Macintosh) to apply your last entry. Select the second layer, name it center_content, and size it to 700 pixels wide by 350 pixels high. Press Enter (Windows) or Return (Macintosh) to apply your last entry. NO TE When you resize the center_content layer to 350 pixels high, it will overlap the remaining layer on the page.
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 pixel at a time by pressing the arrow keys on your keyboard. Try using the Property inspector to align the header layer 20 pixels from the left margin of the page.
isn’t already) by selecting View > Visual Aids and deselecting CSS Layout Backgrounds. Add layers inside a layer T IP 10. After your layers are in position, disable CSS Layout Backgrounds (if it You can also use the Visual Aids button on the Document toolbar to enable or disable CSS Layout Backgrounds. The last layers you’ll draw will be inside the large center_content layer.
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. ■ 5. Press Enter (Windows) or Return (Macintosh) to apply your last entry.
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 the Layer ID text box and rename the layer flash_video. ■ In the Width (W) text box, enter 230px. ■ In the Height (H) text box, enter 350px.
9.
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 layer’s selection handle to make sure the layer is selected. 12. With the new layer selected, do the following in the Property inspector: ■ Click in the Layer ID text box and rename the layer text. ■ In the Width (W) text box, enter 330px. ■ In the Height (H) text box, enter 350px.
13. Drag the text layer or use the arrow keys on your keyboard to position the layer as the following example shows: N OT E 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.
Add color to the page 1. Select the navigation layer by clicking its name in the Layers panel (Window > Layers). 2. In the Property inspector, click once inside the Background Color text box. TI P 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. You can change the width of the Name column in the Layers panel by dragging the right border of the column title to the left or right.
7. Once you’ve set the background colors for all three layers, click once to the right of all of your layers to make sure nothing is selected. Next you’ll change the background color for the entire page by modifying page properties. The Page Properties dialog box lets you set a number of page properties, including the size and color of page fonts, the colors of visited links, page margins, and much more. 8. Select Modify > Page Properties. 9.
CHAPTER 10 Tutorial: Displaying XML Data 10 This tutorial shows you how to create a web page that displays XML data. Displaying XML data involves retrieving information stored in a local or remote XML file and rendering that information on the page. The key benefit to using XML data on web pages is separating content from presentation. That is, the content of your page (the data) is kept completely separate from the page’s presentation (the layout, text styling, and so forth).
Locate your files The files you’ll need to complete this tutorial are located in the xml folder, inside the cafe_townsend root folder that you copied to your computer in Chapter 3, “Tutorial: Setting Up Your Site and Project Files.” If you did not complete that tutorial, you must do so before proceeding. The xml folder contains the main file you’ll be working with in this tutorial (xml_menu.html), the CSS style sheet for the menu page (xml_menu.css), a file containing your XML data (specials.
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 each row displays the item’s price. All of the information on the page is hand-coded (i.e., it is not coming from a dynamic data source), and the text is formatted with an external style sheet.
In this tutorial you’ll convert the existing specials page (an HTML page) to an XSLT page so that you can display XML data on the page. You’ll also apply styles to the XML data so that the appearance of the data is in keeping with the rest of the page. If you’re comfortable working with XML, XSLT, and client-side transformations, you can skip to “Convert an HTML page to an XSLT page” on page 179. If you are new to any of these concepts, read the next sections.
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 Cascading Style Sheets (CSS) let you format HTML, XSL lets you format XML data.
This tutorial takes you through the steps of creating an XSLT page and performing a client-side transformation (mainly because the client-side workflow is much easier to execute, and doesn’t require the use of an application server.) For more information about other ways to deploy XSLT pages, see “Learn about other deployment options” on page 194.
For additional resources, including tutorials that teach you more about server-side transformations, see www.macromedia.com/go/dw_xsl. Convert an HTML page to an XSLT page You’ll begin by converting the existing specials page for Cafe Townsend— an HTML page—into an XSLT page that can display XML data. 1. In the Files panel (Window > Files), locate the xml_menu.html, and double-click the file to open it. The xml_menu.html file is located in the xml folder, inside the cafe_townsend root folder.
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. N OT E You can also click the Source link at the upper-right corner of the Bindings panel to add an XML data source. 2. Select Attach a Local File (it should be selected by default), click the Browse button, browse to the specials.xml file on your computer (it’s also located in the cafe_townsend/xml folder), and click OK.
For a guide to the symbols in the schema, see “Creating XSLT pages” in Using Dreamweaver (Help > Using Dreamweaver). Alter the XSLT page layout Now that you’re going to use XML data on the page instead of static text, you won’t need all the table rows. Next you’ll delete all but one of the table rows, and use the one remaining row to display the data. 1. Click once in the last table row (the New York Cheesecake row) and click the rightmost tag in the tag selector to select the row. 2. Press Delete.
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. 182 Tutorial: Displaying XML Data 6. With the text still selected, press Delete. 7. Save your work (File > Save).
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 XPath (XML Path language) syntax to describe the hierarchical structure of the XML schema. 2. Press the Right Arrow key on your keyboard to move the insertion point to the right of the XML data placeholder. 3.
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 later on, the data will populate the table accordingly. 5. Lastly, select the price (7) in the right table cell. 6. In the Bindings panel, double-click the price element.
Apply styles to the XML data Now you’ll apply styles to the item and description XML data placeholders. When you apply styles to an XML data placeholder, the text of the placeholder itself displays the styles. Later, when you preview the page in a browser, the resulting XML data will also display the assigned styles. 1. Click once in the left table cell, and click the rightmost tag in the tag selector to select the cell.
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 Dreamweaver). Create a dynamic link Next you’ll create a dynamic link so that the item name on the specials menu links to a page containing a picture of the item. 186 Tutorial: Displaying XML Data 1.
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 element.
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. NO TE 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 the picture of the corresponding menu item. This is in fact the path to the HTML file, because the HTML pages containing the pictures are in the same xml directory as the XSLT page you’re working on.
3. Select Insert > XSLT Objects > Repeat Region.
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 preview your work in a browser, the gray outline will disappear and the selection will expand to display the specified repeating elements in the XML file.
Attach the XSLT page to the XML page Once your XSLT page is finished, you must attach it to the XML page. When you use Dreamweaver to attach the page, Dreamweaver inserts a link to the XSLT page at the top of the XML page. The XML page is the page to which your site visitors will browse when viewing the page online. This is because they must browse to the “content” page containing the data (the XML file), instead of the page that contains the styles (the XSLT page).
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. 192 Tutorial: Displaying XML Data Save the specials.xml page.
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 your server. For more information, see “About client-side XSL transformations” in Using Dreamweaver (Help > Using Dreamweaver).
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 the page in exactly the same way. The more common approach to performing server-side transformations, however, is to use XSLT fragments.
■ If appropriate, add a Repeat Region XSLT object to the table or table row that contains the XML data placeholder(s). See “Displaying repeating XML elements” in Using Dreamweaver. ■ Do one of the following: ■ ■ Use the XSL Transformation server behavior to insert a reference to the XSLT fragment in your dynamic page. See “Inserting XSLT fragments in dynamic pages” in Using Dreamweaver.
Tutorial: Displaying XML Data
CHAPTER 11 Tutorial: Developing a Web Application 11 In this tutorial, you’ll learn how to use Macromedia Dreamweaver 8 to quickly begin developing dynamic database-driven web applications, allowing you to present information retrieved from a database on your web pages. You’ll display data on web pages for the Cafe Townsend site, using a sample database provided with Dreamweaver. You’ll also use Dreamweaver to create a record-insertion form to let visitors leave comments.
Before you begin You must set up your Dreamweaver work environment for application development before you can complete this tutorial. For setup information, see the appropriate setup chapter for your application server in the following list. If you’re not sure which application server you use, ask your system administrator. ■ Appendix C, “Setup for Sample ColdFusion Site,” on page 237 ■ Appendix D, “Setup for Sample ASP.
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
Open a document to work in A good starting point for developing a database application is to create a page that lists records stored in the database. In the application you’re building in this tutorial, you’ll create a dynamic web page that lists information drawn from the customer comments table of the database. Later, you’ll create another dynamic web page that lets a customer insert comments or questions directly into the database.
Define a recordset Now you’ll create a recordset to select the data you want to display. A recordset is a set of information extracted from a database by a database query. (In ASP.NET, a recordset is known as a DataSet.) A database query is a way to request data from a database by using specified search criteria, usually in a language called SQL. You then use the information extracted as a source of content for your dynamic pages.
N O TE 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 updates with data from the database. 5. If a user name and password are associated with the data source or connection, enter them.
9. In the first Sort pop-up menu, select LAST_NAME, and in the second pop-up menu, select Ascending. This step specifies that the retrieved records are listed in alphabetical order by customer last name. 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 the Test SQL Statement window. In this case, you selected all the data in the table.
11. Click OK to close the Test SQL Statement window. 12. Click OK to close the Recordset or DataSet dialog box and create a recordset or DataSet. The recordset appears in the Bindings panel. The Document window doesn’t change. TI P If you don’t see all of the recordset fields in the Bindings panel, click Plus (+) (Windows) or click the expander arrow (Macintosh) next to Recordset (rs_Comment) to expand the recordset’s structure..
3. In the dialog box, set the following options: ■ In Rows, enter 2. ■ In Columns, enter 4. ■ Leave Table Width set to 100 percent. ■ Leave Border Thickness set to 1. ■ In Cell Padding enter 2. ■ In Cell Spacing, enter 2. ■ In the Header section, select the Top option. In the Summary text box, provide a textual description of the table for the benefit of visitors who use screen readers, as follows: This table lists all of the comments that visitors to this site have entered into the database.
5. 6. In the top row of the table add labels for the table entries: ■ In the first cell of the table, enter First Name. ■ In the next cell, enter Last Name. ■ In the next cell, enter E-mail. ■ In the last cell, enter Comments. Save your page. Add dynamic fields to the table You’re now ready to add the recordset fields to the table. 1. Open the Bindings panel, if it isn’t already open, by doing one of the following. ■ ■ 2.
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, select the bottom table row by doing one of the following: ■ ■ 2. Click in one of the cells; in the tag selector, click the last tag in the list.
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. ■ Select View > Live Data. The page updates to show data extracted from the database.
Add a Record Insertion Form application object You can use a Record Insertion Form application object to create a form that allows visitors to enter data into a database. The application object lets you select which fields to include in the form, label the fields, and select the types of form objects to insert. When a user enters data in the form fields and clicks the submit button, a new record is inserted in a database.
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 Form dialog box appears. 4. In the Data Source (ColdFusion) or Connection pop-up menu, select connTownsend. 5. If a user name and password are associated with the data source or connection, enter them.
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. 2. 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 (-). ■ Select TELEPHONE and click Minus (-). ■ Select SUBMIT_DATE and click Minus (-). ■ Select ANSWERED and click Minus (-). If you are creating a page for ASP.
6. Leave the Default Value field empty. For some web applications, you would use this field to set initial text for the field in order to let the user know what kind of information to provide. In this case, the field label “First Name” makes clear that the visitor is supposed to enter their first name. The FIRST_NAME entry should look similar to the following example when you are done: 7.
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.
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) the files named “view” and “send,” and then click the blue Put Files arrow icon to upload the files to your server. 2. If Dreamweaver asks whether you want to copy dependent files to the server, select Yes.
4 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 Sample ASP.NET Site . . . . . . . .
APPENDIX A Understanding Web Applications A A web application is a collection of web pages that interact with visitors, with each other, and with various resources on a web server, including databases. Before you start building your own web applications, you should be familiar with the concepts discussed in this chapter. The chapter contains the following topics: About web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 How a web application works . . . . . . . . .
Common uses for web applications Web applications have many uses for both site visitors and developers, including the following: ■ Let visitors find information quickly and easily on a content-rich website. This kind of web application gives visitors the ability to search, organize, and navigate content as they see fit. Examples include company intranets, Microsoft MSDN (www.msdn.microsoft.com), and Amazon.com (www.amazon.com). ■ Collect, save, and analyze data provided by site visitors.
Janet proposes an intranet-based web application that performs the following tasks: ■ Lets employees enter their mileage on a web page using a simple HTML form ■ Stores the employees’ mileage in a database ■ Calculates fitness points based on the mileage data ■ Lets employees track their monthly progress ■ Gives Chris one-click access to point totals at the end of each month Janet gets the application up and running before lunchtime using Dreamweaver, which has the tools she needs to build this ki
The final content of a static web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example: Trio Motors Information Page About Trio Motors Trio Motors is a leading automobile manufacturer. Every line of the page’s HTML code is written by the designer before the page is placed on the server.
In the case of web applications, certain lines of code are undetermined when the visitor requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section. Processing dynamic pages When a web server receives a request for a static web page, the server sends the page directly to the requesting browser.
Accessing a database An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information, see Appendix A, “Beginner’s Guide to Databases” 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 language called SQL (Structured Query Language).
Here’s an illustration of the process of querying a database and returning data to the browser: Step 1 - Web browser requests dynamic page. Web browser Request Response Step 9 - Web server sends finished page to requesting browser WEB SERVER Step 2 - Web server finds page and passes it to application server. Hi Step 3 - Application server scans page for instructions.
If you plan to build small low-cost applications, you can use a file-based database, such as one created in Microsoft Access. If you plan to build robust, business-critical applications, you can use a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or MySQL. If your database is located on a system other than your web server, make sure you have a fast connection between the two systems so that your web application can operate quickly and efficiently.
The embedded instructions on this page perform the following actions: 1. Create a variable called department and assign the string "Sales" to it. 2. Insert the variable’s value, "Sales", in the HTML code. The application server returns the following page to the web server: Trio Motors Information Page About Trio Motors Trio Motors is a leading automobile manufacturer. Be sure to visit our Sales page.
Choosing a server technology You can use Dreamweaver to build web applications using any of five server technologies: ColdFusion, ASP.NET, ASP, JSP, or PHP. Each of these technologies corresponds to a document type in Dreamweaver. Choosing one for your web application depends on several factors, including your level of comfort with various scripting languages and the application server you plan to use.
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 a web server process web pages containing server-side scripts or tags.
A dynamic page is a web page customized by an application server before the page is sent to a browser. For more information, see “How a web application works” on page 219. A recordset is a set of data extracted from one or more tables in a database, as in the following example: Number LastName FirstName Position Goals Database table LastName FirstName Position Recordset table A relational database is a database containing more than one table, with the tables sharing data.
The Dreamweaver development environment supports the following server technologies: ■ Macromedia ColdFusion ■ Microsoft ASP.NET ■ Microsoft Active Server Pages (ASP) ■ Sun Java Server Pages (JSP) ■ PHP: Hypertext Preprocessor (PHP) You can also use the Dreamweaver coding environment to develop pages for any other server technology not listed. A static page is a web page that is not modified by an application server before the page is sent to a browser.
Understanding Web Applications
APPENDIX B Installing a Web Server B To develop and test dynamic web pages, you need a functioning web server. This chapter describes how most Windows users can install and use a Microsoft web server on their local computer. If you’re a Windows user and you want to develop ColdFusion sites, you can use the web server included in the developer edition of the Macromedia ColdFusion MX 7 application server, which you can install and use for free.
If you’re a Windows user and want to develop ColdFusion applications, you can instead use the web server installed with the developer edition of the ColdFusion MX 7. For more information, see Appendix C, “Setup for Sample ColdFusion Site,” on page 237. IIS may already be installed on your computer. Check your folder structure to see if it contains a C:\Inetpub or D:\Inetpub folder. IIS creates this folder during installation. If the folder does not exist, install IIS.
Testing IIS To test the web server, create a simple HTML page called myTestFile.html and save it in the Inetpub\wwwroot folder on the computer where the web server is running. The HTML page can consist of a single line, such as: My web server is working. Next, open the test page in a web browser with an HTTP request. If IIS is running on your local computer, enter the following URL in your web browser: http://localhost/myTestFile.
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 NO TE By default the Apache server runs on port 80. If the browser displays your page, the web server is running normally. If the browser fails to display the page, make sure the web server is started by opening System Preferences and looking at the Sharing preference panel. The Personal Web Sharing option should be enabled.
You can also open any web page stored in any subfolder of the root folder by specifying the subfolder in the URL. For example, suppose the soleil.html file is stored in a subfolder called gamelan, as follows: C:\Inetpub\wwwroot\gamelan\soleil.html You can open this page by entering the following URL in a browser running on your computer: http://mer_noire/gamelan/soleil.html When the web server is running on your computer, you can replace the server name with localhost.
Installing a Web Server
APPENDIX C Setup for Sample ColdFusion Site C Macromedia Dreamweaver 8 comes with sample ColdFusion pages to let you build a small web application. This chapter describes how to set up the sample application. Setting up a web application is a three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database. This setup guide follows this three-step process.
Define a Dreamweaver site: 1. Copy the sample files to a folder on your hard disk. 2. Define the folder as a Dreamweaver local folder. 3. Define a web server folder as a Dreamweaver remote folder. 4. Specify a folder to process dynamic pages. 5. Upload the sample files to the web server. Connect to the database: 1. If you’re using a remote computer as a server, copy the sample database to the remote computer. 2. Create the connection in Dreamweaver.
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 MAC or WINDOWS PC Dreamweaver ColdFusion Server Website root folder in c:\Inetpub\wwwroot\ Network or ftp access WINDOWS SERVER ColdFusion Server Website root folder in c:\Inetpub\wwwroot\ To configure your system: 1. Install the ColdFusion application server. 2. Create a root folder.
Installing ColdFusion MX 7 To process dynamic web pages, you need a web server and an application server. ColdFusion MX 7 provides both. A web server is software that serves web pages in response to requests from web browsers. An application server is software that helps a web server process web pages that contain server-side scripts or tags. When such a page is requested by a browser, the web server hands the page off to the application server for processing before sending the page to the browser.
To install ColdFusion MX 7: 1. If applicable, log in to your Windows system using 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 the Installer Configuration screen, select the Server Configuration option.
■ ■ 242 Setup for Sample ColdFusion Site 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.
■ 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. Creating a root folder After the server software is installed, create a root folder for your web application on the system running ColdFusion, and make sure the folder has the necessary permissions.
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. Defining a Dreamweaver site (ColdFusion) After you configure 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.
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 following folders: ■ ■ C:\Documents and Settings\your_user_name\My Documents\local_sites (Windows) /Users/your_user_name/Documents/local_sites (Macintosh).
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 select Site. The Site Definition dialog box appears. 2. If the Basic tab is showing, click the Advanced tab. 3. In the Site Name text box, enter Cafe Townsend ColdFusion.
Defining a remote folder After you define a local folder, define a web server folder as a Dreamweaver remote folder. To define the Dreamweaver remote folder: 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 the Access pop-up menu, choose how you want to move your files to and from the server: across a local network (the Local/Network option), or by using FTP.
Specifying where to process dynamic pages After you define the Dreamweaver remote folder, specify a folder to process dynamic pages. Dreamweaver uses this folder to display dynamic pages and connect to databases while you’re developing your application. To specify the folder to process dynamic pages: 1. In the advanced Site Definition dialog box, click Testing Server in the Category list. The Testing Server screen appears.
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/ NO T E The ColdFusion web server runs on port 8500 by default. Click OK to define the site and dismiss the Site Definition dialog box, and then click Done to dismiss the Manage Sites dialog box. After you specify a folder to process dynamic pages, upload the sample files to the web server.
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. NO T E For information about connecting to another database, see “Database Connections for ColdFusion Developers” in Using Dreamweaver. To create a database connection: 1. If you’re using a remote computer as a server, copy the sample database to the remote computer.
You can place the file in any folder on the remote computer, or you can create a new folder for it. NO T E 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 accessible. After the database is in place, create a ColdFusion data source.
If ColdFusion is running on a remote computer, enter the path to the database file you placed on the remote computer in “Setting up the database (server on a remote computer)” on page 250. For more information, see the ColdFusion documentation in Dreamweaver (Help > Using ColdFusion). 6. Click OK to create the connection. The connection appears in the Databases panel.
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. If the Tables branch does not contain the tables, click the Modify Data Sources icon in the Databases panel toolbar and double-check the connection parameters in Configuring and Administering ColdFusion MX.
Setup for Sample ColdFusion Site
APPENDIX D Setup for Sample ASP.NET Site D Macromedia Dreamweaver 8 comes with sample ASP.NET pages to let you build a small web application. This chapter describes one way to set up the sample application. This chapter applies to ASP.NET developers. For information on ASP, see “Setup for Sample ASP Site” on page 269. Setting up a web application is a three-step process. First, configure your system. Second, define a Dreamweaver site. Third, connect the application to your database.
Define a Dreamweaver site: 1. Copy the sample files to a folder on your hard disk. 2. Define the folder as a Dreamweaver local folder. 3. Define a web server folder as a Dreamweaver remote folder. 4. Specify a folder to process dynamic pages. 5. Upload the sample files to the web server. Connect to the database: 1. If you’re using a remote computer as a server, copy the sample database to the remote computer. 2. Create the connection in Dreamweaver. Configuring your system (ASP.
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) WINDOWS 2000 or XP MAC or WINDOWS PC Dreamweaver Dreamweaver IIS 5 or higher .NET Framework Website root folder in c:\Inetpub\wwwroot\ Network or ftp access WINDOWS SERVER IIS 5 or higher .NET Framework Website root folder in c:\Inetpub\wwwroot\ To configure your system: 1.
Checking for a web server To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers. ASP.NET pages work with only one web server: Microsoft IIS 5 or later. IIS 5 is a service of the Windows 2000 and Windows XP Professional operating systems, so you can use these two versions of Windows to run ASP.NET applications. Make sure IIS 5 is installed and running on a computer running Windows 2000 or Windows XP Professional.
To install the .NET Framework and SDK: 1. Check to see if the .NET Framework is installed on your system by reviewing the list of applications in the Add or Remove Programs dialog box (Start > Control Panel > Add or Remove Programs). If Microsoft .NET Framework 1.1 is listed, the Framework is already installed and you do not need to install it again. Skip to step 3. 2. If the .NET Framework is not installed on your system, install the Microsoft .NET Framework 1.
2. To make sure the Scripts permission is enabled for the folder, start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, double-click Administrative Tools, and then double-click Internet Information Services). Expand the “local computer” list, followed by the Web Sites folder, and then the Default Web Site folder. Right-click your MySampleApps folder and select Properties from the pop-up menu.
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 following folders: ■ ■ C:\Documents and Setting\your_user_name\My Documents\local_sites (Windows) /Users/your_user_name/Documents/local_sites (Macintosh).
Defining a local folder After copying the cafe_townsend folder, define the folder containing the ASP.NET sample files as a Dreamweaver local folder. To define the Dreamweaver local folder: 1. In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, and then select Site. The Site Definition dialog box appears. 2. If the Basic tab is showing, click the Advanced tab. 3. In the Site Name text box, enter Cafe Townsend ASP.NET.
3. Enter the path or FTP settings to the web server folder you created in “Creating a root folder” on page 259. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still considered to be the remote folder.
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 application. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix. Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. However, the suggested URL prefix may be incorrect.
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 upload the entire site. Dreamweaver copies all the files to the web server folder you defined in “Defining a remote folder” on page 262. The Dreamweaver site is now defined.
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\Tutorial_assets\cafe_townsend\data \tutorial.mdb (Windows) ■ /Applications/Macromedia Dreamweaver 8/Tutorial_assets/ cafe_townsend/data/tutorial.
6. In the Data Source text box, enter the full path to the sample database file on your hard disk or the remote computer’s hard disk. If ASP.NET is running on your local computer and you installed Dreamweaver to its default location, use the following path: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\data\tutorial.mdb NO T E The path may vary depending on where you installed Dreamweaver.
Setup for Sample ASP.
APPENDIX E Setup for Sample ASP Site E 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 on this web server, see “Installing a Web Server” on page 231. This chapter applies to ASP developers only. For information on ASP.NET, see “Setup for Sample ASP.NET Site” on page 255.
Configure your system: 1. Make sure you have a web server. 2. Install an application server. 3. Test your installation. 4. Create a root folder. Define a Dreamweaver site: 1. Copy the sample files to a folder on your hard disk. 2. Define the folder as a Dreamweaver local folder. 3. Define a web server folder as a Dreamweaver remote folder. 4. Specify a folder to process dynamic pages. 5. Upload the sample files to the web server. Connect to the database: 1.
The following illustration shows the two configurations described in this section: Local configuration (for Windows users only) WINDOWS PC Remote server configuration (for Macintosh or Windows users) MAC or WINDOWS PC Dreamweaver Dreamweaver IIS Website root folder in c:\Inetpub\wwwroot\ Network or ftp access WINDOWS SERVER IIS Website root folder in c:\Inetpub\wwwroot\ To configure your system: 1. Make sure you have a web server (see “Checking for a web server” on page 272). 2.
Checking for a web server To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers. Make sure Microsoft IIS is installed and running on your hard disk or on a remote Windows computer. (Macintosh users need to install Microsoft IIS on a remote Windows computer.) A quick way to check whether IIS is installed on a computer is to look at the folder structure to see whether it contains a C:\Inetpub or D:\Inetpub folder.
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 <%= Time %> on the computer running ASP. This code displays the time the page was processed on the server. 3. Copy the file to the C:\Inetpub\wwwroot folder of the Windows computer running IIS. 4.
N O TE Looking at the source code (View > Source in Internet Explorer) will confirm that the page does not use any client-side JavaScript to achieve this effect. If the page doesn’t work as expected, check for the following possible errors: ■ The file does not have a .asp extension. ■ You typed the page’s file path (C:\Inetput\wwwroot\timetest.asp) instead of its URL (for example, http://localhost/timetest.asp) in the browser’s Address text box.
2. Make sure the Read and Scripts permissions are enabled for the folder by doing the following: a. Start the IIS administrative tool (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 MySampleApps folder and select Properties from the pop-up menu. d.
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 following folders: ■ ■ C:\Documents and Setting\your_user_name\My Documents\ local_sites (Windows) /Users/your_user_name/Documents/local_sites (Macintosh).
Defining a local folder After copying the cafe_townsend folder, you define the folder containing the ASP sample files as a Dreamweaver local folder. To define the Dreamweaver local folder: 1. In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, and then select Site. The Site Definition dialog box appears. 2. If the Basic tab is showing, click the Advanced tab. 3. In the Site Name text box, enter Cafe Townsend ASP.
3. Enter the path or FTP settings to the web server folder you created in “Creating a root folder” on page 274. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still considered to be the remote folder.
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 web browser to request a page in your web application.
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 upload the entire site. Dreamweaver copies all the files to the web server folder you defined in “Defining a remote folder” on page 277. The Dreamweaver site is now defined.
Before attempting to connect to the sample database, perform the following tasks on the remote computer running your web server: copy the sample database to the computer’s hard disk and create a DSN on the computer that points to the database. To set up the sample database on the remote computer: 1. 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.
3. Set up a DSN called CafeTownsend pointing to the sample database on the remote computer. For instructions, see the following articles on the Microsoft website: ■ ■ If the remote computer runs Windows 2000, see Article 300596 at http://support.microsoft.com/default.aspx?scid=kb;en-us;300596. If the remote computer runs Windows XP, see Article 305599 at http://support.microsoft.com/default.aspx?scid=kb;en-us;305599.
5. Click the DSN button and select CafeTownsend from the list of DSNs. If you’re using Dreamweaver on a Windows computer, during installation, Dreamweaver created a DSN called CafeTownsend, which points to the Microsoft Access database in the Dreamweaver application folder. 6. Click Test. Dreamweaver attempts to connect to the database. If the connection fails, do the following: ■ ■ ■ 7. Double-check the DSN.
Setup for Sample ASP Site
APPENDIX F Setup for Sample JSP Site F 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 web servers, see “Installing a Web Server” on page 231. If you’re using a different web server, see Chapter 23, “Setting Up a Web Application” in Using Dreamweaver (Help > Using Dreamweaver).
Define a Dreamweaver site: 1. Copy the sample files to a folder on your hard disk. 2. Define the folder as a Dreamweaver local folder. 3. Define a web server folder as a Dreamweaver remote folder. 4. Specify a folder to process dynamic pages. 5. Upload the sample files to the web server. Connect to the database: 1. Install a JDBC-ODBC bridge driver. 2. If you’re using a remote computer as a server, copy the sample database to the remote computer. 3. Create the connection in Dreamweaver.
The following illustration shows the two configurations described in this section: Local configuration (for Windows users only) WINDOWS PC Remote server configuration (for Macintosh or Windows users) MAC or WINDOWS PC Dreamweaver Dreamweaver IIS JSP application server Website root folder in c:\Inetpub\wwwroot\ Network or ftp access WINDOWS SERVER IIS JSP application server Website root folder in c:\Inetpub\wwwroot\ To configure your system: 1.
Checking for a web server To develop and test dynamic web pages, you need a web server. A web server is software that serves web pages in response to requests from web browsers. Make sure Microsoft IIS is installed and running on your hard disk or on a remote Windows computer. (Macintosh users need to install Microsoft IIS on a remote Windows computer.) A quick way to check whether IIS is installed on a computer is to look at the folder structure to see whether it contains a C:\Inetpub or D:\Inetpub folder.
To install JRun: 1. If applicable, log into your Windows system using the Administrator account. 2. Close all open applications. 3. Double-click the JRun Developer Edition installer file. The splash screen appears. 4. If you do not have a Java Runtime Environment (JRE) on your system, select the option on the splash screen to install it. Because the JRun application server relies on Java, a JRE must first be installed on the system that will run your application server.
2. Make sure the Read and Scripts permissions are enabled for the folder by doing the following: a. Start the IIS administrative tool (in Windows XP, select Start > Control Panel or Start > Settings > Control Panel, double-click Administrative Tools, and then double-click Internet Information Services). b. Expand the “local computer” list, followed by the Web Sites folder, and then the Default Web Site folder. c. Right-click your MySampleApps folder and select Properties from the pop-up menu. d.
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 following folders: ■ ■ C:\Documents and Setting\your_user_name\My Documents\local_sites (Windows) /Users/your_user_name/Documents/local_sites (Macintosh).
Defining a local folder After copying the cafe_townsend folder, define the folder containing the JSP sample files as a Dreamweaver local folder. To define the Dreamweaver local folder: 1. In Dreamweaver, select Site > Manage Sites. In the Manage Sites dialog box, click the New button, then select Site. The Site Definition dialog box appears. 2. If the Basic tab is showing, click the Advanced tab. 3. In the Site Name text box, enter Cafe Townsend JSP. The name identifies your site within Dreamweaver.
3. Enter the path or FTP settings to the web server folder you created in “Creating a root folder” on page 289. The folder may be on your hard disk or on a remote computer. Even if you created the folder on your hard disk, that folder is still considered to be the remote folder.
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 application. To display live data in your pages while you work, Dreamweaver creates a temporary file, copies it to the website’s root folder, and attempts to request it using the URL prefix. Dreamweaver makes a best guess at the URL prefix based on the information you provided in the Site Definition dialog box. However, the suggested URL prefix may be incorrect.
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 upload the entire site. Dreamweaver copies all the files to the web server folder you defined in “Defining a remote folder” on page 292. The Dreamweaver site is now defined.
Installing the bridge driver Before attempting to connect to the sample database, install the Sun JDBC-ODBC Bridge driver on the computer running your web server. The bridge driver lets you use Windows data source names (DSNs) to create connections. The driver comes with the Sun Java 2 SDK, Standard Edition, for Windows. To find out if you already have the Java 2 SDK with the driver, check your hard disk for any of the following directories: C:\jdk1.2.x C:\jdk1.3.x C:\j2sdk1.4.
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.
2. Make sure the Microsoft Access Driver, version 4.0 or higher, is installed on the remote computer. To find out whether the driver is already installed, see “Viewing the ODBC 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/downloads/.
2. Click the Plus (+) button on the panel and select ODBC Database (Sun JDBC-ODBC Driver) from the pop-up menu. The ODBC Database (Sun JDBC-ODBC Driver) dialog box appears. 3. Enter connTownsend as the connection name. 4. (Windows only) Do one of the following: ■ ■ If your server is on your local computer, select the Using Driver On This Machine option. If your server is on a remote system, select the Using Driver On Testing Server option.
Setup for Sample JSP Site
APPENDIX G Setup for Sample PHP Site G Macromedia Dreamweaver 8 comes with sample PHP pages to let you build a small web application. This chapter describes one way to set up the sample application using Microsoft Internet Information Server (IIS). For more information on this web server, see “Installing a Web Server” on page 231. If you’re using a different web server, see Chapter 23, “Setting Up a Web Application” in Using Dreamweaver.
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 sure you have a web server. 2. Install the PHP application server. 3. Test your installation. 4. Create a root folder. Define a Dreamweaver site: 1. Copy the sample files to a folder on your hard disk. 2.
Configuring your Windows system (PHP) This section provides instructions for two common Windows configurations: one in which Microsoft IIS is installed on your hard disk, and one in which IIS is installed on a remote Windows computer. If you want to use a different configuration, see Chapter 23, “Setting Up a Web Application” in Using Dreamweaver.
To configure your system: 1. Make sure you have a web server (see “Checking for a web server (Windows)” on page 304). 2. Install the PHP application server (see “Installing a PHP application server (Windows)” on page 304). 3. Test your installation (see “Testing the PHP installation (Windows)” on page 306). 4. Create a root folder (see“Creating a root folder (Windows)” on page 308). NO TE Installing the web server and application server are one-time-only tasks.
With PHP 5, the extension that allows PHP to work with a MySQL database server is not installed or enabled by default by the Windows installer. You must install and enable it manually. To install PHP 5 on a Windows system: 1. If applicable, log into your Windows system using the Administrator account. 2. Download the Windows PHP 5.x installer from the PHP website at www.php.net/downloads.php. 3. Double-click the installer file you downloaded and follow the onscreen installation instructions. 4.
12. In the temporary folder containing your unzipped PHP files, locate the file called libmysql.dll and copy it to the C:\Windows\system32 folder. This file is required so that IIS can work with PHP 5 and MySQL. 13. Restart IIS. For more information on 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.
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. N O TE 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.
Creating a root folder (Windows) After the server software is installed, create a root folder for your web application on the system running Microsoft IIS, and make sure the folder has the necessary permissions. To create a root folder for your web application: 1. Create a folder called MySampleApps on the system running IIS. NO T E Write down this folder name for later use. When you type it later, be sure to use exactly the same capitalization that you used when you created it.
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 working, and then creating a root folder for your PHP files.
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 button to generate a new page with a different time. NO TE Looking at the source code (View > View Source in Safari) will confirm that the page does not use any client-side JavaScript to achieve this effect.
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 folder as a Dreamweaver local folder (see “Defining a local folder” on page 312). 3. Define your root folder on the web server as a Dreamweaver remote folder (see “Defining a remote folder” on page 313).
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: ■ ■ 3. In Windows: C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\. On the Macintosh: Macintosh HD/Applications/Macromedia Dreamweaver 8/Tutorial_assets/cafe_townsend. Copy the cafe_townsend folder into the local_sites folder.
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 the Access pop-up menu, choose how you want to move your files to and from the server: across a local network (the Local/Network option) or using FTP.
To specify the folder to process dynamic pages: 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, a staging server, or a production server, as long as it can process PHP pages.
Uploading the sample files After specifying a folder to process dynamic pages, upload the sample files to the web server. You must upload the files even if the web server is running on your local computer. If you don’t upload the files, features such as Live Data view and Preview in Browser may not work properly with dynamic pages. For example, image links might be broken in Live Data view because the image files are not on the server yet.
To create a database connection: 1. Create the sample MySQL database using the SQL script (see “Creating the MySQL database” on page 316). 2. Create the connection in Dreamweaver (see “Creating a database connection” on page 318). Creating the MySQL database The sample files for Dreamweaver include a SQL script capable of creating and populating a sample MySQL database. Before starting, make sure MySQL is installed and configured on your local or remote computer.
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.
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 CafeTownsend < ~/Documents/ insert.sql This command uses the insert.sql file to add tables and records to the CafeTownsend database you created in step 5.
7. Click Test. Dreamweaver attempts to connect to the database. If the connection fails, do the following: ■ ■ ■ 8. Double-check the server name, user name, and password. Check the settings for the folder Dreamweaver uses to process dynamic pages (see “Specifying where dynamic pages can be processed (PHP)” on page 313). Consult Chapter 29, “Troubleshooting Database Connections” in Using Dreamweaver (Help > Using Dreamweaver). Click OK. The new connection appears in the Databases panel.
Setup for Sample PHP Site
Index Symbols .NET Framework 226 installing 258 Numerics Assets panel 81 assets, adding to a site 51 attributes, reference information 147 B 127.0.0.1 IP number 235 background color, setting 69, 171 Bindings panel 201 A C Access. See Microsoft Access Active Server Pages. See ASP alternative text 67 Apache Tomcat application server 227 Apache web server on Mac OS X 233 Apple.
ColdFusion installing 240 web applications, setting up 237 ColdFusion Administrator 251 ColdFusion Markup Language (CFML) 224 ColdFusion MX Server Developer Edition 240 ColdFusion Studio 142 ColdFusion, languages used with 225 color picker 71 column header menu 60 common web-application terms, defined 227 configuring systems with .
G J General preferences 142 glossary of common web-application terms 227 Java 225 Java Server Pages (JSP) 225 JavaScript 225 JRun 226 JSP (Java Server Pages) application servers, installing 288 web applications, setting up 285 H Hand tool 32 help changing font size 25 using 15 HomeSite 142 HTML embedded programming languages 224 See also code HTTP servers. See servers I IBM WebSphere application server 227 IIS (Internet Information Services) 226 about 231 administrative tool, launching 260 ASP.
O R Oracle 9i database 224 Record Insertion Form dialog box 210 record-insertion forms, creating 208 records displaying 204 inserting 208 recordsets creating 201 defined 228 testing 203 See also databases Reference panel 147 Refresh button 141 registering Dreamweaver 13 relational databases 228 remote folders 130 creating with Dreamweaver 131 defining (ASP) 277 defining (ASP.
server technologies choosing 226 defined 228 supported 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 also web servers, application servers setting up ASP 269 ASP.NET 255 ColdFusion 237 JSP 285 PHP 301 sites about 49 assets, adding 51 defining 52–54 ASP 275 ASP.
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 view 208 Visual Basic 225 W web applications about 217 ASP, setting up 269 ASP.
| | |