ホームページのサンプル＝＞ Composer用 || Word2000用 | Word2007用 | 

サンプルを改造して自分のホームページにする

準備段階（１〜３）
 　public_htmlフォルダーを作り、index.htm を保存する

１a．自分のホームディレクトリに、"public_html"というフォルダーを作る

1. すでに自分のユーザーIDとパスワードでログインしているので、
2. デスクトップの「コンピュータ｣アイコンをダブルクリックし、自分のホームディ レクトリを クリックすると、その中身が見えるようになる。
3. ＜ファイル＞メニューの＜新規作成＞＜フォルダ＞を選び、「新しいフォルダ」をいったん作 る。
4. 「新しいフォルダ」の名前を　"public_html"に変える。
1. 名前を変えたいフォルダーを選択し、そのまま右クリックし、「名前の変更」を選び、 フォルダー 名を青色反転表示させる。
2. 入力モードを「直接入 力｣にして、反転表示されたフォルダー名を"public_html"に変える。
• 中央の "_" は「アンダーバー｣と読む。キーボードの右下の "Shift+ [ ＿｜ろ ]キー"で入力。
3. 同じウィンドウの中の白地の部分のどこかをマウスでクリックして確定する。

1b. ffftpを使い、各自のホームディレクトリの「属性」を変更する。　詳細はこ ちら(pdf)。

２．「ホームページのサンプル｣(index$$.htm)を public_html フォルダーに保存する

1. このページの最上段にある「ホームページのサンプル｣の中の一つを右クリックし、「対象をファイル に保存」をクリック。
2. 「名前をつけて保存」ウィンドウで、「保存する場所：」を自分のホームディレクトリの中の "public_html"フォルダーに設定する。（新しいフォルダーなら中身は空）　
3. 「保存｣ボタンをクリック。
4. 「ダウンロードの完了」ウィンドウが出たら、OKボタンをクリック。
5. "public_html"フォルダーの中に "index$$.htm" があることを確かめる。
• ＜注意＞"public_html"フォルダーのアイコン（黄色）をク リックす る。文字列の"public_html"をクリックしない！

３．保存した "index$$.htm" のファイル名を、"index.htm" に変える

1. "public_html"フォルダーに保存した"index$$.htm"ファイルを右 クリッ ク。
2. 「名前の変更」をクリックすると、ファイル名が青色反転表示される。
3. 矢印キーだけを動かしてカー ソルを移 動させ、"index$$.htm" の中の"$$"だけを消して、 ファイル名を"index.htm" に変える。
4. 同じウィンドウの中の白地の部分のどこかをマウスでクリックして確定する。　Enter キーを押さ ない。

編集段階
　自分のホームページとウェブサイトを構築する

４．"index.htm"ファイルの改造（編集）を始める

1. 自分のホームディレクトリのpublic_htmlフォルダーを開ける。
• ＜注意＞ public_htmlフォルダーのアイコン（黄色）をクリックする。文字列の"public_html"をクリックしない！
2. index.htm ファイルをクリックして、IE（InternetExplorer)で表示する。　
• この段階では閲覧できるだけで、編集はできない！！
3. IE の ＜ページ＞メニューの ＜Microsoft Office Wordで編集＞をクリックすると、MS-Wordにファイルが読み込まれて編集可能になる。

５．index.htmを自分のホームページに改造（編集）する

1. 改造（編集）は普通にMS-Wordを使うときとほとんど同じ。ドラッグアンドドロップに よる文字 列の移動/コピーなど。
2. 元に戻したいときは、＜元に戻す＞ボタンを押せばいい。
 
3. 末尾の「更新日：200y年mm月dd日」は自動的に更新されるの で、消さない ように。
4. 背景色だけを変えるには、＜ページレイアウト＞の[ページの色]で色を選ぶ。
• または、その下の「塗りつぶし効果」をクリッ クして、「テクスチャー」タブから好きなものを選ぶ。
5. 「私」の文字の右横にカーソルを置き、各自の名前を書いたあと、「私」を消す。
   
6. 文字列のスタイルを変えるには、文字列を選択し、＜ホーム＞の[フォントの色]や[フォン トサイズ]などから選択する。
7. ページ全体のデザインを変えるには、＜ホーム＞の[スタイルの変更]→[スタイルセット]から 選 ぶ。
8. <<タイトル>>を変えるには、Officeボタンを押し、「配布準 備」→「プロパティ」の「ファイ ルの概要」タブの「タイトル」の中を変える。
9. "名前"の文字列をWordArtによる画像に置き換える。（問題あり）

• 少し改造したら、「上書き保存」ボタン（FDの形をしたアイコン）をこまめにクリックして保 存する。大きな改造の直前はとくに。
• 改造したファイルをIEで表示させ、「更新」ボタンを押してから、改造の成果を確認する。
  
• ＜表示＞の[Webレイアウト]を選んで、改造したファイルを表示させる。
• 以上の、改造→保存→IEによる表示と更新　を繰り返しながら改造（編集）をする。

６．自分のホームページを閲覧する

IEのアドレス欄に、自分のホームページ・アドレスを書き込んで、Enterすると、
public_htmlフォルダーの直下にある index.htmファイルが自動的に表示される。

[ ホームページ・アドレスは]  wwwint2.int.komazawa-u.ac.jp/~<ユーザーID>/

＜重要注意＞index.htmファイルは、public_htmlフォルダーの直下に置く。他 のフォルダーに移動させない。

参考＝「ウェブサイトの構成例」

ゼミ生紹介のページができてリンクが張られたら、そこから閲覧できる。
自分のホームページのショートカットを、ホームディレクトリの中にコピーしておくと便利。

注意　（よくある誤り）

　外から閲覧しているWebページを、そのまますぐに編集する（書き換える）ことはできない！（当然）
　
　自分のホームディレクトリの中のpublic_htmlフォルダーの中にパスワードを使って 入り、編集したいWebページをMS-Wordに読み込むことによって、編集可能になる。（大文字の「４.」を見よ）

　「Microsoft Office Wordで編集」を選んだときに、Wordのタイト ルバーのファイル名のあとに、「（読み取り専用）」と書かれていたら、編集（書き換え）はできない。

7．画像を挿入する

1. Webページに挿入したい画像ファイルを、public_htmlフォルダーに保 存 しておく。
• サンプル画像の一つの上にマウスカーソルを置き、右クリックし、「名前を付けて画像を 保存」を 選んで保存。
• たとえば、携帯電話で撮った画像を添付ファイルとして大学の自分のメルアドに送信し、 Active!mailを使って保存。
2. 画像を挿入したいWebページを、MS-Wordで編集可能にする。
3. public_htmlフォルダーに保存された画像ファイルを右クリックし、「コピー」を クリッ ク。
4. 編集可能にしたWebページの中の、画像を挿入したい場所でマウスを右クリックし、「貼り 付け」を クリック。
5. 挿入した画像の大きさを調整するには、画像をクリックし、画像の外枠をマウスでドラッグす る。
6. 最後にMS-Wordの「上書き保存」ボタンをクリック。

 
サンプル画像

　　　

8．自分のWebページの中の文字列に、別のWebページをリンクする（1）

　既存のホームページ／Webページにリンクする 　

1. 自分のWebページ（たとえば"index.htm"）をMS-Wordで編集可能にして、 リンク元にしたい文字列を書く。（たとえば「ヤフージャパン」）
2. リンク元にしたい文字列を選択して反転表示させ、その上にマウスポインターを置いたまま右 クリックし、「ハイパーリンク」を選ぶと、「ハイパーリンクの挿入」ウィンドウが出る。
3.  同上ウィンドウの左端の「リンク先：」の下の、「ファイル、Webページ」をク リック。
4.  同上ウィンドウの「検索先：」の欄の右横にある 「Webの参照」ボタン（青い虫眼鏡の形）をクリックして、IEを立ち上げる。
5. 立ち上げたIE に、リンク先にしたいホームページ／Webページを表示させる。
6. Webページを表示させたIEの「最小化」ボタンをクリックすると、「ハイパーリンクの挿入」 ウィ ンドウに戻る。このウィンドウの下の「アドレス：」の欄に、リンク先にしたいWebページのアドレスが自動的に入ったこと（たとえば"http: //www.yahoo.co.jp"）を確かめる。
• 別の方法として、リンク先のWebページをIEで表示させて、その「ア ドレス｣欄の中をコピーし、これを「ハイパーリンクの挿入」ウィンドウの「アドレス：」の欄に貼り付ける。
7.  OKボタンをクリックすると、リンク元にしたい文字列がリンク文字になる。
8.  MS-Wordの「上書き保存」ボタンをクリック。
9. リンク元のファイルをIEで表示させ、更新ボタンをクリックし、リンク文字をクリックし、リン ク先のファイルが表示されれば成功。

9．自分のWebページの中の文字列に、別のWebページをリンクする（2）

　新しいWebページを自分で作り、これにリンクする

１．リンク先となる新しいWebページを作る＝既存のWordファイルをWebページに 変換する（元のWordファイルは残る）

1. MS-Wordで作成した文書ファイル（Wordファイル）を、ホームディレクトリの「小林ゼミ」フォルダーに保存する。
2. 保存したWordファイルを編集可能にして、必要なら編集（修正）する。
• ＜表示＞の[Webレイアウト]を選び、改造したファイルを表示させ、編集の成果を確かめる。
3. MS-WordのOfficeボタンの[名前を付けて保存]→[その他の形式]を選ぶと、「名前を付けて保存」ウィンドウが出 る。
4. 同上ウィンドウの「保存先：」を、public_htmlフォルダーの中の適切な場所に設定する。
• 「ゼミで発表したこと」なら、"seminar"フォルダーに設定する。
5. 同上ウィンドウの「ファイルの種類：」を「Webページ」に設定する。
• 〔急所〕→「単一ファイルWebページ」を使わないこと！
6. 同上ウィンドウの「ファイル名：」の欄に、Webページのファイル名を 必ず「直接入力｣で（半角英数で）書き込む。（たとえば"abcprf"、"rp0x0405"など）
• 〔急所〕→ WWWでは日本語のファイル名は普通は通用しない。
7. 「保存」ボタンをクリックすると、WordのファイルがWebページに変換されて、新 しいWebページが「保存先：」にできる。
• このとき自動的に、新たなフォルダーもできる（たとえば"abcprf.files"フォルダー）が、この フォルダーは無視する（中身を変更しない）。

２．リンク元のファイル（たとえば"index.htm"）の中の文字列に、新しく作っ たWebページ（たとえば"abcprf.htm"）をリンクする（後者がリンク先ファイル）。

1. リンク元のファイルを編集可能にし、リンク元にしたい文字列を書く。 （たとえば「自己紹介」）
2. リンク元にしたい文字列を選択して、反転表示させ、その上にマウスポインターを置いた まま右クリックし、「ハイパーリンク」を選ぶと、「ハイパーリン クの挿入」ウィンドウが出る。
3. 同上ウィンドウで、左端の「リンク先：」の下の、「ファイル、Webページ」をク リッ ク。
4. 同上ウィンドウの中央の「検索先：」欄を適切な場所に設定し、その下のボックスにファ イル一覧を表示させる。
5. 適切なリンク先ファイル（た とえば"abcprf.htm")をクリックして、そのファイル名が「アドレス：」の欄に入ったこと を確かめる。
6. 「OK」ボタンをクリックすると、リンク元にしたい文字列がリンク文字になる。
7. MS-Wordの「上書き保存」ボタンをクリック。
8. リンク元のファイルを IEで表示させ、更新ボタンをクリックし、リンク文字をクリックし、リンク先のファイルが表示されれば成功。

public_htmlフォルダーの中に "seminar"フォルダーを作る

• 「ゼミでの発表」に関連するWordファイルなどは、いったん「小林ゼミ」フォルダーなどに保存し、それをWebページに変換する。この Webページの 「保存先」はすべて、"seminar"フォルダーにする。

「ゼミで発表したこと」の一覧表となるWebページとして、replist0.docを使う

• このファイルを「小林ゼミ」フォルダーにダウンロードし、Webページに変換して seminarフォルダーの中に保存する。
• index.htmファイルの中の文字列「ゼミで発表したこと」を、replist0.htmファイルにリンクする。