MACROMEDIA 38028779 - Macromedia Dreamweaver - Mac Скачать руководство пользователя страница 34 | Manualshive

Страница: 34 / 582

MACROMEDIA 38028779 - Macromedia Dreamweaver - Mac Скачать руководство пользователя страница 34

Chapter 1

34

Create the site home page

Now that a site structure is set up for storing pages and assets for the Compass
site, you’ll create the first page—a home page for the site. As you build this page,
you’ll add images, text, and Flash assets; your document will contain the same
design components as the completed Compass home page.

Save your document

Begin by saving the document you’re working in.

1

Leave the Site window open, and click the Document window to make
it active.

The Site window remains open in the background.

2

Choose File > Save.

3

In the Save As dialog box, select the Compass_Site folder as the location for
this document.

4

In the File Name field, type

my_CompassHome.html

.

5

Click Save.

Notice that the document name now appears at the top of the Document window.

«
...
32
33
34
35
36
...
»

Содержание 38028779 - Macromedia Dreamweaver - Mac

Страница 1: ...macromedia Using Dreamweaver...

Страница 2: ...party Web site mentioned in this guide then you do so at your own risk Macromedia provides these links only as a convenience and the inclusion of the link does not imply that Macromedia endorses or ac...

Страница 3: ...logies resources 25 Accessibility and Dreamweaver 26 CHAPTER 1 Dreamweaver Tutorial 27 Take a guided tour of Dreamweaver 28 The Dreamweaver work area 28 Set up the site structure for the tutorial 31 D...

Страница 4: ...up a new site 102 Editing an existing Web site 104 Editing a remote site 105 Removing a site from your list of sites 106 CHAPTER 4 Site Management and Collaboration 107 About the Site window 108 Viewi...

Страница 5: ...layout width 179 Setting Layout View preferences 182 CHAPTER 7 Using Tables to Present Content 183 Inserting a table 184 Selecting table elements 187 Formatting tables and cells 189 Resizing tables a...

Страница 6: ...earching and replacing text tags and attributes 258 CHAPTER 11 Inserting Images 267 Inserting an image 268 Setting image properties 269 Creating image maps 273 Using an external image editor 277 Apply...

Страница 7: ...plugin content 313 Inserting an ActiveX control 316 Inserting a Java applet 318 Using parameters 319 Using behaviors to control media 320 CHAPTER 14 Editing HTML in Dreamweaver 321 Understanding basic...

Страница 8: ...ating documents based on templates 388 Updating pages based on a template 391 Exporting and importing XML content 392 Creating managing and editing library items 396 Using server side includes 404 CHA...

Страница 9: ...ning the debugger 474 Finding and fixing logical errors 476 CHAPTER 20 Creating Forms 481 About CGI scripts 482 About form objects 482 Creating a form 483 About form fields 485 Inserting checkboxes an...

Страница 10: ...eyboard Shortcuts 545 File menu 545 Edit menu 546 Page views 546 Viewing page elements 547 Code editing 547 Editing text 549 Formatting text 550 Finding and replacing text 550 Working in tables 551 Wo...

Страница 11: ...technology imports HTML documents without reformatting the code and you can set Dreamweaver to clean up and reformat HTML when you want it to The visual editing features in Dreamweaver also let you q...

Страница 12: ...er Macintosh running Mac OS 8 6 or 9 x 32 MB of random access memory RAM plus 135 MB of available disk space A 256 color monitor capable of 800 x 600 pixel resolution A CD ROM drive Installing Dreamwe...

Страница 13: ...ovie is over click the Home button to return to the list of movies then click another movie You can watch the whole tour or skip ahead to see particular sections Tutorial The Dreamweaver tutorial is t...

Страница 14: ...mweaver you can download a printable version of Using Dreamweaver from the Dreamweaver Support Center at http www macromedia com support dreamweaver documentation html Dreamweaver Help Dreamweaver Hel...

Страница 15: ...in all topic text The search feature requires a 4 0 browser with Java enabled Note When you click Search a Java security window may appear asking for permission to read files on your hard disk You mus...

Страница 16: ...pt and C developers to create objects commands property inspectors behaviors and translators Dreamweaver Support Center The Dreamweaver Support Center Web site is updated regularly with the latest inf...

Страница 17: ...ater on Organizing your site includes much more than determining where the files will go site planning often involves examining site requirements audience profiles and site goals Additionally you shou...

Страница 18: ...ou can easily add a variety of content to Web pages Add assets and design elements such as text images colors movies sound and other forms of media The Assets panel lets you easily organize the assets...

Страница 19: ...e form data without contacting the server in short you can let visitors see and do more within the page There are several ways to add interactivity and animation to your pages using Dreamweaver Use ti...

Страница 20: ...code then allows you to view the code as a page is debugged right in Dreamweaver See Debugging JavaScript Code on page 473 Run browser and plugin checks test and fix links in your documents and run si...

Страница 21: ...page 71 for a further overview of the Dreamweaver user interface 5 Although much of the material in Site Management and Collaboration on page 107 and Linking and Navigation on page 353 is probably fa...

Страница 22: ...aver Document window See Opening the Code view or Code inspector on page 331 You can also edit non HTML documents such as JavaScript files and XML files directly in the Dreamweaver Code view See Inser...

Страница 23: ...lash buttons and Flash text are now built right into Dreamweaver You can pick from a set of predefined Flash buttons and insert them into your document or have your Flash designer create custom button...

Страница 24: ...window See Setting up the Check In Check Out system on page 132 and Creating reports on page 510 SourceSafe integration If you own SourceSafe you can now check files into and out of SourceSafe while w...

Страница 25: ...webmonkey 99 26 index4a html is an article from the Hotwired Webmonkey site on incorporating ready made CGI Common Gateway Interface scripts into your pages The CGI Resource Index http www cgi resour...

Страница 26: ...sabilities We encourage the implementation of international standards to guide developers of accessible sites including the guidelines offered by the World Wide Web Consortium W3C Many government poli...

Страница 27: ...age 56 this section and those that follow it focus on new or changed features in Dreamweaver such as the Assets panel Flash buttons and text using a template running a site report and adding a Design...

Страница 28: ...aver work area If you haven t already launched Dreamweaver double click the Dreamweaver icon to launch it The Dreamweaver work area accommodates different styles of working and levels of expertise Whe...

Страница 29: ...g select a view in the Dreamweaver toolbar By default Dreamweaver displays the Document window in Design view In addition you can work with the Dreamweaver Design view in two different ways in Layout...

Страница 30: ...me html and then click Open to open the Compass home page in the Document window Do not edit this page you will create your own version of this page 4 Choose File Preview in Browser and select a brows...

Страница 31: ...n page 34 section of the tutorial Note If you select the predefined site the site name displayed in the tutorial screenshots will not match instead of seeing my_tutorial you ll see Tutorial Dreamweave...

Страница 32: ...ay the path to the local site Note The complete path to the Compass_Site folder may vary depending on where you installed Dreamweaver 7 Under Cache do one of the following Select Enable Cache Windows...

Страница 33: ...to the cache message The Site window now displays a list of all the folders and files in the local site The list also acts as a file manager allowing you to copy paste delete move and open files just...

Страница 34: ...omponents as the completed Compass home page Save your document Begin by saving the document you re working in 1 Leave the Site window open and click the Document window to make it active The Site win...

Страница 35: ...th the title Untitled Document In this part of the tutorial you ll title your page 1 With the Document window active choose View Toolbar if the toolbar isn t already visible The Dreamweaver toolbar ap...

Страница 36: ...e you re comfortable with these two tasks you may find it easier to add layout and content together 1 In the Objects panel click the Layout View icon if it isn t already selected The Getting Started i...

Страница 37: ...ill hold text You ll draw tables and cells similar to this layout as you work in your document First you ll draw a layout cell in which you ll insert the Compass logo 1 Click in the Document window of...

Страница 38: ...The layout table expands to fill the Document window and defines the page layout area The white rectangle is the layout cell you drew You can place additional layout cells in the gray area of the layo...

Страница 39: ...resize handle to the right until the cell is the desired width When you release the mouse the cell s width is displayed in the column header area along the top of the layout table Add multiple layout...

Страница 40: ...eys to move a layout cell 5 pixels at a time Group cells in a layout table Now you ll create a table of the navigation button cells you just created Grouping the cells in a table enables you to contro...

Страница 41: ...ext you ll move the table you just created a few pixels to the right to offset the alignment of the navigation buttons to the logo when they are inserted in the page 1 In the Document window click the...

Страница 42: ...Your page should look similar to this Create a layout table In the last section you used cells to create a table Now you ll start with a table and add cells 1 In the Objects panel click the Draw Layo...

Страница 43: ...er of the layout cell to select it then in the Property inspector s Fixed field type 170 to set the cells width 4 Draw another table cell approximately one third the space in the table next to the fir...

Страница 44: ...gate to the Assets folder then the images folder click the compass_logo gif to select it 4 Make sure the Relative To pop up menu located at the bottom of the dialog box is set to Document then click S...

Страница 45: ...n buttons and preview the page in a browser to test the rollovers 1 In the Document window click in the first cell of the navigation button table This tells Dreamweaver where you want the image insert...

Страница 46: ...mage a unique name 3 In the Original Image field click Browse then navigate to and select MenuDestinations gif 4 In the Rollover Image field click Browse then navigate to and select MenuDestinations_o...

Страница 47: ...ver to see its browser related functions You do not have to save the document before you preview it 1 Press F12 to see your document in a Web browser Move the mouse pointer over the rollover images yo...

Страница 48: ...t into the layout cell 6 In DW4_HomeText txt select the next two lines of text Level 5 Rapids through Siberia 7 Choose Edit Copy to copy the text 8 In the my_CompassHome document click in the second c...

Страница 49: ...the heading text from the word Fly through the word Mountains 2 In the Property inspector click the color picker then move the eyedropper to the Learn More About image in the document window and sele...

Страница 50: ...dard View icon Your page should look similar to the screen below Set cell properties Cell height determines the height of the space within a cell row Notice the space around the Compass logo You want...

Страница 51: ...in Layout view 2 In the tag selector click the rightmost table tag In the Document window a border appears around the navigation button table and the Property inspector now reflects properties for a...

Страница 52: ...e site map to add new files to the site to add remove and change links and to create a graphic file of the site that you can export to and print from an image editing application The site map always d...

Страница 53: ...ructure of the Compass site with my_CompassHome html as the home page and on the right is a list of the local folder s contents The my_CompassHome html page currently has no links You ll add links to...

Страница 54: ...contains a number sign often referred to as a null or dummy link created when you inserted the rollover image Don t remove this character It will soon be replaced with the file name of the document y...

Страница 55: ...te map updates to reflect the link you added A plus sign next to any file in the site map indicates that the file contains links to other documents Click the plus sign to expand the site map to displa...

Страница 56: ...sily add content to your page directly from the panel Now you ll learn how to use the Assets panel to add assets to a page Select a new document So you don t need to create additional tables in your h...

Страница 57: ...w site assets Begin by opening the Assets panel 1 Open the Assets panel by doing one of the following Choose Window Assets Click the Show Asset icon in the Launcher Bar The Assets panel appears Assets...

Страница 58: ...cts the climber image and places the insertion point after the image then press Shift Enter Windows or Shift Return Macintosh to insert a line break 4 In the Name list select featureText gif then drag...

Страница 59: ...osemite 2 Double click Yosemite to select the text 3 In the Assets panel click the Colors icon to view HTML colors in the Compass site 4 In the Value list select the color icon for 993300 then drag it...

Страница 60: ...on images 3 Click the Add to Favorites icon 4 Click OK to the alert message View favorite assets You can view the assets you ve added to your Favorites list and use this view for inserting assets in y...

Страница 61: ...sert Flash Text dialog box set the following options For Font select Verdana or choose one of your favorite fonts For Size type 18 For Color click the color box then use the eyedropper to select brown...

Страница 62: ...In the Document window roll the pointer over the Flash Text object 4 To stop playing the object click Stop in the Property inspector Create a Flash button object Now you ll see how easy it is to add a...

Страница 63: ...laying the object click Stop in the Property inspector Create a template You can use templates to create documents that have a common structure and appearance Templates are useful when you want to mak...

Страница 64: ...eplaces the DW4_TravelDetail document In the document title bar notice the document contains a Template identifier Template and a Dreamweaver template file extension dwt Modify the template At this po...

Страница 65: ...template 6 In the Name field in the New Editable Region dialog box type adCell and then click OK The template area identifiers appear in the document 7 In the Document window select all of the text i...

Страница 66: ...log box select myTravelDetail then click Select to select the template you want to apply to the new page The template is applied to the new document This page contains the same regions and content as...

Страница 67: ...ty inspector s File field click the folder icon then in the dialog box that appears navigate to Assets swfs then select bikeAd swf 5 Choose File Open then navigate to DW4_MtnBikeText txt to open a doc...

Страница 68: ...Use Design Notes to schedule production work place follow ups on files or to communicate file or site details with team members Next you ll create a Design Note to follow up on making a change to one...

Страница 69: ...log box A Design Note icon appears in the Notes column in the Local Folder pane 8 In the Site Window select DW4_Destinations html and open it The document and its associated Design Note opens you can...

Страница 70: ...se the file when you re done 8 Close the Results dialog box The next steps Congratulations you ve completed the Dreamweaver tutorial You know how to design pages add content and test your pages If you...

Страница 71: ...opening an existing HTML document or creating a new one However to get the most out of your Dreamweaver experience you should understand the basic concepts behind the Dreamweaver work area and how to...

Страница 72: ...nd pop up menus that let you view the Document window in different ways set view options and access some common operations for example previewing in a browser Context menus let you quickly access usef...

Страница 73: ...electing a view in the Dreamweaver toolbar For more information see Using the toolbar on page 78 Working with the Code view As you create and work with documents Dreamweaver automatically generates th...

Страница 74: ...le body of the document TheWindowSizepop upmenuletsyouresizetheDocumentwindowtopredetermined orcustomdimensions See ResizingtheDocumentwindow onpage75 To the right of the Window Size pop up menu you l...

Страница 75: ...example you would use the size 536 x 196 640 x 480 Default if your visitors are likely to be using Microsoft Internet Explorer or Netscape Navigator in their default configurations on a 640 x 480 mon...

Страница 76: ...nimize All To restore all Dreamweaver windows press Alt Shift F4 If you have at least one window open you can select Window Restore All to restore any additional window Setting Status Bar preferences...

Страница 77: ...e 255 Using the Behaviors panel on page 436 About automating tasks on page 160 and Using the Code view or Code inspector on page 330 Customizing the Launcher bar Use Panels preferences to specify whic...

Страница 78: ...f your Document window To display the Design view only click the Show Design View button You can also access these views through the View menu To enter a title for your document use the Title field If...

Страница 79: ...e When the Document window displays both views you can access either view s Options menu by clicking in the desired view then clicking the Options menu Using context menus Dreamweaver makes extensive...

Страница 80: ...or object you want To bypass this dialog box and insert an empty placeholder object Hold down the Control Windows or Option Macintosh key while inserting the object For example to insert a placeholde...

Страница 81: ...ects For more information see The View section of the Objects panel lets you choose between Standard default or Layout view If Layout view is selected you can also select the Layout tools Draw Layout...

Страница 82: ...upper right corner of the Property inspector The Property inspector initially displays the most commonly used properties of the selected element Click the expander arrow in the lower right corner of t...

Страница 83: ...nces to specify which panels and inspectors always appear in front of the Document and Site windows and which ones are allowed to be obscured You can also use Panels preferences to specify which panel...

Страница 84: ...ts to the last step that you performed Using the History panel The History panel keeps track of every step of your work in Dreamweaver You can use the History panel to undo multiple steps at once If y...

Страница 85: ...that step undoing steps as it scrolls Note To scroll automatically to a particular step you must click to the left of the step clicking the step itself selects the step Selecting a step is different f...

Страница 86: ...panels Here are just a few The Code inspector shows the code that browsers use to display the document as a Web page To show or hide the Code inspector choose Window Code Inspector Changes you make i...

Страница 87: ...where you clicked but you may switch into the other application in that case click a Dreamweaver window to continue working in Dreamweaver or hold down the mouse button when moving from Dreamweaver t...

Страница 88: ...colors UNIX versions of Netscape Navigator use a different color palette than the Windows and Macintosh versions If you are developing exclusively for UNIX browsers or your target audience is Windows...

Страница 89: ...st then choose fonts to use for that encoding from the font pop up menus below the Font Settings list For more information about Fonts Encoding preferences see Dreamweaver Help Using Dreamweaver with...

Страница 90: ...ore information on advanced customizing features see Customizing Dreamweaver on page 513 Using the Keyboard Shortcut Editor Use the Keyboard Shortcut Editor to create your own shortcut keys edit exist...

Страница 91: ...ands categories display this list as a tree view that replicates the structure of the menus The other categories list the commands by name for example Quit Application Shortcuts window displays the li...

Страница 92: ...the key combination appears in the Press Key Field If there is a problem with the shortcut for example if the key combination is already assigned to another command an alert appears letting you reassi...

Страница 93: ...at http www macromedia com exchange dreamweaver Once there you can log in and download extensions many of which are free join discussion groups view user ratings and reviews and install and use the P...

Страница 94: ...e file mxp to the Downloaded Extensions folder within the Dreamweaver folder on your computer For example My Computer c Program Files Macromedia Dreamweaver 4 Configuration Extensions 2 Double click t...

Страница 95: ...ntil you ve set up a site The first step in creating a Web site is planning See About site planning and design on page 95 The next step is to set up the basic structure of the site see Using Dreamweav...

Страница 96: ...may not have media plug ins All these factors can affect the use of your site That is why you need to determine a target audience Think about the people who will be attracted to your Web site or who...

Страница 97: ...ular browser Under most circumstances for Web sites designed for public viewing it s a good idea to make your site viewable in as many browsers as possible Pick one or two browsers as your target brow...

Страница 98: ...o view it This approach is better than creating and editing files on the live public Web site itself because it allows you to test changes in the local site before making them publicly viewable and th...

Страница 99: ...lder Or you might have a separate Assets folder for each group of related pages on your site if there aren t many assets shared among such groups Use the same structure for local and remote sites Your...

Страница 100: ...the navigation scheme Another area where planning pays off is navigation As you design your site think abouttheexperienceyouwantyourvisitorstohave Thinkabouthowavisitortoyour site will be able to move...

Страница 101: ...to reuse page layouts and page elements in various documents by using templates and libraries However it is easier to create new pages with templates and libraries than it is to apply them to existin...

Страница 102: ...amweaver before you begin creating your pages The local site is the site structure that you set up on your computer to contain all your folders assets and files for a particular site see Organizing th...

Страница 103: ...lly refresh the Site window click the Site window s Refresh button To manually refresh the Local pane only choose View Refresh Local in the Site window Windows or Site Site Files View Refresh Local Ma...

Страница 104: ...ves the speed of Dreamweaver when copying such files but when this option is deselected the Local pane of the Site window does not automatically refresh To manually refresh the Site window click the S...

Страница 105: ...der down to the files you want to edit For example if your remote site s root folder named public_html contains two folders Project1 and Project2 and if you want to work only on the HTML files in Proj...

Страница 106: ...d click Get File s to download that file to your local disk Dreamweaver automatically duplicates as much of the remote site s structure as is necessary to place the downloaded file in the correct part...

Страница 107: ...between local and remote sites Dreamweaver maintains parallel file and folder structures between them When transferring files between sites Dreamweaver automatically creates necessary folders when the...

Страница 108: ...tems You can also use the Site window to transfer files between local and remote sites and you can lay out your site navigation using the site map see Setting up a remote site on page 123 and Using th...

Страница 109: ...a drive that contains a remote site after you open the Site window you won t see that remote site s directory list until you click the Refresh button Get File s copies the selected files from the remo...

Страница 110: ...s dialog box is turned off for the current site See Checking in and checking out files on a remote server on page 133 Stop Current Task aborts any current activity including getting and putting files...

Страница 111: ...gh which you connect to outside servers if you are behind a firewall If you are not behind a firewall leave this space blank Note If you are behind a firewall select the Use Firewall option in the Sit...

Страница 112: ...n Site Files view in one pane and Site Map view in the other For information on viewing site maps see About the site map on page 116 Viewing local sites The Site window can display the contents of bot...

Страница 113: ...he pointer over the Site Map button and select Map and Files from the pop up menu The Site window displays two views the local site as a map labeled Site Navigation and depending on how you set your p...

Страница 114: ...on the right or the left The remote site appears on the side you have selected and the local site or the site map which is always local appears on the opposite side When you choose this option the rem...

Страница 115: ...e Site Files button To open a file from the Site Files view Double click the file s icon To add a new folder to a site 1 Make sure a file or folder is selected in the Site window the new folder is cre...

Страница 116: ...or Site Site Files View Select Checked Out Files Macintosh To locate and select newer local files Choose Edit Select Newer Local in the Site window Windows or Site Site Files View Select Newer Local...

Страница 117: ...e page has been defined or if Dreamweaver can t find an index html or index htm page in the current site to use as the home page a dialog box appears prompting you to select a home page by clicking De...

Страница 118: ...ize the appearance of your site map You can specify the home page the number of columns displayed whether the icon labels display the file name or the page title and whether to show hidden and depende...

Страница 119: ...age or other non HTML content that is loaded by the browser when the main page is loaded Working with pages in the site map When working in the site map you can select pages open a page for editing ad...

Страница 120: ...ows or Site Site Map View Show Page Titles Macintosh 2 Do one of the following Select a page and then click the title When the title becomes an editable field enter a new document title Select a page...

Страница 121: ...Show Hide Link Macintosh To show or hide files marked as hidden do one of the following Choose View Show Files Marked as Hidden Windows or Site Site Map View Show Files Marked as Hidden Macintosh Choo...

Страница 122: ...ng the site map You can save the site map as an image and then view the image in or print it from an image editor To create an image file of the current site map 1 From the site map do one of the foll...

Страница 123: ...eaver opens that site and then locates the file in it Setting up a remote site Before you set up a remote site create a local site which you will then associate with the remote site See Using Dreamwea...

Страница 124: ...pload your site to a server Then click OK and skip the rest of this procedure Use Local Network if your Web server is mounted as a network drive Windows or as an AppleTalk or NFS server Macintosh or i...

Страница 125: ...remote site s host directory FTP only on page 126 3 Enter the login name and password that you use to connect to the FTP server Dreamweaver saves your password by default Deselect Save if you prefer t...

Страница 126: ...mpting to connect or ask the server s administrator to create a root directory for you if you can t do it If you re uncertain what to enter in the Host Directory field try leaving it blank On some ser...

Страница 127: ...t have Visual SourceSafe installed on your system or have access to a system supported by WebDAV Using Dreamweaver with the WebDAV protocol You can use Dreamweaver to connect using the WebDAV Web base...

Страница 128: ...toolbar to connect to the remote site To disconnect choose Site Disconnect or click the Disconnect button Once connected you can use the Dreamweaver file sharing features Get and Put files Design Note...

Страница 129: ...enter the full file path The file you choose will become the srcsafe ini file and is used to initialize SourceSafe 6 In the Project field enter the project within the VSS database that you want to us...

Страница 130: ...or you ll have to wait a long time when a connection really can t be made Generally time out values of 30 to 120 seconds are the most useful File and folder names that contain spaces and special char...

Страница 131: ...ed in the Site window Checking in a file makes the file available to other team members to check out and edit The local version becomes read only to prevent you from making changes to the file while s...

Страница 132: ...he Check Out Files when Opening option if you want files to automatically be checked out when you double click to open them from the Site window Using File Open to open a file doesn t check the file o...

Страница 133: ...ck Out icon at the top of the Site window Choose Check Out from the context menu or the Site menu 3 To download dependent files along with the selected files click Yes at the prompt To refrain from do...

Страница 134: ...About Design Notes You can keep track of extra file information associated with your documents such as image source file names and comments on file status by using the Design Notes command For exampl...

Страница 135: ...s if it s not already selected When Maintain Design Notes is selected you can create Design Notes for files in your site Whenever a file is copied moved renamed or deleted the associated Design Notes...

Страница 136: ...as Heidi in the Value field Click the Plus button to add a new key value pair select a pair and click the Minus button to remove it 4 Click OK to save the notes The notes you entered are saved to a s...

Страница 137: ...ites 2 In the Define Sites dialog box select the site and click Edit 3 In the Site Definition dialog box click Design Notes 4 Deselect Maintain Design Notes Deselecting this option disables the Design...

Страница 138: ...files for your site Using file view columns with Design Notes You can customize the columns displayed in the Site window s Local Folder and Remote Site lists You can reorder columns add new columns f...

Страница 139: ...inition Dialog box In the Site window right click Windows or Control click Macintosh a column and select File View Columns The Site Definition dialog box appears displaying File View Columns options T...

Страница 140: ...he Minus button Using Design Notes in Fireworks and Dreamweaver If you open a graphic in Macromedia Fireworks 4 0 and export it to another format Fireworks automatically saves the name of the original...

Страница 141: ...t a site on page 509 Note You must have a remote site connection defined to run the Workflow reports To run a Checked Out By report 1 Choose Site Reports The Reports dialog box appears 2 Choose an opt...

Страница 142: ...3 Under Workflow select Design Notes The Report Settings button becomes available 4 Click the Report Settings button The Design Notes dialog box appears 5 Enter one or more name and value pairs and se...

Страница 143: ...for other team members to check out If Enable File Check In and Check Out is turned off then getting a file transfers a copy that has both read and write privileges See Using Check In Check Out on pag...

Страница 144: ...stop the file transfer at any time click the Stop Current Task button the red stop sign with the white X in the lower right corner of the Site window or press Esc Windows or Command period Macintosh T...

Страница 145: ...t been saved a dialog box may appear depending on your preference setting in the Site panel of the Preferences dialog box allowing you to save the file before putting it on the remote server To save t...

Страница 146: ...or Site Site Files View Select Newer Local or Site Site Files View Select Newer Remote Macintosh To synchronize your files 1 If you want to synchronize specific files or folders rather than the whole...

Страница 147: ...h there are no corresponding remote files 6 Click Preview If the newest version of each chosen file is already in both places and nothing needs to be deleted an alert appears informing you that no syn...

Страница 148: ...Chapter 4 148...

Страница 149: ...tively you can open and modify HTML documents created in other applications See Creating opening and saving HTML documents on page 150 When you set up a document you can define basic page elements For...

Страница 150: ...n the Macintosh choose File New If you open the Code view in the Document window or the Code inspector you can see that the new document isn t completely blank it contains html head and body tags to g...

Страница 151: ...able region in those cases click inside the editable region To learn more about designing and working with templates see Reusing Content with Templates and Libraries on page 375 To save a document 1 C...

Страница 152: ...is not the same as giving the page a title To locate all untitled documents in your site use the Site Reports command see Creating reports on page 510 To change the title of a page 1 Do one of the fol...

Страница 153: ...style sheets on page 248 3 To set a background color click the Background color box and select a color from the color picker See Working with colors on page 87 Defining default text colors Define def...

Страница 154: ...ual Aids Invisible Elements if that menu item isn t already selected and then click the element s marker in the Document window Some objects appear on the page in a place other than where their code i...

Страница 155: ...he selection body a img Because the image is selected the img tag in the tag selector appears in boldface Clicking that tag in the tag selector corresponds to selecting img src agraphic gif in a code...

Страница 156: ...the invisible elements To indicate which element markers appear when you choose View Visual Aids Invisible Elements you can set options in Invisible Elements preferences For example you can specify t...

Страница 157: ...id marks on the page help you align layers and when snapping is enabled layers automatically snap to the closest grid point when moved or resized Other objects such as images and paragraphs do not sna...

Страница 158: ...ton next to the Tracing Image text box 2 In the dialog box that appears select an image file and click Select Windows or Choose Macintosh 3 The Page Properties dialog box appears Specify the transpare...

Страница 159: ...cript and VBScript functions and variables keywords and content indicators for search engines and style definitions You don t need to provide all of these elements for every page you might for example...

Страница 160: ...ecords your steps as you work on a document For basic information about the History panel see About the History panel on page 84 To automate a task that you perform often you can create a new command...

Страница 161: ...e the Repeat command immediately after an Undo or Redo operation To repeat steps other than the most recent one or to repeat multiple steps at once use the History panel Note that when you replay step...

Страница 162: ...lick Replay Applying steps to multiple objects If you select multiple objects in a document and then apply steps to them from the History panel the objects are treated as a single selection and Dreamw...

Страница 163: ...he document window to make the Document window active without moving the insertion point 6 Press the Left Arrow key to move the insertion point to the left of the image Then press the Down Arrow key t...

Страница 164: ...te such steps the way you want If your steps include a Paste command you can t paste those steps unless the steps also include a Copy command before the Paste command If you paste steps into a text ed...

Страница 165: ...commands that are built into the Commands menu that is commands that you didn t explicitly add see About customizing Dreamweaver menus on page 517 To create a command 1 Select a step or set of steps i...

Страница 166: ...t a time as soon as you start recording a new command the old one is lost To save a new command without losing a recorded one save the command from the History panel Once you ve recorded a command you...

Страница 167: ...vides Layout view In Layout view you can design your page using tables as the underlying structure but avoid the traditional pitfalls of using tables For example you can easily draw cells table cells...

Страница 168: ...lly enabled in LayoutView To turn off the table tabs when in Layout View choose View Table View Show LayoutTableTabs Note If you create a table in Dreamweaver Standard view then switch into Layout vie...

Страница 169: ...ou can create your page layout using several layout cells within one layout table or you can use multiple layout tables for a more advanced layout Using multiple layout tables isolates sections of you...

Страница 170: ...ayout view then click the Draw Layout Cell button in the Layout category of the Objects panel The mouse pointer will change to a plus sign 2 Position the mouse pointer where you want to start the cell...

Страница 171: ...te to existing cells if you draw them near each other within 8 pixels The cells will also automatically snap to the side of the page if you draw them close to the edge within 8 pixels To temporarily d...

Страница 172: ...lows a grid with columns and rows so tables can span several rows or several columns but they can never actually overlap on the page Dreamweaver helps you maintain this structure by automatically snap...

Страница 173: ...s of the outer table You can insert multiple nested tables To draw a nested table 1 Click the Draw Layout Table button in the Layout category of the Objects panel The mouse pointer will turn into a pl...

Страница 174: ...apping Type the amount of spacing you want and select Pixels Inches or Centimeters from the pop up menu This controls how far apart the grid lines will appear Choose lines or dots for the grid lines 3...

Страница 175: ...ert Image button from the Objects panel to the page 3 In the Select Image dialog box select an image file For more information see Setting image properties on page 269 Clearing automatic cell heights...

Страница 176: ...A layout cell is always at least as large as the content it contains To move a cell 1 Click the cell edge 2 Drag the cell where you want it on the page or use the arrow keys The arrow key moves it 1...

Страница 177: ...pixels in the box or choose Autostretch see Setting layout width on page 179 To change the height specify the height in pixels in the text box To set a background color for the layout cell choose a co...

Страница 178: ...have selected will have this spacing If you see two numbers appear in the column header area use the Make Widths Consistant option below To clear the height settings for all the cells in the layout t...

Страница 179: ...ine With autostretch your layout always fills the browser window no matter what size window the viewer has set Although fixed width is the default setting you ll typically set some of your layout cell...

Страница 180: ...make a fixed width and select Make Column Fixed Width from the column header menu Make Column Fixed Width automatically sets the width of the column to match the width of the content in that column I...

Страница 181: ...h or choose Add Spacer Image from the Column Header menu 2 In the dialog box that appears choose from the following options Tell Dreamweaver where to create the spacer image file If you select this op...

Страница 182: ...pear completely Setting Layout View preferences Use the Layout View category in the Preferences to set or change spacer image files and locations as well as the colors that Layout view uses to draw th...

Страница 183: ...l for laying out data and images on an HTML page Tables provide Web designers ways to add vertical and horizontal structure to a page Tables consist of three basic components Rows horizontal spacing C...

Страница 184: ...your page layout with tables as the underlying structure Use tables in Dreamweaver to add tabular data to your page Inserting a table Use the Objects panel or the Insert menu to create a new table To...

Страница 185: ...rder Enter 0 if you don t want a border 3 Click OK to create the table If you want to insert a table without having to first specify these options turn off the Show Dialog When Inserting Objects optio...

Страница 186: ...ata that has been created in another application such as Microsoft Excel and saved in a delimited format separated by tabs commas colons semicolons or other delimiters can be imported into Macromedia...

Страница 187: ...t table formatting options In the Cell Padding field specify the number of pixels between the cell content and the cell boundary or wall In the Cell Spacing field specify the number of pixels between...

Страница 188: ...ottom left corner of the Document window Selection handles appear around the table when it is selected To select rows or columns do one of the following Position the insertion point at the left margin...

Страница 189: ...property such as background color or alignment is set one way for the whole table and another way for individual table cells it is useful to understand how Dreamweaver interprets the HTML source code...

Страница 190: ...er of pixels or as a percentage of the browser window You usually don t need to set the height of a table Use the Align field to specify how a table aligns with other elements in the same paragraph su...

Страница 191: ...for page layout specify a border value of 0 To view cell and table boundaries when the border is set to 0 choose View Visual Aids Table Borders Use the Brdr Color field to select a border color for t...

Страница 192: ...rowse to an image you can also type the image s path or use the Point to File icon To set the background color for a cell column or row use the bottom Bg field You can use the color picker or type the...

Страница 193: ...Row Colors Top Row and Left Col options 4 To modify the border width enter a value in the Border field Enter 0 if you don t want a border 5 To apply the design to the table cells td tags rather than...

Страница 194: ...s you specify the width of a column in three ways To set the column width 1 Click in any of the column s cells or select the column 2 Choose Window Properties to open the Property inspector 3 In the W...

Страница 195: ...s current dimensions depending on how the table width is specified If you can t get the desired result by dragging table borders you can clear the column widths and start over To change widths and hei...

Страница 196: ...or columns should appear before or after the selected row or column 4 Click OK To delete a row or column 1 Click in a cell within the row or column you want to delete 2 Choose one of the following opt...

Страница 197: ...h it appears To nest a table within a table cell 1 Do one of the following Click in the cell where you want to insert the second table and choose Insert Table Click in the cell where you want to inser...

Страница 198: ...eate the specified arrangement In the following illustration the cells in the middle of the first two rows have been merged so that they span two rows To merge two or more cells in a table 1 Select th...

Страница 199: ...pasted at an insertion point or in place of a selection in an existing table To paste multiple table cells the contents of the Clipboard must be compatible with the structure of the table or the sele...

Страница 200: ...e pasting entire rows or columns into an existing table the rows or columns are added to the table If you are pasting an individual cell the contents of the selected cell are replaced If you are pasti...

Страница 201: ...sort in the Sort By option Select whether you want to sort the column alphabetically or numerically in the Order option This option is important when the contents of a column are numerical An alphabe...

Страница 202: ...e first six rows or the first six columns create a new table copy the information to the new table and export the new table To export a table 1 Place the insertion point in any cell of the table to be...

Страница 203: ...nt Each of these frames is an independent HTML page They all work together on the page through the use of one or more framesets which is an HTML page that defines the structure and properties for the...

Страница 204: ...ts of four separate HTML pages the frameset file and the three files containing the content that appears inside the frames When you design a page using framesets you must save each of these four files...

Страница 205: ...frame based Web pages Frames can be a great tool for Web designers but they must be implemented correctly in order to work Complete the following steps to ensure that your Web page works correctly not...

Страница 206: ...in the Frames category of the Objects panel provide a visual representation of each frameset as applied to a selected document The selected frameset surrounds the current document the document in whic...

Страница 207: ...ith a visual indicator of the frame areas in your document To create a frameset do one of the following Choose Modify Frameset Split Frame Left Right Up or Down Drag one of the frame borders into the...

Страница 208: ...ertion point in the frame where you want to insert a nested frameset 2 Do one of the following Choose Modify Frameset Split Frame Up Down Left or Right In the Frames category of the Objects panel sele...

Страница 209: ...rames panel shows the hierarchy of the frameset structure in a way that may not be apparent in the document window In the Frames panel a thick three dimensional border surrounds a frameset frames are...

Страница 210: ...212 To select a frame in the Document window Alt click Windows or Option Shift click Macintosh inside a frame To select a frameset in the Document window Click a frame border in the Document window To...

Страница 211: ...save options the Save File dialog box opens ready to save a document with its temporary file name Because each file is untitled it may be difficult for you to determine which frame file you are savin...

Страница 212: ...thin a frameset Frameset properties control the dimensions of the frames and the color and width of the borders between frames To view frame properties 1 Choose Window Properties to display the Proper...

Страница 213: ...rent frame Most browsers default to Auto No Resize restricts the size of the current frame and prevents users from dragging the frame borders You can always resize frames in the Document window howeve...

Страница 214: ...e the following default property values no borders no scroll bars and no resizing of frames when viewed in a browser To change the default values select the options you want in the Property inspector...

Страница 215: ...color 5 To select frame size options click the tabs on the RowCol Selection box to select a row or the tabs on top to select a column Then in the Value field type a number to set the size of the sele...

Страница 216: ...eld and choose from the following Units options Pixels sets the size of the selected column or row at an absolute value This option is the best choice for a frame that should always be the same size s...

Страница 217: ...n the Frames panel 2 Set the following options in the Property inspector Borders controls the border of frames within the current frameset Choose Yes to display borders in three dimensional color choo...

Страница 218: ...in an entirely new browser window To target a frame 1 Select text or an object 2 In the Link field of the Property inspector do one of the following Type the name of the file to link to Click the fold...

Страница 219: ...ameset file the browser displays only the content enclosed by the noframes tags To define content for browsers that don t support frames 1 Choose Modify Frameset Edit NoFrames Content Dreamweaver clea...

Страница 220: ...the current window or in the specified frame This action is particularly useful for changing the contents of two or more frames with one click See Go to URL on page 454 Insert Navigation Bar is used...

Страница 221: ...kTime movies Scripts Templates Library items Note Only files that fit the above categories are shown in the Assets panel There are other types of files that are sometimes called assets but they aren t...

Страница 222: ...which category of assets to list by clicking one of the category buttons on the left side of the panel The Site list and the Favorites list are both available for all categories of assets except templ...

Страница 223: ...on all pages at once See Reusing Content with Templates and Libraries on page 375 Library items are elements that you use in multiple pages when you modify a library item all pages that contain that i...

Страница 224: ...updated as necessary and the Assets panel is updated to show all the recognized assets in your site To manually rebuild the site cache from scratch and refresh the Site list Control click Windows or...

Страница 225: ...o be applied to other elements in the Design view such as images Templates are applied to the entire document To insert an asset in a document 1 Place the insertion point in the Design view where you...

Страница 226: ...he following Drag the template from the panel to the Design view Select the template and click the Apply button Changing the order of assets By default assets in a given category are listed in alphabe...

Страница 227: ...d URLs editing the asset lets you change the asset s value in the Favorites list only You can t edit colors and URLs in the Site list For templates and library items editing the asset allows you to ma...

Страница 228: ...file selected Locate in Site is unavailable for colors and URLs which do not correspond to files in the site Note that Locate in Site locates the file corresponding to the asset itself it does not lo...

Страница 229: ...tes list To add assets to your Favorites list do one of the following Select one or more assets in the Site list and click the Add to Favorites button Select one or more assets in the Site list and ch...

Страница 230: ...ou have a color named 999900 you might use a more descriptive nickname such as PageBackgroundColor or ImportantTextColor You can give nicknames only to assets in the Favorites list In the Site list th...

Страница 231: ...a new color URL template or library item You can use the Assets panel to create colors URLs templates and library items Note that you can t add new colors or URLs to the Site list the Site list conta...

Страница 232: ...library item do one of the following Click the Library category button then click the New Library Item button Select an element or text in the Document window s Design view then drag that element or t...

Страница 233: ...nation of HTML tags you can simply select the saved style from the HTML Styles panel HTML styles are supported by almost all Web browsers and save time over manually formatting text Another kind of st...

Страница 234: ...e text formatting applied in the other application but it does preserve line breaks To insert tables tabular data images and other objects into your document do one of the following Use the commands o...

Страница 235: ...log box are not the current date nor do they reflect the dates times that a visitor sees when they display your site They are examples only of the way you want to display this information To insert th...

Страница 236: ...plorer don t properly display many of the named entities Most browsers display most of the commonly used numeric entities but remembering an entity s number is harder than remembering its name Inserti...

Страница 237: ...t Paste to paste the code as text You might choose to do this if your Dreamweaver document contained instructions on writing HTML and you wanted the code to appear as text in the Document To copy and...

Страница 238: ...ake into a list 2 Click the Bulleted or Numbered List button in the Property inspector or choose Text List and select the type of list desired Unordered List Ordered List or Definition List To create...

Страница 239: ...gh 7 from the Property inspector or from the Text Size submenu HTML font sizes are relative not specific point sizes Users set the point size of the default font for their browsers this is the font si...

Страница 240: ...ph Choose None to remove a paragraph format Changing the text color You can change the color of selected text so that the new color overrides the text color set in Page Properties If no text color has...

Страница 241: ...To center elements 1 Select the element image plug in table or other page element you want to center 2 Choose Text Align Center Note You can align and center complete blocks of text you cannot align o...

Страница 242: ...tion are listed in the Chosen Fonts list in the lower left corner of the dialog box To its right is a list of all available fonts installed on your system 3 Choose from the following options To add or...

Страница 243: ...to the Chosen Fonts list Generic font families include cursive fantasy monospace sans serif and serif If none of the fonts in the Chosen Fonts list are available on the user s system the text appears...

Страница 244: ...nging fonts and styles on page 239 Changing the text color on page 240 Aligning text on page 241 HTML tags that define the structure of the document rather than its appearance for example headings par...

Страница 245: ...r or Launcher To view an existing HTML style 1 In the HTML Styles panel select a style Note that Clear Paragraph Style and Clear Selection Style are used on text that has a style applied but they are...

Страница 246: ...t or create text that has the formatting you want to use as the basis of your new HTML style You can use the Property inspector to view and apply formatting 2 In the HTML Styles panel click the New St...

Страница 247: ...e Define HTML Style dialog box appears 2 Complete steps 3 and 4 in the instructions for creating a new style based on existing text Click Clear to reset the dialog box to the default options 3 Click O...

Страница 248: ...e sheet are automatically updated as well For example imagine managing a very large Web site like Yahoo or Macromedia com You can make font and formatting changes to the entire site or many pages quic...

Страница 249: ...r change a CSS style for the h1 tag all text formatted with the h1 tag is immediately updated Note Be careful when redefining tags in a linked CSS as this can change the layout of many pages For examp...

Страница 250: ...ect those edits You can export the CSS styles found in a document to create a new CSS style sheet and attach or link to an external style sheet to apply the styles found there Dreamweaver Help consist...

Страница 251: ...t at the specified location The file name must end in the css extension 5 Select the Link or Import option to specify and create the tag used to attach the external CSS style sheet to the document and...

Страница 252: ...l style sheet Select the style you want to edit 4 Edit the style See Creating a CSS style in Dreamweaver on page 252 5 Click Save when you have finished editing styles Creating a CSS style in Dreamwea...

Страница 253: ...ve attributes empty if they are not important to the style Attributes that do not appear in the Document window are marked with an asterisk in the Style Definition dialog box Some of the CSS style att...

Страница 254: ...ft of the Document window You can also select the exact tag in the tag selector right click Windows or Control click Macintosh to reveal a context menu and choose Set Class to see a list of CSS styles...

Страница 255: ...class Red Except this sentence is controlled by the Red style span Now we re back to the Blue style span h1 Using the CSS Styles panel Use the CSS Styles panel to apply custom CSS styles to the curre...

Страница 256: ...h as the family size color and decoration of fonts and later decide that you want to make the formatting viewable on a 3 0 browser you can use the File Convert 3 0 Browser Compatible command to conver...

Страница 257: ...FONT COLOR font family FONT FACE font size FONT SIZE 1 7 font style oblique I font style italic I font weight B list style type square UL TYPE square list style type circle UL TYPE circle list style...

Страница 258: ...er 4 Configuration Dictionaries Ignore ignores this instance of the unrecognized word Ignore All ignores all instances of the unrecognized word Change replaces this instance of the unrecognized word w...

Страница 259: ...TML source code See About HTML source code searches on page 260 Text lets you search for specific text strings in the Document window A text search ignores any HTML that interrupts the string For exam...

Страница 260: ...than source code a dialog box appears letting you know that Dreamweaver is synchronizing the two views before doing the search For more information on synchronizing views see Using the Code view or C...

Страница 261: ...a tag that must be contained within the original tag for it to match For example in the code b font face Arial heading 1 font b the font tag is contained within the b tag Not Containing specifies text...

Страница 262: ...s detailed in Searching and replacing text tags and attributes on page 258 2 Choose Text Advanced from the Search For pop up menu 3 Enter the text you want to search for in the text field adjacent to...

Страница 263: ...ting additional search parameters 2 Click the Save Query button identified with a disk icon The default location where queries are saved is the Configuration Queries folder inside the Dreamweaver appl...

Страница 264: ...ter Matches Example Beginning of input or line T matches T in This good earth but not in Uncle Tom s Cabin End of input or line h matches h in teach but not in teacher The preceding character 0 or mor...

Страница 265: ...goober or snob B A nonword boundary Bb matches b in goober but nothing in book d Any digit character Equivalent to 0 9 d matches 3 in C3PO and 2 in apartment 2G D Any nondigit character Equivalent to...

Страница 266: ...style dates and European style dates W Any non alphanumeric character Equivalent to A Za z0 9_ W matches in Jake Mattie and in 100 Control Enter or Shift Enter Windows or Control Return or Shift Retur...

Страница 267: ...JPEG Joint Photographic Experts Group file format is the superior format for photographic or continuous tone images because JPEG files can contain millions of colors JPEG files tend to be larger than...

Страница 268: ...ges insert them in layers see Using Dynamic Layers on page 407 Inserting an image When you insert an image into a Dreamweaver document Dreamweaver automatically generates a reference to the file in th...

Страница 269: ...vaScript or VBScript W and H reserve space for an image on a page as it loads in a browser Dreamweaver automatically fills these fields with the image s original size Default and unlabeled values are...

Страница 270: ..._blank loads the linked file into a new unnamed browser window _parent loads the linked file into the parent frameset or window of the frame that contains the link If the frame containing the link is...

Страница 271: ...ttom of the selected object Top aligns an image to the top of the tallest item image or text in the current line Middle aligns the text baseline with the middle of the selected object TextTop aligns t...

Страница 272: ...e editing application Editing the image may also reduce its file size and thus reduce download time To resize an element 1 Select the element for example an image or Shockwave movie in the Document wi...

Страница 273: ...types of image maps give priority to client side image maps To include a server side image map in a document you must write the appropriate HTML code To create a client side image map 1 Select the ima...

Страница 274: ...ive to your document File names that begin with file are not relative Target specifies the frame or window in which the linked page should load The target option isn t available until the selected hot...

Страница 275: ...ointer hotspot tool to select a hotspot 2 Do one of the following Shift click the other hotspots you want to select Press Control A Windows or Command A Macintosh to select all of the hotspots To move...

Страница 276: ...appear 2 Insert the rollover by using one of these methods In the Objects panel s Common category click the Insert Rollover Image icon In the Objects panel s Common category drag the Insert Rollover I...

Страница 277: ...der that contains the selected file for a PNG file with the same name For example if you select an image whose source file is images myPhoto gif and the images folder also contains a file called myPho...

Страница 278: ...images with specific file extensions For example you can tell Dreamweaver to launch Fireworks when you want to edit a GIF and to launch a different image editor when you want to edit a JPEG You can se...

Страница 279: ...ther listed editors from the context menu for the image in the Document window To add a new file type to the Extensions list 1 Open the File Types Editor dialog box by doing one of the following Choos...

Страница 280: ...ment window Applying behaviors to images You can apply any available behavior to an image or image hotspot When you apply a behavior to a hotspot Dreamweaver inserts the HTML source code into the area...

Страница 281: ...ined workflow for editing optimizing and placing Web graphics files in HTML pages If you want to modify Fireworks images and tables placed in a Dreamweaver document you can launch Fireworks to make ed...

Страница 282: ...of the Objects panel 3 Navigate to the desired Fireworks file and click Open If the Fireworks file is not in the current Dreamweaver site a message appears asking whether you want to copy the file to...

Страница 283: ...you through the settings for exporting your HTML and images When prompted specify your Dreamweaver site folder as the destination for the exported images The wizard exports the images to the specified...

Страница 284: ...inks or a navigation bar A library item is a portion of an HTML file located in a folder named Library at your site root You can drag copies of a library item to any page in your Web site To export Fi...

Страница 285: ...ted at the Dreamweaver site root If necessary Fireworks prompts you to create this folder 4 Click Save to export your file Launching Fireworks from within Dreamweaver You can launch Fireworks directly...

Страница 286: ...rs these versions offer limited launch and edit capabilities Fireworks 3 does not fully support the launch and edit of placed tables and slices within tables while Fireworks 2 does not support the lau...

Страница 287: ...certain cases where you launch and optimize a Fireworks image Specifically you must be launching and optimizing an image that is not part of a Fireworks table and that does not contain a correct Desi...

Страница 288: ...orks generated images table slices and tables in a document Editing Fireworks images You can launch Fireworks to edit individual images placed in a Dreamweaver document To launch and edit a Fireworks...

Страница 289: ...eworks table Dreamweaver automatically launches the source PNG file for the entire table To launch and edit a Fireworks table placed in Dreamweaver 1 In Dreamweaver choose Window Properties to open th...

Страница 290: ...eworks lets you make changes to optimization settings animation settings and the size and area of the exported image To change optimization settings for a Fireworks image placed in Dreamweaver 1 In Dr...

Страница 291: ...pg Resizing placed Fireworks images When launching and optimizing a Fireworks image from Dreamweaver you can resize the image and select a specific image area to be exported To specify exported image...

Страница 292: ...o play the animation click the Play Stop control in the lower right area of the dialog box 3 Make edits to the animation To specify the frame disposal method select the desired frame in the list and c...

Страница 293: ...folder If Fireworks cannot find matching HTML code to update it gives you the option of inserting new HTML code into the Dreamweaver document Fireworks places the JavaScript section of the new code a...

Страница 294: ...he indicated pixel dimensions To display the file name of each original image below the corresponding thumbnail select Show Filenames Enter the number of columns for the table that displays the thumbn...

Страница 295: ...n the thumbnails link directly to the large size images 9 Click OK to create the HTML and image files for the Web photo album Fireworks launches if it s not already running and creates the thumbnails...

Страница 296: ...Chapter 12 296...

Страница 297: ...dio or video objects in a page To insert a media object in a page do one of the following Place the insertion point where you want to insert the object and click the appropriate button on the Objects...

Страница 298: ...pe that Dreamweaver doesn t handle directly can be associated with one or more external editors found on your system The editor that launches when you double click the file in the Site window is calle...

Страница 299: ...choose an application to add to the Editors list For example choose the application icon for Excel to add that application to your Editors list To remove a file type from the list 1 Select the file ty...

Страница 300: ...commands available in Dreamweaver you may want to review the three different Flash file types The Flash file fla is the source file for any project and is created in the Flash program This type of fil...

Страница 301: ...rs of your Web design team They in turn can save these files to the Configuration Flash Objects Flash Buttons folder then access these templates using the Flash button object Using Flash button object...

Страница 302: ...parameters defined If the default font for a button is not available on your system select another font from the pop up menu Keep in mind that you will not see the font you selected in the Sample fie...

Страница 303: ...using one of the following methods Double click the Flash button object Click Edit in the Property inspector Right click Windows or Control click Macintosh and choose Edit from the context menu 4 In t...

Страница 304: ...e Font pop up menu This menu lists all TrueType fonts currently loaded on your system 3 Enter a font size in the Size field these are point sizes 4 Specify style attributes like bold or italic and tex...

Страница 305: ...click Apply the dialog box remains open and you can preview the text in your document To modify or play the Flash text object use the same procedure as you would for a Flash button See Using Flash bu...

Страница 306: ...bject and embed tags that defines the button or text object This parameter defines how the movie displays within the area defined for the movie by the width and height values The choices are Default S...

Страница 307: ...ribute To insert a and preview a Flash movie 1 In the Design view of the Document window place the insertion point where you want to insert the movie 2 Insert the movie in one of the following ways Cl...

Страница 308: ...D defines the optional ActiveX ID parameter This parameter is most often used to pass information between ActiveX controls V Space and H Space specify the number of pixels of white space above below a...

Страница 309: ...the dialog box that appears select a Generator template swt file 4 If desired click the Plus button to add a name value parameter pair Then enter a name for the parameter in the Name field and a value...

Страница 310: ...dialog box that appears select a movie file 4 In the Property inspector enter the width and height of the movie in the W and H boxes Setting Shockwave properties To ensure the best results in both Mi...

Страница 311: ...to add sound to a Web page Some factors to consider before deciding on a format and method for adding sound are its purpose your audience file size sound quality and differences in browsers Note Sound...

Страница 312: ...lugin such as QuickTime Windows Media Player or RealPlayer ra ram rpm or Real Audio format has a very high degree of compression with smaller file sizes than MP3 Whole song files can be downloaded in...

Страница 313: ...appropriate fields or by resizing the plugin placeholder in the Document window These values determine the size at which the audio controls are displayed in the browser For example try a width of 144...

Страница 314: ...example 3mm Src specifies the source data file Click the folder icon to browse to a file or enter a file name Plg Url specifies the URL of the pluginspace attribute Enter the complete URL of the site...

Страница 315: ...tton in the Property inspector Choose View Plugins Play All to play all of the media elements on the selected page that rely on plugins Note Play All only applies to the current document it does not a...

Страница 316: ...rol Click Parameters in the Property inspector to enter names and values for properties that don t appear in the Property inspector There is no widely accepted standard format for parameters for Activ...

Страница 317: ...mine the value from the ActiveX properties entered already V Space and H Space specify the amount of white space in pixels above below and on both sides of the object Base specifies the URL containing...

Страница 318: ...of the Property inspector W and H specify the width and height of the applet in pixels You can also specify the following units pc picas pt points in inches mm millimeters cm centimeters or percentage...

Страница 319: ...ote There is no widely accepted standard for identifying data files for ActiveX controls Consult the documentation for the ActiveX control you re using to find out which parameters to use To open the...

Страница 320: ...Play Sound lets you play a sound For example you can play a sound effect whenever the user moves the mouse pointer over a link See Play Sound on page 458 Check Plugin lets you check to see if visitor...

Страница 321: ...nd the problem is fixed If you are interested in learning HTML using the Dreamweaver visual editing capabilities along with its Code view or Code inspector is a great way to understand how HTML works...

Страница 322: ...By placing i in your HTML you tell the browser that the subsequent text should revert to the default text The tag with a slash is called the closing tag Web browsers interpret these tags in your HTML...

Страница 323: ...page title surrounded by title tags and programming scripts such as JavaScript code that implements an image rollover in your page The text that you put between title and title will appear in the top...

Страница 324: ...ad title Purcy the cat title head body center h2 Welcome to my home page h2 p I am a two year old part Siamese cat who lives in San Francisco with my two owners p br img src cat gif width 400 height 2...

Страница 325: ...nes and ignore carriage returns you must use p tags to prevent browsers from running all your text content together The p tag adds extra white space between lines You always need the opening tag in fr...

Страница 326: ...and valign attributes set alignment of your image align for horizontal alignment can be set to left right or center and valign vertical alignment can be set to top bottom or middle The following examp...

Страница 327: ...the Comment button in the Invisibles category of the Objects panel or choose Insert Invisible Tags Comment Creating a comment generates the following HTML code Comment text To display comment markers...

Страница 328: ...r Design view that you want information about 2 Click the Reference button in the toolbar View Toolbar or choose Window Reference The Reference panel opens displaying information about the tag object...

Страница 329: ...f such code is supported by browsers However the HTML source code that Dreamweaver generates as you edit graphically is always technically valid The following are key features of Roundtrip HTML By def...

Страница 330: ...Code view and the Code inspector work in exactly the same way the only difference is that the Code inspector is in a separate window Splitting the Document window to view the code makes it easier to v...

Страница 331: ...the Document window by displaying code only and by opening the Code inspector To display both the Code and Design views Choose View Code and Design or click the Show Code and Design Views button on th...

Страница 332: ...ton in the toolbar To view only the visual design choose View Design or click the Show Design View button in the toolbar If you prefer to work with the HTML code in a separate window use the Code insp...

Страница 333: ...p wraps the code so that is viewable without horizontal scrolling This setting does not insert line breaks but makes the code easier to view Line Numbers adds line numbers along the side Highlight Inv...

Страница 334: ...seful when you use multiple nesting levels in your code for example if you have nested several tables within other tables To indent selected code 1 Select the line or lines of code you want to indent...

Страница 335: ...ts panel or choose Insert Invisible Tags Script 3 In the dialog box that appears choose the scripting language from the Language pop up menu If you are using JavaScript and are unsure of the version c...

Страница 336: ...ke your edits Otherwise the Script Properties dialog box opens and you can edit the script in the Script text box Note If there is code between the script tags the Script Properties dialog box will op...

Страница 337: ...avaScript or VB Script functions in your code from the Code Navigation pop up menu in the toolbar View Toolbar To view the script functions Click the Code Navigation button in the toolbar If your code...

Страница 338: ...and asa You can add as many as you want Editing an HTML tag in the Design view Use the Quick Tag Editor to quickly inspect and edit the HTML source of a single tag from within the Design view without...

Страница 339: ...Press Esc to exit without making any changes To open the Quick Tag editor in Edit Tag mode 1 Select the text or object that you are editing in the Design view You can also select the tag you want to...

Страница 340: ...b or Shift Tab The change you made is applied immediately rather than when you exit the Quick Tag Editor If you want to prevent this behavior deselect the Apply Changes Immediately While Editing optio...

Страница 341: ...ve the highlighting up and down in the menu use the Up and Down Arrow keys or the scroll bar To choose the highlighted attribute name press Enter Windows or Return Macintosh Alternatively double click...

Страница 342: ...ces Quick Tag Editor preferences let you control whether the edits you make in the Quick Tag Editor are automatically updated in the Document window You can also adjust the controls for the hints menu...

Страница 343: ...ntrol over exactly how Dreamweaver writes code you can change certain tag specific options in this file that you can t change using the Code Format preferences However do not edit this file unless you...

Страница 344: ...t preferences Use the following Code Format preferences to control code formatting such as indentation line length and the case of tag and attribute names For information on additional code formatting...

Страница 345: ...s if Notepad is your external editor and CR Macintosh if SimpleText is your external editor Case for Tags and Case for Attributes control the capitalization of tag and attribute names These options ar...

Страница 346: ...tra Closing Tags deletes closing tags that have no corresponding opening tag Warn When Fixing or Removing Tags displays a summary of technically invalid HTML that Dreamweaver attempted to correct The...

Страница 347: ...Remove Dreamweaver HTML Comments removes all comments that were inserted by Dreamweaver For example BeginEditable doctitle would be removed but begin body text would not because it is not a Dreamweave...

Страница 348: ...ginal Word doc file as a backup because you may not be able to reopen the HTML document in Word once you ve applied the Clean Up Word HTML feature The Clean Up Word HTML command is available for docum...

Страница 349: ...ing the Detailed tab Clean up font Tags removes HTML tags converting the default body text to size 2 HTML text Fix Invalidly Nested Tags removes the font markup tags inserted by Word outside the parag...

Страница 350: ...ps in Using BBEdit with Dreamweaver Macintosh only on page 351 instead of the following steps To set up external editors for file types other than text and HTML see Launching an external editor on pag...

Страница 351: ...weaver and then switch to BBEdit where the same element will be selected You can disable BBEdit integration if you prefer working with an older version of BBEdit or a different HTML text editor Select...

Страница 352: ...d tag is an empty tag that is if it has no closing tag the Content button is disabled If you don t see markers or highlighted text where you know ASP or CFML code exists first make sure that View Visu...

Страница 353: ...ble layer or frame For details on creating links see Creating links on page 358 For a visual representation of how your files are linked together use the site map In the site map you can add new docum...

Страница 354: ...on page 359 Note It is best to use the type of linking you prefer and are most comfortable with either site or document relative Browsing to links as opposed to typing in the paths ensures that you a...

Страница 355: ...to omit the part of the absolute URL that is the same for both the current document and the linked document providing only the portion of the path that differs To link to another file in the same fold...

Страница 356: ...ubfolder Note Always save a new file before creating a document relative path a document relative path is not valid without a definite starting point If you create a document relative path before savi...

Страница 357: ...thin that folder must be updated If you move or rename files using the Site window Dreamweaver updates all relevant links automatically To use root relative paths first define a local site in Dreamwea...

Страница 358: ...ch as a graphic movie PDF or sound file A named anchor link which jumps to a specific location within a document An e mail link which creates a new blank e mail message with the recipient s address al...

Страница 359: ...relative then click Select Note When you change the path type in the Relative To field Dreamweaver uses your choice as the default path type for any future links until you change the path type again I...

Страница 360: ...inspector and point to another open document a visible anchor in an open document or a document in the Site window The Link field updates to show the link Note The open document or site window file yo...

Страница 361: ...s Design view 2 Shift drag from the selection The Point to File icon appears as you drag 3 Point to another open document a visible anchor in an open document or a document in the Site window 4 Releas...

Страница 362: ...the selected HTML file This method works well when you are building your site and you want to create links across the site quickly For information about displaying a site map see Using the site map on...

Страница 363: ...a number sign and the name of the anchor For example To link to an anchor named top in the current document type top To link to an anchor named top in a different document in the same folder type fil...

Страница 364: ...appear as the e mail link Then do one of the following Choose Insert E Mail Link In the Common category of the Objects panel select Insert E Mail Link 2 In the Text field of the Insert E Mail Link dia...

Страница 365: ...ithout leaving the current Web page Script links can also be used to perform calculations form validations and other processing tasks when a visitor clicks a specific item To create a null link 1 Sele...

Страница 366: ...create a cache file in which to store information about all the links at your local site This cache file is created when you select the Cache option in the Site Definition dialog box and the cache fi...

Страница 367: ...d anchor in a document open on the desktop See Linking documents using the Property inspector and the Point to File icon on page 359 To change a link 1 In the site map select the page whose link you r...

Страница 368: ...document for example if the old path was document relative the new path is also document relative The type of link whether document or root relative doesn t matter The link is updated automatically A...

Страница 369: ...box appears 2 If you want to create a selection prompt type the prompt text in the Text field of the dialog box Under Options select the Select First Item After URL Change checkbox then click the Plu...

Страница 370: ...In the Document window s Design view click the jump menu object to select it The List Menu icon appears in the Property inspector 3 In the Property inspector click the List Values button 4 Make change...

Страница 371: ...over the Up image The element s appearance changes for example it may get lighter to let users know they can interact with it Down the image that appears after the element has been clicked For example...

Страница 372: ...tive Images Navigation Bar In the Common category of the Objects panel select Insert Navigation Bar The Insert Navigation Bar dialog box appears 2 In the Element Name field type a name for a navigatio...

Страница 373: ...close the Insert Navigation Bar dialog box and name the frame For information about naming a frame see Setting frame properties on page 212 4 Select image loading options Preload Images downloads the...

Страница 374: ...ines the text of a message and displays it in the status bar at the bottom left of the browser window For example you can use this action to describe the destination of a link in the status bar instea...

Страница 375: ...t change from one issue to the next or even from one story in the magazine to the next but the title and content of each story will be different A designer can create the layout of a story page for th...

Страница 376: ...collaborative environment in which a designer controls the page layouts and other people add content to the pages but aren t allowed to change the layout Dreamweaver also provides other kinds of reusa...

Страница 377: ...e do not inherit the template s Design Notes For more information see About Design Notes on page 134 Most template related operations are available only when the Design view is active If a template re...

Страница 378: ...te file even if it doesn t contain editable regions but you won t be able to modify documents based on the template until you ve created an editable region in the template To rename a template in the...

Страница 379: ...e properties Documents created from a template inherit the template s page properties except for the page title If a document is based on a template you can change that document s title but any change...

Страница 380: ...te a new document based on that template and then save the new document all the document relative links are updated to continue to point to the correct files just as you would expect When you add a ne...

Страница 381: ...icon or the Point to File icon rather than typing its name manually Dreamweaver automatically updates all documents based on the template to use the correct relative paths to home html Note In some ca...

Страница 382: ...layer editable lets you change the position of the layer as well as its contents while making a layer s contents editable lets you change only the content of the layer not its position To select the l...

Страница 383: ...t box Do the same for Locked Regions For information about using the color picker see Working with colors on page 87 3 Click the Show option to enable or disable the display of these colors in the Doc...

Страница 384: ...r outlines in the appropriate highlight color A small tab appears at the upper left of each editable region showing the name of the editable region In template files only editable regions are marked w...

Страница 385: ...ate that the document is based on This highlighted rectangle is there to remind you that the document is based on a template and that you can t change anything outside the editable regions Note If you...

Страница 386: ...on named Edit_Region might look like this BeginEditable Edit_Region Edit_Region EndEditable The HTML for an editable table named Editable_Table might look like this BeginEditable Editable_Table table...

Страница 387: ...mweaver discards all changes you make to locked regions so be careful to type only in editable regions Locking an editable region If you ve marked a region of your template file as editable and you wa...

Страница 388: ...sheets on page 248 Animating your layers on page 425 and Using Behaviors on page 435 Creating documents based on templates You can use a template as a starting point for a new document or apply a temp...

Страница 389: ...emplate has been applied to a document is equivalent to saying that the document is based on the template Those phrases are used interchangeably When you apply a template to an existing document that...

Страница 390: ...document match the editable regions of the new template you re applying but the orphaned content dialog box appears anyway you can click Cancel and the new template will not be applied to the document...

Страница 391: ...sed on a template When you make a change to a template Dreamweaver prompts you to update the pages based on the template You can also use the update commands to manually update the current page or the...

Страница 392: ...ected the Show Log option Dreamweaver provides information about the files it attempts to update including information on whether they were updated successfully Exporting and importing XML content You...

Страница 393: ...orted to the XML file To import XML content 1 Choose File Import Import XML into Template 2 Select the XML file and click Open Dreamweaver creates a new document based on the template specified in the...

Страница 394: ...y tag one that uses only a single tag such as img instead of an opening tag and a closing tag containing text or other material must end with a slash just before the closing angle bracket For example...

Страница 395: ...each editable region is included as a CDATA section In this example the doctitle tag identifies the title of the document and the News_Story tag identifies the editable region xml version 1 0 newstemp...

Страница 396: ...ing department is still ironing out the details of just what the slogan should say If you create a library item to contain the slogan and use that library item on every page then when the marketing de...

Страница 397: ...items by setting Highlighting preferences To change the highlight color for library items 1 Choose Edit Preferences and select the Highlighting category 2 Click the Library Items color box and select...

Страница 398: ...item If you choose not to update the documents remain associated with the library item you can update them later by choosing Modify Library Update Pages Other kinds of changes to library items includ...

Страница 399: ...s Choose Modify Library Update Current Page To update the entire site or all documents that use a particular library item 1 Choose Modify Library Update Pages The Update Pages dialog box appears 2 In...

Страница 400: ...documents that use the item To update all documents in the site that use the item click Update To refrain from updating any documents that use the item click Don t Update To delete a library item fro...

Страница 401: ...er does not copy the associated JavaScript functions into the library item Instead when you insert the library item into a document Dreamweaver automatically inserts the appropriate JavaScript functio...

Страница 402: ...rary item then select the original library item and delete it by clicking the Delete button in the Assets panel 8 In the Document window select all of the elements that make up the library item Be car...

Страница 403: ...can t edit this information Open opens the library item s source file for editing This is equivalent to selecting the item in the Assets panel and clicking the Edit button Detach from Original breaks...

Страница 404: ...include instructions Placing a server side include in a document inserts a reference to an external file it doesn t insert the contents of the specified file in the current document Dreamweaver displ...

Страница 405: ...r to examine all files not just files with a certain extension for server side includes Parsing a file for server side includes takes a little extra time though so pages that the server parses are ser...

Страница 406: ...pears looking for example like this include virtual uber html footer html To edit the content associated with the included file you must open the file Note Server side includes cannot contain head or...

Страница 407: ...e that appear and then fade off the page All of this can be done using layers in Macromedia Dreamweaver without having to do any JavaScript or HTML coding A disadvantage to using layers in your Web pa...

Страница 408: ...t the top of the page just after the body tag If you create a nested layer Dreamweaver inserts the code inside the tag that defines the parent layer To change the default tag see Setting Layers prefer...

Страница 409: ...create them on the page turn on the Prevent Overlaps option in the Layers panel or choose Modify Arrange Prevent Layer Overlaps See Preventing layer overlaps on page 423 To create a layer do one of t...

Страница 410: ...anager the layers in your document Choose Window Layers or press F11 to open the Layers panel Layers are displayed as a stacked list of names the first created layer at the bottom of the stacking orde...

Страница 411: ...pe Resize Fix Otherwise layers will lose their position in 4 0 versions of Netscape To create a nested layer do one of the following To insert a nested layer place the insertion point inside an existi...

Страница 412: ...ries of an existing layer a nested layer Hold down Alt Windows or Option Macintosh to temporarily change this setting while you re drawing a layer Netscape 4 Compatibility inserts JavaScript in the he...

Страница 413: ...side a layer If multiple layers are selected Control Shift click Windows or Command Shift click Macintosh inside a layer This will deselect all other layers and select only the one that you chose Clic...

Страница 414: ...tosh while pressing an arrow key For information about setting the grid snapping increment see Snapping layers to the grid on page 416 In the Property inspector type a value for width and height Resiz...

Страница 415: ...e Shift and an arrow key to move the layer by the current grid snapping increment For information about setting the grid snapping increment see Snapping layers to the grid on page 416 Aligning layers...

Страница 416: ...tings 1 Click View Grid Edit Grid to open the Grid Settings dialog cell 2 Do any of the following Click the arrow next to the color swatch and select a color from the palette or type the hexadecimal n...

Страница 417: ...he default values for location and size are in pixels px You can also specify the following units pc picas pt points in inches mm millimeters cm centimeters or percentage of the parent s value The abb...

Страница 418: ...so that all of the layer s contents ares visible The layer expands downward and to the right Hidden maintains the layer s size and clips any content that doesn t fit No scroll bars are provided Scroll...

Страница 419: ...ify the following units pc picas pt points in inches mm millimeters cm centimeters or percentage of the parent s value The abbreviations must follow the value without a space for example 3mm Vis deter...

Страница 420: ...In the Z column click the number of the layer you are changing Type a higher number than the existing number to move the layer up in the stacking order or type a lower number to move the layer down i...

Страница 421: ...and tables in layout view to create your layout see Designing Page Layout on page 167 some users prefer to work with layers and tables Dreamweaver allows you to create your layout using layers than c...

Страница 422: ...is on you cannot edit the resulting table by dragging its columns When it is off the resulting table will not contain transparent GIFs but its appearance may vary slightly in different browsers Cente...

Страница 423: ...ou activate this option after creating overlapping layers drag the overlapping layer to move it away from the other layer Dreamweaver does not automatically fix existing overlapping layers in the page...

Страница 424: ...e converted file in a new untitled window If you selected Convert Layers to Table or Both all layers are replaced with a single table that preserves the original positioning Note Overlapping layers ca...

Страница 425: ...mage tag so different images will appear over a period of time in the page The layer functions of timelines work only in 4 0 or later browsers To see the JavaScript code generated by a timeline open t...

Страница 426: ...mes per second is a good average rate to use for most browsers running on common Windows and Macintosh systems Faster rates may not improve performance Browsers always play every frame of the animatio...

Страница 427: ...your page on page 409 To create a timeline animation 1 To animate a layer move the layer to where it should be when the animation begins 2 Choose Window Timelines 3 Select the layer you want to animat...

Страница 428: ...w the animation on the page Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation Creating a timeline by dragging a path If you want to create...

Страница 429: ...or all of the bars associated with the animation press Shift to select more than one bar at a time and drag left or right To shift the location of an entire animation path select the entire bar and th...

Страница 430: ...of an image click the folder icon next to the Src field in the Property inspector to browse to and select a new image To change the visibility of a layer choose inherit visible or hidden from the pop...

Страница 431: ...ion sequence that you like you can copy and paste it in another area of the current timeline in another timeline in the same document or in a timeline in another document You can also copy and paste m...

Страница 432: ...See Applying an animation sequence to a different object on page 432 Applying an animation sequence to a different object To save time you can create an animation sequence once and apply it to each of...

Страница 433: ...o extend the motion over more frames Making the animation bar longer creates more data points between the start and end point of the movement and also makes the object move more slowly Try increasing...

Страница 434: ...more layers This action is useful for showing information as the user interacts with the page See Show Hide Layers on page 465 Play Timeline and Stop Timeline let users start and stop a timeline by c...

Страница 435: ...ed with links whereas onLoad is an event associated with images and with the body section of the document An action consists of prewritten JavaScript code that performs a specific task such as opening...

Страница 436: ...etically by event If there are several actions for the same event the actions appear in the order in which they will execute If no behaviors appear in the behavior list then no behaviors have been att...

Страница 437: ...fter clicking in the text field the browser generates an onBlur event for the text field onBounce IE4 IE5 is generated when a marquee element s contents have reached the boundary of the marquee onChan...

Страница 438: ...specified element The specified element is usually an image or a link attached to an image This event is often used in conjunction with the Swap Image Restore behavior to return an image to its origi...

Страница 439: ...n the order in which they re listed in the Actions column of the Behaviors panel For information on changing the order of actions see Changing a behavior on page 442 To attach a behavior 1 Select an e...

Страница 440: ...he selected object and on the browsers specified in the Show Events For submenu Events may be dimmed if the relevant objects do not yet exist on the page or if the selected object cannot receive event...

Страница 441: ...nt The problem with using a number sign is that when a visitor clicks the link the browser jumps to the top of the page Clicking the JavaScript null link has no effect at all on the page so the JavaSc...

Страница 442: ...m at that frame The action appears in the Behaviors panel with an event indicating the frame number at which the action is triggered A minus sign appears in the Behaviors channel of the timeline frame...

Страница 443: ...f you are proficient with JavaScript you can write new actions and add them to the Actions pop up menu in the Behaviors panel For more information see Extending Dreamweaver Downloading and installing...

Страница 444: ...Web keep JavaScript turned off in their browsers For best cross platform results provide alternative interfaces enclosed in noscript tags so that people without JavaScript can still use your site Refe...

Страница 445: ...s without error OK OK Set Text of Text Field OK Fails without error OK OK Show Hide Layers Fails without error Fails without error Fails without error Fails without error Swap Image OK Fails without e...

Страница 446: ...ngth 0 history back If you have encapsulated your code in a function type only the function name for example goBack 4 Click OK 5 Check that the default event is the one you want If it isn t choose ano...

Страница 447: ...lick OK 7 Check that the default event is the one you want When the event occurs the action will execute and the property will change If it isn t choose another event from the pop up menu If the event...

Страница 448: ...rsion you specified or later and what to do otherwise The options are Go to URL Go to Alt URL and Stay on This Page 8 Choose an option from the Other Browsers pop up menu to specify what to do if the...

Страница 449: ...ess To make visitors with the plugin stay on the same page leave this field blank 5 In the Otherwise Go To URL field specify an alternative URL for visitors who don t have the plugin To make visitors...

Страница 450: ...ill be used to make the movie play select that image 4 Open the Behaviors panel Window Behaviors 5 Click the Plus button and choose Control Shockwave or Flash from the Actions pop up menu A parameters...

Страница 451: ...ect the body tag by clicking body in the tag selector at the bottom of the Document window 3 Open the Behaviors panel 4 Click the Plus button and choose Drag Layer from the Actions pop up menu If Drag...

Страница 452: ...as a title bar or drawer handle Do not set this option if you want the visitor to be able to click anywhere in the layer to drag it 12 Choose any While Dragging options that you want to use Select Bri...

Страница 453: ...TRIGHT in a form field you could write a function that displays a message in the form field depending on how close the value is to the drop zone or you could call another function to show or hide a la...

Страница 454: ...t means If curDrag is not an object or if it already has an MM_SNAPPED value don t bother executing the rest of the function Go to URL The Go to URL action opens a new page in the current window or in...

Страница 455: ...create them see Inserting a jump menu on page 369 You can edit an existing jump menu in either of two ways You can edit and rearrange menu items change the files to jump to and change the window in w...

Страница 456: ...rom the Actions pop up menu 3 In the Choose Jump Menu pop up menu choose a menu for the Go button to activate 4 Click OK Open Browser Window Use the Open Browser Window action to open a URL in a new w...

Страница 457: ...w Windows or close the window or quit the application Macintosh from the new window Scrollbars as Needed specifies that scroll bars should appear if the content extends beyond the visible area If you...

Страница 458: ...Check that the default event is the one you want If it isn t choose another event from the pop up menu If the events you want are not listed change the target browser in the Show Events For pop up men...

Страница 459: ...e dialog box so you do not need to manually add Preload Images when using Swap Image To use the Preload Images action 1 Select an object and open the Behaviors panel 2 Click the Plus button and choose...

Страница 460: ...the Set Nav Bar Image action associated with the event you re altering 3 In the Basic tab of the Set Nav Bar Image dialog box select image edit options To set multiple images for a navigation bar butt...

Страница 461: ...ede it with a backslash Example The URL for this page is window location and today is new Date To create a frameset Choose Modify Frameset Split Frame Left Right Up or Down For more information see Cr...

Страница 462: ...y a brace precede it with a backslash Example The URL for this page is window location and today is new Date To create a layer 1 Choose Insert Layer For more information see Creating layers on your pa...

Страница 463: ...ion call property global variable or other expression in the text To embed a JavaScript expression place it inside braces To display a brace precede it with a backslash Example The URL for this page i...

Страница 464: ...ee Creating Forms on page 481 2 In the Property inspector type a name for the text field Make sure the name is unique on the page don t use the same name for multiple elements on the same page even if...

Страница 465: ...el 3 Click the Plus button and choose Show Hide Layers from the Actions pop up menu If Show Hide Layers is unavailable you probably have a layer selected Because layers do not accept events in both 4...

Страница 466: ...ayer Property inspector 4 With the layer still selected set the background color of the layer to the same color as the page background in the Property inspector 5 Click inside the layer which should n...

Страница 467: ...er a name for the image in the leftmost text field The Swap Image action still works if you do not name your images it names unnamed images automatically when you attach the behavior to an object Howe...

Страница 468: ...channel of the Timelines panel to make portions of the timeline loop a specific number of times to create a Rewind link or button or to let the user jump to different parts of the animation To use the...

Страница 469: ...er a link image or other object The Play Timeline action is automatically attached to the body tag with the onLoad event when you select Autoplay in the Timelines panel To use the Play Timeline and St...

Страница 470: ...fills out the form select a text field and choose Window Behaviors To validate multiple fields when the user submits the form click the form tag in the tag selector in the bottom left corner of the D...

Страница 471: ...u are validating individual fields check that the default event is onBlur or onChange If it isn t select onBlur or onChange from the pop up menu Both of these events trigger the Validate Form action w...

Страница 472: ...Chapter 18 472...

Страница 473: ...rm For more information about writing scripts see Inserting scripts on page 335 The debugger checks your code for syntax errors first then runs with the browser to help you check for logical errors If...

Страница 474: ...gger warning box that appears then click Grant in the Java Security dialog box Note If you have already accepted a Macromedia Security Certificate the Java Security dialog box may not appear 3 If you...

Страница 475: ...rrors window To view the error description Select an error in the JavaScript Syntax Errors window A description of the error will appear in the Detailed Description area To go to the selected error in...

Страница 476: ...t window After the debugger stops at a breakpoint you can step through your code execute one statement at a time This allows you to see if the program executes as it should The debugger can even step...

Страница 477: ...the next valid line of code or place the insertion point there if the line already has a breakpoint set on it If there are no valid lines on which a breakpoint can be set you will hear a beep To set...

Страница 478: ...If the function is correct you can step out of it to allow the debugger to run until the function returns The program will stop again at the next statement after the function call location If you atte...

Страница 479: ...add a variable to your variable list do one of the following Select the name of the variable in the code portion of the JavaScript Debugger window Click the Plus button and press Enter Click the Plus...

Страница 480: ...ariable list item 1 Select the item in the variable list 2 Click the Minus button To edit a value 1 Select the item in the variable list 2 Click the value in the value list 3 Edit the value by typing...

Страница 481: ...ch as a CGI script You can t collect form data without using a processing script You can use Macromedia Dreamweaver to create a variety of form objects such as text fields password fields radio button...

Страница 482: ...nd Insert Form Objects The Forms category provides the following buttons Insert Form inserts a form in the document Dreamweaver inserts opening and closing form tags in the HTML source code Any additi...

Страница 483: ...used in place of Submit buttons to make graphical buttons Insert Hidden field inserts a field in the document in which user data can be stored Hidden fields let you store information entered by a use...

Страница 484: ...is created a dotted red outline appears in the Document window If you don t see this outline check that View Visual Aids Invisible Elements is selected 2 In the document click the form outline to sel...

Страница 485: ...cated leading to unexpected processing results Nor should you use GET when dealing with credit card numbers or other confidential information as this method of passing information is not secure Choose...

Страница 486: ...text field provides a visitor with a larger area in which to type a response You can easily determine the number of characters or number of lines a visitor has available in which to write text Passwor...

Страница 487: ...ing Leave the field blank allowing users to type as much text as they want If the user s input exceeds the character width length of the text field the text will scroll Type a number to set the maximu...

Страница 488: ...pop upmenu selectasettingtosethowauser sinputwillbedisplayed when a user types more information than can be displayed in the text area Select Off or Default if you want to prevent text from wrapping t...

Страница 489: ...Note Confirm with your server s administrator that anonymous file uploads are allowed before using the file field If you insert a file field with Dreamweaver you must manually insert ENCTYPE multipart...

Страница 490: ...n the document when you insert a hidden field If you insert a hidden field and don t see a marker choose View Visual Aids Invisible Elements to reveal the marker To create a hidden field 1 Place the i...

Страница 491: ...ned selection objects A user clicks a checkbox or radio button to make a choice The difference between checkboxes and radio buttons is how they operate With checkboxes users toggle each individual res...

Страница 492: ...inside the form outline then do one of the following Choose Insert Form Object Check Box In the Objects panel s Forms category click the Insert Checkbox icon 2 In the Property inspector s Checkbox Na...

Страница 493: ...o indicate a user chose skiing 4 For Initial State click Checked if you want an option to appear selected when the form first loads in the browser Tip To add additional radio buttons to the group sele...

Страница 494: ...line height is set to 4 Scroll bars appear when the number you specify is less than the number of options the list contains 5 If you want to allow users to select more than one option in the list sele...

Страница 495: ...u 2 In the Property inspector s List Menu field type a unique name for the menu 3 Under Type select Menu 4 Click List Values to add the option choices The List Values dialog box appears 5 With the ins...

Страница 496: ...eate a text button 1 Place the insertion point inside the form outline then do one of the following Choose Insert Form Object Button In the Objects panel s Forms category click the Insert Button icon...

Страница 497: ...ing JavaScript code To see how to attach a behavior to an object see Attaching a behavior on page 439 To create a graphical Submit button 1 In the document place the insertion point inside the form ou...

Страница 498: ...don t overlap To add multiple objects to a form 1 Place the insertion point inside the form outline then do one of the following Choose an object from the Insert Form Object menu In the Objects panel...

Страница 499: ...Submit button in a form 2 Attach the Call JavaScript behavior to the button See Call JavaScript on page 446 3 In the JavaScript text box that appears while attaching the behavior enter processForm 4 A...

Страница 500: ...reated for Name to check that the user entered text in the Name field When applying behaviors you need to make sure that every form object in your document and every other object has a unique name If...

Страница 501: ...rs that do not support styles layers plug ins or JavaScript See Checking for browser compatibility on page 502 For pages that will fail badly in older browsers consider using the Check Browser behavio...

Страница 502: ...d maintain it Defining and implementing a version control system either with the tools Dreamweaver includes or through an external version control application is an important process Use the Macromedi...

Страница 503: ...y open 5 To save the report for later reference choose File Save from the browser Note As the target browser report is a temporary file it will be lost if you don t save it before browsing to another...

Страница 504: ...put the file on a remote server and view it from there For more information see Root relative paths on page 357 You can define up to 20 browsers for previewing All the browsers you define appear on th...

Страница 505: ...le In some cases links specified as root relative paths do not work correctly when opened in a browser with a file path This also applies when you run a target browser check See Previewing in browsers...

Страница 506: ...nks in the specified files it opens the Link Checker dialog box This dialog box displays a list of broken links external links links that Dreamweaver can t check because they are outside the site and...

Страница 507: ...oken links and image references directly in the Link Checker dialog box or you can open files from the list and fix links in the Property inspector To fix links in the Link Checker dialog box 1 In the...

Страница 508: ...height and width values The W and H labels change from bold to normal type 3 Save the file As links are fixed their entries disappear from the Broken Links list If an entry still appears in the list a...

Страница 509: ...ction speed in the United States is 28 8 If you are designing for an intranet you may want to choose 1500 T1 speed Using Reports to test a site When testing your site you can compile and generate repo...

Страница 510: ...ct a report type by clicking the appropriate box You can select one report or select several to run them simultaneously Combinable Nested Font Tags creates a report that lists all nested font tags tha...

Страница 511: ...A list of results is displayed in the Results window To sort the results click the column heading you want to sort by You can sort by file name line number or description You can also run several diff...

Страница 512: ...Chapter 21 512...

Страница 513: ...aver on page 93 Rearrange the objects in the Objects panel so that the ones you use most often are always visible create new categories to reorganize the objects or add new objects See Modifying the O...

Страница 514: ...sions txt in Dreamweaver or in a text editor 3 Cut the line corresponding to the new default and paste it at the beginning of the file to make it the first line of the file 4 Save the file quit Dreamw...

Страница 515: ...HTML to be inserted into your file or an HTML form that lets you specify data to be inserted such as the text of a comment A JavaScript file optional that generates the HTML to be inserted into your f...

Страница 516: ...the Dreamweaver code editors the Document window s Code view or the Code inspector as your text editor for creating a simple object you must first delete all the default tags that appear in the code e...

Страница 517: ...e you start Dreamweaver For basic information about XML see About XML on page 394 By editing the menus xml file you can add change and remove keyboard shortcuts for menu items though in most cases it...

Страница 518: ...mmands Edit Command List A dialog box appears listing all of the commands whose names you can change Commands that are in the default Commands menu don t appear on this list and can t be edited using...

Страница 519: ...3 Open menus xml in a text editor such as BBEdit HomeSite or Wordpad Don t open it in Dreamweaver 4 Cut an entire menuitem tag from the menuitem at the beginning to the at the end 5 Place the inserti...

Страница 520: ...hange the name of any menu item or menu by editing the menus xml file For information about the syntax of the menus xml file see About menus xml tag syntax on page 522 To change the name of a menu ite...

Страница 521: ...reassign a keyboard shortcut cross it off on a printed copy of the matrix for future reference 5 If you re reassigning a keyboard shortcut find the menu item that the shortcut is assigned to and remov...

Страница 522: ...ch described by a menuitem tag and its attributes A menu can also contain separators described by separator tags and submenus In addition to the keyboard shortcuts associated with menu items Dreamweav...

Страница 523: ...id values are dreamweaver and ultradev The default is for the menu bar to be available in both Dreamweaver and UltraDev id The menu ID for the menu bar Each menu ID in the menus xml file should be uni...

Страница 524: ...alid values are win and mac Contents This tag can contain one or more menuitem tags and one or more separator tags It can also contain other menu tags to create submenus and standard HTML comment tags...

Страница 525: ...ates which platform the item appears on Valid values are win meaning Windows only or mac meaning Macintosh only If you don t specify the platform attribute the menu item appears on both platforms If y...

Страница 526: ...k mark next to it in the menu if the expression evaluates as true the item is displayed with a check mark dynamic If present indicates that a menu item is to be determined dynamically by an HTML file...

Страница 527: ...on in which the shortcut list is available Valid values are dreamweaver and ultradev The default is for the shortcut list to be available in both Dreamweaver and UltraDev id The ID for the shortcut li...

Страница 528: ...he keyboard shortcut The file attribute overrides the command attribute You must specify either file or command for each shortcut arguments Provides arguments for Dreamweaver to pass to the code in th...

Страница 529: ...ce of the original It s a good idea to first make a backup of the original so you can restore it later if you need to 6 Start Dreamweaver again to see the changes You should change only the appearance...

Страница 530: ...ion The omit line in the options section is reserved for future use it currently does not affect HTML source formatting You can mark an individual tag as belonging to an indentation group igroup in th...

Страница 531: ...pecify capitalization is samecase which specifies that the value of an attribute is to be capitalized the same way that the attribute s name is capitalized For example align samecase indicates that if...

Страница 532: ...Browser Check dialog box and in the target check report It must be unique The second line is reserved for the designator PROFILE_TYPE BROWSER_PROFILE Dreamweaver uses this line to determine which doc...

Страница 533: ...appears in an HTML document tagName is an explanatory name for the tag for example the name for the HR tag is Horizontal Rule The NAME attribute is optional If specified tagName is used in error mess...

Страница 534: ...htmlmsg This browser ignores the CODE STYLE CODE attribute for the CODE APPLET CODE tag VSpace Width Creating and editing a browser profile Create a browser profile by modifying an existing profile Fo...

Страница 535: ...butes that are not supported by the browser This step is probably unnecessary if you are creating a profile for a new version of Netscape Navigator or Microsoft Internet Explorer because browsers rare...

Страница 536: ...s from history steps on page 165 But to add more advanced capabilities to Dreamweaver you must write extensions in either JavaScript or C For information about the DOM and the API see Extending Dreamw...

Страница 537: ...ays non HTML tags For example ASP files contain in addition to regular HTML ASP code for the server to interpret ASP code looks something like a tag but is marked by a pair of delimiters it begins wit...

Страница 538: ...in that they don t surround content and don t have closing tags The happy tag shown above is a normal HTML style tag it starts with an opening happy tag contains data between opening and closing tags...

Страница 539: ...L file The HTML validator in Dreamweaver ignores tags that are specified as marker_model However the validator doesn t ignore the contents of such a tag so even though the tag itself can appear anywhe...

Страница 540: ...tag If this is set to true the default Dreamweaver parses the attributes if it s set to false Dreamweaver ignores everything until the next closing angle bracket that appears outside quotation marks...

Страница 541: ...e contents of the happy tag the word Joe are not rendered instead the start and end tags and their contents are displayed as a single icon For nonempty tags that have a render_contents value of true t...

Страница 542: ...n a browser requests a JSP page from a JSP enabled server the server interprets the JSP code and sends the resulting HTML to the requesting browser The browser receives only HTML not JSP code For more...

Страница 543: ...described in HTML and Web technologies resources on page 25 Dreamweaver recognizes about fifty ColdFusion tags see the ColdFusion xml file in the Configuration ThirdPartyTags folder for details If Vie...

Страница 544: ...d party tags you may want to change the Dreamweaver encoding behavior when you re working with files containing third party tags To allow Dreamweaver to rewrite HTML in more kinds of files 1 Choose Ed...

Страница 545: ...File menu Action Windows Macintosh New document Control N Command N Open an HTML file Control O or drag the file from the Explorer or Site window to the Document window Command O Open in frame Control...

Страница 546: ...ect All Control A Command A Select parent tag Control Shift Command Shift Select child Control Shift Command Shift Find and Replace Control F Command F Find next F3 Command G Indent Code Control Shift...

Страница 547: ...d Shift J Action Windows Macintosh Switch to design view Control Tab Option Tab Open Quick Tag Editor Control T Command T Select parent tag Control Shift Command Shift Balance Braces Control Command S...

Страница 548: ...Shift Page Down Shift Page Down Select word left Control Shift Left Command Shift Left Select word right Control Shift Right Command Shift Right Move to start of line Home Home Move to end of line En...

Страница 549: ...ected item to new location Drag selected item to new location Copy text or object to another place in the page Control drag selected item to new location Option drag selected item to new location Sele...

Страница 550: ...ly Headings 1 through 6 to a paragraph Control 1 through 6 Command 1 through 6 Alignment Left Control Shift Alt L Command Shift Option L Alignment Center Control Shift Alt C Command Shift Option C Ali...

Страница 551: ...hyphen Merge selected table cells Control Alt M Command Option M Split table cells Control Alt S Command Option S Update table layout forces a redraw when in faster table editing mode Control Spacebar...

Страница 552: ...ing increment Control Shift arrow keys Option Shift arrow keys Align selected layers to the Top Bottom Left Right of the last selected layer Control Up Down Left Right Arrow Command Up Down Left Right...

Страница 553: ...o a file in the Site window Select the text image or object then Shift drag the selection to a file in the Site window Drag and drop to create a hyperlink using the Property inspector Select the text...

Страница 554: ...ift Option O Get selected files or folders from remote FTP site Control Shift D or drag files from Remote to Local pane in Site window Command Shift D or drag files from Remote to Local pane in Site w...

Страница 555: ...Hide link Control Shift Y Command Shift Y Show page titles Control Shift T Command Shift T Rename file F2 n a Zoom in site map Control plus Command plus Zoom out site map Control hyphen Command hyphen...

Страница 556: ...indow to the Document window Image Control Alt I Command Option I Table Control Alt T Command Option T Flash movie Control Alt F Command Option F Shockwave Director movie Control Alt D Command Option...

Страница 557: ...11 HTML Styles Control F11 Command F11 Behaviors Shift F3 Shift F3 History Shift F10 Shift F10 Timelines Shift F9 Shift F9 Code inspector F10 F10 Frames Shift F2 Shift F2 Layers F2 F2 Reference Contro...

Страница 558: ...d Files or Folders Insert Shockwave Director Movie Check Out Selected Files or Folders E Launch External Editor Edit Style Sheet F Find and Replace Insert Flash Movie G Find Next Macintosh only Show H...

Страница 559: ...de Link Z Undo Redo 0 zero Set Paragraph Format to None 1 Apply Heading 1 to Paragraph 2 Apply Heading 2 to Paragraph 3 Apply Heading 3 to Paragraph 4 Apply Heading 4 to Paragraph 5 Apply Heading 5 to...

Страница 560: ...or Command Option Macintosh Control Shift Alt Windows or Command Shift Option Macintosh F1 Using Dreamweav er Help Reference Dreamweave r Support Center Reference Panel F2 Layers Frames Object panel F...

Страница 561: ...11 Assets CSS Styles HTML Styles F12 Preview in Primary Browser Debug in Primary Browser Preview in Secondary Browser Debug in Secondary Browser Function Key No modifier Shift Alt Windows or Option Ma...

Страница 562: ...Appendix 562...

Страница 563: ...Adjust Position command 158 Align image property 270 Align with Selection command 159 aligning layers 415 options 271 page elements 271 text 241 tracing images 159 All Info tab Design Notes 136 Alt i...

Страница 564: ...s 444 defined 435 deleting 442 third party 443 triggering 439 Behaviors panel 436 bitmaps resizing 272 See also images body tag 159 bold text 239 Border image property 270 borders adding to a table 19...

Страница 565: ...333 writing and editing code 334 ColdFusion Markup Language CFML and Dreamweaver 330 editing CFML tags 352 overview 543 tags customizing parsing and appearance 537 color box option 87 Color command 2...

Страница 566: ...vaScript debugger Default Color button 87 default file type changing 514 Define HTML Style dialog box 245 dependent files getting 144 putting 145 showing and hiding 121 Design Notes adding status choi...

Страница 567: ...er Help Pages 14 Dreamweaver libraries exporting from Fireworks 285 Dreamweaver Support Center 16 E Edit button image Property inspector 270 Edit Font List command 242 Edit NoFrames Content command 21...

Страница 568: ...pes default 514 uploading 144 viewing in Site window 115 Find In options 259 finding and replacing See searching firewalls defining host and port 111 options 125 Fireworks Design Notes in 140 Firework...

Страница 569: ...s option Code Format preferences 344 Frames panel 209 frames per second fps 425 framesets 206 217 borders 217 naming 212 nested 208 predefined inserting 206 properties 214 saving 211 selecting 208 tar...

Страница 570: ...l 237 CSS attributes conversion 257 editing with BBEdit 351 external editors 350 formatting in existing documents 348 formatting preferences overview 343 formatting preferences setting 344 formatting...

Страница 571: ...es 307 Flash Text objects 304 Generator objects 309 images 268 Java applets 318 media elements 297 rollover images 276 server side includes 405 Shockwave movies 310 special characters 236 inserting as...

Страница 572: ...ors 465 changing visibility with Layers panel 420 converting for 3 0 browsers 424 converting to tables 422 creating 409 draggable 453 drawing multiple 409 in table design 422 inserting 409 manipulatin...

Страница 573: ...400 editing 398 404 editing behaviors in 401 exporting from Fireworks 285 making editable in documents 401 overview 396 library items continued preferences 397 properties 403 Line Breaks option Code F...

Страница 574: ...tion bar adding images to 372 creating 371 displaying horizontally in a page 373 displaying vertically in a page 373 image states 371 inserting in a table 373 modifying elements 374 nesting 412 frames...

Страница 575: ...h tags 240 Parameters dialog box 319 Paste as Text command 234 pasting history steps 164 paths absolute 354 document relative 355 root relative 357 personal spelling dictionary 258 photographs 267 PHP...

Страница 576: ...ng files on a remote server 144 Q Quick Tag Editor attributes hints menu 341 opening 338 overview 338 preferences 342 QuickTime movies as assets See assets inserting 313 R radio buttons 491 Record Pat...

Страница 577: ...button 263 saving documents 151 files in frames and framesets 211 searches 263 script links changing 368 creating 365 scripts as assets See assets balanced braces 337 editing 336 editing external 335...

Страница 578: ...cting multiple pages in 119 Set as Home Page command 120 shortcuts 555 show hidden files 121 Show Page Titles option 120 showing dependent files in 121 updating after changes 121 viewing 113 viewing a...

Страница 579: ...preferences 76 setting text behavior 463 Window Size pop up menu 74 stepping through code 478 Stop Timeline action 469 Strikethrough Default Color button 87 Strings option Code Colors preferences 344...

Страница 580: ...338 head 323 HTML 322 in browser profiles 532 invalid 329 menus xml syntax 522 overlapping 329 tags continued removing 342 searches 260 selecting 154 specifications 538 table 189 tagspec 538 text form...

Страница 581: ...paths 428 controlling with behaviors 434 creating 427 in templates 388 keyframes 427 looping 429 timelines continued modifying 429 multiple 431 playback head 425 playing and stopping using behaviors 4...

Страница 582: ...W and H image properties 269 Warn When Fixing or Removing Tags option Code Rewriting preferences 346 Web design levels of experience in 20 Web photo albums creating 294 Web Server Info 124 Web server...

Отзывы:

Нет отзывов