ホームページ ビルダー16 セミナーテキスト
目 次 このテキストでは ホームページ ビルダー16で 簡 単 なWebページを 作 る 基 本 操 作 をご 紹 介 します 項 目 セミナー 内 容 1.Webサイト 作 成 の 基 礎 知 識 1-1.Webサイトとは 1 1-2.Webサイトとインターネット 2 1-3.Webサイトのしくみ 4 1-4. 作 成 前 に 考 えておきたいこと 7 1-5.Webサイト 公 開 までの 流 れ 11 2.ホームページ ビルダー16 2-1.ホームページ ビルダー16を 起 動 しよう 12 基 本 操 作 2-2.ホームページ ビルダー16の 画 面 を 確 認 しよう 13 3.トップページの 作 成 3-1.トップページを 作 成 しよう 15 3-2.ロゴ( 飾 り 文 字 )を 挿 入 しよう 15 3-3. 文 字 を 入 力 しよう/ 文 字 サイズ 文 字 色 フォントを 変 更 しよう 17 3-4. 配 置 を 変 更 しよう 19 3-5. 画 像 を 挿 入 しよう 20 3-6. 写 真 を 挿 入 しよう 21 3-7. 水 平 線 を 挿 入 しよう 24 3-8. 表 を 挿 入 しよう 25 3-9.Webページを 保 存 しよう 30 3-10.プレビューで 確 認 しよう 32 4.サブページの 作 成 4-1.サブページを 作 成 しよう 35 4-2. 図 形 を 描 画 しよう 39 4-3.Webページを 保 存 してプレビューで 確 認 しよう 51 5.リンクの 設 定 5-1.リンクを 設 定 しよう 54 6.Webサイトの 作 成 と 転 送 6-1. サイト を 作 成 しよう 62 ( 付 録 ) 6-2. サイト を 転 送 しよう 67 7.アクセシビリティの 診 断 ( 付 録 ) 68
1.Webサイト 作 成 の 基 礎 知 識 Webサイトを 作 成 するにあたり 知 っておきたい 基 礎 知 識 やWebサイト 開 設 の 流 れを 説 明 し ます これらの 概 念 を 理 解 しておくことで Webサイトの 作 成 がスムーズになります 1-1.Webサイトとは Webサイト(ホームページ)とは インターネット 上 に 公 開 されている 企 業 や 団 体 または 個 人 グループの 情 報 発 信 / 収 集 基 地 のことです インターネット 上 には 世 界 中 の 人 々が 作 った 無 数 のWebサイトが 公 開 されており イン ターネットにつながったパソコンから 誰 もが いつでも どこからでも 自 由 に 見 ること ができます また 自 分 のWebサイトを 作 って 世 界 中 の 人 々に 情 報 を 公 開 することもでき ます Check ホームページ という 言 葉 の 意 味 現 在 ホームページ という 言 葉 は さまざまな 意 味 で 使 われています 情 報 が 載 っている 一 つひとつの Webページ Webページの 集 まりである Webサイト 各 Webサイトの 入 り 口 にあたる 最 初 の1ページ(トップページ) ブラウザを 起 動 したとき 最 初 に 表 示 されるWebページ インターネット 上 のWebサイトやWebページの 総 称 混 乱 を 防 ぐため このテキストでは Webサイト Webページ と 言 い 換 えて 記 載 してい ます - 1 -
1-2.Webサイトとインターネット Webサイトを 閲 覧 するには パソコンをインターネットと 接 続 しなければなりません 一 般 的 には インターネットに 接 続 するサービスを 提 供 している インターネットサービス プロバイダー( 以 下 プロバイダーと 記 載 )と 契 約 する 必 要 があります 契 約 すると プロバイダーからユーザー 名 とパスワードが 割 り 当 てられます 利 用 者 は 光 やADSLなどの 通 信 回 線 をパソコンに 接 続 し ユーザー 名 とパスワードを 用 いてプロバイ ダーのネットワークを 経 由 し インターネットに 接 続 します インターネット プロバイダー インターネットに 接 続 できる 環 境 が 整 ったら Internet ExplorerなどのWebブラウザを 使 って Webサイトを 見 ることができます Webサイトを 見 るには WebブラウザのURL(アド レス) 欄 にWebサイトの 住 所 にあたる URL を 直 接 入 力 するか 検 索 エンジンとよばれる サービスで 検 索 キーワード を 入 力 して 見 たいWebサイトを 探 し 出 します - 2 -
Check プロバイダー プロバイダー ( 正 式 には インターネットサービスプロバイダー(ISP) ) は インターネットの 接 続 サービスやWebサイトの 開 設 サービスを 提 供 する 会 社 のことです 本 テキストでは すでにプロバイダーに 加 入 し インターネットを 利 用 していることを 前 提 としているため プロバイダーの 加 入 方 法 などは 説 明 を 省 略 します Check Webブラウザ Webブラウザ は Webサイトを 閲 覧 するためのソフトウェアです 代 表 的 なものに Windowsに 搭 載 されている Internet Explorer や Mac OSに 搭 載 されている Safari があります また そのほかにも Google Chrome や Firefox Opera など さまざまなWebブラウザがあります Check URL WebブラウザでWebサイトを 見 るには http://www.justsystems.com/jp/ の ように アルファベットの 文 字 列 を 入 力 します これを URL( 正 式 名 称 :Uniform Resource Locator) (ユーアールエル)と いいます URLは Webサイトの 住 所 のようなものです URL Check 検 索 エンジン 検 索 エンジンには Yahoo!(ヤフー)やGoogle(グーグル) goo(グー)などが あります これらのURLを お 気 に 入 り に 追 加 しておくと すぐに 表 示 で きて 便 利 です - 3 -
1-3.Webサイトのしくみ Webサイト 作 成 の 前 に Webサイトのしくみについて 確 認 しておきましょう 確 認 Webサイト は Webページ で 構 成 されている ほとんどのWebサイトは 複 数 のページから 構 成 されています たとえば 下 図 のWebサイトは トップ メニュー スタッフ 紹 介 アクセス の 個 々のページがひとつのまとまりになっていて それぞれのページは リンク で 結 ばれ 自 由 に 移 動 できるようになっています これらのページ 一 つひとつを Webページ といい 複 数 のWebページが 集 まったまとまりを Webサイト とい います なお 本 テキストでは Webサイト 内 の 個 々のページを Webページ Webサイト の 入 り 口 にあたるページを トップページ それ 以 外 のページのことを サブ ページ といいます Web サイト ねこカフェ ももの 部 屋 トップ トップ メニュー スタッフ 紹 介 アクセス リンク メニュー メニュー トップページ アイスコーヒー アイスティ オレンジジュース XXX 円 XXX 円 XXX 円 モモ ハナ スタッフ スタッフ 紹 介 紹 介 アクセス アクセス トップへ タマ ココ Web ページ トップへ トップへ サブページ - 4 -
確 認 Webページの 構 成 通 常 ひとつのWebページは ページの 土 台 となる HTMLファイル と それらを 飾 る 画 像 ファイル などの 複 数 の 関 連 ファイルで 構 成 されています Web ページ <HTMLファイル> < 画 像 ファイル> + Web ブラウザでページを 表 示 中 メニューバーから[ 表 示 -ソース HTML ファイルの 内 容 を 表 示 することができます 1 ]などを 選 択 すると 1 Internet Explorer をご 利 用 の 場 合 のメニューです - 5 -
確 認 HTMLファイルの 内 容 HTMLファイルは HTML( 正 式 名 称 :HyperText Markup Language) という 言 語 を 使 って 記 述 します HTMLファイルの 中 には Webページに 表 示 させる 文 章 だけでは なく ページ 全 体 の 構 成 がどのようになっていて どこにどのような 画 像 が 貼 り 付 けられているか などが 定 義 されています HTMLファイルの 中 で<head> <body>のように < > で 囲 まれている 部 分 を タ グ とよびます Webブラウザは タグで 指 定 された 文 字 や 画 像 を 1 枚 のWebペ ージとして 表 示 します タグ Webページを 作 成 するためには このような 複 雑 なタグを 記 述 しなくてはなりませ んが これを 代 わりに 書 いてくれるのが ホームページ ビルダー です ホームページ ビルダーを 使 ってWebページを 作 成 すれば 必 要 なタグが 自 動 的 にH TMLファイルに 書 き 込 まれます - 6 -
1-4. 作 成 前 に 考 えておきたいこと 良 いWebサイトを 作 るためには 単 に 伝 えたい 内 容 を 盛 り 込 むだけでなく 利 用 者 が 直 感 的 に 利 用 できるよう 情 報 を 整 理 する 必 要 があります 訪 れる 人 のことを 考 えたWebサイ トの 条 件 を 確 認 しましょう 訪 れる 人 のことを 考 えたWebサイトの 条 件 1. 目 的 を 明 確 にする 2.コンテンツ( 内 容 中 身 )を 整 理 する 3.わかりやすい 構 成 にする 4. 各 ページの 情 報 を 整 理 する 5.Webページ 全 体 の 統 一 感 を 保 つ 6. 見 やすいレイアウト( 配 置 配 列 )と 配 色 にする 7.その 他 の 留 意 点 1. 目 的 を 明 確 にする このWebサイトの 目 的 は 何 か 誰 が 利 用 するのか 利 用 者 は 何 を 望 んでいるのか など Webサイトに 関 する 要 件 をまず 明 確 にすることが 重 要 です このことが Webサイトの 構 成 や 見 た 目 のデザインの 基 本 となります 2.コンテンツ( 内 容 中 身 )を 整 理 する 目 的 が 明 確 になったら このWebサイトでどのような 情 報 を 伝 えるかを 検 討 します ま ずは 思 いつくものをすべて 列 挙 し 自 分 が 利 用 者 だったら 何 が 知 りたいか 同 様 のWeb サイトにはどのような 情 報 があるかなどを 調 べて 整 理 し 自 分 なりのアイデアを 盛 り 込 むことが 重 要 です - 7 -
３ わかりやすい構成にする い く つ か の コ ン テ ン ツ が 決 ま っ た ら Webサ イ トの 構 成 を 検討 し ま す 利 用 者 が ペー ジ からページへとたどっていきやすくするためには まずカテゴリーやメニューで情報を 分類することが重要です ま た 一 つ の ペ ー ジ に 数 多 く の リ ンク を 設 け たり Webサ イト の 構 造 を複 雑 に し すぎ た りするのは 利用しにくい上 管理も煩雑になるので避けましょう カテゴリーやメニューは 利用者がすぐに選べるようあまり多くしすぎないことと わ かりやすく かつ興味を引く言葉を選ぶことが重要です 良い例 良いポイント ①カテゴリーを用意することで ページ全体の構 成がわかりやすくなっている ④ ②新着情報などがハイライトとしてわかりやすく 配置されている ③各カテゴリー内の項目が端的にまとめられて いる ④キーワード検索ができるようになっており 知 りたい情報を探せるようになっている ① ② ③ 悪い例 良くないポイント ①メニューが羅列されているだけで ページ全体 の構成がわかりにくい ① ②写真の上に文字があり 読みづらい ③イメージ写真にこだわりすぎて 肝心の構成や 内容がわかりにくい ② ③ - 8 -
４ 各ページの情報を整理する Webサ イ ト の 構 成 が 決 ま っ た ら 見や す さ わ かり や す さ を基 準 に 各ペ ー ジ に 載せ る 情報の項目や量 位置を計画します まずは手書きの線画で検討してみましょう なお 大きな画像を多用すると 読み込むのに時間がかかり 利用者はイライラするた め 1ページのコンテンツが多すぎることのないよう 注意しましょう 良い例 良いポイント ①見やすい情報量にまとめられている ②タイトルや本文ごとに文字の大きさが整理 されている ② ① 悪い例 良くないポイント ①長すぎて読みづらい ②タイトル 本文などの文字の大きさが区別 されていないため わかりづらい ③背景一面に濃い色の壁紙が設定されてい るため 文字が読みづらい ② ③ ① - 9 -
５ Webサイト全体の統一感を保つ Webサイトは 複数のWebページで構成されているため 全体での見た目の統一感や操作 の 統 一 感 を 保 つ こ と が 重 要 で す そ の た め に は 各ペ ー ジ 共 通 のフ ォ ー マ ット (テン プ レート)に基づいてデザインする必要があります 良い例 良いポイント 各 Web ページが同じフォーマットでデザインされているため 統一感がある 悪い例 良くないポイント 各 Web ページのデザイン 配色がバラバラで統一感がない - 10 -
６ 見やすいレイアウト(配置 配列)と配色にする レイアウトは 見やすいページかどうかを左右する最も重要な要素です 見やすくレイアウトするためには 次のような点を心がけるとよいでしょう ①利用者によって画面のサイズが違うため 小さい文字を多用しないなど 文字の大 きさに気を配る ②利用者の目線は 通常左上から右下に移動するため 重要な情報は左上に配置する ③左揃えか 中央揃えかを明確に決める (中途半端に混在させない) ④グリッド(参照線)を意識してデザインする ⑤見やすさの点で配色は白が基本 ⑥色は使いすぎない ⑦カテゴリーなどは色分けする ７ その他の留意点 その他の留意点は以下のとおりです ①フレーム(分割)機能は使わない フ レ ー ム 機 能 を 使 っ た Webサ イ ト は ペ ー ジ単 位 で 印 刷で き な い ブ ッ ク マ ーク の 登録がうまくできない 読み上げ機能が使えないなどの問題点があるため お勧め できません ②随時更新する いつも古い情報では 何度も訪問してもらえません 情報は随時更新しましょう ③社会的ルールとマナーを遵守する 他人の作ったものを流用したり 他人を傷付けたりするような表現は許されません 1-5.Webサイト公開までの流れ 次の流れでWebサイトを公開します 1.Webページを作成する 2.Webページを一つのまとまりとして管理する サイト を作成する 3. サイト をサーバーに転送する - 11 -
2.ホームページ ビルダー16基本操作 ホームページ ビルダー16を起動する方法や画面についてなど ホームページ ビルダー16 の基本的な操作について解説します 2-1.ホームページ ビルダー16を起動しよう ホームページ ビルダー16を起動しましょう 操作 ホームページ ビルダー16を起動する ①デスクトップ上の [ホームページ ビルダー16]をダブルクリックします ア イ コ ン が 表 示 さ れ て い な い場 合 は Windowsの ス ター ト ボ タ ン を ク リ ック し [すべ て の プ ロ グ ラム ホーム ページ ビルダ ー16 ホームペ ージ ビルダー16]を選 択します [ホームページ ビルダー16へようこそ]画面が表示されます ②Webページの作成方法を選択します ホームページ ビルダー16には 次の3つの作成方法があります かんたんホームページ デビューを利用する フルCSSテンプレートを利用する 白紙から作成する ここでは 白紙から作成するため 閉じる をクリックします デ ザ イ ン 性 が 高 く SEO* 効果も望めるフル CSS テ ンプレートや スマートフォ ン向け Web サイトの作成 に便利なテンプレートが多 数収録されています * SEO とは Search Engine Optimization の略 で 検索エンジンの検索結 果で 上位に表示されるよう に工夫することです Web ページの作成から公開までを わずか 3 ステップで行う作成方法です ホームページ ビルダー16が起動します ホ ー ム ペ ー ジ ビ ル ダ ー 16で は [ホ ー ム ペ ー ジ ビ ル ダ ー 16へ よ う こ そ ]画 面 で 編 集ス タ イ ル を 選 択しません 初回起動時は スタンダー ド スタイルで 起動します - 12 -
2-2.ホームページ ビルダー16の画面を確認しよう ホ ー ム ペ ー ジ ビ ル ダー 16を 起 動 す ると 次 の よ うな 画 面 が 表示 さ れ ま す こ こ で は ホ ームページ ビルダー16の スタンダード スタイルの画面名称と役割を解説します 確認 ホームページ ビルダー16の画面(スタンダード) ① ② ③ ④ ⑦ ⑤ ⑥ ① メニュ ーバー ホ ー ム ペ ー ジ ビ ル ダ ー 16の コ マ ン ド が 分 類 され た メ ニ ュ ーで す ク リッ ク す る と ドロ ッ プ ダ ウ ンメ ニ ュ ー が表 示 さ れ ます ② かんた んナビ バー 上 下 の 2段 が あ り よ く 使 う 機 能 の ボ タ ンが表 示され ていま す ③ ツール バー コ マ ンド を 実 行 す ると き に 使 いま す よ く 使 うコ マ ン ド が ボタ ン と し て登 録 さ れ ていま す ④ かんた んナビ メニュ ー(ナ ビメニ ュー ) Webペ ー ジ に 文 字 や 画 像 リ ン ク な ど の 要 素 を挿 入 す る た めの ボ タ ン が用 意 さ れ ていま す ⑧ ⑤ステ ータス バー 現 在 の 作 業 状況 や 処 理手 順 が 表 示 され ます ⑥ペー ジ編集 領域 Webペ ー ジ の 作 成 編 集 領 域 で す 複 数 の タ ブ が 用 意さ れ て い るた め 作 業 に応 じてタブを切り替えながら作業できま す ⑦ビュ ー ヘ ル プ を 表 示し た り 編集 中 の ペ ー ジを 一 覧 表 示 し たり す る ビ ュー が 用 意 さ れて い ま す タ ブを ク リ ッ クす る と 表 示 する ビュ ーを切 り替え られま す ⑧アク セシビ リティ メータ 作 成 中 の Webペ ー ジ が 誰 に で も 利 用 し や すい かどう かを星 印で判 断しま す - 13 -
3.トップページの 作 成 ここでは 次 のようなトップページを 作 成 しましょう < 完 成 例 > 9 index.html 5 1 2 4 6 7 3 8 1ロゴの 挿 入 2 文 字 の 挿 入 3 文 字 サイズ 文 字 色 フォントの 変 更 4 配 置 変 更 ( 中 央 揃 え) 5 画 像 の 挿 入 6 写 真 の 挿 入 7 水 平 線 の 挿 入 8 表 の 挿 入 9ページタイトルの 設 定 - 14 -
3-1.トップページを 作 成 しよう トップページは WebブラウザでページのURL(アドレス)を 入 れたときに 最 初 に 表 示 され るページです 本 でいうと 表 紙 や 目 次 にあたります Webサイトのテーマや 内 容 が 明 確 に 伝 わるようにしましょう 操 作 トップページを 作 成 する 1かんたんナビバー 上 段 の をクリックします 2[ 新 規 作 成 ] 画 面 で をクリックします 標 準 モードで 白 紙 のページが 開 きます 白 紙 から 作 成 する 編 集 モードには 標 準 モード と どこでも 配 置 モード があります このテキストでは 標 準 モード の 操 作 を 説 明 します 3-2.ロゴ( 飾 り 文 字 )を 挿 入 しよう ホームページ ビルダーでは 文 字 列 に 飾 りを 付 けて 画 像 にしたものを ロゴ とよびま す 学 校 名 などの 見 出 しに 使 うと 効 果 的 です 操 作 ロゴを 挿 入 する 1ページ 編 集 領 域 でカーソルが 点 滅 していることを 確 認 します 2ナビメニューから を 選 択 します [ロゴ( 飾 り 文 字 )の 挿 入 ]をクリックし - 15 -
3[ロゴの 作 成 ] 画 面 で [ 文 字 ]に 入 力 したい 文 字 を 入 力 します ここでは 丁 度 学 園 と 入 力 します 4[ 文 字 の 大 きさ]のスライドバーのつまみをドラッグして 文 字 の 大 きさを 変 更 します ここでは 30 にします 5デザインの 一 覧 から 好 きなデザインを 選 択 し 完 了 をクリックします ここでは [000t10]を 選 択 します ロゴが 挿 入 され 操 作 の 対 象 になっていることを 示 す フォーカス 枠 とよば れる 色 付 きの 枠 が 表 示 されます 文 字 列 やデザインを 変 更 したい 場 合 は ロゴの 上 で 右 クリックし [ロゴの 編 集 ]から 変 更 します - 16 -
3-3. 文 字 を 入 力 しよう/ 文 字 サイズ 文 字 色 フォントを 変 更 しよう ページ 内 に 文 字 を 入 力 し 文 字 サイズや 文 字 色 フォントを 変 更 しましょう インターネットでは 半 角 カタカナが 正 しく 表 示 されないことがあります 半 角 カタカナは 使 わないでください 操 作 文 字 を 入 力 する 1 文 字 を 入 力 したい 位 置 にカーソルを 移 動 します 移 動 したい 位 置 をクリックするか キーボードの キーを 押 して 移 動 します ここでは 丁 度 学 園 の1 行 下 にカーソルを 移 動 します 2 文 字 を 入 力 します ここでは トップ 学 校 案 内 部 活 動 学 校 行 事 と 入 力 します を 入 力 するには Shift キーを 押 しながら キーを 押 します 3 Shift + Enter を 押 して 新 しい 段 落 を 作 り 以 下 のように 入 力 します お 知 らせ OnePoint 改 行 または 改 段 落 する 改 行 するには 改 行 したいところにカーソルを 移 動 して Enter キーを 押 し ます 改 段 落 ( 新 しい 段 落 を 作 成 )するには 段 落 を 作 りたいところにカーソルを 移 動 して Shift キーを 押 しながら Enter キーを 押 します OnePoint 元 に 戻 す ツールバーの ができます [ 元 に 戻 す]をクリックすると 直 前 の 操 作 を 取 り 消 すこと - 17 -
操 作 文 字 サイズを 変 更 する 1 文 字 サイズを 変 更 したい 文 字 列 をドラッグして 選 択 します ここでは お 知 らせ を 選 択 します 2ツールバーの [ 文 字 サイズ 拡 大 ]を2 回 クリックします 1 回 クリックするごとに 文 字 サイズが 一 段 階 拡 大 されます 文 字 サイズを 縮 小 したいときは 文 字 列 をドラッグして 選 択 し ツールバーの [ 文 字 サイズ 縮 小 ]をクリックします 1 回 クリックするごとに 文 字 サイズが 一 段 階 縮 小 されます 3 文 字 列 以 外 の 部 分 をクリックして 選 択 状 態 を 解 除 します OnePoint 文 字 サイズの 種 類 文 字 サイズは 1 ~ 7 までの7 段 階 あり 標 準 の 文 字 サイズは 3 です 利 用 者 側 のブラウザの 設 定 により 同 じ 文 字 サイズが 指 定 されていても 表 示 されるサイ ズは 若 干 異 なります 操 作 文 字 色 を 変 更 する 1 文 字 色 を 変 更 したい 文 字 列 をドラッグして 選 択 します ここでは お 知 らせ を 選 択 します 2ツールバーの [ 文 字 色 の 変 更 ]の 右 側 にある をクリックします 3 表 示 されたカラーパレットから 好 きな 色 を 選 択 します ここでは 濃 い 緑 色 を 選 択 します 4 文 字 列 以 外 の 部 分 をクリックして 選 択 状 態 を 解 除 します - 18 -
操 作 フォントを 変 更 する 1フォントを 変 更 したい 文 字 列 をドラッグして 選 択 します ここでは お 知 らせ を 選 択 します 2ツールバーの [フォントの 変 更 ]をクリックします 3[フォント] 画 面 で [ 書 体 ]の 一 覧 から 好 きなフォントを 選 択 し OK をクリック します ここでは MS 明 朝 を 選 択 します MS 明 朝 4 文 字 列 以 外 の 部 分 をクリックして 選 択 状 態 を 解 除 します 3-4. 配 置 を 変 更 しよう Webページの 文 字 列 は 初 期 設 定 では 左 端 に 配 置 されますが 簡 単 に 中 央 や 右 端 に 配 置 を 変 更 することができます 操 作 配 置 を 変 更 する 1 配 置 を 変 更 したい 段 落 内 にカーソルを 移 動 します こ こでは トップ 学 校 案 内 部 活 動 学 校 行 事 にカーソルを 移 動 し ます 2ツールバーの [ 中 央 揃 え]をクリックします 文 字 列 が 中 央 に 配 置 されます - 19 -
3-5.画像を挿入しよう Webページに貼り付ける画像や音声などのファイルを 素材 といいます ホームページ ビルダーには 豊富な素材が 素材集 として用意されています ここでは 素材集の画 像をページ内に配置しましょう 操作 素材集から画像ファイルを挿入する ①画像を挿入したい位置にカーソルを移動します ここでは 丁度学園 の右側にカーソルを移動します ②ナビメニューから [写 真 や 画 像 の 挿 入 ]を ク リ ッ ク し を選択します ③[素材集から開く]画面で 挿入したいファイルを選択し 開く をクリックしま す ここでは [イラスト 学校]の [img_e063.gif]を選択します ④挿入された画像ファイルを選択し 四隅に表示された にマウスポインタを合 わせ ポインタの形が になったらドラッグして大きさを調整します ⑤画像以外の部分をクリックして 選択状態を解除します - 20 -
3-6.写真を挿入しよう ペ ー ジ 内 に写 真 を 挿 入 する と き は 写 真 挿 入ウ ィ ザ ー ド を 使 う と 簡 単 に 写 真の 大き さを変更したり 加工したりすることができて便利です 操作 写真を挿入する ①画像を挿入したい位置にカーソルを移動します こ こ で は ト ッ プ 学 校 案 内 部 活 動 学 校 行 事 の 1行下 に カ ー ソル を 移動します ②ナビメニューから [写 真 や 画像 の 挿 入 ]を ク リ ック し を選択します ③[写真挿入ウィザード (画像ファイルの指定)]画面で [画像の指定]から挿入し たい画像を指定します ここでは をクリックします ④[素材集から開く]画面で挿入したいファイルを選択し 開くをクリックします ここでは [写真 建物]の [pic_d018.jpg]を選択します ⑤[プレビュー]に表示された写真を確認し 次へをクリックします ⑥[サイズの指定]で画像の大きさを選択し 次へ をクリックします ここでは [中(横幅 320ピクセル)]を選択します ⑦必要に応じて 画像の明るさや色合いの自動補正を選択し 次へ をクリックし ます ここでは 何もチェックしません - 21 -
⑧必要に応じて 文字を重ねたりスタンプを押す設定を選択し 次へ をクリック します ここでは [縁取り効果をつける]にチェックを付けます ⑨ [縁 取 り 効 果 の 選 択 ]か ら 適 用 し た い 効 果 を 選 択 し 完 了 を ク リ ッ ク し ます ここでは [frame_f_005]を選択します ⑩挿入された写真を選択し ツールバーの 画像が中央に配置されます [中央揃え]をクリックします ⑪必要に応じて挿入された写真を選択し 四隅に表示された にマウスポインタ を合わせ ポインタの形が になったらドラッグして大きさを調整します ⑫写真以外の部分をクリックして 選択状態を解除します OnePoint 画像を圧縮する 画像の四隅の をドラッグして大きさを変更すると 見た目の大きさのみが 変更されます 表示サイズを変更した場合は 表示サイズに合わせて サイ ズ容量も小さく圧縮しておきましょう 操作 画像を圧縮する ①大きさを変更した画像を選択します ②画像の上で右クリックし [画像を編集 画像の編集]を選択します ③[画像の編集]画面で [表示サイズで保存]にチェックを入れ OK をクリックします - 22 -
OnePoint 画像に代替テキストを設定する 代替テキスト とは 画像の代わりに表示される文字のことです 目の不自由な方がWebページから情報を得ようとする場合 音声読み上げソ フトなどを利用します 読み上げの対象は文字であるため 画像は読み上げることができませんが 代替テキストは読み上げの対象になります 画像を挿入したら 代替テキストを設定しておきましょう 操作 代替テキストの設定 ①画像をクリックして選択します ②ツールバーの [属性の変更]をクリックします ③[属性]画面で [代替テキスト]に画像の説明を入力し OK をクリ ックします 通常 画像が表示されている状態では 画面上で代替テキストは表示されません - 23 -
3-7.水平線を挿入しよう 見栄えを良くし ページ全体のレイアウトを引き締めるために 水平線を入れましょう 操作 水平線を挿入する ①水平線を挿入したい位置にカーソルを移動します ここでは 挿入した写真の1行下にカーソルを移動します ②ナビメニューから [レ イ ア ウ ト 部 品 の 挿 入 ]を ク リ ッ ク し を選択します ③[水平線の挿入]画面で [水平線のサイズ]を以下のように設定し OK をクリッ クします 水平線が挿入されます 水 平 線 の 太 さ や 幅 を 変 更 し たい 場 合 は 水 平 線 の 上 で 右 ク リ ッ ク し [属性 の 変 更 ]か ら 設 定 を 変 更します - 24 -
3-8.表を挿入しよう 表の中に文字を配置すると わかりやすくレイアウトすることができます 操作 表を挿入する ①表を挿入したい位置にカーソルを移動します ここでは お知らせ の1行下にカーソルを移動します ②ナビメニューから [表の挿入]を選択します ③[表の挿入]画面で [表のサイズ]を以下のように設定し OK をクリックします 表が挿入されます ④セル内をクリックして 文字を入力します ここでは 以下のとおり入力します Tabキー を押すと 次 のセルにカー ソル がジャンプし ます 2010年12月 美術部のページを更新しました (12/1) 2010年11月 文化祭の写真をアップしました (11/25) - 25 -
OnePoint 列幅や行の高さを調整する 作成した表の列幅や行の高さは あとから広げたり狭めたりすることができ ます 操作 列幅や行の高さを調整する ①列幅や行の高さを調整したいセルを選択します ②周囲に表示された にマウスポインタを合わせて ポインタの形が や になったら ドラッグします セルの幅や高さが変わります OnePoint 列や行を追加する 選択したセルの右側または左側に列を追加したり 上側または下側に行を追 加することができます 操作 列を追加する ①列を追加したい場所の右か左のセルを選択します ②セルの右側に列を追加する場合は メニューバーから[表 列の追 加 右へ1列追加]を選択します セルの左側に列を追加する場合は メニューバーから[表 列の追 加 左へ1列追加]を選択します 操作 行を追加する ①行を追加したい場所の上か下のセルを選択します ②セルの上側に行を追加する場合は メニューバーから[表 行の追 加 上へ1行追加]を選択します セルの下側に行を追加する場合は メニューバーから[表 行の追 加 下へ1行追加]を選択します - 26 -
OnePoint セルを結合する 横または縦に隣り合った複数のセルをまとめて 一つのセルに結合すること ができます 横のセルを結合 縦のセル を結合 上記の club.html データは 以下からダウンロードすることができます http://www.justsystems.com/jp/school/product/study/training.html ここでは あらかじめ hpb.zip を解凍し デスクトップに保存して操作を進めます 操作 ページを開く ①メニューバーから[ファイル 開く]を選択します ②[開く]画面で [ファイルの場所]と[ファイル名]を選択し 開くを クリックします ここでは デスクトップに保存した[hpb]フォルダの club.html を選択します 操作 セルを結合する ①結合したい複数のセルをドラッグして選択します ②メニューバーから[表 選択セルの結合]を選択します 選択したセルが結合されます 結合を取り消すには セルを選択後 ツールバーの [属性の変更]を クリックし [セル]タブの[セルの結合] に入っている数字を削除します 操作 上書き保存してページを閉じる ①かんたんナビバー上段の ページが上書き保存されます ②かんたんナビバー上段の ③[閉じる]画面で 画面が閉じます をクリックします をクリックします をクリックします - 27 -
StepUp 表を利用してページをレイアウトする １ ３ 表をうまく利用すると 文章を2段組みにしたり 画像を並べ替えて表示する など 自由なレイアウトでページを作成できます 実際にページを作成する前に まずページに入れる素材を用意し それらを どのように配置したいか デッサン紙などに描いて計画しましょう 例) タイトル(ロゴ) 文章 写真 写真 説明 説明 ペ ージ の レ イ ア ウトを デッ サ ンす る 操作 レイアウトを実現する表組みを考える 表を利用してレイアウトする ①表を挿入したい位置にカーソルを移動します ②ナビメニューから [表の挿入]を選択します ③[表の挿入]画面で [表のサイズ]から行数 列数を設定します - 28 -
StepUp 表を利用してページをレイアウトする 操作 ２ ３ 表を利用してレイアウトする ④[表の属性]の[表の枠を表示する]のチェックを外し OK をクリック します 枠組みが点線になった表が挿入されます ⑤各セル内をクリックして 文字を入力したり画像を挿入したりします プレビューやブラウザ で見ると表の枠が非 表示になります - 29 -
3-9.Webページを保存しよう ページが完成したら index という名前に変更して保存しましょう 操作 ページを保存する ①メニューバーの[ファイル 名前を付けて保存]をクリックします ②[名前を付けて保存]画面で 保存する場所を選択します ここでは [保存する場所]の をクリックして[デスクトップ]を選択し [新 しいフォルダーの作成]をクリックします ③ 新 し い フ ォ ル ダ ー の 文字 列 を 削 除し て justgakuen と 入力 し 作 成し た フォルダをダブルクリックします ④[ファイル名]を index に変更し [ファイルの種類]が HTMLファイル にな っていることを確認して 保存 をクリックします justgakuen index HTMLファイル フォルダやファイルの名前には 必ず半角の英数字を使ってください 全角英数文字 日本語 全角 半角のスペース!? などの記号は使えません サーバーの OS によっては 大文字と小文字が区別されるので 小文字で統一することをお勧めします トップページのファイル名は index が一般的です ⑤ [素 材 フ ァ イ ル を コ ピ ー し て 保 存 ]画 面 で ペ ー ジ に 挿 入 し た 画 像 な ど の 素材 フ ァイルの保存先を指定し 保存 をクリックします ここでは 何も変更しません (HTMLファイルと同じフォルダのままにします ) 素 材 フ ァイ ル の 保 存 先 を 変 更 する場合は 参照 をクリックし ます - 30 -
⑥[再編集用フォルダについて]画面が表示されたら 閉じる をクリックします ページが保存され タイトルバーの表示が index.html-無題<標準モード> に 変わります 操作 ページにタイトルを付ける タイトルは Webブラウザで [お 気に入り]や[ブ ックマーク]に登 録するときに 利用されます 必ず設定し ましょう ①かんたんナビバー下段の をクリックします ②[属性]画面で [ページタイトル]にページのタイトルを入力し OK をクリック します ここでは 丁度学園トップページ と入力します タイトルが設定され ホームページ ビルダーのタイトルバーに表示されます - 31 -
3-10.プレビューで確認しよう [プレビュー]タブを利用すると Webブラウザを起動せずに Webブラウザでの見え方や動 きを確認することができます 操作 プレビューで確認する ①ページ編集領域の[プレビュー]タブをクリックします ②ページのプレビューが表示されるため 見え方を確認します [プレビュー タブでは編集はできません ③ページ編集領域の[ページ編集]タブをクリックします 編集画面に戻ります - 32 -
StepUp HTML ソースを直接編集する ページ編集領域の[HTML ソース]タブまたは[ページ/ソース]タブを利用する と HTML ソースを直接編集することができます [ページ/ソース]タブでは ページ編集画面とHTML ソース画面の両方を同時に利用することができます - 33 -
4.サブページの 作 成 サブページを 作 成 しましょう ここでは 次 のような 地 図 入 りの 学 校 案 内 ページを 作 成 し ます information.html < 完 成 例 > 1 2 3 1ロゴの 挿 入 2トップページからのコピー 貼 り 付 け 3ウェブアートデザイナーで 地 図 作 成 貼 り 付 け - 34 -
4-1.サブページを 作 成 しよう サブページを 作 成 しましょう トップページと 同 じ 項 目 は トップページからコピーして 利 用 すると 効 率 良 く 作 業 ができます 操 作 新 規 ページを 作 成 する 1かんたんナビバー 上 段 の をクリックします 2[ 新 規 作 成 ] 画 面 で をクリックします [ 標 準 モード]で 白 紙 のページが 開 きます 操 作 ロゴを 挿 入 する 1ページ 編 集 領 域 でカーソルが 点 滅 していることを 確 認 します 2ナビメニューから [ロゴ( 飾 り 文 字 )の 挿 入 ]をクリックし を 選 択 します 3[ロゴの 作 成 ] 画 面 で [ 文 字 ]に 入 力 したい 文 字 を 入 力 します ここでは 学 校 案 内 と 入 力 します 4[ 文 字 の 大 きさ]のスライドバーのつまみをドラッグして 文 字 の 大 きさを 変 更 します ここでは 22 にします 5デザインの 一 覧 から 好 きなデザインを 選 択 し 完 了 をクリックします ここでは ロゴが 挿 入 されます [000t02]を 選 択 します 文 字 列 やデザインを 変 更 したい 場 合 は ロゴの 上 で 右 クリックし [ロゴの 編 集 ]から 変 更 します - 35 -
操 作 ページの 項 目 をコピーして 利 用 する 1 画 面 右 側 の [ページ 一 覧 ]タブをクリックします 2[ 編 集 中 のページ]に 表 示 された index.html をクリックします ページ 編 集 領 域 に index.html の 内 容 が 表 示 されます 3 index.html の トップ 学 校 案 内 部 活 動 学 校 行 事 をドラッグし て 選 択 します 4ツールバーの [コピー]をクリックします 5[ 編 集 中 のページ]の newpage2.html をクリックして 学 校 案 内 のロゴの 1 行 下 にカーソルを 移 動 します 6ツールバーの [ 貼 り 付 け]をクリックします コピーした 文 字 列 が 貼 り 付 きます - 36 -
操 作 ページを 保 存 する 1メニューバーから[ファイル- 名 前 を 付 けて 保 存 ]をクリックします 2[ 名 前 を 付 けて 保 存 ] 画 面 で 保 存 する 場 所 やファイル 名 を 設 定 して 保 存 をク リックします ここでは [ 保 存 する 場 所 ]を justgakuen [ファイル 名 ]を information ファイルの 種 類 を HTMLファイル に 設 定 します justgakuen information HTMLファイル フォルダやファイルの 名 前 には 必 ず 半 角 の 英 数 字 を 使 ってください 全 角 英 数 文 字 日 本 語 全 角 / 半 角 のスペース!? などの 記 号 は 使 えません サーバーの OS によっては 大 文 字 と 小 文 字 が 区 別 されるので 小 文 字 で 統 一 することをお 勧 めします 3[ 素 材 ファイルをコピーして 保 存 ] 画 面 で ページに 挿 入 した 画 像 などの 素 材 フ ァイルの 保 存 先 を 指 定 し 保 存 をクリックします ここでは 何 も 変 更 しません (HTMLファイルと 同 じフォルダのままにします ) 素 材 ファイルの 保 存 先 を 変 更 す る 場 合 は 参 照 をクリックします 4[ 再 編 集 用 フォルダについて] 画 面 が 表 示 されたら 閉 じるをクリックします - 37 -
ページが 保 存 され タイトルバーの 表 示 が [information.html- 無 題 < 標 準 モー ド>] に 変 わります 操 作 ページにタイトルを 付 ける タイトルは Webブラウザで[お 気 に 入 り]や[ブックマーク]に 登 録 するときに 利 用 されます 必 ず 設 定 しましょう 1かんたんナビバーの をクリックします 2[ 属 性 ] 画 面 で [ページタイトル]にページのタイトルを 入 力 し OK をクリック します ここでは 丁 度 学 園 学 校 案 内 と 入 力 します タイトルが 設 定 され ホームページ ビルダーのタイトルバーに 表 示 されます - 38 -
4-2. 図 形 を 描 画 しよう ホームページ ビルダーに 付 属 している 画 像 作 成 プログラム ウェブアートデザイナー を 使 うと ロゴやボタン 簡 単 な 図 形 や 地 図 などを 作 成 してWebページに 入 れることがで きます ここでは ウェブアートデザイナーを 使 って 地 図 を 作 成 しましょう 操 作 確 認 ウェブアートデザイナーを 起 動 する 1 地 図 を 挿 入 したい 位 置 にカーソルを 移 動 します ここでは トップ 学 校 案 内 部 活 動 学 校 行 事 の1 行 下 にカーソルを 移 動 します 2メニューバーから[ツール-ウェブアートデザイナーの 起 動 ]を 選 択 します ウェブアートデザイナーが 起 動 します ウェブアートデザイナーの 画 面 1 2 3 7 4 5 6 1メニューバー ウェブアートデザイナーのコマンドが 分 類 されたメニューです クリックすると ドロップダウンメニュー が 表 示 されます 2ツールバー コマンドを 実 行 するときに 使 います よ く 使 うコマンドがボタンとして 登 録 され ています 3テンプレートギャラリー 素 材 を 貼 り 付 けるときに 使 います [ウェブアート 素 材 ]タブとホームページ ビ ル ダ ー 本 体 と 共 通 の [ 素 材 ]タ ブ が あ ります - 39-4ステータスバー 現 在 の 作 業 状 況 や 処 理 手 順 が 表 示 され ます 5 操 作 ツールバー 図 形 を 作 成 したり 編 集 したりするため のツールバーです 6キャ ンバス 編 集 作 業 領 域 です 7オブジェクトスタック オブジェクト( 図 形 や 素 材 )の 前 後 関 係 を 表 示 するパネルです ここには オブジ ェクトのサムネイルが 表 示 されます キ ャンバスで 一 番 後 ろのオブジェクトが 一 番 下 に 表 示 されます
OnePoint 線 を 引 く 目 安 を 表 示 する メニューバーから[ 表 示 -グリッドの 表 示 ]を 選 択 すると キャンバスに 線 を 引 くときの 目 安 となる 参 照 線 が 表 示 されます グリッドの 色 や 形 状 を 変 更 したいときは メニューバーの[ファイル- 環 境 設 定 ]を 選 択 し [ 環 境 設 定 ] 画 面 の[ 表 示 ]タブで [グリッド]から 設 定 を 変 更 します 操 作 直 線 で 道 路 を 描 く 1 操 作 ツールバーの [ 直 線 ]をクリックします 2[ 線 の 太 さ]の をクリックして 線 の 太 さを 選 択 します ここでは 6ピクセル を 選 択 します 3[ 前 景 色 ]をクリックします 4[ 色 の 設 定 ] 画 面 で 以 下 の 色 を 選 択 し OK をクリックします 濃 いグレー 5 線 の 開 始 位 置 でマウスの 左 ボタンを 押 し 終 点 までドラッグします Shiftキーを 押 しながらドラッグすると 水 平 ( 垂 直 ) 方 向 または 斜 め45 度 の 線 を 引 くことができます 6 何 もない 場 所 をクリックして 選 択 状 態 を 解 除 します - 40 -
Try 下 図 のように [ 直 線 ]で 横 線 や 縦 線 斜 めの 線 を 描 画 しましょう 操 作 折 れ 線 で 道 路 を 描 く 1 操 作 ツールバーの [ 折 れ 線 ]をクリックします 2 必 要 に 応 じて 線 の 色 線 の 種 類 線 の 太 さを 選 択 します ここでは 直 線 と 同 じ 設 定 にします 3 線 の 開 始 位 置 でクリックし Shiftキーを 押 しながら 線 が 折 れる 部 分 でクリッ クします 4 終 点 位 置 でダブルクリックします Shiftキーを 押 しながら クリック クリック ダブルクリック 5 何 もない 場 所 をクリックして 選 択 状 態 を 解 除 します 操 作 曲 線 で 川 を 描 く 1 操 作 ツールバーの [ 曲 線 (スムーズ)]をクリックします 2[ 線 の 太 さ]の をクリックして 線 の 太 さを 選 択 します ここでは 任 意 を 選 択 し その 下 で 20 と 設 定 します - 41 -
3[ 前 景 色 ]をクリックします 4[ 色 の 設 定 ] 画 面 で 以 下 の 色 を 選 択 し OK をクリックします 青 5 線 の 開 始 位 置 でマウスの 左 ボタンを 押 し ドラッグしながら 自 由 に 曲 線 を 描 き ます 6 何 もない 場 所 をクリックして 選 択 状 態 を 解 除 します 操 作 矢 印 で 線 路 を 描 く 1 操 作 ツールバーの [ 直 線 ]をクリックします 2[ 線 の 種 類 ]の をクリックして 線 の 種 類 を 選 択 します ここでは 以 下 の 点 線 を 選 択 します - 42 -
3[ 線 の 太 さ]の をクリックして 線 の 太 さを 選 択 します ここでは 6ピクセル を 選 択 します 4[ 始 点 と 終 点 の 形 状 ]の をクリックして 始 点 と 終 点 の 形 状 を 選 択 します ここでは 以 下 の 矢 印 を 選 択 します 5[ 前 景 色 ]をクリックします 6[ 色 の 設 定 ] 画 面 で 以 下 の 色 を 選 択 し OK をクリックします 黒 - 43 -
⑦線の開始位置でマウスの左ボタンを押し 終点までドラッグします Shiftキーを押しながらドラッグすると 水平(垂直)方向 または斜め45度の線を引くことができます ⑧何もない場所をクリックして 選択状態を解除します 操作 オブジェクトの上下を入れ替える ①オブジェクトスタックで川のオブジェクトを選択し 一番下にドラッグします 道路と川のオブジェクトの上下が正しく入れ替わります ②何もない場所をクリックして 選択状態を解除します 操作 図形を描く ①操作ツールバーの [楕円形 円]の右側の をクリックして[楕円形 円(塗 り潰しのみ)]を選択します - 44 -
②[背景色]をクリックします ③[色の設定]画面で 以下の色を選択し OK をクリックします 赤 ④キャンバス上でドラッグして 小さな円を描きます Shiftキーを押 しながらドラ ッグすると 正円を描くこ とができます ⑤何もない場所をクリックして 選択状態を解除します - 45 -
操作 イラストを挿入する ① テ ン プ レ ー ト ギ ャ ラ リ ー の [ウ ェ ブ ア ー ト 素 材 ]タ ブ か ら [図 形 ]ボ タ ン を選 択 し フォルダ一覧から[地図]を選択します ②挿入したいイラストを選択し [挿入]をクリックします ここでは [map022]を選択します ③挿入されたイラストを選択し 四隅に表示されている のうち 右上を除く に マ ウ スポ イ ン タ を合 わ せ て ポ イ ン タ の形 が に な った らド ラッ グ して 大き さを調整します Shiftキーを押しながらドラッグすると 縦と横の比率を保ったまま大きさを変更することができます ドラッグ - 46 -
④イラストをドラッグして 配置したい位置まで移動します ⑤イラスト以外の部分をクリックして 選択状態を解除します OnePoint イラストの回転 イラストを回転するには 回転したいイラストを選択し 表示された右上の にマウスポインタを合わせ ポインタの形が になったらドラッグします 左上にドラッグ 操作 文字を入力する ①操作ツールバーの [文字]をクリックします ②必要に応じて [前景色]をクリックし 文字の色を変更します ここでは 黒のままにします ③キャンバス上の文字を入力したい位置でクリックし 文字を入力します ここでは 丁度学園 と入力します 日 本語 入力がオフに なっている場 合は 半角/全角 キーを押して 日本語入力 をオンにしま す ④ESCキーを押して 文字入力を終了します ⑤何もない場所をクリックして 選択状態を解除します 文 字の フォントや大 きさを変更し たいときは 文字枠の 上でダブルク リックし 表示さ れる[ロ ゴ の編集]画面か ら設定を変更 します - 47 -
Try 下図のようにイラストを挿入したり 文字を入力したりしましょう 操作 作成した画像を保存する ① メ ニ ュ ー バ ー か ら [フ ァ イ ル 名 前 を 付 け て キ ャ ン バ ス を 保 存 ]を 選 択 し ます ② [名 前 を 付 け て キ ャ ン バ ス を 保 存 ]画 面 で 保 存 す る 場 所 や フ ァ イ ル 名 を 設定 し て 保存 をクリックします こ こで は [保存 する 場 所]を justgakuen [ファ イ ル名 ]を map [ファイ ルの種類]を[ウェブアートファイル]に設定します ウェブアートデザイナーで再編集できる形式で保存されます - 48 -
操作 画像をWebページに貼り 付ける ①メニューバーから[編集 すべて選択]を選択します 描いた図形や文字枠などがすべて選択されます ②メニューバーから[ファイル Web用保存ウィザード]を選択します ③[Web用保存ウィザード]画面で 保存の対象を選択し 次へ をクリックします ここでは [選択されたオブジェクトを保存する]を選択します ④保存形式を選択し 次へ をクリックします ここでは GIF を選択します ⑤ファイルサイズなどの内容を確認し 次へ をクリックします ここでは 何も変更しません ⑥保存方法を選択し 完成 をクリックします ここでは [ホームページ ビルダーに貼り付け]を選択します - 49 -
ホームページ ビルダーで編集中のページに画像が貼り付きます 操作 ウェブアートデザイナーを終了する ① タ ス ク バ ー に 最 小 化 さ れ て い る [ウ ェ ブ ア ー ト デ ザ イ ナ ー ]を ク リ ッ ク し ます OSによっ て 表示が異 なります 画 面はWindows7のタスクバー です ウェブアートデザイナーの画面が前面に表示されます ②ウェブアートデザイナーのメニューバーから[ファイル アプリケーションの終 了]を選択します ウェブアートデザイナーが終了します - 50 -
4-3.Webページを保存してプレビューで確認しよう ページが完成したら上書き保存して プレビューで確認しましょう 操作 ページを上書き保存する ①かんたんナビバー上段の をクリックします ② [素 材 フ ァ イ ル を コ ピ ー し て 保 存 ]画 面 で ペ ー ジ に 挿 入 し た 画 像 な ど の 素材 フ ァイルの保存先を指定し 保存 をクリックします ここでは 何も変更しません (HTMLファイルと同じフォルダのままにします ) 素 材フ ァイルの 保存 先を 変更 す る場合は 参照をクリックします ③ [再 編 集 用 フ ォ ル ダ に つ い て ]画 面 が 表 示 さ れ た ら 閉 じ る を ク リ ッ ク し ます ページが上書き保存されます 操作 プレビューで確認する ①ページ編集領域の[プレビュー]タブをクリックします - 51 -
②ページのプレビューが表示されるため 見え方を確認します [プレ ビュー]タブでは 編集はできま せん ③ページ編集領域の[ページ編集]タブをクリックします 編集画面に戻ります - 52 -
5.リンクの設定 リンクとは ページ内の特定の文字列や画像をクリックすると 別の場所へジャンプする しくみです トップページとサブページ間を行き来できるように リンクを設定しましょ う 完成例 index.html リンクの 設定 学校案内 をクリックすると information.html ページへ ジャンプ information.html - 53 -
5-1.リンクを設定しよう 特定の文字列をクリックすると 別のページにジャンプするリンクを設定しましょう ジ ャンプする起 点を リンク 元 ジ ャンプする先 を リンク先 といいます 操作 リンクを設定する ①画面右側の [ページ一覧]タブで [編集中のページ]の index.html をクリ ックします ②リンクを設定したい文字列をドラッグして選択します ここでは 学校案内 を選択します ③ナビメニューから [リンクの挿入]をクリックします ④ [リ ン ク 作 成 ウ ィ ザ ー ド ]画 面 で [ペ ー ジ や URLへ の リ ン ク を 作 成 す る ]を 選択して 次へ をクリックします ⑤[リンク作成ウィザード(文字列 画像ファイルの設定)]画面で 次へ をクリッ クします ⑥[リンク作成ウィザード(ページやURLへのリンク作成)]画面で [リンク先(URL ファイル名)]の をクリックし [ファイルから]を選択します ⑦[開く]画面で リンク先のファイルを選択し 開く をクリックします - 54 -
ここでは justgakuen フォルダの information.html を選択します ⑧ 必 要 に 応 じ て [タ ー ゲ ッ ト ]の 右 側 の を ク リ ッ ク し て リ ン ク 先 を ど のよ う に表示するかを選択します ここでは 同一ウィンドウに表示するため何も選択しません リンク先のページを新し い(別の)ウィンドウで表示 します ⑨ 完了 をクリックします 選択した文字列の色が変わり 下線が引かれます ⑩何もない場所をクリックして 選択状態を解除します ⑪かんたんナビバー上段の ページが上書き保存されます をクリックします - 55 -
操作 リンクの設定を確認する ①ページ編集領域の[プレビュー]タブをクリックします ②ページのプレビューが表示されるため 見え方や動きを確認します ここでは リンク元の文字列 学校案内 をクリックします リンク先のページが開きます クリックすると 前に表示したページに戻ります ③ページ編集領域の[ページ編集]タブをクリックします 編集画面に戻ります - 56 -
Try information.html ページの トップ の文字列に index.html ページへのリンクを設定 し 上書き保存しましょう OnePoint リンクの設定を解除する リンクの設定を解除するには リンクを設定した文字列または画像にカーソ ルを移動し かんたんナビバーの 解除]を選択します - 57 - をクリックして [リンクの
OnePoint 同じページ内または他のWebサイトへのリンク １ ３ リンクは ページ間だけではなく 同じページ内の別の場所や他のWebサイ トにジャンプするように設定することもできます 同じページ内の別の場所にリンクを設定するには リンク先にしたい文字列 や画像に 目印となる ラベル を付け そのラベルをリンク先として設定 します ページが長くなり スクロールしないと読めない場合に利用すると 便利です クリックすると 該当個所へジャンプ 使用データは P.27 を参照してください - 58 -
OnePoint 同じページ内または他のWebサイトへのリンク 操作 ２ ３ リンク先にラベルを付ける ①リンク先の文字列または画像を選択します ここでは 以下の サッカー部 の文字列を選択します リンク先 ②ナビメニューから [リンクの挿入]をクリックします ③[リンク作成ウィザード]画面で し 次へ をクリックします [ラベルを作成する]を選択 ④[リンク作成ウィザード(ラベルを作成する)]画面で ルを付ける]を選択し 次へ をクリックします [ラベ ⑤[リンク作成ウィザード(ラベルを付ける)]画面で [ラベル]に名 前を入力し 完了 をクリックします ここでは soccer と入力します ラベルの名前は半角の英数字を使用します 選択した文字列の色が変わり 破線の下線が引かれます ⑥何もない場所をクリックして 選択状態を解除します - 59 -
OnePoint 同じページ内または他のWebサイトへのリンク 操作 ３ ３ リンクを設定する ①リンク元の文字列または画像を選択します ここでは 以下の サッカー部 の文字列を選択します リンク元 ②ナビメニューから [リンクの挿入]をクリックします ③[リンク作成ウィザード]画面で し 次へ をクリックします [ラベルを作成する]を選択 他のWebサイトへリンクを設定したい場合は [ページやURLへのリンクを 作成する]を選択し 画面の指示通りに進みます ④[リンク作成ウィザード(ラベルを作成する)]画面で [ラベ ルへのリンクを作成する]を選択し 次へ をクリックします ⑤[リンク作成ウィザード(ラベルへのリンクを作成する)]画面で [ラベル]の をクリックして リンク先のラベル名を選択し 完了 をクリックします ここでは soccer を選択します 選択した文字列の色が変わり 下線が引かれます ⑥何もない場所をクリックして 選択状態を解除します ⑦ページ編集領域の[プレビュー]タブをクリックし リンクの設定 を確認します - 60 -
6.Webサイトの作成と転送 (付録) 作成したWebページをインターネット上に公開するためには 作成したWebページに関連す るすべてのファイルを サーバー上に転送(アップロード)する必要があります このとき ファイルを一つひとつ転送すると手間や時間がかかります そのため ホーム ペ ー ジ ビ ル ダ ー で は ま ず パ ソ コ ン上 に 仮 想 の サ イ ト を作 成 し て から サ ー バー へ まとめて転送します サーバー サイト ごとまとめて転送 パソコン上の サイト 作成者のパソコン - 61 - Web サイト
6-1. サイト を作成しよう サ イ ト を 作 成 す る と Webペ ー ジで 使 わ れ て いる フ ァ イ ルの 構 成 ペー ジ 間 の リン ク など Webページ全体の構造を把握できるようになるため Webサイトの管理が楽になりま す 操作 サイト を作成する ①サイトを作成する前に すべてのページを保存します ②メニューバーから[サイト サイトの新規作成]を選択します ③[サイト新規作成]画面で [サイト名]に任意の名前を入力し 次へ をクリック します ここでは 丁度学園 と入力します 日 本語 入力がオフに なっている場 合は 半角/全角 キーを押して 日本語入力 をオンにしま す サ イト 名は ひらが な 漢字 カ タカナなどを 使って 自由 に付けること ができます ④ [既 存 ペ ー ジ を ト ッ プ ペ ー ジ と し て 使 用 ]を 選 択 し をクリッ クします ⑤[開く]画面で 作成したトップページを選択し 開く をクリックします ここでは justgakuen フォルダの index.html を選択します ⑥ 次へ をクリックします ⑦[転送時に転送設定をする]を選択して 完了 をクリックします - 62 -
ビジュアルサイトビューが表示されます ビ ジ ュ ア ル サ イ ト ビ ュ ー と は 作 成 し た サ イ ト の リ ン ク 構 造 を 視 覚 的 に 表 示 し リン ク の 状 況 や リンクされて いるファイル の名前などを 表示するビュー です アイコンをダブルクリックすると 編集画面になります 編 集画面からビ ジュアルサイ トビューを表 示するには かんたんナビ バー上段の をク リックします - 63 -
OnePoint サイト に新しいページを追加する １ ２ サイト にページを追加するには 次の操作を行います 新しいページを作成してサイトに追加する 追加するページを サイトのトップページ(index.html)が保存されている フォルダに保存する 操作 新しいページを サイト に追加する ①ビジュアルサイトビューで 新しく追加するページとリンクさせ たい 既存ページをクリックして選択します ②ナビメニューから [新規ページの追加]をクリックします ③[新規ページの作成]画面の[新規ページのファイル名]に 新しく 作成するページのファイル名を入力し OK をクリックします ④追加したいページの作成方法を選択し ページを作成します - 64 -
OnePoint サイト に新しいページを追加する 操作 ２ ２ 作成したページを サイト に追加する ①追加するページを サイトのトップページ(index.html)があるフ ォルダに保存します ここでは デスクトップに保存した hpb フォルダのすべてのフ ァイルを justgakuen フォルダに移動します 使用データは P.27 を 参照してください ②追加するページへのリンクを設定します ここでは index.html の 部活動 の文字列に club.html 学校行事 の文字列に festival.html をリンクします ③かんたんナビバーの をクリックします ページが上書き保存されます ④かんたんナビバーの をクリックします ⑤かんたんナビバーの をクリックします ページがサイトに追加されていることを確認します - 65 -
OnePoint サイト 内のファイル名を変更する HTMLファイルや画像ファイルなどのファイル名を変更すると リンク先へジ ャンプできなくなります ファイル名を変更する必要がある場合 次の方法 で変更してください 操作 ファイル名を変更する ①メニューバーから[サイト サイトを開く]を選択して サイトを 開きます ②ページを開いている場合 すべてのページを閉じます ③ビジュアルサイトビューの[フォルダ]タブをクリックします ④[転送対象ファイル]をクリックします ⑤右側の一覧からファイル名を変更したいファイルを選択し ナビ メニューから [ファイル名の変更]を選択します ⑥新しいファイル名を入力し Enter キーを押します ⑦[リンクの自動更新]画面で リンクを自動的に更新したいファイ ルにチェックを入れて OK をクリックします ファイル名が変更されます - 66 -
6-2. サイト を転送しよう サ イ ト 転 送 機 能 を 使う と Webサイ ト に 必 要 なフ ァ イ ル を一 括 し て サー バ ー に 転送 す る こ と が で き ま す ま た Webペ ー ジを 更 新 し た 場合 は 更 新さ れ た フ ァイ ル だ け を転 送 できます 確認 転送準備を行う 事前に サイト の転送設定に必要な情報を確認しておきましょう FTPサーバー名 FTPアカウント FTPパスワード 操作 転送設定を行う ①メニューバーから[サイト 転送設定 転送設定の新規作成]を選択します ②[転送設定の新規作成]画面で [名前]に任意の名前を付け 次へ をクリックし ます 転 送 設 定 の 名 前 は サ イ ト と 同じ 名 前 な ど あ と か ら で も わ か り や す い 名 前 を 付 け るこ と を お 勧 め します ③ [プ ロ バ イ ダ の 選 択 ]の 右 側 の を ク リ ッ ク し て プ ロ バ イ ダ ー を 選 択 し ます 一 覧に 使いたいプロ バイダー名が ない場合は [その他]を選択 します ④[FTPサーバー名] [FTPアカウント名] [FTPパスワード]を選択または入力し 次へ をクリックします 不 明な 場合は プロ バイダーまた はサーバー管 理者にお問い 合わせくださ い ⑤[転送先フォルダ]を入力し 完了 をクリックします プ ロバ イダーによっ ては 空欄の 場合もありま す 操作 転送する 初めての転 送では サイ トを構成する すべてのファ イルが一度に 転送されます 2回目以降 の転送では 前 回転送してか ら更新したフ ァイルだけが 転送されます ①サイトを開いている状態で かんたんナビバー上段の をクリック します ② [サ イ ト の 公 開 ]画 面 で [転 送 設 定 ]の 右 側 の を ク リ ッ ク し て 転 送 設 定を 選 択します ここでは サイト名と同じ名前を選択します ③ 転送 をクリックします イ ン タ ー ネ ッ ト に 接 続 し て い な い 場 合 は 接 続 に 失 敗 し ま し た と い う メ ッ セ ー ジ が 表 示 さ れ ま す メ ッ セー ジ に表 示 され てい る 方法 を 確認 し て 接続 が 完了 す ると ファ イル の 転送 が 始 まります ④ ファイルの転送が完了しました と メ ッ セ ー ジ が 表 示 さ れ た ら 閉 じ る を ク リックします ⑤ブラウザを起動して ブラウザの入力欄にアドレス(URL)を入力し Enter キー を押します 転送したWebサイトが表示されます - 67 -
7.アクセシビリティの診断 (付録) 目や体の不自由な方や高齢者の方を含めた 誰もが見やすいページになっているのかの度 合いを アクセシビリティ といいます 作成したページがアクセシビリティに配慮して い る か ど う か は ホ ー ム ペ ー ジ ビ ルダ ー の 画 面 右下 に 表 示 され る ア クセ シ ビ リ ティ メ ータ (星3つ)で診断できます アクセシビリティメータ 星の数が少ない場合 アクセシビリティメータをクリックすると アクセシビリティ上の 問題点を確認できます 操作 問題点を修正する ①アクセシビリティメータをクリックします ② [ア ク セ シ ビ リ テ ィ チ ェ ッ ク ]画 面 で 修 正 し た い タ グ 名 ま た は 属 性 を 選択 し ます - 68 -
③[修正]の内容を確認し 修正を行います 表 示 さ れ る 項 目 は 修 正 内 容 によ っ て 異なります ④ 適用 をクリックし OK をクリックします ⑤かんたんナビバー上段の ページが上書き保存されます をクリックします ア クセ シ ビ リテ ィチ ェ ック で診 断 す る項 目を 変更 した いとき は メニュ ーバ ーの[ツール ア クセ シビ リテ ィチェック 設定]から設 定を変更しま す - 69 -
MEMO - 70 -
MEMO - 71 -
ホームページ ビルダー16 セミナーテキスト 平成23年12月 制作 発 行所 企 画 編集 2011 福良伴昭 株式会社ジ ャストシステ ム 771-0189 徳島市川内 町平石若松108番地 4 TEL 088-666-1000 株式会社ジ ャストシステ ム 株式会社ジ ャストシステム 本テキストの一部 あるいは全部を無断で複写複製 コピー することはできません 本書に記載された会社名 製品名などは 各社の登録商標もしくは商標 または弊社の商標です ホームページ ビルダー16の操作に関するご質問は 弊社サポートセンターにお問い合わせください - 73 -