|
[ Pobierz całość w formacie PDF ]
.Here s one method of activating your page: 044931-6 ch02.F 7/18/02 6:55 AM Page 51Chapter 2 &' QuickStart511.In Fireworks, or another graphics program, create a series of rollover buttons with oneimage for each state.You need at least two states (Up and Over), and you can use asmany as four (Down and Over While Down).2.In Dreamweaver, remove the temporary text links for the navigation bar.3.If you ve created your rollover buttons in Fireworks, you can choose Fireworks HTMLfrom the Common panel of the Insert bar.Dreamweaver inserts a table of sliced images,complete with all the necessary code.In Figure 2-12, you can see the result of using theFireworks HTML command to insert the rollover buttons Home, Newsletter, Products,and Contact.Figure 2-12: These three rollover buttons (NutriBiz News, Related Products, andContact Us) were imported directly from Fireworks-generated HTML.4.If you re working with separate images for the various rollover states, either use theSwap Image behavior or insert a Navigation Bar object.Either method enables you toselect the separate images for your rollover states.Cross- All of Dreamweaver s standard behaviors are covered in Chapter 23; information on theReferenceNavigation Bar object can be found in Chapter 6.When I m using tables for my layouts, I tend to nest the table containing the navigation barinside the cell of another table.If the outer table has a percentage-based width, say 95%, thistechnique results in a fluid design that resizes and realigns well to match the user s browserwindow width. 044931-6 ch02.F 7/18/02 6:55 AM Page 52Part I &' Dreamweaver MX Basics52Another alternative, sure to give your page some pizzazz, is the Flash Button object.A FlashTipButton is a predesigned graphic template with animation that uses your specified text.FlashButton objects are great for quickly turning out a professional-quality navigation system.Because they are actually Flash animations, users must have the Flash Player plugin installed,which is very likely, since the vast majority of users are Flash-enabled.After I ve completed the initial elements of my page, I take advantage of one of Dreamweaver skey features: Library items.By turning my navigation bar into a Library item, I can easily reuseit on the same page and on every other page of the site.This technique keeps consistent ele-ments on every page an important consideration for design.Moreover, if I ever need toupdate the navigation system by changing a link or adding more buttons, I can do it in onestep.In addition, Dreamweaver s Library items, if activated with behaviors, retain all thenecessary code.Cross- Library items are covered in Chapter 29.ReferencePreviewing and Posting Your PagesNo matter how beautiful or spectacular your home page design, it s not a Web page until it sviewed through a Web browser and posted on the Web.Now, the Web could just as easily bea company intranet as the Internet.If the page is intended to be viewed by numerous people,however, it will be seen under a number of different circumstances.Different operating sys-tems, browsers, screen sizes, and resolutions are just some of the variables you have to takeas a given which is why previewing and testing your Web page is vitally important.Here area few pointers for initially testing your pages in development:&' At the very least, you should look at your Web page through versions of both majorbrowsers.Dreamweaver enables you to specify up to 20 browsers with its Preview inBrowser feature; I currently have five available on my system.&' During the initial building phase, my routine is to preview my page with both my primarybrowser (as of this writing, Internet Explorer 5.5) and secondary browser (Netscape 6.2)whenever I add a major component to the page.My setup generally takes advantage ofthe Web server I have running on my system, so I can view my pages with all the dynamiccontent intact.&' Make it a point to resize the page several times to see how your layout is affected bydifferent screen sizes.If a client has specified maximum browser compatibility as a siterequirement, you should also look at the page under various screen resolutions.&' When a page is largely completed, I run Dreamweaver s Check Target Browsers com-mand to make sure I m not committing some grievous error.If incompatibilitiesappear as they often do when checking the earliest browsers (as shown in Figure2-13) I have to decide whether to keep the offending tag or risk the page being visitedby users with those browsers.To see which browsers are generating the specific error,choose Browser Report from the Results panel toolbar.I also make it a habit to routinely check the Download Stats found in Dreamweaver s statusbar.The Download Stats show the weight of a page its file size and the download time ata set speed.By default, the speed is set for a 28.8 modem, but you can alter that in the StatusBar panel of Preferences.Keep in mind that the Download Stats include all the dependentfiles (images and other media) as well as the size of the page itself.Remember also that, dueto the unpredictability of Internet traffic flow, these Download Stats are more ballpark thanexact; use them as guidelines to estimate download times, not as 100% accurate predictors. 044931-6 ch02.F 7/18/02 6:55 AM Page 53Chapter 2 &' QuickStart53Figure 2-13: Errors from the Check Target Browsers command are not uncommon whenchecking early browser versions.To ensure that all my ducks are in a row and all my links are valid I use the Check LinksSitewide command from the Site panel s drop-down Site menu.Not only does this give me areport of broken links, but it also displays orphaned files and offers a list of external links thatI can verify from its report.My final testing phase is always conducted online.Here s the procedure I use for uploadingmy site and testing it:1.Choose Window ª' Site to open the Site panel and expand the panel using the Expand/Collapse button (in Dreamweaver MX mode).By this time, I ve already established adomain with an Internet host and edited my site definition to include the necessaryFTP information.2.Click the Connects to Remote Host button in the Site panel.Dreamweaver logs on tothe remote system and displays the remote files in the Remote Site pane opposite theLocal Site pane.3.Select the HTML files for the completed Web pages.4.Click the Put File(s) button.5.By default, Dreamweaver asks if you d like to include the dependent files; click Yes.Dreamweaver begins to transfer the HTML files as well as all dependent files.Allnecessary subfolders (connections, images, media) are created to replicate the localsite structure on the remote site. 044931-6 ch02.F 7/18/02 6:55 AM Page 54Part I &' Dreamweaver MX Basics54NoteIf the Include Dependent Files dialog box does not appear, open Preferences and, in the Sitecategory, select the Dependent Files: Prompt on Put/Check In option.Be aware thatDreamweaver does not always know to include files that are used within scripts; you mightneed to upload these files manually.6 [ Pobierz caÅ‚ość w formacie PDF ] |
Archiwum
|