第8回勉強会

日　時：
2013年1月28日　13:30～17:00
場　所：
かるがも 団体交流室Ⅲ
出席者：
小野、福田、北條、二神、河野（敬称略）

D班ホームページの担当変更

トップページ　北條さん→河野さん
活動報告　河野さん→北條さん

新規ページの作成

補修講座第２日目のチラシをTHML化した。
作成準備（使用画像の用意　ワード文書中の画像の取り出し）

  1. ワードを開き「ファイル」から名前を付けて保存を選択する
  2. 適当な保存先に、「ファイルの種類」を「webページ（フルター後）」として保存する。
  3. 保存先に出来た「files」フォルダーの画像が保存されるので、サイトで使用している画像用のホルダーの移動し、わかりやすいファイル名に変更する。（今回はkairann.pngおよびwine.pngとした）

ページの作成

  1. ホームページビルダーでサイトを開き新規ページを 作成する。
  2. ユニバーサルセレクタでマージン０、パディング０を設定する
  3. レイアウトコンテナmainを作成し、幅640pxに設定して、マージンを自動に設定して中央に配置する 。
  4. 文字を入力する。（今回はワード文書全体をコピーして一旦メモ帳に貼り付け、メモ帳の文書をコピーしてビルダーの新規ページに貼り付けた ）
  5. マークアップ
    1. 「パソボラ・・・・お知らせ」をh1に
    2. 「今月は・・・・パーティーになります。」をｐに
    3. 「申込締切日：4月30日」をｐに
    4. 「担　当：帷子地区（自分の名前）」をｐに
    5. 「電話 123－4567」をｐに
  6. 「・・・・パーティーになります。」の後ろにカーソルを置き、2列3行の表を挿入し、完成図のに従い各セルに文を挿入する
  7. 文頭に画像「kairann.png」を挿入する
  8. 表の直下に画像「wine.png」を挿入する
  9. 回覧画像をpタグで括りidをkairannに指定して、下表のcssを設定する。
  10. h1に下表のcssを設定する。
  11. 最初のpにidをsetumeiに指定して、下表のcssを設定する。
  12. tale及びtdに下表のcssを設定する。
  13. ワインの画像にidをwineに指定して、下表のcssを設定する。
  14. 2番目のpにidをmousikomiに指定して、下表のcssを設定する。
  15. 4番目のpにidをdenwaに指定して、下表のcssを設定する。
* パディング 0px
マージン 0px
body フォント HG丸ｺﾞｼｯｸM-PRO, sans-serif
行の高さ 2倍
div#main マージン 20px auto
幅 640px
h1 サイズ 20pt ;
表示 inline
下ボーダー 3px　 double　 black;
左マージン 100px
p サイズ 12pt
p#kairan 水平方向の配置 right
右マージン 20px
下マージ 50px
#setumei 水平方向の配置 center
table 幅 90%
サイズ 16pt
ボーダー 3px double lime
内枠線の表示 重ねて表示
マージン 20px auto 50px auto
td ボーダー 3px double lime
パディング 5px
# wine 回り込み 右
p#mousikomi 上マージン 120px
p#denwa インデント 4em

作成例