7 Replies Latest reply on Sep 19, 2014 12:23 PM by Sprogness

    How do I insert a nav bar I made in photoshop into dreamweaver?

    Sprogness

      I have spent days making a roll-over navigation bar in photoshop and saved for web with slices,

      but however I try to insert it into my webpages, (either as a library item or otherwise - not that I really know what I'm doing!)

      It is always a greyed out mess once pre-viewed in browser!?

       

      Can anybody help??

        • 1. Re: How do I insert a nav bar I made in photoshop into dreamweaver?
          Ken Binney Adobe Community Professional & MVP

          A question like yours, without specifics like code, will only get you generalized answer.

          Here's mine. Don't use a graphics program to write code for you.

          Use PS for your images, but use DW for your code.

           

          Hope that helps.

          • 2. Re: How do I insert a nav bar I made in photoshop into dreamweaver?
            Rob Hecker2 Adobe Community Professional & MVP

            I agree with Ken. "Don't use a graphics program to write code for you."

             

            Every once in a while, Adobe creates a feature in a program as a joke. Slices is one of those. At Adobe developer parties, after everyone has had a few drinks, someone stands up on a table and parodies a user trying to use slices, and everyone laughs hilariously.

             

            Adobe Illustrator used to contain a little feature that would convert a raster graphic to a vector graphic. That feature was such a funny joke that Adobe left in in the program for many years, just because it was so funny to imagine the bewilderment of users trying to use a feature that actually served no real purpose.

             

            But, joking aside, you should be able to reconstruct your menu bar in DW itself, and the code will be simpler (which is better). It will be a more work, but not a lot of work.

            • 3. Re: How do I insert a nav bar I made in photoshop into dreamweaver?
              Sprogness Level 1

              No it doesn't help much as I don't understand code!

              But I do appreciate your response and have now managed to build the nav bar in dreamweaver like you say - by making a 'div tag' (whatever that is, I'm not technical) as I just saw a tutorial on utube.... However, I can't seem to copy & paste it (nav bar OR the code) into other pages?

               

              Do you know any way to get the nav bar into multiple pages without having to spend hours creating each page separately?

               

              Thanks.

              • 4. Re: How do I insert a nav bar I made in photoshop into dreamweaver?
                Sprogness Level 1

                I have done that, thank you - but do you know how to get the nav bar into other dreamweaver pages? It's just greyed out when I try and attach it again? Thanks

                (PS I'm a novice at this, I don't understand code!)

                • 5. Re: How do I insert a nav bar I made in photoshop into dreamweaver?
                  Rob Hecker2 Adobe Community Professional & MVP

                  I don't understand code!

                   

                  If you don't know how to code HTML, then the good news is that you can lean a lot of it in just a few weeks. But if you are unwilling to learn simple HTML, which many children know, then I suggest you stop trying to create a website with Dreamweaver and take a look at Adobe Muse.

                  • 6. Re: How do I insert a nav bar I made in photoshop into dreamweaver?
                    Nancy OShea Adobe Community Professional & MVP

                    Copy & Paste this code into a new, blank document (in code view, of course).  SaveAs test.html and preview in browsers.   Now examine the CSS and HTML code in DW.  The navigation element is not complex at all.  And you can easily change links inside Dreamweaver without ever opening Photoshop.

                     

                    <!DOCTYPE html>

                    <html>

                    <head>

                    <meta charset="utf-8">

                    <title>3-Equal height columns</title>

                     

                    <!--[if lt IE 9]>

                    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

                    </script>

                    <![endif]-->

                     

                    <style>

                    html {

                        font: 13px/22px Helvetica, Arial, sans-serif;

                        color: #333;

                        background: #577867;

                    }

                    body {

                        margin: 75px auto;

                        width: 1000px;

                        border: 0.5em outset #FFF;

                        background-color: #111;

                        /**rounded borders**/

                        -moz-border-radius: 25px;

                        -webkit-border-radius: 25px;

                        border-radius: 25px;

                        /**box shadow**/

                        -moz-box-shadow: 5px 5px 25px #333;

                        -webkit-box-shadow: 5px 5px 25px #333;

                        box-shadow: 5px 5px 25px #333;

                    }

                    /**layout**/

                     

                    header {

                        color: #FFF;

                        text-align: center;

                    }

                    /**top menu**/

                    nav {

                        width: 90%;

                        margin: 10px auto;

                        color: #CADFEB;

                        font-size: 18px;

                        font-weight: bold;

                    }

                    nav li {

                        list-style: none;

                        display: inline;

                        border: 1px solid #DDD;

                    }

                    nav li a {

                        text-decoration: none;

                        color: #FFF;

                        background: green;

                        padding: 0 4%;

                    }

                    /**change color on mouseover/click**/

                    nav li a:hover, nav li a:active, nav li a:focus { background: red }

                     

                    /**content**/

                    section {

                        margin: 0;

                        display: table-row;

                    }

                    aside {

                        margin: 0;

                        display: table-cell;

                        width: 20%;

                        background-color: #CADFEB;

                        color: #325C74;

                    }

                    article {

                        margin: 0;

                        display: table-cell;

                        background-color: #FFF;

                    }

                    footer {

                        color: #FFF;

                        min-height: 45px;

                    }

                    /**text styles**/

                    h1, h2 {

                        font-size: 20px;

                        padding: 0 20px;

                        line-height: 24px;

                    }

                    h3, h4 {

                        font-size: 16px;

                        line-height: 18px;

                        padding: 0 20px;

                    }

                    h4 { color: #990000 }

                    p { padding: 0 20px; }

                    </style>

                    </head>

                    <body>

                    <header> <h1>3-Equal Height Columns</h1>

                    </header>

                    <nav>

                    <ul>

                    <li><a href="#">nav 1</a></li>

                    <li><a href="#">nav 2</a></li>

                    <li><a href="#">nav 3</a></li>

                    <li><a href="#">nav 4</a></li>

                    <li><a href="#">nav 5</a></li>

                    <li><a href="#">nav 6</a></li>

                    <li><a href="#">nav 7</a></li>

                    </ul>

                    </nav>

                    <section>

                    <aside> <h2>Left Aside </h2>

                    <p>Qui dolorem ipsum quia dolor sit amet, dicta sunt explicabo. Eaque ipsa quae ab illo inventore veritatis vel illum qui dolorem eum fugiat sed ut perspiciatis unde omnis. </p>

                    <h2>Heading 2 </h2>

                    <p>Qui dolorem ipsum quia dolor sit amet, dicta sunt explicabo. Eaque ipsa quae ab illo inventore veritatis vel illum qui dolorem eum fugiat sed ut perspiciatis unde omnis. </p>

                    </aside>

                    <article> <h2>Main Article</h2>

                    <p>Tested and works in Firefox, Chrome, Safari, Opera and modern IE browsers.</p>

                    <p>Duis aute irure dolor ut enim ad minim veniam, ullamco laboris nisi. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Sunt in culpa velit esse cillum dolore consectetur adipisicing elit.</p>

                    </article>

                    <aside> <h2>Right Aside</h2>

                    <p>Qui dolorem ipsum quia dolor sit amet, dicta sunt explicabo. Eaque ipsa quae ab illo inventore veritatis vel illum qui dolorem eum fugiat sed ut perspiciatis unde omnis. Consectetur, adipisci velit, nam libero tempore, iste natus error sit voluptatem. Et expedita distinctio. Qui in ea voluptate nisi ut aliquid ex ea commodi consequatur? Quo voluptas nulla pariatur? Aut odit aut fugit, nemo enim ipsam voluptatem cumque nihil impedit quo minus.</p>

                    </aside>

                    </section>

                    <footer> <p>Footer</p>

                    </footer>

                    </body>

                    </html>

                    • 7. Re: How do I insert a nav bar I made in photoshop into dreamweaver?
                      Sprogness Level 1

                      Thank you so much!!!

                      Although I actually found a way to get it into other pages now, am so relieved!

                      But the code you sent is brilliantly helpful,

                      thanks