Skip navigation
h2obaby716
Currently Being Moderated

Place an mp3 player on top of an image in image-based website??

Nov 2, 2013 8:20 PM

Tags: #dreamweaver #mp3 #cs6 #image_based

Hi everyone!

 

I am trying to create a website for our company, and have made an image-based website in Photoshop. The whole background is composed of sliced images from a Photoshop file, and I want to add links, drop down menus, a photo slider, and an mp3 player with Dreamweaver. I am having a great deal of trouble as I don't know nearly as much about coding as I would like to!

 

Right now I am trying to add an mp3 player to the bottom of our website, but I want it to be on top of the bar at the bottom of the page. Since the bar is technically an image, every time I paste the code for the mp3 player into the HTML, it goes above or below the bar rather than on top of it. Is there any way to remedy this?? Advice would be appreciated! Thanks

 
Replies
  • Currently Being Moderated
    Nov 3, 2013 7:31 AM   in reply to h2obaby716

    Is there any way we can see your website? Fishing around in the dark is not a good way to give advice.

     

    I should also mention that the "slicing Photoshop files" method of website building is probably not the way we build websites anymore, if I understand where you are coming from.

     

    Generally speaking, if you have an image in the background set up in your style sheet, you should be able to put things on top of that image.

     

    So, let's say we have a div and I'm going to call it "player." We may want to have more than one player on a page, so we'll give it a class:

     

    CSS:

     

    .player {

         background-image: url("/path/myimage.jpg");

    }

     

    HTML:

    <div class="player">

        

    <audio controls>

      <source src="/path/myaudio.ogg" type="audio/ogg">

      <source src="/path/myaudio.mp3" type="audio/mpeg">

    Your browser does not support the audio element.

    </audio>

     

    </div>

     

    Now, what I have done here is to create an HTML5 Audio player. The web page with the audio must be HTML5. And you will probably need to edit your .htaccess file to include the following:

     

    AddType audio/ogg .oga

    AddType video/ogg .ogv

    AddType application/ogg .ogg

    AddHandler application-ogg .ogg .ogv .oga

     

    If you don't know how to edit an .htaccsss file, you should be able to add those MIME types in your host's Control Panel.

     

    The way you declare an HTML5 document is to start the document with:

     

    <!DOCTYPE HTML>

    <html>

     

    This would be before you start your <head> region.

     

    But I must warn you, I'm offering all of this with a great deal of trepidation. I believe you're putting together a website using tables and inline code for things like backgrounds and such. Modern web design does not use tables to format web pages.

     

    Without looking at what you're doing, there is a very big limit as to how I can advise you.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 3, 2013 8:29 AM   in reply to h2obaby716

    PS is a graphics app.  What you have now is a design comp that must be translated into a real web page with HTML & CSS code. Unfortunately, PS generated code is far too rigid and unstable for use in a real site.  That's why you're struggling to work with it.  

     

    Start over with one of the pre-built layouts in DW.  Go to File > New > Blank page > HTML.  Choose a layout from the 3rd panel and hit Create.

     

    SaveAs index.html (your web site's home page) or some other filename.html. 

    Insert images & real text into the HTML. 

    Use the CSS Design panel to style your content & apply backgrounds to divs.

     

    Also, work through this 5-part tutorial.

    Creating your first web site in DW -

    http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.htm l

     

     

    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