Skip navigation
Prodigy9
Currently Being Moderated

What Adobe Product From CS5 is Used For Creating Buttons/Icons For WebPages?

Jan 21, 2012 2:02 PM

Hi I have CS5 Adobe Creative Suite and I want to create some graphic "Buttons" to use for my web pages.  What product in the Creative Suite is best suited for doing this?

 

Thanks In Advance!

 
Replies
  • Currently Being Moderated
    Jan 21, 2012 2:07 PM   in reply to Prodigy9

    Fireworks, Photoshop, Illustrator.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2012 5:05 AM   in reply to Prodigy9

    "button" designs are so 90's.  Get with CSS and do it right.  Here are some links for you -

     

    HTML & CSS Tutorials - http://w3schools.com/

     

    How to Develop with CSS?       

    http://phrogz.net/css/HowToDevelopWithCSS.html

     

    Learn CSS positioning in 10 Steps

    http://www.barelyfitz.com/screencast/html-training/css/positioning/

     

    ========================================

     

    PRE-BUILT CSS LAYOUTS

     

    For rock solid, commercial products that perform well in all browsers/devices, visit Project Seven:

    http://www.projectseven.com/products/index.htm

     

    Not Just a Grid CSS Framework (free)

    http://www.notjustagrid.com/demo.asp

     

    Ultimate Multi-Column Layouts (free)

    http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layout s-em-and-pixel-widths

     

    EZ-CSS Templates (watch the screencast to see how it works)

    http://www.ez-css.org/css_templates

     

    Dreamweaver CSS Templates for beginners (free)

    http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_te mplates.html

     

    New DW Starter Pages (free)

    http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_l ayouts.html

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2012 11:41 AM   in reply to Prodigy9

    I rarely if ever use images for navigation any more.   CSS is so much better for this.

    http://alt-web.com/DEMOS/CSS-Horiz-menu-2.shtml

     

    For web images, use Fireworks or Photoshop to create images only.  DO NOT allow these applications to generate HTML code for you.

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2012 2:56 PM   in reply to Prodigy9

    I'm glad to have sparked your enthusiasm for CSS.  It's a very powerful web design tool as demonstrated by CSS Zen Garden.  http://www.csszengarden.com/

     

    Look at the links Murray already posted.  Those are all excellent resources.

     

    CSS code typically goes into an external stylesheet.css file to which all your HTML pages are linked.   This way you can make site wide style changes by editing just one file.

     

    To create an external Stylesheet

    ========================

    In DW, hit File > New > Basic Page > choose CSS from the list.  Paste the CSS code from my tutorial into the file and save it as menu.css to your local site folder.

     

    To create an HTML page

    ==================

    Hit File > New > Basic Page > and choose HTML from the list.  Paste the HTML code from my tutorial into your new document between the <body> and </body> tags.  Save as test.html to your local site folder.

     

    To link external stylesheet to HTML page

    ==============================

    http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

     

    Have fun! 

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2012 3:59 PM   in reply to Prodigy9

    DW's code completion and code hinting features make working in Code View much faster.   I mainly work in Code View or Split View with pre-built CSS code copied & pasted from other files.

     

    If you're a very patient person, you could use the CSS properties panels & CSS editor to build your entire style sheet.  It may take a while longer to work this way.  Just be sure to preview in browsers often as Design View alone isn't 100% reliable.

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2012 4:50 PM   in reply to Prodigy9

    Prodigy9 wrote:

     

    Nancy...  I just tested out the style sheet for nav/menu bar you gave me.  The menu bar comes up fine and looks great however I don't see the drop downs.  Any thoughts?

     

    Thanks a bunch!

     

    It is to do with your code.  Can you post a link to your test page so that we all can have a look at it and give you the appropriate advice.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2012 4:55 PM   in reply to Prodigy9

    Copy & paste the following code into a new, blank HTML document.  For expediency, I embedded CSS code here.

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Menu Test</title>
    
    <style type="text/css">
    
    /* BEGIN HORIZONTAL DROP-MENU */
    #navbar{
    position:relative;
    width: 100%;
    margin: 0 0 0 45px; /**adjust as needed**/
    padding:0;
    text-align:center;
    }
    
    #navbar li {
    list-style: none;
    font-size: 12px;
    float: left;
    text-align:center;
    }
    
    /**top level menu**/
    #navbar li a {
    display: block;
    text-decoration: none;
    margin-right: 12px; /* space between links */
    color: #FFF;
    width: 9em; /* adjust as needed or use auto */
    padding: 8px;
    font-weight:bold;
    line-height: 1.50em;
    background: #C33;
    background: -moz-linear-gradient(#C33, #111); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #C33));    
    background: -webkit-linear-gradient(#C33, #111);    
    background: -o-linear-gradient(#C33, #111);
    background: -ms-linear-gradient(#C33, #111);
    background: linear-gradient(#C33, #111);
    /* gradient filters for IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C33333', endColorstr='#111111',GradientType=0 ); 
    /**rounded borders**/
    -moz-border-radius: 25px;
    -webkit-border-radius:25px;
    border-radius: 25px;
    }
    
    /**top menu style on mouse over - in good browsers**/
    #navbar li:hover > a {
    color: #FFF;
    background: #333;
    background: -moz-linear-gradient(#333, #EAEAEA);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #EAEAEA),color-stop(1, #333));    
    background: -webkit-linear-gradient(#333, #EAEAEA);    
    background: -o-linear-gradient(#333, #EAEAEA);
    background: -ms-linear-gradient(#333, #EAEAEA);
    background: linear-gradient(#333, #EAEAEA);
    /* gradient filters for IE6-9 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#EAEAEA',GradientType=0 )
    }
    
    /**sub-menu**/
    #navbar li ul {
    display: none;
    text-align:center;
    margin:0;
    padding:0 1em;
    background:none;
    }
    
    /**sub-menu, help for IE6**/
    #navbar li:hover ul, 
    #navbar li.hover ul {
    display: block;
    position: absolute;
    padding: 0;
    }
    
    #navbar li:hover li, 
    #navbar li.hover li {
    float: left;}
    
    /**drop-menu style**/
    #navbar li:hover li a, 
    #navbar li.hover li a {
    color: #0D207D;
    width: auto; /* adjust width as needed or use auto */
    background: none;
    filter:none;
    }
    /**drop-menu style on mouse over**/
    #navbar li li a:hover {
    color: #990000;
    text-decoration:underline;
    }
    
    /* Clear floated elements at the end*/
    #navbar:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    /**end Horizontal drop-menus**/
    </style>
    </head>
    
    <body>
    <ul id="navbar">
    <li><a class="first" href="#">ABOUT US &#9660;</a>
    <ul>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Newsletter</a></li></ul>
    </li>
    <li><a href="#">PRODUCTS &#9660;</a>
    <ul>
    <li><a href="#">Broken Glass</a></li>
    <li><a href="#">Mosaic Tiles</a></li>
    <li><a href="#">Adhesives</a></li>
    <li><a href="#">Grout</a></li></ul>
    </li>
    <li><a href="#">ACCESSORIES &#9660;</a><ul>
    <li><a href="#">Gloves</a></li>
    <li><a href="#">Rubber Mallets</a></li>
    <li><a href="#">Sponges</a></li>
    <li><a href="#">Safety Glasses</a></li></ul>
    </li>
    <li><a href="#">CONTACT</a></li>
    </ul> 
    </body>
    </html>

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 22, 2012 5:42 PM   in reply to Prodigy9

    External CSS files should not contain <style> and </style> tags. 

     

    Embedded styles require <style> tags.

    http://www.w3schools.com/css/css_howto.asp

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2012 4:33 AM   in reply to Prodigy9

    Any block tag with an explicit width, and "auto" left/right margins will center within its container.  If no width is given (either in CSS or in HTML), or if the width is 100%, then the block tag will fill the width of its container, and obviously cannot be centered.  Your <ul> tag is given 100% width, so you would have the same problem.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2012 8:59 AM   in reply to Prodigy9

    Read my post again.  I tell you.  If the width is 100%, it cannot be centered.  The width must be less than its container's width.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 23, 2012 12:05 PM   in reply to Prodigy9

    @Prodigy9,

     

    Try this:

     

    /* BEGIN HORIZONTAL DROP-MENU */

    #navbar{

    position:relative;

    width: 48em;  /**adjust as req'd**/

    margin: 0 auto; /**centered**/

    padding:0;

    text-align:center;

    border: 1px dotted green; /**for demo purposes**/

    }

     

    #navbar li {

    list-style: none;

    font-size: 12px;

    float:left;

    text-align:center;

    margin-left: 4em; /**space between top level items**/

    }

     

    /**for sub-menu items only**/

    #navbar li li {

    margin-left:-12px;

    }

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points