第9回目

日　時：2015年3月7日　13:20～17:00

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

出席者：受講者　12名、HPWG　12名

講　師：石坂 稔、藤森 紀代

内　容：

画像の準備

http://kanto.me/pasobora02/sub/htmls/sub08.htmlからzipファイルをダウンロードし、記述されているステップに従います。

  1. 画像のダウンロード
    ①http://kanto.me/pasobora02/sub/htmls/sub08.htmlを開く
    ②画像あるいは文字列「zipファイル」をクリック
    ③操作を選ぶダイアログで［保存］を選択
    ④「pic_c074(1).zipのダウンロードが完了しました。」　のメッセージが表示されたら［フォルダ―を開く］をクリック
    ⑤［ダウンロード］フォルダーで、ダウンロードしたzipファイルを右クリックし、［すべて展開］を選択
    ⑥［参照］ボタンをクリック
    ⑦展開先のフォルダ―を「W:\26秋」に変更
    ⑧[展開]をクリック
    ⑨他の2画像についても同じように 「W:\26秋」 フォルダーに展開
    　26秋フォルダー に新たに保存された画像ファイル名とサイズ
    　　am100_pe008.jpg 　1147 x 761
    　　am100_sc013.jpg 　1131 x 741
    　　pic_c074.jpg 　　　 1280 x 354
    ⑩展開が終了したらzipファイルは削除
  2. 画像の圧縮
    写真を縮小する方法は「ペイント」、「宿専」、「JTrim」、「ピクチャーマネージャー」等色々ありますが、ここではビルダーに付属している「ウエブアートデザイナー」を使います。「ウエブアートデザイナー」は単独のアプリケーションなのでホームページビルダーを起動しなくても起動することができます。
    ①ウエブアートデザイナーを開く
    ②テンプレートギャラリーの「フォルダ」で「W」→「26秋」を選択する
    ③「pic_c074.jpg」を選択する
    ④「挿入」ボタンをクリック
    ⑤キャンバスの画像をダブルクリックする
    ⑥「オブジェクトの編集」ダイアログで縦横比保持にチェックの入っていることを確認する
    ⑦幅を320に指定する
    ⑧「×」ボタンをクリックする
    ⑨メニューバーの「web用保存ウイザード」をクリック
    ⑩画像が選択されているのを確認して「次へ」をクリック
    ⑪「JPG」を選択して「次へ」をクリック
    ⑫画質を72程度指定して「次へ」をクリック
    ⑬「ファイルに保存」を選択して「完了」をクリック
    ⑭保存先を26秋サイトの「imgs」フォルダーに指定
    ⑮ファイル名を「xxx_hoby1.jpg」として保存
    ⑯他の２画像についても同じように圧縮して 26秋サイトの「imgs」フォルダーに保存
    　am100_pe008.jpg→xxx_hoby2.jpg （幅320）
    　am100_sc013.jpg→xxx_hoby3.jpg　（幅320）
    ⑰ 「ウエブアートデザイナー」を閉じる

箇条書きを作成する

  1. サイトを開き、サブページhobby.htmlを開く
  2. 見出しの後ろをクリックし、［Tab］キーを押す
  3. ナビメニューの［リストの挿入］をクリック
  4. ［通常］を選択し、［OK］ボタンをクリック
  5. １項目めの文字「パソコン」と入力
  6. ［Enter］キーを押して、次の項目「トレッキング」と入力
  7. ［Enter］キーを押して、次の項目「旅」と入力
  8. 上書き保存

画像の横に文書を回り込ませる

  1. 画像を挿入する
    ①箇条書きの後ろをクリック
    ②［Tab］キーあるいは↓キーを押す
    ③ナビメニューの［写真や画像の挿入］から［ファイルから］を選択
    ④［imgs］フォルダーの画像「xxx_hoby1.jpg」を選択し［開く］をクリック
  2. 写真の右に以下の文章を入力
    パソコン：使い方が分かってくると、世界が広がります。メールでたくさんの人と交流できるのはもちろん、ネットで欲しい情報や品物が座ったままで手に入れることができるのです。 (「第9回目資料」からコピペでも可)
  3. 2つ目の画像を挿入する
    文章の最後にカーソルを置いたところに二番目の画像を挿入する
    挿入方法は上記と同様で挿入する画像のファイル名は「xxx_hoby2.jpg」とする
  4. 写真の右に以下の文章を入力
    トレッキング：パソコンで家に縛られることが多いのを、野山を歩き景色を楽しみ、野草の花々に癒されています。
  5. 3つ目の画像を挿入する
    文章の最後にカーソルを置いたところに三番目の画像を挿入する
    挿入方法は上記と同様で挿入する画像のファイル名は「xxx_hoby3.jpg」とする
  6. 写真の右に以下の文章を入力
    旅：レンタカーで北米を横断するのが夢。仕事で出会った人たちにも久しぶりに会いたい。
  7. 回り込みの設定をする
    ①一つ目の画像を選択し、［スタイルエクスプレス］ビューの［カーソル位置］タブで表示される<img> タグを右クリックし、［ルールの新規作成］を選択
    ②［ルールの追加］ダイアログ で、追加する場所にCSSファイルが選択されていることを確認し、 ［クラス］にチェックをいれ、［クラス］ボックスにはクラス名("hidari")を入力して、［OK］ボタンを押す。
    ③［スタイルの設定］ダイアログで下記の設定をする
    　［レイアウト］タブで［パディング］　左：３０ピクセル；右：３０ピクセル
    　［位置］タブで ［属性］　回り込み：左
    ④ 上記を設定し［OK］ボタンをクリック
  8. ２番目の画像にクラス hidari を設定する
    ①２番目の画像をクリック
    ②［スタイルエクスプレス］ビューの［カーソル位置］タブで、<img>タグを右クリック
    ③［クラス設定→hidari］を選択
  9. 3番目の画像に対しても同様に行う

回り込みを解除する

  1. １番目に入力した文章の後ろをクリックし、メニューバーの［挿入→改行］を選択
  2. ［改行］ダイアログで、回り込みを解除する
    ①［左寄せが終了する位置まで改行］をクリック
    ②［OK］ボタンをクリック
  3. HTMLソースを表示し、作成されたスタイルを以下のように変更する
    <br clear="left"> → <br style="clear:left;">
  4. 他の2つの文章についても同様に行う
  5. 上書き保存

フォトフレームの設定

  1. 1番目の画像をクリック
  2. ナビバーの［画像の効果→フォトフレーム装飾］をクリック
  3. ［フォトフレームの挿入］ダイアログで、種類は［ウェブアート］を選択し、［詳細］をクリック
  4. ［フォトフレーム作成］ウィザードで「frame_f_005」を選択し、［次へ］ボタンをクリック
  5. フレームの色「白」を選択し、プレビューで確認し、［完了］ボタンをクリック
  6. ［OK］ボタンをクリックし［フォトフレームの挿入］ダイアログを閉じる
  7. 残りの２画像にも同様にフレームを設定
  8. 上書き保存

ページトップへ戻るボタンを挿入

  1. 旅の文章の最後にカーソルを置き、カーソル移動キーあるいはタブキーを押す
  2. メニュー［挿入］から［ボタン］を選択
  3. ［ボタンの作成］ダイアログで「ページトップへ」と入力しボタン「000m02」を選択し、［詳細設定］をクリック
  4. ［ボタンの詳細設定］ダイアログで［オブジェクト一覧］から上の［ボタン］を選択し、［編集］をクリック
  5. ［ボタン作成ウィザード（形状の選択 - 1/2）］で一覧から「button046」を選び［次へ］をクリック
  6. ［ボタン作成ウィザード（色の選択 - 1/2）］で一覧から白色を選び、［完了］をクリック
  7. ［ボタンの詳細設定］ダイアログに戻るので［オブジェクト一覧］からロゴ文字「ページトップへ」を選択し、［編集］をクリック
  8. ［ロゴ作成ウィザード（文字の指定）］ではそのままで［次へ］をクリック
  9. ［ロゴ作成ウィザード（色の選択）］では白色を指定し、［次へ］をクリック
  10. ［ロゴ作成ウィザード（縁取りの選択）］では、［なし］のままで［次へ］をクリック
  11. ［ロゴ作成ウィザード（文字効果の選択）］では、［なし］のままで［完了］をクリック
  12. ［ボタンの詳細設定］ダイアログに戻るので［オブジェクト一覧］から下の［ボタン］画像を選び［編集］
  13. [ボタン作成ウィザード（形状の選択 - 1/2）]では、一覧から「button003」を選択し、［次へ］をクリック
  14. [ボタン作成ウィザード（色の選択 - 2/2）]では、種類を［テクスチュア］にし、一覧から「wall16」を選択し［完了］をクリック
  15. ［ボタンの詳細設定］ダイアログに戻るので［OK］をクリック
  16. ［ボタンの作成］ダイアログに戻るので、［完了］をクリック
  17. ［上書き保存］し、ボタンの素材ファイルは imgs フォルダーにファイル名「xxx_button6.gif」として保存
  18. ボタンにスタイルを設定
    ①ボタン画像をクリックし、［スタイルエクスプレス］ビュー を表示する
    ②カーソル位置に表示される［img］タグを右クリックして表示されるメニューから［ルールの新規作成］を選択
    ③［ルールの追加］ダイアログで、［追加するルール］を［クラス］とし、クラス名を「return2top」と入力
    ④外部スタイルシートが選択されていることを確認し［OK］をクリック
    ⑤［スタイルの設定 - return2top］ダイアログの［レイアウト］タブで下記に設定
    　　［マージン上］１０ピクセル
    　　［マージン下］２０ピクセル
    ⑥続いて［位置］タブで［回り込み］の［右］をチェックし、［OK］をクリック
  19. フッターにスタイルを設定
    フッターが左側に回り込んで重なっているので、フッターの回り込みを解除する
    ①フッター部分にカーソルをおく
    ②［スタイルエクスプレス］ビューの［カーソル位置］で「div id="footer"」を右クリック
    ③［ID(#footer")のスタイルを編集］を選択
    ④［スタイルの設定］ダイアログの［位置］タブで［回り込み解除］で［両方］にチェックを入れ、［OK］をクリック

ラベルを作成

  1. 説明文の「パソコン」をドラッグして右クリック
  2. ［リンクの挿入］をクリック
  3. リンクの［属性］ダイアログで
    ①［ラベルを付ける］タブをクリック
    ②ラベル欄につける「pasocon」と入力
    ③［OK］をクリック
  4. 同様にして「トレッキング」及び「旅」にもそれぞれ「trekking」「tabi」 ラベルを作成
  5. タイトルロゴ画像にも「top」とラベルを作成

作成したラベルをリンク先に設定

  1. 箇条書きの文字列「パソコン」を選択し、右クリック
  2. ［リンクの挿入］をクリック
  3. リンクの［属性］ダイアログで［ラベルへ］タブをクリック
  4. ラベル入力ボックス右端の v をクリックし、ラベルを表示する
  5. 先ほど作成したラベル「pasocon」を選択し、［OK］ボタンをクリック
  6. 箇条書きの文字列「トレッキング」、「旅」及び「ページトップへ」ボタンについても同様にページ内リンクを設定する

宿題

空のサブページを各自独自のページとして完成させるため、ページ構成を立案し素材を用意しておくこと。当講習会で学習した項目を使ったページにすることを推奨します。