Wordでホームページ作成
Wordを使って文書を作成し、ホームページとする方法を説明していきます。
Wordには、html形式で保存する機能がありますので、そのままホームページとすることができますが、見た目がよくありません。
エディタを使って、見栄えを良くすることができます。
その他、インラインフレーム、選択メニューなどを表示することができます。
また、ツールを使うことで、修正内容を登録しておくことで、自動修正ができますので、何回も修正する場合に利用できます。
Word文書例
サンプルデータをダウンロードください。
4つのword文書があります。
hprei.docx hprei.1docx hprei2.docx hprei3.docx
これをホームページに登録します。
html文書に変換
文書を1つ開きます。
[名前を付けて保存] を操作し、 [webページ(フィルター後)]を選択します。
([webページ]でも可能ですが、大きな文書で表示できない場合があります)
4つの文書をすべてhtml形式で保存します。
(C:\test \wordhpm\hprei.htm などで保存する。)
ブラウザを立上げ、見てみます。
ブラウザを立上げます。
C:\test\wordhpm\hprei.htm
と入力します。
作成したhtml文書の表示
次のように表示されました。
アクセスをクリックすると、下記表示されます。
見栄えを良くするため、3点を修正します。
・画面の中央に表示
・指定幅で改行
・行間を広く
html文書の変更
html文書をテラパッドなどのエディタで開いてみます。(メモ帳でも可)
この中に、文字を追加し、見栄えを良くします。
追加するのは、次の文字です。
|
body {line-height: 150%; width:600px; margin:0 auto; text-align:left; } |
75行から79行に追加しました。
-->
</style>
の前です。
html文書を保存します。
もう一度 C:\test\wordhpm\hprei.htm を表示してみます。
画面センターに見栄えよく表示されました。
line-height: 150%; 行間
width:600px; 幅
を意味します。
残りの文書も同じように修正します。
html文書の変更(メニュー追加)
次に、メニューの表示を変更します。
ちょっと長いですが、これを追加します。
スタイルシート
|
#headerBtm { background: #008000; /* メニュー色*/ } #header #globalnav .boxMenuList > li:hover, #header #globalnav .boxMenuList > li.focused { background-color: #00FF00; /* メニューホバー時の色*/ } /* -- リンク -- */ #header #globalnav .boxMenuList > li > a { position: relative; z-index: 2; transition: none; width: 100%; height: 100%; color: #fff; font-size: 1.5em; /* メニュー文字大きさ*/ font-weight: bold; text-align: center; text-shadow: 1px 1px #224613; vertical-align: middle; text-decoration: none; } /* -- リスト＆リンク内テキスト余白 -- */
#header #globalnav .boxMenuList > li, #header #globalnav .boxMenuList > li > a > span { display: table-cell; vertical-align: middle; width: 150px; /* メニュー幅*/ }
/* -- リンク内テキスト余白 -- */
#header #globalnav .boxMenuList > li > a > span { height: 10px; padding: 10px 10px; /* メニュー余白*/ } |
81行から117行に追加しました。
-->
</style>
の前です。
ボディー
|
<div id="headerBtm"> <div id="header"> <div id="globalnav"> <div class="boxMenuList"> <li class="menu1"><a href="hprei1.htm"><span>アクセス</span></a></li> <li class="menu2"><a href=" hprei2.htm "><span>開館日</span></a></li> <li class="menu3"><a href=" hprei3.htm "><span>各階案内図</span></a></li> </span></a></li> </div> </div> </div> </div> |
色付きの部分を取り去り、置き換えました。
もう一度 C:\test\wordhpm\hprei.htm を表示してみます。
ホバー(ポインタを上に置くと)で色が変わる見やすいものになりました。
html文書の変更(インラインフレーム追加)
インラインフレームを設置し、下のExcel文書をその中に表示してみます。
このExcelシートをhtmlで保存します。
詳細の下にheya.htmを表示するインラインフレームを設置します。
<iframe src="heya.htm" height=400 width=350 frameborder="1"></iframe>
を追加しました。
縦横スクロール可能なフレームが挿入されました。
サーバーへのアップロード
サーバーへのアップロードを行うため、FFFTPを立ち上げます。
FFFTPのダウンロード
https://www.vector.co.jp/soft/dl/winnt/net/se061839.html
設定にあたり、プロバイダーから提供される ホスト名、ユーザー名、パスワードが必要になります。
右画面にドラッグすると、サーバーに保存されます。
Homepage の下のwordhp に保存
画像が入っている文書では、画像のホルダが作成されますので、これもサーバーに保存します。この例では、hprei1.files
ブラウザを立ち上げ、下記のようにurlを入力すれば完成したホームページが表示されます。
https://iwasakisys.com/wordhp/hprei.htm
ツール「Word_html文書変換」の利用
変更の頻度が多い場合は ツール「Word_html文書変換」を使用すると便利です。
あらかじめ変更する内容を登録しておくと、自動変換します。
標準CSSシートに追加するスタイルシートのデータを追加します。
編集シート100行目以降に他の追加変更の内容を記入します。
(100行までは、標準CSSの追加などシステムが使用します)
キーを探し、その位置からオフセット分ずらした行に指定行を挿入し、指定行を貼り付けます。
ファイル一覧シートに変換するファイル名を登録し、全変換または、選択行の変換を押すと変換されます。
ファイルをバックアップし、そのバックアップファイルを変換します。
使い方は、「Word_html文書変換」の説明シートを参照ください。
以上で説明を終わります。