ホームページとは何？

ホームページ 作 成 にあたっての 基 本 事 項 ホームページとは? インターネットを 介 して 誰 もが 閲 覧 できるように 作 られたものを ホームページ と 言 います ホームページには 文 字 だけでなく 画 像 や 動 画 音 楽 なども 埋 め 込 むことができま す またホームページに 掲 載 されている 情 報 の 中 でひとまとめに 括 られたものを コンテ ンツ と 呼 んでいます ホームページはコンテンツの 集 まりで それら1つ1つを ペー ジ と 呼 んでいます ホームページ トップページ サイト ホームページ とはコンテンツの 集 合 体 です ホームページの 中 で 最 初 に 表 示 される ページを トップページ ホームページのある 場 所 を サイト と 呼 んでいます ホームページの 正 体 ホームページは HTML という ページ 記 述 言 語 で 作 られています 通 常 ホーム ページはインターネットエクスプローラなどの ブラウザ と 呼 ばれるソフトウェアで 表 示 します ブラウザは HTML を 解 読 し ユーザーにわかりやすく 表 示 するという 役 割 を 持 っています URL(Uniform Resource Locator) インターネット 上 でホームページが 保 存 されている 住 所 です アドレス ともいいます 閲 覧 するホームページの URL をブラウザ 上 で 入 力 すると URL が 示 している WWW サーバ ー 内 のデータを 探 し 出 して 画 面 に 表 示 します ハイパーリンク ホームページに 掲 載 するさまざまなコンテンツを 1 画 面 ですべて 記 述 することは 現 実 的 には 不 可 能 です そこで コンテンツごと あるいは 目 的 や 話 題 ごとに 別 のページを 作 り 複 数 のページで1つのホームページを 構 成 します そこで 別 のページに 簡 単 に 移 動 するた めに 考 え 出 された 仕 組 みがハイパーリンク(リンク)です また 自 分 で 作 成 したページ だけでなく 他 の 人 が 作 成 したページにリンクすることもできます このリンクという 仕 組 みが 壮 大 なインターネットの 世 界 を 作 り 出 しています HP ビルダーVer.18 ホームページ 作 成 講 座 - 1 -

作 成 したページをインターネットに 公 開 する 苦 労 して 作 成 したホームページもインターネットに 公 開 しなければ 誰 にも 見 てもらえま せん インターネットに 公 開 して 初 めて 他 の 人 の 目 に 触 れることができるのです インタ ーネットに 自 分 のページを 公 開 するには WWW サーバーと 呼 ばれるコンピュータに 自 分 で 作 成 したページを 転 送 してあげれば 良 いのです WWW サーバーは 自 分 で 用 意 することもできますが 一 般 的 にはインターネットに 接 続 す るための 業 者 であるプロバイダが 自 社 のサーバーの 一 部 を 無 料 で 使 わせてくれるサービス を 行 っています ほとんどの 場 合 無 料 でサーバーを 利 用 できるので それを 使 うと 良 いで しょう また 自 社 サーバーの 一 部 やすべてを 貸 し 出 してくれる 業 者 も 存 在 します ホー ムページの 規 模 目 的 に 応 じてどのサーバーを 利 用 するかを 決 めると 良 いでしょう ホームページを 持 つ( 公 開 する)ために 必 要 なもの ホームページを 置 く 場 所 を 確 保 する ホームページを 作 成 する 前 にどこにホームページを 置 くかを 考 えておきましょう 契 約 しているプロパイダのサービスに 申 し 込 むなどの 手 続 きをしておきます ホームページを 作 成 するためのソフトウェアを 用 意 する HTML でホームページを 作 成 する 場 合 には メモ 帳 などのテキストエディタがあれ ば 良 く 特 別 なソフトウェアは 必 要 ないのですが HTML を 使 って1から 作 成 してい くのはかなり 大 変 な 作 業 になります そこで 一 般 的 にはホームページビルダーなど のホームページ 作 成 ソフトを 利 用 します ホームページ 作 成 ソフトを 使 えば HTML を 操 作 することなく ワープロソフトなどで 文 書 を 作 成 するのと 同 じような 感 覚 でホー ムページを 作 成 できるので ホームページ 作 成 の 初 心 者 でも 簡 単 にホームページを 作 成 する 事 ができます ホームページビルダーについて ホームページビルダー は Web ページ(ホームページ)の 作 成 からロゴやボタンなどの 素 材 の 作 成 WWW サーバーへの 転 送 まで 行 うことができます 文 字 の 入 力 表 の 作 成 画 像 の 挿 入 などのホームページの 編 集 作 業 がワープロソフトの 感 覚 で 行 えること 豊 富 な テンプレートや 素 材 集 が 用 意 されている 事 が 大 きな 特 徴 です ホームページビルダーがあ れば 一 通 りのホームページ 作 成 作 業 が 行 えます HP ビルダーVer.18 ホームページ 作 成 講 座 - 2 -

Web サイト 開 設 の 流 れ 1. 作 成 準 備 Web サイト 開 設 サービスの 確 認 (ホームページを 置 く 場 所 を 確 保 する) 設 計 を 考 える(テーマ 内 容 構 成 レイアウト フォルダ 構 成 など) 2. 作 成 Web サイトの 作 成 ( 小 規 模 のホームページであれば Web サイトを 作 成 しなくても OK です) 個 々の Web ページ(ホームページ)の 作 成 リンクの 設 定 3. WWW サーバーへ 転 送 Web サイトの 転 送 Point! Web サイトとは ここで 言 う Web サイト とは ホームページ 作 成 ソフトでの Web ページの 管 理 単 位 の 事 です 通 常 Web サイトは 複 数 のページで 構 成 されています 複 数 の Web ページを 1 つ の Web サイトとしてまとめて 管 理 することで リンクの 設 定 や 更 新 WWW サーバーへの 転 送 などの 作 業 が 容 易 に 行 えるという 利 点 があります HP ビルダーVer.18 ホームページ 作 成 講 座 - 3 -

ホームページビルダーで 簡 単 なホームページを 作 成 する まずは 簡 単 なホームページを 作 成 してみましょう 今 回 は 以 下 のようなホームページを 作 成 してみます トップページ 商 品 情 報 ページ トップページを 作 成 します 1. スタート すべてのプログラム からホームページビルダーを 起 動 すると 以 下 の 画 面 が 表 示 されます この 画 面 は 閉 じる ボタンをクリックし 閉 じておきま す HP ビルダーVer.18 ホームページ 作 成 講 座 - 4 -

2. ホームページビルダーの 初 期 画 面 が 表 示 されます 画 面 左 上 の 新 規 作 成 でクリッ クします 3. 以 下 の 画 面 が 表 示 されます 白 紙 から 作 成 する でクリックします HP ビルダーVer.18 ホームページ 作 成 講 座 - 5 -

4. ホームページビルダーの 編 集 画 面 が 表 示 されます 主 にナビメニューを 使 って 作 成 していきます 5. タイトルを 作 成 します 1 タイトルの 文 字 を 入 力 します Point! 文 字 入 力 の 基 本 文 字 は フォーカス 枠 で 囲 まれる 段 落 に 入 力 します フォーカス 枠 とは Web ページ 内 の 各 要 素 文 字 表 画 像 などを 囲 む 枠 のことで 操 作 対 象 であることを 示 しま す 段 落 とは 文 字 を 入 力 すると 自 動 で 作 成 されるフォーカス 枠 で 囲 まれた 領 域 のこ とで Shift + Enter 押 す または ナビメニュー の 文 字 の 挿 入 をクリック して 段 落 を 区 切 ります ブラウザで 表 示 すると 段 落 と 段 落 の 間 は 1 行 分 の 空 白 が 空 きま す 段 落 を 作 らず 改 行 だけ 行 う 場 合 は Enter を 押 します HP ビルダーVer.18 ホームページ 作 成 講 座 - 6 -

2 タイトルに 書 式 を 設 定 します まずは 目 立 つように 大 きくしましょう フォーカス 枠 内 のタイトル 文 字 を 選 択 してから 文 字 サイズ 拡 大 ボタンをクリ ックします 文 字 サイズ 拡 大 ボタンをクリックすると 少 しだけ 文 字 が 大 きくなります 何 回 かクリックして 好 みの 大 きさにしましょう 3 タイトル 文 字 に 色 をつけます 1) フォーカス 枠 内 の 文 字 を 選 択 し ツールバーの 文 字 色 の 変 更 ボタンの 右 側 の でクリックします 2) カラーパレットが 表 示 されます 好 みの 色 でクリックしましょう 4 タイトル 文 字 を 中 央 揃 えにします ツールバーの 中 央 揃 え ボタンでクリック します HP ビルダーVer.18 ホームページ 作 成 講 座 - 7 -

6. ホームページビルダーに 用 意 されている 写 真 やイラストを 挿 入 します 1 タイトル 文 字 の 下 でクリックしてカーソルを 表 示 させます 2 ナビメニューを 使 います 写 真 や 画 像 の 挿 入 素 材 集 から の 順 でクリック します HP ビルダーVer.18 ホームページ 作 成 講 座 - 8 -

3 素 材 が 表 示 されます 好 みの 素 材 を 選 択 し 開 く ボタンをクリックしましょう 4 カーソルのある 場 所 に 素 材 が 挿 入 されます HP ビルダーVer.18 ホームページ 作 成 講 座 - 9 -

5 挿 入 した 写 真 の 大 きさを 調 整 しましょう 写 真 の 上 でクリックしハンドルの 上 にマウスポインタを 置 いて ドラッグで 調 整 を 行 います 6 写 真 を 中 央 揃 え にしてみましょう Point! Web ページの 画 像 Web ページに 掲 載 する 写 真 ( 画 像 )はできる 限 り 容 量 を 少 なくして 掲 載 します 実 際 の 画 像 容 量 を 変 更 するには 右 クリック デジカメ 写 真 の 編 集 からサイズを 変 更 す るか あらかじめ ウェブアートデザイナー を 使 って Web 用 に 最 適 化 してから 使 用 します HP ビルダーVer.18 ホームページ 作 成 講 座 - 10 -

7. 写 真 の 下 でクリックし 文 章 を 入 力 します 中 央 揃 えの 設 定 も 行 いましょう 8. 水 平 線 を 挿 入 します 1 入 力 した 文 字 の 下 でクリックし カーソルを 表 示 させ メニューバーの 挿 入 水 平 線 でクリックします 2 水 平 線 が 挿 入 されます HP ビルダーVer.18 ホームページ 作 成 講 座 - 11 -

9. ブラウザでプレビューします 1 ブラウザー 確 認 Internet Explorer でクリックします 2 作 成 したホームページがブラウザで 表 示 されます 練 習 トップページを 以 下 のように 仕 上 げましょう HP ビルダーVer.18 ホームページ 作 成 講 座 - 12 -

ステップアップ タイトルを 画 像 に 変 更 して 見 栄 えを 変 えてみます 1 タイトル 文 字 を 選 択 し ナビメニューの ロゴ( 飾 り 文 字 )の 挿 入 から ロゴ ( 飾 り 文 字 ) をクリックします 2 ロゴの 作 成 ダイアログが 表 示 されます 好 みのスタイルを 選 択 し 完 了 を クリックしましょう HP ビルダーVer.18 ホームページ 作 成 講 座 - 13 -

3 簡 単 な 操 作 でロゴ 画 像 が 作 れました 練 習 MENU という 文 字 もロゴ 画 像 に 変 更 してみましょう Point! ロゴスタイルの 変 更 1 作 成 したロゴのスタイルなどを 変 更 する 場 合 は 変 更 するロゴの 上 で 右 クリックし ロゴの 編 集 をクリックします HP ビルダーVer.18 ホームページ 作 成 講 座 - 14 -

2 ロゴの 作 成 ダイアログが 表 示 されるので ここで 設 定 を 変 更 します 文 字 の 詳 細 設 定 ボタンで フォントや 色 などの 細 かい 設 定 が 行 えます ロゴ 画 像 の 大 きさは 文 字 の 大 きさ を 変 更 すれば 変 えられます 10. 作 成 したページを 保 存 します 1 ファイル 名 前 を 付 けて 保 存 の 順 にクリックします HP ビルダーVer.18 ホームページ 作 成 講 座 - 15 -

2 名 前 を 付 けて 保 存 ダイアログが 表 示 されます 適 当 な 場 所 に index.html という 名 前 を 付 けて 保 存 しましょう 3 素 材 ファイルをコピーして 保 存 ダイアログの 保 存 ボタンをクリックしま す ここでは 素 材 の 保 存 場 所 を 決 めています 今 回 はこのまま 保 存 します HP ビルダーVer.18 ホームページ 作 成 講 座 - 16 -

4 以 下 の 画 面 が 表 示 されたら 閉 じる をクリックします Point! ファイル 名 トップページのファイル 名 は 必 ず index.html または index.htm です ホームペー ジのファイル 名 に 使 用 できる 文 字 は 半 角 英 数 字 のみです HP ビルダーVer.18 ホームページ 作 成 講 座 - 17 -

商 品 情 報 ページを 作 成 します 1. 新 規 ページを 作 成 し 商 品 情 報 というロゴを 作 成 しておきます 2. 表 を 挿 入 します 1 ロゴの 下 にカーソルを 置 き メニューバーの 表 表 の 挿 入 でクリックし ます 2 行 数 と 列 数 などを 設 定 して OK をクリックします 空 白 セルに 空 白 コードを 自 動 挿 入 する のチ ェックをはずす 何 行 何 列 の 表 を 作 成 するのかをあらかじめ 考 えてから 表 を 作 成 すると 良 いでしょう ここでは 2 行 5 列 の 表 を 作 成 しています HP ビルダーVer.18 ホームページ 作 成 講 座 - 18 -

3 小 さい 表 が 挿 入 されました 3. 以 下 のように 表 内 に 文 字 を 入 力 しましょう 表 の 列 幅 は 入 力 した 文 字 の 長 さに 応 じて 随 時 変 更 されます 4. 表 の 1 列 目 にホームページビルダーの 素 材 を 挿 入 します HP ビルダーVer.18 ホームページ 作 成 講 座 - 19 -

5. 表 を 中 央 揃 えにします 表 を 選 択 し 中 央 揃 え をクリックします 表 の 枠 線 の 辺 りでクリックすると 表 の 全 体 が 選 択 できます ステップアップ 壁 紙 を 挿 入 してみましょう ナビメニュー 壁 紙 の 挿 入 素 材 集 から を 使 います 出 来 上 がりイメージ 表 の 背 景 色 は 白 に 設 定 します 属 性 の 変 更 から 行 うことができます HP ビルダーVer.18 ホームページ 作 成 講 座 - 20 -

6. クリックするとトップページを 表 示 するボタンを 付 けてみましょう 1 ホームページビルダーの 素 材 を 表 の 下 に 挿 入 し 中 央 揃 えにしましょう 2 挿 入 した 画 像 にリンクを 設 定 します 1) 画 像 をクリックして 選 択 し ナビメニューの リンクの 挿 入 ボタンをクリ ックします HP ビルダーVer.18 ホームページ 作 成 講 座 - 21 -

2) リンク 作 成 ウィザードが 表 示 されます ページや URL へのリンクを 作 成 す る でクリックし 次 へ をクリックします 3) 次 へ でクリックします HP ビルダーVer.18 ホームページ 作 成 講 座 - 22 -

4) 選 択 でクリックし ファイルから でクリックしましょう 5) リンクを 貼 りたいファイル 名 でクリックし 開 く をクリックしましょう HP ビルダーVer.18 ホームページ 作 成 講 座 - 23 -

6) リンクするページのファイル 名 が 表 示 されます 確 認 して OK をクリック しましょう 7. ブラウザー 確 認 からプレビューを 行 い リンクを 確 認 しましょう リンクを 挿 入 したボタンをクリックしてトップページが 表 示 できれば 成 功 です 8. 商 品 情 報 ページを 保 存 します 商 品 情 報 ページの 名 前 は 何 でも OK です ただし 半 角 英 数 字 で 名 前 を 付 けてください 練 習 トップページの 商 品 情 報 という 文 字 をクリックすると 商 品 情 報 ページが 表 示 される ようにリンクを 貼 ってみましょう リンクを 挿 入 することを リンクを 貼 る と 言 い ます HP ビルダーVer.18 ホームページ 作 成 講 座 - 24 -