hpb20cover

Size: px

Start display at page:

Download "hpb20cover"

さなえさわまつ
5 years ago
Views:

1 ホームページビルダーセミナーテキスト (Ver.20 ~ 16 対応 )

3 目次このテキストではホームページビルダーで簡単な Web ページを作るための基本をご紹介します項目セミナー内容 1.Webサイト作成の基礎知識 1-1.Webサイトとは Webサイトとインターネット Webサイトのしくみ作成前に考えておきたいこと Webサイト公開までの流れホームページビルダーの 2-1. ホームページビルダーを起動しよう 12 基本 2-2. ホームページビルダーの画面を確認しようトップページの作成 3-1. トップページを作成しようロゴ ( 飾り文字 ) を挿入しよう文字を入力しよう / 文字サイズ文字色フォントを変更しよう配置を変更しよう画像を挿入しよう写真を挿入しよう水平線を挿入しよう表を挿入しよう Webページを保存しようプレビューで確認しようサブページの作成 4-1. サブページを作成しよう図形を描画しよう Webページを保存してプレビューで確認しようリンクの設定 5-1. リンクを設定しよう 54 6.Webサイトの作成と転送 6-1. サイトを作成しよう 62 ( 付録 ) 6-2. サイトを転送しようアクセシビリティの診断 ( 付録 ) 68 本テキスト内の画面は Windows 7 のものですお使いの環境によっては画面が一部異なる場合があります本テキスト内の画面はホームページビルダー 18 のものですがホームページビルダーおよびでもは概ね同様です

4 1.Web サイト作成の基礎知識 Web サイトを作成するにあたり知っておきたい基礎知識や Web サイト開設の流れを説明しますこれらの概念を理解しておくことで Web サイトの作成がスムーズになります 1-1.Web サイトとは Web サイト ( ホームページ ) とはインターネット上に公開されている企業や団体または個人グループの情報発信 / 収集基地のことですインターネット上には世界中の人々が作った無数の Web サイトが公開されておりインターネットにつながったパソコンから誰もがいつでもどこからでも自由に見ることができますまた自分の Web サイトを作って世界中の人々に情報を公開することもできます Check ホームページという言葉の意味現在ホームページというはさまざまな意味で使われています情報が載っている一つひとつの Web ページ Web ページの集まりである Web サイト各 Web サイトの入り口にあたる最初の 1 ページ ( トップページ ) ブラウザを起動したとき最初に表示される Web ページインターネット上の Web サイトや Web ページの総称混乱を防ぐためこのテキストでは Web サイト Web ページと言い換えて記載しています - 1 -

5 1-2.Web サイトとインターネット Web サイトを閲覧するにはパソコンをインターネットに接続しなければなりません一般的には民間のインターネットサービスプロバイダー ( 以下プロバイダーと記載 ) が提供する接続サービスを利用します利用者は光や ADSL などの通信回線を使ってパソコンをプロバイダーのネットワークに接続しそのプロバイダーのネットワークを経由してインターネットに接続していますインターネットプロバイダーインターネットに接続できる環境が整ったら Internet Explorer などの Web ブラウザを使って Web サイトを閲覧することができます Web サイトを閲覧するには Web ブラウザのアドレス欄に Web サイトの住所にあたる URL を直接入力するか Yahoo! や Google といった検索サービスでキーワードを入力して見たい Web サイトを探し出します - 2 -

6 Check プロバイダープロバイダー ( 正式にはインターネットサービスプロバイダー (ISP) ) はインターネットの接続サービスや Web サイトの開設サービスを提供する会社のことです本テキストではすでにインターネットに接続できていることを前提としているためプロバイダーの加入方法などは説明を省略します Check Web ブラウザ Web ブラウザは Web サイトを閲覧するためのソフトウェアです代表的なものに Windows に標準搭載されている Internet Explorer や Mac OS に搭載されている Safari がありますまたそのほかにも Google Chr ome や Firefox Opera などさまざまな Web ブラウザがあります Check URL Web ブラウザで Web サイトを見るにはのようにアルファベットの文字列を入力しますこれは URL( 正式名称 :Uniform Resource Locator) ( ユーアールエル ) といいます URL は Web サイトの住所のようなものです URL Check 検索サービス代表的な検索サービスとして Yahoo!( ヤフー ) Google( グーグル ) Bing( ビング ) goo( グー ) などがありますこれらの URL をお気に入りに追加しておくとすぐに表示できて便利です - 3 -

7 1-3.Web サイトのしくみ Web サイト作成の前に Web サイトのしくみについて確認しておきましょう確認 Web サイトは Web ページで構成されているほとんどの Web サイトは複数のページから構成されていますたとえば下図の Web サイトはトップメニュースタッフ紹介アクセスの個々のページがひとつのまとまりになっていてそれぞれのページはリンクで結ばれ自由に移動できるようになっていますこれらのページ一つひとつを Web ページといい複数の Web ページが集まったまとまりを Web サイトといいますなお本テキストでは Web サイト内の個々のページを Web ページ Web サイトの入り口にあたるページをトップページそれ以外のページのことをサブページといいます Web サイトねこカフェももの部屋トップトップメニュースタッフ紹介アクセスリンクメニューメニュートップページアイスコーヒーアイスティオレンジジュース XXX 円 XXX 円 XXX 円モモハナスタッフスタッフ紹介紹介アクセスアクセストップへタマココ Web ページトップへトップへサブページ - 4 -

8 確認 Web ページの構成通常ひとつの Web ページはページの土台となる HTML ファイルとそれらを飾る画像ファイルなどの複数の関連ファイルで構成されています Web ページ <HTML ファイル > < 画像ファイル > + Web ページを表示した Web ブラウザ上で右クリックメニューの [ ソースの表示選択すると HTML ファイルの内容を表示することができます 1 ] などを 1 Internet Explorer をご利用の場合 - 5 -

9 確認 HTML ファイルの内容 HTML ファイルは HTML( 正式名称 :HyperText Markup Language) という言語を使って記述します HTML ファイルの中には Web ページに表示させる文章だけではなくそのページの構成がどのようになっていてどこにどのような画像が貼り付けられているかなどが定義されています HTML ファイルの中で <head> <body> のように < > で囲まれている部分をタグとよびます Web ブラウザはタグで指定された文字や画像を 1 枚の Web ページとして表示しますタグ Web ページを作成するためにはこのような複雑なタグを間違いなく記述しなくてはなりませんがこれを利用者に変わって自動的に記述してくれるのがホームページビルダーですホームページビルダーならワープロ感覚で Web ページを作成でき HTML タグの記述も自動的に行われます - 6 -

10 1-4. 作成前に考えておきたいこと良い Web サイトを作るためには単に伝えたい内容を盛り込むだけでなく利用者が直感的に利用できるよう情報を整理する必要があります訪れる人のことを考えた Web サイトの条件を確認しましょう訪れる人のことを考えた Web サイトの条件 1. 目的を明確にする 2. コンテンツ ( 内容中身 ) を整理する 3. わかりやすい構成にする 4. 各ページの情報を整理する 5.Web ページ全体の統一感を保つ 6. 見やすいレイアウト ( 配置配列 ) と配色にする 7. その他の留意点 1. 目的を明確にするこの Web サイトの目的は何かどんな人に見てもらいたいか利用者が知りたい情報は何かなど Web サイトの役割をまず明確にすることが重要ですこのことが Web サイトの構成や見た目のデザインの基本となります 2. コンテンツ ( 内容中身 ) を整理する目的が明確になったらこの Web サイトでどのような情報を伝えるかを検討しますまずは思いつくものをすべて列挙し自分が利用者だったら何が知りたいか同様の Web サイトにはどのような情報があるかなどを調べて整理し自分なりのアイデアを盛り込むとよいでしょう - 7 -

11 3. わかりやすい構成にするいくつかのコンテンツが決まったら Web サイトの構成を検討します利用者がページからページへとたどっていきやすくするためにはまずカテゴリーやメニューで情報を分類することが重要ですまた一つのページに数多くのリンクを設けたり Web サイトの構造を複雑にしすぎたりするのは利用しにくい上管理も煩雑になるので避けましょうカテゴリーやメニューは利用者がすぐに選べるようあまり多くしすぎないこととわかりやすくかつ興味を引く言葉を選ぶことが重要です < 良い例 > 4 良いポイント 1 カテゴリーを用意することでページ全体の構成がわかりやすくなっている新着情報などがハイライトとしてわかりやすく配置されている 3 各カテゴリー内の項目が端的にまとめられている 4 キーワード検索ができるようになっており知りたい情報を探せるようになっている < 悪い例 > 1 2 良くないポイント 1 メニューが羅列されているだけでページ全体の構成がわかりにくい 2 写真の上に文字があり読みづらい 3 イメージ写真にこだわりすぎて肝心の構成や内容がわかりにくい 3-8 -

12 4. 各ページの情報を整理する Web サイトの構成が決まったら見やすさわかりやすさを基準に各ページに載せる情報の項目や量位置を計画しますまずは手書きの線画で検討するとよいでしょうなお大きな画像を多用すると読み込むのに時間がかかり利用者はイライラするため 1 ページのコンテンツが多すぎることのないよう注意しましょう < 良い例 > 良いポイント 1 見やすい情報量にまとめられている 2 タイトルや本文ごとに文字の大きさが整理されている 2 1 < 悪い例 > 良くないポイント 1 長すぎて読みづらい 2 タイトル本文などの文字の大きさが区別されていないためわかりづらい 3 背景一面に濃い色の壁紙が設定されているため文字が読みづらい

13 5.Web サイト全体の統一感を保つ Web サイトは複数の Web ページで構成されているため全体での見た目やボタンの位置などの統一感を保つことが重要ですそのためには各ページを共通のフォーマット ( テンプレート ) に基づいてデザインする必要があります < 良い例 > 良いポイント各 Web ページが同じフォーマットでデザインされているため統一感がある < 悪い例 > 良くないポイント各 Web ページのデザイン配色がバラバラで統一感がない

14 6. 見やすいレイアウト ( 配置配列 ) と配色にするレイアウトは見やすいページかどうかを左右する最も重要な要素です見やすくレイアウトするためには次のような点を心がけるとよいでしょう 1 利用者によって画面のサイズは違うため小さい文字を多用しないなど文字の大きさに気を配る 2 利用者の目線は通常左上から右下に移動するため重要な情報は左上に配置する 3 左揃えか中央揃えかを明確に決める ( 中途半端に混在させない ) 4 グリッド ( 参照線 ) を意識してデザインする 5 見やすさの点で配色は白ベースが基本 6 色は使いすぎない 7 カテゴリーなどは色分けする 7. その他の留意点その他の留意点は以下のとおりです 1 フレーム ( 分割 ) 機能は使わないフレーム機能を使った Web サイトはページ単位で印刷できないブックマークの登録がうまくできない読み上げ機能が使えないなどの問題点があるためお勧めできません 2 随時更新するいつも古い情報では何度も訪問してもらえません情報は随時更新しましょう 3 社会的ルールとマナーを遵守する他人の作ったものを流用したり他人を傷付けたりするような表現は許されません 1-5.Web サイト公開までの流れホームページビルダーでは次の流れで Web サイトを公開します 1.Web ページを作成する 2.Web ページを一つのまとまりとして管理するサイトを作成する 3. サイトをサーバーに転送する

15 2. ホームページビルダーの基本ホームページビルダーを起動する方法や画面構成など基本的なについて解説します 2-1. ホームページビルダーを起動しようホームページビルダーを起動しましょうホームページビルダーを起動する 1 デスクトップ上の [ ホームページビルダー 18] をダブルクリックしますご利用のバージョンによりアイコン末尾のバージョン番号は異なりますホームページビルダー 20( または 19) の場合はホームページビルダー 20( または 19) クラシックをダブルクリックしますデスクトップ上にアイコンが表示されていない場合は Windows のスタートメニューから [ すべてのプログラム - ホームページビルダー 18- ホームページビルダー 18] を選択します 2 ホームページビルダーのメイン画面が表示されますホームページビルダーにはいくつかの作成方法がありますがこのテキストでは Web ページ作成の基本を学ぶため白紙から作成していきます OnePoint Web ページ作成方法ホームページビルダーでは大きく 3 つの方法で Web ページを作成することができます (1) 初めての方お急ぎの方あらかじめ用意されたテーマやサイト構成などを選択し必要事項を入力するだけの簡単なステップで Web ページが作成できます (2) テンプレートから作成するプロがデザインしたテンプレートをもとに必要な部分を修正して Web ページを作成していきます (3) 白紙から作成する白紙から自由に Web ページを作り上げる事ができますこのテキストでは Web ページ作成の基本を学ぶため (3) の白紙から作成する方法で説明していきます

16 2-2. ホームページビルダーの画面を確認しようホームページビルダーを起動すると次のような画面が表示されますここではホームページビルダーのスタンダードスタイルの画面名称と役割を解説します編集スタイルはスタンダードの他にかんたんエディターズが選べます確認ホームページビルダーの画面 ( スタンダード ) メニューバーホームページビルダーのコマンドが分類されたメニューですクリックするとドロップダウンメニューが表示されます 2 かんたんナビバー上下の 2 段がありよく使う機能のボタンが表示されています 3 ツールバーコマンドを実行するときに使いますよく使うコマンドがボタンとして登録されています 5 ステータスバー現在の作業状況や処理手順が表示されます 6 ページ編集領域 Web ページの作成編集領域です作業中は複数のタブが表示されタブを切り替えながら作業できます 7 ビューヘルプを表示したり編集中のページを一覧表示したりするビューが用意されています右端のタブをクリックすると表示するビューを切り替えられます 4 かんたんナビメニュー ( ナビメニュー ) Web ページに文字や画像リンクなどの要素を挿入するためのボタンが用意されています

17 3. トップページの作成ここでは次のようなトップページを作成しましょう < 完成例 > 9 index.html ロゴの挿入 2 文字の挿入 3 文字サイズ文字色フォントの変更 4 配置変更 ( 中央揃え ) 5 画像の挿入 6 写真の挿入 7 水平線の挿入 8 表の挿入 9 ページタイトルの設定

18 3-1. トップページを作成しようトップページは Web ブラウザでページの URL( アドレス ) を入れたときに最初に表示されるページです本でいうと表紙や目次にあたります Web サイトのテーマや内容が明確に伝わるようにしましょうトップページを作成する 1 かんたんナビバー上段のをクリックします 2[ 新規作成 ] 画面でをクリックします標準モードで白紙のページが開きます白紙から作成する編集モードには標準モードとどこでも配置モードがありますこのテキストでは標準モードのを説明します 3-2. ロゴ ( 飾り文字 ) を挿入しようホームページビルダーでは文字列に飾りを付けて画像にしたものをロゴとよびます学校名などの見出しに使うと効果的ですロゴを挿入する 1 ページ編集領域でカーソルが点滅していることを確認します

19 2ナビメニューから [ ロゴ ( 飾り文字 ) の挿入 ] をクリックしを選択します 3[ ロゴの作成 ] 画面で [ 文字 ] に入力したい文字を入力しますここでは丁度学園と入力します 4[ 文字の大きさ ] のスライドバーのつまみをドラッグして文字の大きさを変更しますここでは 30 にします 5 デザインの一覧から好きなデザインを選択し完了をクリックしますここでは [000t10] を選択しますロゴが挿入されの対象になっていることを示すフォーカス枠とよばれる色付きの枠が表示されます文字列やデザインを変更したい場合はロゴの上で右クリックし [ ロゴの編集 ] から変更します

20 3-3. 文字を入力しよう / 文字サイズ文字色フォントを変更しようページ内に文字を入力し文字サイズや文字色フォントを変更しましょうインターネットでは半角カタカナが正しく表示されないことがあります半角カタカナは使わないでください文字を入力する 1 文字を入力したい位置にカーソルを移動します移動したい位置をクリックするかキーボードのキーを押して移動しますここでは丁度学園の 1 行下にカーソルを移動します 2 文字を入力しますここではトップ学校案内部活動学校行事と入力しますを入力するには Shift キーを押しながらキーを押します 3 Shift + Enter を押して新しい段落を作り以下のように入力しますお知らせ OnePoint 改行または改段落する段落の中で改行するには改行したいところにカーソルを移動して Enter キーを押します改段落 ( 新しい段落を作成 ) するには段落を作りたいところにカーソルを移動して Shift キーを押しながら Enter キーを押します OnePoint 元に戻すツールバーのができます [ 元に戻す ] をクリックすると直前のを取り消すこと

21 文字サイズを変更する 1 文字サイズを変更したい文字列をドラッグして選択しますここではお知らせを選択します 2ツールバーの [ 文字サイズ拡大 ] を2 回クリックします 1 回クリックするごとに文字サイズが一段階拡大されます文字サイズを縮小したいときは文字列をドラッグして選択しツールバーの [ 文字サイズ縮小 ] をクリックします 1 回クリックするごとに文字サイズが一段階縮小されます 3 文字列以外の部分をクリックして選択状態を解除します OnePoint 文字サイズの種類文字サイズは 1 ~ 7 までの 7 段階あり標準の文字サイズは 3 です利用者側のブラウザの設定により同じ文字サイズが指定されていても表示されるサイズは若干異なります文字色を変更する 1 文字色を変更したい文字列をドラッグして選択しますここではお知らせを選択します 2ツールバーの [ 文字色の変更 ] の右側にあるをクリックします 3 表示されたカラーパレットから好きな色を選択しますここでは濃い緑色を選択します 4 文字列以外の部分をクリックして選択状態を解除します

22 フォントを変更する 1 フォントを変更したい文字列をドラッグして選択しますここではお知らせを選択します 2ツールバーの [ フォントの変更 ] をクリックします 3[ フォント ] 画面で [ 書体 ] の一覧から好きなフォントを選択し OK をクリックしますここでは MS 明朝を選択します MS 明朝 4 文字列以外の部分をクリックして選択状態を解除します 3-4. 配置を変更しよう Web ページの文字列は初期設定では左端に配置されますが簡単に中央や右端に配置を変更することができます配置を変更する 1 配置を変更したい段落内にカーソルを移動しますここではトップ学校案内部活動学校行事にカーソルを移動します 2ツールバーの [ 中央揃え ] をクリックします文字列が中央に配置されます

23 3-5. 画像を挿入しよう Web ページに貼り付ける画像や音声などのファイルを素材といいますホームページビルダーには豊富な素材が素材集として用意されていますここでは素材集の画像をページ内に配置しましょう素材集から画像ファイルを挿入する 1 画像を挿入したい位置にカーソルを移動しますここでは丁度学園の右側にカーソルを移動します 2 ナビメニューから [ 写真や画像の挿入 ] をクリックしを選択します 3[ 素材集から開く ] 画面で挿入したいファイルを選択し開くをクリックしますここでは [ イラスト - 学校 ] の [img_e063.gif] を選択します 4 挿入された画像ファイルを選択し四隅に表示されたにマウスポインタを合わせポインタの形がになったらドラッグして大きさを調整します 5 画像以外の部分をクリックして選択状態を解除します

24 3-6. 写真を挿入しようページ内に写真を挿入するときは写真挿入ウィザードを使うと簡単に写真の大きさを変更したり加工したりすることができて便利です写真を挿入する 1 画像を挿入したい位置にカーソルを移動しますここではトップ学校案内部活動学校行事の 1 行下にカーソルを移動します 2ナビメニューから [ 写真や画像の挿入 ] をクリックしを選択します 3[ 写真挿入ウィザード ( 画像ファイルの指定 )] 画面で [ 画像の指定 ] から挿入したい画像を指定しますここではをクリックします 4[ 素材集から開く ] 画面で挿入したいファイルを選択し開くをクリックしますここでは [ 写真 - 建物 ] の [pic_d018.jpg] を選択します 5[ プレビュー ] に表示された写真を確認し次へをクリックします 6[ サイズの指定 ] で画像の大きさを選択し次へをクリックしますここでは [ 中 ( 横幅 320 ピクセル )] を選択します 7 必要に応じて画像の明るさや色合いの自動補正を選択し次へをクリックしますここでは何もチェックしません

25 8 必要に応じて文字を重ねたりスタンプを押す設定を選択し次へをクリックしますここでは [ 縁取り効果をつける ] にチェックを付けます 9[ 縁取り効果の選択 ] から適用したい効果を選択し完了をクリックしますここでは [frame_f_005] を選択します 10 挿入された写真を選択しツールバーの画像が中央に配置されます [ 中央揃え ] をクリックします 11 必要に応じて挿入された写真を選択し四隅に表示されたにマウスポインタを合わせポインタの形がになったらドラッグして大きさを調整します 12 写真以外の部分をクリックして選択状態を解除します OnePoint 画像を圧縮する画像の四隅のをドラッグして大きさを変更すると見た目の大きさのみが変更されます表示サイズを変更した場合は表示サイズに合わせてサイズ容量も小さく圧縮しておきましょう画像を圧縮する 1 大きさを変更した画像を選択します 2 画像の上で右クリックし [ 画像を編集 - 画像の編集 ] を選択します 3[ 画像の編集 ] 画面で [ 表示サイズで保存 ] にチェックを入れ OK をクリックします

26 OnePoint 画像に代替テキストを設定する代替テキストとは画像の代わりに表示される文字のことです目の不自由な方が Web ページから情報を得ようとする場合音声読み上げソフトなどを利用します読み上げの対象は文字であるため画像は読み上げることができませんが代替テキストは読み上げの対象になります画像を挿入したら代替テキストを設定しておきましょう代替テキストの設定 1 画像をクリックして選択します 2ツールバーの [ 属性の変更 ] をクリックします 3[ 属性 ] 画面で [ 代替テキスト ] に画像の説明を入力し OK をクリックします通常画像が表示されている状態では画面上で代替テキストは表示されません

27 3-7. 水平線を挿入しよう見栄えを良くしページ全体のレイアウトを引き締めるために水平線を入れましょう水平線を挿入する 1 水平線を挿入したい位置にカーソルを移動しますここでは挿入した写真の 1 行下にカーソルを移動します 2 ナビメニューから [ レイアウト部品の挿入 ] をクリックしを選択します 3[ 水平線の挿入 ] 画面で [ 水平線のサイズ ] を以下のように設定し OK をクリックします水平線が挿入されます水平線の太さや幅を変更したい場合は水平線の上で右クリックし [ 属性の変更 ] から設定を変更します

28 3-8. 表を挿入しよう表の中に文字を配置するとわかりやすくレイアウトすることができます表を挿入する 1 表を挿入したい位置にカーソルを移動しますここではお知らせの 1 行下にカーソルを移動します 2ナビメニューから [ 表の挿入 ] を選択します 3[ 表の挿入 ] 画面で [ 表のサイズ ] を以下のように設定し OK をクリックします表が挿入されます 4 セル内をクリックして文字を入力しますここでは以下のとおり入力します Tab キーを押すと次のセルにカーソルがジャンプします 2012 年 12 月美術部のページを更新しました (12/1) 2012 年 11 月文化祭の写真をアップしました (11/25)

29 OnePoint 列幅や行の高さを調整する作成した表の列幅や行の高さはあとから広げたり狭めたりすることができます列幅や行の高さを調整する 1 列幅や行の高さを調整したいセルを選択します 2 周囲に表示されたにマウスポインタを合わせてポインタの形がやになったらドラッグしますセルの幅や高さが変わります OnePoint 列や行を追加する選択したセルの右側または左側に列を追加したり上側または下側に行を追加することができます列を追加する 1 列を追加したい場所の右か左のセルを選択します 2 セルの右側に列を追加する場合はメニューバーから [ 表 - 列の追加 - 右へ 1 列追加 ] を選択しますセルの左側に列を追加する場合はメニューバーから [ 表 - 列の追加 - 左へ 1 列追加 ] を選択します行を追加する 1 行を追加したい場所の上か下のセルを選択します 2 セルの上側に行を追加する場合はメニューバーから [ 表 - 行の追加 - 上へ 1 行追加 ] を選択しますセルの下側に行を追加する場合はメニューバーから [ 表 - 行の追加 - 下へ 1 行追加 ] を選択します

30 OnePoint セルを結合する横または縦に隣り合った複数のセルをまとめて一つのセルに結合することができます横のセルを結合縦のセルを結合上記の club.html データは以下からダウンロードすることができますここではあらかじめ hpb.zip を解凍しデスクトップに保存してを進めますページを開く 1 メニューバーから [ ファイル - 開く ] を選択します 2[ 開く ] 画面で [ ファイルの場所 ] と [ ファイル名 ] を選択し開くをクリックしますここではデスクトップに保存した [hpb] フォルダの club.html を選択しますセルを結合する 1 結合したい複数のセルをドラッグして選択します 2 メニューバーから [ 表 - 選択セルの結合 ] を選択します選択したセルが結合されます結合を取り消すにはセルを選択後ツールバーの [ 属性の変更 ] をクリックし [ セル ] タブの [ セルの結合 ] に入っている数字を削除します上書き保存してページを閉じる 1かんたんナビバー上段のページが上書き保存されます 2 かんたんナビバー上段のをクリックしますをクリックします 3[ 閉じる ] 画面でをクリックします画面が閉じます

31 StepUp 表を利用してページをレイアウトする 1/3 表をうまく利用すると文章を 2 段組みにしたり画像を並べ替えて表示するなど自由なレイアウトでページを作成できます実際にページを作成する前にまずページに入れる素材を用意しそれらをどのように配置したいかデッサン紙などに描いて計画しましょう例 ) タイトル ( ロゴ ) 文章写真写真説明説明ページのレイアウトをデッサンするレイアウトを実現する表組みを考える表を利用してレイアウトする 1 表を挿入したい位置にカーソルを移動します 2ナビメニューから [ 表の挿入 ] を選択します 3[ 表の挿入 ] 画面で [ 表のサイズ ] から行数列数を設定します

32 StepUp 表を利用してページをレイアウトする 2/3 表を利用してレイアウトする 4[ 表の属性 ] の [ 表の枠を表示する ] のチェックを外し OK をクリックします枠組みが点線になった表が挿入されます 5 各セル内をクリックして文字を入力したり画像を挿入したりしますプレビューやブラウザで見ると表の枠が非表示になります

33 3-9.Web ページを保存しようページが完成したら index という名前に変更して保存しましょうページを保存する 1 メニューバーの [ ファイル - 名前を付けて保存 ] をクリックします 2[ 名前を付けて保存 ] 画面で保存する場所を選択しますここでは [ 保存する場所 ] のをクリックして [ デスクトップ ] を選択し [ 新しいフォルダーの作成 ] をクリックします 3 新しいフォルダーの文字列を削除して justgakuen と入力し作成したフォルダをダブルクリックします 4[ ファイル名 ] を index に変更し [ ファイルの種類 ] が HTMLファイルになっていることを確認して保存をクリックします justgakuen index HTML ファイルフォルダやファイルの名前には必ず半角の英数字を使ってください全角英数文字日本語全角 / 半角のスペース!? などの記号は使えませんサーバーの OS によっては大文字と小文字が区別されるので小文字で統一することをお勧めしますトップページのファイル名は index が一般的です 5[ 素材ファイルをコピーして保存 ] 画面でページに挿入した画像などの素材ファイルの保存先を指定し保存をクリックしますここでは何も変更しません (HTML ファイルと同じフォルダのままにします ) 素材ファイルの保存先を変更する場合は参照をクリックします

34 6[ 再編集用フォルダについて ] 画面が表示されたら閉じるをクリックしますページが保存されタイトルバーの表示が index.html- 無題 < 標準モード > に変わりますページにタイトルを付けるタイトルは Web ブラウザで [ お気に入り ] や [ ブックマーク ] に登録するときに利用されます必ず設定しましょう 1かんたんナビバー下段のをクリックします 2[ 属性 ] 画面で [ ページタイトル ] にページのタイトルを入力し OK をクリックしますここでは丁度学園トップページと入力しますタイトルが設定されホームページビルダーのタイトルバーに表示されます

35 3-10. プレビューで確認しよう [ プレビュー ] タブを利用すると Web ブラウザを起動せずに Web ブラウザでの見え方や動きを確認することができますプレビューで確認する 1 ページ編集領域の [ プレビュー ] タブをクリックします 2 ページのプレビューが表示されるため見え方を確認します [ プレビュー ] タブでは編集はできません 3 ページ編集領域の [ ページ編集 ] タブをクリックします編集画面に戻ります

36 StepUp HTML ソースを直接編集するページ編集領域の [HTML ソース ] タブまたは [ ページ / ソース ] タブを利用すると HTML ソースを直接編集することができます [ ページ / ソース ] タブではページ編集画面と HTML ソース画面の両方を同時に利用することができます

37 4. サブページの作成サブページを作成しましょうここでは次のような地図入りの学校案内ページを作成します information.html < 完成例 > ロゴの挿入 2 トップページからのコピー貼り付け 3 ウェブアートデザイナーで地図作成貼り付け

38 4-1. サブページを作成しようサブページを作成しましょうトップページと同じ項目はトップページからコピーして利用すると効率良く作業ができます新規ページを作成する 1 かんたんナビバー上段のをクリックします 2[ 新規作成 ] 画面でをクリックします [ 標準モード ] で白紙のページが開きますロゴを挿入する 1 ページ編集領域でカーソルが点滅していることを確認します 2ナビメニューから [ ロゴ ( 飾り文字 ) の挿入 ] をクリックしを選択します 3[ ロゴの作成 ] 画面で [ 文字 ] に入力したい文字を入力しますここでは学校案内と入力します 4[ 文字の大きさ ] のスライドバーのつまみをドラッグして文字の大きさを変更しますここでは 22 にします 5デザインの一覧から好きなデザインを選択し完了をクリックしますここではロゴが挿入されます [000t02] を選択します文字列やデザインを変更したい場合はロゴの上で右クリックし [ ロゴの編集 ] から変更します

39 ページの項目をコピーして利用する 1 画面右側の [ ページ一覧 ] タブをクリックします 2[ 編集中のページ ] に表示された index.html をクリックしますページ編集領域に index.html の内容が表示されます 3 index.html のトップ学校案内部活動学校行事をドラッグして選択します 4ツールバーの [ コピー ] をクリックします 5[ 編集中のページ ] の newpage2.html をクリックして学校案内のロゴの 1 行下にカーソルを移動します 6ツールバーの [ 貼り付け ] をクリックしますコピーした文字列が貼り付きます

ページを保存する 1 メニューバーから [ ファイル - 名前を付けて保存 ] をクリックします 2[ 名前を付けて保存 ] 画面で保存する場所やファイル名を設定して保存をクリックしますここでは [ 保存する場所 ] を justgakuen [ ファイル名 ] を information ファイルの種類を HTML ファイルに設定します justgakuen information

40 ページを保存する 1 メニューバーから [ ファイル - 名前を付けて保存 ] をクリックします 2[ 名前を付けて保存 ] 画面で保存する場所やファイル名を設定して保存をクリックしますここでは [ 保存する場所 ] を justgakuen [ ファイル名 ] を information ファイルの種類を HTML ファイルに設定します justgakuen information HTML ファイルフォルダやファイルの名前には必ず半角の英数字を使ってください全角英数文字日本語全角 / 半角のスペース!? などの記号は使えませんサーバーの OS によっては大文字と小文字が区別されるので小文字で統一することをお勧めします 3[ 素材ファイルをコピーして保存 ] 画面でページに挿入した画像などの素材ファイルの保存先を指定し保存をクリックしますここでは何も変更しません (HTML ファイルと同じフォルダのままにします ) 素材ファイルの保存先を変更する場合は参照をクリックします 4[ 再編集用フォルダについて ] 画面が表示されたら閉じるをクリックします

41 ページが保存されタイトルバーの表示が [information.html- 無題 < 標準モード >] に変わりますページにタイトルを付けるタイトルは Web ブラウザで [ お気に入り ] や [ ブックマーク ] に登録するときに利用されます必ず設定しましょう 1かんたんナビバーのをクリックします 2[ 属性 ] 画面で [ ページタイトル ] にページのタイトルを入力し OK をクリックしますここでは丁度学園学校案内と入力しますタイトルが設定されホームページビルダーのタイトルバーに表示されます

42 4-2. 図形を描画しようホームページビルダーに付属している画像作成プログラムウェブアートデザイナーを使うとロゴやボタン簡単な図形や地図などを作成して Web ページに入れることができますここではウェブアートデザイナーを使って地図を作成しましょう確認ウェブアートデザイナーを起動する 1 地図を挿入したい位置にカーソルを移動しますここではトップ学校案内部活動学校行事の 1 行下にカーソルを移動します 2 メニューバーから [ ツール - ウェブアートデザイナーの起動 ] を選択しますウェブアートデザイナーが起動しますウェブアートデザイナーの画面メニューバーウェブアートデザイナーのコマンドが分類されたメニューですクリックするとドロップダウンメニューが表示されます 2 ツールバーコマンドを実行するときに使いますよく使うコマンドがボタンとして登録されています 3 テンプレートギャラリー素材を貼り付けるときに使います [ ウェブアート素材 ] タブとホームページビルダー本体と共通の [ 素材 ] タブがありますステータスバー現在の作業状況や処理手順が表示されます 5 ツールバー図形を作成したり編集したりするためのツールバーです 6 キャンバス編集作業領域です 7 オブジェクトスタックオブジェクト ( 図形や素材 ) の前後関係を表示するパネルですここにはオブジェクトのサムネイルが表示されますキャンバスで一番後ろのオブジェクトが一番下に表示されます

OnePoint 線を引く目安を表示するメニューバーから [ 表示 - グリッドの表示 ] を選択するとキャンバスに線を引くときの目安となる参照線が表示されますグリッドの色や形状を変更したいときはメニューバーの [ ファイル - 環境設定 ] を選択し [ 環境設定 ] 画面の [ 表示 ] タブで [ グリッド ] から設定を変更します直線で道路を描く 1 ツールバーの [ 直線 ]

43 OnePoint 線を引く目安を表示するメニューバーから [ 表示 - グリッドの表示 ] を選択するとキャンバスに線を引くときの目安となる参照線が表示されますグリッドの色や形状を変更したいときはメニューバーの [ ファイル - 環境設定 ] を選択し [ 環境設定 ] 画面の [ 表示 ] タブで [ グリッド ] から設定を変更します直線で道路を描く 1 ツールバーの [ 直線 ] をクリックします 2[ 線の太さ ] のをクリックして線の太さを選択しますここでは 6ピクセルを選択します 3[ 前景色 ] をクリックします 4[ 色の設定 ] 画面で以下の色を選択し OK をクリックします濃いグレー 5 線の開始位置でマウスの左ボタンを押し終点までドラッグします Shift キーを押しながらドラッグすると水平 ( 垂直 ) 方向または斜め 45 度の線を引くことができます 6 何もない場所をクリックして選択状態を解除します

Try 下図のように [ 直線 ] で横線や縦線斜めの線を描画しましょう折れ線で道路を描く 1 ツールバーの [ 折れ線 ] をクリックします 2 必要に応じて線の色線の種類線の太さを選択しますここでは直線と同じ設定にします 3 線の開始位置でクリックし Shiftキーを押しながら線が折れる部分でクリックします 4

44 Try 下図のように [ 直線 ] で横線や縦線斜めの線を描画しましょう折れ線で道路を描く 1 ツールバーの [ 折れ線 ] をクリックします 2 必要に応じて線の色線の種類線の太さを選択しますここでは直線と同じ設定にします 3 線の開始位置でクリックし Shiftキーを押しながら線が折れる部分でクリックします 4 終点位置でダブルクリックします Shift キーを押しながらクリッククリックダブルクリック 5 何もない場所をクリックして選択状態を解除します曲線で川を描く 1 ツールバーの [ 曲線 ( スムーズ )] をクリックします 2[ 線の太さ ] のをクリックして線の太さを選択しますここでは任意を選択しその下で 20 と設定します

45 3[ 前景色 ] をクリックします 4[ 色の設定 ] 画面で以下の色を選択し OK をクリックします青 5 線の開始位置でマウスの左ボタンを押しドラッグしながら自由に曲線を描きます 6 何もない場所をクリックして選択状態を解除します矢印で線路を描く 1 ツールバーの [ 直線 ] をクリックします 2[ 線の種類 ] のをクリックして線の種類を選択しますここでは以下の点線を選択します

46 3[ 線の太さ ] のをクリックして線の太さを選択しますここでは 6 ピクセルを選択します 4[ 始点と終点の形状 ] のをクリックして始点と終点の形状を選択しますここでは以下の矢印を選択します 5[ 前景色 ] をクリックします 6[ 色の設定 ] 画面で以下の色を選択し OK をクリックします黒

47 7 線の開始位置でマウスの左ボタンを押し終点までドラッグします Shift キーを押しながらドラッグすると水平 ( 垂直 ) 方向または斜め 45 度の線を引くことができます 8 何もない場所をクリックして選択状態を解除しますオブジェクトの上下を入れ替える 1 オブジェクトスタックで川のオブジェクトを選択し一番下にドラッグします道路と川のオブジェクトの上下が正しく入れ替わります 2 何もない場所をクリックして選択状態を解除します図形を描く 1 ツールバーの [ 楕円形円 ] の右側のをクリックして [ 楕円形円 ( 塗り潰しのみ )] を選択します

48 2[ 背景色 ] をクリックします 3[ 色の設定 ] 画面で以下の色を選択し OK をクリックします赤 4 キャンバス上でドラッグして小さな円を描きます Shift キーを押しながらドラッグすると正円を描くことができます 5 何もない場所をクリックして選択状態を解除します

49 イラストを挿入する 1 テンプレートギャラリーの [ ウェブアート素材 ] タブから [ 図形 ] ボタンを選択しフォルダ一覧から [ 地図 ] を選択します 2 挿入したいイラストを選択し [ 挿入 ] をクリックしますここでは [map022] を選択します 3 挿入されたイラストを選択し四隅に表示されているのうち右上を除くにマウスポインタを合わせてポインタの形がになったらドラッグして大きさを調整します Shift キーを押しながらドラッグすると縦と横の比率を保ったまま大きさを変更することができますドラッグ

4 イラストをドラッグして配置したい位置まで移動します 5 イラスト以外の部分をクリックして

表示された右上のにマウスポインタを合わせポインタの形がになったらドラッグします左上にドラッグ

文字の色を変更しますここでは黒のままにします 3キャンバス上の文字を入力したい位置でクリックし

全角キーを押して日本語入力をオンにします 4ESC キーを押して文字入力を終了します 5

50 4 イラストをドラッグして配置したい位置まで移動します 5 イラスト以外の部分をクリックして選択状態を解除します OnePoint イラストの回転イラストを回転するには回転したいイラストを選択し表示された右上のにマウスポインタを合わせポインタの形がになったらドラッグします左上にドラッグ文字を入力する 1 ツールバーの [ 文字 ] をクリックします 2 必要に応じて [ 前景色 ] をクリックし文字の色を変更しますここでは黒のままにします 3キャンバス上の文字を入力したい位置でクリックし文字を入力しますここでは丁度学園と入力します日本語入力がオフになっている場合は半角 / 全角キーを押して日本語入力をオンにします 4ESC キーを押して文字入力を終了します 5 何もない場所をクリックして選択状態を解除します文字のフォントや大きさを変更したいときは文字枠の上でダブルクリックし表示される [ ロゴの編集 ] 画面から設定を変更します

51 Try 下図のようにイラストを挿入したり文字を入力したりしましょう作成した画像を保存する 1 メニューバーから [ ファイル - 名前を付けてキャンバスを保存 ] を選択します 2[ 名前を付けてキャンバスを保存 ] 画面で保存する場所やファイル名を設定して保存をクリックしますここでは [ 保存する場所 ] を justgakuen [ ファイル名 ] を map [ ファイルの種類 ] を [ ウェブアートファイル ] に設定しますウェブアートデザイナーで再編集できる形式で保存されます

52 画像を Web ページに貼り付ける 1 メニューバーから [ 編集 - すべて選択 ] を選択します描いた図形や文字枠などがすべて選択されます 2 メニューバーから [ ファイル -Web 用保存ウィザード ] を選択します 3[Web 用保存ウィザード ] 画面で保存の対象を選択し次へをクリックしますここでは [ 選択されたオブジェクトを保存する ] を選択します 4 保存形式を選択し次へをクリックしますここでは GIF を選択します 5 ファイルサイズなどの内容を確認し次へをクリックしますここでは何も変更しません 6 保存方法を選択し完成をクリックしますここでは [ ホームページビルダーに貼り付け ] を選択します

53 ホームページビルダーで編集中のページに画像が貼り付きますウェブアートデザイナーを終了する 1 タスクバーに最小化されている [ ウェブアートデザイナー ] をクリックします OS によって表示が異なります画面は Windows 7 のタスクバーですウェブアートデザイナーの画面が前面に表示されます 2 ウェブアートデザイナーのメニューバーから [ ファイル - アプリケーションの終了 ] を選択しますウェブアートデザイナーが終了します

54 4-3.Web ページを保存してプレビューで確認しようページが完成したら上書き保存してプレビューで確認しましょうページを上書き保存する 1かんたんナビバー上段のをクリックします 2[ 素材ファイルをコピーして保存 ] 画面でページに挿入した画像などの素材ファイルの保存先を指定し保存をクリックしますここでは何も変更しません (HTMLファイルと同じフォルダのままにします ) 素材ファイルの保存先を変更する場合は参照をクリックします 3[ 再編集用フォルダについて ] 画面が表示されたら閉じるをクリックしますページが上書き保存されますプレビューで確認する 1 ページ編集領域の [ プレビュー ] タブをクリックします

55 2 ページのプレビューが表示されるため見え方を確認します [ プレビュー ] タブでは編集はできません 3 ページ編集領域の [ ページ編集 ] タブをクリックします編集画面に戻ります

56 5. リンクの設定リンクとはページ内の特定の文字列や画像をクリックすると別の場所へジャンプするしくみですトップページとサブページ間を行き来できるようにリンクを設定しましょう < 完成例 > index.html リンクの設定学校案内をクリックすると information.html ページへジャンプ information.html

57 5-1. リンクを設定しよう特定の文字列をクリックすると別のページにジャンプするリンクを設定しましょうジャンプする起点をリンク元ジャンプする先をリンク先といいますリンクを設定する 1 画面右側のックします [ ページ一覧 ] タブで [ 編集中のページ ] の index.html をクリ 2 リンクを設定したい文字列をドラッグして選択しますここでは学校案内を選択します 3 ナビメニューから [ リンクの挿入 ] をクリックします 4[ リンク作成ウィザード ] 画面で [ ページやURLへのリンクを作成する ] を選択して次へをクリックします 5[ リンク作成ウィザード ( 文字列画像ファイルの設定 )] 画面で次へをクリックします 6[ リンク作成ウィザード ( ページやURLへのリンク作成 )] 画面で [ リンク先 (URL ファイル名 )] のをクリックし [ ファイルから ] を選択します 7[ 開く ] 画面でリンク先のファイルを選択し開くをクリックします

58 ここでは justgakuen フォルダの information.html を選択します 8 必要に応じて [ ターゲット ] の右側のをクリックしてリンク先をどのように表示するかを選択しますここでは同一ウィンドウに表示するため何も選択しませんたとえば新しいウィンドウを選択するとリンク先のページを新しい ( 別の ) ウィンドウで表示します 9 完了をクリックします選択した文字列の色が変わり下線が引かれます 10 何もない場所をクリックして選択状態を解除します 11かんたんナビバー上段のページが上書き保存されますをクリックします

59 リンクの設定を確認する 1 ページ編集領域の [ プレビュー ] タブをクリックします 2 ページのプレビューが表示されるため見え方や動きを確認しますここではリンク元の文字列学校案内をクリックしますリンク先のページが開きます左向きの矢印をクリックすると前に表示していたページに戻ります 3 ページ編集領域の [ ページ編集 ] タブをクリックします編集画面に戻ります

60 Try information.html ページのトップの文字列に index.html ページへのリンクを設定し上書き保存しましょう OnePoint リンクの設定を解除するリンクの設定を解除するにはリンクを設定した文字列または画像にカーソルを移動しかんたんナビバーのをクリックして [ リンクの解除 ] を選択します

61 OnePoint 同じページ内または他の Web サイトへのリンク 1/3 リンクはページ間だけではなく同じページ内の別の場所や他の Web サイトにジャンプするように設定することもできます同じページ内の別の場所にリンクを設定するにはリンク先にしたい文字列や画像に目印となるラベルを付けそのラベルをリンク先として設定しますページが長くなりスクロールしないと読めない場合に利用すると便利ですクリックすると該当個所へジャンプ使用データは P.27 を参照してください

62 OnePoint 同じページ内または他の Web サイトへのリンク 2/3 リンク先にラベルを付ける 1 リンク先の文字列または画像を選択しますここでは以下のサッカー部の文字列を選択しますリンク先 2 ナビメニューから [ リンクの挿入 ] をクリックします 3[ リンク作成ウィザード ] 画面で [ ラベルを作成する ] を選択し次へをクリックします 4[ リンク作成ウィザード ( ラベルを作成する )] 画面で [ ラベルを付ける ] を選択し次へをクリックします 5[ リンク作成ウィザード ( ラベルを付ける )] 画面で [ ラベル ] に名前を入力し完了をクリックしますここでは soccer と入力しますラベルの名前は半角の英数字を使用します選択した文字列の色が変わり破線の下線が引かれます 6 何もない場所をクリックして選択状態を解除します

63 OnePoint 同じページ内または他の Web サイトへのリンク 3/3 リンクを設定する 1 リンク元の文字列または画像を選択しますここでは以下のサッカー部の文字列を選択しますリンク元 2 ナビメニューから [ リンクの挿入 ] をクリックします 3[ リンク作成ウィザード ] 画面で [ ラベルを作成する ] を選択し次へをクリックします他の Web サイトへリンクを設定したい場合は [ ページや URL へのリンクを作成する ] を選択し画面の指示通りに進みます 4[ リンク作成ウィザード ( ラベルを作成する )] 画面で [ ラベルへのリンクを作成する ] を選択し次へをクリックします 5[ リンク作成ウィザード ( ラベルへのリンクを作成する )] 画面で [ ラベル ] のをクリックしてリンク先のラベル名を選択し完了をクリックしますここでは soccer を選択します選択した文字列の色が変わり下線が引かれます 6 何もない場所をクリックして選択状態を解除します 7 ページ編集領域の [ プレビュー ] タブをクリックしリンクの設定を確認します

64 6.Web サイトの作成と転送 ( 付録 ) 作成した Web ページをインターネット上に公開するためには作成した Web ページに関連するすべてのファイルをサーバー上に転送 ( アップロード ) する必要がありますこのときファイルを一つひとつ転送すると手間や時間がかかりますそのためホームページビルダーではまずパソコン上にサイトというまとまりを作成してからサーバーへまとめて転送しますサーバーサイトごとまとめて転送 Web サイトパソコン上のサイト作成者のパソコン

65 6-1. サイトを作成しようサイトを作成すると Web ページで使われているファイルの構成ページ間のリンクなど Web ページ全体の構造を把握できるようになるため Web サイトの管理が楽になりますサイトを作成する 1 サイトを作成する前にすべてのページを保存します 2 メニューバーから [ サイト - サイトの新規作成 ] を選択します 3[ サイト新規作成 ] 画面で [ サイト名 ] に任意の名前を入力し次へをクリックしますここでは丁度学園と入力します日本語入力がオフになっている場合は半角 / 全角キーを押して日本語入力をオンにしますサイト名はひらがな漢字カタカナなどを使って自由に付けることができます 4 [ 既存ページをトップページとして使用 ] を選択しをクリックします 5[ 開く ] 画面で作成したトップページを選択し開くをクリックしますここでは justgakuen フォルダの index.html を選択します 6 次へをクリックします 7[ 転送時に転送設定をする ] を選択して完了をクリックします

66 ビジュアルサイトビューが表示されますビジュアルサイトビューとは作成したサイトのリンク構造を視覚的に表示しリンクの状況やリンクされているファイルの名前などを表示するビューですアイコンをダブルクリックすると編集画面になります編集画面からビジュアルサイトビューを表示するにはかんたんナビバー上段のをクリックします

67 OnePoint サイトに新しいページを追加する 1/2 サイトにページを追加するには次のを行います新しいページを作成してサイトに追加する追加するページをサイトのトップページ (index.html) が保存されているフォルダに保存する新しいページをサイトに追加する 1 ビジュアルサイトビューで既存のページをクリックして選択しますここで選択されたページに新しく追加するページのリンクができます 2ナビメニューから [ 新規ページの追加 ] をクリックします 3[ 新規ページの作成 ] 画面の [ 新規ページのファイル名 ] に新しく作成するページのファイル名を入力し OK をクリックします 4 追加したいページの作成方法を選択しページを作成します

68 OnePoint サイトに新しいページを追加する 2/2 作成したページをサイトに追加する 1 追加するページをサイトのトップページ (index.html) があるフォルダに保存しますここではデスクトップに保存した hpb フォルダのすべてのファイルを justgakuen フォルダに移動します使用データは P.27 を参照してください 2 追加するページへのリンクを設定しますここでは index.html の部活動の文字列に club.html 学校行事の文字列に festival.html をリンクします 3かんたんナビバーのをクリックしますページが上書き保存されます 4 かんたんナビバーのをクリックします 5かんたんナビバーのをクリックしますページがサイトに追加されていることを確認します

69 OnePoint サイト内のファイル名を変更する HTML ファイルや画像ファイルなどのファイル名を変更するとリンク先へジャンプできなくなりますファイル名を変更する必要がある場合次の方法で変更してくださいファイル名を変更する 1 メニューバーから [ サイト - サイトを開く ] を選択してサイトを開きます 2 ページを開いている場合すべてのページを閉じます 3 ビジュアルサイトビューの [ フォルダ ] タブをクリックします 4[ 転送対象ファイル ] をクリックします 5 右側の一覧からファイル名を変更したいファイルを選択しナビメニューから [ ファイル名の変更 ] を選択します 6 新しいファイル名を入力し Enter キーを押します 7[ リンクの自動更新 ] 画面でリンクを自動的に更新したいファイルにチェックを入れて OK をクリックしますファイル名が変更されます

70 6-2. サイトを転送しようサイト転送機能を使うと Web サイトに必要なファイルを一括してサーバーに転送することができますまた Web ページを更新した場合は更新されたファイルだけを転送できます確認転送準備を行う事前にサイトの転送設定に必要な情報を確認しておきましょう FTP サーバー名 FTP アカウント FTP パスワード転送設定を行う 1 メニューバーから [ サイト - 転送設定 - 転送設定の新規作成 ] を選択します 2[ 転送設定の新規作成 ] 画面で [ 名前 ] に任意の名前を付け次へをクリックします転送設定の名前はサイトと同じ名前などあとからでもわかりやすい名前を付けることをお勧めします 3[ プロバイダの選択 ] の右側のをクリックしてプロバイダーを選択します一覧に使いたいプロバイダー名がない場合は [ その他 ] を選択します 4[FTP サーバー名 ] [FTP アカウント名 ] [FTP パスワード ] を選択または入力し次へをクリックします不明な場合はプロバイダーまたはサーバー管理者にお問い合わせください 5[ 転送先フォルダ ] を入力し完了をクリックしますプロバイダーによっては空欄の場合もあります転送する初めての転送ではサイトを構成するすべてのファイルが一度に転送されます 2 回目以降の転送では前回転送してから更新したファイルだけが転送されます 1サイトを開いている状態でかんたんナビバー上段のをクリックします 2[ サイトの公開 ] 画面で [ 転送設定 ] の右側のをクリックして転送設定を選択しますここではサイト名と同じ名前を選択します 3 転送をクリックしますインターネットに接続していない場合は接続に失敗しましたというメッセージが表示されますメッセージに表示されている方法を確認して接続が完了するとファイルの転送が始まります 4 ファイルの転送が完了しましたとメッセージが表示されたら閉じるをクリックします 5 ブラウザを起動してブラウザの入力欄にアドレス (URL) を入力し Enter キーを押します転送した Web サイトが表示されます

71 7. アクセシビリティの診断 ( 付録 ) 目や体の不自由な方や高齢者の方を含めた誰もが見やすいページになっているのかの度合いをアクセシビリティといいます作成したページがアクセシビリティに配慮しているかどうかはホームページビルダーの画面右下に表示されるアクセシビリティメータ ( 星 3 つ ) で診断できますアクセシビリティメータ星の数が少ない場合アクセシビリティメータをクリックするとアクセシビリティ上の問題点を確認できます問題点を修正する 1 アクセシビリティメータをクリックします 2[ アクセシビリティチェック ] 画面で修正したいタグ名または属性を選択します

72 3[ 修正 ] の内容を確認し修正を行います表示される項目は修正内容によって異なります 4 適用をクリックし OK をクリックします 5かんたんナビバー上段のをクリックしますページが上書き保存されますアクセシビリティチェックで診断する項目を変更したいときはメニューバーの [ ツール - アクセシビリティチェック - 設定 ] から設定を変更します

73 MEMO

74 MEMO

75 - 72 -

76 ホームページビルダーセミナーテキスト (Ver.20 ~ 16 対応 ) 平成 27 年 10 月制作発行所企画編集福良伴昭株式会社ジャストシステム東京都新宿区西新宿住友不動産新宿オークタワー株式会社ジャストシステム TSG インストラクタセンター 2015 株式会社ジャストシステム本テキストの一部あるいは全部を無断で複写複製 ( コピー ) することはできません本書に記載された会社名製品名などは各社の登録商標もしくは商標または弊社の商標ですホームページビルダーのに関するご質問は弊社サポートセンターにお問い合わせください

スライド 1

スライド 1 ホームページ作成 ~ ホームページビルダーを使って ~ 1. ホームページビルダーを開く 1デスクトップにあるホームページビルダーのアイコンをダブルクリックして起動する 1 1 2 3 4 1 メニューバー 2 かんたんナビバー 3 ツールバー 4 ナビメニュー 2 2 一度サイトを作成した後はサイトを開くリックすることによりサイトを開くことができますをク 3 学校ホームページを編集する際