Layering content box under a framing image (slicing a Photoshop PSD and importing into Dreamweaver)

Hi,
I am slicing a Photoshop PSD document and importing into Dreamweaver. Is Dreamweaver able to handle Layered content in the same as Photoshop so that the content box can be Layered below a Decorative Frame. As there will be multiple Images I want to be able to have a content box Layered below the frame, rather than have to make a separate page for each photo in the gallery.
Hope this makes sense. Any pointers gratefully received.
J

No.
Yes.
I regularly receive layered PSD files for web work. The layers allow me to just select one element at a time so that I can complete the pages as the designer wanted me to.
One may have "layers" in a website, but the method is wonky at best and will destroy the flow of a good HTML page, causing rendering problems at worst. You need to think of a website as a 2D object, especially when you are starting out.
If you have elements that need to be "on top" of another element, you'll need to create a div that is within a div, with your inside content inside the outer div. And think of a div as a rectangular area that holds stuff, like pictures, text, colors and graphics.
Layering on websites is usually achieved using JavaScript or AP divs. An Absolutely Positioned div will tend to destroy the normal flow of your HTML, which is why it is recommended only in certain very special cases. If you are just starting out, you need to understand how to construct a 2D web page using HTML and CSS first.

Similar Messages

  • Part 04 - Creating and Importing Images | Classroom: Basic Site Layout and Navigation in Dreamweaver | Adobe TV

    Learn how to create and prepare images to incorporate into your website design.  Save them in web friendly JPG or PNG formats while maintaining a good balance between quality and small file size. Import them into Dreamweaver and make some initial adjustments to layout and alignment.
    http://adobe.ly/zL64GN

    This third lesson needs to be updated. The "ALIGN" buttons in Properties are now missing in CS6 because it's obsolete in HTML now...

  • Why do some images open in Photoshop CS5  and others not when I'm using Edit With command in InDesign

    Sometimes when I try to edit images from within InDesign Photoshop says it cannot open because of a problem. I noticed that it's not with every image. But I cannot see why. Some are my own images from iPhoto, some are from the morgue files. Anyone?

    InDesign

  • I am trying to import my own clipart into Word, any easy ways to that. I am using images from Google but have trouble importing into Word

    I am trying to import images from Google into a Word document and would like the easiest way to do that.

    You would probably be best served by posting your question on the Office for Mac Product Forums .

  • I just bought a Dell Precision M3800 laptop - screen res 3840 x 2160  when I open photoshop the task bar and tools and layers etc are in 4pts size   I changed my % in my image in my control panel and if I go to open file the drop down boxes are in good pt

    I just bought a Dell Precision M3800 laptop - screen res 3840 x 2160  when I open photoshop the task bar and tools and layers etc are in 4pts size   I changed my % in my image in my control panel and if I go to open file the drop down boxes are in good pt sizes  how do I make the layers and tool bars bigger?  Please help@

    Windows will scale applications display or windows will not scale application display depending on how the application is coded.  Photoshop is coded in a way that its display is not scaled by windows.  Photoshop knows about your displays high pixel count not its resolution  so it uses its pixels  however it does not scale its UI to make it usable on your display.  Other application let Windows  scale their display output.   For example Microsoft default for is Surface Pro 3, 216 ppi display is to scale applications display up 150% so the surface pro 3 display which has 2160x1440 pixels a 216 ppi resolution look like at display with the user is using with 1440x960 pixels.  The Application works like the display is 1440x960 and Windows scale those pixels to the displays using the displays  2160x1440 pixels the effectively changing it resolution to 144ppi rather than the actual 216ppi.
    The reg update  and external manifest file  effectively tells photoshop its working on such a size display display some number of pixel wide and some number photoshop uses that as the display size  in turn Windows scale those pixels to use the displays 2160x1440 pixels efector lowing its 216ppi resolution.  Photoshop CC 2014 2X UI would be like using windows 200% option applications would be shown the are working on a display 1080x720 instead of the Surface Pro 3 2160x1440. Note that 1080x720 does not meet PS requirement of 1024x768.  Photoshop UI would not fit on the Surface Pro 3 display..
    Since you have a 4k display if you have CC 2014 you can use its 2x UI effectively Photoshop will be running on a 1920x1080 display and have half the resolution of you 4K display  3840x2160 pixels four native pixels are use as a single pixel.   1920x1080 pixels exceed PS requirement.

  • Content not in the content box

    I'm having a problem with my content not in my content box. I have a webpage started from one of the Codify templates and all was going according to plan but then I added some content to my Rates tab and it appears out of the :content area". This may also explain why I can't get a vertical scrollbar to show up. Thoughts? Ideas? What have I done wrong this time? The page in qusetion is here

    Try the following, copy and paste into a new document called junk.html or similar and notice that I have not use absolute positioning anywhere.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    html {
        color: #FFFFFF;
        font-size: 14px;
        font-family: "Trebuchet MS";
        background-color: #6699CC;
        height: 100%
    body {
        width: 840px;
        margin: 20px auto 0;
        height: 100%;
    h1, h2, h3, p {
        margin-left: 20px;
    #header {
        height: 60px;
        background: url(images/our_company_logo.png) no-repeat;
    #header #share {
        margin: 20px 0 0 325px;
        float: left;
    #content {
    #footer {
        clear: both;
        height: 60px;
    </style>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="header">
      <div id="share">
        <!-- AddThis Button BEGIN -->
        <div class="addthis_toolbox addthis_default_style "> <a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4d30c7c20c5601dc" class="addthis_button_compact">Share</a> <span class="addthis_separator">|</span> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> </div>
        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d30c7c20c5601dc"></script>
        <script type="text/javascript">
        var addthis_config = {
        ui_cobrand: "Janet's Cabin",
        ui_header_color: "#ffffff",
        ui_header_background: "#5D94D5"
        </script>
        <!-- AddThis Button END -->
      </div>
    </div>
    <div id="content">
      <div class="tabbedpanels_top VTabbedPanels"></div>
      <div id="TabbedPanels1" class="VTabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
          <li class="TabbedPanelsTab" tabindex="0">Rates</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent"><p>Content 1</p></div>
          <div class="TabbedPanelsContent">
            <h2>Rates</h2>
            <p> Say something about the rates here </p>
            <div id="weather"><img src="images/prescott_weather01.png" alt="Prescott Weather" width="580" height="199" /></div>
            <div id="rates_01">
            <table>
            <caption>
            Cabin Rental Rates
            </caption>
            <tr>
            <th scope="col">Dates</th>
            <th nowrap="nowrap" scope="col">Weekly Rate</th>
            </tr>
            <tr >
            <td nowrap="nowrap">Jan.1 - Mar. 31</td>
            <td><div align="center">$1XXX</div></td>
            </tr>
            <tr>
            <td nowrap="nowrap">Apr. 1 - Jun. 30</td>
            <td><div align="center">$2XXX</div></td>
            </tr>
            <tr >
            <td nowrap="nowrap">Jul. 1 - Sep. 30</td>
            <td><div align="center">$3XXX</div></td>
            </tr>
            <tr>
            <td nowrap="nowrap">Aug. 1 - Dec. 31</td>
            <td><div align="center">$4XXX</div></td>
            </tr>
            <tr >  </tr>
            </table>   
            </div>
            <div id="cal_pos">
            <script type="text/javascript">
            AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','225','height','234','title','Calendar','src','Flash/calendar_01','quality','high','pl uginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockwave Flash','wmode','transparent','movie','Flash/calendar_01' ); //end AC code
            </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="225" height="234" title="Calendar">
            <param name="movie" value="Flash/calendar_01.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <embed src="Flash/calendar_01.swf" width="225" height="234" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
            </object>
            </noscript></div>
            <div id="weather"><img src="images/prescott_weather01.png" alt="Prescott Weather" width="580" height="199" /></div>
          </div>
        </div>
      <div class="tabbedpanels_bottom"></div>
      </div>
    </div>
    <div id="footer">
    My footer
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    The above is merely an example that has to be worked on.
    No longer Grumps

  • Hide "A plugin is needed to display this content" box

    Since a few versions, the grayish "A plugin is needed to display this content" box is displayed independently of the z-index of the actual plugin. Since FF24 this rectangle now additionally has become opaque, so it completely covers the complete web site content.
    This is a huge problem for me as I have to look at web sites using plugins that are not available for FF and I cannot read the actual content anymore, even though the web page is written in a way that the plugin is only shown as some kind of background image.
    Is there any way to remove this gray box or at least put this box in the background where it should be according to the DOM?

    Do you have Adobe Shockwave/Flash Player installed on your computer?

  • Master Page Content Boxes – Adjusting?

    I thought I understood how to use content boxes on master pages, but I think I may have been wrong!
    I have set up master pages, for example one right hand page has a square frame. I then drag and place an image in each of the boxes in the main document pages.
    However, having then attempted to change the master page, moving or resizing the box on the master is not reflected in the dependent pages within the main document.
    (From reading the help pages, I believe this might be because I have overridden it?)
    I am part way through creating a document and I realise now that I want to change the page size. Having already added content, I want to be able to reposition all of the main document's image boxes.
    Apologies for being ill informed about InDesign. I suspect more preparation would have seen me through here.

    Thanks for replying!
    Notwithstanding this option in CS6 (I'm using CS5)...
    If I don't adjust the page size and I simply move the image box on the master, it does move all of the images on the main pages.
    Why should changing the page size first affect how master pages interact with main pages? Is there any way round this?

  • Content Aware tool causing corrupt images

    As the title states, I went to use my content aware tool to expand a rather simple background texture and it went completely haywire!
    This is what it gave me! I tried to undo it, thinking it had grabbed from all the layers, but going back in the history didn't fix it. So I closed the file (I didn't save it like this) and reopened it only to see the same thing! This was a project for a client so I was more than a little angry that some how the tool had corrupted my entire file and then saved it without me knowing! So I took this screenshot, only to try and open up a New Document and have it too look corrupted. At this point, I closed photoshop completely, making sure any services that started up with it was shut down as well and restarted it and opened my TIF file to find it perfectly fine.
    Again I tried to use the Content Aware tool (with all my layers shut off, minus the one I needed extended) to only have it do the same thing to all the layers again!
    Needless to say I closed photoshop, made sure my video drivers were up to date and reopened, pasted my screenshot and came here. So the obvious thing is, is that my Content Aware tool is causing a problem, but what in the world is going on? How do I fix this?

    Yes; it will always depend on the individual image. 
    Don't expect miracles.  The feature is OK but—despite all the hype—is not ground-breaking, in my opinion. It has been available for quite some time in Alien Skin's Image Doctor set of plug-ins and in the GIMP (this latter one free) in ways I find a bit better.
    Wo Tai Lao Le
    我太老了

  • Click box - advanced actions - dims images

    If I have a text box, by using advanced action on slide I hide it, then on a click box I want it to show - when the hidden text box reveals itself, the image dims.  Why is that?  What do I have set incorrectly?
    thank you to anyone who can help!

    Hello again
    Indeed I thought I had explained that.
    Each object such as an Image, Caption or whatever is generally equipped with a Fade In and Fade Out transition effect. These effects are typically half a second long. So if you pause the slide very near the end of the object display time, the pause is occurring as the transition is fading the object out of view. Thus the "dimming" occurs.
    If you configure the object so no fade out occurs on the transition (Fade In only) then it doesn't matter if you pause near the end because it doesn't fade out of view. Likewise, if you adjust the timing so the Click Box pauses the slide before the transition begins to occur, the dimming won't happen either.
    Cheers... Rick
    Helpful and Handy Links
    Begin learning Captivate 5 moments from now! $29.95
    Captivate Wish Form/Bug Reporting Form
    Adobe Certified Captivate Training
    SorcererStone Blog
    Captivate eBooks

  • The curser includes a text box from a previous image or link when the curser is positioned on the side of the page. i click and it goes away but only to return again on the next launched page. how do i get rid of this?

    the cursor includes a text box from a previous image or link when the cursor is positioned on the side of the page. it will mainly happen when i hit "back" from the page i was on. i click and it goes away but only to return again on the next launched page. i also keep several tabs open and it will carry over to any one of them i go to. how do i get rid of this?
    == This happened ==
    Every time Firefox opened
    == when i upgraded to most recent version 3.6.8

    A number of extensions can cause that problem, you'll need to do a little troubleshooting to find out which extension is causing that to happen for you.
    [http://support.mozilla.com/en-US/kb/troubleshooting+extensions+and+themes]

  • Our family has 1 Apple id. My sons received many itunes gift cards. Can I set up sub-accounts under my id? If I create new ids, will they lose access to the content purchased under wmy id?

    Our family has 1 Apple id with 2 itouches, 1 ipad and 1 iphone.  My sons received several itunes gift cards. Can I set up sub-accounts under my id and deposit their gift cards into them (like a bank account)? If I can't, it seems that I will have to keep track of each of their purchases until they reach the limit of their gift cards, before they go over.  This makes no sense.  If I have to create new ids, will they lose access to all the content purchased under my id?

    - You can't create subaccounts.
    - You can create new account(s). The media on the iPod is still usable. It does create more work when updating apps since yo have to sign into the account that purchased them to update them. If you have apps purchased from more than one account that need update you have to update them one at a time until the remaining apps were purchased with one account.
    - To change accounts for purchasing go to Settings> Store (or Settings.iTunes and App store depending upon the iOS) and sign out and sign in with different account.

  • Hello, the 'Save As' dialog box used to allow the backspace button to go up one level in the directory when the focus is in the folder contents box but it does not work any more, please help.

    Hello, the 'Save As' dialog box used to allow the backspace button to go up one level in the directory when the focus is in the folder contents box but it does not work any more, please help. BTW the same 'Save As' dialog in other applications still allow the backspace button to go up one level in the directory.

    cor-el,
    I kept forgetting and procrastinating about following your instructions, since I have internet access only for limited amounts of time and usually I am busy with important tasks when I am.
    Out of the blue, the problem corrected itself (the Save As box started to open full screen, then shrunk down to a normal size and the edges can now be dragged to a custom size).
    Even the copy and paste problem in the filenaming area seems to have been less troublesome lately even though there have been no updates to Firefox in a few weeks.
    Even though I marked the solution as not helpful, the problem has in fact been resolved. I will save the solution instructions in case the issue returns.

  • Photoshop CS 4 crashes on cooltype.dll and layers dissapear on when clicked on image

    Photoshop CS 4 crashes on cooltype.dll and layers dissapear on when clicked on image as if the photoshop is responding very slowly
    i found that photoshop crashes when opening existing project and crashes in cooltype font, did reinstall and delete preferences file, but found that when photoshop is  open and you click on the type tool then open the project then it opesn fine

    the computer doesnt have suitcase installed but will check the fonts
    also it doesnt switch off the layers when clicked on the eye icon, i have to click somewhere on the image to disable the layer, any solutions? or is that also related to the fonts?

  • Some email images do not show while using the icloud web app.  I can see the images on my IOS devices and in gmail but I only see a small gray box in the icloud web mail app.  Load HTML images is checked in preferences.

    Some email images do not show while using the icloud web app.  I can see the images on my IOS devices and in gmail but I only see a small gray box in the icloud web mail app.  Load HTML images is checked in preferences.  Is there a solution to this issue?

    I've seen the opposite issue.  My wife recieved an email with jpg attachments.  She couldn't see or print them on her iPhone 4S but they showed up fine in iCloud or in the mail app.  I had her forward the email to herself and then they showed up.  I assume there is an issue with how Apple is processing the attachments and resending causes them to get reformatted in a way that makes them easier to handle.
    So yeah.  Seems like some bugs.  Hope Apple fixes them soon.

Maybe you are looking for

  • I want to purchase music but I cant get past the itunes 10 upgrade screen

    I want to purchase music on i tunes but everytime I try i get the upgrade to itunes 10 screen. I dont want itunes 10 i like my old version

  • Can a output from one location and pass it as the input of another location

    I encount a challenging mapping, which invloves many "cross dimensional mappings" and "logic account". For maintenance purpose, it is better to converse the data souce twice instead of writing line by line scripts in maploader. Can I take the validat

  • ORA-01410: invalid ROWID, when procedure is executed

    Hi, I am using Oracle 10g 10.2.0.3 on linux 64 bit I am getting following error ORA-12012: error on auto execute of job 17069 ORA-01410: invalid ROWID ORA-06512: at "t1.DR1", line 12 ORA-06512: at line 1 t1 is the schema and DR1 is the procedure run

  • BT Mail !!!!!!!

    Hi,      Since being "CHANGED" to BT Mail I am having nothing but grief with the new set up. When sending an email I constantly get the message "Error occured when sending mail". When saving or trying to save an email that has the previous message di

  • Having MAJOR difficulties displaying X11 applications remotely

    I've been reading on various forums and through searches on the web for a solution to "locally" displaying "remote" X11 applications. There have been numerous number of posts that I've read through and tried my darnedest to get this working, but have