第7回目

日　時：2015年2月14日　13:30～16:30

場　所：かるがも団体交流室 Ⅰ Ⅱ

出席者：受講者　13名、HPWG　11名

講　師：河野 美智代

内　容：

ページの複製

  1. サイトを開き、ページxxx_top.html を開く
  2. メニューの［ファイル］から［ページの複製］を選択する
  3. ［上書き保存］をクリック
  4. 名前を付けて保存］ダイアログで、ファイルの保存先をサブフォルダ―htmlsを指定する
    ①サイトのトップフォルダーから、HTML形式のファイルを保存するhtmlsサブフォルダーを選択する
    ②ボタンが［保存］から［開く］に変わるので［開く］ボタンを押す
  5. ［ファイル名］ボックスにファイル名 newpage1.html を「xxx_study.html」に変更する
  6. ［ファイルの種類］が［HTMLファイル(*.html,・・)］になっていることを確認し、［保存］ボタンをクリック
  7. かんたんナビバーの［ページの属性］ボタンをクリック
  8. ［属性］ダイアログで［ページタイトル］ボックスのページタイトルを「ＨＰ勉強会」に変更
  9. ［OK］ボタンをクリック
  10. 上書き保存する

見出しを設定する

  1. 「～ご笑覧ください」の後ろをクリックし、［Tab］キーを押す
  2. メニューの［挿入］→［段落］→［見出し１］をクリック
  3. 作成された段落に「ＨＰ勉強会」と入力
  4. 「シニア～」と「そんなつれ～」の文章をドラッグし、［Delete］キーを押して削除
  5. ［Backspace］ キーで段落も削除
  6. トップ画像の写真の上で右クリック
  7. ［レイアウトコンテナ→レイアウトコンテナの削除］をクリック
  8. 「ホームへ戻る」をドラッグし、［Delete］キーを押して削除
  9. ［Backspace］ キーでリンクも削除
  10. 上書き保存する

サブページの複製

  1. メニューの［ファイル］から［ページの複製］を選択する
  2. ［上書き保存］をクリック
  3. ［名前を付けて保存］ダイアログで、ファイルの保存先をサブフォルダ―htmlsを指定する
  4. ［ファイル名］ボックスにファイル名 newpage2.html を「xxx_hobby.html」に変更する
  5. ［ファイルの種類］が［HTMLファイル(*.html,・・)］になっていることを確認し、［保存］ボタンをクリック
  6. かんたんナビバーの［ページの属性］ボタンをクリック
  7. ［属性］ダイアログで［ページタイトル］ボックスのページタイトルを「趣味の世界」に変更
  8. ［OK］ボタンをクリック
  9. 見出し１部分の「ＨＰ勉強会」を「趣味の世界」に書き換える
  10. 上書き保存する
  11. 以下同様にしてサブページ「xxx_plaza.html」及び「xxx_oths.html」を作成する
    見出し文字はそれぞれ「自由広場」、「その他諸々」に
    ページタイトルは「自由広場」、「その他」とする

リンクの設定

TOPページからホームページ及び各サブページへのリンクを設定します。

  1. トップページxxx_top.htmlを開く
  2. ボタン［トップページ］を右クリック
  3. ［リンクの挿入］を選択
  4. リンクの［属性］ダイアログで［ファイルへ］タブの［ファイル名］ボックスに「../../index.html」と入力し［OK］ボタンをクリック
  5. ボタン［HP勉強会］を右クリック
  6. ［リンクの挿入］を選択
  7. リンクの［属性］ダイアログで、［ファイルへ］タブにある［参照］ボタンから［ファイルから］を選択
  8. ［開く］ダイアログで、リンク先ファイを指定
    ①［html］フォルダー内のファイル［xxx_study.html］ を選択し
    ②「ファイル名」にそのファイル名が表示されているのを確認し、
    ③［開く］ボタンをクリック
  9. リンクの［属性］ダイアログに戻るので、ファイル名が設定されているのを確認し［OK］ボタンをクリック
  10. 同様に他のボタンにもそれぞれのページへのリンクを設定
    趣味の世界：xxx_hobby.html
    自由広場：xxx_plaza.html
    その他：xxx_oths.html
  11. 上書き保存

サブページからTOPページ及び各サブページへのリンクを設定します。

  1. サブページxxx_study.htmlを開く
  2. ボタン［トップページ］を右クリック
  3. リンクの挿入］を選択
  4. ［属性］ダイアログの［ファイル］タブで、ファイル名グループの［参照］ボタンをクリック
  5. ［ファイルから］を選択
  6. リンク先のxxx_top.htmlを選択し、［開く］ボタンを押す
  7. ［属性］ダイアログの［ファイル名］ボックスに選択したページ名が入っているのを確認し［OK］ボタンを押す
  8. 同様に他のボタンにもそれぞれのページへのリンクを設定する
    趣味の世界：xxx_hobby.html
    自由広場：xxx_plaza.html
    その他：xxx_oths.html
    「ＨＰ勉強会」ボタンについては自身のページなのでリンクの設定の必要はない
  9. 上書き保存
  10. サブページxxx_hobby.html、xxx_plaza.html、xxx_oths.htmlについても同様にリンクを設定する
    ここで、前述のとおり各ページ共、自身のページボタンにはリンクを設定しない
    ＨＰ勉強会のリンク先はxxx_study.htmlとする

見出しにスタイルを適用

  1. サブページxxx_study.htmlを開く
  2. 「ＨＰ勉強会」の見出しをクリック
  3. ［スタイルエクスプレス］ビューの［カーソル位置］タブで［h1］を右クリック
  4. コンテクストメニューの［ルールの新規作成］をクリック
  5. ［ルールの追加］ダイアログで、［追加する場所］で、CSSファイルを選択
  6. ［タグ］ボックスが［h1］になっていることを確認
  7. ［OK］ボタンをクリック
  8. ［外部CSSファイルの更新確認］ダイアログで、［はい］をクリック
  9. ［スタイルの設定］の［色と背景］タブで、［前景色］で［オリーブ］を選択
  10. ［レイアウト］タブをクリック
  11. ボーダーで［4方向とも同じ］ー「スタイル」：　［二重線］を選択
  12. パディングで［左方向］：８　ピクセルを選択
  13. ［文字のレイアウト］タブをクリック
  14. 行の高さを 1.5　倍に設定
  15. ［OK］ボタンをクリック
  16. 上書き保存する
  17. 他のサブページの見出しのスタイルを確認