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

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??

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>

<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>

Similar Messages

I have 5 html pages that share a common header, footer, and sidebar. how do i use my nav bar to change the content of the body without duplicating a lot of code?

i have 5 html pages that share a common header, footer, and sidebar. how do i use my nav bar to change the content of the body without duplicating a lot of code? thank you!

i inherited the website. It’s for a non-profit and is not very
sophisticated, and neither am I in webdesign. It currently has multiple
pages that are identical except for that body section, so whenever i change
the navigation (in the sidebar) I have to update every html page. I want
to have one basic page, and just call in the different body content based
on the link the user selects from the nav bar. How can i do that using a
script? i am using Dreamweaver.
~ in love and light ~
Jeannie
On Sat, Feb 7, 2015 at 4:07 AM, Ben Pleysier <[email protected]>

Created site in iweb 08 and posted to netfirms... the pages are all loaded up but there is no nav bar, it comes up on each page as a small black dot. How do I get the nav bar to load up and show?

I created site in iweb 08 and posted to netfirms... the pages are all loaded up but there is no nav bar, where the nav bar should be is only a small black dot on each page. How do I get the nav bar to load up and show? It was a disaster loading up my site as it changed the case of the letters and at first no pages were seen, so I had to go through and change the letters that were supposed to be cap, back to cap in every file. I don't know if this has something to do with it or not. The tech support doesn't have an answer. Please let me know if you have any ideas and solutions. Thanks bunches!

Here are links to the simple 7 pages....
http://www.rednosedesign.net/home.html
http://www.rednosedesign.net/about_us.html
http://www.rednosedesign.net/logos.html
http://www.rednosedesign.net/flyers_&_ads.html
http://www.rednosedesign.net/notecards.html
http://www.rednosedesign.net/business_cards.html
http://www.rednosedesign.net/contact_us.html

How do you insert an electronically signed report as an appendix into a main report which will be signed electronically at a later date?

How do you insert an electronically signed report as an appendix into a main report which will be signed electronically at a later date?

You can add it as a file attachment. Exactly how you do this depends on the version of Acrobat you're using, but if you open the Attachments panel, you should see where you can add a file.

How to auto insert a number array with size of 20 into a named excel file with the positon is from A1 TO A20?i use lv6.1

can you give me a example vi for it ?thanks a lot!
how to auto insert a number array with size of 20 into a named excel file with the positon is from A1 TO A20?i use lv6.1

You don't need us to give you an example, as the example already comes with LV. Go to Help>>Find Examples and search for "excel". You will find an example called "write table to XL". You should note that the example doesn't do that exactly, because it writes a 2D array from 2 to N.
You can modify the example by using only one for loop (instead of nested loops) with a 1D array or by going into the Set Cell Value and modifying it to accept a second cell value for the Cell2 terminal and wiring in a 1D array instead of the single string. If you do modify it, be sure to save it under a different name, so you don't overwrite the original.
To learn more about LabVIEW, I suggest you try searching this site and google for LabVIEW tutorials. Here and here are a couple you can start with. You can also contact your local NI office and join one of their courses.
In addition, I suggest you read the LabVIEW style guide and the LabVIEW user manual (Help>>Search the LabVIEW Bookshelf).
Try to take over the world!

How do I insert a spry bar?

Hi, I'm designing my 1st website and I started it in photoshop cs5.5. I imported my site into Dreamweaver cs5.5 and uploaded it to my server. The problem I'm having is that when I try to insert a drop down menu bar, I get gaps within my page. How do I fix this? *Help Please* The URL for my site is: http://www.coriemoment.com
and this is my coding:
<html xmlns="http://www.coriemoment.com"
<head>
<title>The Official Corie Moment Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
    <div id="=container"
<body bgcolor="#FFFFFF" leftmargin="auto" topmargin="auto" marginwidth="auto" marginheight="auto" margin:0;>

<table id="Table_01" width="1281" height="768" border="0" cellpadding="0" cellspacing="0">
          <tr>
                    <td colspan="6">
                              <img src="images/index_01.png" width="1280" height="220" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="220" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="4">
                              <img src="images/index_02.png" alt="" width="414" height="548"></td>
                    <td rowspan="3">
                              <object width="564" height="423"><param name="movie" value="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XbuQiJ6Sv_M?hl=en_US&version=3" type="application/x-shockwave-flash" width="564" height="423" allowscriptaccess="always" allowfullscreen="true"></embed></object></td>
                    <td colspan="3">
                              <img src="images/index_04.png" width="255" height="89" alt=""></td>
                    <td rowspan="4">
                              <img src="images/index_05.png" width="46" height="548" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="89" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/video_03-07.png" width="1" height="336" alt=""></td>
                    <td rowspan="3">
                              <img src="images/index_07.png" width="34" height="459" alt=""></td>
                    <td>
                              <script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
/*put your twitter id that people use to reply to you below. Mine is mhorning. If you only want to see the Tweets that you have Tweeted, then delete the part below that says- OR to:coriemoment */
search: 'from:coriemoment OR to:coriemoment',
   /*this is the duration in terms of seconds*/
interval: 30000,
   /*this is the title you want on your tweets*/
title: 'Corie Tweets',
subject: 'Send us your comments',
   /*setting width to 'auto' will adjust the width of your tweetbox to whatever is set on your div. You can change this to something like 500px if you want*/
width: 'auto',
height: 212,
theme: {
    shell: {
             /*this will change the background color of your tweetbox. It is currently yellow*/
            background: 'body p, body img, body embed, body object, body video{opacity:1 !important}',
      /*this will change the color of the text in your background*/
            color: 'fac935'
    tweets: {
             /*this will change the background color behind your tweets. It is currently white*/
            background: 'body p, body img, body embed, body object, body video{opacity:0.2 !important}',
       /*this will change the color of the text in your tweets. It is currently black*/
            color: '#000000',
       /*this will change the color of anything that is hyperlinked in your tweet. It is currently blue*/
            links: '#1985b5'
features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
}).render().start();
</script></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="302" alt=""></td>
          </tr>
          <tr>
                    <td rowspan="2">
                              <img src="images/index_09.png" width="220" height="157" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="34" alt=""></td>
          </tr>
          <tr>
                    <td colspan="2">
                              <img src="images/index_10.png" width="566" height="123" alt=""></td>
                    <td>
                              <img src="images/spacer.gif" width="1" height="123" alt=""></td>
          </tr>
</table>

</body>
</html>

Please see here http://forums.adobe.com/thread/1166609.
Really annoying when there are multiple posts for one query

How can I combine the nav bar and menu bar on the same line to save space?

Firefox v29 seems to be a huge step backward in customization. I need to save space for content so previously I turned off tabs and combined the menu bar and nav bar on the same line. The url space is way too long anyway. Now with v29 all my customization is gone and I cannot get it back. I can no longer move items on the nav bar to combine it with the menu bar. Why was this done? It only limits my ability to customize my browser? I am very frustrated that you took a great browser and ruined it.

I get it that Firefox has changed, but the change is for the worse. It makes it impossible to customize menus as I had before v.29.

The toolbars and the bars of menus in Photoshop or Dreamweaver are very very small.

Hello,
I downloaded and installed Adobe CS6 yesterday and when I try to use Photoshop or Dreamweaver the toolbars and the bars of menus are very very small. It's absolutely unusable. What can I do ?
Thank you by advance

What can I do ?
Nothing. CS6 does not support high-DPI displays.
Mylenium

How can I fix a nav bar that wraps to a second line?

I have a single line of text on the navigation bar while I'm working in iweb but when published it wraps to a second line. I tried extending the page width which seemed to help on my home page but the other pages still have 2 lines.

some theme has large fo font size and/or wide padding for navbar items.
iweb navbar is rendered by javascript widget, so you can use javascript to change them:
http://iweb3widgets.cyclosaurus.com/iWebNavBar/Small_Font.html
http://iweb3widgets.cyclosaurus.com/iWebNavBar/Close_Padding.html
code is linked to examples.

How i can insert symbol of infinity or resistance by labview into excel file

Hi. i need insert infinity synbol into report excel file. how can i do this easly, maybe you have ready function for this target.
Solved!
Go to Solution.
Attachments:
26.08.jpg ‏4 KB
26.081.jpg ‏2 KB

If you don't want to get into EXCEL class & its propert node, then simplest way is to RECORD the macro of inserting symbolin EXCEL.
The copy the generated VB code & use it in LABVIEW by using EXCEL MACRO VIs.

How do I insert a flyer made in Photoshop into the body of an email...

I made a flyer in Photoshop, I saved it as a JPG. Then I went into my email client AOL to insert it into the body of the email to send out to my clientele. I sent it to myself first to check the resolution etc. The problem is I cannot get it to keep the orginal aspect ration within the email. I compared it to other flyers sent to me, that were produced in Photoshop, I checked all the specs and everything in them matched mine. When I put them into the email the retained their orginal format. So what am I doing wrong that mine will not. I am sure it is something simple I am not aware of doing as I am new to the program.
Any assistance would be greatly appreciated. I am working in Photoshop CS3 on a Dell.
BJ

What happens if your recipients' email clients do not display images by default? Will your message still get across?
http://www.emaillabs.com/tools/email-marketing-statistics.html#blockedimages
Hopefully, you have no more than 100 recipients to your email marketing as AOL imposes a limit.
The comparison between messages you send and those you have received should be clearly made. Were those messages that you received sent from AOL? Were they sent with the same AOL mail client? Do they use images attached to the message or called from a web server?

How do I place files I used to create a website into Dreamweaver's Local site folder?

I designed a site years ago for a client. Now when I open the site in DW, the images aren't linked because there are no files in the local site folder. It must be easy - I'm just no finding the solution on my own. Thank you

Sounds like someone moved the files out of the local site folder, probably using the OS rather than DW's Files window.
DW just manages files on your computer, it doesn't store your files in the program. So you will have a folder somewhere on your machine with the same name that appears when you hover over the root folder at the top of your Files window in DW. You can also find the folder name under Site > Manage Sites > click the site you are working with > Site > Local Site Folder.
You need to find that folder on your desktop, then find the images that are supposed to be in it, and move the images back.

Imported Fireworks Nav Bar Animation Looping

Hi
I have imported a navigation bar I made in fireworks into dreamweaver and when I preview in browser it keeps looping. In fireworks I added a rollover effect so that when you rollover each bit of text, e.g. home, contact, games it goes bold, and when previewing it loops so they all keep going bold without my control. In Fireworks I made it using slices and several states, and so just when I rollover state one it changes to state 2 for example. Very simple, but it keeps looping, how can I stop this? Thanks. I have attached the png file for fireworks if you need to take a look.

Hi
You do not require the fireworks/javascript to achieve the effect you require for your links.
This effect can be made using simple css a:link, (visited, hover, active) statements, I would also recommend using css to style your page and not tables/image slices .
For the css links, see - http://www.w3schools.com/css/css_link.asp and http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml.
Moving from tables based design to css based - http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html.
PZ

Help with Nav Bar insert

When I try to insert a Nav Bar, clicking OK in the Modify Nav
Bar window gives the following message:
"while executing onClick in Modify Nav Bar.htm, a JavaScript
error occurred"
Amateur user with no clue what this means,
Jon

Troubleshooting JavaScript errors in Dreamweaver
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_19105#dat
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"zaphron" <[email protected]> wrote in
message
news:f4phcu$rj3$[email protected]..
> When I try to insert a Nav Bar, clicking OK in the
Modify Nav Bar window
> gives
> the following message:
>
> "while executing onClick in Modify Nav Bar.htm, a
JavaScript error
> occurred"
>
> Amateur user with no clue what this means,
>
> Jon
>

Divs are shifting after inserting spry menu bar

I have tried so much that it has driven me crazy. Initailly I created this site by APdivs and it came out perfect and worked great, except it was not fluid and looked bad on bigger browser and screen size. I decided to change it to fluid way. Now I am in bad shape as soon as I put a horizontal spry menu bar. it shifts the columns to the left and leaves a blank space next to the column 3. I am out of idea, how to fix it. As soon as I take the menu bar out, it works perfect. and columns are stretched to the end on both sides.
Here is the link of test page
www.hpbsurgery.net
This is what I have tried-nothing worked
put menu bar in container
put menu bar in header div
Put mebu bar in a horizontal div inside header div.
changed the size and dimension of menu bar
Any help would be greatly appreciated as I am running out of time.
Thanks much all....

Thanks very much for your help. I just wanted to mention one thing which I discovered this am by accident out of frustration. Originally, I was trying to control the size of the 3 columns with external CSS and it was messing up after inserting menu bar. I wrote directly in the code this am to exactly define the size besides in my CSS. AND............it fixed the problem and stretched the columns to the end on both side and sizes were appropriate, I am still not sure why did it happen.
I am not a professional and trying to build my own site as I have interest in web design, but this is first time with DW.
I really appreciate your help and suggestion about the code.
Thanks a lot,
Date: Wed, 26 Sep 2012 12:46:19 -0600
From: [email protected]
To: [email protected]
Subject: Divs are shifting after inserting spry menu bar
    Re: Divs are shifting after inserting spry menu bar
    created by Nancy O. in Dreamweaver General - View the full discussion
You appear confused about how to use CSS classes and IDs. Classes (.className) can be used multiple times in layouts as for re-usable styles. IDs (#IDName) can be used only one time per page -- as for layout regions or when JavaScript is needed to act upon it. Try copying and pasting this code into a new blank page. Hopefully it will make more sense than what you have now.
<!NEW LAYOUT>
body
#header
#horizontalmenu {
min-height: 43px;
width: 100%;
overflow: hidden;
margin: 0px;
#leftbar {
background-color: aqua;
float:left;
width: 18%; /*combined width and padding = 22%*/
padding:2%;
#middlebar {
background-color: white;
float:left;
width: 52%; /*combined width and padding = 56%*/
padding:2%;
#rightbar    {
background-color: green;
color:white;
float:right;
width: 18%; /*combined width and padding = 22%*/
padding:2%;
#credential
#footer {
background-color: maroon;
width: 100%;
color:white;
padding:2%;
#header
[Item 2 | #]
[Item 3 | #]
[Item 3.1 | #]
[Item 3.1.1 | #]
[Item 3.1.2 | #]
[Item 3.2 | #]
[Item 3.3 | #]
[Item 4 | #]
<!END #HEADER>
#leftbar
#middlebar
#rightbar
#credential
#footer
Nancy O.
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/4729585#4729585
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4729585#4729585
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4729585#4729585. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Dreamweaver General by email or at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

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

Similar Messages

Maybe you are looking for