Can anyone help me to improve my website?

Andrew Patterson · Post by **Andrew Patterson** » Mon Mar 29, 2004 12:17 am

I will freely admit that I don't know a lot about programing in html. I have a website - Venn diagram of the English Catenatives, which currently consists of an index and a single clickable GIF. This diagram has gradually got quite complicated, and I would like to simplify it. The trouble is, I don't know how to go about it.

I've set a smaller diagram as a background, which seems a sensible way to start, and ideally I would like to link to other pages using keywords in the diagram. I know how to set up a link - href, but I have no idea how to position the link at a definite place on the diagram.

The index is at:

http://www.geocities.com/endipatterson/index.html

(for some reason the index is the only way to link from this message board.)

The main site is at:

http://www.geocities.com/endipatterson/catenative.GIF

and the smaller diagram is at:

http://www.geocities.com/endipatterson/Cat.GIF

If you can't link, you should be able to view the sites by typing the URL.

Thanks in advance,

Andrew Patterson.

The diagram is being discussed in the applied linguistics forum.

Lorikeet · Post by **Lorikeet** » Mon Mar 29, 2004 4:29 am

I'm not sure exactly what you want to do. Did you want to mark out parts of your .gif so that different parts go to different places? If so, you might want to use some kind of image mapper. I used that on my page
( http://fog.ccsf.cc.ca.us/~lfried/ ) . The five parts of the flower in the middle go to different sections of the website. The flower (well, it's a sort of flower) is a .jpg. If you look at the source code, you can see how the program set up the coordinates. The program I use is for the Mac (OS9), and it's called ImageMapper. There are a lot of image mappers that are freeware or shareware. You might want to check Google to see what you can find.

Andrew Patterson · Post by **Andrew Patterson** » Mon Mar 29, 2004 9:44 am

Thanks Lauri,

Let me start by saying what a wonderful website it is. It is very clearly layed out with great content. I think I'll send my students to your site.

As for programing, I have been looking round for clickable diagrams, but the source code always seems very complex. Your source code seems to be a lot simpler yet it clearly does the job. I also note that you are using circles which may transfer to a Venn diagram, although my circles overlap. Thanks too for the expression "image mapper" I had an idea that such programs existed, but I didn't know what they were called.

As I said earlier, though I am new to programming and I am aware that my question is a no-brainer. To be honest, I think I need to get a book, everything's in Polish here, but if anyone knows the ISBN of a good intro to html in English I could order one. What is it about the source code that makes for instance the "activity" link appear where it does on the page and not somewhere else on the page. How would I do the same for text? I think I'm likely to stick with the background image and I'll put links where I've now got words.

Is my source code OK, by the way. I note most backgrounds are made from lots of repeating pictures whereas mine is (necessarily) one big one.

I get an error message when I visit my site, although it does display OK. When I tried to set the big diagram as a background part got cut off. Maybe I need to specify the size of my background with margins, borders or sth like that.

Lorikeet · Post by **Lorikeet** » Tue Mar 30, 2004 4:03 am

Andrew Patterson wrote:Thanks Lauri,

Let me start by saying what a wonderful website it is. It is very clearly layed out with great content. I think I'll send my students to your site.

Oh, I'd be happy if your students visited my site. I'm hoping to add some more activities in Flash soon. That's where my recent interest lies. I want to do some more listening activities in Flash too, but I'm hoping to get a better microphone.

As for programing, I have been looking round for clickable diagrams, but the source code always seems very complex. Your source code seems to be a lot simpler yet it clearly does the job. I also note that you are using circles which may transfer to a Venn diagram, although my circles overlap. Thanks too for the expression "image mapper" I had an idea that such programs existed, but I didn't know what they were called.

I think the image mapper lets you do different shapes--certainly circles and squares for sure. I don't it that often, so I have to relearn it every time.

As I said earlier, though I am new to programming and I am aware that my question is a no-brainer. To be honest, I think I need to get a book, everything's in Polish here, but if anyone knows the ISBN of a good intro to html in English I could order one.

You may want to take a look at http://www.htmlgoodies.com/primers/basics.html

I used the HTML Goodies book when I was learning HTML. I think his on-line lessons might be helpful.

What is it about the source code that makes for instance the "activity" link appear where it does on the page and not somewhere else on the page. How would I do the same for text? I think I'm likely to stick with the background image and I'll put links where I've now got words.

There are different ways you can use to position things on the page. CSS (Cascading Style Sheets) is one method; however, not all browsers accept all of that yet. I "cheated" on mine, and used tables. At first, I made the flower with the image mapper and that was all on my page. Then I decided to add the Links on the Left and the Contact on the right. I didn't want to redo the main graphic, so I put it inside a table instead. If you look at the source code, you will see there are three columns. The "Other Activities" at the bottom is really another row of the table which spans three columns.

Is my source code OK, by the way. I note most backgrounds are made from lots of repeating pictures whereas mine is (necessarily) one big one.
I get an error message when I visit my site, although it does display OK. When I tried to set the big diagram as a background part got cut off. Maybe I need to specify the size of my background with margins, borders or sth like that.

The reason most people use a small background that repeats is because it will load faster. (Like your back.jpg on the first page) I'm not sure what you are trying to do exactly. Did you do the first page yourself or did you use a WYSIWYG? (Like Netscape Composer or FrontPage or something?) The code looks overly complex. Anyway, I'll PM you in case you want to talk about this further, in case the rest of the gang gets bored.

Al · Post by Al » Tue Mar 30, 2004 9:39 am

HI all

To Andrew in particular - if you're using dreamweaver, there's a hotspot option you can use to make particular areas link graphically - you can do it by the naked eye, not using abstruse maths to determine the coordinates.

I have DW if you don't. It's a 10-minute job. Want a hand?

Al

Andrew Patterson · Post by **Andrew Patterson** » Tue Mar 30, 2004 1:34 pm

Thanks Al

Andrew Patterson · Post by **Andrew Patterson** » Tue Mar 30, 2004 11:02 pm

Al,

I don't have dream-weaver, so if you could make the links it would be very useful. But I'm not sure that my image is quite ready yet, so don't do anything yet. From your point of view does it matter if you link to another GIF or text page? I'm likely to to either or both.

I've been tinkering around, and have finally figured out how to paste the image onto the background.

I'm not sure if it is going to be a 10 minute job, though because I've got up to 14 areas to link from. All the headings in bold and all the overlaps.

Ultimately, I want to do two versions - one for students and one for linguists. The one for students will just be the linguists' one simplified.

Al and Lauri,

You can see how far I've got by clicking on:

http://www.geocities.com/endipatterson/cat.html

It looks a little bare now and I think I'll put the explaination of the "significant change in meaning on the sides. Gerunds on the left, "to" and the infinitive on the right. Like I've currently got under the diagram.

Everyone,

I'd like to know how the diagram appears on your screens. On mine you have to scroll a little to see it. I wanted to make it so that the whole diagram fitted on my screen without scrolling but I think I've made it as small as I dare. Perhaps a magnify function would sort out this problem, but then the code would get complex! It's a shame computer screens aren't portrait orientation.

Can anyone who looks at the diagram tell me if it all fits in your screen, or if you have to scroll.

As you can see, I haven't done the "that"-clause section yet. The content is being discussed in the applied linguistics forum of Dave's ESL Cafe.

Lorikeet · Post by **Lorikeet** » Wed Mar 31, 2004 12:42 am

I think it's much better than it was. I tried it on my PC emulator. I can see up to the beginning of the yin/yang symbol, and then I have to scroll down, but scrolling down isn't such a problem. Before I had to scroll both down and to the right. I think you are on the right track.

Andrew Patterson · Post by **Andrew Patterson** » Wed Mar 31, 2004 1:37 am

Just a sugestion to help fit the diagram onto the page.

I've posted a rough alternative layout at:

http://www.geocities.com/endipatterson/ ... Layout.GIF

The rectangles could be squatter or less squat, but I'm sure you get the general idea.

Thing is does it still look like a Venn Diagram?

Would you prefer this layout?

Lorikeet · Post by **Lorikeet** » Wed Mar 31, 2004 2:06 am

Oops Geocities says it's unavailable now. I'll try again later.

Andrew Patterson · Post by **Andrew Patterson** » Wed Mar 31, 2004 3:19 am

No, it is available. For some reason, it is only possible to link to an index page on geocities from here.

If you physically type the URL, it should come up.

Lorikeet · Post by **Lorikeet** » Wed Mar 31, 2004 8:18 am

Ah, weird, but it worked. Both pictures are the same size, so I'm not sure why you wanted to make a second one, unless you needed more space for text. Either one would be okay, although the new one has better quality circles than the first one imo.

Al · Post by Al » Wed Mar 31, 2004 9:52 am

I don't have dream-weaver, so if you could make the links it would be very useful. But I'm not sure that my image is quite ready yet, so don't do anything yet. From your point of view does it matter if you link to another GIF or text page? I'm likely to to either or both.

The smart move would be to embed .gifs in an HTML shell page. Direct links to images can be blocked on some free hosting services. If that's not the case on yours, though, either and both are possible.

Cheers, Al

Andrew Patterson · Post by **Andrew Patterson** » Fri Apr 02, 2004 5:33 pm

Al,

my diagram is ready if you're still happy to do the links with dream weaver. Basically, I'd like to do a link from all the bold headings on the diagram, that's the main sections:

1. Modals
2. Semi-modals
3. Modal equivelants
4. Verbs followed by "that"-clauses
(I'm not sure if I'm going to keep this one)
5. Verbs followed by "and"-clauses
6. Verbs followed by the object and bare infinitive
7. Verbs followed by the object, "to" and the infinitive
8. Verbs followed by the gerunds.
9. Verbs followed by "to" and the infinitive.

and the overlaps:
10. Verbs followed by the bare infinitive or by the object and bare infinitive
11. Verbs followed by the object, "to" and
the bare infinitive or by the gerund
12. Verbs followed by the object, "to" and the
bare infinitive or by "to" and the infinitive
13. Minimal change in meaning
14. Significant change in meaning
15. yin'yang symbol and "need"
(need is the only verb that fits into all categories)

I hope that that's not too much for you. I appreciate your help.

Andy.

Andrew Patterson · Post by **Andrew Patterson** » Sat Apr 03, 2004 4:32 pm

Al or Lorikeet,

I managed to download an image mapper "TomaWeb image mapper" and I mapped the areas to link from and set up mostly blank html files to link to which I'm going to write later.

Trouble is, it still isn't linking. you can see the state of my source code at:

http://www.geocities.com/endipatterson/cat.html

I think it is nearly there, but I can't find the mistake.

Thanks