STEP 1: Start a New Page

Begin with a new page by choosing File -> New Page. (Normally, I don’t recommend creating your new pages this way but this page is not destined for the Files tab.)

STEP 2: Place a Layout Grid

Drag the Layout Grid object from the Basic tab of the Objects palette. (You can also just double-click the Layout Grid object and it’ll land wherever your cursor is on the page.) After you place it, drag its handles or use the Inspector to set its size. Turn off the snap feature unless you want items snapping into place.

STEP 3: Add graphics to your site

As always, drag the desired graphic(s) into the Files tab of the Site Window. The cursor’s plus sign tells you that the files are being copied into your site, not moved around on your hard drive. For organization’s sake you’ll want to either add these images into an existing folder or create a new folder for them.

STEP 4: Place the graphics on your page

Drag each desired graphic onto your Layout Grid. You can place them rather roughly at this time, then use the Align palette later. Here, I have just been sure to put the first and last ones at the left and right edges. GoLive can then distribute them for me.

STEP 5: Align your graphics

Open the Align palette, Window -> Align. Select the images that will share a common alignment, then click the appropriate button. You can then select other images and click another alignment button.

For this, I selected all of the stars then clicked Distribute Objects, center, to spread them evenly between the left-most and right-most stars. Next, I selected the top stars (every alternate star) and clicked Align to Parent, aligning them to the top of the Layout Grid. I then selected the lower stars and clicked Align Objects, aligning their centers horizontally. While those three stars were still selected I used the arrow keys to move them upward until I liked the look

STEP 6: Optimize the Layout Grid

Select the Layout Grid, then click Optimize in the Inspector. This removes all extra grid space below the graphics and to any that may be at the right.

STEP 7: Save as Component

Choose File -> Save. (If you’ve already been saving the page as you designed it, choose Save As.) In the name field give the file a short but descriptive name so you you’ll easily recognize it later. Now click the Site Folder button at the bottom of the Save dialog and choose Components as shown here. Finally click Save.

STEP 8: Open the Library Palette

Choose Window -> Library to open the Library palette, or if it’s docked at the side of your screen, click its tab to pull it out. In the Library palette, click on the Components icon. It’s the icon of the single page document.

Your component was saved for your site so click the arrow to the left of the site’s icon. (If you have more than one site open you will also see that site’s name there and you’ll always see Application-wide there as well.

STEP 9: Place Component on your page(s)

Open the page onto which you want to place this new decoration and prepare a place for the Component by adding a line. Components, like any other item, live inline with the cursor. Components can be directly on the page, inside a table cell, or anywhere else. To place the Component simply drag its icon from the Library palette into place on your page.

The main point of a Component is that you can add it to many pages and/or use it multiple times on any page. Just repeat this step.

STEP 10: (Optional) – Edit your Component

You don’t ever have to edit your Component but the coolest thing about Components is that you can. To edit it, open the Component, make your changes, then save it again. You can open it from any of several places: double-click it on any page as shown here, double-click it in the Library palette, or double-click it in the Extras tab of the Site Window Either way, when you save the changes the changes will be reflected on all of the pages.

Just about any part of your page can become an editable region: a table or cell, a grid, a layer, an image, a paragraph of text, or any instance of text. When just an instance of text – several words – is the region, you can change that text but not create a new paragraph.

After you set up your editable regions and save the page as a template, all non-editable areas of the page are locked so no one can change that material. Multiple pages can be made from that template and it’s safe to let others create or edit pages. And the best part is that when you edit the template itself, all pages created from that template are updated.

This tutorial shows you how to create new pages from your template but you can also apply a template to pages you’ve already created. See GoLive’s Help: Applying a page template to existing pages. Another option is to use one of GoLive’s pre-designed templates. You’ll find them in the Templates tab of the Library palette under Application-wide.

The sample in this tutorial is my own site, Shadovitz.com so you can see all the pages created from this template.

STEP 1: Design your first page

Begin creating your page as you would any other. Add menus. Add all graphics and text that will be common to all pages. (That is, to all pages you’ll create based on this particular template.) This page can contain text, images, Smart Objects, layers, and Components just like any other page. (Tip: A Component may seem redundant but using them enables you to more easily have multiple versions of your pages, each being a template.) Include Head items such as links to Style Sheets, your favicon link, keywords common to most pages, etc.

Tip: If you’re using Modified Date object place it in an area that will be modifiable.

In this example, there’s a table that frames the page and contains images that comprise the frame effect, a Component that contains a MenuMachine menu, a Component that contains a strip of small images (all Smart Photoshop Objects), a Component that contains my copyright..

STEP 2: Decide which text and images to keep on the page

As you design your page, you’ll want to have text and images in place within the areas that will later become Editable Regions. This enables you to test the design and set the look of the text, headers, alignment, etc. However, any text on the page when you turn it into a template would be on every page you made from this template. Instead, you may want to remove text that should not repeat on all pages. I like to keep some text, such as various level headers <h1, h2> and normal body text as a guide for users. They can edit that text or remove it if not needed. Having it shows them what each heading level looks like and what styles or tags to apply to the new text. Also keep any text that you definitely want to have on every page. For example I always include a notice of the page’s last update – Modified Date – at the bottom of my main content area.

STEP 3: Select your region

In my own site, I have one table cell that’s my main content area because it enables me to add anything within that table. I’ve added text, images that I set alignment for and add a class to, tables, and tables into which I place photos. To set up a table cell, select that cell.

STEP 4: Create your region

Choose Window->Template Regions to open the Template Region palette. Then, in this palette, click Create new editable region button at the lower right. The cell becomes selected black and the new region appears in the list area under the Region name column with a paragraph icon beside it to show the kind of region. If there’s text in your table the region will be named with the first text there. If it’s empty it’ll be called Region. Click this default name to select it and type a descriptive name (no underscores or spaces), then press tab or enter. I called mine Content. (With the region name selected the cell color changes. It’ll change yet again. This coloring shows you which area is editable.)

STEP 5: Create an inline text region (Optional)

You don’t actually need to have a second region. You may just have one area where your page’s unique information will go. But for the sake of showing you the different techniques, I’ve added the ability to place some words elsewhere on my page. (This text is not on my website.) An inline text region can become as long as you need and will wrap, but you cannot add a return. (That’s the nature of the inline feature.) You can, however, add an image in that line.

To enable only a line of text to be editable, select that text, then repeat step 4, creating a new Editable Region. This time you’ll notice the region’s icon is a text cursor.

STEP 6: Create a paragraph text region (Optional)

The difference between an inline editable area and one where you can create new paragraphs is just one simple click.

Just like in step 5, select that text, but then click the last

tag in the Markup Tree at the bottom left of the page. Then repeat step 4, creating a new Editable Region. This time you’ll notice the region’s icon is a paragraph marker like for the table cell.

STEP 7: Save as a template

After you’ve defined your editable regions, or at least the ones you can think to have at that time, choose File->Save as. Click the Site Folder menu button and choose Templates, then click the Save button. This leaves the originally worked-on page in your Files tab, while making a copy into the Templates folder. You can delete that original or keep it for reference. Meanwhile, you’ll see the newly named template page is now open before you. Save it and close it.

Tip: You can also turn that original into a template by dragging it from the Files tab into the Templates folder (inside the Extras tab on the Site Window’s right side). Another option is to drag that original into the site-specific folder of the Templates tab of the Library palette. (Dragging into the application-wide folder makes the template available to all sites. However, links to images and files will be orphaned if they are not present in the other sites you apply your template to.)

STEP 8: Create a new page from the template

To create a new webpage based on your template, drag it from the Library palette’s Templates tab into the Files tab of the Site Window. It’ll automatically be named new_from_yourtemplatename.html. Rename it as you would with any other new page.

STEP 9: Add your content to your new page

Double-click your new page to open it. You’ll notice that the editable region now appears white, or un-highlighted while the rest of the page is purple. (Or any other color, if you’ve edited your color choices in Preferences.) Try clicking in the colored area and you’ll find you cannot add content or select the objects there. In the table cell you can add anything. If you let your other text be a paragraph region you can add lines as I’ve done here to show you. You save, edit, and upload the page as you would normally do.

STEP 10: Edit your template if needed

To edit the template double-click it in the Library palette (as shown here) or in the Library tab of the Site Window, then choose Modify. Make the changes, then save the page. This change will be applied to all pages created from that template. When you save the changes, GoLive will update all pages that use the template. If you use Upload Modified later on, GoLive will select all of those pages to be uploaded again.

My most recent edit was to add a favicon to my pages. I created the favicon and added the file to my files tab, then created the link within my template’s head section. This added it to almost every page in my site at once. Since I have a separate version of my template for my travel image pages, I had to remember to add the same link to that template too.

STEP 1: Select the image

Select the image on your page. Then, in the Inspector click the More tab and check Use Map. (When you do, you’ll notice that a small yellow M box appears below the image. This is a marker for code that denotes it as an image map.)

Note: After you begin to create your image map you can still move it. The mapping on top of it will follow. It’s a good idea to select the M marker and move it along with your image so all the code stays together and you can figure out your own work more easily later.)

STEP 2: (Optional) – Zoom in as needed

If you need to see your image’s areas better, zoom in on it by using the Zoom tool at the lower right of the page. Truth is, you can do this at any time, not just before you begin. Zooming in and out doesn’t ruin your image areas.

STEP 3: Define your first region

When you checked Use Map, the toolbar morphed, so you’re ready to define your first image region. Click one of the three map area tools on the toolbar – rectangle, circle, or the build-your-own-shape polygon – then drag out the area over your image. Don’t worry if the area doesn’t land exactly where you want it. Release the mouse when done. By default your shape will be shaded for easy identification. Here we begin with a circle.

STEP 4: (Optional) – Refine the position

Click on the shape and drag it into better position. You’ll find the Select Area tool is already waiting for you because after you release the mouse to finish your first shape the tool reverts back to this tool.

STEP 5: Create the link

Region still selected, create the link to your destination page. You can use any of the regular linking methods including the two most popular – Command-dragging to Point and Shoot and Pointing and Shooting from the Inspector. In this case, I have an external URL copied from my browser and ready to paste, so I’m pasting in into my URL field. I’ve also set the link to open in a new browser window.

STEP 6: (Optional) – Define a Rectangle

The Rectangle tool works just like the circle. You just drag out the area. NOTE: In this example I’m using the rectangle to define a region for the photo of me. I can do that because I can send it to the back later, bringing the area of Mario’s body in front. I might normally use the polygon tool for this but I want to demonstrate all tools and possibilities.

STEP 7: (Optional) – Define an Irregular Area

The Polygon tool lets you create your own shape, but is trickier. Polygon tool selected, click to place the first handle, then click again to place the second, then third. Don’t let the closed triangle confuse you. Keep laying points along your area. Be careful not to click off of your image so you don’t close and complete the shape prematurely. When you’re finished, click the Arrow tool and you’ll see the four handles define the area.

NOTE: I could have just done one full polygon to define Mario but I needed to show you a simple circle first.

STEP 8: (Optional) – Arrange layers

You’ll be relieved to know that regions can overlap. The front-most area will simply be the active one. At any time as you create regions or work on your page, just select a region and click the Bring map area to front or Bring map area to back button. In this case, I defined Scott (in the white) first, then did just a rough shape, shown here, of Dan. By sending Dan’s area to the back, I don’t have to worry about the extra area at the right since it’ll be behind Scott, who was perfectly defined.

STEP 9: (Optional) – View URL’s

After you’ve created links, you’ll want to know which regions are hot. To see this clearly, click the URL button on the toolbar. This shows you each region’s URL. Any unlinked regions will say (Empty Reference!) just like the Inspector does for an incomplete link. In this example, both Scott and I lack line destinations.

STEP 10: (Optional) – Give yourself a hand

There are three ways to help you see your areas more clearly. By default each region is filled in with blue. If another color is easier on your eyes, change the color by clicking the Select Color button on the toolbar, then choosing a color. You can also turn the coloring off it you prefer. The Colorize button toggles it on and off. Use the Show map area edges button to toggle the region’s outline on and off. Here, outline shows, color does not, but when color does show it’s a light green.

However, as soon as you begin using text links as your navigation bar, you’re faced with the issue of how to differentiate them from the links on the body of your pages. That’s the subject of this month’s tutorial. You can take what you learn here to create as many different looks as you’d like for the links on your pages. And next month I’ll talk about some jazzing-up methods.

Note: Since this is GoLive, chances are, you’ll want to create your navigation menu in a Component. Thus, these directions include the Component here. Please refer to the tutorial, Create a fun section divider, steps 1, then 7-10 if you’re not clear on Components yet. An alternative to using a Component is to place your menu directly in a page, then turning that page into a Template or Stationery. Just leave this step and the last two Component steps out.

STEP 1: Start your menu Component (Optional)

Create new blank page and add at least some of the text that will be your menu’s links. You can write out the text for all of your links now, or just start and add more as you develop the site. Be sure to link it to your external Style Sheet to it. Don’t do any linking yet though.

STEP 2: Create a class in your external style sheet document

Open your external CSS document if it’s not already open. In this Style Sheet, start a new class by clicking the Create New Class Style button – the dot at the bottom of the style list. The default class name is pre-selected so immediately type a short descriptive name for that class. In this example since I’m defining my Nav bar styles, I call mine navbar. (The name is actually .navbar; the period is automatic.)

STEP 3: Set the parent class’s attributes

This class (.navbar) acts as the parent – the main definer – for this set of links. With this class selected, use the Font tab to select a font family (if you want the font to differ from that on the rest of your page) and to set the text size. If you want the font to be bold, choose that here too. You can also use the other tabs to further define the class. Do not set a color in this parent class. (It is not seen.) Setting the No Text Decoration button here is ok to do but will need to be repeated in the next stylyes anyway.

Note: You don’t have to get too hung up over the formatting attributes right now. You can always change them later on.

STEP 4: Create your first pseudo class

Start another new class (again by clicking the Create New Class Style button) to specifically define your nav links in their unclicked state. Name it as follows: the same class name (.navbar), then a space and the words a:link. The result in this example is .navbar a:link.

You’ll notice that the a:link part is just like the selector tag you normally use to define a link. The difference is that this one will apply itself only to those links to which you will assign the class that you created in step 2. You may also notice that even though you’ve created a class, the icon for the style is (<>) that of a selector tag. Not a problem.

STEP 5: Define this pseudo class

With .navbar a:link selected, set up any attributes that you want to have for unclicked links. Here is where you define the color of your navigation links. If you want to turn off link underlining be sure to click No Text Decoration (the A button beside Decoration).

In this example, the font family, size, and weight was determined by the class so this just defines the color and decoration.

STEP 6: Create and define the other pseudo classes

Repeating Steps 4 and 5, create and set attributes for the following pseudo classes in this order:

.navbar a:visited
.navbar a:hover
.navbar a:active

• Visited is what people see after they’ve clicked your link. If you want there to be no link underline you must click No Text Decoration here.
• Hover is what they see as they rest their mouse over your link. (On Netscape 4, which is old, people won’t see the hover formatting, but there’s no harm done either.)
• Active is seen only while they’re pressing the mouse down to click your link. You might want to skip creating the .navbar a:active pseudo class.

STEP 7: Apply the Class

One by one, select the text of each link and in the CSS palette, click the box under Inline Style for the line navbar (or your own class name). You’ll notice a column called span appears automatically is automatically checked.

Note: You can actually do this any time after step 2, but you must do it before step 8. Note that you won’t see any formatting take affect yet as there are still no links. I should also explain that you can apply the class to the entire block or to a whole table cell. However, span tags applied specifically to the link text provides the most flexibility.

STEP 8: Link the text

One at a time, select the text that is to be linked and link it to its
destination page. As soon as you create the links, you’ll see the formatting appear.

You can actually do this much later in the game. You can return to the Component and complete the
links days later. After all, you must create the pages before you can link to them. One trick is
to link to a dummy page for now, then relink to the correct page later on. Here, I’m doing that,
linking to dummypages.

Note: The <span> tag must be around the tag for this to work. If you create the link
first, then apply the class using the CSS palette afterward, the tags are written inside out.
Your html should be like this:

<p>
<span class=”navbar”>
<a href=”dummypage3.html”>Products</a>
</span>
</p>
</p>

STEP 9: Unlink the Style Sheet from the Component (Optional)

Reveal the head section of the page, click on the Style Sheet icon and press Delete or use the contextual menu to remove the link to the external Style Sheet. (Having the Style Sheet linked was just so you could assign the tags in the CSS palette. Your links will look generic now, but they’ll have the formatting once you place the Component on a page that uses this Style Sheet.) Save the menu page as a Component. (See the “Create a fun section divider” tutorial to learn how to do so.)

STEP 10: Add the Component to your page (Optional)

Open the Library palette, switch to the Components tab, locate the Component under your site’s name, and drag the Component into place on your page(s). Then preview in the various browsers and see your handiwork. (No comments about this example; it’s meant to demonstrate, not to be a designer’s dream.)

Closing Comment
Whether you’ve created your menu in a Component or directly in a page or into Template or Stationery you can edit it just the same-by editing the external Style Sheet. If you have a page that contains the Component open, or your Template, or Stationery page open, you’ll see the result of your edits.

If you’d like to create another set of links that differ from the body links and these nav bar links, just repeat all of these steps, creating another set or pseudo classes.

Deborah Shadovitz thinks of links as vicarious travel and figures Style Sheets are almost as cool as her backpack. She extends thanks to Mads Rasmussen http://www.rasmussens.dk/tut/, for introducing the GoLive community to this method.

The options here aren’t in any particular order and none are mandatory. Mix and match and experiment.

This stuff doesn’t render well in the page layout so with your page active, select File>Preview In>Live Rendering and keep that window open. To update the Live Rendering and see your result, save your style sheet.

STEP 1: How or Where to Apply These Attributes

To have any of these effects appear as soon as the page loads, apply them to your a:link pseudo class. (In my example in Part 1, that was .navbar a:link.) Bear in mind though, that although you may add color and an outline to make an area look like a button, only the text itself is the hotspot (clickable link area).

To have them appear just when your visitor rolls over the text link, apply them to your a:link a:hover. (In my example in Part 2, that was .navbar a:hover.)

Tip: You can apply an effect to both. You can have one default look and another on mouse-over.

STEP 2: Add an Image as a Background

A texture can add a nice polish to your links, helping them appear more like buttons. To add a texture, you create an image file, place the image in your Files tab, then link to it. The image you use can be larger or smaller than the desired area. If smaller, it’ll repeat to fill the space; if larger, it won’t expand your text area.

In the Background Properties tab, select URL from the Image menu. Then Point and Shoot to the desired background image in your Files tab. Here, I linked to goldpaper.gif. The background won’t render in the layout but it’ll appear in Live Rendering and preview in your browser (remember to refresh the browser page).

Tip: Consider having one background image for the :link pseudo class and another on the :hover pseudo class. This creates a highly visible mouse-over effect.

STEP 3: Add a Background Color

Another way to make your links look “buttonish” is to add color behind the text. If you’re using an image, the color won’t show, though.

In the Background Properties tab, click the Color well and choose a color. (You’ll notice that when you add a background property color, that same color is also reflected in the Font properties tab.)

Tip: Consider having one color for the :link pseudo class and another for the :hover pseudo class.

STEP 4: Add an Outline

An outline can add definition. You can have the same line on all sides or vary the width, color, and pattern.

Go to the Border and Outline Properties tab. To create a uniform look, enter a border width such as 1px in the first field. Then click the Color swatch and choose a color. Finally, select a line pattern from the menu. To vary the look, make these three entries on the Top, Right, Bottom, or Left line. (Not all line types display in all browsers, so test your choices.) Here I entered 1 pixel under All, selected the same color as my link’s text, then chose dashes at the top and bottom with dots on the side. (Note: Under 2 px width, IE6 doesn’t know how to render dashes so my lines will all appear solid to IE6 users.)

STEP 5: Set the Width of Your Button Area

By default, your background and outline will be the width of the particular text. This doesn’t matter if your background or outline appears only on mouse-over (a:hover). But it can look sloppy when you show the background or outline at all times (a:link) as I have in these examples.

To set a uniform width, go to Block Properties, and enter a width in the Width field. Here I have 110 px as the width. Then choose Left from the Float menu. (You can see how the width doesn’t render uniformly until you use float.)

STEP 6: Add Space

The text will look cleaner if you put some distance between your link’s text and the outline, or put color around the text. This is done using padding.

In the Margin and Padding tab, enter the amount of padding you want all around under All, or at the Top, Right, Bottom, or Left. Here I have 2 pixels at the top and 4 at the bottom because the eye makes things appear lower. I have 5 pixels at the left to set the text apart from the edge. I have no spacing on the right because the width takes care of that.

STEP 7: Center Your Link’s Text

Another option is to use is alignment. To do this, go to the Text Properties tab, then choose your alignment from the Text Alignment menu. Here I have the text centered to demonstrate. Remember that left or right padding will throw off your centering. In this example, I’ve removed the 5 pixels of left padding that I added in the previous step.

STEP 8: Change Fonts for Effect

You can also have the font differ on your buttons or change when a user moves over your link. For the mouse-over effect, select the pseudo class’s a:hover. (Using my example from the previous tutorial, that’s .navbar a:hover.)

To change the font family, in the Font Properties tab, click the Create New Font Family button and choose an alternate family from the menu. Here I’ve selected a cursive font set that I made on my own earlier.

STEP 9: Change Font Color or Attributes for Effect

Another option is to alter the other font attributes in the Font Properties tab in any combination of ways. You can choose a Style and/or Weight or Decoration, each found in the Font Properties tab. And, of course you can change the font color, too. It’s normal to have font color change anyway. Here, my font changes to purple. You can also go to the Text Properties tab and choose Font Variant or Transformation or Word Spacing or Letter Spacing. (These may not appear in all browsers, though.)

Before settling on your page’s look, check how it appears in various pertinent browsers and platforms. The box and title effect here render well in Safari (Mac) and IE (Windows), as well as in the Mozilla beta version that’s current as of this writing. The title effect doesn’t render in Firefox, but it still looks good, so the effect can be used. (This may change in future releases.)

STEP 1: Add Text to Your Page

Get all of the text onto your page with the basic formatting such as headers and paragraph breaks. You can have other formatting within that text, too, or you can add that later on.

STEP 2: Open Your Style Sheet

To open your page’s internal style sheet, click the Open CSS Editor button (the stairs) at the top right of your page window.

Note: You can create your styles in either the page’s internal style sheet or in an external style sheet. This tutorial uses the internal style sheet because the styles on this page aren’t going to be used on any other pages, and putting the style in the shared external style sheet creates the risk of using these styles another time by mistake.

STEP 3: Create New Class

Click the Create a New Class Style button to create a new class. The new class is preselected, so type your class’s name. Give your class a descriptive name so you’ll recognize it later. Here, it’s named “.box.” If this box class were to be used only once, it would have a more descriptive, unique name. However, on this page there will be more boxes that are identical, so the same class is used for those areas.

STEP 4: Define the Box’s Border

Set the basic attributes of the box. To do this, click the Border and Outline Properties tab. Still in the Border panel, type “1″ in the fi rst All column, then press Tab. It should enter “px” for pixels (if not, chose Pixel from the pop-up menu). Moving right, Control-click (PC: Rightclick) the center of the color area and choose a color. Moving right again, choose Solid as your line. (If you’d like a shadowy look, change the bottom and right line widths to 2px. Another alternative is to choose any combo of widths and lines; however, not all lines render in all browsers.)

STEP 5: Define the Box’s Padding

As it is, your text will butt up against the border. For a more attractive look, click the Margin and Padding Properties tab. Under Padding, use 10 pixels for Right, Bottom, and Left, then change the Top padding to 0. Also add a Top margin of 20 pixels to put space on top of this box. (You can tweak these numbers later. Experiment to see the different results.) This is a good time to do a Save.

STEP 6: Select the Text to Be Enclosed

Back on the page, select all of the text to be enclosed in this box area. This selection can be a single paragraph or multiple paragraphs. Don’t include the area’s title text in this selection, though.

Note: You can still edit this text later on and even add or delete paragraphs.

STEP 7: Apply the Class

In the Style Apply tab of the CSS palette, in the box line, move to the Block Style column and click the box, placing a checkmark. This applies the class to the paragraph or paragraphs you’ve selected. You’ll see the result in the page layout, but check the page in each browser. Return to the style sheet and tweak it as desired.

Note: This effect may be all you’d like. If so, you can stop here.

STEP 8: Create the Box Title’s Class

Return to the page’s internal style sheet and, as in Step 3, click the Create New Class Style button. Type a name for your new class. This one must be unique (to accommodate the length of the title text) so make the name very descriptive. In this example, the text is “What you can expect” so the class name is “.whatyou.”

Note: To the right you’ll still see the last attributes panel used and may see the last style’s settings. Don’t let this throw you. They’ll disappear when you click anywhere or press Tab or Enter.

STEP 9: Define the Title’s Class

Under Font Properties, set the Back Color to white (or to match your page’s background color) and enter 10px for Line Height. Under Block Properties, for Width, enter the approximate width of your text (in this example, 170px). Then, choose Left in the Float pop-up. (This lifts the text out of the normal text fl ow, floating it above for the text-over-the-line look.) To create the spacing between the title text and the line it will lie upon, switch to the Margin and Padding Properties tab. Add 10 pixels for the Right Margin and 1 pixel for the Left. In the Padding column, give the Left side 4 pixels.

STEP 10: Select the Area’s Title Text

Back on the page, select all of the text in the line that will be the title that overlaps your box area.

STEP 11: Apply the Class

In the CSS palette, in the whatyou line, move to the Inline Style column and click the box, placing a checkmark as shown here. This applies the class to the selected text. This result won’t appear in layout and looks different in every browser, so you must preview it in several browsers. You’ll probably need to return to the style sheet and tweak the width, line height, margin, and padding.

STEP 12: Create More Boxes

To define more sections on your page, repeat Steps 6 and 7. Continue with Steps 8-11 to add the title effect.

Rather than having several identical boxes, you might create a variety as on this sample page on the left. Using the same techniques in Steps 3-7, create more classes with varied box attributes. For example, color the background of a box, vary line width and styles, or set a different font color, size, or family within a box.This example page also contains drop caps. To create them, create a new class called “.dropcap.” Under Font Properties, enter a font size that’s larger than your body font. Here, the body is 14px so the drop cap is 20px. Apply by selecting the single letter (or word), then checking Inline Style in the CSS palette.