fireworksで画像スライスしてHTML書出しする時、同時にアンカーを埋込む

サイトをデザインするとき
Fireworksで画面をデザインしてDreamweaverでリンクを張って画面遷移の確認をしてもらうのだけど、ページにアンカーがある場合、私の知る限りFireworks上でアンカーを挿入できないのでスライスしてDreamweaverでアンカーを埋め込んでいた。

FAQなどのページで大量にアンカーがあるとしんどいので、なんとかFireworksから書き出すときに自動でアンカーを埋込めないかなと思っていた。

そこで、書出し時にHTMLを生成しているファイルを改造して、自動でアンカーを埋込むようにしてみました。

※この改造は自己責任で行ってください。変更したことによる損害等については一切責任を負いません。

編集するファイルは Fireworksのインストールパス\Configuration\HTML Code\Dreamweaver\SLICES.XTTというファイルです。まずコピーをとることをオススメします。

テキストエディタでファイルを開いてAssemble info for image tagを検索してください。
すると下記のようなコードが書かれていると思います。

if (!fw.xhtmlOutput){ // HTML STYLE
					WRITE_HTML("<img name=\"", cellName, "\" src=\"",
						src, "\" width=\"",
						curSlice.width,"\" height=\"", curSlice.height, "\" border=\"0\"");
				} else { // XHTML STYLE
					WRITE_HTML("<img name=\"", cellName, "\" src=\"",
						src, "\" width=\"",
						curSlice.width,"\" height=\"", curSlice.height, "\" border=\"0\" id=\"", cellName, "\"");
				}
&#91;/js&#93;


これを下記のように変えてください。

&#91;js&#93;
if (!fw.xhtmlOutput){ // HTML STYLE
					WRITE_HTML("<a name=\"", cellName, "\" ></a><img name=\"", cellName, "\" src=\"",
						src, "\" width=\"",
						curSlice.width,"\" height=\"", curSlice.height, "\" border=\"0\"");
				} else { // XHTML STYLE
					WRITE_HTML("<a name=\"", cellName, "\" /><img name=\"", cellName, "\" src=\"",
						src, "\" width=\"",
						curSlice.width,"\" height=\"", curSlice.height, "\" border=\"0\" id=\"", cellName, "\"");
				}
&#91;/js&#93;


変更点はhtmlの場合は&#91;js&#93;<a name=\"", cellName, "\" ></a>

xhtmlの場合は

<a name=\"", cellName, "\" />

を追加しているだけです。
これで書き出したとき自動でアンカーが挿入されます。
もしスライスしたセルの名前を1,2,3,4,…にするとアンカー名はn1,n2,n3,n4,…になります。

Fireworksでスライスするとファイル名+_r1_c1、_r2_c1みたいにセル名が勝手に設定されるので
アンカーを使う場合は1,2,のように設定しておいた方が分かりやすいと思います。

注意点としてはスライスのリンクを設定すると書き出したとき

<a href=""><a name=""></a>

となってしまいリンクが使えません。デザインした画面内にリンクをつける場合はホットスポットツールでリンクをつければよいです。

以上。


追記:HTMLスライスなんてものもあるんですね。これにアンカーを入れてみると動きましたが、イメージのスライスとは同居できないようなのでこれでアンカー埋めようとか思わない方がいいかも(制御もめんどいし)。
あと、ホットスポット(イメージマップ)っていらないものを非表示にしてHTML書き出してもしっかり出力されるのね。CS3のページ機能を使えばうまくいきました。


HTML書き出しについてのより詳しい説明が本家にありました。
Modifying HTML Output with HTML Styles in Fireworks

関連する記事:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です