FOTD 06: Dreamweaver 8 – Zoom and Guides

How many times have you been working a CSS-driven design and had to strain at your monitor from inches away to resolve those 1-3 pixel shifts? With Dreamweaver 8, you can zoom in on the area of your page in question and make your changes easily. Or, zoom out of a large, complex page design to get a better view of your layout without scrollbars. With the new Guides feature, you can also now drag guide marks out just like in your favorite image editing application, to help visualize alignment and placement better (and guides even carry through to Dreamweaver templates!). Save the Lasik surgery for when it’s really needed, get your designs laser-accurate right now. Here’s the scoop.


Let’s start with the Zoom tool- as you may be wondering why, given the Web is displayed at screen resolution anyway, this is a handy feature. If you’re mostly a hand-coder, then you’re used to tweaking CSS and then re-rendering your page in a browser. However, when pixel-level alignment of elements on your page is tricky to visualize at normal screen resolutions – I’ve had times myself where I really wished I could zoom in for a second to see exactly how much that rendering gap was… one pixel? Two? Now I have pretty sharp eyes (20/10 and 20/15 vision right to left accordingly), but with complex and/or complementary color schemes, seeing small gaps and differences can be difficult if you’re only talking a pixel here and there.How do you use the zooming feature? Well, for starters, there’s a new ‘View > Magnification’ menu that allows you to access all the functionality I’m about to describe, and the right of your Dreamweaver document ‘status bar’ window area now has four new elements- the Pointer, Pan (Hand) and Zoom tools, and the Zoom combo box (allowing you to select preset zoom resolutions from 6% all the way up to 6400% of the default resolution). Here’s how it looks:

toolbar.jpg
The new Zooming tools

Let’s start with the Zoom tool (magnifying glass icon), which does exactly as you’d expect- zooms in and out of your document. When the Zoom tool is active (icon depressed), your cursor inside Design View will turn to a magnifying glass, and allow to zoom in on a region by clicking, or zoom out by holding down either Alt (Windows) or Option (Mac) and clicking- you’ll see the plus (+) sign in the icon change to a minus (-) sign, noting the difference. If there’s neither a plus nor minus sign in the icon, you’re zoomed in or out as far as you can go. You can also click-drag a marquee in your document to zoom into that specific selection, if there’s a specific region you want to zoom to. And as you’d expect (or at leat hope)- when zoomed in and using the document toolbar, scrolling speed/distance is based on the zoomed resolution, not on the actual document resolution (making it much more intuitive to get started with).Note: when the Zoom tool is active, it’s really active- you can’t click to select items in your document or make changes. Deactivate it to go back to ‘editing mode’, of course.The Pan (Hand) tool (which will likely be familiar to Fireworks or other graphics application veterans) allows you to grab, drag and scroll the Design View window when zoomed, without needing to use the document scrollbars. Very handy for getting around quickly in your document when you’re not at default (100%) resolution.The Pointer tool simply allows you to drop out of zoom/pan modes and back to document editing. Click this icon when you’re ready to start editing again (or one of the extensive keyboard shortcuts available for zooming). It’s that simple. With zooming, you get a lot more flexibility in Design View to help make those complex designs fall into place as you’d expect. Sure, you’ll still have to proof in browsers as usual to make sure your final design’s integrity is solid, but this should help you get a much better leg up before doing so.Now while on the subject of the Zooming tools, another design aid added in Dreamweaver 8 is the new Smart Guides. If you’re an image editing or page layout veteran, you’re used to dragging out guides to help position your layouts in those types of applications. Dreamweaver 8′s implementation of Guides is very similar. To use Guides, you need to have the Rulers visible- then just drag out horizontally or vertically to create a new guide. As with image editing applications, you’ll get visible feedback on exactly where your guide is at on the rulers themselves, making pixel-perfect placement easier. Removing a guide is equally simple- just grab it and drag it off the document. Very familiar if you’ve used similar Guide features in other applications.

position_feedback_basic.jpg
Guides – Dragging w/Feedback

As with other implementation of onscreen Guides, you can also reset the origin point of the rulers to provide relative distances within your layout. Just click in the upper-left-hand corner where the rulers intersect, and drag the new x/y ‘Origin point’ out to the location in your document where you want zero to fall. You may not care about what’s 100 pixels to the right of the left-hand side of the document window, and be more interested in what’s 100 pixels to the right of the left edge of your content div, however. This way you can set the rulers accurately, and relative to your design.You can also lock (and unlock) guides to prevent unwanted tampering, as well as double-clicking on the guide itself to move it relatively from it’s current position.

move_guide.jpg
Moving a guide

The visual feedback provided by Guides is, however (in my opinion), the most useful part of the feature. When dragging (or mousing over) a guide, you can see both the guide’s position and relative distance shown in a tool-tip-esque yellow panel. If the guide is relatively positioned, then the percentage will be shown- with absolute position shown in brackets. If the guide is an absolutely positioned guide, then just the position is shown (no brackets or relative distance). Pretty familiar if you’ve used Design Mode with tables in Dreamweaver MX 2004- but the best part of the feature is when you hold down Control (Windows) or Command (Mac) when clicking or mousing over guides. When doing so, you can also see the distance to the next closes guide in both directions- helping greatly when calculating cumulative widths or heights, particularly in CSS designs. If either ‘neighbor’ guide is a relatively-positioned guide, then you’ll get both absolute and relative positions for the guides, if all are absolute, you’ll just get the distances.

distance_tracking.jpg
Visual Feedback for Guides

As you may expect, you can also turn on snapping to snap page elements to guides (great aid in quickly iterating a design from comps), as well as snapping guides (as you drag them out) to page elements, should you be a little further along in the design process. And if you use Dreamweaver templates heavily on your sites, you’ll be interested to know that guides set into a template will be available for any page made from that template. And of course, in Dreamweaver’s Preferences you can set default colors for guides, as well as default visibility and snapping settings. If you’re a Fireworks (or Photoshop) user, the key command for showing/hiding guides is exactly what you’d expect – Control(Command) + “;” (semicolon).Now if your primary Dreamweaver mode is Code View, you may not otherwise unearth these new features for some time- but if you’re a designer (or spend a lot of time building page layouts based on comps you recieve from a creative department and/or visual artist/designer) then you’ll likely find more and more handy uses for these features as you dive deeper into Dreamweaver 8. However- technically-minded Dreamweaver developers will be happy to know there’s a whole slew of new API calls to access both zooming and guide functionality in Dreamweaver 8, so you’ll undoubtedly come up with inventive new uses of both features the product team hasn’t thought of yet. If so, by all means make sure and drop a comment here and let us know about it!(and as always, make sure to check Greg Rewis’ blog for Captivate simulations of these features as he releases them!)See you tomorrow for the next Feature of the Day – which will be Flash 8′s new Object Drawing Mode!