Home arrow Web Authoring arrow Page 10 - Using Adobe GoLive CS, Part 3
WEB AUTHORING

Using Adobe GoLive CS, Part 3


The second article in our series covering Adobe GoLive we'll be working with images, CSS, and JavaScript. (This chapter comes from Teach Yourself Adobe Creative Suite, by Mordy Golding, Sams, 2004, ISBN: 067232752X.)

Author Info:
By: Sams Publishing
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
November 16, 2004
TABLE OF CONTENTS:
  1. · Using Adobe GoLive CS, Part 3
  2. · Rollovers
  3. · More on rollovers
  4. · Even More on Rollovers
  5. · Photoshop Integration
  6. · ImageReady and Illustrator Integration
  7. · InDesign Integration
  8. · Using Images from the InDesign Package
  9. · Using Cascading Style Sheets
  10. · Creating an Element Style
  11. · Creating a Class Style
  12. · External CSS
  13. · Link Warnings
  14. · Publishing the Site
  15. · Begin Creating

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Using Adobe GoLive CS, Part 3 - Creating an Element Style
(Page 10 of 15 )

Let's start by creating an internal CSS. Open a blank GoLive page, and then click the CSS icon at the upper right (looks like steps) to access the page's internal CSS Editor. The editor employs two buttons at the top, CSS Definitions and Source. The CSS Definitions window gives you a visual way to create styles, and the Source window shows you the source code (see Figure 9.79).

Figure 9.79 The Definitions window and the Source
window of the CSS Editor.

To define a style, you need to determine whether it will be an element style, a class style, or an ID style. Let's concentrate on element styles first. Element, in this case, refers to an HTML tag, which is a markup element. Say, for example, you wanted to create a style that would make all your hyperlinks appear with no underline, but you want the underline to show up when the visitor puts his mouse over the link. You'd need to define a style for the <a> tag, which is the tag used to make a link, and you'd need to define two variations of the tag, one for each mouse state, off the link and over the link.

In the CSS Editor, click and hold the Create New Element Style button, either at the right side of the CSS editor in its default view or at the bottom of the window, until a list of tags pops up (see Figure 9.80). Choose "a" from the list.

Next, "a" appears in the CSS Definitions list, and the right half of the editor changes to display tools with which you can define the style's attributes. Across the top right half of the CSS Editor is a series of buttons. Each button represents a unique set of properties that can be applied to a style (see Figure 9.81).

Click the Font Properties button and choose a color for your link. Then in the Decoration area, click the No Text Decoration button (see Figure 9.82). This removes the underline from the link in its normal state. Now we need to define the over state of a link that is called a:hover. Click into the whitespace of the CSS Definitions pane to go back to the editor's default state. Choose a:hover from the Markup Elements list. Choose a color for the mouse over state of your link, and then click the Text Decoration Underline button. It's that simple!

Figure 9.80 Clicking the button adds an untitled element, but clicking and holding reveals a list of markup elements from which to choose.

Figure 9.81 The buttons in the CSS Editor represent various sets of properties that can be added to your style definition.

Figure 9.82 Use the Text Decoration buttons to apply or remove an underline, strikethrough, overline, or blink.

Notice that in the lower-right portion of the CSS Editor a preview of the style appears and continues to update as you add attributes to a style. To preview all the styles in your definitions list, select one and then use the arrow keys to move up or down the list. The preview updates as each new definition is selected. It's also helpful that the label of an attribute that has been applied to the selected style appears in blue in the top section of the right half of the pane.

To test out the styles you defined, create a link on your HTML page, choose Preview, and put your mouse over the link. Remember, when you create an element style, that style attaches to every instance of that element in the page, or in all pages referenced by an external style sheet. In some instances you may want to define a style that you can apply only where needed. In that case, you need a class style.

This chapter is from Teach Yourself Adobe Creative Suite, by Mordy Golding (Sams, 2004, ISBN: 067232752X). Check it out at your favorite bookstore today.

Buy this book now.


blog comments powered by Disqus
WEB AUTHORING ARTICLES

- Top WordPress Plugins for Social Media
- How to Install WordPress on WAMPP
- More of the Best Wordpress Plugins for Comme...
- Top Wordpress Plugins to Fight Spam
- More of the top Drupal modules for SEO
- Top Drupal Modules for SEO
- More Top Wordpress Plugins for SEO
- Website Optimization Tips
- Backup and Restore a Drupal Website and Data...
- 5 Best Web Font Services
- Web Font Embedding Services
- Joomla Site Administration
- Create PHP Pages that Use WordPress Templates
- Top Joomla Extensions for Social Networking
- Drupal Modules for Site Navigation

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials