ホームページ 作 成 (ホームページビルダー 編 ) 事 前 準 備 ホームページ 作 成 ソフト(ビルダー4など) レイアウト HP の 構 成 をあらかじめ 決 めて 専 用 フォルダを 作 っておく (フォルダ 構 成 サンプルを 参 考 にしてください ) 画 像 を 一 つのフォルダにまとめる ( 新 規 でフォルダを 作 成 し 名 前 は image 等 で) 容 量 の 大 きな 画 像 はリサイズしておく 使 用 するフォルダ ファイル 名 は 必 ず 半 角 英 数 で! ホームページ 作 成 にあたっての 注 意 点! 画 像 (image)ファイルの 移 動 リンク 切 れ 画 像 などは image のフォルダに 入 れるとわ かりやすくできるのですが 画 像 などを image に 入 れそこなっていた 時 など 保 存 したあとで 画 像 の 移 動 をしてしまうとページ 上 で 画 像 のリンクが 切 れてしまい 見 えなくなってしまいます その 時 は 画 像 の 挿 入 で image フォルダ から 挿 入 し 直 すか ソース 画 面 で 直 接 画 像 のリンク 場 所 を 変 更 します また 使 用 ファイル 移 動 方 法 未 使 用 不 要 フ ァイル 削 除 も 紹 介 してますので 参 考 にしてくだ さい 生 徒 写 真 を 載 せる 場 合 ホームページに 生 徒 が 写 った 写 真 などを 載 せる 時 は 個 人 を 特 定 できないよう 配 慮 が 必 要 です 生 徒 の 顔 がはっきりわからないようなアングル で 撮 る ( 背 面 からなど) 顔 がわからないように モザイク 加 工 などで 顔 をぼかすなどの 処 理 を 行 う 48
新 規 にページを 作 成 するには. 新 規 ページを 立 ち 上 げる 左 上 の 新 規 ページ をクリックします モードの 選 択 の 画 面 が 表 示 されますので 標 準 モード を 選 んで OK を 押 して 立 ち 上 げます どこでも 配 置 モード は 見 る 人 のPC 環 境 によ って 崩 れたりするので お 勧 めしません.ページにタイトルを 付 ける 作 成 するページにタイトルを 付 けます ブラウザタイトル に 表 示 されるようになり サイト の 作 成 時 やホームページ 閲 覧 者 にも 分 かりやすくな ります タイトルをつける 時 は 画 面 左 上 の ページの 属 性 をクリックします 属 性 の 画 面 が 表 示 されますので ページタイトル に 任 意 のタイトルを 入 力 し OK をクリック します 49
タイトル(ロゴ)の 挿 入 するには タイトル(ロゴ)の 挿 入 タイトル(ロゴ)にする 文 字 列 を 入 力 します 入 力 した 文 字 を 範 囲 選 択 します ロゴの 挿 入 ボタンをクリックします 3 3 表 示 されたメニューから ロゴ( 飾 り 文 字 ) を クリックします 4ロゴの 作 成 画 面 が 表 示 されるので お 好 みの 形 式 とサイズ 色 などを 変 更 して 完 了 をクリック します 詳 細 な 設 定 をしたい 時 は 文 字 の 詳 細 設 定 をク リックすると 細 かな 変 更 ができます 50
タイトルなどの 配 置 を 変 更 するには タイトルやボタン 画 像 の 配 置 の 変 更 を 工 夫 することで バランスのとれたページの 作 成 ができます 配 置 の 変 更 作 成 されたロゴをクリックして 選 択 します 選 択 された 状 態 で 中 央 揃 え をクリックします 選 択 したロゴが ページ 中 央 に 移 動 します 配 置 の 調 整 ボタンは 左 寄 せ 中 央 寄 せ 右 寄 せ の 順 で 並 んでいます CHECK! 通 常 の 文 字 入 力 は WORD や 一 太 郎 と 同 じですが ネット 上 の 関 係 でフォントサイズは 7サイズの 範 囲 での 変 更 しかできません ( 標 準 サイズから 上 に+4 下 に-) 5
ページ 背 景 を 変 更 するには 背 景 を 付 けることで 見 栄 えの 良 いページを 作 ることができます 壁 紙 の 挿 入 をする 画 面 左 側 にある ナビメニュー から 壁 紙 の 挿 入 ボタンをクリックします 壁 紙 の 挿 入 表 示 されたメニューから 素 材 集 から をクリッ クします 3 素 材 集 から 開 く という 画 面 が 表 示 されます 壁 紙 用 素 材 のテンプレートの 一 覧 から お 好 みの 壁 紙 を 選 んで 挿 入 します CHECK! ホームページのカラーをあらかじめ 決 めておくと 全 体 的 に 統 一 感 のあるサイトが 出 来 ます また ホームページはさまざまな 人 が 閲 覧 するので 派 手 になり 過 ぎて 見 にくくなら ないよう 注 意 しましょう 5
ページの 配 置 バランスを 整 えるには HP をさらに 見 やすくし 作 成 時 のバランスをとりやすくする 為 には 表 を 活 用 します 表 の 挿 入 表 をうまく 分 割 し その 中 に 文 字 や 画 像 を 入 れてページの 作 成 をしましょう 表 自 体 や 表 内 を 中 央 揃 えにしたりして わかりやす く 見 やすい 構 成 が 素 早 くできます ( 表 はExcel のセルと 同 じで 列 行 の 追 加 で 追 加 し 列 行 の 削 除 で 削 除 します 又 表 の 非 表 示 の 選 択 で 見 えない 状 態 にもできます ) 表 の 挿 入 は ナビメニュー の 表 の 挿 入 ボタ ンで 挿 入 可 能 です 表 の 挿 入 下 にサンプル 図 を 載 せていますが 赤 で 括 っている ように3つの 表 を 挿 入 しています 53
写 真 画 像 を 挿 入 するには 写 真 画 像 (image)の 挿 入 写 真 や 画 像 の 挿 入 ナビメニューの 写 真 や 画 像 の 挿 入 をクリック します 写 真 の 挿 入 は デジカメ 写 真 イラストなどの 画 像 挿 入 は ファイルから をクリックします で デジカメ 写 真 をクリックした 場 合 写 真 挿 入 ウィザード の 画 面 が 表 示 されます ウィザード 画 面 にしたがって 挿 入 する 画 像 を 選 んで 挿 入 します で ファイルから をクリックした 場 合 挿 入 したい 画 像 などのファイルを 指 定 して 挿 入 します 素 材 集 から を 選 択 した 場 合 は (A) (B) (A)で 写 真 の 種 類 を 選 択 します (B)で 写 真 を 選 択 します CHECK! 段 落 の 変 更 をしないと 同 じ 段 落 内 の 文 章 や 画 像 などは 中 央 揃 えなどの 変 更 をすると 段 落 すべてに 変 更 がかかってしまいます 段 落 の 変 更 をかけたい 時 は Shift+Enter で 段 落 改 行 します 54
写 真 画 像 を 編 集 するには 挿 入 した 写 真 をセピアカラーに 変 更 したり 枠 や 文 字 を 付 けたりと 様 々な 効 果 編 集 を 加 える 事 が 出 来 ます 写 真 画 像 の 編 集 編 集 したい 写 真 画 像 をクリックすると 画 面 上 部 に 編 集 項 目 が 表 示 されます デジカメ 写 真 の 編 集 簡 単 な 写 真 編 集 ができます 画 像 の 調 整 画 像 の 回 転 や 合 成 画 像 編 集 ができます 細 かい 修 正 や 加 工 ならウェブアートデザイ ナーで 編 集 します 画 像 の 効 果 画 像 にさまざまな 効 果 (モノクロなど)や フレームを 付 ける 編 集 ができます 編 集 したい 内 容 にあったボタンを 選 んでクリッ クしましょう サンプル 画 像 55
別 ページを 表 示 するボタン 挿 入 するには 別 のページを 表 示 させたい 時 や 別 のページから 戻 ってくる 時 にボタンを 使 います ボタンの 挿 入 ロゴの 挿 入 ナビメニューの ロゴの 挿 入 をクリックします 操 作 の 選 択 画 面 から ボタン をクリックします 3 ボタンの 作 成 画 面 が 表 示 されるので 用 途 に 合 ったボタンを 選 択 し 挿 入 します 56
ボタンの 変 更 編 集 するには 別 のページを 表 示 させたい 時 や 別 のページから 戻 ってくる 時 にボタンを 使 います ボタンの 変 更 編 集 右 クリック 変 更 したいボタンを 右 クリックします v 一 覧 が 表 示 されるので ボタンの 編 集 をクリッ クします 3ボタン 挿 入 時 と 同 じ ボタンの 作 成 の 画 面 が 表 示 されるので 文 字 や 種 類 大 きさの 変 更 が 可 能 です 細 かく 編 集 したい 場 合 は 詳 細 設 定 をクリック し 変 更 編 集 をします 4 完 了 をクリックします 57
ボタン 等 に 別 ページを 表 示 させる 設 定 をかけるには ハイパーリンク 機 能 を 活 用 すれば ボタンなどをクリックすることで 別 のページを 表 示 させることが 出 来 ます (ボタン 以 外 にも 文 字 列 や 画 像 などにも 設 定 できます ) ハイパーリンクの 設 定 文 字 列 の 場 合 は リンクを 設 定 したい 文 字 列 を 範 囲 選 択 します 画 像 ボタン の 場 合 は リンクを 設 定 したい 画 像 ボタンをクリックし 選 択 します リンクの 挿 入 ナビメニューの リンクの 挿 入 をクリックしま す 3 3 リンク 作 成 ウィザード が 表 示 されます ページやURLへの~ を 選 択 し 次 に 進 みま す 58
4 4リンク 先 を 指 定 する 画 面 が 表 示 されます リンク 先 の 指 定 をして 完 了 です リンク 先 指 定 する 時 は 選 択 から 指 定 すると 簡 単 に 指 定 できます 5 5 同 じホームページ 内 のリンク 設 定 の 時 は ターゲ ット は 空 欄 のままでOKです PDFファイルや 写 真 外 部 のサイトにリンクを 設 定 する 場 合 は ターゲット 横 の をクリックし 新 しいウィンドウ に 変 更 して 完 了 します ( 外 部 サイトにリンクを 設 定 する 場 合 は 設 定 した いサイトの リンクの 規 約 を 確 認 する 必 要 があり ます 確 認 メールや 設 定 できないサイトもあります ) CHECK! TOP ページからさまざまなページを 作 成 し ハイパーリンクを 設 定 する 時 は TOP ページへ もどるボタン を 各 ページに 付 けると 訪 問 者 が 閲 覧 しやすいサイトになります! 59
ページ 内 での 移 動 を 簡 単 にするには ページが 下 に 長 くなってしまった 場 合 スクロールでページを 閲 覧 するのは 大 変 です ハイパーリンク 設 定 のラベル 機 能 を 活 用 すれば ページ 内 でのリンクが 出 来 スクロール 移 動 を 省 けます ハイパーリンク 設 定 (ラベルを 付 ける) 移 動 先 に 名 前 を(ラベル)を 付 ける 移 動 したい 場 所 の 文 字 列 や 画 像 ボタンを 選 択 し ます ナビメニューの リンクの 挿 入 をクリックしま す 3 3 リンク 作 成 ウィザード が 表 示 されます ラベルを 作 成 する をクリックして 次 へ をクリックします 4 4 ラベルを 付 ける をクリックし 次 へ をクリ ックします 5 5 ラベル に 任 意 のラベル 名 を 記 入 し 完 了 を クリックします 60
ハイパーリンク 設 定 (ラベルへ) 移 動 させるための 元 となる 文 字 列 や 画 像 ボタンにハイパーリンクの 設 定 をします 移 動 元 から 指 定 したラベルへの リンク(ハイパーリンク)の 設 定 を 行 う 移 動 元 となる 文 字 列 ( 範 囲 選 択 )や 画 像 ボタン をクリックし 選 択 します ナビメニューの リンクの 挿 入 をクリックしま す 3 3 リンク 作 成 ウィザード が 表 示 されます ラベルを 作 成 する をクリックして 次 へ をクリックします この 作 業 は 前 ページの 3と 同 じです 4 4 ラベルへのリンクを 作 成 する をクリックしま す 5ラベル 名 の 横 をクリックします 6 5 6 ラベルを 付 ける で 設 定 したラベル 名 を 下 枠 の 一 覧 から 選 択 し OK をクリックして 完 了 で す CHECK! この 設 定 により ラベルへ から ラベルを 付 ける を 設 定 した 文 字 列 などにクリック 一 つで 簡 単 に 移 動 することができるようになります 6
作 成 ページの 確 認 するには ページ 作 成 時 は こまめに Internet Explorer の 起 動 や プレビュー で 確 認 してください 画 像 の 表 示 ハイパーリンク 設 定 ページのバランスなどを 中 心 に 確 認 します プレビューで 確 認 (A) ページの 編 集 画 面 と プレビュー では 見 え 方 が 違 う 場 合 があるので 注 意 してください (A) Internet Explorer の 起 動 実 際 にインターネット 上 で 確 認 します ホーム ページを 更 新 した 時 の 表 示 と 同 じ 状 態 で 確 認 できるので 表 示 ミスなどがなくなります (A) Internet Explorer の 起 動 での 確 認 時 (B) (B) プレビュー での 確 認 プレビュー はビルダー 内 で 簡 単 な 確 認 を することができます しかし プレビューとネット 上 の 表 示 が 違 う 場 合 があるため 確 実 な 確 認 は Internet Explorer の 起 動 をお 勧 めします (B) プレビュー での 確 認 時 6
作 成 したページの 保 存 をするには 保 存 をする 保 存 もこまめにしましょう 保 存 時 の 注 意 点 は サイトのフォルダとその 中 に 画 像 などを 入 れる image というフォルダも 作 ります ファイル 名 やフォルダ 名 は 必 ず 半 角 英 数 で 付 けてください ホームページの TOP にするファイルは 必 ず index と 名 前 を 付 けて 保 存 しましょう 他 のページ も kyuushoku や gyouzi などページの 題 名 を 付 けるとわかりやすくなります 新 規 に 保 存 をする 場 合 は 画 面 の 上 側 にある ペ ージの 保 存 をクリックします ページの 保 存 の 画 面 が 表 示 されたら 名 前 を 付 けて 保 存 をクリックし 保 存 場 所 を 指 定 して 保 存 をします すでにファイルがある 場 合 は 上 書 き 保 存 をク リックして 保 存 します ページ 保 存 の 後 は 画 像 などはどこに 保 存 するかを 確 認 する 画 面 が 表 示 されます 3すべての 画 像 を 選 択 した 状 態 で 参 照 をクリッ クします 5 すべてを 選 択 3 4 image のフォルダを 選 択 し image フォル ダを 開 いた 状 態 で OK をクリックします 4 5 保 存 場 所 がかわったのを 確 認 し 保 存 をクリッ クします 63