Known Participant

Question

DW 2019: Automatical Table of Content for a Document

Forum|Forum|7 years ago
December 19, 2018
6 replies
3258 views

Since 2004, where I started to use DW I miss a feature, which I consider is important for documents with extensive content.

Every text processor software has that feature.

I talk about a table of content.

The function should create the TOC based on the headings of the document.

The id attributes should be created based on the content of the specific heading.

The TOC is useful for the user of the webpage and of course for the editor while he works at the document in the design view. It allows the editor to navigate easily in the content.

What do you think about that idea for a future version of DW?

And, independent of that:
Do you know of any extension, which can add that TOC?

Thanks.

This topic has been closed for replies.

BenPleysier

Community Expert

What you are looking for is a document outliner. I tried using Adobe examples, but they gave very poor results because of the poor page structures that they present.

That is why I went to a page that has got a better structure, namely Responsive Web Design Extensions, Apps, Add-ons and Plugins for Dreamweaver. This is the result when we create a page outline:

For more on outlining see Using HTML sections and outlines | MDN, or Google the subject.

Edit: I just found this online tool: https://gsnedders.html5.org/outliner/

2nd Edit: An excellent article https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

M

mistershortcutAuthor

Known Participant

@Ben

Thanks for your hints about outlining.

But it is not about what I'm looking for.

I just like to have a automatically created TOC inside DW (in the sidebar, in the design view, that doesn't matter) which allows by a mouse click to jump to every heading in the document.

Thanks specially for last article about multiple h1, very inspiring!

BenPleysier

Community Expert

Sorry, I wasn't sure. Is it maybe the DOM panel that you are looking for?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

pziecina

Legend

I can remember back in the days of dhtml, menus being generated from the page title, so if you only want a toc from one page it should be possible. I still think that if a page is long enough to require a toc, then the page is possibly to long for users to read comfortably.

It is probably best if you are going to file a feature request, to include a brief idea of how it would work. Otherwise like me others will think of applying it to the entire site.

With html5 you can use multiple h1, h2....etc tags in the same document, so it is possible to have it apply to say every 'h2' element on a document, (I would suggest limiting it to h2 elements). That would leave the h1 for the document 'title' in the html itself.

It would be reasonably simple to have a feature that found every h2 element, (with a unique id) in the document, and generate a toc of h2 elements, (with the text of the h2) and use that as a toc as a jump menu in the document.

I can remember when MS Word had such a feature for the html code it generated, (though the code was so bad, I don't think it should be used). Plus it may have been removed by now, as MS has also tried to remove features from its apps that generated invalid code.

Work on the theory that if 1 person is asking for this, (yourself) then there are probably many others who would like such a feature. So spend a little time working out how you want it to work.

B i r n o u

Legend

I understand your problem, but I must admit that since I've been doing the web, I've never asked myself the question in this sense.

I don't think the web as I would think a printed document

by saying that, I'm not saying I'm right

the fact is that if a TOC is present on a single page, it is equivalent to saying that the page is large enough to require, and especially justify, the presence of such a navigation tool...

so generally I avoid filling in the HTML content manually. I rely heavily on a database... and from there on a third party script (PHP or JS) to fill the various tags... and whether this operation is delivered when loading the entire page, or by successive loading (AJAX) it is then easy to tag anchors on the fly to simplify their location (using different compoent tool (depending on the needs and/or the device)... accordion, tabs, TOC, dropdown menus, and so on.

M

mistershortcutAuthor

Known Participant

@Birnou

Of course I know, that many websites are filled via a database/ content management system.

But there are usecases, where a publisher don't need or don't want to use such tools.

And may be the content is semantically complex and needs rich markup, which only a real powerful editor (like DW) is a real help to do that work.

To justify a TOC:
It is always helpful for both, the reader and the editor, when you have more than - let's say 6-8 headings.

Please look at longer wikipedia articles for example.

It is so helpful to have a TOC there.

B i r n o u

Legend

in this case, then use a JS that will retrieve each targeted TAGs, for example all H2

then create a node containing a list of each of these titles, taking care to tag them with an adhoc ID attribute and linked to the previous list

once finished, place this node at the top of the page and that's it...

Rag and Bone

Community Expert

Google gives me these results:

https://www.tipsandtricks-hq.com/simple-table-of-contents-toc-using-pure-html-and-css-code-9217

and this:

How to Auto-generated Table of Contents with HTML Slots - Hongkiat

M

mistershortcutAuthor

Known Participant

@Rag and Bone

Thanks for your first link.

But you missunderstood my issue.

An experienced web author knows which HTML and CSS is appropriate to provide a TOC.

My point is:
The HTML should be created automatically.

And of course it should be changed automatically when there's any change in the content of a heading or in the structure of the headings.

And, last but not least: when the value of the id attribute is automatically change, than the corresponding fragment identifiers should be changed automatically whereever on the site they are used.

Example without TOC:

<h2>Lorem</h2>

<h2>Ipsum</h2>

<h3>Dölor & adipisit!</h3>

Example with the fictitious function TOC enabled:

<ol>

<li><a href="#toc-1-lorem">Lorem</a></li>

<li><a href="#toc-2-ipsum">Ipsum</a>

<ol>

<li><a href="#toc-2-1-doelor-and-adipisit">Dölor & adipisit!</a></li>

</ol>

</li>

</ol>

</nav>

...

<h2 id="toc-1-lorem">Lorem</h2>

<h2 id="toc-2-ipsum">Ipsum</h2>

<h3 id="toc-2-1-doelor-and-adipisit">Dölor & adipisit!</h3>

About your second link:

Thanks for the interesting hint. I haven't heard of that method with the element slot.

At the moment I did not understood the details and if they could fulfill, what I suggested.

I suppose they cannot fulfull the task of providing the TOC for the editor in the design view. But I'm not sure.

Nancy OShea

Community Expert

Use Adobe Acrobat DC to create digital documents containing page thumbnails, bookmarks (aka TOC links).

Page thumbnails and bookmarks in PDFs, Adobe Acrobat

Nancy O'Shea— Product User & Community Expert

Preran

Community Manager

I understand where you are coming from, but I am not sure that a feature available in text editors would make sense for an HTML editor. However, I defer to the other experts on the forum for their opinion. I haven't seen a similar request on this forum in a really long time.

Thanks,

Preran

pziecina

Legend

As you say Preran, it has been a while since this request was last seen, (about 5 years) but it does surface every now and again.

The problem with generating a table of contents for a site, is that each entry would have to be linked to the corresponding position, ( page) in the site, otherwise it would be useless. Previously the best solution was to offer the site visitor a pdf, word, epub, file that included a table of content, and an index.

Having The feature in Dw would be beyond what a code editor is for, (writing code) and would require the editor to have word processor features, which is way beyond the requirerments of any code editor. The argument against that was that Dw has a design and editable live view, but as those features are doing nothing more than adding/displaying code that is placed in a code document, it was thought that such a feature as generating a toc, would make the code editor into a cut down version of a word processor.

There used to be apps that could generate toc's from html documents, but as there was really no market for them once epub became an accepted alternative, they hav quietly disapeared.

M

mistershortcutAuthor

Known Participant

Thanks for your honest feedback, pziecina

But you missunderstood my issue.

I did not talk about a table of content of the site but of a single page.

For a table of content for site I agree with you. Such task is one for content management system.

No, I'm talking about a page, a document.

A good editor should provide methods to move throught the document efficiently. A standard structure is given by the headings. Perfect for jumps.

And when we talk about differences between a "pure" editor and a "rich" one, we found many many existing features that makes me believe that DW is one of the second category.

But my main interest is to know, if you like the idea of having that feature in your editor - independent of what Adobe decides.

An easy navigation is, in my humble opinion, in a big document a must have.

PDF, Nancy, is not comparable at all to HTML. We are talking about highly responsive Webpages.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded