サイトをデザインするとき
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, "\"");
}
[/js]
これを下記のように変えてください。
[js]
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, "\"");
}
[/js]
変更点はhtmlの場合は[js]<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