Word書類（.doc形式）をWebページ（.html形式）に変換する

Webページの素材としてワード形式のデータをいただきました。オーサリング手順をメモっておきます。

私の制作環境

• Mac OS10.4
• Microsoft Word 2004
• Macromedia Studio 8 (Dreamweaver 8 と Fireworks 8)

1. （レイアウト確認用として）PDFに変換

直接PDFを使う訳ではないですが、レイアウトの確認用にPDF版を用意しておきます。Wordを開くのに結構時間がかかるのと、書類自体重い場合が多いので、その辺のストレス対策になります。いちからデザインを構築する場合でも、発注者の意思を理解する上でサクサクと見えるようにしておくと良いです。プリントアウトしても良いのですが、大量に原稿がある場合はこちらの方が経済的です。

2. Web ページとして保存

目印として、ファイル名の頭に「word_」や「w_」をつけておきます。

「保存」を押すと、htmlと画像ファイルが生成されます。

画像ファイルはオリジナルのサイズで一つのフォルダにまとめられるので、これだけでもうれしいです。画像は別途作業として、Fireworksで適当なサイズにリサイズしましょう。

3. Dreamweaverで余分なタグをお掃除

Wordが生成したHTMLは無駄に長い・重いので、Dreamweaverの便利な機能を使ってお掃除をしてやります。

現在、1,059行あります。

メニューの「コマンド」から「Word HTMLのクリーンアップ」（クリーンナップじゃないのね）を選びます。

全部チェックいれておけば、とりあえずOKです。

OKを押すと…、

色々、削除してくれました。

さ、ソースを見てみましょう。

1,059行あったソースが、396行に！ ほんと無駄に長いんですよね、Word生成のHTMLって…。

更に「HTMLのクリーンアップ」でspan要素を削除すると…、

299個のspan要素が消えました。HTMLは257行まで短くなりました。イェイ！ 容量は68KBあったのが16KBにまで軽くなりました。

4. HTMLを見て、そのまま編集するもよし、ブラウザで表示させてテキスト素材とするもよし

変換されたソースをざぁーと見てみます。

「こりゃイチから組んだ方が早そうだな」という場合は、HTMLをブラウザで表示し、テキスト素材として利用します。

そのまま編集していけそうなら、さらにDreamWeaverの便利な機能を使って完成形まで持っていきます。レガシーな要素、属性を、今どき風に置換しましょう。

「検索/置換」の機能を使って、b要素をstrong要素に置換したり、img要素にとりあえずのalt属性を追加していきます。（やり方は省略） ここまできたら、「変換」機能でXHTML1.0 tranditionalあたりにサクっと変換します。あとはいつものとおりのコーディングで、調整をしてください。

* * *

ということで、変換よろしく！＞右