ホームページ・ビルダー16

Transcription

1 標準時間 90 分 Part 3 白紙からページを作る () Part 3- トップページを作ろう ( ここで学ぶこと ) ホームページの入り口 トップページ を自由に作ってみましょう トップページは 自分のホームページのテー マや内容が明解かつ個性的に伝わるように工夫しましょう ページタイトル設定 背景 / 文字色設定をする 文字入力 文字サイズ / 書式変更をする メイン画像を挿入する メニューボタンを作成する 罫線を挿入する トップページを保存する 36

2 Part 3 白紙からページを作る (2) デスクトップ上にある ホームページ ビルダー をクリック あなたは どんなホームページを 作りますか? 自分なりのテーマと構成を決めて トップページを作りましょう 自分が発信したいホームページのテーマとアイデアは身近にたくさんあります 自分の趣味やクラブ活動 サークルなどの紹介 またはよく行くお店の紹介 町の自慢 高校の紹介などなど 自分なりのホームページの制作に挑戦してみましょう 完成見本ではトップページを構成する部品がシンプルなため レイアウトのバランスを考慮して中央揃えにしています 操作を始める前に 生徒自身が手書きでレイアウトを考え 文字や画像の大きさを変更したり 部品の順序を入れ替えたりして 自分らしいトップページを作れるようにすることが大切です その場合 操作の順序が変わってくることに留意してください 37

3 Part 3 白紙からページを作る (3) ページタイトルと背景を作る かんたんナビバーの [ 新規作成 ] を クリックします [ 白紙から作成する (B)] を選びます 0 編集領域が白くなったことを確認し ます かんたんナビバーの [ ページの属性 ] をクリックすると ページのプロパ ティを設定するための画面が表示さ れます [ ページ情報 ] タブの [ ページタイト ル (P)] にタイトルを入力します 2 3 タイトルとは作成した本人が一見して分かるよう漢字 かな カタカナで記入し ファイル名は英数半角文字で記入するのが一般的です トップページのタイトル ( 例 : ひかるの部屋 ) トップページのファイル名( 例 :index. html) 38

4 Part 3 白紙からページを作る (4) 引き続き 背景や文字の色を決める方法を選びます [ 背景 / 文字色 ] タブをクリックし [ カラーギャラリー (G)] をクリックします 0 カラーギャラリーからページ内の背 景や文字色の組み合わせを選べます [ 色のカテゴリ (C)] から好きな色を選び ( 例 : 黄色 ) [ 背景と文字色の組み合わせ (B)] から好きな組み合わせを選び [OK] をクリックします [ 背景 / 文字色 ] タブの画面に戻り ますので [OK] をクリックします

5 Part 3 白紙からページを作る () 文字を入力 文字サイズ / 色 / 書体を変える 0 トップページのタイトル文と挨拶文を入力します ナビメニューの [ 文字の挿入 ] をクリックすると 文字の挿入領域が表示されます タイトル文 ( 例 : ひかるの部屋 ) を入力します 中央に配置するためにツールバーから [ 中央揃え ] をクリックします 続いて挨拶文です ナビメニューの [ 文字の挿入 ] をクリックします 文字を入力します ( 例 : 私のホームページへようこそ [ 改行 (Enter)] 高校 年生ひかるのおしゃべりにおつきあいください ) 挨拶文も中央に配置したいので ツールバーから [ 中央揃え ] をクリックします 2 3 タイトル文をタイトルらしくするために 文字サイズを変更します タイトル文をダブルクリックして文字が反転したことを確認したあと ツールバーの [ ( 文字サイズ拡大 )] をクリックします クリックするごとに文字が大きくなります 文字が大きくなりすぎたときは右隣りの [ ( 文字サイズ縮小 )] をクリックします ツールバーのアイコンにマウスのポインター ( ) を当てると そのボタンがどんな機能を持っているかが自動的に表示されますので 自分のやりたいことが確認できるとともに いろいろなボタンの機能を自然と覚えていくことができます 40

6 Part 3 白紙からページを作る (6) 0 文字の色 / 書体を変更してみましょう まず変更したい文字が選ばれて 反転していることを確認してください 反転していない場合は文字をダブルクリックすると反転します ツールバーの [ ( フォントの変更 )] をクリックすると フォントの色 / サイズ / 書体を変更するための画面が表示されます [ 色指定 (C)] のバー ( 上から2つ目 ) をクリックし [ その他 (O)] をクリックすると 色設定の詳細なパレットが表示されます その中から好きな色を選んで [OK] をクリックしてください ( 例 : #ff8000) [ 書体 (F)] の項目の中から好きな 2 書体を選んでください [ ] をクリックしてスクロールさせ好きな書体を見つけましょう ( 例 :MS P ゴシック ) 最後に [OK] をクリックし 編集画面に戻ったら 反転しているタイトル文を元に戻すため タイトル文の枠外で一度クリックします 3 4

7 Part 3 白紙からページを作る (7) トップページに画像を入れる 自分らしい個性を出すために画像を入れてみます ナビメニューの [ 写真や画像の挿入 ] をクリックし [ ファイルから ] を選 びます 0 画像ファイルを選ぶ画面が表示され ますので イラスト素材のフォルダの中から好きな画像を探し出して 選んだ画像 ( 例 :hikaru.gif) をクリックし [ 開く (O)] をクリックします 画像を中央に配置するため ツールバー内の [ 中央揃え ] をクリックしておきます 2 3 画像を選ぶ方法としては 画面右端の [ フォルダ ] タブをクリックし イラスト素材のフォルダを開き その中から画像を選ぶこともできます また 選びたい画像を間違った場合や 画像を変更したい場合は メニューバーの [ 編集 (E)] から [ 元に戻す (U)] を選ぶと 選ぶ前の画面に戻すことができます 42

8 Part 3 白紙からページを作る (8) サブページのメニューを作る 自分のホームページにどのようなサブページがあるのかを メニューで伝えましょう ナビメニューの [ 文字の挿入 ] を クリックして 空白の文字挿入枠 0 が表示されているのを確認したあと ナビメニューの [ 写真や画像の挿入 ] をクリックして [ ファイルから ] を選び 好きな画像を選んで [ 開く (O)] をクリックします ( 例 :mark.gif) 続いてサブページのテーマを入力し 2 ます ( 例 : 趣味 ) そして [ 改行 ] により新しい行を作成し 引き続き 日記 と アンケート のメニューを入力してください バランスと使いやすさを考えて [ 中央揃え ] を忘れずに! 3 43

9 Part 3 白紙からページを作る (9) メニューの文字をダブルクリックして文字を反転させ ツールバーの [ ( フォントの変更 )] をクリックして [ 文字装飾 ] の中から [ 太字 (B)] にチェックをつけて ( ) [OK] をクリックします 同様に 日記 アンケート も太字に変更します

10 Part 3 白紙からページを作る (0) トップページを飾る 見栄えを良くし ページ全体のレイアウトを引き締めるため 水平線を挿入します タイトル文と挨拶文の間にカーソル を移動し ナビメニューの [ レイア 0 ウト部品の挿入 ] をクリックし [ 水平線 ] を選びます 水平線の挿入 画面が表示されますので そこで線の太さと幅を決めます ( 例 : 太さ 6 ピクセル 幅 60%) 水平線に模様を付けるため [ 水平線に模様をつける (A)] にチェックをつけて ( ) [ ファイルから (F)] をクリックします 2 イラスト素材のフォルダの中から水 平線 ( 例 :sima.gif) を選んで [ 開 く (O)] をクリックします [ 水平線に模様をつける (A)] の入力欄に 選んだ ( 例 :sima.gif) が記入されていることを確認し [OK] をクリックします 3 4

11 Part 3 白紙からページを作る () 同様にして ページ下部にも水平線 を挿入しましょう 0 水平線の太さや幅を間違った場合や 変更したい場合は 該当する水平線上を右クリックし [ 属性の変更 (A)] を選んで 数値を変更できます ただし 模様は変更できません 模様まで変更したいときは 該当する水平線をクリックし メニューバーの [ 編集 (E)] から [ 元に戻す (U)] を選んで水平線を消去し 最初からやり直してください

12 Part 3 白紙からページを作る (2) トップページを保存する 次の作業としてサブページを用意するため 完成したトップページを保存します ページは自分専用のフォルダに保存 します そのために新しいフォルダ 0 を用意しましょう かんたんナビバーの [ 上書き保存 ] をクリックし [ 保存する場所 (I)] で新しいフォルダを用意する場所を選びます [ 新しいフォルダの作成 ] ボタンをクリックして新しいフォルダを作成し フォルダ名を書き換えます ( 例 :hikaru_hp)( 英数半角文字 ) 2 ❷ 自分用のフォルダの名前に変わったら そのフォルダをダブルクリックします [ 保存する場所 (I)] のフォルダが自分のフォルダ名 ( 例 : hikaru_hp) に変わっていることを確認します これから作成するサブページもこのフォルダに保存します 続いて [ ファイル名 (N)] が newpage.html になっていますので トップページのファイル名であることが分かる文字 ( 例 :index. html) を入力し [ 保存 (S)] をクリックます 3 47

13 Part 3 白紙からページを作る (3) ❸ 素材ファイルをコピーして保存 画面が表示されています そのまま [ 保存 ] をクリックしてトップページを保存します 0 ホームページのしくみで ホームページは つの HTML ファイルと複数 の素材ファイルで構成されている説明をしました そのことがこの画面を見れば分かります