powerpoint flowchart to html

Question

I have the following image as a powerpoint flow chart (text with hyperlinks not shown).

I want to turn this chart into an html-website. Any ideas how to get a good result for this task?

I think recreating this with coding in html is troublesome.

Thank you.

Answer 1

Text on gray backgrounds (5 on right, 2 on left) are probably headings of the same level so they would be hN floating on the right and coming before each set of arrows.

Each individual set of arrows can be fairly easily coded as lists and styled as these breadcrumbs:

• Simple scalable CSS based breadcrumbs (by Veerle Pieters)
• Breadcrumb Navigation with CSS Triangles (by Chris Coyer)

They can expand with content if it seldomly occupies 2 lines (Firefox/Ubuntu and Safari/Mac have laaarge fonts, don't assume that your text will always stay on 1 line. Not speaking of zoom text that should be taken into account )

As for orange arrows between individual series ... that's complicated enough without HTML so it depends of context I believe. Is this an industrial process, webmarketing or else? To make it accessible, I'd use HTML images with alternative text trying to describe relationship.

Red arrows could be anchor links, probably.

Answer 2

I Think this image can be optimized pretty good, as it doesn't have a very complicated graphic. Therefore an easy solution can be just including it as an background image and then you can set the text and links into place using css.

A better solution is to break the picture into smaller components, then this way you can define "div" s with the background-color, border, and border-radios as the gray parts, and set the white elements as the background-image of "a" tag... However for the arrows I think you should include them as background-image...

Hope this helped...