Skip navigation
sparklehoof2
Currently Being Moderated

Troubleshooting: .png's in dw CS6

Feb 19, 2013 9:00 AM

Tags: #image #mac #dreamweaver #png #link #links #layout #cs6

Hi,

I am new to coding and dw and am using the fluid layout to create the site: threewheelstudio.com.  I am trying to create a line of social media icons in which you can access a hyperlink by clicking on the icon itself.  The icons are not showing up.  I'd like to learn how to make the icons appear in the browser and center them or create a side icon bar (if possible).

 

I set up a div for social media icons and saved the icons as png's.,put my root folder, double checked the server and can see that the remote server has the files.

The path appears to be correct.

Any ideas?

 
Replies
  • Currently Being Moderated
    Feb 19, 2013 9:21 AM   in reply to sparklehoof2

    http://threewheelstudio.com/icons/circular/facebook_32.png

     

    404 File Not Found

     

    1. Is that the correct path to the image on the server?
    2. Is the file named with all lowercase on the server? (Facebook_32.png and facebook_32.png would be two different files according to the server)
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 9:22 AM   in reply to sparklehoof2

    I don't see any icons in your page.  Reason: they are 404 not found on server.

    They should be in a folder called icons in a sub-folder called circular.

     

    Relevant code should look like this:

     

    <div id="socialmedia">

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

    <a href="http://www.facebook.com/threewheelstudio"><img src="icons/circular/facebook_32.png" alt="facebook"></a>

    <a href="http://wholesalecrafts.com"><img src="icons/wsc_logo.gif" alt="wholesalecrafts" width="146" height="29"></a>

    <a href=" http://www.etsy.com/shop/ThreeWheelStudio"><img src="icons/circular/etsy.png" alt="etsy" width="36" height="35"></a>

    <!-- TemplateEndEditable -->

    </div>

     

    If you want social icons to appear on all site pages, remove the Editable Regions from your template. Save and populate changes to all child pages.

     

    <div id="socialmedia">

     

    <a href="http://www.facebook.com/threewheelstudio"><img src="icons/circular/facebook_32.png" alt="facebook"></a>

    <a href="http://wholesalecrafts.com"><img src="icons/wsc_logo.gif" alt="wholesalecrafts" width="146" height="29"></a>

    <a href=" http://www.etsy.com/shop/ThreeWheelStudio"><img src="icons/circular/etsy.png" alt="etsy" width="36" height="35"></a>

    </div>

     

     

    Nancy O.


     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 9:41 AM   in reply to sparklehoof2

    What's inside the folder named "circular" on the Remote Site? The screenshot only shows a closed folder - not its contents.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 9:45 AM   in reply to sparklehoof2

    Did you export these PNGs for the web before you saved them to your site folder?  I don't use Fireworks but I seem to remember that FW uses .png for native FW project files.  If you ask me, that is very confusing.

     

    I'm not sure that I understand what it means to "populate" changes. 

    When you edit & save your Template, DW should ask if you want to populate changes to child pages.  Hit yes.

     

    If I don't use an "editable region" and later need to change the social media icons, how would I do this? 

    By opening your Template.dwt file.  Editing icons, saving page & populating changes to child pages.  That's the power of Templates.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 10:07 AM   in reply to sparklehoof2

    Thanks. Unfortunately its incomplete and inconclusive...

     

    What do, for example, the filenames beginning with "facebook..." look like?

     

    Just trying to see if the file names and paths in the code have corresponding files on the Remote Server.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 10:18 AM   in reply to sparklehoof2

    I'm not sure how to send you this information.  When I went to the facebook icon image and went to get info. there is an option to compare the file to the local one, but then a dialogue box appears asking which application to use-- and I don't know what kind of application is best for file comparison.

    Not looking for technical file comparison info.

     

    Just a screenshot clearly showing examples of full file names, inside the circular folder, as referenced in the code

    facebook_32.png, etsy.png etc

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 11:14 AM   in reply to sparklehoof2

    Yes.  Path problems are cause for failed links. Using Templates complicates this.

     

    If you want some friendly advice, stick with one lesson at a time.  Make a plain HTML page.  Get your images to appear in that first. Don't worry about making Templates until much later when you're 100% satisfied with your plain .html page. 

     

    Go to File > New > Blank page > HTML > Layouts.  Select a CSS layout from right panel & hit Create.

     

    SaveAs test.html.  Insert images, text, links, etc...  Save. 

    Upload page & dependant files to your server. 

    Post back when you get this done.

     

     

    Nancy O.

     
    |
    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