20 Replies Latest reply: Apr 26, 2012 12:46 AM by osgood_ RSS

    Dreamweaver header logo background image help

    chateau21

      Hello

      I'm hoping someone can help with some dreamweaver troubles I'm having.

      I am brand new to dreamweaver and so have no real experience of building a website and am completely stuck.

      I am following a tutorial for making my website.

       

      Firstly - am I supposed to have already defined my website domain and web host or can I design in dreamweaver before doing this?

       

      I have only just started out and I have created a template and the next stage was to create the header -

      I have doen the following -

      Created a Div Tag

      Named the ID #header

      Created a new CSS rule

      Saved the style sheet

       

      I have then (in th CSS Rule Definition for #header in style.css) chosen background colour / background image / box size

       

      However when I created this, the header shows (bounded in a blue box) but the logo is not showing in the design view or any view

      I chose the logo when using the 'browse'  (this was a pre-saved image saved in my documents folder on my mac within the folders for creating my site) for the Background-Image in the background section.

      I think maybe the URL for the image is incorrect - but I don't know how to correct it.

      It is this -

      url(HC%20WEB%20LOGOS/Hazel%20Castle%20Website%20logo%20wht%202.png)

       

      I've been googling the problem for hours but I dont seem to see a solution.

       

       

      Just to note - I am using mac OSX 10.6.8

       

      Any help would be much appreciated

        • 1. Re: Dreamweaver header logo background image help
          Ken Binney MVP

          Yes - define at least your local site, preferably your remote site as well.

          Don't use spaces in file or folder names - hyphens or underscores are OK

          Be meticulous about case in file name and link paths

          Make sure your remote styleshett if any is linket to your page

          • 2. Re: Dreamweaver header logo background image help
            osgood_ MVP

            chateau21 wrote:

             

            Firstly - am I supposed to have already defined my website domain and web host or can I design in dreamweaver before doing this?

             

             

            You can design in Dreamweaver before even considering a website domain or web host. What you do need to do though and its IMPORTANT is 'define' a site folder in Dreamweaver first so it knows where to store all the files associated with your site.

             

             

            chateau21 wrote:

             

             

            I have only just started out and I have created a template and the next stage was to create the header -

            I have doen the following -

            Created a Div Tag

            Named the ID #header

            Created a new CSS rule

            Saved the style sheet

             

            I have then (in th CSS Rule Definition for #header in style.css) chosen background colour / background image / box size

             

            However when I created this, the header shows (bounded in a blue box) but the logo is not showing in the design view or any view

            I chose the logo when using the 'browse'  (this was a pre-saved image saved in my documents folder on my mac within the folders for creating my site) for the Background-Image in the background section.

            I think maybe the URL for the image is incorrect - but I don't know how to correct it.

            It is this -

            url(HC%20WEB%20LOGOS/Hazel%20Castle%20Website%20logo%20wht%202.png)

             

            I've been googling the problem for hours but I dont seem to see a solution.

             

             

            Just to note - I am using mac OSX 10.6.8

             

            Any help would be much appreciated

             

            That url is full of spaces represented by the %20 (that's bad practice) use an underscore like below:

             

            background-image: url(HC_WEB_LOGOS/Hazel_Castle_Website_logo_wht_2.png);

             

            The above link says your image is located in the folder HC_WEB_LOGOs (that folder should be in your site folder)

             

             

            So your header css should look something like below:

             

            #header {

            background-image: url(HC_WEB_LOGOS/Hazel_Castle_Website_logo_wht_2.png);

            background-repeat: no-repeat;

            background-color: #000;

            width: 200px;

            height: 100px;

            }

             

             

            Look at your css and see if it looks like the above. Obviously the background color and box size will be different.

            • 3. Re: Dreamweaver header logo background image help
              sudarshan.t MVP

              Welcome to the forum...

              Firstly - am I supposed to have already defined my website domain and web host or can I design in dreamweaver before doing this?

              You need not define your site in DW initially with remote server info. You could just define your site with local info before you begin working on your files. Once your site is complete, you could purchase domain + hosting and upload the files there. However, it is recommended that you purchase your domain + host as soon as possible so that if you run into trouble developing your site later, you can host your files there so we could take a look there and help you.

               

               

              I have then (in th CSS Rule Definition for #header in style.css) chosen background colour / background image / box size

               

              However when I created this, the header shows (bounded in a blue box) but the logo is not showing in the design view or any view

              I chose the logo when using the 'browse'  (this was a pre-saved image saved in my documents folder on my mac within the folders for creating my site) for the Background-Image in the background section.

              I think maybe the URL for the image is incorrect - but I don't know how to correct it.

              It is this -

              url(HC%20WEB%20LOGOS/Hazel%20Castle%20Website%20logo%20wht%202.png)

               

              For starters, your URL is not a Web Standard Compliant one. You're not supposed to have spaces in your filename/ foldername. Local machines and some servers will read this while others wont. It's recommended that you use underscores and/ or hyphens for your file and foldernames.

               

              Regarding logo not showing up, post your CSS and HTML code here along with a screenshot of what you're seeing currently so we can help you out.

               

              Good luck with your work.

              • 4. Re: Dreamweaver header logo background image help
                Nancy O. MVP

                Answers to questions like yours are contained in your CSS and HTML code.   Before you begin any new project, you must define your local site folder in DW.  Sites > Manage Sites > New... Without this critical first step, DW cannot manage your site's assets (templates, links, images, etc..) for you.  This may explain why your images are not showing up.  Also, don't use spaces in file & folder names.  Most browsers convert spaces to %20 characters which can foul things up.  For best results, stick with lower case letters & underscores_ or hyphens - between words if needed.

                 

                Focus on learning HTML & CSS code basics.  When you understand code fundamentals, DW is much easier to work with.

                 

                Start here:

                http://w3schools.com/

                 

                WEB DESIGN RESOURCES:

                http://forums.adobe.com/message/4105662#4105662

                 

                DW, Setting Up Local & Remote site folders (CS5 & CS5.5)

                http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ff e.html

                 

                 

                Nancy O.

                Alt-Web Design & Publishing

                Web | Graphics | Print | Media  Specialists 

                http://alt-web.com/

                http://twitter.com/altweb

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

                • 5. Re: Dreamweaver header logo background image help
                  chateau21 Community Member

                  Thankyou everyone for your replies.

                  Very helpful!

                   

                  Right  -  I started the whole thing again and re-done the first steps after I re-named all my folders and removed all spaces (thanks for this tip - I had no idea!)

                  The folder stated in the image url (Web Logoso) is a folder within my site folder

                  However the image is still not showing but the jpeg file is now showing in my local sile section in dreamweaver (bottom right)

                   

                  This is my html code

                  <!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=UTF-8" />

                  <!-- TemplateBeginEditable name="doctitle" -->

                  <title>Untitled Document</title>

                  <!-- TemplateEndEditable -->

                  <!-- TemplateBeginEditable name="head" -->

                  <!-- TemplateEndEditable -->

                  <link href="../style.css" rel="stylesheet" type="text/css" />

                  </head>

                   

                   

                  <body>

                  <div id="header"></div>

                  </body>

                  </html>

                   

                  This is my css

                  #header {

                            background-color: #FFF;

                            background-image: url(HCWEBLOGOS/HazelCastleWebsitelogowht.png);

                            background-repeat: no-repeat;

                            background-position: 20px 20px;

                            height: 110px;

                            width: 100%;

                  }

                   

                  This is a screen shot

                  Screen shot 2012-04-25 at 17.59.00.png

                  • 6. Re: Dreamweaver header logo background image help
                    chateau21 Community Member

                    Actually ignore the part about the jpeg showing in the bottom right - it was as I haved the image to both the main site folder and a logo sub folder within this site folder

                    • 7. Re: Dreamweaver header logo background image help
                      chateau21 Community Member

                      Thankyou for your help

                      I have replied below!

                      • 8. Re: Dreamweaver header logo background image help
                        sudarshan.t MVP

                        However the image is still not showing but the jpeg file is now showing in my local sile section in dreamweaver (bottom right)

                        background-image: url(HCWEBLOGOS/HazelCastleWebsitelogowht.png);

                        Your statement is conflicting. You're referring to a .png file in your CSS while you've mentioned JPEG in your previous line. Are you sure you've linked the correct file?

                        • 9. Re: Dreamweaver header logo background image help
                          osgood_ MVP

                          Where is your style.css file in relation to your site folder?

                           

                           

                          <link href="../style.css" rel="stylesheet" type="text/css" />

                           

                           

                          Another way to test the css is to put it directly into the page code directly before the closing </head> tag:

                           

                          #header {

                                    background-color: #FFF;

                                    background-image: url(HCWEBLOGOS/HazelCastleWebsitelogowht.png);

                                    background-repeat: no-repeat;

                                    background-position: 20px 20px;

                                    height: 110px;

                                    width: 100%;

                          }

                          </head>

                           

                          Also you might try removing the background-color. I can't remember if it masks out the image or not unless I test it...brains not what it used to be.

                          • 10. Re: Dreamweaver header logo background image help
                            chateau21 Community Member

                            Sudarshan - Sorry I meant to say png file not jpeg!

                             

                            The style.css file is in a template folder that was created when creating a new page - shown in the screen shot below

                             

                            Screen shot 2012-04-25 at 18.22.03.png

                             

                            I'm a little confused by putting the page code in directly? I added the </head> at the end of the header css code but it made no difference

                             

                            Thankyou

                            • 11. Re: Dreamweaver header logo background image help
                              osgood_ MVP

                              Can you move your style.css file out of the Templates folder please into your site folder as the Templates folder is only for .dwt files.

                               

                              Then change the link to your css....get rid of the ../ infront of the name:

                               

                              <link href="style.css" rel="stylesheet" type="text/css" />

                               

                               

                              If you're not happy about doing this in code view then re-link the file.

                              • 12. Re: Dreamweaver header logo background image help
                                chateau21 Community Member

                                I'm really confused by this - how do I move the file? just drag it?

                                Where do I find the link to change?

                                Thanks

                                • 13. Re: Dreamweaver header logo background image help
                                  osgood_ MVP

                                  chateau21 wrote:

                                   

                                  I'm really confused by this - how do I move the file? just drag it?

                                  Open up the Files Panel>Window>Files. Select your site folder from the drop box at the top if not already selected. Open the Templates folder by clicking on it and drag the style.css onto the site folder icon. Dreamweaver should update the link automatically. You should be asked if you want to update, accept.

                                   

                                  If for some reason it does not update then open your template.dwt file and re-link the style.css file.

                                   

                                  Whch brings me to another question are you viewing a page made from the template.dwt file or the template.dwt file istelf?

                                  • 14. Re: Dreamweaver header logo background image help
                                    chateau21 Community Member

                                    I have dragged it over - do i need to delete

                                    <link href="../HCSITE/style.css" rel="stylesheet" type="text/css" />

                                    to make it

                                    <link href="style.css" rel="stylesheet" type="text/css" />

                                    or has this updated correctly?

                                    It is now looking like this

                                    Screen shot 2012-04-25 at 19.11.38.png

                                     

                                    I dont understand the template question (sorry i'm totaly new!)

                                    From instructions i was given I made a new document - blank template - html template - layout <none>

                                    Then saved the template (i named this as template) to my site folder - it then automatically created a folder called templates that appeared with my other subfolders in my site folder

                                    • 15. Re: Dreamweaver header logo background image help
                                      chateau21 Community Member

                                      By the way the style.css button (in the template.dwt tab next to the source code button on the top left) when i click on it it now says ' style.css is not on the local disk'

                                      • 16. Re: Dreamweaver header logo background image help
                                        chateau21 Community Member

                                        Can anyone else helpwith this - I was part way acting on some advice but they've disappeared! I'm so so so stuck!

                                        • 17. Re: Dreamweaver header logo background image help
                                          Nancy O. MVP

                                          I think we're all frustrated.

                                           

                                          First, you don't understand how Templates work.  Template creation should be reserved for the next to final step in your page design process.  In other words, forget about using Templates.   Thoroughly read F1 Help on Templates before you attempt to use them again.

                                           

                                          Second, you don't know how to work with code.  This is going to be a major obstacle.  A working knowledge of HTML & CSS is required learning.

                                           

                                          Finally & most importantly, you don't have a web space to upload files to so we can see your code, scripts, CSS and images working together.  Screenshots don't tell us anything useful.

                                           

                                          Start here:  http://w3schools.com/

                                           

                                          Creating your first web site in DW CS5 -

                                          http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

                                           

                                          Free web hosting to test & debug your site

                                          http://www.000webhost.com/

                                           

                                           

                                          Best of luck,

                                           

                                           

                                          Nancy O.

                                          Alt-Web Design & Publishing

                                          Web | Graphics | Print | Media  Specialists 

                                          http://alt-web.com/

                                          http://twitter.com/altweb

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

                                          • 18. Re: Dreamweaver header logo background image help
                                            Al Sparber Community Member

                                            You might want to skip w3schools and view http://w3fools.com instead

                                             

                                            --

                                            Al Sparber - PVII

                                            http://www.projectseven.com

                                            The Finest Dreamweaver Menus | Galleries | Widgets

                                            Since 1998

                                            • 19. Re: Dreamweaver header logo background image help
                                              John Waller MVP

                                              w3schools taught me a lot as a beginner in the past and their tutorials are easy to follow.

                                               

                                              w3fools has a lot of good points. They're also nitpicky at times.

                                               

                                              The quality of w3schools' tutorials is subject to ongoing discussion but I still think it's a worthwhile resource for novices.

                                              http://www.readwriteweb.com/hack/2011/01/w3schools-responds-to-w3fools.php

                                              • 20. Re: Dreamweaver header logo background image help
                                                osgood_ MVP

                                                chateau21 wrote:

                                                 

                                                I have dragged it over - do i need to delete

                                                <link href="../HCSITE/style.css" rel="stylesheet" type="text/css" />

                                                to make it

                                                <link href="style.css" rel="stylesheet" type="text/css" />

                                                or has this updated correctly?

                                                It is now looking like this

                                                Screen shot 2012-04-25 at 19.11.38.png

                                                 

                                                I dont understand the template question (sorry i'm totaly new!)

                                                From instructions i was given I made a new document - blank template - html template - layout <none>

                                                Then saved the template (i named this as template) to my site folder - it then automatically created a folder called templates that appeared with my other subfolders in my site folder

                                                 

                                                That link still looks incorrect to me.

                                                 

                                                <link href="../HCSITE/style.css" rel="stylesheet" type="text/css" />

                                                 

                                                Have you saved the template.dwt file which you are obviously working on?

                                                 

                                                When saved the link should look like:

                                                 

                                                <link href="../style.css" rel="stylesheet" type="text/css" />

                                                 

                                                If it doesn't then something is wrong. Did you define the site folder at the outset of your project?

                                                 

                                                 

                                                The template.dwt file code, according to your site file panel, should look like the below. Make sure it does and then save the tempate.dwt file into the Templates folder. The code is as it was originally BUT your style.css file was in the wrong location. Having moved it out of the Templates folder and into the site root folder your code should now work.

                                                 

                                                 

                                                 

                                                <!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=UTF-8" />

                                                <!-- TemplateBeginEditable name="doctitle" -->

                                                <title>Untitled Document</title>

                                                <!-- TemplateEndEditable -->

                                                <!-- TemplateBeginEditable name="head" -->

                                                <!-- TemplateEndEditable -->

                                                <link href="../style.css" rel="stylesheet" type="text/css" />

                                                </head>

                                                 

                                                 

                                                <body>

                                                <div id="header"></div>

                                                </body>

                                                </html>