manualshive.com logo in svg

MACROMEDIA 38028779 - Macromedia Dreamweaver - Mac, Using Manual, Page: 385 / 582

Share
Download
MACROMEDIA 38028779 - Macromedia Dreamweaver - Mac Using Manual Download Page 385

Reusing Content with Templates and Libraries

385

In documents based on templates, in addition to the editable-region outlines, the 
entire page is surrounded by a different-colored outline, with a tab at the upper 
right giving the name of the template 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 try to edit a locked region in a document based on a template when 

highlighting is turned off, the mouse pointer changes to indicate that you can’t click in 
a locked region. 

Only editable 
regions can 
be modified

Highlighted 
boundary 
around page

Summary of Contents for 38028779 - Macromedia Dreamweaver - Mac

Page 1: ...macromedia Using Dreamweaver...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 74: ...le body of the document TheWindowSizepop upmenuletsyouresizetheDocumentwindowtopredetermined orcustomdimensions See ResizingtheDocumentwindow onpage75 To the right of the Window Size pop up menu you l...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 148: ...Chapter 4 148...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 296: ...Chapter 12 296...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 472: ...Chapter 18 472...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 512: ...Chapter 21 512...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 562: ...Appendix 562...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Reviews:

No comments