Tutorial: Create Classy Buttons for Your Web Site

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Favorites, Groups & Events

    Tutorial: Create Classy Buttons for Your Web Site - Presentation Transcript

    1. Design Classy Buttons for Your Web Pages Create a button like this www.FirstStepCommunity.info
    2. In A Nutshell … There’s a FREE 1. Create the button graphics Web site to do this 2. Download them to your computer 3. Upload them to your Web server 4. Add the button to any page on your Web site 5. Make the button change when This step is optional the user’s mouse goes over it 6. Link the button to a Web page www.FirstStepCommunity.info
    3. 1. Create the button graphics GlassyButtons.com Experiment with the various options on this page Every option has a Help button www.FirstStepCommunity.info
    4. 2. Download the final files When finished, click this to save the files Save the ZIP file on your computer www.FirstStepCommunity.info
    5. What do you need from the ZIP file? You always get three formats: GIF, JPG and PNG. You only need one of them. If you’re putting this on a textured background, JPG won’t work. Apart from that, just choose the smallest file size. You also get a button_0 and a button_1 for each type. If you want the button to change when the mouse moves over it, keep both. If not, keep only button_1 Extract the files you want and give them more meaningful names (e.g. order-now0.gif,order-now1.gif) www.FirstStepCommunity.info
    6. 3. Upload to your Web server You might need your Webmaster’s help with this step If you’ve got a First Step Web site, first choose “List Documents” And then choose UPLOAD A FILE www.FirstStepCommunity.info
    7. 4. Add to a Web page You might need your Webmaster’s help with this step If you’ve got a First Step Web site, insert an <img> tag into the page Here’s a bigger version of this code for clarity <img src=\"docs/order-now1.gif\" border=0> www.FirstStepCommunity.info
    8. 5. Make it change with “mouse over” Remember: This step is optional Same as previous page, but use this code instead: <img src=\"docs/order-now0.gif\" border=0 onMouseover=\"this.src='docs/order-now1.gif'\" onMouseout=\"this.src='docs/order-now0.gif'\"> VERY IMPORTANT You MUST combine these three lines into one long line, separated by spaces www.FirstStepCommunity.info
    9. 6. Link this to a Web page Insert a link tag around the image, like this: <a href=\"blah.html\"><img …></a> This comes first. This bit is is Replace “blah.html” with from the d th Ad o the real Web previous bi t t d en page address page the www.FirstStepCommunity.info
    10. That’s it! www.FirstStepCommunity.info
    11. Did you find this tutorial useful? • Community of like-minded experts • Discussion forum • Monthly teleseminars • On-line tutorials • Resource library Join th e • Monthly audio programs First S tep • E-book of the month Memb e Co m m r unity • Special member prices www.FirstStepCommunity.info www.FirstStepCommunity.info

    + Gihan PereraGihan Perera, 2 years ago

    custom

    1437 views, 0 favs, 0 embeds more stats

    Learn how to create classy 3-d buttons with rounded more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1437
      • 1437 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 11
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories