Last week we began discussing WebDev Advanced Positioning and Zoning. We got the “Power Bar” completed. This week we will finish up the rest of the zones and discuss the challenges of editing zones, and I will show you a few of my black magic tricks to getting it done.

When we last left our hero, the template looked list this.

Now it time to go to work on the Page Header zone. Remember you have to be in Zoning mode to edit the zones. It is pretty close, we already reset it size when we were working on the Power bar. Let’s name it something a little more reasonable.

And set it’s background color to General Background 1 (an off white shade). We also need to set it to a solid background.

And a test of the Page indeed shows us one step closer.

On to the Left Hand Navigation zone. Again we will start by giving it a decent name.

On the GUI tab we want to set the Anchoring to extend the height only. We don’t want the width to change.

And again we want a solid background with General Background 1.

A test of the template shows that we still have a slight issue. Notice the bit of space between our Navigation zone and the Header zone.

That is being caused by a margin setting, we want to set the margins to 0. Which is also done on the Style tab, by choosing the Margins element.

The Navigation zone looks good now, however, I happen to know that what will eventually be displayed in this zone is wider. So we need to adjust the width of the zone. Sounds simple, but if not done right it will cause us tons of grief. If we hover over the right hand edge of the zone the mouse cursor changes to indicate we are adjusting the size (sorry I can’t get jing to capture this). However if we do that the rest of the zones get resized as well, and now our page is to wide. This also happens if you use the position indicators at the bottom right of the IDE to directly change the width.

If you hold the control key down while dragging the other zones will not resize. So go ahead and drag it out, while holding the control key, so that it is 250 pixels wide. The position indicators at the bottom right of the IDE will show the new dimensions as you drag the zone.

One more zone completed! Now on to the Page Content zone. Yes you guessed it we are going to start by renaming it to something we will recognize in the future.

Next we are going to adjust the anchoring. Again we want it to extend in height only.

We also need to set the Background and Margins as we did with the Navigation zone. Be careful to note that this zone also has a left hand margin of 0 that needs to be changed.

Another test reveals that we only have one more zone to adjust!!!

So on to the Page Footer Zone. We need to rename it, set the anchoring to be horizontally centered at the bottom, and set the background color. This time I chose the General Background 3 so that the footer has a slightly gray background.

A final test reveals that we have accomplished our goals. It is not exactly the prettiest page template in the world, but you should know how to go create one that is just the way you want it now.

But wait there’s more! Let’s look at a couple of quick variations that will give the site a different look and feel with just a few mouse clicks. First let’s make a copy so we are not changing our completed template. From the Home tab of the IDE ribbon bar, drop down Save and choose save as, and save a copy and it it.

First another advanced concept that we have only briefly touched on. Unlike cells, zones have to cover the entire area, you can not have an area of the page not in a zone, and if you were to start out, with a blank page it would have one zone and then you would be slicing and dicing that zone, but they would always be contained inside the master zone. What all these means is that there is a zone that we haven’t looked at yet. If you click on the Left Hand Navigation zone twice, you will notice that a zone that contains both the Left Hand Navigation and the Page Content zone. Which you can tell by the blue outline around the selected zone.

Let’s change the anchoring of this zone to be extend by height, but to be based on content, not the browser.

And lets change the Page footer zone to be Horizontally Centered, but not forced to the bottom.

A test run of this template shows that now our page doesn’t not extend to the bottom of the browser. It would if we had content that needed more room, but with an empty page it doesn’t. By default it is still as tall as it is in the IDE, we could make this effect more dramatic by making the two zones shorter doing design time, and only extending them on pages that needed it.

Let’s make another copy of our original template and take a look at another variation. This time let’s set the anchoring of the footer to extend the width based on the browser.

On the GUI tab we are also going to set it to fixed.

If we test this template, and make our browser size short enough, we will see that now the footer extends the entire width. The Powered by WebDev, goes to the far right (we didn’t put it in a cell like we did in the Power Bar). and the “Page” scrolls between the Power Bar and the Footer, but they always remain visible.

As you can see just a few mouse clicks can make a dramatic difference in the Look and feel of your website. Hopefully that got your creative juices flowing and you are ready to go our and experiment with creating your own template and zoning scheme. And when you do you will likely run into an issue with editing zones that will could make you question your sanity. So here are a few tips that I have gathered from my battles with zones.

If you right click on a zone you get a popup menu.

It took me a while to figure out what the difference was between Divide and Sub-divide.

Let look at Divide first. If we look at our Template in the Project Explorer we will see that the Area Wrap zone (the one that we experimented with setting to extending my content) contains the Left Hand Navigation Zone and the Page Content Zone, inside the Left Hand Navigation is a cell called Content_Left. I know zones and cells have the same icon just to confuse us!!!

If we right click on the Left Hand Navigation zone and chose divide Horizontally.

We are given a edit tool, depending on where your mouse cursor is that either looks like a pencil, or is just dragging a dividing bar (sorry another one that I couldn’t get Jing to capture well). When we have the new zone sized the way we want it we can right click the mouse and now Left Hand Navigation zone has been broken up and we have a new zone at the bottom of it.

Notice this zone doesn’t not have any of the formatting from our Left Hand Navigation zone and if we look at the project explorer we will see that it created ZONE_NoName1 that is contained inside AREA_Wrap, but is not inside ZoneLeftHandNavigation.

However if instead we had chosen Sub-divide horizontally.

We would have ended up with a zone that did display the same formatting.

And if we take a look at the Project Explore we will see that the reason why is this time we got to new zones. Zone_NoName1 and ZoneNoName2, both of which are contained inside zoneLeftHandNavigation. And now the Left_Content cell is inside Zone_NoName1

It is a subtle difference, but one that is very important depending on my your desired outcome is. This concept and the fact that zones are always completely contained in zones, has to be fully understood to accomplish what you need at times.

For instance, let’s delete the Page Footer zone. Just right click on it and chose delete. Now say that this is the way the template came to you from another developer and your boss has decided he wants a footer. If you right click on either the Left Hand Navigation or the Page Content zone, and horizontally divide it you are not going to get the desired effect of a page footer.

No problem you say. I have already shown you how to click twice which will select the Area_Wrap zone. No so fast Moon Dogey! Even doing so, when we right click and chose divide horizontally it only effects one of the two zones instead of the Area_Wrap.

Don’t despair I have a trick that sometimes works. At this point it can feel like black magic, I at times end up trying 2 or 3 things until I finally get what I want. Sometimes I have to add extra zones, then split them, then delete them until I finally get what I want. This is why it is very important to really think through your interface and get your templates right first, as this type of editing of zones can had some dramatic effects on any pages you have created and where the content ends up, so you might have to go move content back into the correct zone when done.

First if we Horizontally divide both zones, so that we have 2 new zones the exact same height, there is a feature that “sometimes” works, although I haven’t been able to figure out the magic of when or why. After creating the two new zones right clicking on the edge brings up a popup menu that is just what we need, unfortunately more times than not the options are disabled for reason that are only know the pcSoft. If anyone else has cracked the code I would love to hear it!

Here is what I have had to do at times, and it works but again can get very ugly if you already have a bunch of pages based on the template.

First make a copy using the File Save as, never do this level of surgery without a copy of the original in case things go horribly wrong. Next delete the Left Hand Navigation and Page Content zones. Don’t panic this doesn’t delete any controls on the page, just the zones. So now if we look at the Project explorer the Content_Left cell and the controls that were in our original footer are not in the Area_Wrap zone.

Now right click on the Area_Wrap zone and choose Divide Horizontally.

This gives us a zone for our footer.

We just need to reset all of that zones settings as we want, so rename it to zonePageFooter, set the background to General Background 3 and anchoring to be centered at the bottom.

Next we select the Area_Wrap zone again, and this time we want to divide it vertically. But again you will find some challenges. The cells that make up the controls for the Left Hand Navigation have grown to the full width.

For some reason that confuses the divide zone interface, so now we need to switch back to page mode.

And drag the cell completely off the page. Make sure that you are selecting the Content_Left cell as it contains other cells and controls and you want to drag them as a whole.

Now we can switch back to Zone edit mode. And Sub-Divide Vertically (not Divide) the Area_Warp zone. This gives us our two zones for Left Hand Navigation and Page content, go ahead and reset all of their settings to the correct values. We should be back to the original page layout now, except our Content_Left cell is not in the correct position. So switch page to Page edit mode. We can’t just drag the Content_Left cell to where it needs to be because it has resized itself, so the first step is to resize it to 240 pixels wide. The easiest way to do that is to selected it and use the Position indicators at the bottom of the IDE. Again before you have the Content_Left cell selected so all of the controls inside it are automatically effected as well.

Now just drag it back into the Left Hand Navigation zone. You also need to check that the controls that are in the footer zone are really in that zone. Fortunately for us they are. If not we would have had drag them out and back in, to get them in the correct zone.

If you test the page you will see that we have the layout back the way we wanted it. So as you see we can edit zones after the fact, but it can get dicey and would have been much worst if we had a ton of controls and several pages based on the template. So its is always best to get the zoning (at least the number and position) the way you want it before beginning your real site design.

Hopefully I have shown you the power of zones, and a few tips on working around the pitfalls of the zone edit interface. If it all still seems a bit much for you or if you are struggling with getting the zones right for your site, remember I am always available for consulting, and this is a prime example of a few hours of my time helping you get your page template the way you want it, can save you many hours of time down the road.

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article.

Uncle Pete’s Corner is weekly webinar on all things WX every Friday , to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

 

• WEBDEV
• WX