powerpoint流程图到html

我有以下 image作为一个powerpoint流程图（超链接没有显示文本）。powerpoint流程图到html

我想把这个图表变成一个html网站。任何想法如何得到这个任务的好结果？

我认为重新编码在html中是很麻烦的。

谢谢。

来源

2012-05-25 TonyC

除了在顶部使用带有一些不可见链接叠加层或图像映像的图像之外，这是一个相当高的顺序。 –

文字上的灰色背景（5 ，左边2）可能是同一水平的标题，所以他们会漂浮在右边，并在每组箭头前出现。

箭头的每一个单独的集可以相当容易地编码列表和风格，因为这些面包屑：

Simple scalable CSS based breadcrumbs（由Veerle Pieters的）
Breadcrumb Navigation with CSS Triangles（克里斯Coyer）

他们如果它很少占用2行（Firefox/Ubuntu和Safari/Mac有laaarge字体，请不要假定您的文本将始终保持在1行），但可以使用内容进行扩展。不要说缩放文本应该是taken into account）

至于各个系列之间的橙色箭头......没有HTML就足够复杂，所以这取决于上下文我相信。这是一个工业过程，网络营销还是其他？为了使它可访问，我会用HTML图像与替代文字试图描述关系。

红色箭头可能是锚链接，可能。

来源

2012-05-25 21:17:51 FelipeAls

感谢您的链接。现在玩了一段时间的第二个链接。我唯一的问题是，我希望每行的第一个箭头在其左侧也有这个“箭头缩进” - >在我的图像中最左侧的箭头。任何想法如何设置？ – TonyC

没有'：before'或'：after'是为父'ul.breadcrumb'定义的，所以我会使用它与内部箭头使用的相同技术。它给出了像.breadcrumb：在边框底部：25px纯红色; border-left：15px纯绿色; border-top：25px纯蓝色; 内容：“”; display：block; 身高：0; left：0; margin-top：-5px; position：absolute; top：50％; 宽度：0; }'。然后在第一个链接上添加一些边距（填充？）以补偿新箭头：'。breadcrumb li：第一个孩子a {margin-left：10px;/*或15？待定* /}' – FelipeAls

谢谢 - 这个工作进行了一些小的调整。 – TonyC

我觉得这个图像可以优化得非常好，因为它没有非常复杂的图形。因此，一个简单的解决方案可以只是将其作为背景图像，然后您可以使用CSS设置文本和链接到位。

更好的解决方案是将图片分解成更小的组件，然后用这种方法可以将背景色，边框和边框收音机定义为“div”作为灰色部分，并将白色元素设置为“”标签的背景图片。不过因为我认为你应该把它们作为背景图像的箭头...

希望这有助于...右边

来源

2012-05-25 21:12:14

powerpoint流程图到html

回答

相关问题