ホームページ 作 成 ソフト (ホームページ ビルダー) 講 習 会 テキスト 2014 年 度 版 (141110 更 新 ) 明 治 大 学 メディア 支 援 事 務 室
目 次 目 次... 2 1. 概 要... 3 1.1 ページ 公 開 の 仕 組 み... 3 1.2 HTMLと タグ... 4 2. コンテンツ( 素 材 )の 作 成... 4 2.1 準 備... 4 2.2 ホームページ ビルダー18 の 起 動... 5 2.3 新 たにページを 作 成 する... 5 2.4 文 字 の 入 力 ( 見 出 しの 作 成 )... 6 2.5 文 の 入 力 ( 段 落 の 作 成 )... 8 2.6 水 平 線 の 入 力... 9 2.7. 壁 紙 の 挿 入... 10 2.8 ページにタイトルを 付 ける... 11 2.9 ページを 保 存 する... 12 2.10 リンクの 設 定... 13 2.11 画 像 の 挿 入... 15 2.12 ページの 保 存 ( 画 像 ファイルも 合 わせて 保 存 する)... 18 3. WWW サーバへのアップロード... 19 3.1.ページのアップロード( 転 送 と 公 開 )... 19 3.2 作 ったホームページをブラウザ 上 で 見 る... 23 4. 付 録... 24 A. 文 字 のフォント( 書 式 )の 変 更... 24 B.リンクの 設 定 (URL で 指 定 )... 26 C. 表 の 挿 入... 27 D.ロゴの 作 成... 28 E. 箇 条 書 きの 作 成... 29 F.サイト 機 能 を 使 ってホームページを 作 成 する... 30 --- 本 テキストについて--- このテキストは ホームページ ビルダー18(ホームページ 作 成 ソフト)を 利 用 してホームページの 元 となる 形 式 のド キュメントを 作 成 後 大 学 の WWW サーバへ FFFTP(ファイル 転 送 ソフト)を 用 いて 転 送 してホームページを 公 開 するまでの 基 本 的 な 手 順 を 記 しています 使 用 環 境 は Windows7 となりますが パソコンの 基 本 的 な 操 作 ウェブブラウザ(Microsoft InternetExplorer や Mozilla Firefox Google Chrome)の 操 作 に 関 する 詳 細 は 本 テキスト 中 では 省 略 させて 頂 きます 2
1. 概 要 1.1 ページ 公 開 の 仕 組 み ホームページは WWW(World Wide Web ワールドワイドウェブ)というシステムを 利 用 して 情 報 を 発 信 する 際 に 作 成 します 作 成 したデータを Web サーバ( 情 報 を 実 際 に 発 信 するコンピュータ) 上 に 用 意 することで インター ネット 上 のコンピュータから そのデータが 閲 覧 できるようになります 駿 河 台 の 利 用 者 がホームページを 公 開 する 場 合 下 記 の4つの 手 順 が 必 要 です 1. MyDocs(X:)に local_html( 学 内 ) あるいは public_html( 学 外 )という フォルダを 作 成 します 2. そのフォルダの 中 に 作 成 したホームページのファイルや 画 像 を 保 存 します 3. local_html( 又 は public_html)フォルダを ファイル 転 送 ソフト(FFFTP)を 利 用 して 転 送 (アップロード)しま す 4. ブラウザ 上 で 下 記 の URL を 入 力 する 事 で 公 開 されていることを 確 認 します 学 内 のみの 公 開 http://local.kisc.meiji.ac.jp/~ 基 盤 サービス 利 用 アカウント/ファイル 名 学 外 への 公 開 http://www.kisc.meiji.ac.jp/~ 基 盤 サービス 利 用 アカウント/ファイル 名 ファイル 名 を 指 定 しない 場 合 は 通 常 index.html を 読 み 出 し これがトップページとなります この 講 習 会 では 最 終 的 に 23 ページの 図 43 のようなホームページを 完 成 させます なお ホームページを 公 開 するに 当 たっては MIND 利 用 基 準 を 遵 守 しなければなりません 以 下 を 参 照 してください 学 校 法 人 明 治 大 学 総 合 情 報 ネットワーク(MIND) 利 用 基 準 http://www.meiji.ac.jp/mind/rule/mind-riyoukijun.html 学 校 法 人 明 治 大 学 総 合 情 報 ネットワーク(MIND) 運 用 基 準 http://www.meiji.ac.jp/mind/rule/mind-unyou-kijun.html 図 1 ページ 公 開 の 仕 組 み 参 考 : ユーザーID 前 の ~ (チルダと 呼 ぶ) は shift キー+ へ キーを 半 角 で 入 力 したものです ( 図 2) shift キーを 押 さずに へ キーを 押 すと ^ (キャレット またはハットな どと 呼 ぶ) が 入 力 されてしまいます 図 2 チルダ 3
1.2 HTMLと タグ ホームページは HTML というデータ 形 式 で 記 述 します 右 の 図 3 のようなものをソースコードと 呼 びます <H1> や </H1> のように < > 記 号 で 囲 まれた 部 分 を タ グ と 呼 び <HTML>が HTML 文 書 の 開 始 タグ <BODY>がホ ームページ 上 で 実 際 に 表 示 される 本 文 の 開 始 タグ </BODY>が 本 文 の 終 了 タグと 言 うように データの どういう 要 素 であるか を 指 定 しています HTML のデータの 中 身 はテキストデータ( 装 飾 のない 単 純 な 文 字 のこと)ですので メモ 帳 や 秀 丸 などのテキストエ ディタ(テキストデータを 編 集 するソフト)でも 作 成 可 能 ですが その 場 合 は タグ の 種 類 意 味 を 理 解 する 必 要 があります この 講 習 で 使 う ホームページ ビルダー は タグ を 知 ら なくても マウスを 使 用 して 直 観 的 な 操 作 でデータにタグを 自 動 的 に 埋 め 込 みながらホームページの 作 成 行 なえるソフトで す <HTML> <HEAD> <TITLE> 私 のホームページ</TITLE> </HEAD> <BODY> <H1>ようこそ</H1> <IMG SRC= my_face.gif > <HR> このホームページの 説 明 </BODY> </HTML> 図 3 HTML タグ 2. コンテンツ( 素 材 )の 作 成 学 内 用 に 公 開 するホームページ(ホームページで 表 示 される 文 章 ファイル 画 像 等 )の 作 成 を 行 います 注 意 することは コンテンツ( 素 材 )やフォルダの 名 前 は 全 て 半 角 英 数 で 入 力 するということです 全 角 日 本 語 等 で 名 前 を 入 力 するとホームページを 公 開 した 時 に 正 しく 表 示 されないことがあります また 環 境 によっては 大 文 字 小 文 字 をしっかり 区 別 することが 必 要 な 場 合 もあります 2.1 準 備 マイドキュメントに local_html ( 学 内 に 公 開 するためのフォルダ)を 作 成 してください ウィンドウ 上 部 メニューバーの ホームタブ を 開 くと 見 つかる[ 新 しいフォルダー]をクリック し 作 成 されたフォルダを 半 角 英 数 で local_html と 名 前 を 変 更 する ( 図 4) 以 後 作 成 したページや 画 像 は 全 てこのフォルダに 保 存 します また サーバへの 転 送 もこのフォルダをまるごと 行 います 注 意 : 一 つのフォルダにすべてのコンテンツが 入 っていないとホ ームページを 更 新 した 時 に 画 像 が 表 示 されないなどの 不 具 合 が 生 じます サイト 機 能 の 紹 介 : ホームページ ビルダーには 上 記 でフォルダを 作 成 するの と 同 じ 目 的 で サイト 作 成 という 機 能 を 利 用 することも できます サイト 作 成 をするとサイト 単 位 でファイルの 読 み 込 みがで き またサイト 内 のファイルのツリー 構 造 が 確 認 できま す 詳 細 は 付 録 F.サイト 機 能 を 使 ってホームページを 作 成 する を 参 考 にしてください 図 4 フォルダ 作 成 (local_html) 4
2.2 ホームページ ビルダー18 の 起 動 ホームページ ビルダー18 を 起 動 してください スタート ボタン すべてのプログラム ホームページ ビルダー18 ホームページ ビルダー18 をクリックすると 起 動 できます ( 図 5) 2.3 新 たにページを 作 成 する 図 5 ホームページ ビルダーの 起 動 (1) 様 々な 新 規 作 成 ホームページ ビルダーが 起 動 します ( 図 6) 次 いで ホームページ ビルダーのメニューより ファイル(F) 標 準 モードで 新 規 作 成 (B) と 選 択 してくだ さい ( 図 7)ここで ページの 作 成 が 始 められます 図 6 ホームページ ビルダー 起 動 画 面 図 7 新 規 作 成 5
(2) 新 規 作 成 ホームページ ビルダーでは 様 々なホームページの 形 式 を 設 定 することができます ここでは コンピュータで 閲 覧 する 一 般 的 なホームページ 作 成 の 手 順 を 説 明 します 1 画 面 左 上 の ファイル メニューをクリックして 標 準 モードで 新 規 作 成 (B) を 選 択 してください ( 図 8) 参 考 :かんたんナビ 表 示 時 のかんたんページ 作 成 とサンプルテンプレ ート ウイザードに 沿 って 作 成 を 進 めることで ホームページ ビルダーで 用 意 されている 形 式 のホームページを 作 成 することができます ホ ームページ 全 体 の 構 成 が 自 動 的 に 生 成 される 為 効 率 的 に 作 成 が 行 えますが 作 成 されたホームページに 変 更 する 場 合 このテ キストで 説 明 するホームページ ビルダーの 基 本 的 な 操 作 や HTML についての 知 識 が 必 要 となります 図 8 標 準 モードで 新 規 作 成 2 白 紙 ページの 作 成 画 面 が 表 示 されます ( 図 9) 図 9 白 紙 の 新 しいページ 6
2.4 文 字 の 入 力 ( 見 出 しの 作 成 ) はじめにページに 見 出 しをつけましょう ページ 編 集 の 画 面 内 で 適 当 な 個 所 をクリックしてください 1 文 字 を 入 力 すると 通 常 の 文 として 文 字 が 入 力 されます 行 が 選 択 されている 間 ピンクの 枠 が 表 示 されます この 枠 が 現 在 編 集 し ている 対 象 あるいはページの 部 分 を 示 し この 枠 内 の 箇 所 に 対 して 様 々な 設 定 を 指 示 することが 可 能 です ( 図 10) 図 10 文 字 入 力 画 面 2 初 めての 作 成 と 文 字 を 入 力 してくださ い 文 字 を 入 力 したら 画 面 右 手 に 表 示 さ れている 属 性 タグをクリックし その 下 段 に 表 示 される 段 落 の 中 で 見 出 し 1 を 選 択 してください ( 図 11)すると 選 択 さ れている 部 分 の 文 字 が 見 出 し の レベル 1 に 設 定 されます この 操 作 は 画 面 左 上 のメニューから 選 択 す ることでも 可 能 です 見 出 し とは 新 聞 の 見 出 し と 同 じ 意 味 で 表 示 される 文 字 の 大 きさについての 指 示 とは 異 なります 見 出 し がブラウザ 上 (InternetExplorer や GoogleChrome MozillaFirefox など)で どのよう な 文 字 大 きさで 表 示 されるかという 点 について は 基 本 的 には Web ブラウザの 仕 様 に 依 存 します 表 示 メニューの 属 性 ビューを クリックする と 図 11 属 性 タブで 見 出 しを 設 定 属 性 タグを 表 示 できる 通 常 の 文 を 入 力 している 際 に 単 純 に 文 字 の 大 きさを 変 更 したい 場 合 は 書 式 メニューの サイズ を 選 択 し 文 字 の 大 きさを 変 更 してくだ さい 実 際 の 手 順 は 付 録 A. 文 字 のフォント( 書 式 )の 変 更 を 参 照 して ください また 見 出 し の 変 更 について 画 面 左 上 の 表 示 のところでも 同 じように 変 更 が 可 能 です ( 図 12) 図 12 ツールバーの 書 式 メニュー 7
2.5 文 の 入 力 ( 段 落 の 作 成 ) 見 出 しの 設 定 ができたら 通 常 の 文 章 を 入 力 してみましょう まず 2.4 文 字 の 入 力 ( 見 出 しの 作 成 )で 作 成 した 見 出 し 初 めての 作 成 の 下 をクリック このとき 見 出 し はじめて 作 成 に 表 示 されてい たピンクの 枠 が 消 えその 下 から 新 しい 段 落 ができます そこに これからホームページを 作 ります と 入 力 してみましょう ( 図 13) ホームページ ビルダーでは 通 常 下 向 きのカーソルキー( 矢 印 キー )を 押 すと 新 しい 文 段 落 が 開 始 され 文 字 ( 文 ) 入 力 できます また エンター(Enter) キーを 押 すと 行 は 変 わりますが 段 落 が 変 更 になったとはみなされません 見 出 しにピンクの 枠 があり 見 出 し 文 の 末 尾 にカーソルが 残 っている 場 合 は 下 向 き 矢 印 ( )をクリックしてください 注 意 : 右 端 の 領 域 にカーソルがあるとページ 編 集 領 域 で 文 字 入 力 できません かならず 一 旦 編 集 領 域 をクリックしてから 入 力 してください 文 字 のフォント( 書 式 )の 変 更 ロゴの 作 成 箇 条 書 き 表 の 挿 入 に 関 しては 付 録 (23ページ~)を 参 照 してください ホームページ 作 成 上 の 注 意 点 段 落 と 改 行 改 行 の 指 示 は 行 を 変 えるという<BR>タグをページに 埋 め 込 みます 一 方 段 落 の 変 更 は<P>タグが 埋 め 込 まれます ホームページを 作 成 する 際 に 使 わない 方 が 良 い 文 字 図 13 新 しい 段 落 に 入 力 世 の 中 には 様 々なコンピュータがあり 機 種 によっては 表 示 できない 文 字 ( 機 種 依 存 文 字 )があります たとえば 丸 付 きの 数 字 : 1234567891011121314151617181920上下左右 など 組 み 文 字 : ミリ キロ センチ メートル ク ラム トン アール ヘクタール リットル ワット カロリー ト ル セント ハ ーセント ミリハ ール ヘ ーシ mm cm km mg kg cc KK 明治 大正 昭和 平成 など そのほか : 半 角 カナ 文 字 (アイウエオ) ローマ 数 字 (ⅠⅡ ⅢⅣ ⅰⅱⅲⅳ) など ページを 作 成 する 際 には このような 文 字 の 使 用 は 避 けましょう 8
2.6 水 平 線 の 入 力 次 は 水 平 線 ( 区 切 り 線 )を 引 いてみましょう ( 下 向 き 矢 印 )を 一 回 押 して 段 落 を 進 めてください 次 に 画 面 左 部 分 に 表 示 されている ナビメニュー の 水 平 線 ボタンをクリックするか( 図 14) 画 面 上 部 分 に 表 示 されている 挿 入 (I) メニューの 水 平 線 (Z) をクリックしてください ( 図 15) 図 14 挿 入 コマンドで 水 平 線 を 設 置 図 15 ナビメニューで 水 平 線 を 設 置 図 16 水 平 線 の 例 ダイアログボックス 図 17 水 平 線 の 挿 入 これで 水 平 線 を 作 成 できました ( 図 16) 9
2.7. 壁 紙 の 挿 入 背 景 にホームページの 内 容 にふさわしい 壁 紙 をつけます 挿 入 画 像 ファイル 素 材 集 から 壁 紙 として を 選 択 してください ( 図 19) すると 壁 紙 を 選 択 する 画 面 が 開 きます この 中 から 好 きなデザインを 選 択 して 開 く をクリックします ここでは wallppr016.gif を 選 択 しています ( 図 18) 図 18 壁 紙 選 択 図 19 素 材 集 から 壁 紙 として を 選 択 背 景 に 壁 紙 が 設 定 されました ( 図 20) 図 20 壁 紙 挿 入 結 果 10
2.8 ページにタイトルを 付 ける タイトル とはホームページ 上 の 名 前 のことです 見 出 し ( 本 文 の 文 頭 )とは 異 なります ( 見 出 し は7ページ 図 10~ 図 11 で 作 成 したものです ) 画 面 上 何 も 選 択 されていない 状 態 で 編 集 (E) 属 性 の 変 更 (A) を 選 択 してください ( 図 21) 図 21 属 性 の 変 更 属 性 画 面 の ページ 情 報 タブにある ページタイトル(P) に 適 当 に 名 前 を 入 力 し OK をクリ ックしてください ( 図 22) ここで 入 力 した 文 字 列 が 編 集 中 のページのタイトルになります (OK をクリック 後 図 23 の 所 に 表 示 されます)この 画 面 上 でページの 背 景 色 や 表 示 文 字 の 色 の 変 更 などを 設 定 することができます 図 23 ページタイトルが 表 示 される 図 22 ページタイトルを 入 力 11
2.9 ページを 保 存 する 画 面 上 部 分 のメニューバーの ファイル(F) 名 前 を 付 けて 保 存 (A) を 選 択 し local_html フォルダの 中 へ index.html という 名 前 を 半 角 英 数 で 入 力 し 保 存 してくださ い ( 図 24) 保 存 する 場 所 を 指 定 しないと マイドキュ メント にページが 保 存 されてしまうので 注 意 し てください 図 24 名 前 を 付 けて 保 存 すると 図 25 のように 壁 紙 に 使 用 した 画 像 素 材 をどこに 保 存 するか 確 認 画 面 が 出 てきます 今 回 は 図 のように 設 定 し html ファイルと 同 じ 場 所 に 保 存 します 注 意 : 保 存 したファイルの 編 集 画 面 を 再 度 開 く 時 は ホームページ ビルダーを 開 いてから 行 なって ください エクスプローラー 上 でファイルをクリッ クしてもファイルの 編 集 画 面 を 開 くことはできま せん 保 存 場 所 にファイルをコピーする(C) にチェックをいれて html ファイルと 同 じ 場 所 に 保 存 する 図 25 素 材 ファイルをコピーして 保 存 index.html というファイル 名 について 明 治 大 学 で 運 用 している WWW サーバは あるクライアント(ブラウザ)からページのリクエストを 受 け 取 ったときに ページの 名 前 が 省 略 されていると index.html という 名 称 のファイルを 応 答 します 例 えば http://www.kisc.meiji.ac.jp/ という 要 求 を 受 け 付 けた 場 合 http://www.kisc.meiji.ac.jp/index.html を 応 答 しま す WWW サーバでは ファイル 名 が 省 略 された 場 合 に この 名 前 index.html というファイルを 応 答 するというよう な 設 定 がされている 場 合 が 多 くあります ファイル 名 は 必 ず 半 角 英 数 で パソコンではファイルやフォルダの 名 前 には アルファベットや 数 字 だけでなく ひらがな カタカナ 漢 字 等 様 々な 文 字 を 使 うことが 可 能 です しかし ファイル 名 に 漢 字 や 記 号 等 を 使 用 すると FTP ソフトや Web サーバ パソコン の 種 類 や 言 語 環 境 によってはページを 公 開 する 際 に 文 字 化 けなど 正 しく 表 示 されないことがあります ページや 画 像 写 真 に 付 ける 名 前 は 半 角 英 数 字 のみを 使 うよう 注 意 してください また 大 文 字 小 文 字 の 間 違 いにも 気 を 付 け ましょう 12
2.10 リンクの 設 定 (1)リンク 先 の 用 意 次 はリンクの 設 定 をします 最 初 にリンク 先 のページを 用 意 します リンクとは 複 数 の 文 書 を 結 び 付 ける 役 割 を 担 う 参 照 のことであり ジャンプ 先 を 指 定 し 別 ページに 行 くことを 指 します ファイル(F) メニューから 標 準 モードで 新 規 作 成 (B) を 選 択 し 新 しい 画 面 を 開 いて 下 さい (5ページの 2.3 新 たにページを 作 成 する 図 7 を 参 照 してください) こちらのページは index.html からのリンク 先 として 用 意 するページです 新 規 画 面 が 開 いたら 編 集 領 域 に リンク 先 のページ と 入 力 してください sub.html という 名 前 を 付 けて 保 存 してください (12ページ 図 24 参 照 ) 保 存 できたら 右 側 の ページ 一 覧 タブをクリックしてみてください ( 図 26) 現 在 開 いているページの 一 覧 が 表 示 されます ( 編 集 中 のページ 欄 に index.html と sub.html という2つのファイルが 表 示 されています ) 複 数 のページを 開 いている 場 合 は この 中 から 編 集 したいページを 選 択 できます ページ 一 覧 アイコンをクリック 青 くなっている 方 が 表 示 中 のページ 表 示 に 少 し 時 間 が かかることがある すると ページ 一 覧 が 表 示 される 図 26 ページ 一 覧 ここでは この index.html をクリックしてください 13
(2) 設 定 index.html から sub.html へファイル 移 動 するための リンクを 設 定 しましょう 現 在 開 いている index.html の 画 面 上 で 先 ほど 記 入 し た 文 字 の 後 に 下 向 き 矢 印 ( )でカーソルを 移 動 してくださ い そこに 次 のページへ と 入 力 してください 次 のページへ の 部 分 をドラッグ( 選 択 )します ( 図 27) (この 次 のページへ のどこかをクリックした 時 別 のページ へ 移 動 する 設 定 をリンクと 言 います ) 図 27 リンクする 部 分 を 選 択 する 挿 入 (I) メニューの リンク(L) を 選 択 してください ( 図 28) またはナビメニューのリンクの 挿 入 ボタンをクリックしても 同 様 に 設 定 可 能 です 図 28 リンク 先 の 設 定 属 性 画 面 が 表 示 されたら ファイルへ タブをクリックし 参 照 をクリックします ( 図 29) 参 考 : ファイルへ タブはファイルにリンク する 時 に URL へ タブは 他 所 の ホームページへリンクする 時 に 使 用 します 26ページの B.リンクの 設 定 (URL で 指 定 )を 参 照 下 さ い 図 29 属 性 画 面 で 参 照 設 定 14
開 く という 画 面 が 開 くので sub.html を 選 択 し 開 く をクリックします ( 図 30) 属 性 画 面 に 戻 り OK を 選 択 します 図 30 sub.html をリンク 先 に 選 択 すると 先 ほど 選 択 した 次 のページへ の 箇 所 に 下 線 が 引 かれます これでリンクの 設 定 ができました ( 図 31) 正 しく 設 定 できたか 確 認 するために プレビュー タブ をクリックしてください ( 図 32) すると ページ 編 集 画 面 と 同 様 の 画 面 が 開 きます こ の 画 面 上 で 次 のページへ をクリックします 先 ほど 作 った sub.html ファイルの 画 面 が 表 示 されれ ば OK です 参 考 :リンクは 文 字 や 画 像 を 選 択 し マウスの 右 クリッ 図 31 リンクを 設 定 すると 青 字 になり 下 線 がつく ク メニュー リンクの 挿 入 (L) を 選 択 しても 同 様 の 設 定 ができます 注 意 : ページ 編 集 を 続 けるにはページ 編 集 タブをクリックして 編 集 画 面 に 戻 ってください プレビュー 画 面 では 編 集 はできません ( 図 33) 図 32 プレビュー 画 面 で 確 認 図 33 編 集 するときはページ 編 集 へ 15
2.11 画 像 の 挿 入 次 は 画 像 を 挿 入 しましょう 今 回 はホームページ ビルダーに 添 付 されている 素 材 集 の 画 像 を 使 用 します 画 像 を 挿 入 したい 場 所 にカーソルを 移 動 し ピンクの 枠 が 表 示 されていない 状 態 にしてください 挿 入 (I) メニューの 画 像 ファイル(I) から 素 材 集 から (G) を 選 択 してください ( 図 34) 参 考 :ナビメニューの ボタン( 画 像 ファイルの 挿 入 ) をクリックしても 同 様 です 図 34 画 像 の 挿 入 素 材 集 から 開 く 画 面 が 開 きます 左 側 のフォルダから 画 像 イラスト 植 物 をクリックし 好 きな 画 像 を 選 択 したら 開 く をクリックします (では img_h015.gif を 選 択 しています )( 図 35) カーソル 位 置 に 画 像 が 挿 入 されます ( 図 36) 画 像 の 大 きさを 変 えたい 時 : 画 像 を 選 択 し 画 像 の 四 隅 に 表 示 される 四 角 いハンドルをマウスの 左 クリックで 操 作 しながら 調 節 してください 図 35 画 像 の 選 択 図 36 画 像 が 表 示 される 16
参 考 : ホームページ ビルダー18 で 使 用 できる 画 像 ファイルは GIF( 拡 張 子.gif) : 読 み 方 はジフなど 容 量 が 軽 いが 色 の 数 が 256 色 までしか 使 用 できない JPEG( 拡 張 子.jpg) : 読 み 方 はジェイペグなど 容 量 画 質 ともそこそこで 扱 いやすい PNG( 拡 張 子.png) : 読 み 方 はピングなど 容 量 が 軽 く 画 質 も JPEG より 良 いが 古 いパソコンでは 表 示 できない 場 合 がある BMP( 拡 張 子.bmp) : 読 み 方 はビットマップなど 容 量 が 重 くなることがある などの 特 徴 があります 必 要 に 応 じて 使 い 分 けましょう ホームページに 画 像 を 掲 載 する 際 の 注 意 ホームページ 作 成 時 には 使 用 する 画 像 データの 著 作 権 に 十 分 気 を 付 けましょう また 自 分 で 撮 影 した 写 真 でも 個 人 を 特 定 できる 第 三 者 が 写 っている 場 合 は 肖 像 権 に 触 れる 事 があります 友 達 や 知 り 合 いの 写 真 を 掲 載 する 場 合 は 必 ず 本 人 に 確 認 を 取 りましょう 17
2.12 ページの 保 存 ( 画 像 ファイルも 合 わせて 保 存 する) では すべてを 保 存 しましょう ファイル(F) メニューの すべて 保 存 (V) を 選 択 してください すると 13ページの 時 と 同 様 に 図 24 の 画 面 が 表 示 されます 先 ほど 挿 入 した 画 像 をどこに 保 存 しますか?と 尋 ねてきます ページと 画 像 は 必 ず 全 て local_html フォルダの 中 に 保 存 します 図 37 のように 保 存 場 所 に (HTML ファ イルと 同 じフォルダ) が 指 定 されている 場 合 画 像 は local_html フォルダに 保 存 されま す 上 書 き 時 に 自 動 的 にファイル 名 を 変 更 する に チェックをして 保 存 をクリックしてください 画 像 ファイルの 名 前 を 変 更 する 必 要 がある 場 合 には ホームページを 作 成 する 前 に 変 更 しておき ましょう 図 37 素 材 ファイルをコピーして 保 存 注 意 :ファイル 名 は 半 角 英 数 字 です 半 角 カナや 全 角 は 使 わないでください ) 以 上 でホームページの 作 成 は 終 了 です では これらのページをサーバへ 転 送 し 実 際 にブラウザで 表 示 してみましょう 18
3. WWW サーバへのアップロード 3.1.ページのアップロード( 転 送 と 公 開 ) 次 に 作 成 したホームページを 公 開 します 作 成 したホームページはサーバへ 転 送 して 初 めて 公 開 されます FFFTP というファイル 転 送 ソフトを 使 って suruga2 というサーバに 転 送 することでホームページとして 公 開 されます スタート メニューから プログラム を 選 択 し FFFTP を 選 択 しま す ( 図 38) 図 38 FFFTP 起 動 ホスト 一 覧 の 画 面 が 開 くので ここで 転 送 先 のサーバ (suruga2)を 指 定 したら 接 続 を 選 択 してください ( 図 39) 参 考 : 接 続 先 のことをホストと 呼 びます ここではホストは Web サーバのことを 指 しています 図 39 サーバーに 接 続 する 次 に 自 分 のユーザーID パスワードと 順 に 入 力 した 後 OK をク リックします この 時 anonymous(a) の 欄 にチェックを 入 れないでく ださい ( 図 40) 図 40 ユーザーID を 入 力 19
suruga2 に 接 続 すると 以 下 のような 画 面 になります ( 図 41) 図 41 local_html をアップロード まず 赤 く 囲 んだ 画 面 左 側 のフォルダを X:\ (MyDocs の 場 所 )に 変 更 します 表 示 された 左 のフォルダ 一 覧 の 中 から local_html フォルダを 選 択 し アップロード 処 理 中 状 況 を 表 示 する 画 面 が 流 れます (アップロードボタン)をクリックします 注 意 :となりの はミラーリングと 言 って 左 側 に 表 示 されているものを 全 て 右 側 にコピーするボタンです 間 違 えると 少 々やっかいなので 気 を 付 けましょう 注 意 :local_html フォルダに 不 必 要 なファイル 例 えばバックファイル(.bak)などがある 場 合 あらかじめ 転 送 前 に 削 除 して 下 さい 下 の 図 42 のように local_html フォルダが 右 側 にコピーされていれば 転 送 完 了 です 20
最 後 に( 切 断 )ボタン を 押 し FFFTP を 終 了 します アップロードできたら 切 断 サーバーのほうに Local_html ができた 図 42 アップロード 完 了 21
参 考 : 下 図 に FFFTP 画 面 の 主 な 場 所 の 解 説 です ダウンロード アップロード 最 新 の 情 報 に 更 新 ローカル(ファイルサーバーの 中 身 ) ホスト(Web サーバーの 中 身 ) 現 在 選 択 中 のウィンドウ 図 43 FFFTP の 解 説 22
3.2 作 ったホームページをブラウザ 上 で 見 る Web ブラウザ(InternetExplorer か Google Chrome)を 立 ち 上 げて アドレス(D) 欄 に 下 記 アドレスを 入 力 しエンターキーを 押 してください 学 校 内 のみ 公 開 する 場 合 :http://local.kisc.meiji.ac.jp/~ユーザーid/ 自 分 が 作 ったホームページが 表 示 されましたか? 正 しく 転 送 されていれば 下 記 のように 自 分 が 作 ったホームページがブラウザ 上 に 公 開 されます 図 44 完 成 図 このページは local として 公 開 されているため 学 外 から 閲 覧 することはできません 学 校 外 へ 公 開 する 場 合 は local_html フォルダを public_html フォルダという 名 前 に 変 更 することで 可 能 となります その 際 の URL は 下 記 です 学 校 外 にも 公 開 する 場 合 :http://www.kisc.meiji.ac.jp/~ユーザーid/ 講 習 は 以 上 です 最 後 に ホームページ ビルダーなど 立 ち 上 がっているソフトウェアをすべて 終 了 してください また ログオフもお 願 いします お 疲 れ 様 でした 23
4. 付 録 A. 文 字 のフォント( 書 式 )の 変 更 文 字 の 色 や 大 きさ 形 を 変 更 します はじめて 作 成 の 文 字 列 のうち 作 成 の 文 字 だけ 大 きくし 色 を 変 えてみましょう 変 更 したい 文 字 列 をクリックし( 図 45) 作 成 の 文 字 のみ 選 択 (ドラッグ)します ( 図 46) 図 45 文 字 列 をクリック 図 46 部 分 選 択 メニューバーの 書 式 (O) フォント をクリックします ( 図 47) フォントの 設 定 画 面 が 表 示 されたら 色 指 定 (C)やサイズ(I)などを 適 当 に 変 えてみましょう サンプル 欄 に 変 更 した 文 字 が 表 示 されます ここでは 色 : 赤 サイズ:7 斜 体 の 設 定 をしてみました ( 図 48) 図 47 フォント 図 48 フォントの 設 定 よければ OK をクリックしてください 右 図 のように 文 字 のフォントの 変 更 ができました ( 図 49) 図 49 フォントの 設 定 が 変 更 される 24
またフォントの 変 更 はツールバーのボタンを 操 作 することで Word のような 編 集 ができます 左 から 太 字 斜 体 打 ち 消 し 文 字 サイズ 拡 大 文 字 サイズ 縮 小 文 字 色 変 更 フォントの 変 更 左 揃 え 中 央 揃 え 右 揃 え となります 文 字 を 選 択 する 時 の 注 意 : 文 字 列 にピンクの 枠 が 表 示 されている 時 は 段 落 が 選 択 されています この 状 態 で 右 クリックし メニューの 属 性 の 変 更 (A) を 選 択 すると 段 落 に 対 しての 属 性 指 定 になってしまい 文 字 の 色 や 形 状 の 変 更 はできません 必 ず 文 字 をドラッグ( 選 択 )してからフォント 設 定 を 行 ってください (どこでも 配 置 モードの 場 合 は 水 色 の 枠 です ) 文 字 の 大 きさの 指 定 について: 文 字 の 大 きさは 1~7 までの 数 字 あるいは -2~+4 の 割 合 で 指 示 します 特 に 指 示 がない 場 合 文 字 の 大 きさは3(0)になります ただし 大 きさの 違 いは 実 際 にブラウザで 表 示 しないとわかりませんので 注 意 してください 25
B.リンクの 設 定 (URL で 指 定 ) リンク 先 にインターネット 上 の 別 のホームページを 指 定 します リンクを 設 定 したい 文 字 列 次 のページへ をドラッグして 右 クリックし リンクの 設 定 (L) を 選 択 します ( 図 50) 参 考 : メニューバー の 挿 入 リンク または (リンクの 挿 入 )ボタンでも 同 様 の 操 作 ができます 図 50 右 クリックメニュー 属 性 画 面 で URL へ タブをクリックします URL(R) 欄 にリンク 先 の URL を 入 力 してください 最 後 に OK をクリックします ( 図 51) 図 51 URL を 指 定 する 参 考 : リンク 先 の URL はブラウザのアドレスを 事 前 にコピーしておくとよいでしょう その 際 下 記 のショートカットを 使 うと 便 利 です コピー :[Ctrl] キー + [C] (コピーしたい 部 分 を 選 択 した 状 態 でコントロールキーを 押 しながらアルファベットの C を 押 す) 貼 り 付 け :[Ctrl] キー + [V] (コピーを 張 り 付 けたい 部 分 をクリックしてコントロールキーを 押 しながらアルファベットの V を 押 す) 26
C. 表 の 挿 入 表 を 挿 入 したい 場 所 にカーソルを 移 動 してください 表 (A) メニューの 表 の 挿 入 (B) を 選 択 します 図 52 表 の 挿 入 または ( 表 の 挿 入 )ボタンをクリックしても 同 様 です 表 の 挿 入 画 面 が 表 示 されます ここで 行 数 列 数 を 適 当 に 指 定 して OK をクリックすると 画 面 上 に 表 が 挿 入 されます ( 図 54) 最 初 にクリックしたカーソル 位 置 に 四 角 い 枠 が 指 定 した 数 だけ 表 示 されます 枠 をクリックし 文 字 を 入 力 してください ( 図 53) 参 考 : 表 の 中 には 画 像 も 挿 入 できます 図 53 行 数 列 数 を 指 定 する 図 54 表 が 挿 入 される 27
D.ロゴの 作 成 ロゴ は 以 下 の 手 順 で 作 成 します ロゴを 入 れたい 箇 所 にカーソルを 移 動 してく ださい ここでは はじめて 作 成 の 下 にカーソルを おきます メニューから 挿 入 ロゴを 選 択 してくださ い ( 図 55) または します (ロゴの 挿 入 )ボタンをクリック 図 55 ロゴの 挿 入 ロゴの 作 成 画 面 が 表 示 されるので 文 字 (I) 欄 に 適 当 な 文 字 を 入 力 し 文 字 の 大 きさ 文 字 の 形 状 を 選 択 し てください ( 図 56) プレビューで 確 認 し 良 ければ 完 了 をクリックして 下 さい カーソル 位 置 にロゴが 設 置 されました ( 図 57) 図 56 ロゴの 作 成 画 面 図 57 ロゴが 設 置 される 28
E. 箇 条 書 きの 作 成 今 度 は 箇 条 書 きを 作 成 してみましょう まず カーソルを 移 動 しピンクの 枠 が 表 示 されていない 状 態 にしてください 箇 条 書 きの 種 類 は 番 号 なしの 箇 条 書 き( などが 先 頭 に 表 示 される) 番 号 つきの 箇 条 書 き(1,2,3 など)などがあります 箇 条 書 きは 挿 入 (I) メニュー リスト(S) と 選 択 し 箇 条 書 きの 種 類 の 番 号 なしリスト(B)を 選 択 します または ボタンでも 同 じ 操 作 ができます 図 58 箇 条 書 きの 入 力 番 号 なしリスト(B) を 選 択 するとカーソル 位 置 に が 表 示 されます カーソルの 点 滅 している 所 から さくら と 入 力 し Enter キーを 押 してください すると 2 番 目 の 文 が 入 力 できるようになります 箇 条 書 きは この 操 作 の 繰 り 返 しで 必 要 な 分 だけ 入 力 します 続 けて うめ もも と Enter キーで 改 行 しながら 入 力 してみま しょう 図 59 入 力 例 29
F.サイト 機 能 を 使 ってホームページを 作 成 する ホームページ ビルダーにはサイト 機 能 があります これはホームページの 中 で 使 われるファイル 画 像 などを まとめて 管 理 ( 保 存 )し サイト 単 位 でファイルの 読 み 込 みなどができる 機 能 です サイトを 作 成 する 場 合 は 新 た に ホームページ ビルダー18 を 立 ち 上 げてください 1.サイトを 新 規 作 成 する 上 部 タブより サイト サイトの 新 規 作 成 を 選 択 してくだ さい 図 60 サイトの 新 規 作 成 サイト 名 を 入 力 (サイト 名 は 自 分 の 好 きな 名 前 で!ページタイトルとなります) 次 へ をクリックし( 図 61) 新 規 にトップページを 作 成 する をクリック 次 へ をクリック 図 61 新 規 にトップページを 作 成 図 62 サイト 名 を 決 める 30
トップページのファイル 名 (P) 欄 で index.html を 選 択 し 参 照 (B) をクリック フォルダの 選 択 画 面 が 表 示 されるので サイトを 作 成 する 場 所 を 指 定 する 学 内 の 場 合 マイドキュメント(X:\)の 中 の local_html フォルダを 指 定 したら OK をクリック (local_html フォルダは4ページで 作 成 済 み) 図 63 の 画 面 に 戻 るのでサイト 新 規 作 成 に 戻 り 完 了 をクリック local_html を 選 択 図 63 index_html を 作 成 図 64 local_html フォルダを 選 択 ページ 作 成 方 法 の 選 択 という 画 面 が 表 示 されますが 今 回 は 白 紙 ページ を 選 択 してく ださい これはカスケーディングスタイルシート(CSS) の 設 定 ですが 今 回 は 省 略 します もう 少 しホ ームページやインターネットの 知 識 が 身 に 付 い たら 試 してみてください 図 65 ページ 作 成 方 法 の 選 択 これでサイト 作 成 完 了 です このサイトに html ファイルを 追 加 していくことでホームページを 作 成 していきます ( 転 送 設 定 のメッセージが 表 示 されますが いいえ をクリックしてください ) 31
2.サイト 作 成 後 html ファイルの 作 成 方 法 は 5~18 ページを 参 考 にしてください 今 回 は 以 下 のような 3 つのhtmlファイルを 作 成 してみました index.html newpage2.html newpage3.html 図 66 新 規 サイト 制 作 例 3. 作 成 したファイルをサイトに 保 存 する ファイル すべて 保 存 を 選 択 する 全 てのファイルが local_html フォルダ 内 に 保 存 されます 参 考 までにマイドキュメントの 中 の local_html フォルダを 開 いてください ここでは 上 の 3 つの html ファイルを 作 成 し ましたが フォルダにはそれに 付 随 する 複 数 の ファイル( 画 像 など)が 自 動 的 に 保 存 されていま す これらのファイルが 別 のフォルダに 保 存 され てしまうとホームページ 更 新 時 に 画 像 が 表 示 さ れない 等 の 不 具 合 が 生 じます Index.htm 図 67 local_html フォルダを 開 いた 画 面 32
4.サイト 単 位 でファイルを 読 み 込 む 作 成 したファイルをサイト 名 でまとめて 読 み 込 むことができます メニューバーの サイト サイトを 開 く を 選 択 新 しいサイト1(1.で 自 分 で 入 力 したサイト 名 )を 選 択 開 く をクリック( 図 68) 図 68 サイト 単 位 でファイルを 読 み 込 む 図 69 サイトを 開 く メニューバーからサイトメニューを 開 くと 下 記 のような ビジュアルサイトビュー が 開 き サイト 内 のリンク 構 造 が 表 示 されます 編 集 したいファイルをダブルクリックすると 編 集 画 面 が 開 きます Index.html index.html から newpage2.html と newpage3.html に リンク newpage2.html newpage3.html Newpage2.html から index.html にリンク Newpage3.html から index.html にリンク 図 70 ビジュアルサイトビュー 5.ファイルの 転 送 ページの 公 開 は19~21ページを 参 考 にしてください 33