第4回目
日 時：2012年11月29日 13:30～16:00
場 所：団交室Ⅰ Ⅱ
出席者：受講者 27名、HPWG 9名
講 師：川上 教子、小野惠一
内 容：第2章：第3章：スタイルシートで文章を読みやすくする(その２)、第9章：サイトを作る、第10章：サイトの転送
- 段落（ｐタグ部分）の左右に余白をつける
p要素の属性画面からスタイルの編集画面を出す。スタイルの設定画面で、「レイアウト」タブをクリックし、「左方向」のマージンの部分に１０％に設定する。「右方向」も同様に１０％に設定する。 - ブロック化する
- 編集画面でブロック化したい部分を選択する。（ここでは大見出しの下の「Webサイト・・・」から中見出し前の・・・検証してみましょう。」まで ）
- メニューバーの「挿入」から「レイアウトコンテナー」 をクリックする。
- 更に中見出しの下の「今回、この企・・・」からアドレスの前の「・・・Netscape7.01付属） 」迄を選択して、上記と同様にメニューバーの「挿入」から「レイアウトコンテナー」 をクリックする。
- 上記操作で選択した2か所がブロック化される。（ソースではそれぞれの部分が <div>と</div>で囲まれる）
- ブロックにクラスを付ける
- ソースで<div>の部分を2か所共<div class="honbun">に書き換える
- 上書き保存する
- 段落ｐに設定した条件をブロックに変更
- ソーススタイルシート部分の「p{ line-height : 1.5; margin-left : 10%; margin-right : 10%;
}」を「div.honbun{ line-height : 1.5; margin-left : 10%; margin-right : 10%;
}」に書き換える
（pをdiv.honbunにするだけでOK） - 段落に設定した行間と左右の余白がリスト部分にも適用される。
- ソーススタイルシート部分の「p{ line-height : 1.5; margin-left : 10%; margin-right : 10%;
}」を「div.honbun{ line-height : 1.5; margin-left : 10%; margin-right : 10%;
}」に書き換える
- top.htmlに対するオマジナイの設定
- top.htmlをビルダーで開き、文末に「ホームへ戻る」と入力する。
- 入力した部分を選択して右クリックから「リンクの挿入」をクリックする
- 現れたダイアログの「ファイル名」欄に「../../index.html」と入力し「OK」ボタンをクリックする。
- 上書き保存してページを閉じる
- このオマジナイは各自のページを転送した時、パソボラで用意したホームページにジャンプするためのリンクです。
- サイトの作成・転送設定
- メニューバーの「サイト」から「サイトの新規作成」をクリックし、下記のとおりウイザードに従って進める。
- サイト名欄にサイト名を入力し（日本語で分かり易いものとする）［次へ］をクリックする。
- 「既存のページをトップページとして使用する」を選択し、「参照」をクリックして「***/top.html」（自分で作ったページのトップページ）を選択して、「次へ」をクリックする。
- 「今から転送設定をする」を選択して、「次へ」をクリックする。
- 新規に転送設定を登録する」を選択して、「完了」をクリックする。
- 「その他のプロバイダを使用する」を選択し、名前がサイト名と同じであることを確認して、「次へ」をクリックする。
- 「その他のプロバイダを使用する」を選択し、FTPサーバー名、FTPアカウント名、FTPパスワードを入力して「次へ」をクリックする。
- 「参照」をクリックして、自分の名前のフォルダーを選択し「完了」をクリックする。
- ウイザードが終了して、サイトが作成され、ビジュアルサイトビューが開いてトップページからのサイト構造が表示される。
- メニューバーの「サイト」から「サイト転送」をクリックする。
- 現れた「ページ/サイト転送」ダイアログで「転送設定」「FTPサーバー名」「FTPアカウント名」「転送先フォルダ」「転送ファイル一覧」に間違いのないことを確認して「転送」ボタンをクリックする。
ここで「転送先フォルダ」が自分の名前のフォルダーであることを十分確認願います。 - ブラウザを起動し、正しく転送されていることを確認する。
正しく転送されていてもキャッシュが働き以前に閲覧したままの場合があるので、転送した状態と異なるときは「更新」をクリック（又はF5キーを押す）して 確認する。
本日の成果：受講者27名中21名転送成功、成功率78%でした。班別にはA班5/6、B班4/5、C班3/6、D班5/6、E班4/4でした。また転送成功者21名中5名はホームページへのジャンプに失敗でした。
失敗箇所：<a href="../../indexhtml">、<a href="../../index.htmi">、<a
href="file:///D:/index.html">、リンクの記載無し。
また左右の余白が正しく設定されていないページも見受けられ、不都合箇所の修復を期待します。