In this article, you'll learn how to avoid the need to make
graphic menu buttons, yet still produce the same visual effect that graphics provides.
You'll learn how to create graphical looking buttons by applying simple style rules.
Maintain Your Computer and Use it More Effectively to Design a Web Site and Make Money on the Web
HTML5 brings the biggest changes to HTML in years. Web designers
now have new techniques, from displaying video and audio natively in HTML,
to creating realtime graphics on a web page without a plugin.
This book provides a collection of solutions to all of the most common HTML5 problems.
Every solution contains sample code that is production-ready and can be applied to any project.
I visit many websites that use simple text links for a menu. There's nothing
wrong with that. It's quick and easy and gets the job done. However, today's
Web users expect something a little more sophisticated, and they might find
simple text links crude and non-professional.
The webpage designers that use simple text links don't want to take the
time to make graphic menu buttons.In this article, you'll learn how to avoid
the need to make graphic menu buttons, yet still produce the same visual
effect that graphics provides. You'll learn how to create graphical looking
buttons by applying simple style rules. The style rules you will apply are
those of the Cascading Style Sheets (CSS) box model.
Before we go into the CSS box model, let's discuss a few alternatives. We are
all familiar with the standard gray form button. Some webpage designers don't
realize how easy it is to replace a text link with a form button. Just use
the buttons onclick event to execute an inline Java Script statement that
loads the links URL into the documents location object as shown below.
The downside of using a form button is that it belongs to a form. Even a loose
button like the one described above belongs to the default form, forms, in
the documents forms collection. This method of defining a button could interfere
with other buttons and forms declared on the same page. You could prevent this
by defining a form with a unique name for each button, but that's too much work.
We are all familiar with using a graphic in a link, as shown below.
<a href="URL"><img border=0 src="image1.jpg"></a>
The problem with this is that unless the user moves their mouse button over
the graphic, causing the hand icon to appear, they may not realize it's a
clickable link. You need to use a graphic that looks like a button. You must
also edit the text on the graphic for each link.
With this book, readers can start with a tour of the stylesheet language, or skip ahead to any
chapter of the book to look up specific tasks covering just what they need to know. This task-based,
visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning
and intermediate users CSS.
Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give
a general explanation, provide a few key but brief tips, move on. The writing is clear and concise.
... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference
and everything in it is highly accessible.
Click here for more information.