Skip navigation
chateau21
Currently Being Moderated

Dreamweaver header logo background image help

Apr 25, 2012 8:57 AM

Tags: #help #dreamweaver

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

 
Replies
  • Currently Being Moderated
    Apr 25, 2012 9:20 AM   in reply to chateau21

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 9:20 AM   in reply to chateau21

    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.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 25, 2012 9:19 AM   in reply to chateau21

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 9:28 AM   in reply to chateau21

    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/WS753df6af718a350a600 97e0f131686fa2b4-7ffe.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/

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 25, 2012 10:12 AM   in reply to chateau21

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 10:17 AM   in reply to chateau21

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 10:32 AM   in reply to chateau21

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 10:55 AM   in reply to chateau21

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 1:27 PM   in reply to chateau21

    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.htm l

     

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 1:33 PM   in reply to Nancy O.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 1:39 PM   in reply to Al Sparber

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 12:46 AM   in reply to chateau21

    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>

     
    |
    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