Page 32
7.1 Using the Layout Tools
The Layout window is the place to design anything and everything on your web site,
and really exercise the true flexibility of ShutterBug. You can create your very own
unique look and feel, designing as little or as much as you want. Anything you create is
equivalent to a newly created theme with your own custom-made templates. Your new
design, including the new templates, can be added and saved to your theme library at
any time (adding, saving and deleting themes are covered in Chapter 9).
Unlike the Content window, the Layout window provides tools for editing the
'Templates', whereas the Content window, edits the 'Page.' If you change a template,
all pages that use that same template, will take on the changes. As discussed in
the previous chapter, you can customize a page independent of the other pages, by
adding a new template for the page, and then editing the template using the layout
design tools.
ShutterBug's layout tools output Cascading Style Sheets (CSS), but do not make you
do any of the technical work. ShutterBug removes the frustration and masks the
complexities of learning CSS. You don't even need to waste time testing your site in
multiple external browsers - we already did that for you and built it into ShutterBug's
output.
The WYSIWYG controls and tabbed interface make it easy to experiment and design,
and come up with several different looks or modifications of an existing look. There are
numerous options and features available for each element on your page, it's hard not
to get addicted to trying them all out and doing new things with your design. Changing
colors, styles and other design attributes is quick and easy, making design updates to
your site a cinch!
───────────────────────────────────────
Get Acquainted with the Interface
The Layout window is divided into two main sections: the web page viewer window
(also allows you to edit in place using drag and drop and grab handle functionality),
and the tabbed pane containing the editing tools at the bottom of the interface. The top
section of the window contains a pop up list for selecting pages, as well as the
template selection button for customizing pages and editing templates.
Also note the handy Hide Tools button at the top of the interface. This feature allows
you to expand the viewer window by collapsing the tabbed tools portion of the
interface, giving you more workspace and viewable area for editing your templates.
Simply click the button to hide the tools and expand the window (the button label will
switch to read Show Tools); click the button a second time to unhide the tools and
show them again.
Clicking the Select Template button will open the template drawer. The drawer
contains the templates that came packed with the theme you are using. You can select
different templates to apply to different pages in order to customize each page. You
can also change or customize the templates, add new templates, copy template
settings, or delete them if you want. A horizontal yellow notification bar will appear
above the tabbed pane, letting you know when you are using a template that is being
used by other pages. More information on managing templates and using the options
available in the template drawer can be found in Chapter 6 - Using Templates &
At the very bottom of the interface, three options for helping you align elements on the
page are available: Page Boundaries, Object Center, and Object Edge guides. These
guides will help you center the elements and align them on the page when using your
mouse to position elements. The object edge guides have fine control for easily
aligning elements as an alternative to using the spin box controls under the tabbed
pane. You can click the color well to change the line color of the guides as well.
Also note the ruler guides that run along the top and side edges of the viewer window.
The ruler helps you to quickly "eyeball" the width and height of each element and make
adjustments. One inch on the ruler equates to 100 pixels. You can also Control + click
on a thumbnail at any time to edit it in the ImageWell edit window.
The Tabbed Pane
The bottom third of the Layout window contains the editing tools for each element in
your website. There are ten tabs that contain the tools available for the corresponding
element. Elements include: Page, Xtras, Text [box], Masthead, Footer, Page Title,
Navigation, Photos, Shopping Cart and Slideshow. The "Xtras" tab lets you add more
text and image boxes, image rollovers, layered images, clickable images, HTML
snippets, external HTML pages, media player files, and other external files to your
templates.
Each tab is divided into two subsections: Properties & Borders (with the exception of
the Page and Shopping Cart tabs). Clicking a tab will reveal the tools and options
available for the selected element. All of these elements can be easily edited for
borders, inside margins, fonts, size, positioning, link colors, page background, and
other traits that are unique to each one. The viewer window reflects the changes as
they are made, as well as offering mouse control to move and resize elements on the
fly.
Elements can also be removed from pages by choosing to make them invisible.
Elements can be shown on each and every page, or be displayed only on certain
pages, while not shown on others. The more standard elements can be shown in the
Slideshow view as well, or can be turned off during the slideshow view. These tools
offer a great deal of flexibility, allowing you many options to control the design and
define each page's template independently if desired.
───────────────────────────────────────
How to Select Elements and 'Xtra' Boxes
Before you can view and use the editing tools for an element or Xtra box, you must first
select it. There are three different ways to select an element or Xtra box in the Layout
window:
1. Click the tab for the element you want to edit. The element will be selected in the
viewer window with a grab handle box. The available editing tools will be revealed
in the pane below the tabs.
2. Use your mouse to click on an element from within the viewer window to select it.
The corresponding tab will be selected displaying the editing tools in the pane
below the tabs.
3. Keyboard Shortcut - Using your Tab key will cycle through the selectable elements
and Xtras, selecting the next element or Xtra on the page for editing.
Selecting Xtra Boxes
If you only have a single Xtra box on your page, you can select it using one of the
methods listed above. When you have multiple Xtras on a page, you can select the
desired Xtra by using one of the methods listed above, or by clicking on it from the Xtra
box list located on the Properties interface, under the Xtras tab:
When an element is covering, or positioned on top of an Xtra box, ShutterBug will see
the top element first and not allow you to select and move the Xtra with your mouse. In
this case, you can use the Tab key or the Xtra box list to first select the Xtra. Then hold
down the Option key on your keyboard, and click and drag the Xtra with your mouse,
to the new position on the page (Option + Mouse Click, then drag with mouse).
───────────────────────────────────────
The rest of this chapter covers the editing tools available for each element, how, and
what to use them for. If you are looking for a specific element to edit, select from the
navigation menu at the left. Otherwise, go through these pages one at a time, following
the same order as listed in the navigation menu.
───────────────────────────────────────
