Inside Dreamweaver MX
September 6, 2002
|
Our excerpt looks at the various options available to let
Dreamweaver code tables for you, including Layout view and
the Convert Layers to Table command. Learn all about rulers,
grids, and tracing images -- viewing aids that can help you create
layouts in Design view regardless of how you approach your page
layout tables.
|
From Publisher:
A solid mix of in-depth explanation of Dreamweaver MX features and
real-world tips and tricks to make Dreamweaver work. Building on the
foundation laid by Inside Dreamweaver 4, this book will further
develop the reference tutorial style to provide more and better
tutorials to enhance in-depth understanding of the Dreamweaver MX
release. Inside Dreamweaver MX is a tutorial reference that combines
knowledgeable explanation with insightful learning activities to
engage readers. The end result is a more in-depth knowledge of the
software and how it can provide solutions for the user in the work
environment.
Chapter 10: Using
Dreamweaver's Page Layout Aids
Like ice cream, web designers come in all flavors. Some love their code and
want nothing more than to be close to it. They can appreciate a visual design
interface like Dreamweaver's because of the amount of
time it saves, but feel compelled to keep an eagle eye on the Code view,
monitoring every tag Dreamweaver writes. Others are happy to allow Dreamweaver
to translate for them, instructing it to place this or that element on the page
and trusting that the software will take care of things behind the scenes. The
preceding chapter discussed using tables for page layout, and how to make the
code work for you in designing. This chapter looks at the various options you
have to let Dreamweaver do the table coding for you, including Layout view and
the Convert Layers to Table command. It also covers rulers, grids, and tracing
images—viewing aids that can help you create layouts in Design view
regardless of how you approach your page layout tables.
Viewing Aids
Graphic designers are used to having certain tools at their disposal when
they build their layouts. Rulers, guides, tracing images—most print-based
page layout environments have at least some of these features. For those of you
who sorely miss having such helpers as you work, Dreamweaver offers rulers, the
grid, and tracing images. (Sorry, no ruler guides!)
Rulers
Dreamweaver rulers work similarly to rulers in most graphics programs. They
display across the top and down the left side of the Document window; they can
be set to display various measurement systems; they can be turned off and on;
and they indicate the current cursor position with a dotted line. Figure
10.1 shows the rulers in action.
Figure 10.1
Dreamweaver rulers and their options.
To configure and show or hide the rulers, use commands in the View >
Rulers submenu:
Showing and hiding. The View > Rulers > Show command acts
like a toggle, turning the rulers on and off. You can also use the Rulers toggle
command in the View Options menu, in the Document toolbar, or right-click (Mac
users Ctrl-click) on the ruler itself to access its contextual menu. Choosing a unit of measurement. From the View > Rulers submenu,
choose pixels, inches, or centimeters. You can also right-click (Ctrl-click) on
the ruler in the Document window, to access its contextual menu. Pixels (the
default) is definitely the most useful choice. -
Changing and resetting the origin point. The origin is the zero-point,
the location on the page where the horizontal and vertical ruler read 0.
By default, this is the upper-left corner of the page. To change the origin
point, position the cursor over the little square where the left and top
rulers meet (see Figure 10.1), and drag
out into the document area. To reset the origin back to the top-left corner,
choose View > Rulers > Reset Origin, or right-click (Ctrl-click) on
the ruler itself to access its contextual menu.
Grid
Dreamweaver might not have moveable rulers you can pull out from the rulers,
but it does have a grid. The grid overlays the Design view display with horizontal
and vertical rules at fixed intervals, and can be a helpful design aid if your
layout is built on those fixed intervals (a column every 100 pixels, for instance).
Figure 10.2 shows the grid being used in
a document.
Figure 10.2
The Dreamweaver grid set to its default of 50x50 pixels.
To configure and show or hide the grid, use commands in the View > Grid
submenu:
-
Showing and hiding. The View > Grid > Show Grid command acts
like a toggle, turning the grid on and off. You also can use the Grid toggle
command in the View Options menu, in the Document toolbar.
Choosing grid size and appearance. The grid can be set to display
rules at any fixed interval from 1 pixel on up, and measured in pixels, inches,
or centimeters. It can display as solid lines or rows of dots, in any color you
choose. To alter these settings, choose View > Grid > Grid Settings.
(Okay, a 1-pixel grid is not very useful—but it's nice to know
it's possible!)
Note
The grid starts measuring in the upper-left corner of the document, not
necessarily at the zero point but where the page content starts. If you
haven't specified page margins for your document (using Modify > Page
Properties), the grid will start about 8 pixels in from the top-left corner.
Snapping to the grid. When creating layouts using Layout View or
Layers, or when dragging to resize tables, a snap-to feature can be helpful for
accuracy. Toggle snapping on and off by choosing View > Grid > Snap to
Grid.
If you want, you can have your layout tables and cells automatically snap to
the grid. The snapping behavior can be controlled by changing the grid
settings.
To show the grid, choose View > Grid > Show Grid, or select Grid from
the Options drop-down menu on the toolbar.
Tracing Images - Page 2
|
Figure 10.1