Comments
Description
Transcript
−平成 16 年度版−
−平成 16 年度版− ホームページ・ビルダー 目 次 １．ＷＥＢサイト作成の準備 ................................................................................................................................... 2 １．ＷＥＢサイトの構築 ............................................................................................................................................2 ２．ホームページを作成する前に ............................................................................................................................ 3 １．フォルダの作成..................................................................................................................................................3 ３．ホームページ・ビルダー画面構成 ..................................................................................................................... 4 ４．ＷＥＢサイトの作成 .......................................................................................................................................... 5 １．サイトの新規作成 ..............................................................................................................................................5 ２．ページの新規作成 ..............................................................................................................................................8 ３．文字の入力 .........................................................................................................................................................9 ４．文字の書式設定................................................................................................................................................10 ５．素材集の利用 ...................................................................................................................................................12 ６．壁紙の設定 .......................................................................................................................................................13 ７．水平線の挿入 ...................................................................................................................................................14 ８．水平線の書式設定 ............................................................................................................................................15 ９．区切り線の挿入................................................................................................................................................16 １０．ページの保存................................................................................................................................................17 １１．ページタイトルの設定 .................................................................................................................................19 １２．プレビューの確認 ........................................................................................................................................20 １３．ブラウザでのプレビュー確認 ......................................................................................................................20 ５．ＷＥＢページとＷＥＢサイトの終了 ............................................................................................................... 22 １．ＷＥＢページを閉じる ......................................................................................................................................22 ２．ＷＥＢサイトを閉じる ......................................................................................................................................22 ６．既存のＷＥＢサイトとＷＥＢページを開く..................................................................................................... 23 １．既存のＷＥＢサイトを開く ...............................................................................................................................23 ２．既存のＷＥＢページを開く ...............................................................................................................................24 ７．ウェブアートデザイナー ................................................................................................................................. 25 １．バナーの作成 ...................................................................................................................................................26 ２．ロゴの作成 .......................................................................................................................................................26 ８．ＷＥＢページの上書き保存.............................................................................................................................. 28 ９．ウェブアートデザイナーで作成した画像の保存.............................................................................................. 30 １０．ＷＥＢページの新規作成.............................................................................................................................. 31 １．ページの新規作成 ............................................................................................................................................31 ２．表の作成...........................................................................................................................................................32 ３．表の編集...........................................................................................................................................................32 ４．ページの保存 ...................................................................................................................................................37 １１．ハイパーリンクの活用 ................................................................................................................................. 38 １．リンクの設定 ...................................................................................................................................................38 1 ホームページ・ビルダー １．Ｗｅｂサイト作成の準備 インターネットの代表的なサービスである World Wide Web（WWW）は、テキスト情報だけでなく、画 像、サウンド、アニメーションなどを含むドキュメントが利用できます。WWW は単に Web とも呼ばれます。 WWW は Web サイトの集まりで、それぞれの Web サイトは「ページ」と呼ばれるドキュメントの集まりで す。Web サイトを訪れたときに最初に表示され、Web サイト内のほかのページへの入り口となるページを本 来は「ホームページ」と呼びますが、広い意味でそれぞれのページも「ホームページ」と呼ばれています。 サイト ホームページ １ページ ３ページ ２ページ ４ページ ５ページ ６ページ １．Ｗｅｂサイトの構築 サイトの構築は、どのような情報を発信するのか構想を練り、あとからページを追加する事を想定しておく必 要もあります。 ■作成の流れ サイト開設の目的定 テーマを決める → 内容を決める サイトの構造設計 リンク・フォルダの構成を決める デザイン 統一感が崩れないよう、共通で使う部品の作成など ページの作成・テスト 実際にページを作成。内容・リンクの確認、エラーの発生がない かなどの確認 公開・運用 公開･運用の体制の決定とサイトの管理 2 ホームページ・ビルダー ２．ホームページを作成する前に ホームページは作成、更新すると、ＷＷＷサーバーにファイル転送という作業を行います。その際に、ページ 内に載せている写真や、図のファイルもそれぞれ、ＷＷＷサーバーに転送しなければ作成したページがきちん と表示されません。そのためにフォルダを作成してきちんとファイルを管理しておく必要があります。 そこで、ホームページを作成する前に、ページを保存するフォルダとページ内に載せる写真や図を保存するフ ォルダを作成します。 ファイルの管理がきちんと行われていれば、最終的にＷＷＷサーバーにファイルを転送する際に簡単に確実に 転送を行うことができます。 １．フォルダの作成 今回の研修会では、Ｃドライブの中に作成したページを保存する［kensyu］と画像や図を保存する［sozai］ の 2 つのフォルダを作成して作業を行います。 ① ［ファイル］→［新規作成（W）］→［フォルダ（F）］ ② 新しいフォルダが作成される ③ 「kensyu」と入力（名前をつける） ④ 上記の操作で「sozai」のフォルダも作成する ポイント ホームページを作成する際は、ファイルの転送を行った際に 正確にサーバー側で表示できるようにファイル名は半角英数 で入力します。 3 ホームページ・ビルダー ３．ホームページ・ビルダー画面構成 ② ③ ① ① サイト／素材ビュー Ｗｅｂサイトを管理したり、Ｗｅｂページに素材を挿入したりする時に使います。 《サイト》タブ Ｗｅｂサイト内のリンクの関係やファイルの構成を確認する時などに使います。 《素材》タブ Ｗｅｂページに画像や音声などさまざまな素材を挿入するときに使います。 ② 素材ビューの表示／非表示 ①のサイト／素材ビューの表示 ③ ページ編集領域 Ｗｅｂページを編集する領域 《ページ編集》タブ ワープロ感覚での文字入力、表作成によるＷｅｂページの作成ができます。 《ＨＴＭＬソース》タブ ＨＴＭＬソースを直接編集してＷｅｂページを編集することができます。 《プレビュー》タブ 編集中のＷｅｂページがブラウザでどのように表示されるかを確認できます。 4 ホームページ・ビルダー ４．Ｗｅｂサイトの作成 Ｗｅｂサイトは複数のＷｅｂページから構成されています。 複数のＷｅｂページをまとめてＷｅｂサイト単位で管理すると、リンクの設定や更新、ＷＷＷサーバーへの転 送が容易に行えます。 Ｗｅｂサイトとトップページを作成する Ｗｅｂサイト内に１ページずつ Ｗｅｂページを追加する １．サイトの新規作成 ① ［サイト（Ｓ）］→［サイトの新規作成（Ｎ）］ ② ［サイト新規作成］ダイアログボッ クスが表示 5 ホームページ・ビルダー ③ ④ ⑤ ⑥ ⑦ ［サイト名（Ｓ）］に「研修」（任意）と入力 次へ（Ｎ） ［新規に白紙のトップページを作成する］を選択 次へ（Ｎ） ［トップページのファイル名（Ｐ）］の選択 「Ｉｎｄｅｘ．ｈｔｍ」を選択 ⑧ ［トップページの作成先フォルダの指定（Ｆ）］で サイトを作成するフォルダを指定する ポイント 作成先フォルダを指定する際にあらかじめ、作成先フォルダを 作成しておくと、 参照（Ｂ） から指定する事ができます。 6 ホームページ・ビルダー ⑨ ⑩ ⑪ ⑫ 参照（Ｂ）をクリック ［フォルダの選択］ダイアログボックスが表示 C:¥ をダブルクリック kensyu フォルダをダブルクリック ポイント フォルダをクリックしただけでは、フォルダが開いた状態の絵に変 更されません。必ず、ダブルクリックでフォルダが開いた絵の状態に なったのを確認するようにしましょう。 ⑬ ＯＫ ⑭ ［トップページのファイル名］と［トップページの 作成先フォルダの指定］の指定が正しい事を確認 研修では、図のようになっているのを確認すること ⑮ ⑯ 7 次へ（Ｎ） ［転送時に転送設定をする］にチェックをつける ホームページ・ビルダー ⑰ 標準モードを選択 ⑱ ＯＫ ２．ページの新規作成 ［作成するページ］ 8 ホームページ・ビルダー ３．文字の入力 ① カーソルの点滅位置に「園だより」と入力 ② 自動的に枠が表示される ポイント 文字の枠内で ＥＮＴＥＲ を押すと改行されます。 １行ごとに文字の設定を変 更したい場合は、同一枠内に改 行して文字を入力しないよう にしましょう。 ③ 「園だより」の下をク リック ④ カーソルが点滅 ⑤ 「年中行事」と入力 ⑥ 「お便りお待ちしてお ります。」と入力 9 ホームページ・ビルダー ４．文字の書式設定 ［書式］ツールバーを使用して、文字や段落に対して書式を設定することができます。 フォント属性 フォント縮小 フォント拡大 アンダーライン 斜体 太字 右揃え 中央揃え 左揃え ① フォントサイズを変更する文字列（園だ より）を範囲選択 ② ［フォント拡大］を３回クリック ③ ［中央揃え］をクリック ④ （年中行事）を範囲選択 ⑤ ［フォント属性の変更］をクリック ポイント ［フォント属性の変更］では、サイズ・色・書体の 変更が一度にできます。 10 ホームページ・ビルダー ⑥ サイズの変更 クリックして、選択 ポイント 拡大は＋が付いている数字を選択します。 縮小は−が付いている数字を選択します。 ⑦ 色の変更 クリックして、色を選択 ⑧ 書体の変更 クリックして、任意の書体を選択 ⑨ ＋３ 中央揃え ＋３ 中央揃え ＋２ 11 左の図を参考に編集 ホームページ・ビルダー ５．素材集の利用 ホームページ・ビルダーには、様々な素材が用意されています。 ① 挿入する箇所をクリック → カーソルが点滅 ② サイト／素材ビューの［素 材］タブをクリック ③ ④ をクリック 一覧から［アイコン］フォ ルダをクリック ⑤ 画像の一覧表示の中から、 任意のものを選択 ⑥ ⑦ る 12 をクリック 選択した画像が挿入され ホームページ・ビルダー ６．壁紙の設定 ページの背景に貼り付けた画像ファイルを「壁紙」といいます。 ① サイト／素材ビューの［素 材］タブをクリック ② ③ をクリック 一覧から［壁紙用素材］フ ォルダをクリック ④ 画像の一覧表示の中から、 任意のものを選択 ⑤ ⑥ 13 をクリック 壁紙が設定される ホームページ・ビルダー ７．水平線の挿入 水平線は、ページに区切りを入れたい時に使用します。 ① 水平線を挿入する箇所を クリック 14 → カーソルが点滅 ② ［挿入］→［水平線］ ③ 水平線が挿入される ホームページ・ビルダー ８．水平線の書式設定 ① 水平線上で右クリック ② ［属性の変更］をクリック ③ 位置揃え → 中央揃え ④ 太さ → ５ピクセル ⑤ 幅 → ８０％ ⑥ ＯＫ ⑦ 15 水平線に書式が設定される ホームページ・ビルダー ９．区切り線の挿入 画像としての区切り線を挿入することもできます。 ① 区切り線を挿入する箇所を クリック ② → カーソルが点滅 サイト／素材ビューの［素 材］タブをクリック ③ ④ をクリック 一覧から［区切り線］フォ ルダをクリック ⑤ 画像の一覧表示の中から、 任意のものを選択 ⑥ をクリック ⑦ 区切り線が挿入される ⑧ 挿入された区切り線をクリ ック ⑨ （中央揃え）をクリッ ク 画像として挿入された区切り線 の位置が中央に配置される 16 ホームページ・ビルダー １０．ページの保存 ① ［ファイル］→［名前を付 けて保存］ ② ［名前を付けて保存］が表 示される ③ ④ ファイル名（index.html）を入力 保存 ポイント フ ァ イ ル 名 に 拡 張 子 .html を 入 力 し な い と html ファイルとして保存されません。 17 ホームページ・ビルダー ⑤ ［保存ファイル一覧］が表示 ポイント ページ内に壁紙・アイコンのように画像を挿 入した際は、必ず挿入した画像もそれぞれ保存 します。ここで、きちんと保存を行っていない と、サイトの転送を行った際に正確に表示され ません。 ⑥ 保存するファイルをクリック 複数のファイルを選択する際は、 Shift を押しながら、ファイルをクリック ⑦ 保存場所の確認 研修では、あらかじめ作成した sozai フォルダに保存します ⑧ 参照 をクリック ⑨ ［保存先フォルダの選択］ダイアログボックスが表示 ⑩ C：￥ をダブルクリック ⑪ sozai フォルダをダブルクリック ポイント フォルダをクリックしただけでは、フォルダが開いた状態の絵に変 更されません。必ず、ダブルクリックでフォルダが開いた絵の状態に なったのを確認するようにしましょう。 ⑫ ファイル名と保存場所の確認 研修では、確実に C：¥sozai￥になって いることを確認します ⑬ 18 ＯＫ ホームページ・ビルダー ⑭ ファイルの保存が完了する とファイル名（index.html）が タイトルバーに表示される １１．ページタイトルの設定 ページごとに、タイトルを設定するとブラウザで表示を行った際にタイトルがタイトルバーに表示されお気に 入りに登録を行う場合にも表示されたタイトルで登録されます。各ページごとにタイトルをつけるようにしま しょう。 ① ［編集］→［ページのプロ パティ］ ② ［属性］ダイアログボック スが表示 ③ ［ページタイトル］ に「連盟幼稚園」と入力 ④ 19 ＯＫ ホームページ・ビルダー ⑤ ページタイトルの入力が完了 するとタイトルバーにタイトル名 （連盟幼稚園）が表示される １２．プレビューの確認 プレビュー機能を利用すると、ブラウザを起動せずに作成したページの実際の表示を確認することができます。 ① ［プレビュー］タブをクリック プレビューが表示される １３．ブラウザでのプレビュー確認 ファイルを保存すると、ブラウザでプレビューを確認することができます。 ① 20 をクリック ホームページ・ビルダー ② ブラウザ（Internet Explorer） が起動 → ページが表示される ポイント ページタイトルを設定しているとタイト ルバーに［ページのプロパティ］で設定した タイトル（連盟幼稚園）が表示されます。 ③ じる 確認後、ブラウザを閉 21 ホームページ・ビルダー ５．ＷｅｂページとＷｅｂサイトの終了 １．Ｗｅｂページを閉じる ① 下の段の を クリック Ｗｅｂページが終了する ２．Ｗｅｂサイトを閉じる ① ［サイト］→［サイト を閉じる］ ② サイト／素材ビュー に「サイトが開かれていま せん。」と表示 22 ホームページ・ビルダー ６．既存のＷｅｂサイトとＷｅｂページを開く １．既存のＷｅｂサイトを開く 既存のＷｅｂサイトを呼び出すことを「Ｗｅｂサイトを開く」といいます。Ｗｅｂサイト内のＷｅｂページを 編集したり、新しいＷｅｂページを追加したりする場合は、まず、Ｗｅｂサイトを開きます。 ① ［サイト（Ｓ）］→［サイトを開く（Ｏ）］ ② サイト名の一覧から目的 のサイトを選択 ③ ④ 開く（Ｏ） 指定したサイトが開くと サイト／素材ビューにサイト 名が表示される 23 ホームページ・ビルダー ２．既存のＷｅｂページを開く ① ［ファイル］→［開く］ ② 目的のファイル（index.html） を指定 → 開く ③ 指定した ページが表示 される 24 ホームページ・ビルダー ７．ウェブアートデザイナー 「ウェブアートデザイナー」は、ホームページ・ビルダーに附属している画像作成や編集が行えるアプリケ ーションソフトです。 ① ［ツール］→［ウェブアート デザイナーの起動］ ② ウェブアートデザ イナーが起動 25 ホームページ・ビルダー １．バナーの作成 ① ［素材］タブをクリック ② をクリック ③ 一覧から［バナー］フォル ダをクリック ④ 画像の一覧表示の中から、 任意のものを選択 ⑤ ⑥ をクリック 選択した画像が挿入され る ⑦ キャンバス上の画像が表 示される ２．ロゴの作成 ① ［ウェブアート素材］タブ をクリック ② ③ をクリック ロゴのデザインサンプル の一覧から任意のものを選択 ④ 枠内をクリックしてカー ソルを表示させ文字を入力 （○○幼稚園） ⑤ ⑥ る ⑦ 同様の操作でデザイン文字を追加 ⑧ 文字をバナーの絵の中で拡大・移動してレイアウトを整える 26 をクリック デザイン文字が表示され ホームページ・ビルダー 作成したバナーをホームページで使えるような形式に変換してページに挿入 ① ［編集］→［すべて選択］ ポイント 図の選択、は右の表示でも確認でき ます ② ［ファイル］→［オブジェ クトを送る］→［ホームペー ジ・ビルダーへ］ ③ タスクバーの「ホームペー ジ・ビルダー」が点滅 ④ ホームページ・ビルダーに 切り替えると画像が挿入され ている 27 ホームページ・ビルダー ⑤ ホームページ・ビルダーに 画像が挿入されたのを確認 ⑥ レイアウトを整える 中央揃えをクリック ８．Ｗｅｂページの上書き保存 ① ［ファイル］→［上書き 保存］ 28 ホームページ・ビルダー ② ［保存ファイル一覧］が表示 ③ 全てのファイルを選択 ④ 保存場所の確認 研修では、あらかじめ作成した sozai フォルダに保存します ⑤ 参照 をクリック ⑨ ［保存先フォルダの選択］ダイアログボックスが表示 ⑩ C：￥ をダブルクリック ⑪ sozai フォルダをダブルクリック ⑫ ファイル名と保存場所の確認 研修では、確実に C：¥sozai￥になって いることを確認します ⑬ 29 ＯＫ ホームページ・ビルダー ９．ウェブアートデザイナーで作成した画像の保存 ウェブアートデザイナーで作成した画像も別ファイルとして保存しておくと、修正する時に利用できます。 ① ［ファイル］→［名前を付け てキャンバスを保存］ ② 保存場所の確認 研修では、あらかじめ作成した sozai フォルダに保存します ③ 任意のファイル名を入力 研修ではバナーと入力 ④ 保存 ⑤ 保存後、ウェブアー トデザイナーを閉じる 30 ホームページ・ビルダー １０．Ｗｅｂページの新規作成 １．ページの新規作成 ① ［ファイル］→［新規作成］ →［標準モードで新規作成］ ② 新規ページが表示される ポイント ページの保存も「ページのプロパティ」 でページタイトルも設定されていない ので、newpage−無題で表示されます。 31 ホームページ・ビルダー ２．表の作成 ① 表を作成する箇所をクリック→ カーソルが点滅 ② ［表］→［表の挿入］ ③ ［表の挿入］ダイアログボック スが表示 ④ 行数 → ２ ⑤ 列数 → ２ ⑥ ＯＫ ⑦ 表が挿入される ① 画像を挿入する枠をクリック ３．表の編集 ② ［挿入］→［画像ファイル］→ ［ファイルから］ 32 ホームページ・ビルダー ③ 「開く」ダイアログボックス が表示 ④ 任意のファイルを選択 → 開く ⑤ 画像が枠内に表示される ⑥ 同様の手順で、左の図のよう に画像を挿入 33 ホームページ・ビルダー ⑦ 文字を挿入する枠をクリック ⑧ 文字を入力 「上手にふけるかな？」 ⑨ 同様の手順で左の図のように 文字を入力 ポイント 表は、枠のサイズの変更をせずに画像 や文字を挿入すると、自動的に拡大され ます。 34 ホームページ・ビルダー ⑩ 表の外枠線上をクリック → 表 全体が選択される 表全体が選択されると、表全体にピ ンクの枠とハンドルが表示される ⑪ 表全体を選択 → 右クリック ⑫ ショートカットメニューが表示 ⑬ ［属性の変更］をクリック ポイント 表の枠線上での右クリックが少しでも ずれてしまうと、下の図のように、別のシ ョートカットメニューが表示されます。確 実に枠線上でクリックしましょう。 35 ホームページ・ビルダー ⑭ 表の「属性」ダイアログボックスが表示 属性の設定で、表全体のサイズや色、配置、セル内 の余白などを指定して表全体の体裁を変更する事 ができます。 ⑮ 位置揃え → 中央揃え セル内の余白 → １ピクセル 枠表示 → ７ピクセル ⑯ ＯＫ ⑰ 表が中央に表示され、枠線に関 しても変更されている ⑱ 新規に作成したページも壁紙とページタイトルを設定 ページタイトル → 年中行事 36 ホームページ・ビルダー ４．ページの保存 ① ［ファイル］→［名前を付けて保存］ ② 保存場所の確認（kensyu フォルダ） ③ ファイル名 → gyouji ④ 保存 ⑤ 「保存ファイル一覧」ダイ アログボックスが表示 ⑥ ファイルを全て選択 ⑦ 保存場所の確認（sozai） ⑧ ＯＫ ⑨ ファイルの保存とページ タイトルの設定が行われたこ とを確認 37 ホームページ・ビルダー １１．ハイパーリンクの活用 文字や画像をクリックすると、別の Web ページのファイルが表示される仕組みを「ハイパーリンク」 「リンク」 といいます。ジャンプする起点を「リンク元」ジャンプする先を「リンク先」といいます。 指定できるリンク先には、次のようなものがあります。 ・別の Web ページ ・同一 Web ページ内の別の場所 ・別の Web サイト ・HTML ファイル以外のファイル ・電子メールの起動 １．リンクの設定 設定するリンク クリック クリック メール作成の画面が表示 年中行事のページが表示 38 ホームページ・ビルダー ① ② 39 「年中行事」を範囲選択 ［挿入］→［リンク］ ホームページ・ビルダー ③ ［属性］ダイアログボックスが表示 ④ 「タグ」が「リンク」になっている事を確認 ⑤ 「ファイルへ」タブをクリック、表示 ⑥ 「ファイル名」の入力 → 参照 をクリックし リンク先のファイルを指定 ⑦ ＯＫ ⑧ リンクの設定がされるとリンク元の文字 にアンダーラインが付く 40 ホームページ・ビルダー ⑨ メールのアイコンをクリック ⑩ ［挿入］→［リンク］ ⑪ ［属性］ダイアログボックスが表 示 ⑫ 「タグ」が「リンク」になってい る事を確認 ⑬ 「メールへ」タブをクリック、表示 ⑭ 「宛先」にメールのアドレスを入力 ⑮ 「件名」 （問い合わせ）を入力 ⑯ ＯＫ ポイント 宛先にメールアドレスを入力しておくとメール送信者が「宛 先のアドレス」の入力、件名にタイトルを入力しておくと「件 名」の入力をする必要、がありません。なるべく、両方とも入 力をしておきましょう。 リンクの設定が終了したら、プレビュー画面で動作の確認をしましょう。 ※ 年中行事のページに「戻る」というアイコン（図）を作成しトップのページに戻るリンクを設定すると先 頭ページにいつでも簡単に戻ることができます。 ページの作成が終了したら、必ず、上書き保存を行いましょう。 41