Hi,

Given a page source, is there any tool that can make a sketch of the
page structure? Our template is DIV based. It's easy to get lost in
so many DIV's. Say, <div id="container"can include other DIV's (e.g.
nav, content, righ-column, footer, etc.). Just by staring at the page
source, it's so hard to find the closing </divfor <div
id="container">. Any ideas?

Thanks in advance,

Bing

dubing@gmail.com wrote:

Hi,
>
Given a page source, is there any tool that can make a sketch of the
page structure? Our template is DIV based. It's easy to get lost in
so many DIV's. Say, <div id="container"can include other DIV's (e.g.
nav, content, righ-column, footer, etc.). Just by staring at the page
source, it's so hard to find the closing </divfor <div
id="container">. Any ideas?

If you don't need printing and you're concerned about the document's
structure rather than the location of tags in the source, use Firefox
and download its DOM Inspector.

In article <1158688018.504589.79580@h48g2000cwc.googlegroups. com>,
dubing@gmail.com wrote:

Hi,
>
Given a page source, is there any tool that can make a sketch of the
page structure? Our template is DIV based. It's easy to get lost in
so many DIV's. Say, <div id="container"can include other DIV's (e.g.
nav, content, righ-column, footer, etc.). Just by staring at the page
source, it's so hard to find the closing </divfor <div
id="container">. Any ideas?

The free, cross-platform and very good editor jEdit can show you the
matching tag for an opening/closing tag. (You'll need to download the
XML plugin I think to get HTML-ish features.) I think jEdit also has
folding which allows you to collapse a tag and hide all of its contents.
Come to think of it UltraEdit (for Windows only, cheap but not free)
also has folding. BBEdit for the Mac has a "balance tags" feature which
will help you to find matching open/close tags.

On the browser side, Chris Perderick's Web Developer toolbar for Firefox
has a CSS/View Style Information menu item that will display the
location in the DOM tree of the item under the mouse. (Easier to use
than to explain.)

HTH

--
Philip
http://NikitaTheSpider.com/
Whole-site HTML validation, link checking and more

Nikita the Spider wrote:

The free, cross-platform and very good editor jEdit can show you the
matching tag for an opening/closing tag. (You'll need to download the
XML plugin I think to get HTML-ish features.) I think jEdit also has
folding which allows you to collapse a tag and hide all of its contents.
Come to think of it UltraEdit (for Windows only, cheap but not free)
also has folding. BBEdit for the Mac has a "balance tags" feature which
will help you to find matching open/close tags.
>
On the browser side, Chris Perderick's Web Developer toolbar for Firefox
has a CSS/View Style Information menu item that will display the
location in the DOM tree of the item under the mouse. (Easier to use
than to explain.)
>

Thanks those who replied. Really appreciate the helpful information
you guys provided.

Bing

dubing@gmail.com wrote:

Nikita the Spider wrote:

>
Thanks those who replied. Really appreciate the helpful information
you guys provided.
>

Notepad++ is absolutely brilliant for several different programming-
and markup languages...

http://notepad-plus.sourceforge.net/uk/site.htm

Here you can expand and collapse the different blocks in your source-
HTML, et.c, et.c...

--
Dag.

On 2006-09-19, dubing@gmail.com <dubing@gmail.comwrote:

Hi,
>
Given a page source, is there any tool that can make a sketch of the
page structure? Our template is DIV based. It's easy to get lost in
so many DIV's. Say, <div id="container"can include other DIV's (e.g.
nav, content, righ-column, footer, etc.). Just by staring at the page
source, it's so hard to find the closing </divfor <div
id="container">. Any ideas?

It's pretty easy to knock up a script to output a .dot file you can
process with graphviz, which will make a nicely laid out tree diagram.

See http://www.graphviz.org/.

dubing@gmail.com wrote:

Given a page source, is there any tool that can make a sketch of
the page structure? Our template is DIV based. It's easy to get
lost in so many DIV's.

FWIW the latest version of Zeus for Windows:

http://www.zeusedit.com/html.html

will code fold HTML code on DIV and other common HTML tags.

Jussi Jumppanen
Author: Zeus for Windows
NOTE: Zeus is shareware (45 day free trial)

In article <1159688216.960994.73200@m73g2000cwd.googlegroups. com>,
jussij@zeusedit.com writes:

dubing@gmail.com wrote:
>

Yes, many. I think someone already suggested one. Any parser that
creates a tree can do it; for example Site Valet.

FWIW the latest version of Zeus for Windows:

What??? Do the Zeus people know you're trading on their good name?
It took me a moment to realise this has nothing to do with the Zeus
we all know, but is some shareware wannabe.

--
Nick Kew

Application Development with Apache - the Apache Modules Book
http://www.prenhallprofessional.com/title/0132409674