Ｗｏｒｄでホームページ

(1)

Microsoft Word 2010

Ｗｏｒｄでホームページ

○○の旅日記

(2)

１、Ｗｅｂページ作成の準備・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 1

２、

Ｗｅｂページの作成と保存・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 5

３、フレーム機能の表示と設定・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

6 ４、

壁紙、ボタンアイコンの挿入とタイトルの設定

・・・・・・・・・・・・・ 1３

５、

main(下フレーム)ページの編集

・・・・・・・・・・・・・・・・・・・・・・・・・・１６

６、リンク画像の挿入とリンクの設定・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・１８

７、ＴＯＰページにリンクの設定・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・２３

８、「文字マーキー」を入れる・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・２６

Ｗｅｂページの作成と保存フォルダの作成

(3)

１ 、

Ｗｅｂページ作成の準備

〔１〕単位の設定このホームページは、印刷するだけのものではなく、パソコン上で見る［Ｗｅｂ］を目的としたものなので、単位をポイント／ピクセルに変更しておきます。 ① Ｗｏｒｄを立ち上げましょう。・デスクトップの「Microsoft Word 2010」クリックします。 ② Word が開きました → メニューバー左の「ファイル」タブをクリックします。 ③ ファイルの画面が表示 → 左下の「オプション」をクリック ④ 続いて、左側の「詳細設定」をクリックします。

(4)

⑤ 「Ｗｅｂのオプション」ダイアログが表示 → スクロールして、下の方の「表示」から・「使用する単位」右の欄▼をクリックして一覧より「ポイント(pt)」をクリック ※ホームページには、国際基準により」「「ポイント(pt)」を使用します。・「」にチェックを入れます。〔２〕ブラウザの指定の設定（ブラウザのバージョンを低いバージョンにすることで最新の機能はつかえませんが、ブラウザ上での表示問題を少なくすることが出来ます）。 ① 続いて、下にスクロールして、「Ｗｅｂオプション」をクリック。・「Ｗｅｂオプション」ダイアログボックスの「ブラウザ」タブをクリック

・対象ブラウザを「Microsoft Internet Explorer4.0 Netscape Navigator 4.0 またはそれ以降]」にします。

.

(5)

〔３〕ファイル名と保存場所の設定 ① 「Ｗｅｂオプション」の「ファイル」タブをクリック → 全ての項目にチェックをいれます。 ※ 同じ階層に画像用フォルダが作成され、画像ファイルがそこに保存され、「○○.files」がつきます。・保存するときに「リンク切れ」の問題が起きないようにします。 ② モニタ画面サイズの設定 → 「図」タフﾞをクリック・画面サイズ → 「８００×６００」に、「ピクセル／インチ」を「９６」に → ・「OK」をクリック → 元の画面に戻ります。〔４〕パスの互換性 Windows 以外の OS や国内以外のパソコンでは、「パス」の表記を「￥」を使用しないので、これによって起きる問題を避けるために、パスの互換性をとるようにします。 ① 「互換性オプションの適用先」「レイアウトオプション」左の ▷ をクリックします。

(6)

・「オプション」の中の「」のチェックを外します。・「OK」をクリック。〔５〕拡張子の表示ｗｅｂの拡張子が表示されるように設定します。 ① コンピュータを開き、（エクスフローラー）を表示・「整理」の▽をクリック → 「フォルダと検索オプション」をクリック ② 「フォルダオプション」が表示 →「表示」タブを選択。・「登録されている拡張子は表示しない」のチェックを外す。「OK」をクリック〔4〕

(7)

２、Ｗｅｂページ作成と保存フォルダの作成

〔１〕保存フォルダの作成作成した「データ」や「画像ファイル」を保存しておくフォルダを作っておきます。 ① 「ドキュメント」を開く → 左タスクの「整理」の▼をクリックして、「新しいフォルダ」をクリック ※ 保存場所は任意の場所（ドキュメントの以外に、ＵＳＢメモリー、コンピュータ(Ｄ)ドライブなど） ② 青く反転した状態で表示されたフォルダに、名前を「 ○○の旅日記」と入力・ホームページ作成に必要な画像保存フォルダ、資料も移動しておきます。・保存フォルダを閉じます。

〔２〕Ｗｅｂページの作成

① Ｗｏｒｄを起動スタートボタン」より「すべてのプログラム」・「Microsoft Word 2010」をクリック

(8)

〔３〕Ｗｅｂページの表示 ① 右側の「表示」タブを選択 → 「文書の表示」グループより「Ｗｅｂレイアウト」をクリック ② Web ページになりました → ページを左右上下に伸縮してみましょう。１枚のページとして利用することができます。

３、フレーム機能の表示と設定

ページを左右上下分割して利用できるフレーム作成の「コマンド」をメニューバーに表示します。〔１〕フレームコマンドの表示 ①「ファイル」をクリック → 左下の「オプション」をクリック〔6〕

(9)

② 「Ｗｅｂのオプション」ダイアログが表示 → 左側の「リボンのユーザー設定をクリック ② 右側に「リボンのユーザー設定」の画面が表示されました。・「コマンドの選択」▼をクリックして、表示されたリストから「すべてのコマンド」を選択 ③ また、これから選択するコマンドを保存しておく場所を作成しておきます。・メインタブ欄外の新しいタブ(Ｗ) をクリック・メインタブの最下段に新しいタブ（ユーザー設定）が設定されました。

(10)

④ これから、フレームのコドを選択して、作成した「新しいタブ」に移動します。・コマンドの画面を ①下にスクロールして、 ②「フレームのプロバティー」を選択。・中央の③「追加」をクリック → 右の欄に ④「フレームのプロバティー」が追加されました。 ⑤ 続いて、新しいフレーム（上）、新しいフレーム（下）、新しいフレーム（右）、新しいフレーム（左）を ①１つずつ選択してそれぞれ ② 追加(A) をクリックしていきましょう。・ ③ 右「新しいグループ（ユーザー設定）に移動したのを確認して、「ＯＫ」をクリックします。〔8〕

(11)

⑥ Ｗｏｒｄのページに戻ります。・メニューバーに「新しいタブ」が追加されていることを確認します。これから、ホームページのフレーム作成に利用していきます。

〔２〕「横２分割フレーム」の作成

① 「新しいタブ」をクリックして選択 → コマンドの「新しいフレーム（上」をクリック ② 作成されたフレームの「フレーム枠線」を上にドラッグします（後で自由に修正できます）。

〔３〕リンクターゲット用としてフレームの保存

「新しいフレーム」タブを選択して開いておきます。 ① 上のフレームにカーソルを置き → 「フレームのプロバティ」をクリック ② 「フレームのプロバティ」が表示 →「フレーム」タブを選択 → 名前」の▼から「menu」を選択、・「基準」を「ピクセル」に、「サイズ」の「幅」を「170」位（後で変更可）。「ＯＫ」をクリック

(12)

③ 下フレームにカーソルを置き → 「フレームのプロバティ」をクリック ④ 「フレームのプロバティ」が表示 → 「フレーム」タブを選択・「名前」の▼から「mai」を選択。「サイズ」はそのままにして、「ＯＫ」をクリック〔6〕〔４〕Ｗｅｂページとして保存 ※ 「Ｗｅｂページ」とは、文字を入力したり、画像を挿入、編集するページのことです。各ページをＷｅｂページとして、「保存ファイル」の中に保存をします。（ファイル、画像保存用） ① 上フレームで右クリック → 「フレーム名を付けて保存」をクリック〔10〕

(13)

② 「名前を付けて保存」が表示・作成しておいた「保存ファイル」「○○の旅日記」を表示します（この場合はドキュメントから）。・「ファイル名」＝半角英数で「left」」・「ファイルの種類」の▼から「Ｗｅｂページ（フィルタ後）」を選択 →「保存」をクリック・保存を尋ねるアラートが表示 →「はい」をクリック ③ 下フレームで右クリック → 「フレーム名を付けて保存」をクリック。 ④ 「名前を付けて保存」が表示されます。・「ファイル名」＝半角英数で「right」・「ファイルの種類」の▼ から「Ｗｅｂページ（フィルタ後）」を選択 → 「保存」をクリック

(14)

・保存を尋ねるアラートが表示 →「はい」をクリック

⑤ Web のｔｏｐページ ( left と right ) の保存をします。

・「ファイル」をクリック → 「名前をつけて保存」をクリック ⑥ 「保存フォルダ」が表示・「ファイル名」を半角英数で「index.」に。・「ファイルの種類」の▼をクリックして「Ｗｅｂページフィルタ後」を選択・「ページタイトル」に「○○の旅日記」(各自の名前)を入力・「ＯＫ」をクリックし、「保存」をクリック〔12〕

(15)

・保存を尋ねるアラートが表示 →「はい」をクリック

４、壁紙、ボタンアイコンの挿入とタイトルの設定

〔１〕画像を「壁紙」として挿入 ① 左のフレームにカーソルを移動 →「ページレイアウト」タブを選択・「ページの背景」グループより「ページの色」の▼をクリック・「テーマの色」最下段の「塗りつぶし効果」をクリック ② 「塗りつぶし効果」ダイアログが表示。「図」タブを選択 → 続いて、「図の選択」をクリック ③ 画像保存ファイル「旅日記画像」を開いて、「kabe3 」(任意) を選択 → 挿入」をクリック

(16)

④ 図の枠内に壁紙画像が表示 → 「OK」をクリック・下フレーム「main」にも同じ壁紙を挿入しましょう。 ⑥ 上下のフレームに壁紙が挿入されました。

〔２〕表の作成

「タイトル」、「リンクボタン」挿入のための表を作成 ① 右フレームにカーソルを置き、「挿入」タブより「表」の▼をクリック → 「１行×１列」を選択。 ② 表を「ページの中央に設定」と「枠線をなしに設定」をします。・「表」の上にカーソルを持っていくと、「」が表示 → このマークをクリックして「表」を選択。・リボンの「デザイン」タブ〔14〕 ③ 「「表」をページの中央に設定します。

(17)

・「表」を選択 → 選択した表の上で右クリック → 「表のプロパティ」をクリックします。 ④「表のプロバティ」が表示 →「表」タブを選択 →「配置」グループの「中央揃え」を選択。「中央揃え」を確認して「ＯＫ」をクリック。〔３〕タイトルの挿入と編集表の中に「タイトル」を入力します。 ① 表の中にカーソルを移動し、「半角英数で「 My Travel 」と入力します。 ② 文字を編集します → 文字列を選択。・「フォントの種類」の▼から「

AR Script3 Bold

」を選択し、サイズを「36」にして、位置揃えを「中央揃え」にします。

(18)

〔４〕「ボタンアイコン」の挿入

「ＨＯＭＥ空のご案内高速バス定期観光バスＧｏｏｇｌｅ」

① 表３行目にカーソルを移動します。フォントから上記の文字を入力します。・「フォントの種類」→「AR PPOP 4B」、「フォントのサイズ」→「14」、に設定します。 ② 「上書き保存」をします。「ファイル」から「上書き保存」をクリック。

５、

main(下フレーム)ページの編集

説明文の入力と編集

続いて、Ｗｅｂページを開いて、「right」ページの編集をします。・閉じたページの開き方 ( 開き方は２種類あります。ここでは第１の開き方で開きます。第２の開き方はＰ29 で) ・「Word」を起動します → 「ファイル」タブをクリック・「ファイル」の画面に変わります。・左下方中央の「最近使用したファイル」をクリック・中央に「最近使用したドキュメント」一覧が表示 → 「right.html」をクリック〔１〕「表」の挿入この後の作業「説明文」、説明文の上下に挿入する「水平線」の「表」（１列３行）を設置します。 ① 「挿入」から「表」の▼をクリック → 「１列３行」の範囲を選択します。〔16〕

(19)

②「1 列３行」の表が挿入されました。ページの中央に移動します。・表の右上のをクリックして表を選択します。（「表」の上にカーソルを持っていくと、右上にが表示される）。 ③ 「表」の枠線を非表示にします。・「表」を選択 → 「デザイン」タブから「罫線」の▼をクリック。「枠なしをクリックします。・枠線が点線(非表示)で表示されました。

〔２〕説明文の入力

① タイトルの行の下にカーソルをクリックして移動・カーソルを表の２段目に移動 → 下記の説明文を入れていきます。喧騒の都会から、ちょっと離れた古い町並みや広い田園のある風景は、私たちをほっとさせてくれます。今回は、そういった「観光地」をご紹介いたします。

〔３〕

文字の編集

① 入力した文字列を選択します。・フォントの種類＝「ＭＳＰゴシック」、「太字」・フォントサイズ＝１２Ｐ（画面に合わす） → 「中央揃え」にします。

(20)

〔４〕水平線の挿入

説明文の前後の行に水平線を「クリップアート」から挿入します。 ① 「説明文」の上の行にカーソルを移動します。・「挿入」タブから「図」グループの「クリップアート」をクリックします。 ② 下に「水平線の画像」が表示されました。任意の「水平線」をクリック → 上の行に挿入されました。・３行目にも同じように「水平線」を挿入しましょう・クリップアートを閉じます。

６、リンク画像の挿入とリンクの設定

〔１〕リンク画像を挿入する表の作成

① 水平線の下に「リンク画像」を挿入する「2 行３列」の表を作成します。・「水平線」の下中央でダブルクリックしてカーソルを移動 → 画像を挿入する「表」を設置します。・「挿入」タブから「表」の▼をポイントし → 表示された表の「2 行３列」を選択します〔18〕

(21)

②「表」が挿入されました。枠線を非表示にして、「中央揃え」にしておきます ③ 画像の大きさの固定するため、「セル」の幅を固定します。・表を選択 → 「レイアウト」タブを選択 → 「自動調整」の▼から「列の幅を固定する」をクリックします。

〔２〕画像の挿入

リンクのする観光地の画像をセルに挿入します。今回は、北海道富良野」、「北海道小樽」、「倉敷」、「京都」、「箱根」、「スカイツリー」の６か所のセルを挿入します。富良野小樽倉敷南禅寺箱根スカイツリー ① 1 番目のセルにカーソルを移動します。・「挿入」タブから、「図」グループの「図」をクリックします。 ② 保存フォルダの「リンク画像用」を表示 → 「hokaido」を選択。「挿入」をクリック

(22)

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

(23)

〔３〕

「タイトル」の入力

下図を参考に入力します。フォントの種類 →「メイリオ」、フォントサイズ → 「10」、「中央揃え」に。

〔４〕リンクの設定

① 下記の「観光案内アドレス」を参考にリンクの設定をしていきます。・北海道富良野；

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/

② タイトル文字「北海道富良野」をドラッグして選択。・「挿入」から「リンク」グループの「ハイパーリンク」をクリック

(24)

③ 「ハイパーリンクの挿入」ダイアログが表示 → ・①リンク先「ファイルWeb ページ」を選択。②検索先「現在のフォルダー」をクリック。・③アドレス欄にアドレスを入力。右側 ④「ターゲットフレーム」をクリックします・「ターゲットフレームの設定」が表示 → 「ドキュメントを表示するフレームを選択」の▼から「新しいウィンドウ」を選択 → 「ＯＫ」をクリック。元の画面に戻るので「ＯＫ」をクリックします。

〔５〕「上書き保存」でページを保存

① 「ファイル」タブをクリック・「上書き保存」をクリック・右上の「」をクリックしてページを閉じます。〔22〕

(25)

７、ＴＯＰページにリンクの設定

「index」を開き、「main」ページ作成のため縮小していた「menu」ページを拡張シマス。フレームラインを下げます。・下の「リンク文字」が表示されました。リンクを設定していきます。

〔１〕

「ＨＯＭＥ」にリンクの設定

ＴＯＰページに「サブページ」が開いている場合、元の「ＴＯＰ」ページの戻るための設定です。 ① ボタン「 HOME 」を選択。・「挿入」タブをクリックし、リンクグループより「ハイパーリンク」をクリックします。 ② 「ハイパーリンクの挿入」が表示・リンク先を「ファイルWeb ページ」を選択。「検索先」を「現在のフォルダ」を選択します。・中央の「ファイル一覧」から「main.htm」を選択します → 右「ターゲット」を選択します。

(26)

③ 「ドキュメントを表示するフレームを選択」の▼から「main」をクリック → ・左「現在のフレームページ」が青く反転して表示します。・「OK」をクリック → 元の画面に戻るので「OK」をクリックします。

〔２〕インターネット「空のご案内」へリンクの設定

① ボタン「空のご案内」を選択・「挿入」タブをクリック → 「リンク」グループより「ハイパーリンク」をクリック ② 「ハイパーリンクの挿入」が表示・リンク先の「ファイル，Ｗｅｂページ」をクリック → 検索先の「現在のフォルダ」をクリック・アドレス欄に

http://www.d6.dion.ne.jp/~resonet/koutu-air.htm

を入力・右「ターゲットフレーム」をクリック〔24〕

(27)

③ 右上の「ドキュメントを表示するフレームを選択」▼」より「新しいウィンドウ」を選択・「OK」をクリック → 元の画面に戻るので「OK」をクリック ④ その他のインターネットへのリンクボタンにも下記アドレスでリンクの設定をしてみましょう。

・空港行バス

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/

・Ｇｏｏｇｌｅ

http://www.google.co.jp/

※ 上記アドレスのファイルは、画像保存フォルダに保存してあります。） ⑤「上書き保存」でページを保存後、ページを終了・「ファイル」 → 「上書き保存」をクリック →「閉じる」をクリック

(28)

８、

「文字マーキー」挿入

〔１〕「ｍａｉｎ」ページの最上部に「文字マーキー」を挿入します ① テキスト集の「tabinii web」をクリック

② Ｗｅｂが開きました。マーキーを挿入するページ「ｍａｉｎ」をクリックしてひらきます。

(29)

③ 「Ｗｅｂ」ページが開きました → 「表示」タブから「ソース」をクリックします。

④ 旅日記の「タグ」画面が表示されました。

(30)

〔22〕 ⑤ マーキーが挿入されているページが完成〔28〕

<p direction="right" align="center">

<marquee style="font-size

: x-large;medium;font-weight:bold;color:white;background-color:red;"

width="80%">

ようこそ私のホームページへ･･････ごゆっくりご覧ください。

</marquee>

</p>

(31)

《アップロード》

１、アップロードとは？

インターネットでソフトをパソコンに受け取ることを「ダウンロード」といいます。反対にインターネットに公開するために、サーバーへ作成したWeb サイトのファイルを転送することを「アップロード」といいます。アップロードするとWeb サイトは、インターネットに公開され、誰でも見ることができるようになります。

２、

FTP アカウント

Web に接続し、作成シタデータを、サーバーへ送信したりする際に使用する通信規約を

「

FTP」(Fil Transfer Protocol）

と呼びます。３、サーバーとの契約ＷＷＷサーバーへ作成したWeb サイトのファイルを転送して、インターネットに公開するためには、サーバーとの契約が必要です。 ◎ 「インターネット」のサーバーの「ホームページ」から契約できます。・サーバーの契約が終わると下記情報が送られてきます。【例】

・

URL ；

http://homepage3.nifty.com./pcyuyuculub/

・プロバイダーの選択；＠ｎｉｆｔｙ（アット・ホームページ

・ＦＴＰサーバー名；

ftp49.nifty.com

・ＦＴＰアカウント；ｈｄ

193111

・パスワード；

87ab9cd3

４、アップロード

① 「コンピュータ」を２度押して、「エクスフローラ」画面を２つ起動します。

(32)

② １つ目の「エクスフローラ」の「アドレス入力欄」の文字を削除して、「ＦＴＰサーバー名」を入力中央の移動をクリック ※同じ画面開く方法：「Ctrl」＋「N」キーを押す。・下欄に「サーバー」一覧が表示 → その中の「homepage」フォルダをクリックして選択 ③ 以前に送信したファイルが開いている場合は、この上に「上書き転送」をします。 ※不要の場合は、すべて選択（左上の「整理」の▼をクリックして「すべて選択」をクリック）をし、選択されたファイルを右クリック → 「削除」をクリックします。 ④ もう１つの「エクスフローラ」に作成したフォルダを開きます → すべて選択をします。〔30

(33)

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

Ｗｏｒｄでホームページ

Microsoft Word 2010