MACROMEDIA DREAMWEAVER 8-GETTING STARTED WITH... Скачать руководство пользователя страница 73 | Manualshive

Страница: 73 / 326

background image

73

5

CHAPTER 5

Tutorial: Adding Content
to Pages

This tutorial shows you how to add content to web pages in Macromedia
Dreamweaver 8. You can add many different kinds of content to web
pages, including graphics, Macromedia Flash files, Macromedia Flash
Video files, and text, to name a few. 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Review your task  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Insert images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Insert and play a Flash file  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Insert Flash Video  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Insert text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Create links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Preview your page in a browser  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Locate your files

In this tutorial, you’ll begin with the table-based page layout (index.html)
that you created in

Chapter 4, “Tutorial: Creating a Table-based Page

Layout.”

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.

«
...
71
72
73
74
75
...
»

Содержание DREAMWEAVER 8-GETTING STARTED WITH...

Страница 1: ...Getting Started with Dreamweaver...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 8: ...8 Contents...

Страница 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...

Страница 10: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 46: ...46 Dreamweaver Basics...

Страница 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...

Страница 48: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 128: ...128 Tutorial Formatting Your Page with CSS...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 136: ...136 Tutorial Publishing Your Site...

Страница 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...

Страница 138: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 189: ...Add a Repeat Region XSLT object 189 3 Select Insert XSLT Objects Repeat Region...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 196: ...196 Tutorial Displaying XML Data...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 216: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 230: ...230 Understanding Web Applications...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 236: ...236 Installing a Web Server...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 254: ...254 Setup for Sample ColdFusion Site...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 268: ...268 Setup for Sample ASP NET Site...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 284: ...284 Setup for Sample ASP Site...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 300: ...300 Setup for Sample JSP Site...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 320: ...320 Setup for Sample PHP Site...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Отзывы:

Нет отзывов

Похожие инструкции для DREAMWEAVER 8-GETTING STARTED WITH...

Бренд: NETGEAR Страницы: 2

Бренд: Microtek Страницы: 177

Applied Vision 4

Бренд: Ken A Vision Страницы: 16

Scarbee Clavinet & Piano

Бренд: Native Instruments Страницы: 24

Бренд: Draytek Страницы: 73

Бренд: RGB Spectrum Страницы: 158

H3C IMC STANDARD PLATFORM -

Бренд: 3Com Страницы: 68

pcXset - NBX - PC

Бренд: 3Com Страницы: 26

Бренд: Planet Страницы: 55

Бренд: pagertec Страницы: 16

MAXIMO SG24-7645-00

Бренд: IBM Страницы: 152

Order Analysis Toolset

Бренд: National Instruments Страницы: 63

OpenLane SLM 5.5

Бренд: Paradyne Страницы: 112

Multimaximizer L3-LL

Бренд: Waves Страницы: 26

Elura 60 - Elura 60 MiniDV Camcorder

Бренд: Canon Страницы: 89

Бренд: SWsoft Страницы: 119

EzSign 2.0 Editor

Бренд: LG Страницы: 17

E GO - MAP UPDATE SERVICE

Бренд: ZENEC Страницы: 2

Бренды по названию

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

Популярные бренды

Загрузить еще бренды