[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).

There are many ways we see color. We see colors reflected off of magazine pages and billboards; we see colors in light emitted from television screens, monitors, and cell phones; and colors are “seen” and “re-represented” by capturing existing objects with our digital cameras and scanners.

With all these mediums, the definition of a “color” changes depending on the device. And by “definition,” I mean how the color is perceived by our eyes, not the digital settings that define the color.

So if you have a color you’re trying to reproduce, you can play around with the color settings and eventually you’ll get one device’s color to look exactly like another device’s color. The problem is, who has that kind of time?

Why colors “change”
Each manufacturer has a different way their devices represent color. Two different digital cameras set side-by-side to take the same shot will still represent the subject differently. One brand may have a greater sensitivity for capturing color, while another brand is better at capturing detail and tonal range. The same is true for printers, monitors, and televisions, even though we can feed these devices the exact same colors.

In addition to manufacturers and devices, there are also two color spaces to keep in mind. Our eyes see and process colors in RGB. This is the same color model for all devices that emit light. However, for any printed surface, we see reflected light. Unfortunately, after colors are reflected from a surface, the color properties do not mix the same way anymore; meaning red and green no longer make yellow. The four-color process was developed as a way for us to re-represent colors we see in the natural world. This color model, CMYK, is the standard by which we mix colors on surfaces (remember blue and yellow making green in grade school?).

Lastly, we have colors that are premixed, just like getting a custom gallon of paint at your home improvement store. In commercial printing, there are a few manufacturers widely used such as Toyo (www.toyoink.com), Pantone (www.pantone.com), and TRUMATCH (www.trumatch.com) to name a few. However, these colors still need to be represented using reflective color properties.

RGB is what our eyes see and the color model for devices that emit light.

CMYK is used for the printed page—the color properties in reflected light do not mix the same as colors in emitted light.

Swatches show examples of premixed colors.

The fact that we design and develop our files on a computer means that all colors we specify are represented in RGB on the monitor, even if the color is representing a CMYK color. Scanners and digital cameras also need to use the RGB color space because they are capturing light, the same way our eyes do. This means that all workflows involving printing on physical surfaces must involve RGB as well as CMYK.

Setting up your project
The solution to changing colors is called “color profiles.” Most devices have a color profile that describes how that particular device represents a series of colors. These profiles typically follow a format provided by the International Color Consortium (ICC) as a way for manufacturers to define how their device represents color. These profiles are used in conjunction with your color management software to create a set of “rules” for how colors are supposed to behave. Adobe’s color management software, built into the Creative Suite 2, uses these profiles along with its own color settings files (CSFs) to create workflows for you to choose from.

The easiest way to choose a color management workflow is to use Adobe Bridge. When you select the Bridge Center in the Favorites tab, you’ll see the Color Management button in the bottom center. You may also notice that this button will give you instant feedback on whether the applications in the suite are synchronized, meaning, they are all set to use the same CSF files. If they are synchronized, Bridge will tell you so. If not, that means at least one of the applications is set to use different color settings.

The Bridge Center lets you know immediately if your Adobe applications are synchronized or not.

To make a selection for color management, click the Color Management button, and you will see a list of predefined color setting files. These predefined settings include brief descriptions to help you decide which settings are best for your project. Adobe has provided a list of the most commonly used settings in the publishing industry. In addition, if you select the option for Show Expanded List of Color Settings Files, you’ll see even more settings.

And, of course, you can make your own color settings as well. To create your own color settings file, start with any Creative Suite application and choose Color Settings from the Edit menu (in Acrobat, select the Color Management category in Acrobat>Preferences [PC: Edit>Preferences]). Once you create and save your custom settings, you’ll see this new CSF option available in all of the other Creative Suite applications. What’s more, you can use Bridge to deploy these settings to all of the other applications, as well.

The “anatomy” of a color settings file includes your Working Spaces and your Color Management Policies. A Working Space tells the Creative Suite how you would like the different color models to look both onscreen and when printed. In the top option of the Working Spaces is the RGB setting. This will control how the monitor represents your colors. Adobe recommends using sRGB for Web graphics and Adobe RGB for printing (since it includes some printable colors in its gamut). The CMYK settings are used when printing your documents. These settings are supplied based on standard commercial print conditions.

Color Management Policies are set to represent files that were created before you started with color management—files from cameras, scanners, or from other people. When you’re using Color Management and you get a file that has no profile, or a different profile, you can tell the Creative Suite applications how you would like to represent the colors in that file. Your options include converting the colors to your settings, preserving the settings in the file, or preserving the numbers and ignore linked profiles. This process will give you more consistent color representation across a wide range of files and sources.

Evaluate your colors and begin management
Now that we have chosen some settings, now what? Well, it’s important to realize that these settings do not change the information in your files. You can think of color management as “stylesheets for color.” The actual numbers that represent a color in a file are constant; however, the color settings you choose affect the way that color is represented onscreen and on paper. It’s the same idea as changing the font used for a headline; the actual words in the headline remain the same, just the display looks different. In the example shown below, we have a color we would like to be represented both onscreen and on paper, and to be accurately captured from our scanner. As we discussed earlier, each device is representing the same color a little differently.

After choosing a color workflow that best represents the equipment you’ll be working with, you can start to see how the device profiles are taken into account when applying your color management settings. In the example, we are still replicating the same color; however, the settings for each device have changed as they attempt to replicate the desired color. Again, the original color has not changed from the previous example; but the color combinations for each device have changed.

You can make a few test prints and screen adjustments to fine-tune your settings if you wish, and use Bridge to set the rest of the applications. It’s also a good idea to talk with anyone you share files with, such as your commercial offset printer, video production house, or Web development company, and see if they have specific color profiles or color management in place that you can take advantage of when preparing files for their equipment.

Apps without color management
Sometimes you may need to use applications that do not have their own color management component. For example, the current version of Flash doesn’t support color management—directly. If you have color management activated at your system level, you can successfully translate colors by making sure the operating system is set up with the same RGB profile that you’re using in the Creative Suite. On the Macintosh, use the Color tab located in the Displays pane of the System Preferences; for Windows use Adobe Gamma in the Control Panels.

Once these settings are consistent, you can save a file from Photoshop, Illustrator, or from GoLive as a SmartObject and import the resulting image into Flash. The display of the colors in Flash will match the display of the same colors in the rest of the Creative Suite. This will be the case for most applications that support color settings provided by the operating system.

When you get a new piece of equipment, such as a new color printer that supports RGB, or a new fancy widescreen LCD monitor, how do you add the device into your workflow? When adding a new device into a color management workflow, the device will be treated as if it supports the current profiles. So for example, a new monitor and printer by a manufacturer who already has established profiles will most likely have built the same color management into their device. If you find, however, the device does not “plug-and-play” nicely into your color workflow, there are a few things you can check.

1. Check with the manufacturer about their support for ICC profiles. Find out which profiles they support.

2. Refer to the ICC website at www.color.org to see if the device is listed.

3. Check Adobe.com (www.adobe.com/support/downloads) for updated ICC profiles that may include your new device.

If you still need to tinker with the device’s performance, you may have to create your own custom CSF. From any of the Creative Suite applications, go to the Edit>Color Settings (for Acrobat, go to Preferences>Color Management). Under the RGB and CMYK pull-down menus, make alternate selections based on similar devices or color spaces. For the Gray and Spot options (for printers), choose dot gain amounts that will correct your test prints. When you select Save, name your profile; it will then be available to all other applications in the Creative Suite. You can even use Bridge to set all applications to your new color settings at once.

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.

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.

However, there’s no environment more suited to take advantage of AGM than the Creative Suite itself. With each new revision of Photoshop, Illustrator, InDesign, and GoLive, the integration gets tighter and tighter. In addition, the number of open standards supported stays current as well.

Let’s start by taking a look at Adobe Bridge. This is the “glue” for all of the applications in the Creative Suite. Bridge allows you to view, organize, preview, add metadata, set and check color management settings across the suite, view Version Cue projects and assets, and run batch processing scripts for Photoshop, Illustrator, and InDesign. One of Bridge’s most important management functions is its ability to update file information, even across multiple documents at once.

Many of you may already use Photoshop’s File>File Info option to add a host of information to your file, including author, keywords, and usage rights, but this can get tedious if much of the information is the same for a particular set of photos. To save time, view a folder containing all of the images in Bridge and marquee select (click-and-drag) a series of photos you’d like to modify. In this case, we want to add Creator information to each image. With the photos still selected, toggle open the IPTC Core region in the Metadata tab of Bridge, click on the Creator field, click the Yes button in the warning dialog informing you that you’ve selected multiple files, and then simply type a name in the Creator field. The information you enter is now added to each file.

Bridge also lets you preview many file formats without opening the fi les in special readers or browsers; you can even preview animations and listen to sound files. Among the many file formats supported are SWF (Shockwave-Flash), QuickTime, Animated GIF, AIFF and WAV fi les, multipage PDF files, SVG, and of course, native Photoshop and Illustrator files.

In addition to managing and previewing your assets, Bridge also enables you to perform batch processes to your assets. With multiple items selected, the Tools menu allows you to Batch Rename and change metadata; create a Version Cue project; run Photoshop services (such as greeting cards and ordering prints); and access batch functions in Photoshop (such as Picture Package), Illustrator (Live Trace a series of images), and InDesign (create a contact sheet)—all without leaving Bridge.

Synchronizing PDF settings across applications just got a whole lot easier; in fact, you don’t have to do anything except make some settings in the first place. If you’re working in InDesign and you create and save custom settings in the PDF Preset dialog, you’re actually making a preset across all of the Creative Suite 2 applications. Start from any CS2 application (we’ll start from InDesign), choose File>Adobe PDF Presets>Define (in Photoshop, Illustrator, and GoLive, go to Edit>Adobe PDF Presets), click the New button, and choose your custom settings. Name your preset and click OK, and then click Done in the Adobe PDF Presets dialog. Now from Photoshop or Illustrator, simply choose File>Save As, specify the file type as PDF, and you’ll see your custom preset in the Adobe PDF Preset pop-up menu. From Acrobat Distiller you’ll see the preset in the Default Settings pop-up menu in the main dialog.

Your PDF settings are also available in GoLive! With a webpage open in GoLive, select the PDF Preview tab at the top of the document’s window. With the tab selected, open the Inspector palette (Window>Inspector) and in the Preset pop-up menu you’ll see all of the possible settings for rendering an HTML file to PDF, with more reliable results than using Acrobat’s Web Capture or printing to PDF from a Web browser. Can you guess which presets are available?

When designing in the Creative Suite, there are many options available for nondestructive editing of your work. Styles and effects are available in all of the applications, and they allow you to separate your content from design. You may be familiar with these concepts in InDesign as style sheets, or in Photoshop as layer effects. But in actuality, you can apply these nondestructive principles throughout your workflow.

Illustrator CS2—The latest version of Illustrator brings us Live Trace and Live Paint. With Live Trace, you can actually “swap out” the bitmap image you’re tracing by simply selecting the image in the Links palette (Window>Links), clicking on the Relink icon at the bottom of the palette, and selecting another image file. Illustrator will automatically update the vector trace information. This is great for testing different bitmap files against your trace settings. And when you have just the right image, you can fine-tune it in Photoshop by clicking the Edit Original icon in the Links palette.

As for Live Paint, you may have seen demos of painting a Live Trace object (which does break the “link” of the Live Trace effect, by the way), but did you know you could use this feature as a live Pathfi nder tool? In this example, you don’t need to split these two shapes apart in order to color the intersecting area a different color. Simply select both shapes with the Selection tool (V), select the Live Paint Bucket tool (K), choose a color, and click in an area where the two shapes intersect. The “live” part of the tool’s name refers to the fact that you can still move the shapes around using the Direct Selection tool (A), and the live painted intersection area will continuously update without destroying the original shapes as with the Pathfinder palette.

The Illustrator effects under the Effects menu let you apply styling to objects and text without changing the base artwork. These effects include arrowheads on rules (that will always point in the right direction if you rotate them), 3D effects, and rounded corners, to name a few. To make changes to effects, open the Appearance palette from the Window menu, select your object, and double-click the appearance list item.

InDesign CS2—InDesign wins the most stylin’ points in the Suite with object styles. Now you can create styles such as drop shadows, strokes, and corner effects and save them into a single object style. First, select an object and apply some attributes and effects to it. In this case, we’ll color the background of the selected frame black. With the object selected, click the Create New Style icon in the Object Styles palette (Window>Object Styles). Now select the remaining objects you’d like to style, and then simply click the object style name. To rename an object style and to see a full list of the attributes that can be stored in an object style, double-click a style item in the Object Styles palette.

GoLive CS2—GoLive has added even more support for visual CSS (cascading style sheets) development, allowing you to take full advantage of separating content from design on your sites: CSS defi nitions can contain background images, borders, padding, indents, and position. After applying the CSS item (class or id) to an object in your page, you’ll see the object take on those characteristics. You can then make further modifications to your CSS objects and see a live update in the open page.

You can begin to experiment by opening your document’s CSS editor and selecting an HTML element or class. In this example, we’re going to select the <a> element, which is the HTML tag for a link. Changing this element’s appearance affects the way links look on the page. We select red here, and GoLive gives a live preview of what red will look like as the link color in our page—without even saving the document first!

Adobe has made it easier than ever to version your projects with Version Cue. Starting a new project is as easy as clicking on the New Version Cue Project button in the lower-left of the Bridge Center in Adobe Bridge (click on the Favorites tab and then click on Bridge Center). Next, in the New Project dialog, name your project and decide if you want to share with others on your network.

Once your project shows up in the Version Cue channel of Bridge (you’ll find it in the Folders tab under Version Cue), grab any existing files you want to add to your project and simply drag them into the open project folder in Bridge. Now you can access these files from any of the Creative Suite applications. For example, let’s choose File>Open from Illustrator. In the Open dialog, choose Use Adobe Dialog in the lower-left corner, select Version Cue, then twirl down your project, and select a file you want to work on.

Once you’ve made changes to the file, you’ll see a new option under the File menu called Save a Version. Because you opened this file from a Version Cue project, Illustrator will be instructed to save a completely new version of this file. Versioning allows you to select this file in Version Cue and “roll back” to a previous version of the file. You can view all versions of a particular file in Bridge! Say goodbye to filenames like “logo_final.ai,” “FINAL_logo_final.ai,” etc.

GoLive takes the Version Cue integration one step further. Version Cue is incorporated into GoLive’s Site Window and gives you even more information about your project, such as who’s in your project and what they’ve checked out, in addition to an Alternates status for each file. This integration isn’t surprising since Version Cue was first introduced by Adobe as GoLive Workgroup Server, back at version 6.

Version Cue has an Advanced Administration option available through your Web browser. You can access the Advanced Administration a few ways. First, Control-click (PC: Right-click) a project folder in the Bridge view of Version Cue, and select Edit Properties. In the Edit Properties dialog, click the lower-left button labeled Advanced Administration. This launches the Advanced Administration Web application in your browser, giving you the ability to create users, perform project backups, run reports, remove old versions, and even start a PDF review with your colleagues!

Making their debut in GoLive a few versions back, Smart Objects have made their way into all of the Creative Suite applications in one way or another. You can begin using Smart Objects without dramatically changing the way you prepare art and photos. What will change is the way you use these fi les once they’re in your layouts. No more saving layered TIFF fi les or exporting artwork to EPS or JPEG fi les. Once you begin using the native fi les, you’ll wonder how you ever lived without Smart Objects.

InDesign CS2—After importing a PSD file into InDesign, select the image, then Control-click (PC: Right-click) on the image and select Object Layer Options. You’ll see a dialog that gives you access to all of the layers and layer comps available in your Photoshop file. Selecting the Preview option gives you a live representation of the changes in your document. You may also notice an area called Update Link Options, with the ability to choose an option called Keep Layer Visibility Overrides (the other option is Use Photoshop’s Layer Visibility). If you choose to have overrides, InDesign will automatically reactivate the layers you select in InDesign regardless of changes you may make to the file later in Photoshop (assuming, of course, you don’t delete a needed layer).

Illustrator CS2—Illustrator also supports accessing layers and layer comps set up in Photoshop. When choosing the Place option in the File menu and selecting your Photoshop file that has layer comps, you’ll see a dialog similar to InDesign’s. In this example below, we’re using the same Photoshop file, except we’re accessing the layer comp named “design 1″ on the left and “design 2″ on the right.

Photoshop CS2—Photoshop offers its own form of Smart Objects, allowing you to embed Illustrator and other Photoshop documents in your original Photoshop document. What’s different about Smart Objects in Photoshop is that they travel inside the Photoshop file. This means that any application that supports native Photoshop fi les will also be able to see the artwork from a Smart Object, even applications like After Effects and Premiere!

To create an Illustrator Smart Object, select some artwork in Illustrator with the Selection tool (V) and choose Copy from the Edit menu. Next, switch to an open document in Photoshop and select Edit>Paste. Notice that Photoshop has a new Paste dialog item called Smart Object. Select this new option, click OK, and then press Enter: You’ll see a small document icon in the Layers palette signifying the embedded document. You can scale this object up, then down, then back up again, and Photoshop will continue to re-rasterize the image to the document’s full resolution. Double-click the Smart Object icon in the Layers palette and Photoshop will extract the document and pass it over to Illustrator for editing. Once you finish editing in Illustrator, simply save and close the document, and Illustrator will give the revised artwork back to Photoshop.

The second type of Smart Object you can make in Photoshop is a Photoshop Smart Object. Here’s how: In our layout, we want to create a Smart Object out of a series of layers. To do this, we’ll select the layers that make up the statistic callout by selecting the first layer, then Shift-selecting the last. With all of our desired layers selected, Control-click (PC: Right-click) on the selected layers and choose Group Into New Smart Object. Now when you double-click the Smart Object’s layer thumbnail, Photoshop will open these layers in a separate Photoshop document for editing. Once you finish editing, simply save and close the document and the edited Smart Objects will be passed back to the original document.

GoLive CS2—The July/August 2005 issue of Layers magazine (page 62) featured an in-depth look at using Smart Objects in GoLive. However, there’s another Smart Object feature—automatic rollover creation from ImageReady. Using ImageReady’s Web Content palette, you can create states of your artwork to use as buttons. These rollover states work exactly the same way as layer comps, except that they tell GoLive to create multiple images along with custom text.

When you place the ImageReady file (same as a Photoshop file), you’ll see the Variable Settings dialog. Set your button text and click OK. The only difference here is GoLive asks for a folder name instead of a filename. The files for this particular button will be stored in that directory. Once created, you can use these button states in your website. In the example shown, the same images we used for the HTML pages in the site were also imported into Flash for use on portions of the site published in SWF format. Now GoLive becomes your graphics creator and manager, as well as your site development tool.

One of the most amazing integration features occurs between InDesign and GoLive. Start with a document in InDesign and then choose File>Package for GoLive. Save the package into the
Web-data:InDesign Packages directory of your GoLive site. In the Package for GoLive dialog, you’ll see a new option in CS2 allowing you to specify a range (instead of the entire document). Click the Package button and InDesign will begin to package all assets, graphics, and stories, and create XML fi les to explain to GoLive how to treat all of the assets. This is just like packaging InDesign fi les for your service bureau.

Now, switch to GoLive, toggle the InDesign Packages folder open in the right portion of the site window under the Extras tab, and double-click the package icon. This launches GoLive’s package viewer. There are three views to this viewer: InDesign Layout, Assets (with Bridge-like image resizing), and HTML Preview (to export the whole page as a CSS-based HTML page). In the InDesign Layout, you can rollover individual assets and drag them from the viewer directly into your page. This creates a Smart Object and writes a Web graphic to the destination of your choice. What’s more, you can drag stories into your webpage and create Smart Objects out of InDesign stories! To update the source files of these package Smart Objects, simply modify your original InDesign document, choose Package for GoLive, and overwrite the exist ing package with the new one. GoLive automatically updates all the Web art and stories linked to those assets.

With the integration level of these applications, there’s no limit to the workflows you can develop around the Creative Suite. As you begin to leverage your design across mediums, remember that you can use the same files for multiple purposes. Import native files whenever possible, use Smart Objects and Object Layers whenever possible, and always design in the most nondestructive way possible. Let the tools do the work for you.

Chris Converse is a graphic designer and multimedia developer specializing in websites, interactive media, print, and CD-ROMs. Visit his website at www.chrisconverse.com.

GoLive will prove invaluable as it detects media types, produces plug-in code, and provides you with a graphic interface for options pertaining to each media type. GoLive detects files such as SWF (Flash’s publish format), QuickTime, RealPlayer, Windows Media, and SVG, and gives you appropriate options for each format such as Autoplay, Show Controller, Set Background Color, Write Detection Code, etc.

STEP 1 Start with a Webpage
Start with a new webpage in GoLive. The file can be part of a site or a single webpage file (HTML, ASP, PHP, etc.).

STEP 2 Locate Your Rich Media Files
Locate the rich media file you’d like to add to your site. I’m selecting a QuickTime movie from my site window. Some files can be detected automatically, such as QuickTime and SWF files. Others need to have the plug-in object created first, such as SVG, Windows Media, and RealPlayer. You can access objects from the Objects palette (in CS2, this is attached to your Tools palette). In this case, I’ll drag a QuickTime file from the site window directly into my webpage. You can also drag a file from the Finder (PC: Windows Explorer).

STEP 3 GoLive’s Auto Detection
GoLive can detect many rich media file formats. The term “rich media” typically refers to graphic or content files that aren’t GIF, JPEG, or PNG and typically include SWF, video, sound, SVG, or Java Applets. Once you drop the file into your page, make sure it’s selected and open GoLive’s Inspector palette (Command-1 [PC: Control-1]). You’ll notice the Inspector palette has changed to show you a host of properties you can set in a QuickTime file. These properties are actually representing HTML code that a Web browser needs to properly access the correct plug-in in order to play the file.

STEP 4 Set Additional Properties
Notice the Inspector palette has multiple tabs, or sections, relating to each media item. In this example for the QuickTime movie, GoLive’s Inspector palette has the sections of Basic, More, Attribs (short for attributes), and QuickTime. The Basic tab gives you access to the file being referenced, dimensions, and the plug-in Class and Mime types. The More tab lets you point to a resource page on Apple’s website relating to QuickTime. The Attribs tab lets you add custom settings to the plug-in. Finally, the last tab will be specific to special features of a plug-in.

STEP 5 Setting Advanced Options
Each browser plug-in is used to play certain types of files. The QuickTime plug-in can be used to play MOV, AIF, MP3, MPEG, QTVR, etc. Windows Media Player and RealPlayer can play MP3, MPEG, and audio files. In addition, each plug-in can support a custom set of playback options such as “looping” a sound or video, autoplay, displaying a controller, background colors, and buffer times—all kinds of stuff! The options of playback depend on each media type and the plug-in that is called. What makes your life great is that GoLive knows all of the options for each plug-in.

STEP 6 HTML Code Considerations
When you place a file that needs a plug-in, you’ll see the option to use Embed or Object, or both, in the HTML section of the Inspector palette. The Embed tag is a Netscape-compatible plug-in referencing code, and is used by the Mozilla browsers (Safari, Opera, and FireFox). The Object tag is used by Internet Explorer, and actually treats the files as Microsoft ActiveX objects. I recommend using the “both” option. ActiveX objects have a specified code assigned for each file type and GoLive knows these codes. You can see this code added in the Basic section of the Inspector palette.

STEP 7 Placing Shockwave/Flash (SWF) Files
When placing SWF files, GoLive can determine the dimensions of the stage for setting attributes in the Basic tab. You’ll also see a SWF section in the Inspector palette, allowing you to set attributes unique to SWF files such as looping, autoplay, quality, and scale.

STEP 8 Detecting the Shockwave/Flash Plug-in
GoLive also offers an additional option for placing SWF files. You’ll notice another section in the Inspector palette called Detect. When selecting a detection option here, GoLive will write a JavaScript that will ask the browser if the Shockwave/Flash plug-in is available on the user’s computer. If the plug-in is installed (according to Macromedia, 95% of Web users have the plug-in) they’ll see your SWF file. If the plug-in isn’t present, the user will see the image file you set instead (typically a GIF or JPEG).

STEP 9 Placing RealPlayer Media (Audio and Video)
For media files that need a plug-in object placed first, locate the object type in the Objects palette. Rollover each object to see a small pop-up tag telling you each object’s type. Here we’re going to select the Real object. Click-and-drag the object into your page. In the Inspector palette’s Basic section, locate the File field, click the Point-and-Shoot tool or click the folder icon to the right, and navigate to the RealPlayer document. Once selected, the Inspector palette will display a Real tab, providing additional settings available for this file type, including Autostart, Labels, Controls, and Console settings.

STEP 10 Placing Windows Media Files
Select the appropriate object from the Objects palette and follow the same steps for choosing the Real media file in Step 9. When you have selected your Windows Media file, the Inspector palette has a Windows Media tab. As with QuickTime, there are so many options with this file format that you’ll see a subset of sections! In addition to the Basic, URL, and PlayRate, there’s a section called SAMI (Synchronized Accessible Media Interchange). SAMI is a built-in feature of Windows Media files for closed captioning. You can select the appropriate file, language, and style that the plug-in will use directly in GoLive.

STEP 11 Placing SVG and SVGt Files
SVG stands for Scalable Vector Graphics, and SVGt stands for SVG tiny, which are optimized for mobile devices such as PDAs and phones. Both can be saved out of Adobe Illustrator. GoLive gives you two choices for working with SVG files. If you drag an SVG file directly into the webpage, GoLive will treat the SVG file as the source of a Smart Object (Layers magazine, July/August 2005, p. 62). If you place an SVG plug-in object from the Objects palette, you can use the SVG in your webpage. Once the file has been set, add attributes using the Attribs section in the Inspector palette.

STEP 12 Placing Java Applets
Locate the Java Applet object in the Objects palette. Applets are compiled programming code and are typically named with a .class extension. With the object selected, point GoLive to the CLASS file you’d like to use. The Inspector will display a tab called Alt. This is a special setting available for Applets to add information in case the user’s computer doesn’t support Java Applets. Similar to the detection option in Step 8, this information will be seen instead. Note that Applets use the Applet tag in HTML, as opposed to the Object or Embed tags used by the other examples.

STEP 13 Adding Audio Files
You can drag a WAVE or AIF (Audio Interchange File) directly into your webpage and GoLive will automatically create an object for the file. The Inspector palette will have a section called Audio, allowing you to set Mastersound, looping, start and stop times, volume, and controller options. If you want to place an MP3 file, follow the steps for placing a QuickTime, Windows Media, or Real Player object, then set the file field to the desired sound file. For playing MP4 (AAC) files, use the QuickTime plug-in object.

STEP 14 Placing Additional File Types
There are many more plug-ins and media file types available on the Web, including Acrobat Reader, Shockwave, iPix, Atmosphere, and RoboForm to name a few. If you have a file type that requires a plug-in not automatically detected by GoLive, use the Plug-in object (pictured above left). For a file that needs the ActiveX Object tag, use the Object object (pictured above right). Once you set the file field to the media file, you can use the Inspector palette to set additional attributes.