目次を表示

Ⅱ.実習(ワードでサイトをpc内に作成する)

事前準備1~3(フォルダ作成と拡張子の表示)

 まず、事前準備です。途中で、幾つかのファイルを作成することになりますが、 後に削除することを念頭に置いて、ファイルの保存場所としてデスクトップに、 フォルダ hptest を作成します。
更に、「拡張子を表示する」設定にします。

1.デスクトップにフォルダ(フォルダ名 hptest)を作成する (フォルダ名は hptest でなくても構いませんが、半角英数字にして下さい。)

1.1. 画面の背景部分でマウスを右クリック(メニューが表示される)
1.2. メニューで「新規作成」を選択する(サブメニューが表示される)
1.3. サブメニューの「フォルダー」を左クリック
1.4. 新しいフォルダ名を、半角文字で、hptest と入力し、Enter キーを押す
 Enter キーを押したことで、新規フォルダの名前が hptest に確定します。

2.フォルダ hptest に移る(フォルダ hptest をマウス左クリック)

作成したフォルダ hptest をダブルクリックします。 フォルダ hptest の内容が表示されますが、出来立てのフォルダですから、 何もない空の中身が表示されます。

3.拡張子を表示にしておく

3.1. 窓のメニュー「表示」を左クリック
3.2. 「オプション」を左クリック(フォルダオプション窓が表示される)
3.3. フォルダオプション内の「表示」メニューを左クリック
3.4. 詳細設定枠に移動し、その中にある 「登録されている拡張子は表示しない」のチェックを左クリックして外す (チェックが付いていない場合は何もしない)
3.5. 画面下の「適用」ボタンを左クリック。
3.6. 画面下の「OK」ボタンを左クリック。(フォルダオプション窓が消えます)
3.7. エクスプローラを最小化(タスクバーに表示される形に)する。

 以上で、事前準備完了です。以下、フォルダ hptest にサイトを構築します。 といっても、ページ数が1つだけの簡単なサイトですが・・・

ワードでサイト内容を作成する

 ここで、作成するサイトはページが一つだけの単純なサイトです。

1.ワードを開く。
2.「表示」メニューで、「Webレイアウト」を左クリックで選択する。
 「表示」のサブメニューに「Webレイアウト」がなければ無視して下さい。
3.ツールバーで、「中央揃え」を左クリックする。
4.適当に文章を記述し、装飾する(文字サイズ変更、文字色変更等)
5.画像を2~3個適当に挿入する(位置を、中央、左端、右端等を指定する)
6.ハイパーリンクを設定する

6.1. 文字列「リンクのテスト」を記述(文字を装飾しても構わない)
6.2. 文字列「リンクのテスト」を選択する(文字列先頭にマウスをおき、 左クリックしたままの状態で、マウスを文字列最後尾に移動し、左クリックを離す)
6.3. メニュー「挿入」を左クリック
6.4. サブメニューの「ハイパーリンク」を左クリック
(ハイパーリンク小窓が表示されます)
6.5. 左端枠でWeb(インターネットかもしれない)を選択する
6.6. 小窓の「アドレス」欄に URL を入力(もしくは貼り付ける)

6.6.1. 適当なWebページのURLをコピーして「アドレス」欄に貼り付ける
6.6.1'. パソコンクラブ「千代田」にするなら、「アドレス」欄に
   http://chiyodaclub.php.xdomain.jp/
と入力
6.6.2. 小窓のOKボタンをクリックする

作成したファイルを、
   フォルダ hptest に、・・・保存場所
   Webファイルとして・・・・ファイルの拡張子 htm または html
保存する

 ファイルの保存をしますが、保存場所(どこに保存するのか)と ファイルの種類(どんな種類のファイルとしてか)が大事になります。
1.「ファイル」メニューを左クリック(サブメニューが表示される)
2.サブメニューの「Web ページとして保存」を左クリックする。
 保存場所とファイル名の入力となるので、

2.1. 保存場所を、デスクトップのフォルダ hptest にする
2.2. ファイルの種類を、「Web ページ」にする
2.3. ファイル名を、半角文字で index.html(拡張子付き)にする
2.4. 保存を左クリック
2.5. ワードを最小化する
(終了しないのは、うまくいかなかった時のための保険です。)

作成したサイトをブラウザで確認する

1.事前準備の最後で最小化したエクスプローラ(タスクバーにある)を 左クリック。フォルダ hptest の内容が表示されます。
2.ファイル index.html とフォルダ index.file が作成されていることを確認
3.ファイル index.html をダブルクリック
(普段使っているブラウザで表示されればOK)

3 の操作で、ワード画面が表示される場合:
   ワードを最小化する。エクスプローラ画面の index.html を右クリック。
   メニューの「プログラムから開く」を左クリック。
   そこの、Internet Explore を選択(左クリック)してください。

4.画面の「リンクのテスト」を左クリックする
5.別ページ(ハイパーリンクで設定したページ)が開かれたことを確認する。
以上で実習は終了です。

【ワードとエクセル】

 実習では、ワードを用いてサイトを構築しました。 同様の方法で、エクセルを用いてサイトを構築できると思います。 実用的なサイトを構築する場合は、二つの理由から、 ワードよりエクセルを使うことを勧めます。
 一つは、パソコンクラブ「千代田」にはエクセルで実用的なサイトを 構築している会員がいるからです( さん)。 (分からないところがあったら聞ける。)
 もう一つは、ページの構成をする上で、 エクセルの方が容易だと思うからです。