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を入力すれば完成したホームページが表示されます。

http://kanacom2.la.coocan.jp/wordhp/hprei.htm

 

 

ツール「Word_html文書変換」の利用

 

変更の頻度が多い場合は ツール「Word_html文書変換」を使用すると便利です。

あらかじめ変更する内容を登録しておくと、自動変換します。

 

標準CSSシートに追加するスタイルシートのデータを追加します。

 

編集シート100行目以降に他の追加変更の内容を記入します。

(100行までは、標準CSSの追加などシステムが使用します)

キーを探し、その位置からオフセット分ずらした行に指定行を挿入し、指定行を貼り付けます。

 

ファイル一覧シートに変換するファイル名を登録し、全変換または、選択行の変換を押すと変換されます。

 

 

ファイルをバックアップし、そのバックアップファイルを変換します。

 

 

使い方は、「Word_html文書変換」の説明シートを参照ください。

 

以上で説明を終わります。

 

 HOME