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

回答

相關問題