Word で Web ページを作る
このページは、2012年9月に作成した。最近、WebサイトのURLの変更があり、リンクの修正が必要になった。そこで、Wordからhtml に変換したページもチェックすることになった。
このとき、Wordからhtml に変換する際、Wordの原稿は次のように作られていると、スムーズにhtml に移行できることが分かった。
- Wordは複数のページにしないで、1ページ単位で作る。
- 「ヘッダーやフッター」は付けない。
- 本文や写真の説明は、「テキストボックス」を使う。
- そして、Wordの1ページのすべての写真とテキストボックスを「グループ化」にする (ようするに、Wordの1ページをグループ化にしてしまう)。
Wordでハイパーリンクを「テキストボックスや図形」で設定して、html に変換して、変換したhtml をWordで開くと、ハイパーリンクは動作する。これをブラウザーで開くとリンクが無効になっている。
下記は、2012年9月に記載した。
私のホームページに、「寄稿コーナー」がある。原稿をお願いするとき、一般に使われている Microsoft のWord で作成してもらっている。 最初のころ、Word ファイルから HTMLファイルに変換しても、IBMホームページビルダーで変更するのに大変手間が掛った。しばらく寄稿の話がなかったのでそのままにしていた。 ところが突然、「寄稿をするぞ」とメールが届いた。そこで、また一苦労しなければならない。と思ったので、作者の原稿通りにWord ファイルからHTMLファイルに移行できないかと挑戦した。その結果、ほとんど手を加えないで、HTMLに移行できることを見つけた。 そこで、原稿作成者が Word で作成して実際にWeb 上(ブラウザで)で確認ができるように手順をまとめた。今後、原稿作成者は、この手順で作成して、ブラウザで確認した後の「*.htm」ファイルと「*.files」ファイルを受け取り、Web に登録したいと思っている次第です。
Word で原稿を作り、ブラウザで確認する手順をまとめましたので、以下に記述します。Word は、Microsoft Office Word 2007 を使用しています。
- Word で原稿を作成する
- 出来上がったWord ファイルをHTML ファイルに移行する
HTMLファイルに移行すると、「*.html」と「*.files」の二つのファイルが生成される。このファイルは対となっているため、「*.html」を削除すると「*.files」も一緒に削除されるので注意すること。 - ここから先は、移行したHTMLファイルを使用する。
HTMLファイルに移行した時点では、Word は、HTML ファイルを表示している。
Word を「閉じた」場合は、次からは、「*.html」ファイルをWord で開く。 - 移行したHTMLファイルに対して、次の修正を行う。
1)インデントの調整
2)画像を「行内」に設定する。
3)「改行」が表示されたら、「改行」を削除する。
4)HTMLファイルを2個作成した場合は、2つのファイルにリンクを張る。
5)「保存」をする。
[ 保存」する場合、「上書き保存」ができないので、ファイル名を付けるとき、
特に「リンク」を張っている場合は、注意が必要である。 - 「*.htm」ファイルをブラウザで開いて確認をする。
問題がなければ、最新版の「*.html」ファイルと「*.files」ファイルをWeb 登録者に提供して頂く。 - Web 登録者の作業
ステップ5までで、殆んど完成で、このままWeb に登録できるが、ページのタイトルやリンクが必要な場合は、追加しなければならない。
■Word で原稿を作成する手順
Word 原稿を作成依頼するとき、次のことを考慮して頂く。
- 1行は、「32〜34文字」以内で、最後の桁に必ず、「改行」を入れる。
- 文字の標準の大きさを「14ポンド」に設定する。
- 行間欄の行間は、「固定値」で、間隔は、「18pt」に設定する。
- 写真の挿入について
写真の挿入は、まだ経験が少ないが、写真と説明文が別々にあり、必ず写真の下に説明文を置く場合は、テキストボックスの中に写真と説明文を一緒に含むといいかもしれません。いろいろ試してください。
以上を設定して、文字の装飾や画像の挿入などは、Word の機能をフルに使用して原稿を作る。
1.1行は、「32〜34文字」以内で、最後の桁に必ず、「改行」を入れる。 2.文字の標準の大きさを「14ポンド」に設定する。 |
3.行間欄の行間は、「固定値」で、間隔は、「18pt」に設定する。 |
■HTMLファイルに移行する
次の手順でHTMLファイルに移行する。
- 原稿のWord ファイルを開く。
- 保存するときに、他の形式で、「Web ページ(*.htm;*html)」を選択して「保存」する。
1.原稿のWord ファイルを開く。 2.「Office ボタン」をクリックして、「名前を付けて保存」をポイントする。 3.表示されたメニューの「その他の形式」をクリックする。 |
4.「名前を付けて保存」画面で、ファイルの種類の右にある「▼」ボタンを クリックする。 |
5.表示されるメニューから「Web ページ(*.htm;*html)」をクリックする。 |
6.下記画面が表示されるが「続行」をクリックする。 |
7.保存が完了すると、タイトルバーのファイル名が「.htm」に変わる。 |
8.保存先には、「*.files」と「*.htm」ファイルが生成される。 |
■HTMLファイルを修正する
HTMLファイルを次の手順で修正する。
- 「HTML」ファイルをWord で開く
- インデントを設定する
画面表示が中央よりになるように「インデント」を設定する。 - ページのレイアウトを調整する
ページのレイアウトを調整するために、画像を「行内」に設定して、余分な「改行」を削除してページのレイアウトを調整する。 - 2つのHTMLファイルを作っているならば、リンクを張る。
- 最後に、保存をする
すべての作業が終わったら、「保存」をする。そのとき、上書きができないので、 ファイル名を付けるときは注意すること。 - ブラウザで確認する
保存したHTMLファイルをブラウザで開いて確認をする。
●HTMLファイルをWord で開く
1.「HTMLファイル」を右クリックする。 2.表示されたメニューの[プログラムから開く」をクリックする。 3.表示されたメニューの[Microsoft Word]をクリックする。 |
●インデントを調整する
1.[ホーム」タブの[編集]グループの[編集]をクリックする。 2.[選択]の[すべて選択]をクリックする。 |
3.[段落]グループの[インデントを増やす]をクリックして、左から6〜10の間に なるように設定する。 |
●ページのレイアウトを調整する
1.「画像」をクリックする。 2.[書式]タブの [配置]グループの[文字列の折り返し]をクリックする。 3.[行内]をクリックする。 |
4.表示される「改行」を削除する。 |
5.「改行」を削除してレイアウトを調整する。 |
6.すべての「画像」に対して実行する。 |
●リンクを張る
例えば、HTMLファイルが2つあって、次のファイルにジャンプさせたい場合は、リンクを張る。ファイルが1つの場合は必要なし。
1.「リンク張るテキスト」を選択する。 2.[挿入]タブの[リンク]グループで[ハイパーリンク]をクリックする。 3.「ハイパーリンクの編集」画面で、「リンクするファイル名」をクリックする。 4.[OK]をクリックする。 |
●保存をする
保存する場合は、上書きができない。「名前を付けて保存」となるが、ここで、注意が必要なのは、保存しようとするファイルにリンクが張られている場合は、 「ファイル名」をリンクを張った名前を付けなければならない。
1.[Office ボタン]をクリックする。 2.[名前を付けて保存]をクリックする。 |
3.「名前を付けて保存」画面が表示される。 4.「保存先」を確認する。 5.「ファイル名」を入力して、[保存]をクリックする。 |
■ブラウザで確認をする
出来上がったHTMLファイルをブラウザで開いて、全体を確認する。もし、これで OK ならば、この時点の「*.htm」と「*.files」の二つのファイルを Web 登録者に提供する。
1.[HTMLファイル]を右クリックする。 2.[プログラムから開く]をクリックする。 3.[Internet Explorer]をクリックする。 |
4.ブラウザで確認をする。 |
■Web 登録者の作業
もし、ページのタイトルやリンクが必要な場合は、次の操作をする。
- タイトルやリンクを追加する
- リンクの設定は、[ハイパーリンク]を使用する
●リンクを設定する
1.[リンク]の範囲を選択する。 2.[挿入]タブをクリックする。 3.[リンク]グループの[ハイパーリンク]をクリックする。 4.[リンク先のファイル]を選択する。 |
5.1〜4項と同じ操作をする。 |
このページのトップへ
皆さん、どうでしょうか、この手順でページを作れば、「HTML言語」を知らなくても、また「IBMホームページビルダ」などのアプリケーションソフトが無くても作れますね。今まで、Word で作った名作が、引出しに眠っているのではないでしょうか。先ず、この手順で「HTMLファイル」に移行して、ブラウザで確かめてみてはいかかがでしょう。
このページは、下記の書庫を参照しました。
月刊誌「PCJapan」 発行 ソフトバンク クリエイティブ株式会社
月刊誌「PCJapan」 発行 ソフトバンク クリエイティブ株式会社