PDA

View Full Version : editable region not working as I thought - template


confucious
07-23-2008, 05:35 PM
Hi there -

I have created my index page and now want to save the top fifth of it as a template page so I can build all my other pages using the logo, menu bar, shopping cart etc. My process is:

erase unnecessary (main body) ap div blocks that hold images etc. as my other pages will not be based on that format.
create on big ap div box that encompasses the center of the page (the part I want editable for each page)
save as a template and create the center ap div as editable region
save and close
open new page from template and now I can:
create a large area based on the editable region I inserted but CANNOT insert more ap divs... I have a cursor and can change things but not in a convenient layout format. I have built my entire page from separate ap divs, is that a problem? Does anyone know what I am doing wrong?? (using Dreamweaver cs3)
Any and all help will be appreciated!!!

My code is (huge???):
<!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"><!-- InstanceBegin template="/Templates/burapatesttemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:121px;
top:494px;
width:88px;
height:63px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:476px;
top:350px;
width:130px;
height:130px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:741px;
top:17px;
width:230px;
height:88px;
z-index:3;
}
.papyrustext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
color: #663300;
}
#apDiv4 {
position:absolute;
left:806px;
top:34px;
width:127px;
height:22px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:808px;
top:69px;
width:127px;
height:22px;
z-index:5;
}
#apDiv6 {
position:absolute;
left:322px;
top:8px;
width:247px;
height:97px;
z-index:6;
}
#apDiv7 {
position:absolute;
left:614px;
top:115px;
width:190px;
height:23px;
z-index:7;
}
#apDiv8 {
position:absolute;
left:58px;
top:149px;
width:148px;
height:24px;
z-index:8;
}
#apDiv9 {
position:absolute;
left:261px;
top:148px;
width:154px;
height:49px;
z-index:9;
}
#apDiv10 {
position:absolute;
left:511px;
top:148px;
width:154px;
height:49px;
z-index:10;
}
#apDiv11 {
position:absolute;
left:773px;
top:148px;
width:154px;
height:49px;
z-index:11;
}
#apDiv12 {
position:absolute;
left:4px;
top:187px;
width:964px;
height:1px;
z-index:7;
background-color: #000000;
}
#apDiv13 {
position:absolute;
left:24px;
top:147px;
width:235px;
height:39px;
z-index:8;
}
#apDiv14 {
position:absolute;
left:-4px;
top:148px;
width:975px;
height:102px;
z-index:7;
}
#apDiv15 {
position:absolute;
left:12px;
top:142px;
width:995px;
height:3px;
z-index:15;
background-color: #000000;
}
#apDiv16 {
position:absolute;
left:18px;
top:115px;
width:190px;
height:23px;
z-index:8;
}
#apDiv17 { position:absolute;
left:21px;
top:185px;
width:208px;
height:25px;
z-index:8;
}
#apDiv18 {
position:absolute;
left:420px;
top:115px;
width:190px;
height:23px;
z-index:9;
}
#apDiv19 {
position:absolute;
left:708px;
top:146px;
width:208px;
height:25px;
z-index:10;
}
.bordersbuttons {
letter-spacing: normal;
text-align: center;
vertical-align: middle;
word-spacing: normal;
border: 1px solid #000000;
background-color: #coa563;
font-family: "book antiqua";
font-size: 20px;
font-style: normal;
font-weight: bold;
font-variant: normal;
text-transform: lowercase;
}
.mainphoto {
height: 400px;
width: 600px;
border: 2px solid #CCCCCC;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/logo replacement.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv20 {
position:absolute;
left:29px;
top:182px;
width:489px;
height:350px;
z-index:11;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/shoppingcart.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv21 {
position:absolute;
left:654px;
top:19px;
width:118px;
height:76px;
z-index:12;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #ECE9D8;
}
a:active {
text-decoration: none;
}
#apDiv22 {
position:absolute;
left:211px;
top:114px;
width:190px;
height:209px;
z-index:30;
}
-->
</style>
<script src="file:///D|/Documents and Settings/All Users/Documents/website1/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style5 {
color: #999999
}
#apDiv23 {
position:absolute;
left:20px;
top:162px;
width:395px;
height:331px;
z-index:16;
}
#apDiv24 {
position:absolute;
left:476px;
top:199px;
width:130px;
height:130px;
z-index:17;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/smallphotocubes.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv25 {
position:absolute;
left:643px;
top:199px;
width:130px;
height:130px;
z-index:18;
}
#apDiv26 {
position:absolute;
left:807px;
top:199px;
width:130px;
height:130px;
z-index:19;
}
#apDiv27 { position:absolute;
left:482px;
top:175px;
width:150px;
height:150px;
z-index:17;
}
#apDiv28 {
position:absolute;
left:643px;
top:350px;
width:130px;
height:130px;
z-index:20;
}
#apDiv29 {
position:absolute;
left:808px;
top:350px;
width:130px;
height:130px;
z-index:21;
}
#apDiv30 {
position:absolute;
left:451px;
top:152px;
width:478px;
height:39px;
z-index:22;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/centeredtext.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv31 {
position:absolute;
left:483px;
top:220px;
width:116px;
height:105px;
z-index:23;
}
#apDiv32 {
position:absolute;
left:480px;
top:370px;
width:126px;
height:109px;
z-index:24;
}
#apDiv33 {
position:absolute;
left:647px;
top:371px;
width:126px;
height:109px;
z-index:25;
}
#apDiv34 {
position:absolute;
left:812px;
top:374px;
width:126px;
height:106px;
z-index:26;
}
#apDiv35 {
position:absolute;
left:647px;
top:219px;
width:126px;
height:109px;
z-index:27;
}
#apDiv36 {
position:absolute;
left:815px;
top:221px;
width:116px;
height:105px;
z-index:28;
}
#apDiv37 {
position:absolute;
left:817px;
top:372px;
width:116px;
height:105px;
z-index:31;
}
#apDiv38 {
position:absolute;
left:454px;
top:152px;
width:516px;
height:38px;
z-index:32;
}
.style8 {font-size: xx-large}
.style9 {
font-family: Verdana, Arial, Helvetica, sans-serif
}
#apDiv39 {
position:absolute;
left:808px;
top:115px;
width:190px;
height:23px;
z-index:33;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/smallphotocubesinsert.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv40 {
position:absolute;
left:10px;
top:472px;
width:1px;
height:11px;
z-index:34;
}
#apDiv41 {
position:absolute;
left:21px;
top:500px;
width:395px;
height:72px;
z-index:35;
}
#apDiv42 {
position:absolute;
left:26px;
top:504px;
width:88px;
height:62px;
z-index:36;
background-color: #FFFFFF;
}
#apDiv43 { position:absolute;
left:27px;
top:493px;
width:88px;
height:65px;
z-index:36;
}
#apDiv44 {
position:absolute;
left:127px;
top:504px;
width:88px;
height:63px;
z-index:37;
background-color: #FFFFFF;
}
#apDiv45 {
position:absolute;
left:224px;
top:504px;
width:88px;
height:63px;
z-index:38;
background-color: #FFFFFF;
}
#apDiv46 {
position:absolute;
left:321px;
top:504px;
width:88px;
height:63px;
z-index:22;
background-color: #FFFFFF;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/mainphotoinsert.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style type="text/css">
<!--
#apDiv47 {
position:absolute;
left:323px;
top:9px;
width:296px;
height:93px;
z-index:39;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/headertext.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv48 {
position:absolute;
left:6px;
top:6px;
width:258px;
height:101px;
z-index:40;
}
#apDiv49 {
position:absolute;
left:818px;
top:6px;
width:180px;
height:93px;
z-index:41;
}
#apDiv50 {
position:absolute;
left:810px;
top:13px;
width:61px;
height:40px;
z-index:41;
}
#apDiv51 {
position:absolute;
left:821px;
top:61px;
width:40px;
height:37px;
z-index:42;
}
#apDiv52 {
position:absolute;
left:847px;
top:61px;
width:133px;
height:52px;
z-index:43;
}
#apDiv53 {
position:absolute;
left:882px;
top:17px;
width:106px;
height:79px;
z-index:43;
}
.style11 {color: #FF9900}
#apDiv54 {
position:absolute;
left:470px;
top:500px;
width:476px;
height:80px;
z-index:44;
}
#apDiv55 {
position:absolute;
left:20px;
top:580px;
width:319px;
height:18px;
z-index:45;
}
-->
</style>
<link href="file:///D|/Documents and Settings/All Users/Documents/website1/css rules/copyright.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style12 {
font-family: "book antiqua";
color: #999999;
}
#apDiv56 {
position:absolute;
left:3px;
top:146px;
width:1039px;
height:453px;
z-index:46;
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#apDiv57 {
position:absolute;
left:60px;
top:200px;
width:195px;
height:191px;
z-index:47;
}
#apDiv58 {
position:absolute;
left:85px;
top:196px;
width:123px;
height:155px;
z-index:47;
}
#apDiv59 {
position:absolute;
left:85px;
top:181px;
width:174px;
height:166px;
z-index:47;
}
#apDiv60 {
position:absolute;
left:5px;
top:301px;
width:135px;
height:44px;
z-index:47;
}
#apDiv61 {
position:absolute;
left:67px;
top:217px;
width:137px;
height:167px;
z-index:47;
}
#apDiv62 {
position:absolute;
left:8px;
top:154px;
width:137px;
height:110px;
z-index:47;
}
-->
</style>
<!-- InstanceEndEditable -->
</head>
<body>
<div id="apDiv40"></div>
<div class="headertext" id="apDiv47"><!-- InstanceBeginEditable name="headertext" -->
<div align="center" class="style12">We import only the finest quality textiles, jewellery, home style, personal wear, furniture ad giftware from Thailand, Vietnam, Laos, Nepal, and Tibet.</div>
<!-- InstanceEndEditable --></div>
<div id="apDiv15"><img src="file:///D|/Documents and Settings/All Users/Documents/website1/imagesandlogos/line.jpg" width="959" height="0" /></div>
<div class="bordersbuttons" id="apDiv16"><a href="file:///D|/Documents and Settings/All Users/Documents/website1/index.html">home</a></div>
<div class="bordersbuttons" id="apDiv7">wholesale</div>
<div class="bordersbuttons" id="apDiv18">testimonials </div>
<div id="apDiv21">
<div align="center"><img src="file:///D|/Documents and Settings/All Users/Documents/website1/imagesandlogos/smallshoppingcart.jpg" alt="shoppingcart" width="75" height="50" align="absbottom" class="shoppingcart" /></div>
<div align="center" class="style5">my shopping cart</div>
</div>
<div id="apDiv22">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">products</a>
<ul>
<li><a href="#">silk and pashmina</a></li>
<li><a href="#">furniture</a></li>
<li><a href="file:///D|/Documents and Settings/All Users/Documents/website1/jewllery page tuseday.html" title="Jewellery">jewellery</a></li>
<li><a href="#">home style</a></li>
<li><a href="#">gifts</a></li>
<li><a href="#">art, carvings, religion</a></li>
</ul>
</li>
</ul>
</div>
<div class="bordersbuttons" id="apDiv39">about us</div>
<div id="apDiv48"><img src="file:///D|/Documents and Settings/All Users/Documents/website1/imagesandlogos/burapalogo.jpg" alt="burapalogo" width="273" height="103" /></div>
<div id="apDiv50"><img src="file:///D|/Documents and Settings/All Users/Documents/website1/imagesandlogos/planesmaller.jpg" alt="plane" width="55" height="37" /></div>
<div id="apDiv51"><img src="file:///D|/Documents and Settings/All Users/Documents/website1/imagesandlogos/Mail1.gif" alt="emaillink" width="38" height="32" /></div>
<div class="headertext" id="apDiv53">
<div align="center"><span class="style5 ">For Shipping and Contact information click</span><img src="file:///D|/Documents and Settings/All Users/Documents/website1/imagesandlogos/spacer.gif" alt="spacergif" width="1" height="1" /> <img src="file:///D|/Documents and Settings/All Users/Documents/website1/imagesandlogos/spacer.gif" width="1" height="1" /><span class="style11">here</span>.</div>
</div>
<div class="copyright" id="apDiv55">Copyrightę2008 Burapa Asian Perspectives</div>
<div id="apDiv56"><!-- InstanceBeginEditable name="maincontent" -->
<p>&nbsp;</p>
<div></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- InstanceEndEditable --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>
<div id="apDiv62"></div>
<div id="apDiv61"></div>
<div id="apDiv60"></div>
<div id="apDiv59"></div>
<div id="apDiv58"></div>
<div id="apDiv57"></div>

Corrosive
07-23-2008, 06:06 PM
OK, just so we know where we are. How long have you been using Dreamweaver?

confucious
07-23-2008, 06:11 PM
As long as you probably guessed - a week and a half.

AS far as I can tell, my css and code is all over the place - I think there is twice as much as I need there! I have a mind to start over and arrange my pages differently, ie: not placing layers all over to get the placement I need but setting out general columns and blocks to then insert things into.

Have you any advice for seomone a little confused and...noobish?

Corrosive
07-23-2008, 06:25 PM
As long as you probably guessed - a week and a half.

AS far as I can tell, my css and code is all over the place - I think there is twice as much as I need there! I have a mind to start over and arrange my pages differently, ie: not placing layers all over to get the placement I need but setting out general columns and blocks to then insert things into.

Have you any advice for seomone a little confused and...noobish?

Yes, Build the structure of your site using DivTags not APDivs. Use APDivs sparingly (if at all).

Put your CSS styles in a seperate style sheet, linked into your pages.

Name your CSS styles sensibly. When you come back to your site, how the hell are you going to what each style relates to if they are just numbered?

And, yes, start again. You are on a path to misery.

oh and I would have said two weeks btw :wink:

confucious
07-23-2008, 06:41 PM
Aarrrgh...

Thanks for your reply. The pages were looking great in 3 different browsers but I wonder if centering would be a problem if people have different screen resolution etc. AS well as a host of other problems people seem to talk about.

Any advice on a good source for tutorials?? Is a site built with DivTags as customizable as one with ApDivs?

THanks again. Back to square one....hehehhe

Corrosive
07-23-2008, 06:48 PM
Is a site built with DivTags as customizable as one with ApDivs?

Plan your site properly then, yes. You need to go and mess about with it all and read some tutorials. Try the Adobe Developer site, and start here ... http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html

You can always ask questions here as well.

Good luck :)

edbr
07-24-2008, 03:56 AM
re styles itsok to develop a page with styles in the head for easy changing, matter of preference of course but it is always better IMO to use seperrate style sheets when you've got what you are looking for.
app divs or absolutel positioned layers are ok in ther place but be careful they can create problems if you dont 'get them'