Cascading Style Sheets in Adobe GoLive CS2
Cascading Style Sheets—Intermediate
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
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.
Photoshop
Illustrator
Indesign
Dreamweaver
Fireworks
Premiere
Flash
After Effects
Lightroom
Acrobat
Featured Partner 
- Dragging an Object Between Documents
- TV Scanline Effect
- Trick to the Glossy Effect
- 3D Text
- Changing Type on a Path
