第4回目(通算第15回)

日　時：2013年7月15日　13:30～17:00

場　所：団交室Ⅰ Ⅱ

出席者：受講者　8名、HPWG　10名

講　師：小野惠一　

内　容：「写真館」及び「コーヒータイム」ページの作成

H25相談会サイトから「講習資料２(Zip)」をデスクトップにダウンロードする。
ダウンロードしたtxt.zipファイルを解凍する。
解凍したcoffee及びphotoの2つのフォルダーを自分のサイトに移動する。
photoフォルダー内のimgフォルダーに用意した6枚の写真を張り付ける。
貼り付けた写真のファイル名をph1.jpg、ph2.jpg・・・・ph6.jpgに変更する。
ホームページビルダーを起動し、サイトを開く。
Coffee Timeと写真館がリンクされていない部分に表示されていることを確認する。
topページを開き写真館をリンクさせる。上書き保存して閉じる。
写真館がリンクされたビューに映ったことを確認し、開く。
「トップページ」へのリンクを完成させる。
画像に代替テキストを入れる。(画像を右クリック→属性の変更→代替テキストを入力)
フッター部分を書き換える。上書き保存して閉じる。
フォルダータブを開く。
photoフォルダーのphoto.htmlをtextフォルダーに移動する。
photo/cssフォルダーのpht.cssをcssフォルダー（又はstyleフォルダー）に移動する。
photo/imgフォルダーの7つのファイルをimagesフォルダー（又はimageフォルダー）に移動する。
空になった「photo」フォルダーを削除する。
リンクタブに戻り、「top.heml」及び「photo.html」が正しく表示されていることを確認してそれぞれをページ転送する。
Coffee Timeのページについての同様に作成する。

(注)用意したひな形は通常のコンパクトデジカメの縦横比3:4を想定して作られています。縦横比の異なる写真の場合は高さの調整が必要となります。

例えば縦横比2:3の一眼レフカメラの写真の場合は次の調整を実施します。

photo.htmlで写真のサイズを指定している「height="240"」を6枚とも「height="213"」に変更する。
pht.cssについて「li{ height : 240px;」部分を「li{ height : 213px;」に変更する。
さらにpht.cssで「#cotents{height : 780px;」部分を「#cotents{height : 699px;」に変更する。
1行で27px (240-213)低くなったので3行分の81pxを減じます。

画像の編集

編集したい画像を右クリックする。
「画像を編集」から「ウエブアートデザイナーで編集」を選択する。
「ホームページビルダーの現在のページ背景情報を取得して、キャンバスの背景に設定しますか？」で「はい」をクリックする。
テキストを挿入するには「操作ツールバー」の「A」文字アイコンを選択して、適当な文字を入力する。
入力部分にハンドルが付いた状態でダブルクリックまたは「オブジェクトスタック」の該当部分をダブルクリックする。
表れた「ロゴの編集」ダイアログで編集する。
画像を追加するには「テンプレートギャラリー」から目的の画像を選択して挿入する。(素材タブからはビルダーで用意されている様々な画像を、フォルダータブからは自分のPCの保存されている画像を選択することが出来る)
キャンバス部分で大きさ、位置、傾き等必要な編集を行う。
メニューバーの「ファイル」から「ホームページ・ビルダーの戻る」をクリックする。
以下ウイザードに従い、変更の保存、上書き保存を選択する