|
With each new version, Dreamweaver gets even better, which makes creating Web sites faster and easier. Take a moment to check out these tips, and you're sure to save time developing your Web site.
Splitting the view
If you like to switch back and forth between the HTML source code and Design view in Dreamweaver, you'll appreciate the option to split the window so that you can view both the source code and the page design at the same time. To split the window, choose View --> Code and Design or click the Show Code and Design Views button, located just under the Insert bar at the top of the Workspace.
With Dreamweaver 8, the source code has better color coding and tagging features, similar to those in the HTML editor HomeSite. Notice as you're working that if you select an image, text, or other element on a page in Design view, it is automatically highlighted in Code view, a great feature that makes it easier to find your place in the raw code.
Inserting content with formatting
Dreamweaver 8 gives you more options than ever for maintaining formatting when you copy and paste text from another program. You can change the default for how Dreamweaver handles formatting when you choose Edit --> Paste and alter the Preferences in the Copy/Paste Category. And, you can choose Edit --> Paste Special to have all the options available each time you paste in new content. Here are your four options:
- Text only: Dreamweaver strips any formatting and inserts plain text.
- Text with structure: Dreamweaver includes paragraphs, lists, tables, and other structural formatting options.
- Text with structure plus basic formatting: Dreamweaver includes structural formatting as well as basic formatting, such as bold and italic.
- Text with structure plus full formatting: In addition to the previous options, Dreamweaver includes formatting created by style sheets in programs such as Microsoft Word.
Getting a head start on your designs
Dreamweaver 8 features many predesigned templates, as well as Starter Pages, which not only include topic-based designs, they actually include text. You may need to edit the text to meet your needs, but if you're creating a common site feature, such as a calendar or product listings, the general text already in place gives you a head start.
When you create a new file in Dreamweaver (such as by choosing File --> New), the New Document window offers you many ways to create a predesigned page, including the following:
- Dynamic Template pages: Choose the Template Page category to open a list of templates for dynamic Web site developing, including ASP JavaScript, VBScript, .Net C#, .Net VB, ColdFusion, HTML SSI, HTML, JSP, and PhP. Note that these formats require programming beyond the basic features of Dreamweaver and are designed for use with advanced, database-driven types of Web sites.
- Layout Designs for Frames: Choose Framesets to open a collection of predesigned framesets. Because these templates can save you so much time, they're a "must use" feature if you're creating a site that uses frames.
- CSS-Designed Pages: Choose the Page Designs (CSS) category to open a list of page templates created using Cascading Style Sheets.
- Predesigned Pages with Text: Choose Starter Pages to open a list of common page designs that include content you can easily adapt for a wide variety of Web sites.
- Regular Template Designs: Choose Page Designs to open a list of basic HTML templates. Although they may seem simple by comparison, these are well-designed pages that can help you get a static Web site up and running with a lot less effort than creating it from scratch.
Tabling your designs
HTML tables still offer one of the most popular ways to create complex Web designs. Although getting tables just the way you want them can be challenging, Dreamweaver makes creating tables easier with its visual design features. In Layout mode, you can draw table cells on a page, drag them into place, and even group cells in nested tables without ever worrying about how many rows and cells you need to create to make the table work.
Choose View --> Table Mode --> Layout Mode (or click the Layout button on the Layout Insert bar) to access Dreamweaver's special Layout environment. If you do want to do more standard table editing, such as merging or splitting cells, make sure to switch back to Standard mode. You can find cell and table options in the Properties dialog box when you select a table or cell in Standard mode, but not when you are in Layout mode.
Designing in a Flash
Flash rocks! The Macromedia vector-based design and animation program, Flash, is one of the coolest programs on the Web today because it makes creating fast-loading images and animations that dynamically adjust to fit any screen size possible. Now that the Flash plug-in is built into most current browsers, Flash has become a standard, and Dreamweaver has made adding a variety of common Flash features easier than ever md even if you don't own Flash.
In Dreamweaver 8, you can find premade Flash buttons, Flash text, Flash paper, and Flash movies available from the Common Insert bar by choosing one from the Media drop-down list. And then use Dreamweaver's integrated tools to customize the button, text, or other Flash element you've selected. You can even use Flash to create your own customized buttons, text, or other Flash files and add them to the list of available buttons for easy access within Dreamweaver.
Making Fireworks work with your images
The Dreamweaver integration with Fireworks, Macromedia's Web image program, makes editing images while you work in Dreamweaver easy. Need to change the text on a button or create a new banner? Just click the Edit button in the Properties inspector to launch Fireworks. Any changes you make to an image automatically appear in Dreamweaver. If you always use another image program, such as Photoshop, this level of integration should at least get you to consider using Fireworks. It can save you a ton of time in your design work, especially when your pesky colleagues and clients are always asking for last minute changes.
Directing your viewers
Creating multiple pages is the most fail-safe solution for making sure that all your viewers are happy when you use cutting-edge page designs filled with DHTML and CSS. That means you create two or more sets of pages: one that uses the latest features and one that uses older, more universally supported HTML tags. But how do you ensure that viewers get to the right pages? Use the Check Browser behavior.
The Check Browser behavior is written in JavaScript and determines the browser type that each viewer who lands on your site uses. The behavior then directs users to the page design best suited to their browser versions. To use this feature, choose Window --> Behaviors to open the Behaviors panel. You can also find this panel by opening the Tag panel and choosing the Behaviors tab.
Select the plus sign (+) to open the drop-down list of options on the Behaviors tab and choose the Check Browser option. In the Check Browser dialog box, specify what browser versions should be directed to what pages on your site. When users arrive at your site, they're automatically directed to the pages of your choice, based on the browser types and versions that you specify.
Keeping frequently used items handy
Ever wished you could keep all your favorite Dreamweaver features in one convenient place? Now you can with the Favorites tab.
When you launch Dreamweaver, the Common tab is visible at the top of the Workspace. Click the arrow to the right of it, and you find a drop-down list with several options, including Layout, Forms, and HTML. At the bottom of that list is the newest addition of Macromedia, the Favorites bar.
Select the Favorites bar and you can customize it with all your favorite objects; just right-click (or Control+click) choose Customize Favorites. Use this bar as a convenient way to keep all your favorite features handy. You can even change it for special projects that require a series of steps or elements.
|
