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