Image as editable region?

Hi,
I have an image in Dreamweaver CS4 and I want to put text over it. I tried to make it an editable region, but all it does is it deletes my image. What can I do?
Thanks.

Welcome to the Dreamweaver Forum!
Put your image in the background of a div and then the surface is available to take your text.
div#divname {
     background-image: url(...path to your image here...);
     repeat: none;
     width: ...make the width of the image...
     height: ... make the height of the image ...
in use:
<div id="divname">Put and style your text for the div here</div>
Technically speaking, this is not an "editable region," which is a term used in Templates, but the contents of the div may be made an editable region in a Template, and the text within it will remain editable in child pages.
If you want to do that, be sure to select only the contents of the div when you make your editable region...do not select the div tags.
Beth

Similar Messages

Help with Editable Regions and Image Swap

I need some assistance for a project I am working on, and I don't know a short way to describe. Hang with me, here it goes....
I am working with the sites 'Navigation' links. I want to use a MouseOver behavior so that the image swaps when moused over. I want the MousedOver image to remain when you are on that page. I can manually make this happen, but I am running into difficulty because I want the Navigation to be located in an un-editable region so when I add new pages, the entire site will update as I make changes to the template.
I don't know how to create this effect without manually swapping all the images via behaviors on each and every page, and when I need to do these edits, the region needs to be in an UnEditable region so that the template will update all the pages.
I guess the question is, how can I customize images from page to page in an Un-Editable region in a Template driven page?
Thanks.

Image swaps are clumsy for navigation because you have to re-craft your menus every time you edit your site. This gets very old in a hurry.
CSS styled menus are not only easier to maintain in DW they are web friendly for all devices -- especially Smartphones who may have images disabled to save on bandwidth charges.
DW comes with Spry Menus which you can customize with CSS
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
Additionally, there are some excellent DW extensions you can use to build professional looking CSS menus in seconds.
http://www.projectseven.com/products/menusystems/pmm2/index.htm
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Please Help Nested Editable Region Image & Spry

Please Help Me.
New to Dreamweaver. I've been given a "grandchild" nested temple with only one editable region to alter. I've read and Googled since Saturday. My brain actually hurts.
Goal
- Insert my background image into region
- Add Spry accordion to mid left
- Add Spry collapsible to bottom right
How can 3 things be so hard? Please, can someone walk me through this? Thank you

I've been given a "grandchild" nested template with only one editable region to alter.
Nested templates. Aaaaaak! There's no advantage in nested templates, ever. They're so problematic it makes my head hurt just thinking about them.
If you have the parent and grandparent template.dwt files to work with, you'll need to insert Editable Regions to hold your scripts and other supporting widget code.
If you don't have those files and you can't edit the <head>, you can't insert widgets into Template child or grandchild pages. You'll need to detach the page from Templates.
Nancy O.

Add a Background-Image to an Editable Region

I would like to add a background image at the bottom of this page (www.theram.com/drink_specials.html). The 'body' editable region is where I would like to add it but I am not sure how to...could you help me out? I don't want this image to show up on all template pages, just this page.
I added this code in the head section for only this page but obviously it is not correct because I don't see the image.
<style type="text/css">
<!--
body {
          background-image:url(/images/backgroundStoli_web.jpg);
          background-repeat: no-repeat;
          background-position: bottom;
</style>
Thanks for your help!!

npolen wrote:
I'm sorry, I don't think I was very clear on where I wanted this...I would like it to be in the white part of 'body' editable region that has the drink pictures and descriptions in it. How do I add a background image to that part of the page? Thanks!
In that case add an 'id' to the <th> cell that the drinks table is inserted into (see below - id="bg_1")
<th width="675" id="bg_1" align="left" valign="top" bgcolor="#FFFFFF" scope="col">
Then amend your 'body' css selector to #bg_1 (as below)
#bg_1 {
    background-image:url(/images/backgroundStoli_web.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
I don't know if /images requires a leading slash infront of it. If the background image does not show up get rid of the leading slash /
Not sure why youre using a <th></th> table cell to insert the drinks table into. A <th></th> tag is a table header tag.......you should really be using a <td></td> tag.

After inserting editable regions, DW CS3 tells me none exist...?

I am having muliple problems with templates on this particular project, that I have never seen before. I was going to break them into multiple
questions, per the instructions here at the forum, but all of these relate to the same template code, which I will post below, so I think it would be
more efficient to include the related questions in this thread.
Background
I created this template by first scraping the client's existing site, which is a dynamic CMS site, with HTTrack. Secondly, I opened the HTML file generated by that processs, and saved it as a template in my DW project, which automatically assigned it to the "Templates" folder, and is accessable via the "Assets" panel (usual stuff.)
The reason for starting with a scraped version of existing is that this project involves moving the site off of the CMS platform and into HTML/CMS, yet preserving essentially the same design.
1. The most obvious problem I have is that in the subject line: after adding a couple of editable regions to my template,
when I save/preview, an error message comes up saying "your template has no editable regions, do you want to proceed?"
2. In doing the save as template operation, I am prompted with "Update links?" and I do. When I open the template, all looks good in DW, however as soon as I do a preview, I get a completely raw html page with NO css styling, no images, no fonts, etc. Conversely, if I do the same step, yet choose not to update links when prompted, then I get a template that looks completely bare in DW (no styling, no images, etc.) yet looks fine when previewed...?
Additionally, one other thing I tried was doing the save as template, choosing not to update links, and then moving it out of the templates folder into the main project folder - Here, it both looks fine in DW, and previews, yet I am unable to use it as a template (does not appear in assets, cannot use "create new from" or "apply", etc.)
I have also tried changing from "site root" to "document" in terms of linking, yet nothing has worked. Every time I have created a template on other projects, all has just worked fine from the start, so I am really stumped here.
The project will have too many pages to not use a template for updates, so I am hopeful that I can figure out what is causing this. Following is my template 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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Home | Records Management Center</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<base href="http://records-storage.biz/RMCAugusta/">
<meta name="robots" content="all" />
<meta name="description" content="records management center augusta's choice for data storage, records management, document shredding.">
<meta name="keywords" content="augusta, data, storage, records, management, document, shredding, center">

<link rel="stylesheet" type="text/css" href="../include/scripts/css/screen.css" />


<script language="JavaScript">

</script>
<script type="text/javascript" src="../include/scripts/jquery/jquery1.2.6.js"></script>
<link rel="stylesheet" type="text/css" href="../include/scripts/superfish/superfish.css" media="screen">
<script type="text/javascript" src="../include/scripts/superfish/superfish.js"></script>
<script type="text/javascript" src="../include/scripts/superfish/hoverIntent.js"></script>
<script type="text/javascript" src="../include/scripts/jquery/site.js"></script>
<script language="Javascript" src="../include/scripts/rotate.js"></script>
<link href="/RMCAugusta/common/wsaglobal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<h1>
<a class="logo" href="../index.html" title="Home Page">
<img src="../images/RMC-logo.gif" alt="Home Page" /></a>
</h1>
<div id="supernav">
<a href="../index.html" title="Go Home">Home</a> |
<a href="#" title="FAQ">FAQ</a> |
<a href="../common/feedback_footerc73a.html?PAGE=355" title="Contact RMC">Contact Us</a> |
<a href="../common/contentff2a.html?PAGE=353" title="Client Login">Login</a> |
</div>
<div id="searchsite">
<form action="http://www.recordsmanagementcenter.com/common/textsearch-std.asp?PAGE=375" method="post" id="Search" title="Search">
<input type="text" name="i_search" class="searchbox" value="Search Site..."
onfocus="if (this.value == 'Search Site...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Search Site...';}" />
<input type="submit" class="submit" alt="Submit" value="Search" />
</form>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div id="topnav">
<ul id="menu" class="sf-menu">
     <li><a href="file:///C|/Documents and Settings/sunni/My Documents/1-DelSurSEO/FlourishPress/common/contentd618.html?PAGE=350">About RMC</a>
       <ul >
        <li><a href="file:///C|/Documents and Settings/sunni/My Documents/1-DelSurSEO/FlourishPress/common/content9a68.html?PAGE=356">Customer Bill of Rights</a></li>
          <li><a href="file:///C|/Documents and Settings/sunni/My Documents/1-DelSurSEO/FlourishPress/common/content0864.html?PAGE=369">My Three Point Pledge</a></li>
          <li><a href="file:///C|/Documents and Settings/sunni/My Documents/1-DelSurSEO/FlourishPress/common/content1f72.html?PAGE=363">Testimonials</a></li>
          <li><a href="file:///C|/Documents and Settings/sunni/My Documents/1-DelSurSEO/FlourishPress/common/content3fb4.html?PAGE=364">Our Facility</a></li>
        <li><a href="#">Newsletter</a></li>
        <li><a href="#">Special Offer</a></li>
     </ul>
</li>
     <li><a href="#">Records Managment</a>
      <ul>
      <li><a href="#">Records Storage</a></li>
      <li><a href="#">File Storage</a></li>
      <li><a href="#">File Indexing</a></li>
      <li><a href="#">Storage & Delivery Process</a></li>
      <li><a href="#">Barcode Tracking </a></li>
      <li><a href="#">File Restoration</a></li>
      <li><a href="#">Dedicated Vault Storage</a></li>
      <li><a href="#">Supplies</a></li>
     </ul>
</li>
     <li><a href="#">Document Imaging Solutions</a>
      <ul >
       <li><a href="#">Service Bureau</a></li>
       <li><a href="#">Scan On Demand</a></li>
       <li><a href="#">Data Silo</a></li>
      </ul>
    </li>
    <li><a href="#">Shredding & Destruction</a>
     <ul >
       <li><a href="#">Shredding Process</a></li>
       <li><a href="#">Drop Off Shred</a></li>
       <li><a href="#">One Time Purges</a></li>
       <li><a href="#">Media Destruction</a></li>
       <li><a href="#">Collection Containers</a></li>
      </ul>
   </li>
    <li><a href="#">Data Backup</a>
     <ul >
       <li><a href="#">Tape Vaulting</a></li>
       <li><a href="#">Electronic Vaulting</a></li>
      </ul>
   </li>
   <li><a href="#">Info Management 101</a>
     <ul >
       <li><a href="#">Special Info Kit</a></li>
       <li><a href="#">Storage Options</a></li>
       <li><a href="#">How To Choose</a></li>
       <li><a href="#">Storage Tips</a></li>
       <li><a href="#">Retention Guide</a></li>
      </ul>
   </li>
   </ul>
    <div class="clear"></div>
</div>
<div id="slideshow">
<script language="JavaScript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 632, 258, 0, 4000, 0)
</script>
</div>
<div id="page">
<div class="tophome">
<div class="bot">
<div id="contenthome">
<table border="0" cellpadding="0" cellspacing="5" width="100%">
     <tr>
          <td valign="top">
               <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                         <td valign="top" width="">

<a name="1"></a>

<h1>Welcome to <b>Records Management Center</b></h1>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" align="Left" class="text">We know you have many options when it comes to storing your organization's records and information. You may choose to store them on-site in your own storeroom, in a mini-storage (self storage) unit, with a moving and storage company or with a full-service records management company like Records Management Center. There are, however, major differences not only in the storage options available, but in the companies that provide them as well. Please take some time to review our website and familiarize yourself with your records management options, so that you can make the choice that's right for your organization.</td>
</tr></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" align="Left" class="h2">About Us</td>
</tr></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td valign="top" align="Left" class="text">Records Management Center was established in 1985 as a full-service records management company providing document storage, digital imaging, media storage and shredding services to the Central Savannah River Area.<br />
<br />
We protect businesses and their customers by securing their confidential information and helping them comply with HIPAA, GLB and FACTA, as well as all state and federal information management and destruction laws.</td>
</tr></table>

                         </td>
                    </tr>
               </table>          </td>
     </tr>
</table>
</div>
<div class="clear"></div>
<div id="specials">
<div class="top">
<div class="quote">
<a href="../common/feedback_footerc73a.html?PAGE=355" title="Get A Quote"> </a></div>
<div class="info">
<a href="../common/content371a.html?PAGE=373" title="Free Information Kit"> </a></div>
<div class="days">
<a href="../common/content371a.html?PAGE=373" title="30 Days of Free Shredding"> </a></div>
<div id="newsletter">
<h3>Sign up for our<br /><span class="caps">Free Newsletter</span></h3>
<form action="http://www.recordsmanagementcenter.com/common/feedback_footer.asp?PAGE=374" method="post" id="Search" title="Sign Up">
<input type="text" name="input_2" class="searchbox" value="Email Address"
onfocus="if (this.value == 'Email Address') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Email Address';}" />
<input name="Sign up" type="submit" class="submit" alt="Sign Up" value="Sign Up" />
</form>
<div class="clear"></div>
</div>
</div>
<div class="bot"> </div>
</div>
<div id="boxes">
<div class="records">
<a href="../common/content5697.html?PAGE=331" title="Records Management"> </a></div>
<div class="imaging">
<a href="../common/content9e28.html?PAGE=61" title="Digital Imaging"> </a></div>
<div class="storage">
<a href="../common/content7f9f.html?PAGE=333" title="Computer Media Storage"> </a></div>
<div class="shredding">
<a href="../common/content1cd1.html?PAGE=296" title="Secure Shredding"> </a></div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="links">
<a href="#">Terms and Conditions</a> |
<a href="#">Privacy</a></div>
<div id="copyright">
© 2009 Records Management Center.<br />
A Division of RBW Logistics Corporation<br />
Powered by <a href="http://www.powerserve.net/">PowerServe</a><br />
<a href="http://www.rbwlogistics.com/"><img src="../images/logo-footer.gif" /></a>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript" src="/NoIEActivate.js"></script><script src="file:///C|/Documents and Settings/sunni/My Documents/1-DelSurSEO/FlourishPress/www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-159577-28";
urchinTracker();
</script>

</body>

</html>

There are (or can be), of course, editable regions in the head of a document. Typically, around the <title></title> you will find 'space' to put links etc, and meta tags:

<title> Your title here </title>
<meta name="description" content="Description here." />
<meta name="keywords" content="keywords here " />
<meta name="robots" content="index,follow" />

Further down in this same document, I find:

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

</style>
<script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>

showing a stylesheet link and an embedded style.
So it's not so much that you can't have editable areas in the head of the document, it's more that you can't overlap or improperly nest ANYTHING.
You can also (am I repeating myself?) make a tag's attributes editable. I use that feature most notably for applying different IDs to <body> tags for different neighborhoods in my sites. By applying different body IDs, I can control more specifically elements on those pages. But that's a conversation for another time!
Best,
Beth

Dreamweaver does not allow me to edit the editable region

Oh my, I'm so desperate in this, I have a .dwt and have set up the editable region as well. When I want to make a new html file from the said template dreamweaver does not allow me to edit it. I mean, all the code is completely grayed out as if the template itself is locked by default.
What I want to do is to create several new pages such as new albums, charts, genres, contacts (which all based on the home template) The home template itself has slider in its body. For the new html files I'm about to create (which I'm so desperate why I can't do so) I want the header and footer to remain the same.
Here is an image of my index.dwt (my homepage) anything inside the red frame is what I want to edit for new albums, charts, genres, contacts, login page, etc. The top part is the header and the bottom one is the footer (Excuse the right image, I'm working on dual screen)
Any help will be appreciated!
Sorry for my english

Hello SeptianNugraha,
here some hints concerning while handling templates (I quote):
The main principle of DW Templates is:
Non-editable regions = propagate to all child pages. The content of non-edtable regions is identical on all child pages. When you edit a non-editable region, DW propagates all changes to all child pages.
Editable regions = do not propagate because they're unique to every child page. The whole idea of editable regions is that they contain page specific content which does not appear on any other child page.
And:
PART 1
1. Create a prototype page with all the sitewide elements (common header, footer, sidebar, etc..) that you will need for your entire project. This requires some careful pre-planning even for small web sites.
2. Validate your code & test this prototype page in all major browsers. 3. When you're completely satisfied with your layout, SaveAs Template. DW will save this as a .dwt file in a site folder called Templates.
4. DW will ask you to add Editable Regions for stuff that will change from page to page. Do this and SAVE.
5. Close your Template.dwt file.
PART 2
1. File > New Page > from Template. Select the template you wish to use. Hit OK.
2. This is a child page. You can only edit content within editable regions. Everything else is locked.
3. SaveAs index.html (your home page) to the root in your local site folder.
PART 3
Repeat PART 2 for each additional page required.
PART 4
1. Open your main TEMPLATE file and add a navigation menu with links to your site pages.2. SAVE.3. DW will ask if you want to populate changes to child pages. Hit yes.
4. Publish all site pages to your server.
PART 5
If you should ever need to edit your TEMPLATE .dwt file, Repeat PART 4.
Good luck!
Hans-Günter

Why does this happen when I insert editable region?

Hi ppl... I got a small problem here. When I insert editing region into the ORANGEBOX div, for some unknown reason which I can't figure out, my spry menu bar shifts to the left. But in preview, it looks fine. What's the reason for this and how can I avoid it? The shifted spry menu bar in the workspace is disturbing me.. haha.. I have attached screenshots of the 2 states below (Before inserting editable region and after inserting editable region)
Before inserting editable region into the ORANGE BOX
After inserting editable region into the ORANGEBOX
Here's the code BEFORE inserting editable region.. If you are free, do try to insert an editable region into the ORANGEBOX, and kindly tell me why it's happening! =) Thanks!
<!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" />

<title>Untitled Document</title>

<style type="text/css">

</style>


<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigationlinks">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a>      </li>
      <li><a href="#">Audio Lectures</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Video Lectures</a>
        <ul>
          <li><a href="aqeedah1.htm">Aqeedah</a></li>
          <li><a href="fundamentals1.shtml">Tawheed</a></li>
<li><a href="#">Friday Bayans</a></li>
<li><a href="#">Other Topics</a></li>
        </ul>
      </li>
      <li><a href="#">Books</a></li>
    </ul>
</div>
<div id="mainContent">
    <p> </p>
    <p>mainContent</p>
    <p> </p>
    <div id="orangebox">
      <p>ORANGE BOX    </p>
      <p> </p>
    </div>
<p> </p>
    <p>mainContent</p>
    <p> </p>
    <p> </p>
</div>
<div id="footer">
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p>FOOTER </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<p> </p>
<p> </p>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Here's the SpryMenuBarHorizontal.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 9em;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 9em;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 9em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding-top: 1.1em;
    padding-right: 0.75em;
    padding-bottom: 1.1em;
    padding-left: 0.75em;
    text-align: center;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;

Template_Can't edit in editable region

I created a template but an unable to edit in the editable region. Does anyone know why? Here is the code for the parent pasted below and I will paste the code for the child on another post.   Here is what it looks like in Dreamweaver:
Here is the error message that I'm getting for the child:
Can someone please help?
<!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" />

<title>Inland Empire Waterkeeper</title>

<link href="../_css/styles.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    color: #333333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
body {
    background-color: #FFFFFF;
    color: #D6D6D6;
    background-image: url(../_images/background_teal.png);
    background-repeat: repeat-x;
    margin: auto;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
h1 {
    font-size: 28px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h2 {
    font-size: 22px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h3 {
    font-size: 20px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h4 {
    font-size: 18px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h5 {
    font-size: 16px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h6 {
    font-size: 14px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
p {
    margin-top: 0;
    margin-bottom: 0;
    text-align: justify;
</style>


</head>
<body>
<div class="container">
<div class="header"><img src="../_images/banner.jpg" width="933" height="300" /></div>
<div class="menubar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu">About Us</a>
        <ul>
          <li><a href="../organization.html" class="MenuBarItemSubmenu">Our Org.</a>
            <ul>
              <li><a href="../mission.html">Our Mission</a></li>
              <li><a href="../history.html">Our History</a></li>
              <li><a href="../community.html">Our Community</a></li>
            </ul>
          </li>
          <li><a href="../team.html" class="MenuBarItemSubmenu">Our Team</a>
            <ul>
              <li><a href="../staff.html">Staff</a></li>
              <li><a href="../supporters.html">Supporters</a></li>
              <li><a href="../advisoryboard.html">Advisory Board</a></li>
            </ul>
          </li>
          <li><a href="../coastkeeper.html">Coastkeeper</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">What We Do</a>
        <ul>
          <li><a href="../programs.html" class="MenuBarItemSubmenu">Programs</a>
            <ul>
              <li><a href="../advocacy.html">Advocacy</a></li>
              <li><a href="../education.html">Education</a></li>
              <li><a href="../research.html">Research</a></li>
              <li><a href="../restoration.html">Restoration</a></li>
              <li><a href="../enforcement.html">Enforcement</a></li>
            </ul>
          </li>
          <li><a href="../prokects.html">Projects</a></li>
          <li><a href="../datareports.html">Data & Reports</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>
        <ul>
          <li><a href="../volunteer.html">Volunteer</a></li>
          <li><a href="../employment.html">Employment</a></li>
          <li><a href="../events.html">Events & Meetings</a></li>
          <li><a href="../donate.html">Donate</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">News Room</a>
        <ul>
          <li><a href="../pressrelease.html">In the News and Press Releases</a></li>
          <li><a href="../legislation.html">Legislative Updates</a></li>
          <li><a href="../waternews.html">Water in the News</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Resources</a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Information</a>
            <ul>
              <li><a href="../watershed.html">Our Watershed</a></li>
              <li><a href="../reportpollution.html">Report Pollution</a></li>
            </ul>
          </li>
          <li><a href="../photos.html">Photo Gallery</a></li>
        </ul>
      </li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>
<div class="body">
    <div class="emptyspacecontent">
    <h4><strong style="text-align: justify;">Content<br />
    </strong></h4>
</div>
      <div class="emptyspace4">space</div>
</div>
<div class="footer"><img src="../_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Here is the code for the child:
<!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" />

<title>Inland Empire Waterkeeper</title>

<link href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/_css/styles.css" rel="stylesheet" type="text/css" />
<script src="file:///C|/Users/Mondays/Desktop/iewaterkeeper/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/SpryAssets/SpryMenuBarHorizontal.css " rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    color: #333333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
body {
    background-color: #FFFFFF;
    color: #D6D6D6;
    background-image: url(file:///C|/Users/Mondays/Desktop/iewaterkeeper/_images/background_teal.png);
    background-repeat: repeat-x;
    margin: auto;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
h1 {
    font-size: 28px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h2 {
    font-size: 22px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h3 {
    font-size: 20px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h4 {
    font-size: 18px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h5 {
    font-size: 16px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
h6 {
    font-size: 14px;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
p {
    margin-top: 0;
    margin-bottom: 0;
    text-align: justify;
</style>


</head>
<body>
<div class="container">
<div class="header"><img src="file:///C|/Users/Mondays/Desktop/iewaterkeeper/_images/banner.jpg" width="933" height="300" /></div>
<div class="menubar">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#" class="MenuBarItemSubmenu">About Us</a>
        <ul>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/organization.html" class="MenuBarItemSubmenu">Our Org.</a>
            <ul>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/mission.html">Our Mission</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/history.html">Our History</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/community.html">Our Community</a></li>
            </ul>
          </li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/team.html" class="MenuBarItemSubmenu">Our Team</a>
            <ul>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/staff.html">Staff</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/supporters.html">Supporters</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/advisoryboard.html">Advisory Board</a></li>
            </ul>
          </li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/coastkeeper.html">Coastkeeper</a></l i>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">What We Do</a>
        <ul>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/programs.html" class="MenuBarItemSubmenu">Programs</a>
            <ul>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/advocacy.html">Advocacy</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/education.html">Education</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/research.html">Research</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/restoration.html">Restoration</a></l i>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/enforcement.html">Enforcement</a></l i>
            </ul>
          </li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/prokects.html">Projects</a></li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/datareports.html">Data & Reports</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>
        <ul>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/volunteer.html">Volunteer</a></li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/employment.html">Employment</a></li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/events.html">Events & Meetings</a></li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/donate.html">Donate</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">News Room</a>
        <ul>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/pressrelease.html">In the News and Press Releases</a></li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/legislation.html">Legislative Updates</a></li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/waternews.html">Water in the News</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Resources</a>
        <ul>
          <li><a href="#" class="MenuBarItemSubmenu">Information</a>
            <ul>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/watershed.html">Our Watershed</a></li>
              <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/reportpollution.html">Report Pollution</a></li>
            </ul>
          </li>
          <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/photos.html">Photo Gallery</a></li>
        </ul>
      </li>
      <li><a href="file:///C|/Users/Mondays/Desktop/iewaterkeeper/contact.html">Contact Us</a></li>
    </ul>
</div>
<div class="body">
    <div class="emptyspacecontent">
    <h4><strong style="text-align: justify;">Content<br />
    </strong></h4>
</div>
      <div class="emptyspace4">space</div>
</div>
<div class="footer"><img src="file:///C|/Users/Mondays/Desktop/iewaterkeeper/_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Modifying a template resulted in all child pages with repeating editable regions - Help !

Good morning,
I have recently been appointed to update a website designed in Dreamweaver by an employee who is no longer here. I have read books on the software and practiced an insane amount which permitted me to update child pages, links, documents etc... however:
I was asked to add a new button to an "non-editable" region of a template. Trying to do so resulted in a massive mess (with massive anxiety).
Even thou the new template had all the same text and editable regions, all my pages look completely different from the template itself. The editable regions appears 2-3 times in different locations ex: Header is showed on the bottom, top etc... and the Editable region titles (EditableRegion1 etc...) repeat themselves as well.
I really need help and not sure what to do, I have tried everything and I am only making it worse and worse. All I want/need is for all my html pages created with this template, match the template.
Please note that this site is local, not online.
Since I noticed on other threads that the code is needed; here it is:
<!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" />
<title>QMS: AFM</title>
<style type="text/css">

</style>
<link href="file:///U|/AFM/Dreamweaver/Left sidebar.css" rel="stylesheet" type="text/css" />
</head>
<body link="#006699" class="twoColElsLtHdr">
<div id="container">
<div id="header">
    <h1><img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/pwgsc-e.gif" width="364" height="33" align="left" alt="wordmark" /><img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/wordmark_canada.gif" width="83" height="21" align="right" alt="wordmark2" /></h1>
    <p> </p>
    <p><img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/AFM QMS banner.jpg" width="709" height="80" alt="banner" border="0"/><a href="mailto:[email protected]"><img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/Contactus-e.JPG" width="110" height="21" alt="contactus-e" border="0" /></a><img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/French-e.JPG" width="115" height="21" alt="french-e" border="0" /> <a href="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Continual Improvement/QMSTeamMembers-e.html"><img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/Help-e.JPG" width="115" height="21" alt="help-e" border="0" /> <img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/Search-e.JPG" width="115" height="21" alt="search-e" border="0" /></a><a href="http://source.tpsgc-pwgsc.gc.ca"><img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/thesource.jpg" width="120" height="21" alt="TheSource" border="0" /> <img src="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/Graphics/menubar/Home-e.jpg" width="104" height="21" alt="home-e" border="0" /></a></p>
    <p> </p>
</div>
<div class="twoColElsLtHdr" id="sidebar1">
    <p><a href="../QMS HOME/QMSHome-e.html"><strong>QMS Home</strong></a></p>
    <hr />
    <p><a href="../ABOUTAFM/AboutAFM-e.html"><strong>About AFM</strong></a></p>
<hr />
<p><a href="../AdminProcedures/AdminProcedure-e.html"><strong>Administrative Procedures</strong></a></p>
<hr />
<p><a href="../BusinessUnits/BusinessUnits-e.html"><strong>Business Units</strong></a></p>
<hr />
<p><a href="../POINTSOFINTEREST/pointsofinterest-e.html"><strong>Points Of Interest</strong></a></p>
<hr />
<p><a href="../Achievements/Achievements-e.html"><strong>Achievements</strong></a></p>
<hr />
<p><strong><a href="../MeasuringPerformance/measuringperformance-e.html">Measuring Performance</a></strong></p>
<hr />
<p><a href="../References/references-e.html"><strong>References</strong></a></p>
<hr />
<p><a href="file:///P|/RPS/AFMS/Quality Management System/QMS Site/HTML/ContinualImprovement-e.html"><strong>Continual Improvement</strong> </a></p>
</div>
<div id="mainContent">
    <h2>Header</h2>
    <p>Paragraph</p>
    <h1>Sub Header </h1>
    <p> </p>
    <h1> </h1>
    <h2> </h2>
    <h1> </h1>
    <p> </p>
    <h2> </h2>
    
</div>

       <br class="clearfloat" />
</p>
<div id="footer">
    <hr width="100%" size="8" noshade="noshade" color="#006666" id="color="069"" colour="#069"/>
    <p><strong>Maintainted by: ASQM </strong></p>
    <p><strong>Date Modified: 2013-03-25</strong></p>
    
</div>
<script type="text/javascript">

</script>
</h3>
    
</h3>
</div>
<script type="text/javascript">

</script>
</body>
</html>

I am not suprised, the previous employee tried to recreate the English version of the site in another folder structure and did not change all links and was still using a template in the wrong location.
I think I created the mess by trying to modify the existing template's non-editable region in order to add a new button. When trying to update all the pages, the fiasco started.
Do you think the best option would be to create a new template in the correct folder structure and apply it? Would it fix the current pages or will I have to fix them all manualy on by one?
I understand it is difficult to deal with a newbie of my magnitude and thanks again.

How to insert a widget in a editable region from a template

Hi there,
ok so basically I am trying to create a HTML page from a template i have already designed.
when I try to insert a widget (Lightbox Gallery) in the editable region I get the following error.
"the widget requires code that must be inserted into the head of the document. insertion cannot happen because this document is read only"
I saw a previous thread (http://forums.adobe.com/thread/901299) that had the same problem with a solution but cant seem to make sense of it.
Not exactly sure where and what to paste in the header of the HTML page.
Any help will be much appreciated.
Thanks

Hi Murray,
ha funny you would say that is the exact answer you would give me seeing you posted it
I understand the logic behind it though not sure what i need to copy and where.
Basically i craeted a "dummy page" and inserted the widget-no problem there.
next step- what code do i copy from the dummy page and where do i paste it? in the template or HTML page.
Dummy HTML with widget 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" />
<title>Untitled Document</title>
<script src="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/scripts/jquery.js" type="text/javascript"></script>
<script src="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/scripts/lightbox.js" type="text/javascript"></script>
<link href="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/Ashley/AppData/Roaming/Adobe/Dreamweaver CS5/en_US/Configuration/Temp/Assets/eamA1E8.tmp/css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
                    .lbGallery {
                              /*gallery container settings*/
                              background-color: #CCC;
                              padding-left: 20px;
                              padding-top: 20px;
                              padding-right: 20px;
                              padding-bottom: 20px;
                              width: 540px;
                              height: auto;
                              text-align:left;
                    .lbGallery ul { list-style: none; margin:0;padding:0; }
                    .lbGallery ul li { display: inline;margin:0;padding:0; }
                    .lbGallery ul li a{text-decoration:none;}
                    .lbGallery ul li a img {
                              /*border color, width and margin for the images*/
                              border-color: #3e3e3e;
                              border-left-width: 10px;
                              border-top-width: 10px;
                              border-right-width: 10px;
                              border-bottom-width: 20px;
                              margin-left:5px;
                              margin-right:5px;
                              margin-top:5px;
                              margin-bottom:5px:
                    .lbGallery ul li a:hover img {
                              /*background color on hover*/
                              border-color: #ffffff;
                              border-left-width: 10px;
                              border-top-width: 10px;
                              border-right-width: 10px;
                              border-bottom-width: 20px;
                    #lightbox-container-image-box {
                              border-top: 0px none #ffffff;
                              border-right: 0px none #ffffff;
                              border-bottom: 0px none #ffffff;
                              border-left: 0px none #ffffff;
                    #lightbox-container-image-data-box {
                              border-top: 0px;
                              border-right: 0px none #ffffff;
                              border-bottom: 0px none #ffffff;
                              border-left: 0px none #ffffff;
/* EndOAWidget_Instance_2127022 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div id="gallery" class="lbGallery">
<ul>
    <li> <a href="/images/lightboxdemo1.jpg" title=""><img src="/images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a> </li>
    <li> <a href="/images/lightboxdemo2.jpg" title=""><img src="/images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a> </li>
    <li> <a href="/images/lightboxdemo3.jpg" title=""><img src="/images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a> </li>
    <li> <a href="/images/lightboxdemo4.jpg" title=""><img src="/images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a> </li>
    <li> <a href="/images/lightboxdemo5.jpg" title=""><img src="/images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /></a> </li>
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
                    $(function(){
                              $('#gallery a').lightBox({
                                        imageLoading:                              '/images/lightbox/lightbox-ico-loading.gif',                    // (string) Path and the name of the loading icon
                                        imageBtnPrev:                              '/images/lightbox/lightbox-btn-prev.gif',                              // (string) Path and the name of the prev button image
                                        imageBtnNext:                              '/images/lightbox/lightbox-btn-next.gif',                              // (string) Path and the name of the next button image
                                        imageBtnClose:                              '/images/lightbox/lightbox-btn-close.gif',                    // (string) Path and the name of the close btn
                                        imageBlank:                                        '/images/lightbox/lightbox-blank.gif',                              // (string) Path and the name of a blank image (one pixel)
                                        fixedNavigation:                    false,                    // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
                                        containerResizeSpeed:          400,                               // Specify the resize duration of container image. These number are miliseconds. 400 is default.
                                        overlayBgColor:                     "#999999",                    // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
                                        overlayOpacity:                              .6,                    // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
                                        txtImage:                                        'Image',                                        //Default text of image
                                        txtOf:                                                  'of'
// EndOAWidget_Instance_2127022
</script>
</body>
</html>
thanks again

Adding text to editable region creates space in the rest of my layout

I created my layout in PS, sliced the images and then imported to DW (html and images).
Layout looks great.
I created editable regions in the template I created from the .html
One I start inserting text into these regions, my container moves and it throws the rest of the layout off by adding space between the editable region and the area above it (a big black line horizontally through the page).
Is there a way to keep the container/editable region from moving or growing with the text so that it doesn't change my layout?
On a side note, this change doesn't appear in live view. When I preview in browser, Safari layout looks great, but text doesn't appear. In firefox, text appears, but layout is a mess.
Here is the code from the editable region to which I am trying to add text:

        <div id="site_layout_contentmain">Content for id "site_layout_contentmain" Goes Here</div>
      </td>
ANY help is GREATLY appreciated!!!!!

MHarvey2001 wrote:
Yes, the design is appearing to pull apart when I add content, but only in the Firefox preview.
If it pulls apart in Firefox, chances are it pulls apart in all browsers when text size is increased.
The problem with Photoshop code is that it is a) rigid, b) unstable and c) invalid.
To illustrate, run your code through the on-line validation tools below.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Photoshop is OK for designing quick comps to show the client but they won't hold up on a real site.
IMO, the benefits of starting over far outweigh the inconvenience.
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/

Cannot add layers/tables to an editable region

I created a template the other day, and then created pages
from that template. The main editable region which was meant to be
for all my info, pictures, wont let me add layers or tables to
position my text/images.... Have I missed something here?
\Robert

Yes, there would be no restriction on what you can place in
that editable
region. But I don't like the way you have started with this
page. Layers
should not be used as a primary layout methodology....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"the full monty" <[email protected]> wrote
in message
news:epqp0m$lrc$[email protected]..
> This is the code: The whole of the layer region should
be editable... ie.
> be
> able to add layers/tables to position text?
>
> <!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=iso-8859-1" />
> 
> <title>Untitled Document</title>
> 
> 
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div id="Layer1"> </div>
> </body>
> </html>
>
> \Robert
>

Copying html contents to editable region

hi all,
is there an easy way to convert simple html files (with some text and images, nothing fancy) to editable regions of a template? I have one template with only one editable region and I want to apply this template to all files in that folder.
many thanks
alper

Create a new page from Template (child page).
In code view, copy and paste just the relevant markup from HTML file to Editable Region of child page.
Save As some-filename.html
Repeat with other files.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Can't click inside editable region in template based HTML document in CS5

Hi Everyone,
I m having a strange problem in Dreamweaver Cs5. After making the html page based on template, when i am opening the HTML page to edit content in editable region, I couldnot click inside the editable region. I can make changes in code view but not in design view in Dreamweaver Cs5.
Please help if anyone knows the solution. It is really creating a mess for me.
Thanks,
Komal

One of the sites is www.ShelbyVideo.com.
The code for one of the pages is:
<!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" />

<meta name="description" content="SHELBY VIDEO SERVICES: Shelby, NC Video services that are inexpensive, professional, and thorough! Offering corporate and wedding video production services in and around Shelby North Carolina and South Carolina." />
<meta name="keywords" content="shelby video, shelby videographer, shelby videography, shelby nc video, north carolina shelby video, shelby video camera, shelby videos, north carolina videos, nc video, shelbyvideo, shelbyvideo.com, shelby video production, shelby video services, cleveland county video, cleveland county wedding video" />
<title>Shelby Video Production Services: SheblyVideo.com offering videography services in the Carolinas.</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="projection,screen" />


</head>
<body class="body">
<div id="wrapper">
<div id="header">
    <p><a href="http://www.shelbyvideo.com"><img src="images/shelby-video-logo.jpg" alt="Shelby Video Services" name="weddingVideo" width="216" height="77" border="0" id="weddingVideo" /></a></p>
    <p><a href="index.html">HOME</a>   <a href="shelby-nc-video-services.html">SHELBY VIDEOS</a>   <a href="shelby-video-demos.html">DEMOS</a>   <a href="shelby-video-prices.html">PRICES</a>   <a href="shelby-video-faqs.html">FAQ'S</a>   <a href="shelby-video-north-carolina-reviews-testimonials.html">TESTIMONIES</a>   <a href="shelby-video.html">BOOK US</a></p>
</div>
<div id="mainContent"><br />
    <h1>ShelbyVideo.com</h1>
    <div id="carolinaWeddingVideoDiv">
      <object width="300" height="182">
          <param name="movie" value="http://www.youtube.com/v/QUSnPSLdnG0&hl=en&fs=1&" />
          </param>
          <param name="allowFullScreen" value="true" />
          </param>
          <param name="allowscriptaccess" value="always" />
          </param>
          <embed src="http://www.youtube.com/v/QUSnPSLdnG0&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="182"></embed>
      </object>
    Shelby Video Demo</div>    <p> </p>
    <p>Welcome to Shelby Video Services. We have been producing videos in Shelby North Carolina and South Carolina since 2004. </p>
    <p> </p>
    <p>Your video will be professional and comprehensive. We will beautifully cover your video production in a way that will propell your business into your market and/or enable you to relive your special event over and over and enjoy sharing with others.</p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div id="footer">© <a href="index.html">Shelby Video Services</a><br />
<a href="shelby-nc-video-services.html">shelby nc video services</a> | <a href="shelby-video.html">start here</a> | <a href="shelby-video-demos.html">demos</a> | <a href="links.html">links</a> | <a href="sitemap.html">site map</a> | <a href="shelby-video.html">contact</a> | <a href="shelby-video-north-carolina-reviews-testimonials.html">testimonials</a></div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9484651-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Because I didn't create the code, rather it was dreamweaver, i believed that DW is obviously broken. Because I have a bunch of sites I made in earlier versions and when I start using a newer versions, CS5, I now can't access the editable region in any of them it seems DW is broken. So, I didn't think the code was necessary. I thought it was something that others have already experienced and resolved. However, that doesn't seem to be the case. Thanks though for helping with what appears to be broken. Hopefully it's an easy fix because there's other sites I have that this annoyance is plaguing me...

Can't edit 2nd editable region

Hi,
I have a template which uses CSS and DIVs. It has 2 editable
regions, each within a DIV.
When I open a document based on this template, for some
reason only the first editable region is editable. The only way I
can edit the second is to turn of styles or go into code view.
Any ideas why?

> That's just being picky.
> It makes no difference whether it is absolute or
relative - it doesn't
> work
> either way!
Well, for it to be a layer, it has to be absolutely
positioned, and the
difference in behavior between the two (absolute vs.
relative) is certainly
NOT picky.
Remove the overflow:auto style on the div#main container, and
you'll be able
to edit it in Design view.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"mrdebauchery" <[email protected]> wrote in
message
news:[email protected]...
> That's just being picky.
> It makes no difference whether it is absolute or
relative - it doesn't
> work
> either way!
>
> Code attached, with crap cut out.
>
>
> <!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"
lang="en-gb">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
> 
> <title>Title</title>
> 
> <style>
> body,td,th {
> font-family: Times New Roman, Times, serif;
> font-size: 16px;
> color: #000000;
> line-height: 105%;
> }
> body {
> background-color: #FFFFFF;
> margin-left: 0px;
> margin-top: 0px;
> margin-right: 0px;
> margin-bottom: 0px;
> }
> a:link {
> color: #0066CC;
> }
> a:visited {
> color: #0066CC;
> }
> a:hover {
> color: #006699;
> }
> a:active {
> color: #006699;
> }
> h1, h2, h3, h4, p {
> padding: 0px 0px 20px 0px;
> margin: 0px;
> }
> h1 {
> font-size: 24px;
> color: #4376BD;
> }
> h2 {
> font-size: 20px;
> color: #4376BD;
> }
> h3 {
> font-size: 16px;
> color: #4376BD;
> }
> h4 {
> font-size: 14px;
> }
>
> #container {
> width:760px;
> margin: auto;
> overflow:visible;
> }
>
> #topbar {
> position:relative;
> width:760px;
> height:104px;
> background-image: url(images/topbar.jpg);
> background-repeat: no-repeat;
> overflow: hidden;
> }
> #title {
> float: left;
> width: 325px;
> z-index: 2;
> }
> #pics {
> float: right;
> z-index: 2;
> }
> #pics img {
> margin: 4px 10px 4px 0px;
> border: #ffffff 1px solid;
> }
> #middle {
> position:relative;
> width:754px;
> overflow: auto;
> border-right: #006699 3px solid;
> border-left: #006699 3px solid;
> min-height:489px;
> background:url(images/lines.gif) repeat-y;
> }
>
> #menu {
> position:relative;
> width:194px;
> min-height:465px;
> float: left;
> border-right: #006699 3px solid;
> padding: 15px 0px 0px 0px;
> text-align: center;
> overflow: auto;
> }
>
> #links {
> width: 134px;
> height: 320px;
> border: #0276C0 1px solid;
> background-color: #DCF4F8;
> margin: 30px auto 15px auto;
> text-align: center;
> color: #0276C0;
> font-size: 18px;
> padding: 0px 6px 0px 6px;
> }
>
> #links ul {
> list-style: none;
> margin: 0px;
> padding: 0px;
> }
>
> #links ul li {
> padding: 29px 0px;
> margin: 0px;
> }
>
> #links ul li a {
> text-decoration: none;
> }
>
> #main {
> position:relative;
> width:512px;
> min-height:450px;
> float: left;
> overflow: auto;
> padding: 25px 15px 15px 30px;
> text-align: left;
> line-height: 105%;
> }
>
> #botbar {
> position:relative;
> width:760px;
> height:14px;
> background-image: url(images/botbar.jpg);
> background-repeat: no-repeat;
> overflow: hidden;
> }
> .small {
> font-size: 10px;
> padding: 0px 0px 5px 0px;
> line-height: 12px;
> }
>
> </style>
> </head>
> <body>
> <div id="container">
> <div id="topbar">
> <div id="title"><img
> width="325"
> height="104" /></div>
> <div id="pics"><img width="66"
> height="89" /><img width="66" height="89"
/><img width="66" height="89"
> /><img
> width="66" height="89" /></div>
> </div>
> <div id="middle">
> <div id="menu"> <img width="190" height="85"
/>
> <div id="links">
> <ul>
> <li> </li>
> <li> </li>
> <li> </li>
> <li> </li>
> </ul>
> </div>
> <p class="small"> </p>
> </div>
> <div id="main"> 
> <h1>Heading 1</h1>
> <p>Paragraph</p>
> <h2>Heading 2</h2>
> <p>Paragraph</p>
> <h3>Heading 3</h3>
> <p>Paragraph</p>
> <p>Paragraph</p>
>  </div>
> </div>
> <div id="botbar"> </div>
> <p> </p>
> </div>
> </body>
> </html>
>

Image as editable region?

Similar Messages

Maybe you are looking for