新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

FireworksのHTML書き出し方法

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

今となっては昔の話ですが、FireworksでのHTML書き出し時のお話。
忘れないうちに書いておく。

スポンサーリンク
 

みなさんは、FireworksでHTMLを書き出しするときはどうしてますか?
スペーサー使ってますか?
そもそも、スペーサーって何?って人もいるかもしれません。
スペーサー(SPACER)とは、HTML書き出し時にレイアウト崩れを防ぐために、
FireWorksが勝手につけてくれる1px×1pxの透明GIFファイルのことです。
ちなみにファイル名は「spacer.gif」。
書き出し後に画像のあるディレクトリを覗いてみると、きっと見つかるでしょう。
これを、テーブルの一番上(もしくは一番右)のセルに貼り付けて、
レイアウトが崩れないようにしています。
(そもそも、テーブルタグをレイアウトに使うのはオススメできないのですがそれは置いておいて)
さて、こうやって作り出したHTMLをDreamweaver(かつてドリームウェーバーと言っていましたが間違いです。ドリームウィーバー「夢をつむぐ」が正解です。)へ持っていって、編集します。
テキストはなるべく画像じゃないほうがいいので打ち直します。
画像だったテキストを打ち直すと文章がリフロー(文字が溢れ出る)しちゃうこともありますが、
そうなるとさあ大変。レイアウトがぐちゃぐちゃに。

そんなときは、書き出し時にスペーサーなし(ネストテーブルスペーサーなし)をえらんで書き出ししましょう。
Dreamweaverで開くと画像の切れ目に罫線が入ってますが気にしない。
(var.8ではこの問題は解決しているようです)
検索置換で「undefined」を「0」に置き換えれば直ります。
準備OK!!

この形式で書き出したHTMLファイルを使うと、
valignで、上ぞろえ、下ぞろえ等の設定をする必要はありますが、
比較的自由に画像をテキストに変えたり、
インラインフレームを入れたり、
本文部分をすっかり入れ替えたりできるようになります。

ぜひ、お試しください。

 - Webデザイン, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Windows10にアップデートするとWordPressブログの更新がもっさりする

1年以上前の記事です。内容が古い可能性があります。もう、待ったなしとなりましたが …

気をつけよう。面接官が語る印象を悪くする口癖(場合によっては一発不合格!?)

1年以上前の記事です。内容が古い可能性があります。職業訓練校で講師をやっています …

鍵(ロック)掛けられても鍵(ロック)掛ける前にフォローしておけばツイートが見れる【ツイッター】

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)っ …

WordPressでテーマカスタマイズ、ヘッダー(header.php)、フッター(footer.php)で消してはいけないプログラム #wp

1年以上前の記事です。内容が古い可能性があります。自分でカスタマイズしたWord …

no image
使えない検索サイト「Dooggle」

1年以上前の記事です。内容が古い可能性があります。なんだか最近新しい検索サイトが …

iPhoneの写真データから位置情報を取り除く方法

1年以上前の記事です。内容が古い可能性があります。先日、Flickrの地図表示が …

「フライパン」を使うと5分でご飯が炊ける。と思ったら…

1年以上前の記事です。内容が古い可能性があります。うちの炊飯器にはタイマーがあり …

no image
プロバイダ(接続サービス・ホスティングサービス)

1年以上前の記事です。内容が古い可能性があります。大概どこのお客さんでもインター …

USTREAMのiPhoneアプリでアカウントを切り替える方法

1年以上前の記事です。内容が古い可能性があります。今年の「うちわ祭」USTREA …

目指せNO.2、独立よりもこっちのほうがいいかもしんない

1年以上前の記事です。内容が古い可能性があります。一人でやっても鳴かず飛ばず。 …

血液型オヤジ