please.help.with.first.ever.template/site

Finally found MODx... uhhh.. It’s a big wow. But i’m new to almost everything though i have some web programming skills studied in college. I’m going to build my own/my first complete web site. It’s not too complicated.

The outline i have thought of is like a one-column template with a header and the content area and the footer section (no left or right side, and no menu). The header is gonna have a clickable css image map; it should work as much like a menu as in: if i click on an image, the corresponding list of information (like in a blog) related to that image should appear/be displayed in the content area/body.

Would you all please suggest me how i can achieve it? I wonder how i can display/change the list of blog-like information list when i click on the image map without reloading the big image used in the image-map over and over.

Should those header, body, and footer areas be separately loaded like in a html frame so that i can use a clickable map and the content area in a one page?

I feel soo naive.

Any help would be much appreciated.

Thanks in advance

First, get a static mockup working the way you want it to work. Then port it into modx. I think you’ll find modx doesn’t really have limitations that impose what you can or cannot do from a design perspective.

Thanks Ryan,

Now i wonder whether i can use wayfinder to contain an image map if i click on the map at the top, the content area below should change. newslisting seems to work for the content. need to learn ditto. TVs are pretty confusing.

digging more and more as a typical newbie

I had typed out a really sarcastic sentence about the image map but it was too harsh and sarcasm and the web don’t mix amongst strangers.

My own opinion is that its not a ideal and honestly I’ve not done one in years since you can replicate image maps with CSS pretty easily and at the worst case with Dreamweaver or Golive using slices. If you use slices or CSS you can use wayfinder but I’m not sure about the image map.

If you use CSS you can have the content load without reloading the styles, You could use AJAX to open everything in the same pane but I don’t recommend it for search engines.

TVs are harder to get your head around but once you do you’ll think they are easy peasy. Think of a TV as a content field related to the main content but should be output in a specific manner. I most often use them for pages that will be output using Ditto to limit end user control of the fields so the template always looks good and they can’t break it. They can best work as form fields for specific types of data be they dates, URLs, files, images etc.

Hope this helps and lemme know if you have any more specific questions on your project.

Cheers,

Jay

Dear Jay,

The web structure is like:

1. the header section on the top
- it will have a background image
- on the background image there are 5 circles saying number 1-5
- if i click on any one of them, the corresponding list of news will appear in the content area of the body
- those circles are not positioned in one line; they can be anywhere within the header section such as one above the other and another one is next to it.
I just thought image-map like solution would help. Or maybe image replacement technique.
The web doesn’t have any menu, only those 5 circles will work like a menu. I don’t have any clear idea; still searching for. Those circles and the background image don’t change, so maybe i should use a chunk and make it cacheable.

2. the body
- the content goes here and changes according to the clicks on the circles in the header. i think i will use the ditto here.
3. the footer1

The point is how i could make the content change when i click on one of the circle images. I don’t want to load the header section over and over, because it stays the same through all the pages. Or should I?

Any suggestion, please? The answer would be pretty easy, but i can’t make it happen as i have not that much experience.

But i have time enough. It’s my own project. I can study anything.

I’m sorry if i’m bothering you asking, maybe, so simple questions. But that’s how i am now
All my experience was with some very simple websites. So, this time it seems a challenge to me.

Many thanks in advance.

If it’s a static navigation that won’t change, don’t mess with Wayfinder at all. It’s not needed. It all goes back to making it work in static files then simply putting it in modx templates and pages. I think there are some snippets that have been written by community members to load content via Ajax.

Maybe start here: http://modxcms.com/forums/index.php?topic=6743.0
Or here from the wiki: http://wiki.modxcms.com/index.php/Use_AJAX_with_modxAPI

enthusiasticnoob,

You are not bothering me at all. I love to help noobs. Depending on what forum I’m in I’m still a noob too.

My concern is an honest one regarding using an image map in that it is an old technique and you can achieve the same thing with CSS and absolute positioning. That being said you can do it with an image map if that is what you know how to do and think will be the shortest route to the end.

I agree with rthrash in just using a static HTML chunk for the menu vs. using wayfinder. The only real benefit to using wayfinder is if you are having a dynamically adjustable menu.

If you are using CSS to style the header and the header doesn’t change it will be cached to the browser and unless it changes won’t reload or even refresh.

You can use AJAX as rthrash says to load the page content but I would suggest that you will take a search engine indexing hit since there will only be one page.

thanks a lot for the warm replies.