MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH..., Getting Started

Share

Page: 155 / 326

background image

Examine the design comp 155

A comp consists of any number of page elements that the client has
requested for their website. For example, the client might say, “I want to
have a logo at the top of the page, a navigation that links to these other
pages, a section for an online store, and a place where I can insert video
clips.” 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.

This tutorial provides you with the completed and approved comp for Cafe
Townsend, a fictional restaurant that requested a website. As the web
designer, it’s your job to transform the comp into a working web page
(most likely with the help of other graphics designers and Flash
developers).

«
...
153
154
155
156
157
...
»

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

Page 1: ...Getting Started with Dreamweaver...

Page 2: ...95 2002 Opera Software ASA and its suppliers All rights reserved Copyright 1997 2005 Macromedia Inc All rights reserved This manual may not be copied photocopied reproduced translated or converted to...

Page 3: ...ystem 24 Chapter 2 Dreamweaver Basics 27 Getting to know the Dreamweaver 8 workspace 27 Customizing the Dreamweaver 8 workspace 39 Accomplishing basic tasks in Dreamweaver 8 42 PART 2 TUTORIALS Chapte...

Page 4: ...panel 109 Create a new CSS rule 111 Apply a class style to text 113 Format the navigation bar text 114 Optional Center the contents of the page 125 Chapter 7 Tutorial Publishing Your Site 129 Learn a...

Page 5: ...ML data source to the XSLT page 180 Alter the XSLT page layout 181 Bind XML data to the XSLT page 183 Apply styles to the XML data 185 Create a dynamic link 186 Add a Repeat Region XSLT object 188 Att...

Page 6: ...guring your system ColdFusion 238 Defining a Dreamweaver site ColdFusion 244 Connecting to the sample database ColdFusion 250 Appendix D Setup for Sample ASP NET Site 255 Setup checklists for ASP NET...

Page 7: ...ts 7 Appendix G Setup for Sample PHP Site 301 Setup checklists for PHP developers 302 Configuring your system PHP 302 Defining a Dreamweaver site PHP 311 Connecting to the sample database PHP 315 Inde...

Page 8: ...8 Contents...

Page 9: ...you to Macromedia Dreamweaver 8 and includes installation information and a workspace overview It also provides a list of available resources for learning Dreamweaver This part contains the following...

Page 10: ......

Page 11: ...tional website This chapter covers the following topics What you can do with Dreamweaver 8 11 What s new in Dreamweaver 8 12 Installing Dreamweaver 8 13 Registering Dreamweaver 8 13 Typographical conv...

Page 12: ...des tools that let you easily create XSLT pages attach XML files and display XML data on your web pages Dreamweaver is fully customizable You can create your own objects and commands modify keyboard s...

Page 13: ...eamweaver installation program starts automatically In Macintosh double click the Dreamweaver installer icon that appears on the desktop 3 Follow the onscreen instructions The installation program pro...

Page 14: ...l conventions The following typographical conventions are used in this guide Menu items are shown in this format menu name menu item name Items in submenus are shown in this format menu name submenu n...

Page 15: ...24 Where to start The Dreamweaver documentation includes information for readers from a variety of backgrounds This section helps you understand how to approach the documentation depending on what you...

Page 16: ...ging Your Files 3 Learn about page layout by reading Chapter 7 Laying Out Pages with CSS and Chapter 8 Presenting Content with Tables in Using Dreamweaver 4 To learn about formatting text and includin...

Page 17: ...weaver see Chapter 19 Setting Up Your Coding Environment Chapter 20 Coding in Dreamweaver Chapter 21 Optimizing and Debugging Your Code and Chapter 22 Editing Code in Design View 6 Read the overview a...

Page 18: ...ugh much of the material in Chapter 2 Setting Up a Dreamweaver Site and Chapter 4 Managing Your Files is probably familiar to you skim those chapters to see how these familiar concepts are implemented...

Page 19: ...ng Up a Web Application 5 Connect to a database See Connecting to a database in Chapter 23 Setting Up a Web Application 6 Read the overview at the beginning of each of the chapter in Using Dreamweaver...

Page 20: ...beginner tutorials Intended for beginning users as well as intermediate and advanced users who want to learn about new features View in Dreamweaver Select Help Getting Started with Dreamweaver View o...

Page 21: ...edocs_dreamweaver Get the PDF www macromedia com go dw_documentation Dreamweaver API Reference Descriptions of the utility API and the JavaScript API both of which let you perform various supporting t...

Page 22: ...sing ColdFusion View online http livedocs macromedia com go livedocs_coldfusion Get the PDF www macromedia com go cf_documentation Reference HTML server model and other types of reference manuals main...

Page 23: ...per Center Articles and tutorials to help you improve your skills and learn new ones www macromedia com go dreamweaver_devcenter Dreamweaver Documentation Resource Center Product manuals in PDF format...

Page 24: ...iscussing the Dreamweaver documentation with LiveDocs on page 26 Opening Help You can access in product help while you work in Dreamweaver To open Dreamweaver Help Select Help Dreamweaver Help Searchi...

Page 25: ...rnet Explorer The font size in the Windows help viewer is set in Internet Explorer 2 Select View Text Size and then select a size To change the font size in the Apple help viewer In help select Edit D...

Page 26: ...DF to a copy shop Discussing the Dreamweaver documentation with LiveDocs The Dreamweaver documentation is also available online in LiveDocs format The LiveDocs version of the Dreamweaver Help looks ve...

Page 27: ...eamweaver 8 42 Getting to know the Dreamweaver 8 workspace The Dreamweaver workspace lets you view documents and object properties The workspace also places many of the most common operations in toolb...

Page 28: ...ls are integrated into a single larger application window Files panel Property inspector Tag selector Document toolbar Insert bar Document window Panel groups N OT E The Windows workspace also has a C...

Page 29: ...re initially docked together but can be undocked into their own windows Windows snap automatically to each other to the sides of the screen and to the Document window as you drag or resize them You ca...

Page 30: ...indow When the Document window has a title bar the title bar displays the page title and in parentheses the file s path and filename After the filename Dreamweaver displays an asterisk if you ve made...

Page 31: ...errors if any in your page Document Title allows you to enter a title for your document to be displayed in the browser s title bar If your document already has a title it appears in this field No Brow...

Page 32: ...in the hierarchy to select that tag and all its contents Click body to select the entire body of the document To set the class or id attributes for a tag in the tag selector right click Windows or Con...

Page 33: ...ries which you can switch on the left side of the Insert bar Additional categories appear when the current document contains server code such as ASP or CFML documents When you start Dreamweaver the ca...

Page 34: ...language including ASP ASP NET CFML Basic CFML Flow CFML Advanced JSP and PHP Each of these categories provides server code objects that you can insert in Code view The Application category enables y...

Page 35: ...removing comments indenting code and inserting recently used code snippets The Coding toolbar is visible only in Code view and appears vertically on the left side of the Document window You cannot un...

Page 36: ...w properties for the image such as the file path to the image the width and height of the image the border around the image if any and so on The Property inspector is at the bottom of the workspace by...

Page 37: ...s the contents of the local site the remote site or the testing server as a list of files When expanded it displays the local site and either the remote site or testing server The Files panel can also...

Page 38: ...panel also lets you modify CSS properties in both All and Current mode You can resize any of the panes by dragging the borders between the panes In Current mode the CSS Styles panel displays three pa...

Page 39: ...nformation about the CSS Styles panel see About the CSS Styles panel in Using Dreamweaver Customizing the Dreamweaver 8 workspace There are some basic techniques you can use to customize Dreamweaver t...

Page 40: ...cting Coder and Designer you can select Dual Screen Right or Dual Screen Left If you have a secondary monitor to the right of your primary monitor Dual Screen Right puts all panels on the right monito...

Page 41: ...e are no documents open the Document window is blank To hide the Start page Select the Don t Show Again checkbox on the Start page The Start page will not appear when you start Dreamweaver or after yo...

Page 42: ...tm extension Dreamweaver saves files using the html extension by default Following are some of the other common file types you might use when working in Dreamweaver CSS or Cascading Style Sheet files...

Page 43: ...dynamic pages For more information on working with these types of files see Chapter 40 Building ColdFusion Applications Rapidly in Using Dreamweaver ASPX or ASP NET files have a aspx extension They ar...

Page 44: ...files in Dreamweaver on page 44 Saving files in Dreamweaver When you create a new document you need to save it To save a new document 1 Select File Save 2 In the dialog box that appears navigate to th...

Page 45: ...g basic tasks in Dreamweaver 8 45 Opening files in Dreamweaver In Dreamweaver you can easily open and edit your documents To open a file 1 Select File Open 2 In the Open dialog box select the file and...

Page 46: ...46 Dreamweaver Basics...

Page 47: ...web page you ll create is the home page for Cafe Townsend a fictional restaurant This part contains the following sections Tutorial Setting Up Your Site and Project Files 49 Tutorial Creating a Table...

Page 48: ......

Page 49: ...tutorial you ll only learn how to set up the local site so that you can begin building web pages right away Later after you ve completed the website you ll learn how to create a remote site so that yo...

Page 50: ...ee Specifying where dynamic pages can be processed in Using Dreamweaver You can set up a Dreamweaver site by using the Site Definition Wizard which guides you through the setup process or by using the...

Page 51: ...ntosh there s a folder called Sites already in your user folder Don t use that Sites folder as your local folder the Sites folder is where you place your pages to make them publicly accessible when yo...

Page 52: ...to and from your web server by using a number of file transfer methods Now you ll define the cafe_townsend folder that you copied into the local_sites folder as your local folder 1 Start Dreamweaver...

Page 53: ...cafe_townsend folder You can click the folder icon to browse to and select the folder or enter a path in the Default Images Folder text box The Site Definition dialog box should now look as follows 7...

Page 54: ...t folder is the place on your local computer where you keep the working copies of your web pages Later if you want to publish your pages and make them publicly available you ll need to define a remote...

Page 55: ...the tables effectively act as container boxes for the content you ll add later In this tutorial you will complete the following tasks Examine the design comp 55 Create and save a new page 57 Insert t...

Page 56: ...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...

Page 57: ...es You ll start by creating a new page and saving it in the cafe_townsend local root folder of your website The page eventually becomes the home page for Cafe Townsend a fictional restaurant If you ha...

Page 58: ...your page Insert tables Next you ll add a table that will hold text graphics and Macromedia Flash assets 1 Click once on the page to place the insertion point in the upper left corner of the page 2 Se...

Page 59: ...Insert tables 59 4 Click OK A table with three rows and one column appears in your document The table is 700 pixels wide with no border cell padding or cell spacing...

Page 60: ...weaver displays the table width and the width for each table column in the Table selector indicated by green lines when the table is selected or when the insertion point is in the table Next to the wi...

Page 61: ...t Table dialog box Enter 1 in the Rows text box Enter 1 in the Columns text box Enter 700 in the Table Width text box Select Pixels from the Table Width pop up menu Enter 0 in the Border Thickness tex...

Page 62: ...Mode Expanded Table Mode N O TE You may see the Table selector indicated by green lines after you insert a table You can always make the Table selector disappear by clicking outside the table You can...

Page 63: ...ter Windows or Return Macintosh 4 Click once inside the second row of the first table 5 In the Property inspector enter 166 in the Cell Height text box and press Enter Windows or Return Macintosh 6 Cl...

Page 64: ...n the Cell Height text box and press Enter Windows or Return Macintosh You should now have three rows of differing heights in the first table Next you ll set properties for the second table the table...

Page 65: ...ter Windows or Return Macintosh 12 Set the width of the third column to 330 pixels If you have the Table selector enabled View Visual Aids Table Widths you ll see all three of the pixel values you jus...

Page 66: ...operty inspector enter 24 in the Cell Height text box and press Enter Windows or Return Macintosh Your layout should now look as follows 15 Click the Exit Expanded Tables Mode link at the top of the D...

Page 67: ...the Alternate Text text box blank A BO UT A note on alternative text Alternative text is a textual description of an image on a web page It is part of the HTML code and does not appear on the page It...

Page 68: ...owser Before you publish your site replace any image placeholders you ve added with web friendly graphic files such as GIFs or JPEGs If you have Macromedia Fireworks you can create a new graphic from...

Page 69: ...ll of the three columned table 2 Click the td 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...

Page 70: ...e Background Color text box enter the hexadecimal value F7EEDF and press Enter Windows or Return Macintosh The color of the table cell turns to light tan 8 Repeat steps 5 through 7 to change the color...

Page 71: ...weaver by entering hexadecimal values in the appropriate text boxes or by selecting a color from the color picker The color picker uses the 216 color web safe palette selecting a color from this palet...

Page 72: ...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 Pa...

Page 73: ...at it will look like on the web In this tutorial you will complete the following tasks Locate your files 73 Review your task 75 Insert images 76 Insert and play a Flash file 83 Insert Flash Video 86 I...

Page 74: ...wnsend folder that you copied to your hard disk in Chapter 3 Tutorial Setting Up Your Site and Project Files N OT E If you begin this tutorial with the completed table_layout html file instead of the...

Page 75: ...staurant 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...

Page 76: ...You can use several methods to add images to a web page in Dreamweaver In this section you ll add four different images to the index page for Cafe Townsend using various methods Replace the image pla...

Page 77: ...7 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 78: ...s folder inside the cafe_townsend folder select the body_main_header gif file and click OK A long colored graphic appears in the table row This might look more like background color for the table cell...

Page 79: ...ow 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 3 Click once outsid...

Page 80: ...dow 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 t...

Page 81: ...ee Chapter 3 Tutorial Setting Up Your Site and Project Files or Using Dreamweaver The Assets panel provides two views The Site list shows all of the assets in your site including colors and URLs that...

Page 82: ...e to the insertion point in the center table cell Click Insert at the bottom of the Assets panel The street_sign jpg graphic appears on the page 8 Click once outside the table to deselect the image 9...

Page 83: ...you need to insert HTML code that embeds the file in the Dreamweaver page The easiest way to do this is to insert the SWF file the exported Flash Movie file into the page When you insert a SWF file in...

Page 84: ...as you don t click anywhere else on the page If it s not selected select the Flash content placeholder by clicking it A BO UT About Flash files When you build assets in Macromedia Flash you work in FL...

Page 85: ...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 N OT E I...

Page 86: ...The command inserts a Flash component which displays the Flash Video content you select as well as a set of playback controls when viewed in a browser The Insert Flash Video command gives you the fol...

Page 87: ...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...

Page 88: ...ons Constrain maintains the same aspect ratio between the width and height of the Flash Video component This option is selected by default Auto play specifies whether to play the video when the web pa...

Page 89: ...tory as the HTML file to which you re adding Flash Video content in this case the cafe_townsend root folder When you upload the HTML page containing the Flash Video content Dreamweaver uploads these f...

Page 90: ...le 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 Close the sample_t...

Page 91: ...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 Pro...

Page 92: ...t text for a navigation bar However the text won t look like a navigation bar until you format it in the next tutorial 1 Click once in the first column of the three columned table the column that is c...

Page 93: ...on 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 ho...

Page 94: ...n create links at any stage of the site creation process In this section you ll create links for the navigation bar even though you haven t formatted the text into the form of a navigation bar yet The...

Page 95: ...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 sa...

Page 96: ...ugh idea of what your page will look like on the web but you must preview the page in a browser to see the definitive end result Though browsers in general produce the same results each browser versio...

Page 97: ...e your work and press the F12 key again to make sure your changes took effect N O TE Dreamweaver automatically detects your primary browser and uses that for previewing If the preview doesn t appear o...

Page 98: ...ng Content to Pages 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...

Page 99: ...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 101 Learn about CSS 102 Create...

Page 100: ...n of the tutorial and begin with that The finished version of the tutorial add_content html is located in the completed_files dreamweaver folder within the cafe_townsend folder that you copied to your...

Page 101: ...ormat 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 pag...

Page 102: ...CSS lets you control many properties that cannot be controlled with HTML alone For example you can specify different font sizes and units pixels points and so on for selected text By using CSS to set...

Page 103: ...of text All class styles begin with a period For example you could create a class style called red set the color property of the rule to red and apply the style to a portion of already styled paragra...

Page 104: ...ppearance 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 colum...

Page 105: ...e 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...

Page 106: ...eb page the rules defined in the style sheet are applied to the corresponding elements on the page For example when you attach the cafe_townsend css style sheet to the index html page all paragraph te...

Page 107: ...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 Paragra...

Page 108: ...le 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...

Page 109: ...In All mode the CSS panel shows you all of the CSS rules that apply to the current document whether those rules are in an external style sheet or in the document itself You should see two main categor...

Page 110: ...he p rule appear in the Properties pane below 7 In the Document window click once anywhere in either of the two paragraphs that you just formatted 8 In the CSS Styles panel click Current at the top of...

Page 111: ...d 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...

Page 112: ...ass 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 pixe...

Page 113: ...in the Style pop up menu in the Property inspector Apply a class style to text Now that you ve created a class rule you ll apply it to some paragraph text 1 In the Document window select the first fou...

Page 114: ...xt 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 nee...

Page 115: ...o 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...

Page 116: ...panel 6 In the CSS Rule Definition dialog box do the following Enter Verdana sans serif in the Font text box Select 16 from the Size pop up menu and select pixels from the pop up menu immediately to t...

Page 117: ...o add a few more properties to the navigation rule T I P For more information about any CSS property check the O Reilly reference guide included with Dreamweaver To display the guide select Help Refer...

Page 118: ...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 s...

Page 119: ...right enter 8px as the value and press Enter Windows or Return Macintosh 13 Locate the width property click once in the column to the right enter 140 in the first text box select pixels from the pop...

Page 120: ...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 cl...

Page 121: ...lick the rightmost a tag This action selects all of the text for the specified a tag or link 3 In the Property inspector Window Properties select navigation from the Style pop up menu In the Document...

Page 122: ...e 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 If it is careful...

Page 123: ...f affecting certain elements in an HTML document based not on the HTML code of the document itself but on other external conditions applied by the web browser Pseudo classes can be dynamic in the sens...

Page 124: ...ick 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 cla...

Page 125: ...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 NO T...

Page 126: ...index html page open in the Document window click the body tag in the tag selector Clicking the body tag selects everything between the open and close body tags in the Document window To see the selec...

Page 127: ...t center the body content of the page In Design view a dotted line borders the area that the div tags center 3 Save the page Your page is now finished The last task of building your website is to publ...

Page 128: ...128 Tutorial Formatting Your Page with CSS...

Page 129: ...o publish it by uploading the files to a remote folder A remote folder is where you store your files for testing production collaboration and publication depending on your environment Dreamweaver refe...

Page 130: ...formation about Dreamweaver sites see Chapter 2 Setting Up a Dreamweaver Site in Using Dreamweaver Define a remote folder Now you ll set up a remote folder so that you can publish your web pages The r...

Page 131: ...erver In either case continue with the instructions in this tutorial until you re connected to a remote server After you ve established a connection you can use the Dreamweaver Files panel to create a...

Page 132: ...on the server from the FTP root folder to the remote site s root folder cafe_townsend If you re not sure of the path consult your system administrator In many cases this text box should be left blank...

Page 133: ...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...

Page 134: ...icate the remote system s root folder as the host directory If you have problems connecting and you ve specified the host directory using a single slash you might need to specify a relative path from...

Page 135: ...her part of the server entirely In most cases such aliases have no effect on your ability to connect to the appropriate folder or directory however if you can connect to one part of the server but not...

Page 136: ...136 Tutorial Publishing Your Site...

Page 137: ...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...

Page 138: ......

Page 139: ...he index_code html file in the cafe_townsend completed_files dreamweaver folder to complete this tutorial The index_code html is a duplicate copy of the finished index html file from Chapter 6 Tutoria...

Page 140: ...also use a split view that shows both Code and Design views simultaneously 1 Make sure the index html file is open in the Document window 2 In the Document toolbar click Show Code and Design Views wh...

Page 141: ...gn 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...

Page 142: ...with the Tag Chooser Next you ll use the Tag Chooser to wrap a div tag around one of the images on the page You can then assign margins borders or colors to the image as you desire There are a variet...

Page 143: ...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 W...

Page 144: ...of tag names appears in the right pane select div from that list 7 Click Insert A tag editor for the div tag appears 8 In the tag editor select the Style Sheet Accessibility category and enter banner...

Page 145: ...tes 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 Open the Tag inspector if it s not already open by selecting Window Tag Inspect...

Page 146: ...tributes 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 W...

Page 147: ...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 select...

Page 148: ...n 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 ope...

Page 149: ...should be between an open and a close paragraph tag as follows If you don t see an open and a close paragraph tag before the closing table cell td tag type them in as follows Place the insertion point...

Page 150: ...urn Macintosh when the src attribute is selected in the hints menu The word Browse appears selected below the code you just typed 9 Press Enter Windows or Return Macintosh to browse to a file N OT E Y...

Page 151: ...move the insertion point to the right of the quotation marks 13 Type a closing angle bracket to complete the tag 14 Save your page Check your changes After making any change to your code you can get...

Page 152: ...de Print your code You can print your code to edit it offline archive it or distribute it To print code 1 View a page in Code view 2 Select File Print Code 3 Specify printing options and then click OK...

Page 153: ...o so before you proceed For instructions see Chapter 3 Tutorial Setting Up Your Site and Project Files In this tutorial you will complete the following tasks Learn about CSS based page layout 153 Exam...

Page 154: ...s text and so on Dreamweaver layers are absolutely positioned elements That is they have a specific position that is set relative to the top and left margins of the page You cannot create a CSS based...

Page 155: ...nd 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 This tu...

Page 156: ...start by creating a new page and saving it in the cafe_townsend local root folder of your website The page eventually becomes the home page for Cafe Townsend a fictional restaurant If you haven t cre...

Page 157: ...en 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...

Page 158: ...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 In the Height H text box enter 90px In the Left L te...

Page 159: ...nt for positioning the other layers You ll also use the CSS Layer Backgrounds feature to help you position and distinguish between layers 1 In the Layout category of the Insert bar click Draw Layer an...

Page 160: ...ows 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 It is also positioned 20 pixels from...

Page 161: ...o 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...

Page 162: ...ing a CSS based Page Layout 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...

Page 163: ...o apply your last entry When you re finished your page should look something like this TI P When you select a layer be sure to click somewhere on the layer border or the layer s selection handle and n...

Page 164: ...deselect it 9 Select and drag the center_content layer and the footer layer or use the arrow keys on your computer to position the layers as the following example shows T I P You can also move select...

Page 165: ...table cells you added to the page if you completed Chapter 4 Tutorial Creating a Table based Page Layout 1 Click once to the right of your layers to make sure everything is deselected 2 In the Layout...

Page 166: ...ename the layer navigation In the Width W text box enter 140px In the Height H text box enter 350px In the Left L text box enter 20px Press Enter Windows or Return Macintosh to apply your last entry 5...

Page 167: ...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...

Page 168: ...168 Tutorial Creating a CSS based Page Layout 9 Drag the flash_video layer or use the arrow keys on your keyboard to position the layer as the following example shows...

Page 169: ...ws 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...

Page 170: ...g the text layer or use the arrow keys on your keyboard to position the layer as the following example shows 14 Save your page N OT E It s OK if you see dotted lines on the borders of a layer It means...

Page 171: ...r the hexadecimal value 993300 and press Enter Windows or Return Macintosh The background color of the navigation layer turns to reddish brown 4 Select the flash_video layer by clicking its name in th...

Page 172: ...dialog box click the Background Color color box and select black 000000 from the color picker 10 Click OK Your page background turns to black 11 Save your page Your CSS page layout is now complete The...

Page 173: ...on page and vice versa Although it s not necessary you should have some familiarity with Cascading Style Sheets CSS before completing this tutorial If you don t you might want to complete Chapter 6 Tu...

Page 174: ...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...

Page 175: ...is hand coded i e it is not coming from a dynamic data source and the text is formatted with an external style sheet The owners of Cafe Townsend have decided to go dynamic and use data from an XML fil...

Page 176: ...are Instead XML lets you create tags that best define your data structure Tags are nested within others to create a schema of parent and child tags Like most HTML tags all tags in an XML schema have...

Page 177: ...led information in the form of HTML You can use Dreamweaver to create XSLT pages that let you perform XSL transformations using an application server or a browser When you perform a server side XSL tr...

Page 178: ...ta on a page of its own you would create an entire XSLT page and bind your XML data to it If on the other hand you wanted to display XML data in a particular section of an existing dynamic page for ex...

Page 179: ...L 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 For more...

Page 180: ...ocal 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 3 Click OK to close t...

Page 181: ...ext 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 tr tag in the t...

Page 182: ...rom 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...

Page 183: ...e 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...

Page 184: ...the table accordingly 5 Lastly select the price 7 in the right table cell 6 In the Bindings panel double click the price element Again the XML data placeholder affects the layout of the page Don t wor...

Page 185: ...he resulting XML data will also display the assigned styles 1 Click once in the left table cell and click the rightmost td tag in the tag selector to select the cell You are selecting the cell so that...

Page 186: ...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 speci...

Page 187: ...lect 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...

Page 188: ...l add the Repeat Region XSLT object to the table row so that you can display multiple specials on the page 1 In the Document window click once anywhere inside the table row containing the XML data pla...

Page 189: ...Add a Repeat Region XSLT object 189 3 Select Insert XSLT Objects Repeat Region...

Page 190: ...will disappear and the selection will expand to display the specified repeating elements in the XML file Dreamweaver also shortens the length of the XML data placeholder This is because Dreamweaver up...

Page 191: ...xsl page open in the Document window open the Bindings panel Window Bindings if it isn t already open 2 In the Bindings panel double click on Schema for specials xml to open the specials xml file You...

Page 192: ...2 Tutorial Displaying XML Data 5 Click OK to close the Attach an XSLT Stylesheet dialog box Dreamweaver inserts the reference to the XSLT page at the top of the XML document 6 Save the specials xml pa...

Page 193: ...tion 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 page...

Page 194: ...XSLT fragments visit www macromedia com go dw_xsl Following is the workflow for performing server side transformations with XSLT pages Set up a Dreamweaver site See Chapter 2 Setting Up a Dreamweaver...

Page 195: ...serting XSLT fragments in dynamic pages in Using Dreamweaver Delete all of the HTML code from a dynamic page and then use the XSL Transformation server behavior to insert a reference to the entire XSL...

Page 196: ...196 Tutorial Displaying XML Data...

Page 197: ...e 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 In this tutorial you will complete t...

Page 198: ...on page 285 Appendix G Setup for Sample PHP Site on page 301 These setup chapters teach you how to complete the following tasks Configure your system Configure Dreamweaver to work with your chosen ap...

Page 199: ...Review your task 199 The page that lets Cafe Townsend staff view the comments in the database will look as follows The page that lets visitors send the comments will look as follows...

Page 200: ...rt by locating the documents you ll work with as you create these pages 1 Select Window Files to open the Files panel The Files panel opens 2 In the Site pop up menu select the Cafe Townsend site you...

Page 201: ...eate a recordset in Dreamweaver You ll create a recordset that selects all of the values from the COMMENTS table in the tutorial database 1 In the Cafe Townsend document open in Dreamweaver place the...

Page 202: ...r name and password are associated with the data source or connection enter them If you didn t provide a user name or password when you set up the data source leave these boxes blank 6 In the Table po...

Page 203: ...ep 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...

Page 204: ...e rather than manually entering the information You ll start by creating a table to structure the data list 1 In the Cafe Townsend document place the insertion point in the blank line after the Custom...

Page 205: ...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 Th...

Page 206: ...of the following Select Window Bindings Click the Application panel group s expander arrow and select the Bindings panel 2 Add the FIRST_NAME field to the table by doing one of the following Place th...

Page 207: ...t the left edge of the table row and when the pointer changes to an arrow pointing right click the table row border to select the row 2 Create a repeated region by doing one of the following In the Se...

Page 208: ...Live Data The page updates to show data extracted from the database Create a record insert form The next page you ll create for the Cafe Townsend website allows customers to add comments to the databa...

Page 209: ...to insert When a user enters data in the form fields and clicks the submit button a new record is inserted in a database You can also set a page to open after a record has successfully been submitted...

Page 210: ...nnection enter them If you didn t provide a user name or password when you set up the data source or connection leave these boxes blank 6 In the Table pop up menu make sure COMMENTS is selected 7 Clic...

Page 211: ...w to position COMMENTS below LAST_NAME In the Column list select EMAIL and click the down arrow to position EMAIL below LAST_NAME 3 In the Form Fields list select FIRST_NAME to specify how the field i...

Page 212: ...ME form field with a label of Last Name displaying as a Text Field and submitting as Text 8 Repeat steps 3 through 6 for the EMAIL form field with a label of Email displaying as a Text Field and submi...

Page 213: ...ialog 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 insert...

Page 214: ...itted information updates the database and displays the comments page with the updated information Further reading This tutorial provided information about a small set of tools you can use to create d...

Page 215: ...t 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...

Page 216: ......

Page 217: ...219 Authoring dynamic pages 224 Choosing a server technology 226 Web application terminology 227 About web applications A web application is a website that contains pages with partly or entirely unde...

Page 218: ...ing content A web application frees the web designer from continually updating the site s HTML Content providers such as news editors provide the web application with content and the web application u...

Page 219: ...one that does not change when a site visitor requests it The web server sends the page to the requesting web browser without modifying it In contrast a dynamic web page is modified by the server befor...

Page 220: ...e server this kind of page is called a static page When the web server receives a request for a static page the server reads the request finds the page and sends it to the requesting browser as shown...

Page 221: ...ial software is called an application server The application server reads the code on the page finishes the page according to the instructions in the code and then removes the code from the page The r...

Page 222: ...data undecipherable in much the same way that a Microsoft Word document opened in Notepad or BBEdit may be undecipherable The application server can communicate with the database only through the inte...

Page 223: ...RVER Database Recordset Database driver Step 2 Web server finds page and passes it to application server Step 5 Driver executes the query against the database Step 6 Recordset is returned to driver St...

Page 224: ...fficiently Authoring dynamic pages Authoring a dynamic page consists of writing the HTML first and then adding the server side scripts or tags to the HTML to make the page dynamic When you view the re...

Page 225: ...which displays it as follows About Trio Motors Trio Motors is a leading automobile manufacturer Be sure to visit our Sales page You choose a scripting or tag based language to use depending on the se...

Page 226: ...application An application server is software that helps a web server process web pages containing server side scripts or tags For example if you have ColdFusion MX 7 Server you can choose ColdFusion...

Page 227: ...omcat A database is a collection of data stored in tables Each row of a table constitutes one record and each column constitutes a field in the record as shown in the following example A database driv...

Page 228: ...ne or more tables in a database as in the following example A relational database is a database containing more than one table with the tables sharing data The following database is relational because...

Page 229: ...is a website that contains pages with partly or entirely undetermined content The final content of these pages is determined only when a visitor requests a page from the web server Because the final...

Page 230: ...230 Understanding Web Applications...

Page 231: ...work computer or a web hosting company If you want to develop PHP applications you can use the Apache web server already installed on your Macintosh This chapter contains the following sections Gettin...

Page 232: ...e web server already installed on your Macintosh For more information see Testing the Macintosh web server PHP developers on page 233 Installing Internet Information Server Windows 2000 and Windows XP...

Page 233: ...c enter the following URL in your browser http rockford pc myTestFile html If the browser displays your page the web server is running normally If the browser fails to display the page make sure the s...

Page 234: ...owsers A web server is sometimes called an HTTP server Suppose you use IIS to develop web applications The default name of your web server is the name of your computer You can change the server name b...

Page 235: ...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 lo...

Page 236: ...236 Installing a Web Server...

Page 237: ...rocess This chapter contains the following sections Setup checklists for ColdFusion developers 237 Configuring your system ColdFusion 238 Defining a Dreamweaver site ColdFusion 244 Connecting to the s...

Page 238: ...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 syste...

Page 239: ...eate a root folder Network or ftp access WINDOWS PC Local configuration for Windows users only Remote server configuration for Macintosh or Windows users Dreamweaver ColdFusion Server Website root fol...

Page 240: ...ding Web Applications on page 217 You can download and install a fully functional developer edition of ColdFusion MX 7 from the Macromedia website at www macromedia com go coldfusion Make sure you sel...

Page 241: ...r 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 F...

Page 242: ...e 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 bo...

Page 243: ...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 per...

Page 244: ...he 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 p...

Page 245: ...d Dreamweaver to its default location the path to the folder is as follows In Windows C Program Files Macromedia Dreamweaver 8 Tutorial_assets cafe_townsend On the Macintosh Macintosh HD Applications...

Page 246: ...nced tab 3 In the Site Name text box enter Cafe Townsend ColdFusion The name identifies your site within Dreamweaver 4 Click the folder icon next to the Local Root Folder text box and browse to the fo...

Page 247: ...created in Creating a root folder on page 243 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 rem...

Page 248: ...as the Remote Info category see Defining a remote folder on page 247 because they point to a server capable of processing ColdFusion pages 2 Select ColdFusion from the Server Model pop up menu 3 In t...

Page 249: ...broken in Live Data view because the image files are not on the server yet Similarly clicking a link to a detail page while previewing a master page in a browser causes an error if the detail page is...

Page 250: ...server on a 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 Connecting to the dat...

Page 251: ...word and click OK 3 Click Plus on the Databases panel toolbar and select Microsoft Access Connection from the pop up menu 4 In the CF Data Source Name text box enter connTownsend 5 In the Database Fil...

Page 252: ...he ColdFusion documentation in Dreamweaver Help Using ColdFusion 6 Click OK to create the connection The connection appears in the Databases panel If the connection does not appear in the panel do one...

Page 253: ...s 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...

Page 254: ...254 Setup for Sample ColdFusion Site...

Page 255: ...to your database This setup chapter follows this three step process This chapter contains the following sections Setup checklists for ASP NET developers 255 Configuring your system ASP NET 256 Defini...

Page 256: ...abase 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 NET This section provides instr...

Page 257: ...Create a root folder see Creating a root folder on page 259 Network or ftp access WINDOWS 2000 or XP Local configuration for Windows 2000 or XP users only Remote server configuration for Macintosh or...

Page 258: ...er IIS creates this folder during installation If IIS is not installed install it now For more information see Installing Internet Information Server on page 232 After installing the web server instal...

Page 259: ...Framework 1 1 Software Development Kit SDK from the same website and follow the installation instructions After installing the Framework and SDK create a root folder for your web application Creating...

Page 260: ...er is now configured to serve web pages in your root folder in response to HTTP requests from web browsers After configuring your system you must define a Dreamweaver site Defining a Dreamweaver site...

Page 261: ...Dreamweaver to its default location the path to the folder is as follows In Windows C Program Files Macromedia Dreamweaver 8 Tutorial_assets cafe_townsend On the Macintosh Macintosh HD Applications Ma...

Page 262: ...My Documents local_sites cafe_townsend contact aspnet Windows Users your_user_name Documents local_sites cafe_townsend contact aspnet Macintosh 5 Click Select to finish defining the Dreamweaver local...

Page 263: ...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 Tes...

Page 264: ...eApps 5 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 specifying a folder to process dynamic pages upload the...

Page 265: ...ion Dreamweaver copies a sample Microsoft Access database to your hard disk This section describes how to create a connection to the sample database To create a database connection 1 If you re using a...

Page 266: ...al step of the setup process is to create a connection to the database To create a database connection in Dreamweaver 1 Open any ASP NET page in Dreamweaver and then open the Databases panel Window Da...

Page 267: ...rial mdb 7 Delete the User ID and the Password lines The Access database does not require a user ID or password 8 Click Test Dreamweaver attempts to connect to the database If the connection fails do...

Page 268: ...268 Setup for Sample ASP NET Site...

Page 269: ...255 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 chapter follows this th...

Page 270: ...lder 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...

Page 271: ...on page 272 3 Test your installation see Testing the installation on page 273 4 Create a root folder see Creating a root folder on page 274 Network or ftp access WINDOWS PC Local configuration for Win...

Page 272: ...Installing a Web Server on page 231 After installing the web server you need to install an application server Installing an ASP application server To process dynamic web pages you need an application...

Page 273: ...ays 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 In your web browser enter the URL of your test page and then pre...

Page 274: ...te 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 Microsoft IIS and make sure...

Page 275: ...Click OK The web server is now configured to serve web pages in your root folder in response to HTTP requests from web browsers After configuring your system you must define a Dreamweaver site Defini...

Page 276: ...weaver to its default location the path to the folder is as follows In Windows C Program Files Macromedia Dreamweaver 8 Tutorial_assets cafe_townsend On the Macintosh Macintosh HD Applications Macrome...

Page 277: ...er_name My Documents local_sites cafe_townsend contact asp Windows Users your_user_name Documents local_sites cafe_townsend contact asp Macintosh 5 Click Select to finish defining the Dreamweaver loca...

Page 278: ...fter defining 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 applic...

Page 279: ...emote Folder text box is C Inetpub wwwroot MySampleApps the URL prefix should be as follows http localhost MySampleApps 5 Click OK to define the site and dismiss the Site Definition dialog box then cl...

Page 280: ...lation Dreamweaver copies a sample Microsoft Access database to your hard disk This section describes how to create a connection to the sample database To create a database connection 1 If you re usin...

Page 281: ...ntosh You can place the file in any folder on the remote computer or you can create a new folder for it 2 Make sure the Microsoft Access Driver version 4 0 or later is installed on the remote computer...

Page 282: ...your web server is running on your local computer you can use the data source name DSN that Dreamweaver created during installation to quickly connect to the sample database To learn more about DSNs...

Page 283: ...empts to connect to the database If the connection fails do the following Double check the DSN Check the settings for the folder Dreamweaver uses to process dynamic pages see Specifying where dynamic...

Page 284: ...284 Setup for Sample ASP Site...

Page 285: ...s First configure your system Second define a Dreamweaver site Third connect the application to your database This setup chapter follows this three step process This chapter contains the following sec...

Page 286: ...o 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 Configuring yo...

Page 287: ...rver on page 288 3 Create a root folder see Creating a root folder on page 289 Network or ftp access WINDOWS PC Local configuration for Windows users only Remote server configuration for Macintosh or...

Page 288: ...cation server Installing a JSP application server To process dynamic web pages you need an application server An application server is software that helps a web server process web pages containing ser...

Page 289: ...to your IIS web server by selecting Start Programs Macromedia JRun 4 Web Server Configuration For instructions see the JRun documentation After installing and starting JRun create a root folder for yo...

Page 290: ...ck OK The web server is now configured to serve web pages in your root folder in response to HTTP requests from web browsers After configuring your system you must define a Dreamweaver site Defining a...

Page 291: ...eamweaver to its default location the path to the folder is as follows In Windows C Program Files Macromedia Dreamweaver 8 Tutorial_assets cafe_townsend On the Macintosh Macintosh HD Applications Macr...

Page 292: ...name My Documents local_sites cafe_townsend contact jsp Windows Users your_user_name Documents local_sites cafe_townsend contact jsp Macintosh 5 Click Select to finish defining the Dreamweaver local f...

Page 293: ...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...

Page 294: ...pleApps 5 Click OK to define the site and close the Site Definition dialog box then click Done to close the Manage Sites dialog box After specifying a folder to process dynamic pages upload the sample...

Page 295: ...ple database installed with Dreamweaver Connecting to the sample database JSP During installation Dreamweaver copies a sample Microsoft Access database to your hard disk This section describes how to...

Page 296: ...installer Follow the onscreen instructions and make sure the Java 2 Runtime Environment component is selected from the Select Component dialog box It should be selected by default The driver is insta...

Page 297: ...dge driver on the computer 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...

Page 298: ...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 Win...

Page 299: ...look like this jdbc odbc CafeTownsend If you re using Dreamweaver on a Windows computer during installation Dreamweaver created a DSN called CafeTownsend pointing to the Microsoft Access database in...

Page 300: ...300 Setup for Sample JSP Site...

Page 301: ...a remote PHP server or develop PHP sites locally using the Apache web server and PHP application server installed with your operating system For setup information see the following websites http deve...

Page 302: ...e 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 fol...

Page 303: ...t configuration see Chapter 23 Setting Up a Web Application in Using Dreamweaver The following illustration shows the two configurations described in this section Network or ftp access WINDOWS PC Loca...

Page 304: ...Inetpub or D Inetpub folder IIS create this folder during installation If IIS is not installed install it now For instructions see Installing a Web Server on page 231 After installing the web server i...

Page 305: ...ary folder on your hard disk The zip package contains the extension you need to work with MySQL 5 In the temporary folder containing the unzipped files locate the folder called ext and copy it to the...

Page 306: ...P you can test the server to make sure it works properly Testing the PHP installation Windows You can test the PHP application server by running a test page To test the PHP application server 1 In Dre...

Page 307: ...calhost timetest php in the browser s Address text box If you type a file path in the browser as you might be used to doing with normal HTML pages you bypass the web server and the application server...

Page 308: ...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...

Page 309: ...installation Macintosh You can test the Apache web server and PHP application server on your Macintosh by running a test page However before you can use the web server to serve PHP pages and content f...

Page 310: ...ore your user name The page code contains a typing mistake The Apache server is not running Look in System Preferences in the Sharing category to see whether Personal Web Sharing is enabled After test...

Page 311: ...be processed PHP on page 313 5 Upload the sample files to the web server see Uploading the sample files on page 315 Copying the sample files If you haven t already done so copy the sample files from...

Page 312: ...der define the folder containing the PHP 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 clic...

Page 313: ...l considered to be the remote folder The following example shows a possible Remote Folder path if you chose Local Network access and your remote folder is on your Windows hard disk Remote Folder C Ine...

Page 314: ...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...

Page 315: ...el 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...

Page 316: ...o an appropriate folder on the computer that has MySQL installed If you installed Dreamweaver to its default location the path to the script file is as follows C Program Files Macromedia Dreamweaver 8...

Page 317: ...word omit the p argument as follows mysql uTara If you didn t define a user name while configuring your MySQL installation enter root as the user name as follows mysql uroot The MySQL client s command...

Page 318: ...create a database connection in Dreamweaver 1 Open any PHP page in Dreamweaver and then open the Databases panel Window Databases 2 Click the Plus button on the panel and select MySQL Connection from...

Page 319: ...weaver 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 Dreamwe...

Page 320: ...320 Setup for Sample PHP Site...

Page 321: ...274 web applications setting up 269 ASP NET DataSets 201 languages used with 225 NET Framework 258 servers supported 258 web applications setting up 255 Assets panel 81 assets adding to a site 51 attr...

Page 322: ...22 227 file based 224 queries 222 227 recordsets for 222 relational 228 server based 224 tables 222 using with web applications 218 DataSets ASP NET recordsets 201 DBMS database management system See...

Page 323: ...dFusion MX 240 Dreamweaver 13 IIS Internet Information Services 232 IP addresses and number 127 0 0 1 235 J Java 225 Java Server Pages JSP 225 JavaScript 225 JRun 226 JSP Java Server Pages application...

Page 324: ...support 258 Q queries database 222 defined 227 testing 203 R Record Insertion Form dialog box 210 record insertion forms creating 208 records displaying 204 inserting 208 recordsets creating 201 defin...

Page 325: ...p menu 33 Structured Query Language SQL 222 Sun ONE Web Server 229 systems configuring 238 256 270 286 302 T table header menu 60 tables about 60 creating layout with 55 72 database 222 Expanded Table...

Page 326: ...es See pages web servers defined 229 verifying the web server is running 258 272 288 304 See also servers application servers WebSphere 227 Window Size pop up menu 33 workspace about 27 floating layou...

Reviews:

No comments

Related manuals for DREAMWEAVER 8-GETTING STARTED WITH...

AccuSync LCD52V

Brand: NEC Pages: 5

Brand: Yamaha Pages: 89

Brand: I.R.I.S. Pages: 182

Adaptive Server Anywhere SNMP Extension Agent

Brand: Sybase Pages: 70

Brand: Drobo Pages: 6

Lancast Media Converter 7000

Brand: Cabletron Systems Pages: 108

Brand: Minolta Pages: 26

Brand: eCopy Pages: 266

Remote Client 4.0.1

Brand: Q-See Pages: 72

Brand: DeLorme Pages: 34

Active Management Technology v4.0

Brand: Intel Pages: 143

MAPCREATE 7 - ADDENDUM

Brand: LEI Extras Pages: 16

Brand: Bay Networks Pages: 112

Brand: Bay Networks Pages: 130

Unified Messaging

Brand: Oracle Pages: 46

Retail Place 12.2

Brand: Oracle Pages: 68

Oracle Web Application Server

Brand: Oracle Pages: 80

Oracle Territory Management

Brand: Oracle Pages: 98

Brands by name

0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Popular brands

Load more brands