Ｗｏｒｄでホームページ

Wordでホームページ の 旅 日 記 TOPページ サブページ アップロード マーキーの 挿 入 Microsoft Word 2010

目 次 1 Webページ 作 成 の 準 備 1 2 Webページの 作 成 と 保 存 5 3 フレーム 機 能 の 表 示 と 設 定 6 4 壁 紙 ボタンアイコンの 挿 入 とタイトルの 設 定 13 5 main( 下 フレーム)ページの 編 集 16 6 リンク 画 像 の 挿 入 とリンクの 設 定 18 7 TOPページにリンクの 設 定 23 8 文 字 マーキー を 入 れる 26 Webページの 作 成 と 保 存 フォルダの 作 成

1 Webページ 作 成 の 準 備 1 単 位 の 設 定 このホームページは 印 刷 するだけのものではなく パソコン 上 で 見 る[ Web]を 目 的 としたものなので 単 位 をポイント/ピクセルに 変 更 しておきます 1 Wordを 立 ち 上 げましょう デスクトップの Microsoft Word 2010 クリックします 2 Word が 開 きました メニューバー 左 の ファイル タブをクリックします 3 ファイルの 画 面 が 表 示 左 下 の オプション をクリック 4 続 いて 左 側 の 詳 細 設 定 をクリックします 1

5 Webのオプション ダイアログが 表 示 スクロールして 下 の 方 の 表 示 から 使 用 する 単 位 右 の 欄 をクリックして 一 覧 より ポイント(pt) をクリック ホームページには 国 際 基 準 により ポイント(pt) を 使 用 します にチェックを 入 れます 2 ブラウザの 指 定 の 設 定 (ブラウザのバージョンを 低 いバージョンにすることで 最 新 の 機 能 はつかえませんが ブラウザ 上 での 表 示 問 題 を 少 なくすることが 出 来 ます) 1 続 いて 下 にスクロールして Webオプション をクリック. Webオプション ダイアログボックスの ブラウザ タブをクリック 対 象 ブラウザを Microsoft Internet Explorer4.0 Netscape Navigator 4.0 またはそれ 以 降 ] に します 2

3 ファイル 名 と 保 存 場 所 の 設 定 1 Webオプション の ファイル タブをクリック 全 ての 項 目 にチェックをいれます 同 じ 階 層 に 画 像 用 フォルダが 作 成 され 画 像 ファイルがそこに 保 存 され.files がつきます 保 存 するときに リンク 切 れ の 問 題 が 起 きないようにします 2 モニタ 画 面 サイズの 設 定 図 タフ をクリック 画 面 サイズ 800 600 に ピクセル/インチ を 96 に OK をクリック 元 の 画 面 に 戻 ります 4 パスの 互 換 性 Windows 以 外 の OS や 国 内 以 外 のパソコンでは パス の 表 記 を を 使 用 しないので これによって 起 きる 問 題 を 避 けるために パスの 互 換 性 をとるようにします 1 互 換 性 オプションの 適 用 先 レイアウトオプション 左 の をクリックします 3

オプション の 中 の のチェックを 外 します OK をクリック 5 拡 張 子 の 表 示 webの 拡 張 子 が 表 示 されるように 設 定 します 1 コンピュータを 開 き (エクスフローラー)を 表 示 整 理 の をクリック フォルダと 検 索 オプション をクリック 2 フォルダオプション が 表 示 表 示 タブを 選 択 登 録 されている 拡 張 子 は 表 示 しない のチェックを 外 す OK をクリック 4

2 Webページ 作 成 と 保 存 フォルダの 作 成 1 保 存 フォルダの 作 成 作 成 した データ や 画 像 ファイル を 保 存 しておくフォルダを 作 っておきます 1 ドキュメント を 開 く 左 タスクの 整 理 の をクリックして 新 しいフォルダ をクリック 保 存 場 所 は 任 意 の 場 所 (ドキュメントの 以 外 に USBメモリー コンピュータ(D)ドライブなど) 2 青 く 反 転 した 状 態 で 表 示 されたフォルダに 名 前 を の 旅 日 記 と 入 力 ホームページ 作 成 に 必 要 な 画 像 保 存 フォルダ 資 料 も 移 動 しておきます 保 存 フォルダを 閉 じます 2 Webページの 作 成 1 Wordを 起 動 スタートボタン より すべてのプログラム Microsoft Word 2010 をクリック 5

3 Webページの 表 示 1 右 側 の 表 示 タブを 選 択 文 書 の 表 示 グループより Webレイアウト をクリック 2 Web ページになりました ページを 左 右 上 下 に 伸 縮 してみましょう 1 枚 のページとして 利 用 することができます 3 フレーム 機 能 の 表 示 と 設 定 ページを 左 右 上 下 分 割 して 利 用 できるフレーム 作 成 の コマンド をメニューバーに 表 示 します 1 フレームコマンドの 表 示 1 ファイル をクリック 左 下 の オプション をクリック 6

2 Webのオプション ダイアログが 表 示 左 側 の リボンのユーザー 設 定 をクリック 2 右 側 に リボンのユーザー 設 定 の 画 面 が 表 示 されました コマンドの 選 択 をクリックして 表 示 されたリストから すべてのコマンド を 選 択 3 また これから 選 択 するコマンドを 保 存 しておく 場 所 を 作 成 しておきます メインタブ 欄 外 の 新 しいタブ(W) をクリック メインタブの 最 下 段 に 新 しいタブ(ユーザー 設 定 )が 設 定 されました 7

4 これから フレームのコドを 選 択 して 作 成 した 新 しいタブ に 移 動 します コマンドの 画 面 を 1 下 にスクロールして 2 フレームのプロバティー を 選 択 中 央 の 3 追 加 をクリック 右 の 欄 に 4 フレームのプロバティー が 追 加 されました 5 続 いて 新 しいフレーム( 上 ) 新 しいフレーム( 下 ) 新 しいフレーム( 右 ) 新 しいフレーム( 左 ) を 11つずつ 選 択 してそれぞれ 2 追 加 (A) をクリックしていきましょう 3 右 新 しいグループ(ユーザー 設 定 )に 移 動 したのを 確 認 して OK をクリックします 8

6 Word のページに 戻 ります メニューバーに 新 しいタブ が 追 加 されていることを 確 認 します これから ホームページのフレーム 作 成 に 利 用 していきます 2 横 2 分 割 フレーム の 作 成 1 新 しいタブ をクリックして 選 択 コマンドの 新 しいフレーム( 上 をクリック 2 作 成 されたフレームの フレーム 枠 線 を 上 にドラッグします( 後 で 自 由 に 修 正 できます) 3 リンクターゲット 用 としてフレームの 保 存 新 しいフレーム タブを 選 択 して 開 いておきます 1 上 のフレームにカーソルを 置 き フレームのプロバティ をクリック 2 フレームのプロバティ が 表 示 フレーム タブを 選 択 名 前 の から menu を 選 択 基 準 を ピクセル に サイズ の 幅 を 170 位 ( 後 で 変 更 可 ) OK をクリック 9

3 下 フレームにカーソルを 置 き フレームのプロバティ をクリック 4 フレームのプロバティ が 表 示 フレーム タブを 選 択 名 前 の から mai を 選 択 サイズ はそのまま にして OK をクリック 6 4 Webページとして 保 存 Webページ とは 文 字 を 入 力 したり 画 像 を 挿 入 編 集 するページのことです 各 ページをWebページとして 保 存 ファイル の 中 に 保 存 をします (ファイル 画 像 保 存 用 ) 1 上 フレームで 右 クリック フレーム 名 を 付 けて 保 存 をクリック 10

2 名 前 を 付 けて 保 存 が 表 示 作 成 しておいた 保 存 ファイル の 旅 日 記 を 表 示 します(この 場 合 はドキュメントから) ファイル 名 = 半 角 英 数 で left ファイルの 種 類 の から Webページ(フィルタ 後 ) を 選 択 保 存 をクリック 保 存 を 尋 ねるアラートが 表 示 はい をクリック 3 下 フレームで 右 クリック フレーム 名 を 付 けて 保 存 をクリック 4 名 前 を 付 けて 保 存 が 表 示 されます ファイル 名 = 半 角 英 数 で right ファイルの 種 類 の から Webページ (フィルタ 後 ) を 選 択 保 存 をクリック 11

保 存 を 尋 ねるアラートが 表 示 はい をクリック 5 Web のtopページ ( left と right ) の 保 存 をします ファイル をクリック 名 前 をつけて 保 存 をクリック 6 保 存 フォルダ が 表 示 ファイル 名 を 半 角 英 数 で index. に ファイルの 種 類 の をクリックして Webページフィルタ 後 を 選 択 ページタイトル に の 旅 日 記 ( 各 自 の 名 前 )を 入 力 OK をクリックし 保 存 をクリック 12

保 存 を 尋 ねるアラートが 表 示 はい をクリック 4 壁 紙 ボタンアイコンの 挿 入 とタイトルの 設 定 1 画 像 を 壁 紙 として 挿 入 1 左 のフレームにカーソルを 移 動 ページレイアウト タブを 選 択 ページの 背 景 グループより ページの 色 の をクリック テーマの 色 最 下 段 の 塗 りつぶし 効 果 をクリック 2 塗 りつぶし 効 果 ダイアログが 表 示 図 タブを 選 択 続 いて 図 の 選 択 をクリック 3 画 像 保 存 ファイル 旅 日 記 画 像 を 開 いて kabe3 ( 任 意 ) を 選 択 挿 入 をクリック 13

4 図 の 枠 内 に 壁 紙 画 像 が 表 示 OK をクリック 下 フレーム main にも 同 じ 壁 紙 を 挿 入 しましょう 6 上 下 のフレームに 壁 紙 が 挿 入 されました 2 表 の 作 成 タイトル リンクボタン 挿 入 のための 表 を 作 成 1 右 フレームにカーソルを 置 き 挿 入 タブより 表 の をクリック 1 行 1 列 を 選 択 2 表 を ページの 中 央 に 設 定 と 枠 線 をなしに 設 定 をします 表 の 上 にカーソルを 持 っていくと が 表 示 このマークをクリックして 表 を 選 択 リボンの デザイン タブ 3 表 をページの 中 央 に 設 定 します 14

表 を 選 択 選 択 した 表 の 上 で 右 クリック 表 のプロパティ をクリックします 4 表 のプロバティ が 表 示 表 タブを 選 択 配 置 グループの 中 央 揃 え を 選 択 中 央 揃 え を 確 認 して OK をクリック 3 タイトルの 挿 入 と 編 集 表 の 中 に タイトル を 入 力 します 1 表 の 中 にカーソルを 移 動 し 半 角 英 数 で My Travel と 入 力 します 2 文 字 を 編 集 します 文 字 列 を 選 択 フォントの 種 類 の から AR Script3 Bold を 選 択 し サイズを 36 にして 位 置 揃 えを 中 央 揃 え にします 15

4 ボタンアイコン の 挿 入 HOME 空 のご 案 内 高 速 バス 定 期 観 光 バス Google 1 表 3 行 目 にカーソルを 移 動 します フォントから 上 記 の 文 字 を 入 力 します フォントの 種 類 AR PPOP 4B フォントのサイズ 14 に 設 定 します 2 上 書 き 保 存 をします ファイル から 上 書 き 保 存 をクリック 5 main( 下 フレーム)ページの 編 集 説 明 文 の 入 力 と 編 集 続 いて Webページを 開 いて right ページの 編 集 をします 閉 じたページの 開 き 方 ( 開 き 方 は2 種 類 あります ここでは 第 1の 開 き 方 で 開 きます 第 2の 開 き 方 はP29 で) Word を 起 動 します ファイル タブをクリック ファイル の 画 面 に 変 わります 左 下 方 中 央 の 最 近 使 用 したファイル をクリック 中 央 に 最 近 使 用 したドキュメント 一 覧 が 表 示 right.html をクリック 1 表 の 挿 入 この 後 の 作 業 説 明 文 説 明 文 の 上 下 に 挿 入 する 水 平 線 の 表 (1 列 3 行 )を 設 置 します 1 挿 入 から 表 の をクリック 1 列 3 行 の 範 囲 を 選 択 します 16

2 1 列 3 行 の 表 が 挿 入 されました ページの 中 央 に 移 動 します 表 の 右 上 の をクリックして 表 を 選 択 します ( 表 の 上 にカーソルを 持 っていくと 右 上 に が 表 示 される) 3 表 の 枠 線 を 非 表 示 にします 表 を 選 択 デザイン タブから 罫 線 の をクリック 枠 なしをクリックします 枠 線 が 点 線 ( 非 表 示 )で 表 示 されました 2 説 明 文 の 入 力 1 タイトルの 行 の 下 にカーソルをクリックして 移 動 カーソルを 表 の2 段 目 に 移 動 下 記 の 説 明 文 を 入 れていきます 喧 騒 の 都 会 から ちょっと 離 れた 古 い 町 並 みや 広 い 田 園 のある 風 景 は 私 たちをほっとさせてくれます 今 回 は そういった 観 光 地 をご 紹 介 いたします 3 文 字 の 編 集 1 入 力 した 文 字 列 を 選 択 します フォントの 種 類 = MS Pゴシック 太 字 フォントサイズ = 12P( 画 面 に 合 わす) 中 央 揃 え にします 17

4 水 平 線 の 挿 入 説 明 文 の 前 後 の 行 に 水 平 線 を クリップアート から 挿 入 します 1 説 明 文 の 上 の 行 にカーソルを 移 動 します 挿 入 タブから 図 グループの クリップアート をクリックします 2 下 に 水 平 線 の 画 像 が 表 示 されました 任 意 の 水 平 線 をクリック 上 の 行 に 挿 入 されました 3 行 目 にも 同 じように 水 平 線 を 挿 入 しましょう クリップアートを 閉 じます 6 リンク 画 像 の 挿 入 とリンクの 設 定 1 リンク 画 像 を 挿 入 する 表 の 作 成 1 水 平 線 の 下 に リンク 画 像 を 挿 入 する 2 行 3 列 の 表 を 作 成 します 水 平 線 の 下 中 央 でダブルクリックしてカーソルを 移 動 画 像 を 挿 入 する 表 を 設 置 します 挿 入 タブから 表 の をポイントし 表 示 された 表 の 2 行 3 列 を 選 択 します 18

2 表 が 挿 入 されました 枠 線 を 非 表 示 にして 中 央 揃 え にしておきます 3 画 像 の 大 きさの 固 定 するため セル の 幅 を 固 定 します 表 を 選 択 レイアウト タブを 選 択 自 動 調 整 の から 列 の 幅 を 固 定 する をクリックします 2 画 像 の 挿 入 リンクのする 観 光 地 の 画 像 をセルに 挿 入 します 今 回 は 北 海 道 富 良 野 北 海 道 小 樽 倉 敷 京 都 箱 根 スカイツリー の6か 所 のセルを 挿 入 します 富 良 野 小 樽 倉 敷 南 禅 寺 箱 根 スカイツリー 1 1 番 目 のセルにカーソルを 移 動 します 挿 入 タブから 図 グループの 図 をクリックします 2 保 存 フォルダの リンク 画 像 用 を 表 示 hokaido を 選 択 挿 入 をクリック 19

3 残 りの 画 像 も 同 じようにセルに 挿 入 します 4 各 画 像 に 簡 単 な タイトル をつけます 画 像 を 選 択 レイアウト タブから 行 と 列 グループ 下 に 行 を 挿 入 をクリック 下 列 の 画 像 にも 同 じように 下 に 行 を 挿 入 をします 5 画 像 の 行 の 下 に 新 しく 行 が 追 加 されました この 行 に 画 像 の タイトル を 入 力 し 観 光 案 内 のページにリンクさせていきます 20

3 タイトル の 入 力 下 図 を 参 考 に 入 力 します フォントの 種 類 メイリオ フォントサイズ 10 中 央 揃 え に 4 リンクの 設 定 1 下 記 の 観 光 案 内 アドレス を 参 考 にリンクの 設 定 をしていきます 北 海 道 富 良 野 ;http://www.furano-kankou.com//kankou/kankou/ 小 樽 運 河 ;http://otaru.gr.jp/ 京 都 南 禅 寺 ;http://www.kyotojoho.co.jp/ 箱 根 観 光 案 内 ;http://www.hakone.or.jp/ 倉 敷 美 観 地 区 ; http://www.hakone.or.jp/ 東 京 スカイツリー ; http://www.tokyo-skytree.jp/ 2 タイトル 文 字 北 海 道 富 良 野 をドラッグして 選 択 挿 入 から リンク グループの ハイパーリンク をクリック 21

3 ハイパーリンクの 挿 入 ダイアログが 表 示 1リンク 先 ファイル Web ページ を 選 択 2 検 索 先 現 在 のフォルダー をクリック 3アドレス 欄 にアドレスを 入 力 右 側 4 ターゲットフレーム をクリックします ターゲットフレームの 設 定 が 表 示 ドキュメントを 表 示 するフレームを 選 択 の から 新 しいウィ ンドウ を 選 択 OK をクリック 元 の 画 面 に 戻 るので OK をクリックします 5 上 書 き 保 存 でページを 保 存 1 ファイル タブをクリック 上 書 き 保 存 をクリック 右 上 の をクリックしてページを 閉 じます 22

7 TOPページにリンクの 設 定 index を 開 き main ページ 作 成 のため 縮 小 していた menu ページを 拡 張 シマス フレームラインを 下 げます 下 の リンク 文 字 が 表 示 されました リンクを 設 定 していきます 1 HOME にリンクの 設 定 TOPページに サブページ が 開 いている 場 合 元 の TOP ページの 戻 るための 設 定 です 1 ボタン HOME を 選 択 挿 入 タブをクリックし リンクグループより ハイパーリンク をクリックします 2 ハイパーリンクの 挿 入 が 表 示 リンク 先 を ファイルWeb ページ を 選 択 検 索 先 を 現 在 のフォルダ を 選 択 します 中 央 の ファイル 一 覧 から main.htm を 選 択 します 右 ターゲット を 選 択 します 23

3 ドキュメントを 表 示 するフレームを 選 択 の から main をクリック 左 現 在 のフレームページ が 青 く 反 転 して 表 示 します OK をクリック 元 の 画 面 に 戻 るので OK を クリックします 2 インターネット 空 のご 案 内 へリンクの 設 定 1 ボタン 空 のご 案 内 を 選 択 挿 入 タブをクリック リンク グループより ハイパーリンク をクリック 2 ハイパーリンクの 挿 入 が 表 示 リンク 先 の ファイル,Webページ をクリック 検 索 先 の 現 在 のフォルダ をクリック アドレス 欄 にhttp://www.d6.dion.ne.jp/~resonet/koutu-air.htm を 入 力 右 ターゲットフレーム をクリック 24

3 右 上 の ドキュメントを 表 示 するフレームを 選 択 より 新 しいウィンドウ を 選 択 OK をクリック 元 の 画 面 に 戻 るので OK を クリック 4 その 他 のインターネットへのリンクボタンにも 下 記 アドレスでリンクの 設 定 をしてみましょう 空 港 行 バス http://www.tobu-bus.com/pc/kousoku/05.html 空 のご 案 http://www.d6.dion.ne.jp/~resonet/koutu-air.htm 定 期 観 光 バス ( 例 : 京 都 ) http://www.kyotojoho.co.jp/ 高 速 バス http://www.kakuyasubus.jp/ Google http://www.google.co.jp/ 上 記 アドレスのファイルは 画 像 保 存 フォルダに 保 存 してあります ) 5 上 書 き 保 存 でページを 保 存 後 ページを 終 了 ファイル 上 書 き 保 存 をクリック 閉 じる をクリック 25

8 文 字 マーキー 挿 入 1 main ページの 最 上 部 に 文 字 マーキー を 挿 入 します 1 テキスト 集 の tabinii web をクリック 2 Webが 開 きました マーキーを 挿 入 するページ main をクリックしてひらきます 26

3 Web ページが 開 きました 表 示 タブから ソース をクリックします 4 旅 日 記 の タグ 画 面 が 表 示 されました <head> の 下 に marquee を 挿 入 します 27

<p direction="right" align="center"> <marquee style="font-size : x-large;medium;font-weight:bold;color:white;background-color:red;" width="80%"> ようこそ 私 のホームページへ ごゆっくりご 22 覧 ください </marquee> </p> 5 マーキーが 挿 入 されているページが 完 成 28

アップロード 1 アップロードとは? インターネットでソフトをパソコンに 受 け 取 ることを ダウンロード といいます 反 対 にインターネットに 公 開 するために サーバーへ 作 成 した Web サイトのファイルを 転 送 することを アップロード といいます アップロードすると Web サイトは インターネットに 公 開 され 誰 でも 見 ることができるようになります 2 FTP アカウント Web に 接 続 し 作 成 シタデータを サーバーへ 送 信 したりする 際 に 使 用 する 通 信 規 約 を FTP (Fil Transfer Protocol)と 呼 びます 3 サーバーとの 契 約 WWWサーバーへ 作 成 した Web サイトのファイルを 転 送 して インターネットに 公 開 するためには サーバーと の 契 約 が 必 要 です インターネット のサーバーの ホームページ から 契 約 できます サーバーの 契 約 が 終 わると 下 記 情 報 が 送 られてきます 例 URL ; http://homepage3.nifty.com./pcyuyuculub/ プロバイダーの 選 択 ; @nifty(アット ホームページ FTPサーバー 名 ; ftp49.nifty.com FTPアカウント ; hd193111 パスワード ; 87ab9cd3 4 アップロード 1 コンピュータ を2 度 押 して エクスフローラ 画 面 を2つ 起 動 します 29

2 1つ 目 の エクスフローラ の アドレス 入 力 欄 の 文 字 を 削 除 して FTPサーバー 名 を 入 力 中 央 の 移 動 をクリック 同 じ 画 面 開 く 方 法 : Ctrl + N キーを 押 す 下 欄 に サーバー 一 覧 が 表 示 その 中 の homepage フォルダを クリックして 選 択 3 以 前 に 送 信 したファイルが 開 いている 場 合 は この 上 に 上 書 き 転 送 をします 不 要 の 場 合 は すべて 選 択 ( 左 上 の 整 理 の をクリックして すべて 選 択 をクリック)をし 選 択 されたファイルを 右 クリック 削 除 をクリックします 4 もう1つの エクスフローラ に 作 成 したフォルダを 開 きます すべて 選 択 をします 30

5 2つの エクスフローラ を 並 べます 左 の 選 択 した ファイル を 右 のサーバーにドラッグします 転 送 がはじまります 6 インターネットの 検 索 欄 にURL を 入 力 して 転 送 を 確 認 しましょう Word でホームページ 作 成 Microsoft Word 2010 対 応 2012 年 3 月 25 日 2007 作 成 2014 07 29 2010 に 修 正 西 川 君 江 31