ホームページの作り方　講習会テキスト

Transcription

1 ホームページ 作 成 編 (ホームページ ビルダー16) 明 治 大 学 教 育 の 情 報 化 推 進 本 部 ( 和 泉 ) I 1

2 目 次 1. はじめに... I この 講 習 会 でマスターすること... I ホームページの 作 り 方... I HTML とタグ... I ページ 公 開 の 仕 組 み... I 5 2. コンテンツ( 素 材 )の 作 成... I 準 備... I ホームページ ビルダー16 の 起 動... I 新 たにページを 作 成 する... I ページを 保 存 する... I ページにタイトルを 付 ける... I 文 字 の 入 力 ( 見 出 しの 作 成 )... I 文 の 入 力 ( 段 落 の 作 成 )... I 文 字 のフォント( 書 式 )の 変 更... I 水 平 線 の 入 力... I 壁 紙 の 挿 入... I リンクの 設 定 1 (ページ 内 のリンク)... I リンクの 設 定 2(URL を 指 定 )... I 画 像 の 挿 入... I ページの 保 存 ( 画 像 ファイルも 合 わせて 保 存 する)... I 付 録... I 25 A. 表 の 挿 入... I 25 B. ロゴの 作 成... I 25 C. 箇 条 書 きの 作 成... I 27 D. サイト 機 能 を 使 ってホームページを 作 成 する... I 27 I 2

3 1. はじめに 1.1. この 講 習 会 でマスターすること ホームページのしくみを 理 解 します ホームページ 作 成 ソフト ホームページ ビルダー16 を 利 用 して 自 分 のホームページをつくります 作 成 したホームページを 明 治 大 学 学 内 のネットワークで 公 開 します 1.2. ホームページの 作 り 方 個 人 でホームページを 作 るには 大 きく 分 けて3 通 りの 方 法 があります (1) ホームページ 作 成 ソフトを 利 用 して 作 る (2) Web サービスを 利 用 して 作 る (3) テンプレートを 利 用 して 作 る それぞれのメリット デメリットなどを 以 下 に 紹 介 します ホームページ 作 成 ソフト Web サービス テンプレート 概 要 メリット デメリット 具 体 例 市 販 ソフトを 購 入 して 使 う 方 法 です 初 心 者 向 け プ ロ 向 けなど 様 々なソフトウ ェアが 販 売 されています 技 術 的 な 知 識 がなくても 作 成 できる マウス 操 作 で 部 品 を 貼 り 付 けるだけで 様 々な 機 能 を 追 加 できる たくさんの 素 材 が 付 属 し ている 購 入 にお 金 がかかる ( 特 にプロ 向 けのソフトは 価 格 が 高 い) ソースがそのソフト 流 の 記 述 に 修 正 されるため 直 接 編 集 しにくい ホームページビルダー Dreamweaver Expression Web など インターネット 上 で 公 開 さ れている ホームページを 作 るサービス を 使 う 方 法 です 技 術 的 な 知 識 がなくても 作 成 できる テンプレートを 切 り 替 え によりサイトのデザイン を 簡 単 に 変 更 できる 作 成 から 公 開 まで ブラ ウザだけで 完 結 できる カスタマイズする 場 合 は HTML や CSS に 関 する 知 識 が 必 要 インターネットに 接 続 し ていないと 使 えない 会 員 登 録 が 必 要 FC2 ホームページ Yahoo!ジオシティーズ Ameba ブログ など インターネット 上 で 公 開 さ れている 無 料 のテンプレ ートファイル を 使 う 方 法 です デザイン 性 に 優 れたテン プレートが 揃 っている 基 本 的 な 構 成 やメニュー が 最 初 から 完 成 している ため 素 早 く 作 成 できる 会 員 登 録 不 要 (サイトによっては 必 要 ) カスタマイズする 場 合 は HTML や CSS に 関 する 知 識 が 必 要 好 みのデザインが 見 つか らない 場 合 がある Flash Natural Nikukyu-Punch Design Template など I 3

4 (4) 3つの 方 法 を 併 用 して 作 る 上 記 3つの 方 法 は 併 用 して 使 うこともできます 例 えば 1 基 本 部 分 は 無 料 テンプレートを 利 用 して 作 るが 2 細 かい 変 更 やカスタマイズにはホームページ 作 成 ソフトを 使 う 3 ブログ 部 分 に 関 しては Web サービスを 利 用 する といったこともできます 本 テキストでは ホームページ 作 成 ソフト の 内 容 について 説 明 しています 1.3. HTML とタグ ホームページは HTML(Hyper Text Markup Language)というテキスト 形 式 のファイルを 核 として ほか 画 像 音 声 ファイルなど 様 々なファイルから 構 成 されています HTML ファイルには 文 書 構 造 や 見 ばえ ハイパーリンクなどを 指 定 する タグ と 呼 ばれる 標 識 が 埋 め 込 まれています HTML 文 書 の 作 成 Web ブラウザで 閲 覧 タグ (テキストエディタで 作 成 ) (Internet Explorer で 閲 覧 ) テキストエディタでタグを 直 接 入 力 して HTML 文 書 を 作 成 しようとすると タグの 種 類 と 役 割 を 理 解 し ている 必 要 があります この 講 習 で 使 う ホームページ ビルダー は タグの 意 味 を 知 らなくても マ ウスの 操 作 でデータにタグを 自 動 的 に 埋 め 込 みながら 直 感 的 にホームページの 作 成 が 可 能 なソフトです I 4

5 1.4. ページ 公 開 の 仕 組 み ホームページを 作 成 しただけでは 自 分 のパソコン 上 でしかそのページを 見 ることができません WWW(World Wide Web ワールドワイドウェブ)というシステムに 基 づき インターネット 上 のサーバに データを 転 送 すれば そのページはインターネットに 接 続 しているどのパソコンからでも 閲 覧 できるよう になります データの 所 在 は もしくは で 始 まる URL(Uniform Resource Locator)によって インターネット 上 のどこにあるのか 表 わされます 駿 河 台 和 泉 の 利 用 者 がホームページを 公 開 する 場 合 下 記 の4つの 手 順 が 必 要 です 1.リムーバブルディスク 等 に local_html( 学 内 公 開 ) または public_html( 学 外 公 開 ) というフォルダを 作 成 します 2.そのフォルダの 中 に 作 成 したホームページのファイルや 画 像 を 保 存 します 3.local_html または public_html フォルダを FFFTP ソフト 等 を 利 用 してサーバに 転 送 (アップロード)します 4. web ブラウザ 上 で 下 記 の URL を 入 力 し 公 開 されていることを 確 認 します 公 開 方 法 アップロード 先 転 送 したデータのURL 学 内 のみ 公 開 suruga2のlocal_htmlへ 名 学 外 へも 公 開 suruga2のpublic_htmlへ 名 ホームページを 公 開 するに 当 たっては MIND 利 用 基 準 を 遵 守 しなければなりません 以 下 のサイトを 参 照 してください 学 校 法 人 明 治 大 学 総 合 情 報 ネットワーク(MIND) 利 用 基 準 MIND 利 用 上 の 遵 守 事 項 ガイドライン~インターネットを 使 う 上 で~ I 5

6 2. コンテンツ( 素 材 )の 作 成 ホームページ 作 成 編 (ホームページ ビルダー16) 学 内 用 に 公 開 するホームページ(ホームページで 表 示 される 文 章 ファイル 画 像 等 )の 作 成 を 行 います 注 意 することは コンテンツ( 素 材 )やフォルダの 名 前 は 全 て 半 角 英 数 で 入 力 するということです 全 角 日 本 語 等 で 名 前 を 入 力 するとホームページを 公 開 した 時 に 正 しく 表 示 されないことがあります 2.1. 準 備 最 初 に ドキュメント に local_html ( 学 内 に 公 開 するためのフォルダ)を 作 成 してください 上 部 にある[ 新 しいフォルダ] local_html ( 半 角 英 数 )という 名 前 をつける USB メモリなどのリムーバブルディスクの 中 に local_html を 作 成 することもできます 以 後 作 成 したページや 画 像 は 全 てこのフォルダに 保 存 します また サーバへの 転 送 もこのフォルダごと 行 います フォルダ 作 成 (local_html) 注 意 : 一 つのフォルダにすべてのコンテンツが 入 っていないとホームページを 更 新 した 時 に 画 像 が 表 示 されない などの 不 具 合 が 生 じます サイト 機 能 の 紹 介 : ホームページ ビルダーには 上 記 でフォルダを 作 成 するのと 同 じ 目 的 で サイト 作 成 という 機 能 を 利 用 することもできます サイト 作 成 をするとサイト 単 位 でファイルの 読 み 込 みができ またサイト 内 の ファイルのツリー 構 造 が 確 認 できます 詳 細 は 付 録 D.サイト 機 能 を 使 ってホームページを 作 成 する を 参 考 にしてください I6

7 2.2. ホームページ ビルダー16 の 起 動 ホームページ ビルダー16 を 起 動 してください スタート ボタンから すべてのプログラム ホームページ ビルダー16 ホームページ ビルダー16 を 起 動 を 選 択 して 下 さい ホームページ ビルダーの 起 動 2.3. 新 たにページを 作 成 する (1) 様 々な 新 規 作 成 ホームページ ビルダーが 起 動 します 1 また かんたんナビ が 表 示 されていない 場 合 は メニューより 表 示 (V) かんたんナビ(N) を クリックします 2 すると 画 面 が 変 わり 初 めての 方 には 使 いやすくなります 起 動 画 面 2 かんたんナビ 表 示 後 の 画 面 [ 表 示 ]から[かんたんナビ]へ I7

8 (2) ホームページビルダーの 画 面 タイトルバー メニューバー かんたんナビバー ツールバー かんたんナビメニュー ページ 編 集 領 域 パレットスタイル ステータスバー 操 作 方 法 は 一 通 りではない ホームページ ビルダーの 全 ての 機 能 は メニューバー から 実 行 できます それに 加 えて よく 使 う 機 能 は ツールバー などや ナビメニュー などに アイコン の 形 で 分 かりやすくまとめられています つまり 操 作 方 法 は 一 通 りではなく 何 通 りも 存 在 するということです この 講 習 会 では メニューバーからの 操 作 を 中 心 にして 操 作 方 法 を 説 明 しています I8

9 (3) 新 規 作 成 ホームページ ビルダーでは 様 々なホームページの 形 式 を 設 定 することができますが ここでは 白 紙 の 状 態 からホームページを 新 規 作 成 していきます 画 面 内 の ファイル ボタンをクリックして 標 準 モードで 新 規 作 成 (B) を 選 択 してください 1 1 標 準 モードで 新 規 作 成 参 考 : フル CSS テンプレート からの 作 成 ホームページ ビルダー でホームページを 作 る 方 法 は 真 っ 新 な 状 態 から 自 由 に 作 成 していく 方 法 と あらかじめ 用 意 されたテンプレート(ひな 形 )を 元 に 作 成 していく 方 法 の 2 つがあり ここでの 標 準 モードで 新 規 作 成 は 前 者 の 方 法 となります ただし 一 からデザインの 整 ったホームページを 作 るとなると 画 像 素 材 の 用 意 レイアウトや 色 彩 の 設 定 文 章 の 作 成 など 非 常 に 手 間 がかかるのに 対 し テンプレートを 用 いるとセンスの 良 いデザインを 土 台 とした 効 率 的 なホームページ 作 成 が 可 能 で す とくに ホームページ ビルダー16 には ページ 内 デザインが 細 かく 設 定 された CSS(Cascading Style Sheet)ファイルとともに 構 成 される フル CSS テンプレート が 加 わっています 現 在 では Web サイトの 多 くが CSS ファイルを 用 いて 構 成 されており ホームページ ビルダー での 作 成 も CSS テ ンプレートからの 作 成 が 主 流 にあるといえます 基 礎 を 学 んだ 後 には この フル CSS テンプレート からの 作 成 にチャレンジしてみましょう 白 紙 ページの 作 成 画 面 が 表 示 されます ( 図 1) ホームページを 編 集 する 領 域 を ページ 編 集 領 域 と 呼 びます ページ 編 集 領 域 は [ページ 編 集 ] [HTML ソース] [ページ/ソース] [プレビュー]の 4 つの 表 示 方 法 が あります ( 図 2) ページを 編 集 するときは[ページ 編 集 ] タブを 実 際 のページ 表 示 を 確 認 するときは[プレビュー] を HTML を 直 接 編 集 するときなどは[HTML ソース]や [ページ/ソース]を 利 用 します 表 示 タブ ページ 編 集 領 域 図 1 白 紙 の 新 しいページが 開 く ページ 編 集 HTML ソース 図 2 ページ 編 集 領 域 の 表 示 タブ( 左 )と[ページ/ソース]タブ 選 択 時 の 表 示 画 面 ( 右 ) I9

10 2.4. ページを 保 存 する ファイル(F) メニュー 名 前 を 付 けて 保 存 (A) を 選 択 します 2.1. 準 備 で 作 成 した local_html フォルダの 中 へ index.html という 名 前 を 半 角 英 数 で 入 力 して 保 存 してください 名 前 を 付 けて 保 存 index.html というファイル 名 について 明 治 大 学 の WWW サーバでは ある 閲 覧 者 からアクセスが 来 た 際 URL にサーバ 名 ( 例 : クトリ 名 ( 例 : 指 定 された 場 合 つまりファイル 名 が 指 定 されない 場 合 index.html または index.htm というファイルを 発 信 します これにより 同 階 層 にある 他 のファイルやディレクトリが 丸 見 えになるのを 防 ぐ 働 きがあります インターネット 上 の 多 くの WWW サーバはそのような 設 定 になっています トップページ 以 外 のフ ァイルには 半 角 英 数 であればどのような 名 前 をつけても 構 いませんが トップページのファイル 名 は 必 ず index.html として 下 さい index.html ファイルがない 場 合 作 成 したホームページは 正 しくアップロードがされません ページに 付 けるファイル 名 は 必 ず 半 角 英 数 で パソコンではファイルやフォルダの 名 前 には アルファベットや 数 字 だけでなく ひらがな カタカナ 漢 字 等 様 々な 文 字 を 使 うことが 可 能 です しかし ファイル 名 に 漢 字 等 を 使 用 すると FTP ソフトによっては 正 しく 表 示 されない 場 合 や ページを 公 開 する 際 にページ 名 が 文 字 化 けを 起 こしたり 別 の 形 式 の 文 字 列 に 変 換 されてしまうことがよくあ ります よって ページや 画 像 写 真 に 付 ける ファイル 名 は 必 ず 半 角 の 英 数 字 のみとして 下 さい 全 角 や 漢 字 などの 名 前 をつけた 場 合 作 成 したホームページは 正 しくアップロードがされません I10

11 2.5. ページにタイトルを 付 ける タイトル とはホームページ 上 の 名 前 のことで Web ブラウザで 閲 覧 した 際 に タイトルバー やタブ に 表 示 されます タイトルはページごとに 設 定 できます 見 出 し ( 本 文 の 文 頭 )とは 異 なります ( 見 出 しは 13 ページで 作 成 します) 例 Internet Explorer で 明 治 大 学 の 公 式 ウ ェブサイトを 閲 覧 した 場 合 ここに 表 示 されるのが タイトル です 画 面 上 何 も 選 択 されていない 状 態 で 編 集 (E) 1 属 性 の 変 更 (A) 2を 選 択 してください 1 なお この 操 作 は 画 面 右 上 に ある [ 編 集 ]ツールバー の 属 性 の 変 更 ボタンからも 行 うことができます [ 編 集 ]ツールバー [ 編 集 ]ツールバーからの 操 作 属 性 ダイアログボックスの ページ 情 報 タブにある ページタイト ル(P) に 名 前 を 入 力 し(ここでは 例 として 花 と 入 力 します) OK をクリックしてください 3 ここで 入 力 した 文 字 列 が 編 集 中 のページのタイトルになります 4 属 性 の 変 更 ページタイトルが 表 示 される ページタイトルを 入 力 I11

12 2.6. 文 字 の 入 力 ( 見 出 しの 作 成 ) 次 にページに 見 出 しをつけましょう ページ 編 集 の 画 面 内 で 適 当 な 個 所 をクリックしてください 文 字 を 入 力 すると ピンクの フォーカス 枠 が 表 示 され(1) 現 在 編 集 している 部 分 ( 段 落 )である ことを 示 しています ホームページ ビルダーではこの 枠 内 の 文 章 が 一 まとまりのパーツとして 扱 われ 枠 単 位 で 様 々な 設 定 をすることも 可 能 です 初 めての 作 成 と 文 字 を 入 力 してください 文 字 を 入 力 したら 画 面 右 側 に 表 示 されている 属 性 ビュー の タブをクリックして 表 示 される 段 落 の 中 で 見 出 し 1 を 選 択 してください すると 選 択 されている 部 分 の 文 字 が 見 出 し の レベル1 に 設 定 されます 2 標 準 モードでは 画 面 ではピンクの 枠 (どこでも 配 置 モードでは 水 色 の 枠 ) 1 * 見 出 し 設 定 は 文 字 のフォントや 大 きさなどを 指 定 するものではありません インターネット 上 でどのよ うに 表 示 されるかは 基 本 的 に 各 ブラウザ (InternetExploer FireFox GoogleChrome など)の 設 定 に 委 ねられています 属 性 タグで 見 出 しを 設 定 2 通 常 の 文 を 入 力 している 際 に 単 純 に 文 字 の 大 きさを 変 更 したい 場 合 は 書 式 メニューの サイズ を 選 択 し 文 字 の 大 きさを 変 更 してください なお この 見 出 し の 変 更 の 操 作 は 画 面 左 上 の[ 書 式 ツールバー]にあるプルダウンリストからも 同 じ ように 変 更 が 可 能 です 3 3 [ 書 式 ツールバー]からの 選 択 でも 同 じ I12

13 2.7. 文 の 入 力 ( 段 落 の 作 成 ) 見 出 しの 設 定 ができたら 通 常 の 文 章 を 入 力 してみましょう 見 出 し 初 めての 作 成 の 下 をクリックするか カーソル の 下 向 き 矢 印 キーを 押 します (このとき 見 出 し 初 めての 作 成 編 集 時 に 表 示 されていたピン クの 枠 が 消 えていることを 確 認 しましょう ) そこに これからホームページを 作 ります と 入 力 します 文 字 を 入 力 すると 新 たにピンクの 枠 が 表 示 され 新 しい 段 落 で 編 集 していることが 確 認 できます 新 しい 段 落 での 入 力 段 落 分 け ( キー)と 改 行 (Enter キー) 段 落 は 文 章 の 一 まとまりで 行 はその 段 落 内 を 構 成 するものです ホームページ ビルダーで 編 集 する 際 には 段 落 と 行 の 違 いを 明 確 にし 下 記 の 操 作 も 区 別 しなくてはいけません 段 落 分 け: 下 向 き 矢 印 キーを 押 す 改 行 :Enter キーを 押 す * 実 際 に HTML ソース 表 示 をしてみると 段 落 で 囲 まれる 文 章 は <P> </P> というタグで 囲 まれていること 改 行 し た 箇 所 には<br>というタグが 埋 め 込 まれていることを 確 認 できます 注 意 : 下 記 の 文 字 はコンピューターの 機 種 によって 表 示 できない 場 合 があります 使 用 はできるだけ 避 けましょう 半 角 カナ 文 字 : KK ミリ キロ センチ メートル ク ラム トン アール ヘクタール リットル ワット カロリー ト ル セント ハ ーセント ミリハ ール ヘ ーシ など 丸 付 きの 数 字 : 上下左右 など そ の 他 : 明治 大正 昭和 平成 mm cm km mg kg cc など I13

14 2.8. 文 字 のフォント( 書 式 )の 変 更 文 字 の 色 や 大 きさ 形 を 変 更 します はじめて 作 成 の 文 字 列 のうち 作 成 の 文 字 だけ 大 きくし 色 を 変 えてみましょう 変 更 したい 文 字 列 がある 段 落 をクリックします 1 作 成 の 文 字 列 のみを 選 択 (ドラッグ)します 2 メニューの 書 式 (O) フォント(F) を 選 択 します 3 文 字 列 をクリック 部 分 選 択 フォントを 選 択 フォント ダイアログボックスが 表 示 されます ここで 色 指 定 やサイズ 書 体 文 字 飾 りなどを 変 更 することが できます サンプル 欄 には 変 更 した 場 合 の 文 字 が 表 示 されます 4では 色 : Red サイズ:+4 斜 体 の 設 定 をしています サンプル 画 面 で 表 示 を 確 認 した 後 OK をクリックしてください 4 フォント 内 容 を 変 更 右 図 のように 文 字 のフォントの 変 更 ができました 5 フォントの 変 更 5 I14

15 書 式 ツールバーからの 変 更 文 字 書 式 の 変 更 : 文 字 の 書 式 は 書 式 ツールバーにある 以 下 のボタンでも 同 様 の 操 作 ができます 左 から 太 字 斜 体 取 り 消 し 線 ( をクリックすることで 下 線 なども 設 定 可 能 ) 文 字 サイズ 拡 大 文 字 サイズ 縮 小 文 字 色 変 更 フォントの 変 更 などのボタンが 配 置 されています 段 落 内 の 文 字 列 配 置 設 定 段 落 内 での 文 字 列 の 配 置 についても 書 式 ツールバーにある 以 下 のボタンで 操 作 ができます 左 から 左 揃 え 中 央 揃 え 右 揃 え となります 文 字 を 選 択 する 時 の 注 意 : 文 字 列 を 囲 うピンクの 枠 のみが 表 示 されている( 段 落 選 択 ) 状 態 で 右 クリックし メニューの 属 性 の 変 更 (A) を 選 択 すると 段 落 に 対 しての 属 性 指 定 になってしまい 文 字 の 色 や 形 状 の 変 更 はでき ません 必 ず 文 字 をドラッグ( 選 択 )してからフォント 設 定 を 行 ってください 文 字 の 大 きさの 指 定 について: 文 字 の 大 きさは 1~7 までの 数 字 あるいは -2~+4 の 割 合 で 指 示 します 特 に 指 示 がない 場 合 文 字 の 大 きさは3(0)になります ただし 大 きさの 違 いは 実 際 にブラウザで 表 示 しないとわかりませんので 注 意 してください I15

16 2.9. 水 平 線 の 入 力 次 は 水 平 線 ( 区 切 り 線 )を 引 いてみましょう ( 下 向 き 矢 印 )を 一 回 押 してください 挿 入 (I) メニューの 水 平 線 を 選 択 してください 1 これで 水 平 線 の 入 力 ができました 2 1 水 平 線 を 選 択 2 水 平 線 の 入 力 なお かんたんナビ 表 示 時 は 画 面 左 側 のナビメニューから[レイアウト 部 品 の 挿 入 ]をクリックして 水 平 線 を 選 択 することで 水 平 線 の 入 力 を 行 うこともできます 3 3 水 平 線 の 入 力 (かんたんナビ 表 示 I16

17 2.10. 壁 紙 の 挿 入 背 景 にホームページの 内 容 にふさわしい 壁 紙 をつけます 挿 入 (I) 画 像 ファイル 素 材 集 から 壁 紙 として を 選 択 してください 1 1 [ 素 材 集 から 壁 紙 として]を 選 択 すると 図 3 のように 素 材 集 から 開 く ダイアログボッ クスが 開 きます この 中 から 好 きなデザインを 選 択 して 開 く をクリックし ます ( 今 回 は wallppr016.gif を 選 択 します)2 2 図 3 壁 紙 のデザインを 選 択 背 景 に 壁 紙 が 設 定 されました 3 3 壁 紙 設 定 後 I17

18 2.11. リンクの 設 定 1 (ページ 内 のリンク) (1)リンク 先 の 用 意 次 はリンクの 設 定 をします まず 初 めにリンク 先 のページを 用 意 します リンクとは 複 数 の 文 書 を 結 び 付 ける 役 割 を 担 う 参 照 のことであり ジャンプ 先 を 指 定 して 別 ペー ジに 行 くことを 指 します ファイル(F) メニューから 標 準 モードで 新 規 作 成 (B) を 選 択 し 新 しい 画 面 を 開 いてください (2.3.(1)の 様 々な 新 規 作 成 を 参 照 してください) これから 作 成 するページは index.html からのリンク 先 として 用 意 するページです 新 規 画 面 が 開 いたら 編 集 領 域 に リンク 先 のページ と 入 力 してください sub.html という 名 前 を 付 けて 先 程 と 同 じ local_html フォルダ 内 に 保 存 してください (2.1. 準 備 を 参 照 してください) 保 存 できたら 右 側 の ページ 一 覧 タブをクリックしてみましょう 1 現 在 開 いているページの 一 覧 が 表 示 されます ( 編 集 中 のページ 欄 に index.html と sub.html という2つのファイルが 表 示 されています ) * 複 数 のページを 開 いている 場 合 は この 中 から 編 集 したいページを 選 択 することができます 1 ページ 一 覧 では この 中 の index.html をクリックしてください I18

19 (2) 設 定 index.html から sub.html へファイル 移 動 するためのリンクを 設 定 しましょう 現 在 開 いている index.html の 画 面 上 で 先 ほど 入 力 した 水 平 線 の 下 に 下 向 き 矢 印 ( )でカーソルを 移 動 してください そこに 次 のページへ と 入 力 してください 2 次 に 次 のページへ の 部 分 をドラッグ( 選 択 )します (この 次 のページへ のどこかをクリックした 時 別 のページへ 移 動 する 設 定 をリンクと 言 います ) 挿 入 (I) メニューの リンク(L) を 選 択 してください 3 2 リンクする 文 字 の 入 力 3 リンク 先 の 設 定 属 性 ダイアログボックスで ファイルへ タブの 参 照 をクリック して 表 示 されるメニューから ファイルから をクリックします 4 4 属 性 の 参 照 開 く ダイアログボックスが 開 くので sub.html を 選 択 し 開 く をクリックします 5 属 性 ダイアログボックスに 戻 りますので OK をクリックします 5 sub.html をリンク 先 に 選 択 すると 先 ほど 選 択 した 次 のページへ の 箇 所 に 下 線 が 引 かれ 青 く 表 示 されます これで リンクの 設 定 ができました 6 6 リンク 設 定 I19

20 正 しく 設 定 できたか 確 認 するために プレビュー タブを クリックしてください 7 7 プレビュー 画 面 でリンク 設 定 を 確 認 プレビュー タブでは 編 集 中 のページがブラウザ ーでどのように 見 えるかを 確 認 することができます この 画 面 上 で 次 のページへ をクリックします この 時 先 ほど 作 った sub.html ファイルの 画 面 が 表 示 されれば OK です ( 図 4 のようにリンク 部 分 をポイントすると ページ 編 集 領 域 の 上 にリンク 先 のファイルの 場 所 が 表 示 されます ) 図 4 リンクの 確 認 リンク 先 の 場 所 なお かんたんナビ 表 示 時 は 画 面 左 側 のナビメニュー から[リンクの 挿 入 ]をクリックして リンクの 設 定 を 行 うこともできます 8 8 リンクの 挿 入 (かんたんナビ 表 示 時 ) 参 考 :リンクは 文 字 や 画 像 を 選 択 し マウスの 右 クリック メニュー リンクの 挿 入 (L) を 選 択 しても 同 様 の 設 定 ができます 注 意 :ページ 編 集 を 続 けるにはページ 編 集 画 面 に 戻 ってください プレビュー 画 面 では 編 集 するこ とはできません I20

21 2.12. リンクの 設 定 2(URL を 指 定 ) リンク 先 にインターネット 上 の 別 のホームページを 指 定 することもできます ここでは 明 治 大 学 へ の 部 分 にインターネット 上 の 明 治 大 学 のホームページをリンクしてみましょう 次 のページへ の 下 に 明 治 大 学 へ と 入 力 をします リンクを 設 定 する 文 字 列 次 のページへ の 任 意 の 場 所 をポイントし 右 クリックして 表 示 されるメニューから リンクの 設 定 (L) を 選 択 し ます 1 1 属 性 ダイアログボックスが 表 示 されるので 上 部 にあるタブから URL へ タブをクリックします http(p): にチェックが 入 っているのを 確 認 し URL(R) 欄 にリンク 先 の URL を 入 力 してください (ここでは htttp:// と 入 力 します) 右 クリックからリンクの 設 定 最 後 に OK をクリックします 2 2 * プレビュー タブをクリックして 編 集 中 のページでリンク 先 のホームページに 飛 べることを 確 認 をしておきましょう URL を 指 定 なお かんたんナビ 表 示 時 は 画 面 左 側 のナビメニューから[リンクの 挿 入 ]をクリックして リンクの 設 定 を 行 うこともできます(I21 ページ 図 8) 参 考 : リンク 先 の URL はブラウザのアドレスを 事 前 にコピーしておくとよいでしょう その 際 下 記 のショートカットを 使 うと 便 利 です コピー:[Ctrl] キー + [C] (コントロールキーを 押 しながらアルファベットの C を 押 す) 貼 り 付 け:[Ctrl]キー + [V] (コントロールキーを 押 しながらアルファベットの V を 押 す) I21

22 2.13. 画 像 の 挿 入 次 は 画 像 を 挿 入 しましょう 今 回 はホームページ ビルダーに 添 付 されている 素 材 集 の 画 像 を 使 用 します 画 像 を 挿 入 したい 場 所 にカーソルを 移 動 し ピンクの 枠 が 表 示 されていない 状 態 にしてください (ここでは 次 のページへ の 下 に 画 像 を 挿 入 してみます ) 挿 入 (I) メニューの 画 像 ファイル(I) から 素 材 集 から(G) を 選 択 してください 1 1 素 材 集 から 画 像 を 選 ぶ なお かんたんナビ 表 示 時 は 画 面 左 側 のナビメニューから[ 写 真 や 画 像 の 挿 入 ]をクリックして 素 材 集 から を 選 択 することで 同 様 の 操 作 を 行 うこともできます 2 2 画 像 の 挿 入 (かんたんナビ 表 示 時 ) 次 に 素 材 集 から 開 く ダイアログボックスが 開 きます 左 側 のフォルダから イラスト 植 物 をクリックし 好 きな 画 像 を 選 択 してください 開 く をクリックします (3では img_h015.gif を 選 択 しています) I22 3 画 像 を 選 択

23 カーソル 位 置 に 画 像 が 挿 入 されます 4 画 像 の 大 きさを 変 えたい 時 : 画 像 を 選 択 し 画 像 の 四 隅 に 表 示 される 四 角 いハンドルを マウスで 両 向 き 矢 印 ( )の 状 態 で ドラッグしながら 調 節 してください 5 4 画 像 の 挿 入 5 画 像 の 拡 大 縮 小 ホームページ ビルダー16 で 使 用 できる 画 像 ファイルは GIF( 拡 張 子.gif) JPEG( 拡 張 子.jpg) PNG( 拡 張 子.png) BMP( 拡 張 子.bmp) など ホームページに 画 像 を 掲 載 する 際 の 注 意 ホームページ 作 成 時 には 使 用 する 画 像 データの 著 作 権 に 十 分 ご 注 意 ください また 自 分 で 撮 影 した 写 真 でも 個 人 を 特 定 できる 第 三 者 が 写 っている 場 合 は 肖 像 権 に 触 れることがあります I23

24 2.14. ページの 保 存 ( 画 像 ファイルも 合 わせて 保 存 する) では ここまでの 作 業 の 結 果 をすべてを 保 存 しましょう ファイル(F) メニューの すべて 保 存 (V) を 選 択 してください すると 図 5 の 画 面 が 表 示 され 先 ほど 挿 入 した 壁 紙 とイラストの 画 像 ファイルをどこに 保 存 しますか?と 尋 ねてきます HTML ファイルはテキストのみで 構 成 されるファイ ルで ホームページ ビルダー 編 集 画 面 でページ 内 に 挿 入 されたかのように 見 える 画 像 は HTML ファ イル 上 ではその 画 像 ファイルを 表 示 する という 内 容 が 書 き 込 まれているにすぎません そのため 挿 入 した 画 像 ファイルを 別 に 保 存 する 必 要 があります 図 5 の 画 面 はその 保 存 実 行 のためのダイアログボッ クスです 基 本 的 にページ 内 で 用 いる 画 像 等 の 素 材 ファイルも html ファイルと 同 じフォルダの 中 に 保 存 します(ここでは 保 存 場 所 が HTML ファイル と 同 じフォルダ と 指 定 してあります) 図 5 素 材 ファイルをコピーして 保 存 図 5のファイル 名 と 保 存 場 所 を 確 認 し 変 更 する 必 要 がある 場 合 には その 下 の 選 択 項 目 の 変 更 で 変 更 します ファイル 名 は 半 角 英 数 字 のみです また 保 存 場 所 は 参 照 (B)ボタンから 選 びましょう 最 後 に 下 部 の 上 書 き 時 に 自 動 的 にファイル 名 を 変 更 する にチェックをして 保 存 をクリックします 名 前 をつけて 保 存 上 書 き 保 存 と すべて 保 存 の 違 い 名 前 を 付 けて 保 存 や 上 書 き 保 存 は 現 在 編 集 中 の HTML ファイル(およびそれに 関 わる 画 像 等 の 素 材 ファイル)のみを 保 存 します これに 対 し すべて 保 存 は 開 いているすべての HTML ファ イル(およびそれに 関 わる 画 像 等 の 素 材 ファイル)を 保 存 します 以 上 でホームページの 作 成 は 完 了 です あとは これらのページをサーバへ 転 送 し ネット 上 に 公 開 します 別 冊 のアップロード 編 を 参 照 ください I24

25 3. 付 録 A. 表 の 挿 入 表 を 挿 入 したい 場 所 にカーソルを 移 動 してください (ここでは 桜 の 画 像 の 下 にカーソルを 移 動 しています) 表 (A) メニューの 表 の 挿 入 (B) を 選 択 します 1 かんたんナビ 表 示 時 は 画 面 左 側 のナビメニューから[ 表 の 挿 入 ] をクリックして 挿 入 することも 可 能 です 1 図 62 表 の 挿 入 表 の 挿 入 ダイアログボックスが 表 示 されます ここで 行 数 列 数 を 指 定 して OK をクリックします 2 (ここでは 4 行 4 列 と 指 定 しています) 2 画 面 上 に 表 が 挿 入 されました 3 最 初 にクリックしたカーソル 位 置 に 四 角 い 枠 が 指 定 した 数 だけ 表 示 され ます 枠 をクリックすることで その 表 の 中 に 文 字 や 画 像 を 挿 入 することがで きます 図 63 行 数 列 数 を 指 定 3 表 の 挿 入 I25

26 B. ロゴの 作 成 ロゴ は 以 下 の 手 順 で 作 成 します ロゴを 入 れたい 箇 所 にカーソルを 移 動 してください (ここでは はじめて 作 成 の 下 にカーソルをおきます ) メニューから 挿 入 ロゴを 選 択 してください 1 2 ロゴの 挿 入 かんたんナビ 表 示 時 は 画 面 左 側 のナビメニューから [ロゴ( 飾 り 文 字 )の 挿 入 ] をクリックして 挿 入 することも 可 能 です 2 1 ロゴの 挿 入 (ナビメニューから) すると ロゴの 作 成 ダイアログボックスが 表 示 されます 3 文 字 (T) 欄 に 適 当 な 文 字 を 入 力 し 文 字 の 大 きさ 文 字 の 形 状 を 選 択 してください プレビューで 確 認 し よければ 完 了 をクリックしてください 3 ロゴの 作 成 画 面 カーソル 位 置 にロゴが 挿 入 されました 4 4 ロゴの 挿 入 I26

27 ロゴの 再 編 集 のために 作 成 されるフォルダ ロゴを 作 成 した 場 合 には 保 存 した 際 に 下 記 メッセージが 出 てきて _HPB _Recycled という 名 前 のフ ォルダが local_html フォルダ 内 に 作 成 されます 挿 入 したロゴを 再 編 集 するためのもので このフォルダ を 削 除 してしまうと ロゴの 編 集 ができなくなりますので 注 意 しましょう C. 箇 条 書 きの 作 成 箇 条 書 きを 作 成 してみましょう まず カーソルを 移 動 しピンクの 枠 が 表 示 されていない 状 態 にしてください 箇 条 書 きの 種 類 は 番 号 なしの 箇 条 書 き(,, などが 先 頭 に 表 示 される) 番 号 つきの 箇 条 書 き(1,2,3 など)などがあります 箇 条 書 きは 挿 入 (I) メニュー リスト(S) と 選 択 します ここでは 箇 条 書 きの 種 類 の 番 号 なしリスト(B)を 選 択 します 1 また 箇 条 書 きは 書 式 ツールバーにある ボタンでも 1 同 じ 操 作 ができます 番 号 なしリスト(B) を 選 択 すると カーソル 位 置 に が 表 示 されます 箇 条 書 きの 入 力 カーソルの 点 滅 している 所 から さくら と 入 力 し Enter キーを 押 してください すると 2 番 目 の 文 が 入 力 できるようになります 2 2 入 力 時 箇 条 書 きは この 操 作 の 繰 り 返 しで 必 要 な 分 だけ 入 力 します 続 けて うめ と 入 力 し 次 に もも と 入 力 しましょう リストが 完 成 します 3 3 リスト 例 I27

28 D. サイト 機 能 を 使 ってホームページを 作 成 する ホームページ ビルダーにはサイト 機 能 があります これはホームページの 中 で 使 われるファイル 画 像 などをまとめて 管 理 ( 保 存 )し サイト 単 位 で ファイルの 読 み 込 みなどができる 機 能 です サイトを 作 成 する 場 合 は 新 たに ホームページ ビルダー16 を 立 ち 上 げてください 1.サイトを 新 規 作 成 する メニューバーにある サイト サイトの 新 規 作 成 を 選 択 してください 1 1 サイトの 新 規 作 成 サイト 新 規 作 成 のダイアログボックスが 表 示 されます まず サイト 名 の 指 定 を 行 います サイト 名 を 入 力 (ここでは mysite)して 次 へ をクリック します 2 2 サイト 名 の 指 定 次 に トップページの 指 定 方 法 の 選 択 を 行 います ここでは 新 規 にトップページを 作 成 する をクリックして 次 へ をクリックします 3 3 新 規 にトップページを 作 成 続 いて トップページのファイル 名 と 作 成 先 のフォルダの 指 定 を 行 います 4 トップページのファイル 名 (P) で index.html を 選 択 し トップページの 作 成 先 フォルダの 指 定 (F)では 参 照 (R) をクリックします 4 トップページのファイル 名 の 指 定 I28

29 フォルダーの 参 照 ダイアログボックスが 表 示 されます 今 度 はお 持 ちの USB メモリ 内 に 新 規 に local_html フォルダを 作 成 してみましょう コンピューター USB メモリ( 任 意 のドライブ) を 選 択 し 新 しいフォルダーの 作 成 をクリックしてでてく るフォルダーに local_html を 入 力 して 最 後 に OK をク リックしてください 5 その 後 先 程 の トップページのファイル 名 と 作 成 先 のフォル ダの 指 定 4 に 戻 るので 完 了 をクリックします local_html フォルダの 新 規 作 成 5 ページ 作 成 方 法 の 選 択 ダイアログボックスが 開 きますので 白 紙 ページ(B) をクリックしましょう 転 送 設 定 のメッセージがでて きたら いいえ をクリッ クします サイトが 作 成 されました 2.サイト 作 成 後 ファイルページを 作 成 します 以 下 3 つのページ(HTML ファイル)を 標 準 モードで 新 規 作 成 より 作 成 してみましょう index.html ファイル 名 :index.html 書 式 設 定 お 茶 のページ 見 出 し 1 中 央 揃 配 置 お 茶 のいろいろ 見 出 し 2 中 央 揃 配 置 お 茶 のおとも 見 出 し 2 中 央 揃 配 置 リンク 設 定 お 茶 のいろいろ に sub1.html へのリンク お 茶 のおとも に sub2.html へのリンク 素 材 画 像 pic_f01.jpg( 素 材 集 から 写 真 食 べ 物 ) I29

30 sub1.html ファイル 名 :sub1.html リンク 設 定 ホームへ 戻 る に index.html へのリンク 素 材 画 像 pic_f038.jpg( 素 材 集 から 写 真 食 べ 物 ) sub2.html ファイル 名 :sub2.html リンク 設 定 ホームへ 戻 る に index.html へのリンク 素 材 画 像 pic_f054.jpg( 素 材 集 から 写 真 食 べ 物 ) 3. 作 成 したファイルをサイトに 保 存 します ファイル すべて 保 存 を 選 択 する 全 てのファイルが local_html フォルダ 内 に 保 存 されます 6 参 考 までに local_html フォルダを 開 いて 確 認 しまし ょう 6 local_html フォルダを 開 いた 画 面 ここでは 3 つの html ファイルを 作 成 しましたが フォルダ 内 にはそれに 付 随 する 複 数 のファイル( 画 像 など)が 自 動 的 に 保 存 されていますね これらのファイルが 別 のフォルダに 保 存 されてしまうと ホームページ 更 新 時 に 画 像 が 表 示 されない 等 の 不 具 合 が 生 じますので 作 成 時 には 十 分 注 意 しましょう I30

31 4.サイト 単 位 でファイルを 読 み 込 む 作 成 したファイルをサイト 名 でまとめて 読 み 込 むことがで きます サイト サイトを 開 く を 選 択 します 7 7 サイト 単 位 でファイルを 読 み 込 む I29~I30 ページで 設 定 したサイト 名 (ここでは mysite )を 選 択 して 開 く をクリックします 8 8 サイトを 選 択 すると 下 記 のような ビジュアルサイトビュー が 開 き サイト 内 のリンク 構 造 が 表 示 されます 編 集 したいファイルをダブルクリックすると 編 集 画 面 が 開 きます それぞれ+を クリックして 展 開 index.html から sub1.html と sub2.html へのリンク sub1.html と sub2.html から index.html へのリンク 5.ファイルの 転 送 ページの 公 開 はアップロード 編 を 参 照 してください I31

32 E. ヘルプ この 講 習 会 で 紹 介 した 内 容 以 外 にも ホームページ ビルダーには 多 くの 便 利 な 機 能 があります ホームページ ビルダーの 使 い 方 については ガイドマップ に 詳 しくまとめられていますので 活 用 して 下 さい アップロード I32