[If you’d like to download the assets used in this tutorial, visit www.layersmagazine.com/downloads.html.]

STEP 1 Start with a Complete HTML Layout
To begin, download and open the site file Sample Site.site. Then, double-click the file named for_template.html in the Site window to open it. As my proof of concept, I build one complete and functioning HTML page before creating my template.

STEP 2 Simple as Save As
Choose File>Save As and save the file to the Templates directory in the web-data folder. (Use the Site Folder shortcut in the Save As dialog for faster access.) That’s it. Templates are just a regular ol’ HTML file. Name the template “myTemplate.html.” (We’ll ignore the myOtherTemplate.html file until later in this tutorial.)

Now we want to specify editable areas in our template that can be customized on each page of our site. To do this, we first select an area of the HTML page. Put your cursor inside the word “Welcome” and press Command-A (PC: Ctrl-A) to select everything in the content cell.

STEP 3 Make an Editable Paragraph Region
Open the Template Regions palette from the Window menu. Then, click the Create New Editable Paragraph Region icon at the bottom of the palette. Deselect the text and the new editable area in your page will now show in light green (as long as you have Show Invisible Items selected in the View menu).

STEP 4 Rename Your Region
Select the new region in the Template Regions palette and press Return (PC: Enter) to rename the region. You can use any name for the region, so in this case, let’s name it “Main Content.” Close and save the template file.

STEP 5 Make Some Pages
Control-click (PC: Right-click) in the Site window area and choose New>HTML Page from the contextual menu. Control-click (PC: Right-click) the new HTML page and choose Duplicate. Repeat this two more times. Select one of the new HTML pages, press Return (PC: Enter), and rename it “about_us.html.” Rename the other new files “products.html,” “services.html,” and “locations.html.” Notice the little construction icon under the Status column; this indicates that this file has no content in it to help you keep track of your progress.

STEP 6 Apply Template
Open the file we just made named products.html. When you create new HTML files in GoLive’s Site window, GoLive adds a reference to the site’s default CSS document. To apply the template, Control-click (PC: Right-click) in the page and choose Template>Apply Template>myTemplate.html. Once the template is applied, you’ll see all of the items from the template applied to your site. You’re permitted to edit anything inside the Main Content region of the template file. Let’s replace the word “Welcome” with the word “Products.” Repeat this process for about_us.html, services.html, and locations.html.

STEP 7 Link the Navigation
Open the myTemplate.html file again, and let’s link the left side navigation to the pages we’ve made. GoLive will ask you if you want to Modify or Create a new template when you access a template file. Choose Modify. Select the “About Us” text, hold Command (PC: Ctrl), point-and-shoot to the about_us.html file in the Site window. Repeat this process for products.html, services.html, and locations.html.

STEP 8 Update Files
Once you complete the links, close and save the myTemplate.html file. GoLive will prompt you with a dialog indicating all of the files that will be modified based on changing the template. Click OK, and GoLive will modify all areas of each page that are not inside of the Main Content region.

STEP 9 Test Your Links
At this point, we have a functioning website. GoLive has added the links from the template to all pages in the site. Open the products.html file in a Web browser and click each navigation item.

STEP 10 Apply Template to Existing Page
If you have a page with existing content, you can still apply a template to it. To demonstrate, we’ll open the file contact_us.html and apply our template to this page as we did with the other pages.

STEP 11 Select Editable Region
When a page has existing content, or another template applied, GoLive will preserve the content and give you the choice of where to apply the existing content. Let’s choose Main Content in the Select Editable Region dialog and click OK.

STEP 12 Content Assigned to Region
As you can see, the existing content has been applied to the Main Content region.

STEP 13 Update to a Different Template
You can duplicate your template file, make layout changes, add items, and make new regions. If you’re careful to keep the same region names, you can update the layout of your site with one action. In the Site window, select the myTemplate.html file, then open the In & Out Links palette (Window>Site>In & Out Links). Point-and-shoot the myTemplate.html file from the In & Out Links palette to the myOtherTemplate.html file in the Templates directory of the Site window. Click OK in GoLive’s Change Link dialog.

STEP 14 Preview New Layout
Open the products page again in a browser. Click the links (now on the right) to see the changes to each page. In addition to layout, you can change the template’s CSS file reference as well, allowing you to modify even more of the appearance. Use alternate templates to “try out” different layouts and user experiences. With the In & Out Links palette, you can always go back to the original.

STEP 1 Open the Site
Let’s start with a three column CSS-based layout, so after downloading the practice files, open the site file Inline Frames.site, and then double-click on the advanced_css_objects.html file in the Site window to open it.

STEP 2 Adjust the CSS-Based Layout
Using the Object Selection tool, click on the outermost DIV to select it, and then bring up the Inspector palette (Window>Inspector). Set the Right Column Width to 250 pixels. You’ll notice the center area automatically shrinks to accommodate the new size (thanks, GoLive, for doing the math and CSS adjustments for us!).

STEP 3 Set the Default Text for Inline Frame
Double-click on the file called start.html in the Site window to open it. Type in “Choose a destination from the list on the left.” This will act as the default view inside the inline frame when a visitor first opens this page.

Note: You may choose the first destination page (Destination #1) to be the default instead of an instruction page.

STEP 4 Drag Out the Inline Frame Object
Back in the advanced_css_objects.html file, click inside the right DIV with the Standard Editing tool and select all of the contents (Edit>Select All). Press Delete (PC: Backspace) to remove all the contents. Next, click on the flyout menu at the top of the Objects Toolbar and choose Frame. Select the Inline Frame object (top-left icon) from the set of Frame objects and drag it into the rightmost DIV.

STEP 5 Set the Properties for Inline Frame
Select the Inline Frame object that you just inserted and bring up the Inspector palette. Enter (or point-and-shoot to) the start.html file in the Source field, set the Name/ID field to “descriptions,” set the Width and Height to 250 pixels, and uncheck (if checked) the Frame Border setting. Another important option is to leave the Scrolling set to Auto. This will allow the inline frame to attach a scroll bar if the content of the webpage is longer than the inline frame’s height.

STEP 6 Make Your Border with CSS
Let’s make a custom border based on a CSS definition to ensure graphic consistency. Double-click the stylesheet.css file in the css folder in the Site window to open it. Click the Create a New Class Style icon, and use “.border” as the name. Then, select the Border and Outline Properties tab and enter 1 pixel in the All field. Select Blue from the pull-down menu next to the color chip, and select Solid from the last pull-down menu. Close and Save the file.

STEP 7 Apply the CSS Border
Select the inline frame in the advanced_css_objects.html and open the CSS palette from the Window menu. With the inline frame selected, there’s an option to apply CSS definitions to the iframe; let’s apply the border definition we just created to the iframe.

STEP 8 Make Content Pages
Next, we need to make the pages that we’re going to load into the inline frame. Since we’re loading HTML pages, we can create our pages with any technologies a webpage can have, such as text, database results, audio, images, video, and even Flash animations (as I have embedded in the destination_03.html file that you’ll use in the next step).
[For more on using different types of media files in GoLive, see www.layersmagazine.com/category/tutorials/golive.]

STEP 9 Make Links to Content Pages
Select the text “Destination #1” with the Standard Editing tool, hold the Command key (PC: Control key), and point-and-shoot to the file named destination_01.html in the Site window. Repeat this for “Destination #2” and “Destination #3.”

STEP 10 Target the Links
Now we need to target the links so that the pages will load into the inline frame. Select some of the linked text in the Destination #1 link (you don’t have to select all of the linked letters). In the Inspector palette, choose “descriptions” from the Target pull-down menu. Repeat for Destination #2 and #3.

STEP 11 Cross-Link the Content Pages
Double-click the destination_01.html file in the Site window to open it, select the “destination 2” text at the bottom, and link it to destination_02.html in the Inspector palette. Do not set the Target; this will make the link default to the same window the file is in (which is the inline frame). Close and Save the file.

STEP 12 Link Outside of the Inline Frame
Open the destination_02.html file, select the “Link outside of frame” text at the bottom, and make a link to a website in the Inspector palette. For this link, choose “_top” in the Target pull-down menu. This link setting will make sure the link breaks out of the inline frame and takes over the topmost window of the browser.

STEP 13 Add Extra Content to See Scrolling
Before closing destination_02.html, let’s add some extra content to the page. This will ensure overflow in the inline frame so we can see our automatic scroll bar kick into action when we preview the file. Close and save the file.

STEP 14 Preview the Experience
Preview your pages in a Web browser. Notice the border on the inline frame, and how the links target the page into the inline frame area. View the content for Destination 1 and notice how it links to Destination 2 inside of the inline frame. And finally, take a look at the scroll bar on Destination link #2, test the link to the outside page, and then come back and view the Flash animation in Destination 3.

If you design for any medium’s strengths, your design will benefit from what the medium has to offer. Many websites look like print pages, stopping short on the right or using layout techniques optimized for paper. In this tutorial, we want to show you how to take an image and turn it into a tile (in Photoshop) and create the necessary HTML and CSS (in GoLive) to make a liquid design element.

[If you’d like to download the assets used in this tutorial, visit www.layersmagazine.com/magazine-downloads.]

Create Banner in Photoshop

STEP 1 Open New Document; Add Image to Tile
Create a wide canvas and make the height the same as your desired banner. In Photoshop, choose File>New and enter 1000 pixels for Width and 175 pixels for Height. Open the image you want to tile, select the Move tool (V), and drag the image onto your new document. Now drag your image layer onto the Create a New Layer icon to create a duplicate. Position the images so they span the width of the canvas. Click the Add Layer Mask icon, choose the Gradient tool (G), and drag out a short linear Black, White gradient to blend the images.

STEP 2 Style Your Banner; Make Area for Logo
Click the Create New Adjustment Layer icon, choose Hue/Saturation, and boost the Saturation (we used +4). Now click the Create a New Layer icon, select the Rectangular Marquee tool (M), press D to set your default Foreground/Background colors, and drag out a selection across the bottom of the banner (ours is 1000×40 pixels). Press Command-Delete (PC: Control-Backspace) to fill the selection with white, lower the Opacity to 50%, and rename it “white transparent.” Follow the same steps above to create a 1000×65 pixel selection across the top of the banner (leave Opacity at 100%) and rename this layer “white solid.”

STEP 3 Add a Rule; Merge Layers
Click the Create a New Layer icon, choose the Line tool (in the Rectangle tool’s flyout menu), and click the Fill Pixels icon in the Options Bar. Select a pinkish Foreground color and drag out a 1-pixel rule across the image (use the Shift key to keep the rule straight). Name this layer “rule.” Create another new layer and hide any other layer that’s not part of the tiled image (click each layer’s Eye icon to hide it). With your new layer selected, press Command-Option-Shift-E (PC: Control-Alt-Shift-E) to merge a copy of all visible layers into the new layer.

STEP 4 Find the Seams
Select the merged layer (Layer 2), hide all the others, and choose Filter>Other>Offset. In the dialog, enter +500 in the Horizontal field, choose Wrap Around, and click OK. This takes the pixels on the rightmost edge and wraps them around next to the pixels on the leftmost edge, and puts this seam in the center. Now use the Clone Stamp tool (S) or the Smudge tool (under the Blur tool’s flyout menu in the Toolbox) to obscure this transition. Once you hide this seam you’re done with the tile.

STEP 5 Make Some Slices
Make the layer containing your logo visible again. Select the Slice tool (K) and drag out a selection across the top (logo) portion of the image that’s 760×65 pixels. Double-click the slice, name it “logo,” and click OK. Now make a slice for the tiling artwork that’s 1000×110 pixels, name it “tile,” and click OK. Choose Save for Web from the File menu, Shift-click to select the two slices, choose a JPEG preset, and click Save. In the dialog that appears, navigate to the Web folder you’ll be using, and click Save again. Now, we’re ready for GoLive!

Create Liquid Effect in GoLive

STEP 1 Make a New Webpage
In GoLive, choose File>New and select Web from the list on the left. Now click Pages then HTML Page, set your Options (as shown above), and click OK. Choose File>Save As, name your file “banner.html,” navigate to the Web folder (where you put the images in Step 5), and click Save.

STEP 2 Make a CSS Class
Find your logo image and drag it into the webpage. Click the Open CSS Editor icon on the far right to open the CSS Editor. In the dialog, click the Create a New Class Style icon to create a class named “.banner.”

STEP 3 Make a DIV
Control-click (PC: Right-click) in the webpage (not on the image) and select CSS Div>Banner. This will create a DIV in our page and assign it the class of banner (that we just defined in our CSS Editor). You can click the Source Code Editor tab on your HTML page to peek at the source code to see what GoLive is actually doing.

STEP 4 Style Your DIV
Now let’s assign some properties to our DIV. Back in the CSS Editor, select the .banner definition, and click on the Block Properties tab. Enter a Height of 175 pixels and a Width of 100%.

STEP 5 GoLive Represents DIV Area
You should now see a dotted line around your DIV. You may need to switch to Source mode then back to Layout view to give GoLive a chance to render the new DIV settings.

STEP 6 Add the Background Tile
Back in the CSS Editor, select the .banner definition and click on the Background Properties tab. Next to the Image setting in the right side, select URL from the pull-down menu. Then click the Folder icon and navigate to your tile.jpg file. Notice the tile image fills the DIV area.

STEP 7 Repeat Only Horizontally
To make sure the tile only repeats horizontally, select the Repeat setting and choose “Repeat X.” You’ll see GoLive update the DIV preview, representing the tile only repeating across. Now set the Horizontal field to 50%.

STEP 8 Vertical Offset
Next, in the Vertical setting, enter an amount of 65 px (the height of the logo graphic). This tells the Web browser to start the background image’s first pixel at the 65-pixel mark on the y-axis. Lastly, Control-click (PC: Right-click) in the page area and choose Document>Set Page Margins to Zero (to make the banner touch the edges of the browser).

STEP 9 Preview the Page
Click the Preview in Browser icon in the Toolbar to open the banner.html file in your Web browser. As you resize the browser window, notice how the banner fills in the window. This banner now has a “liquid” quality, and given the irregular texture (as opposed to a solid color or vertical blend), the visual appeal is much greater.

Note: You can do the same background image techniques on table cells. Some Web browsers won’t honor height settings in (table cells), so you may have to use a transparent spacer.gif to force the height.

In a typical website, clicking links in the main navigation takes you to different HTML pages. It’s possible to make the user experience a little more dynamic by having only a portion of the page update when clicking a link. This way, the entire page doesn’t have to refresh in order to change the content. This tutorial will show how to set up multiple layers in your webpage and turn on and off the visibility to create a more dynamic viewing experience for visitors.

Note: Due to changes in Microsoft’s Internet Explorer Web browser, you may get a security warning that the page’s content is restricted. You must Allow Blocked Content before you can interact with this dynamic page. In addition to JavaScript (used in this tutorial), this security change also affects Flash, QuickTime, RealPlayer, and other third-party (plug-in dependent) technologies embedded in webpages. Learn more at Adobe’s Content Development Center (www.adobe.com/devnet/activecontent).

STEP 1 Download Assets
To follow along, download the assets for this tutorial from the Layers website at www.layersmagazine.com/magazine/downloads. To preview the final desired result, open the file named “working.html” in your Web browser.

For the adventurous, you can combine this tutorial with the “Animating Layers” tutorial, and create animated dynamic content for your viewers. Click here to view additional GoLive tutorials.

STEP 2 Drag Out a Layer Object; Select the Layer
Open the site file Show_Hide_Layers.site and double-click the index.html file in the Site window to open it. We’re going to start by creating a layer using GoLive’s Layer object and dragging it into the page. It doesn’t really matter where you drop the object right now, so we’ll drop it in the center of the content area. Select the layer and open the Inspector palette. You’ll see the default values assigned to the new layer.

STEP 3 Set the Layer Properties
In the Inspector palette, set Name to “welcome,” the Width to 450 pixels, and the Height to 200 pixels. Open the content.html file and copy (Command-C [PC: Control-C]) the Welcome headline and text from this file to the clipboard.

Note: We styled this copy in the “Conquering Cascading Style Sheets, Part 1” tutorial available online at www.layersmagazine.com/design/go-index.php.

STEP 4 Set the Content for the Layer
Click inside the “welcome” layer of the index.html file with the Standard Editing tool, and then press Command-V (PC: Control-V) to paste the copied headline and text. You may notice the layer is a slight bit lower and to the right than we want. Let’s bring up the Inspector palette.

STEP 5 Position the Layer with Precision
Select the “welcome” layer with the Object Selection tool, and then in the Inspector palette tweak the absolute positioning of the layer. Set the Top value to 212 pixels and the Left to 175 pixels. This will place the layer at a position that aligns with our page design.

STEP 6 Set Paragraph Format to None
Select a few characters of the Welcome headline with the Standard Editing tool and choose None from the Set Paragraph Format drop-down menu in the Options palette (or choose Type>Paragraph Format>None from the main menu). This will remove the default

tags around the heading and make the text flush to the top of the layer.

STEP 7 Make Another Layer
Drag another layer from the Objects palette into the page. (Note: Don’t drop your new layer directly on top of the “welcome” layer.) You’ll see another small yellow box appear near the first one (this represents where the code exists in the page instead of the position of its content defined by CSS settings in the Inspector palette). Select the new layer, open the Inspector palette, name the layer “about,” and enter the same positioning settings as the “welcome” layer.

STEP 8 Open the Layers Palette
Now, in the Inspector palette, click the Layer Palette button. The Layers palette works as expected, allowing you to display or hide layers. Let’s hide the “welcome” layer (click its Eye icon in the Layers palette so it disappears) so we can work with the “about” layer.

STEP 9 Copy-and-Paste Content; Make More Layers
Paste in some content as we did in Step 3. Don’t forget to change the Set Paragraph Format pop-up menu to None, as we did in Step 6. Repeat this process to create a “products” and “services” layer.

STEP 10 Show the Main Page; Hide the Rest
Now that we have all of our layers created, we need to set the “initial state” of the page. We want the “welcome” layer to be what viewers see when they first visit the site, and we want the other layers to be hidden. Select each layer in the Layers palette and turn off the Visible checkbox in the Inspector palette. Do this for all the layers except the “welcome” layer.

Note: If the Visible option is grayed out, switch to Source mode then back to Layout view; this forces GoLive to update the interface options based on the new underlying code.

STEP 11 Create Mouse Click Action
Once only the “welcome” layer is showing, select some text in the About Us navigation link and open the Actions palette (Window>Actions). (Tip: You don’t have to select all letters in the link.) Now select the Mouse Click option on the left, then click the Create New Action icon under the Actions panel.

STEP 12 Assign an Action
From the Action pull-down menu, select Multimedia>ShowHide.

Note: This ShowHide differs from the Layers palette in that this controls the visibility instructions given to the Web browser. The Layers palette is for you to show/hide layers while authoring the page.

STEP 13 Set the Instructions
You’ll now see two pull-down menus: one for the Layer and one for the Mode of that layer. Set the Layer to “welcome” and the Mode to Hide. Add another action to the same About Us navigation link (you can copy-and-paste the previous one). Select “about” from the Layer pull-down menu, then set the Mode to Show. Set two more actions: one hiding the “products” layer and the other hiding the “services” layer.

STEP 14 Test the Experience
Repeat Steps 11, 12, and 13 for the Products and Services links in the left nav. Make sure the Product link shows the “products” layer and hides the other three, and so on. Preview the experience in the browser. When opening, each layer will hide itself (set in the Inspector palette) and only the “welcome” layer will be visible. Then, each link will show its corresponding layer and hide the others when clicked (via the Mouse Click action).

Terry White is a technical resources manager for Adobe Systems Inc. This video is a sample from his Adobe® Creative Suite Podcast.

This video requires Adobe Flash Player.

STEP 1 Open the Assets; Add Layer Object
Open the GoLive CS_Issue7_Tutorial.site and double-click on the index.html file in the Site window to open it. We’ll start by creating a layer using GoLive’s Layer object from the Basic tab of the Objects palette and dragging it into the page. It doesn’t really matter where we place the object right now, so we’ll drop it to the right of the copy.

[To follow along, download the CS2 assets for this tutorial from www.layersmagazine.com/magazine-downloads.]

STEP 2 About the Boxes
Notice that after we drop the layer, it’s actually placed after the table cell holding our text, which is okay, really. In this image, the small yellow box represents the actual code in our page and the bigger box represents the positioning that’s defined by the style sheet.

STEP 3 Selecting a Layer
Move your cursor over the edge of the box until you see a sideways hand cursor, which indicates that we’re selecting the layer, instead of selecting what’s inside the layer.

STEP 4 Reposition the Layer
Click-and-drag the layer to the desired position. As we make this change, we’re actually updating the style sheet information relating to our new object.

[For more information on “Conquering Cascading Style Sheets,” click here to see other GoLive tutorials.]

STEP 5 Rename the Layer
With the layer selected, open the Inspector palette. In the dialog, let’s first change the Name from layer1 to something more meaningful—in our example we used “sidebar.” Set the Width to 230px and change the Height to Unchanged in the pop-up menu (this makes the layer stretch vertically as we add/remove content).

STEP 6 Get Content
Now let’s put some content into the layer. Open the file named sidebar.html. Select the table (make sure you see the box shape next to your Arrow tool), then go under Edit and choose Copy.

STEP 7 Insert Content into the Layer
Now go back to the index.html file, and move your cursor over your layer until you see the text i-beam cursor. Click and you’ll see a blinking text cursor, then select Edit>Paste. The HTML code for content that’s inside the layer is inside the yellow box we saw in Step 2.

STEP 8 Accessing the CSS Editor and Layers Palette
Select the layer and bring up the Inspector palette again. There are two additional key areas of information linked from this palette: the CSS Editor and the Layers palette. When you open the CSS Editor, you’ll see the same information that we entered earlier. You can make further modifications to your layer here as well. The Layers palette gives you a running inventory of the layers on the page and lets you directly select any layer, without a sideways hand, or having to decipher a series of small yellow code objects.

STEP 9 Accessing the Timeline Editor
The Inspector palette has two additional tabs in it relating to our layer. In the Timeline tab we can specify the type of animation and a Key Color (just for editing purposes). You’ll also see a Record button. When you click the Record button, then click-and-drag your layer in a desired animation pattern, GoLive will create an animation, even representing the speed at which you dragged out your path. In our example, however, we’re going to use the DHTML Timeline Editor, so click the Open Timeline Editor button (I know, I have control issues).

STEP 10 Create a New Keyframe
Hold down the Command key (PC: Control key) and click on the Timeline at approximately the 10-second mark to create a second keyframe on our Timeline. Also, notice the pull-down menu at the bottom right of the DHTML Timeline Editor: This is where you can specify the frames per second (fps) for your animation.

STEP 11 Reposition First Frame
Click on the first keyframe in the Timeline to select it, and then click-and-hold on the bottom right of the layer in the page. Drag the layer to the top center of the page as high as you can so that most of the content is hidden from view (you should see only the bottom of the layer as shown in next step).

STEP 12 Hide the Layer Offscreen
As we have little control over the bottom and right sides of a user’s browser, the only absolute areas that we can count on are the top and left edge (which is why branding and global navigation are typically anchored in these areas). For our animation, we want to hide the layer from view, then have it appear from offscreen. As you drag your layer to its beginning point, GoLive will draw a line to represent the animation’s two key points (similar to After Effects).

STEP 13 Jogging the Timeline
To test and see if the keyframes are set up properly, click-and-drag the yellow triangle Time cursor to step through the animation. If you see the layer moving between the two keyframes in the page as you drag the Time cursor, the animation has been set up successfully.

STEP 14 Loop Settings
Now you’ll need to set up any loop settings you desire. By default, this animation will play from frame 1 and stop at the end, but if you want the animation to loop, click the Loop button at the bottom left in the Timeline Editor to select it. Then you have another choice (right next to the Loop button), and that’s Palindrome, which essentially means that instead of the animation jumping back to frame one, it will play backward until it reaches the end, then play forward again. As always, test your page in a Web browser.

This tutorial is the last of a three-part series on style sheets, which included:
• Beginner tutorial: CSS definitions, HTML elements, classes, and pseudo classes
• Intermediate: Navigation and links, styles for tables, and background images
• Advanced: DIV properties and CSS-based layout

Download Assets

[If you’d like to download the assets used in this tutorial, visit www.layersmagazine.com/magazine-downloads and open GoLiveCS2_Issue6_Tutorial.site. This tutorial was adapted from a freely available series of Web and email templates.

STEP 1 Build Two Layouts; the Beginning
We’re going to build these two layouts with a CSS-based layout, which means we’re not going to use tables. This layout method begins to feel more like designing pages in print, with text, graphic containers, and positioned objects, as well as the style sheet usage we learned in parts 1 and 2 of this series.

Absolute Positioning

STEP 1 Using Layers
Once you have the GoLiveCS2_Issue6_Tutorial.site open, we’ll begin with what’s called absolute positioning. This is where we take a DIV (HTML division tag), and assign it properties with CSS. Open the advanced_div_layout.html file in the Site window to open the styles from the intermediate tutorial. Start by dragging a Layer object from the Basic tab of the Objects palette.

STEP 2 Rename the Layer
Move your cursor over an edge of the Layer object and when your cursor turns into a sideways hand, click to select it. In the Inspector palette, change the Name to “photo,” then set Top to 30px, Left to 40px, and Width to 105px. Click on the Height drop-down menu and select Unchanged. Technically, this Layer is a DIV and these settings are actually CSS definitions. Click on the CSS Editor button at the bottom left of the Inspector palette.

STEP 3 Add More CSS Attributes
Let’s add a few additional CSS definitions. In the CSS Editor, we’ll see a file reference to our stylesheet.css document, and a new item called “photo.” Select the Border and Outline Properties icon, and for the Top and Left of the photo DIV, enter a 1-pixel, red, Solid border.

STEP 4 Add an Image
Next, we’ll bring in our photo named “night_shot.jpg” by dragging it from the images directory in the Site window (GoLive CS2_Issue6_Tutorial.site) into our Layer object. The photo is 100 pixels wide so we’ll add some padding in the next step to use the rest of the 105 pixels that we defined for the width in Step 2.

STEP 5 Add Some Padding
[Insert part1_step_05.psd]—add red circle as shown on the contact sheet
Go back to the CSS Editor and select the Margin and Padding Properties icon. Under Padding, enter 5 pixels for both the Top and Left of the photo layer. This will bring the photo away from the border.

STEP 6 Add Another Layer
Drag another Layer object into your page, then grab it (sideways hand), and drag it next to the photo layer. When you begin to drag the object, you’ll see a grid appear, which will help you align the objects. Repeat Steps 3–5 but with the settings outlined in the next step.

STEP 7 Final Touches and Preview
In the Inspector palette, change the Name to “Content,” then assign a Width of 350px and no Height. In the CSS Editor, set the Top Border to 1px, red, Solid, and then set Padding to 5px for Top and 10px for Left. Paste in some sample copy from the file named “sample_content.html” in the Site window, and then preview your page in a Web browser (File>Preview In).

Using GoLive’s CSS Objects

STEP 1 Add a CSS Object
First, open the advanced_css_objects.html file in the Site window. To lay out a whole page with CSS-based objects, let’s use GoLive’s CSS objects in the Objects palette. Start by dragging the Three Columns: Scaling Center object. Select the object and then enter the following in the Inspector palette: ID: “pageLayout”; Left Column Width: 110px; Height: Unchanged (from drop-down menu); and Right Column Width: 125px.

STEP 2 Add Some Content
From the sample_content.html file, copy the center text and sidebar photos and paste them into their respective columns of the advanced_css_objects.html file. Next, let’s add the CSS Object named Navigation Rows by dropping it into the left column. Once placed, in the Inspector palette, set the ID to “navigation.”

STEP 3 Understanding the CSS Object’s Contents
Paste each navigation item from the sample_content.html file into the navigation rows. These links have the style applied to them from last issue’s Intermediate tutorial.

Open the CSS Editor for this page (see CSS Editor in next step) and you’ll see several new definitions: Four items ending in “pageLayout” and two ending in “navigation” (the ID names we entered). The definition “colcont_pageLayout” is the container that holds our three columns for the pageLayout CSS object.

STEP 4 Add Some Padding
In the CSS Editor, select colboxleft_pageLayout and add 40px of Padding to Top. Select colboxmiddle_pageLayout and under Padding, set Right to 20px and Left to 50px (as shown). Lastly, select colboxright_pageLayout and set Top Padding to 40px. Some formatting may not display as expected in GoLive, so let’s preview our progress in a Web browser.

STEP 5 Style the Navigation
Still in the CSS Editor, select the navbox_navigation and choose 1px, red, and Solid for the Right Border (as shown). Then with navbox_navigation still selected, under Margin and Padding, add 5px Padding for the Top and 15px for the Left.

Lastly, click on the Background Properties icon, choose URL in the Image drop-down menu, and select Once from the Repeat option. Drag the Pick Whip to the nav_arrow.gif file in the Site window. This will place a graphical arrow next to each item in your navigation. You can also select and delete extra navigation rows.

STEP 6 Preview for Browsers and Mobile Devices
Preview your page in a browser. To see the full advantage of CSS-based layout, open GoLive’s Small Screen Rendering under the File>Preview In menu (GoLive CS2 only). CSS objects can also be rearranged by devices with small screens, such as PDAs and cell phones—a feat not possible with table-based layouts.

This tutorial is the first part of a three-part series on style sheets, including:

• Part 1: Beginner (this Web article): Covering CSS definitions, HTML elements, classes, and pseudo-classes
• Part 2: Intermediate (Layers magazine, January/February 2006): Navigation and links, styles for tables, and background images
• Part 3: Advanced (Layers magazine, March/April 2006): DIV properties and CSS-based layout

  To follow along in GoLive CS 2, download and open the file GoLiveCS2_Issue5_Beginner_Tutorial.site.

  To follow along in GoLive CS, download and open the file GoLiveCS_Issue5_Beginner_Tutorial.site.

STEP 1: Start with Some Text

Open the file index.html. Start with some plain text on your page. Without any CSS instructions, GoLive will display the text as black, Times Roman, at approximately 14 points. This is because this is the average default setting of most Web browsers.

STEP 2: Assigning HTML Elements

Before creating some style sheet definitions, let’s first style the text with basic HTML mark-up. Select the text “ATTRACTIONS,” then on the Options Bar at the top, from the Set Paragraph Format pull-down menu, select Heading 1. This creates an HTML element named <h1> (which stands for Heading 1). GoLive will also render this to the default settings of most Web browsers.

STEP 3: Adding a Link to Text

Next, select the “Learn more” text, and in the Inspector palette, enter a pound sign (#) in the Link field. This will create linked text in the document. This also creates an HTML element named <a> (which stands for anchor). Anchors are the most common way to make items “clickable” in webpages.

STEP 4: A Look Under the Hood

Click on the Source Code Editor button at the top of your window to switch to Source view and look at the code we have generated so far. The green arrows indicate the beginning and end of the heading <h1> element, and the orange circles indicate the beginning and end of the anchor <a> element. Notice that the “ATTRACTIONS” text is inside of the heading element, and the “Learn more” text is inside of the anchor element. This is important to note because when we make our CSS definitions for headings and anchors, only the text inside of these tags will be affected.

STEP 5: Open the CSS Editor

Click on the Layout Editor button to switch back to Layout view. Then, click the Open CSS Editor button at the top right of the document window to bring up the CSS Editor for this page. You can have CSS definitions in two places: inside the webpage you are working on, or in a separate CSS document that is linked to your page. The advantage of linking to a CSS document is that you can use one CSS document on all of your pages, and exercise global control of your website’s look from one place! So, we’re going to opt for this.

STEP 6: Linking to a CSS Document

In the CSS Editor window, click the button to Create a Reference to an External Style Sheet File. Next, you will see an empty reference created in the area to the left. Select it, and use the Fetch URL button to point-and-shoot to the stylesheet.css document in the site window. Then close the CSS Editor window.

STEP 7: Create a CSS Definition

Open the file stylesheet.css. We are going to redefine some standard HTML elements. Click on the Create a Style That Applies to Markup Elements button, and select h1 from the pop-up menu. This will allow us to redefine how the Web browsers will render text inside of the <h1> element tags.

STEP 8: Assign Properties to a Definition

Select the <h1> element in the definition list to the left. Next, click on the Font Properties tab. Choose 12px for the size. Double-click on the Color field to bring up the Color Picker and choose a brownish color. Then, click the Create New Font icon at the bottom right of the window and select Arial as the font from the pop-up menu.

STEP 9: Assign Additional Text Properties

Now, select the Text Properties tab and enter 20px for Letter Spacing. As you make changes, you’ll see your changes happening in real time.

STEP 10: Style Your Links

Make a new definition for the <a> element. Select the a:link item from the Create a Style That Applies to Markup Elements button’s pop-up menu. (If the buttons shown here don’t appear along the top of your window, click below your new element to get back to the front screen and turn on the checkbox for Show These Buttons at Top.) This controls the way a link looks in your page. the “:link” is actually a pseudo class, meaning a subset of the <a> element. We’ll do more with this in the next step. Once you make the new a:link element, select the Font Properties tab and choose Red from the Color pop-up menu.

STEP 11: Set Rollover Colors for Links

Make a new element, just as in Step 10, and select the a:hover. This is another instance of the anchor element <a>, but with the pseudo class of hover. This means that the properties you select with this definition will only occur when you hover (move your mouse) over the link. Click the Font Properties tab and select a light blue color in the Color field. Save your style sheet document (File>Save), and choose the Preview button in your document. Roll your mouse over the link to see the :hover pseudo class in action!

STEP 12: Set Properties for the Page

Let’s make yet another element definition. Same process as in Step 10, but choose . In the Font Properties tab, select Blue from the Color pop-up menu, and Yellow from the Back Color pop-up menu. Type 12px for Size, and choose Times from the Create New Font pop-up menu. As before, you will see the changes reflected immediately.

STEP 13: Make a Custom Class

Now we’re going to invent our own definition item. Click on the Create a New Class Style button. This will create a new item in the left area called “.class.” Class items are items you can name anything you want, as long as it starts with a period (.). Let’s name it “.heading” and give it a Size of 18px in Font Properties. From the Style pop-up menu, select Italic.

STEP 14: Assign Your Custom Class

Finally, select the text “Night Life” in your webpage. Bring up the CSS palette under the Window menu. You will see a listing in this palette of every custom class you create. Turn on the checkbox under Inline Style next to the “heading” item. GoLive will also show you a preview of what the text will look like with this style selected in the preview pane of the CSS palette. If you look at the Source view again, you’ll notice your custom CSS tags inserted into the code <span class=”heading”> around the Night Life text.

Now you are ready for part 2, the intermediate lesson, in the January/February 2006 issue.

The biggest challenge in Web design and development is the separation of content and design. If you’re familiar with paragraph and character styles in applications like InDesign and Illustrator, then you’re well on your way to understanding style sheets for the Web.
Cascading Style Sheets (CSS) have been with us for a while and, over the past three years, have gained a lot more momentum. Because browser support for most of CSS standard is now in place, designers and Web developers feel their time isn’t wasted by using more of what CSS has to offer in the way of layout and interactivity, not just simple text formatting.

This tutorial is part two of a three-part series on style sheets, including:
• Beginner tutorial: Covering CSS definitions, HTML elements, classes, and pseudoclasses
• Intermediate: Navigation and links, styles for tables, and background images
• Advanced: DIV properties and CSS-based layout

STEP 1 Simplifying Your Pages
We’re going to look at changing the way you develop pieces of your website. We’ll use CSS to change the appearance and behavior of a list of navigation links and a standard table. This will simplify the amount of code in your pages, and make your site easier and faster to update (and change your designs faster, too). To follow along, download the assets for this tutorial in CS2 or CS from the Layers website (www.layersmagazine.com) and open GoLiveCS2_Issue5_Tutorial.site. This tutorial was adapted from a freely available series of Web and email templates available later in this tutorial.

Navigation Links without Images and JavaScript

STEP 1 Create a List of a Few Items
Many times when you see navigation, it’s done with images. These can be time consuming to make and require JavaScript to create a rollover effect. Here we’re going to set not only the appearance of the text, but the visual behavior of the text when the user rolls the mouse over it. Start with the list of text in the intermediate_nav.html file. Select each line of text and add the pound sign (#) to the link area in the Inspector palette. This creates a self-link for demonstration purposes. If you’d like, you can make links to real files or websites.

STEP 2 Make a CSS Class Item
Open the nav.css file so we can make a new class. Start by clicking the Create a New Class Style button in the CSS Editor. Name this new class definition “.nav_items.” Under Font Properties, enter 11 pixels for Size and Bold for Weight. The Arial font is already assigned through the “cascade” effect. Because we defined the font in the Body element, that setting carries through every setting inside of the Body tag (which is the entire body of the HTML document).

STEP 3 Assign Your Definition to the Linked Text
In the intermediate_nav.html document, select your linked text one line at a time. Open your CSS palette from the Window menu. Every CSS definition (item) you create will show up in this palette. The CSS palette dynamically shows you all of the options for assigning this CSS definition to your text. Because the text you’re selecting contains a link, the .nav_items class can be assigned to the < a > property of the text.

STEP 4 Make Class to Target Links
Let’s create another class that will reassign the color of these links. Click the Create a New Class Style button, and enter the name “a.nav_items.” With this item selected, choose blue text in the Font Properties. I also selected No Text Decoration in the Decoration setting. This removes the underline. The a in this definition’s name means that links inside of the .nav_items class will take on these new properties, but the rest of the links on the page will remain the original color and decoration as specified by the < a > element.

STEP 5 Make a Class for the Rollover Behavior
Let’s create another class named “a:hover.nav_items.” As we saw in the beginner tutorial on the Layers website, the :hover is a pseudoclass that’s triggered when the mouse rolls over this CSS item. Select the page color as the text color for this definition, with a Back Color of dark blue. Then add some padding so the highlight box gives the text breathing room. In the Margin and Padding Properties, enter 3 for Top, 3 for Right, 3 for Bottom, and 10 for Left. To see this effect, click Preview in Browser in the Options Bar and roll over the links.

Using CSS on Tables

STEP 1 Sidebar with Rounded Corners
Creating a design element with rounded corners, though a simple task in print and video, can be quite challenging on the Web. The challenge is that the content determines the size of the element and, as users have varying browsers and font settings, their view of each page will have some variance. So, we need to build a vertically “stretching” design element. The rounded corners need to be images, and are typically broken up into a 3×3 table with nine sliced images to create a rounded-corner box (as shown above). We’re going to create a 1×3 table with 3 images.

STEP 2 Make a Design in Photoshop
We’ll design our sidebar box in Photoshop. Based on our Web design, we have a width of 230 pixels, so set the Canvas Size to that. Design the box with rounded corners. Now use the Slice tool to make three horizontal slices. Once sliced, get the Slice Select tool and double-click the top slice, name it “sidebar_top,” and name the bottom slice “sidebar_bottom.” We’ll use the center slice as a tiling image so our sidebar box can “stretch” vertically as more content is added, so name it “sidebar_tile.” Choose Save for Web, and save the slices to your Images directory.

STEP 3 Create a Table and Set the Parameters
Back in GoLive, we have the text we’re going to put into our sidebar. We have already styled the text in the beginner tutorial (on the Layers website). Drag out a table from the Basic set of draggable objects in the Objects Toolbox. By default, GoLive will create a 3×3 table when you let go. Select the table and open GoLive’s Inspector palette. You will see the default settings. Let’s change the settings to 3 for Rows, 1 for Columns, 230 for Width, 0 for Border, 0 for Cell Pad, and 0 for Cell Space.

STEP 4 Move Text into Table and Apply Graphic Slices
Now select the text and copy-and-paste (or click-and-drag) the text into the center cell of the table. (Note: Text formatting is covered in the beginner tutorial on the Layers magazine website at www.layersmagazine.com.) Notice the center cell expands vertically to accommodate the text. We’ll take advantage of this table behavior. Drag the sidebar_top.gif and sidebar_bottom.gif files from the Images directory into the top and bottom cells respectively.

STEP 5 Make a New Class
In the CSS Editor, make a new class and label it “.sidebar_content.” In the Margins and Padding Properties, assign 15 pixels for Right and 60 pixels for Left to the Padding options. Note: You can jump directly to specific definitions by clicking on the icons to the right of the definition’s name.

STEP 6 Select Center Cell
Select the center table cell. This can be done a few ways: you can Control-click (PC: Right-click) inside the cell and choose Select Cell from the content menu; or you can use the Object Selection tool in the top right of the Tool palette; or you can move your cursor near the edge of the cell and click. When selected, open the CSS palette and check the box under to assign the CSS style to the table cell (td stands for table data in HTML code).

STEP 7 Add a New Property to Your Class
Go back to the CSS Editor, and let’s add one more property to the definition of sidebar_content. Under Background Properties, select URL from the Image pop-up menu. Then point-and-shoot to the sidebar_tile.gif file in the Images folder in the Site window. You’ll see the graphic pop into place in your document as soon as you let go of the mouse button. And, the last step, choose Repeat Y in the Repeat pop-up menu. This will ensure the graphic only repeats vertically (on the Y axis).

Free GoLive Templates from Adobe

STEP 1 Download 12 New GoLive Templates
There are six website and six email newsletter templates, many with multiple CSS options, available for download at www.layersmagazine.com. A Quick Start Guide is included, which provides graphic and page construction information for each template. The guide also provides step-by-step tutorials to help you make the most of GoLive’s advanced integration with the Creative Suite. I designed and developed these templates, and they include royalty-free copies of my custom charts, graphics, photography, and source sliced Photoshop files. I also created GoLiveEssentials.com, a new resource from Adobe Systems showcasing the vast features of the world’s most advanced Web authoring application.

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.

The true power in maintaining a website lies within your program’s site management capabilities. GoLive has some unique features based around site management, most notably the ability to fix and update links inside of media files such as SWF (Flash), QuickTime, and PDF—without even opening (or even owning) Acrobat or Flash.

The second feature is that a GoLive site is portable! When you set up your website project, you can copy it to a hard drive, convert it to a Version Cue project, or even put it on your iPod, and all of the Web settings travel with it. This means you can work on your site from any device on any computer running Adobe GoLive.

To get started, you’ll need to set up a site. We’ll show you two ways to do this: one by creating a new site from scratch and another by converting an existing site into a GoLive site.

Creating a New Site

STEP 1 Create New Site
To make a new site in GoLive CS2, choose File>New (in GoLive CS, choose File>New Site). You’ll see a brand-new New dialog in CS2. Choose Site in the left column, Create Site in the middle column, and then Blank Site under the Site Creation Wizard section. Click the Next button.
200

STEP 2 Name Your Site
In the Specifying a Site Name and Location section of the New dialog, give your site a name. This will be the portable folder GoLive creates that will hold all of your website files. Then, choose a destination for this folder (I chose my desktop). Click the Next button again.

STEP 3 Version Control and Publish Server
GoLive supports a number of version control systems, so if you’re running a system such as Version Cue, CVS, or other, choose Use Version Control. For this tutorial, choose Don’t Use Version Control, and click the Next button. The Publish Server Options is where you can enter your Web hosting information. Most times you’ll connect through FTP, but ask your server administrator if you’re not sure. For now, choose Specify Server Later, and then click the Finish button.

STEP 4 Site Window
Now GoLive will create the necessary site files for you and open your site window. This site window gives you access to all aspects of your site, and it allows GoLive to manage your assets, check your links, and a host of other things. You’ll also notice a new folder on your desktop called “My New Website” (or whatever you named your site). This folder contains all of the items created by GoLive.

STEP 5 Your Website Folder
This folder contains everything you need to maintain your website. Copy this to a portable drive and take it wherever you want. First, let’s take a look at the contents of this new folder. You’ll see three files starting with your site name and ending respectively in “Backup.site,” “.site,” and “.site.cache,” and three folders. To open your GoLive site window, you only need to open the file ending in “.site” (in this case, My New Website.site). The folder “web-content” contains only those files that will be uploaded to your Web server. The folder “web-settings” contains all of the settings for you site (making it portable).

STEP 6 The Site Window
The site window is a representation of the files in the My New Website folder. The web-content folder is represented in the left column of the site window. These files are the only files that will be uploaded to your Web server. The web-data folder contains a series of folders to help you organize your source assets. You’ll see folders for Templates, SmartObjects, Components, InDesignPackages, etc. These are represented in the right column under the Extras tab in the site window. You can create additional folders in here as well, maybe for Word documents or EPS files.

STEP 7 Accessing Site Settings
The web-settings folder contains a series of XML documents that tell GoLive about specific ways you would like to work with this particular site. To access the site settings, simply Control-click (PC: Right-click) in the site window and choose Settings in the contextual menu. Another aspect of GoLive that sets it apart from other Web-authoring tools is its ability to have separate settings for each site—even if you have them open at the same time!

STEP 8 Site Specific Settings
There are a host of settings available for your site, including whether GoLive writes JavaScripts into each page or uses a common external file, how it handles URL encoding, restrictions on how files are named, and connection information about your hosting company to name a few. When you see a Site Specific Settings option at the top of a category, this means GoLive will adhere to these settings only when working on this particular site. Each site can have its own settings.

STEP 9 Web Content
The web-content folder has two files: index.html (your homepage) and a CSS folder with a basic.css (cascading style sheet) file. This will get you started with a homepage and a linked external style sheet. One of the powers of site management is if you change a filename in GoLive’s site window, GoLive will update all necessary files so you won’t have broken links, etc. Rename the style sheet from “basic.css” to “stylesheet.css” by selecting the file and clicking on the name. Once you hit Enter, GoLive will bring up a dialog showing all files in your site that need to be updated.

Converting an Existing Website

STEP 1 Locate Your Web Files
Because HTML files are just ASCII (text-only) files, you can edit the files individually with any Web editor, including GoLive (there’s really no such thing as a FrontPage, GoLive, or Dreamweaver HTML file). If you’d like the benefits of GoLive’s site management capabilities, you can create a new site from existing website files. Locate the folder that contains your Web files. The existing website in this example has a few HTML files, a PDF, a SWF, a CSS, and a JavaScript file.

STEP 2 Create a New Site
Start by choosing File>New in GoLive CS 2 (in GoLive CS, choose File>New Site). When the New dialog appears, select Site from the left column, Create Site from the middle column, and lastly, select Site from Existing Content in the Site Creation Wizard section. Click the Next button.

STEP 3 Where is Your Existing Site?
There are three options for creating a site from existing website files. If you have access to a Web server that hosts a site, you can download it directly from that server via FTP. You can also create a site from an existing Version Cue project. In this case, we’re going to choose the first option, which creates a site From a Local Folder of Existing Files. Click the Next button again.

STEP 4 Select Your Site Files
Click the Browse button and locate the folder that contains your website. If your homepage is named “index” or “default” or “home,” GoLive will assign that page as the homepage. If you’d like to specify another file, click the Browse button under the Home Page of New Site area in the New dialog. Click Next. Now choose a place on your hard drive for GoLive to create your site. This will contain the six items listed in Step 5 of the first tutorial.

STEP 5 Site Management Engaged!
GoLive will create a site window for you representing all of your site assets. GoLive can now begin its site management. In the site I’ve chosen, GoLive is warning me of some broken links. Two of the three broken links aren’t in HTML files: one is in a SWF (Flash) movie file and one in a PDF file. Open the In & Out Links palette, select the PDF file, and point-and-shoot the broken link to the correct file, and viola! fixed—without even opening Acrobat! You can fix links inside of SWF, QuickTime, and SMIL documents without ever leaving GoLive.

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.