基金訓練に行ってきました。(37日目)


基金訓練(Webデザイン・プログラミング科)の37日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。

本日の内容は下記のとおりです。

1.表(テーブル)の作成

<caption align=”X”>表題1</caption>     表題
<table border=”ⅰ” cellspacing=”ⅱ”>   表開始
<tr>                      1行目開始
<td>Ⅰ</td>                1つのセル
<td>Ⅱ</td>                1つのセル
</tr>                     1行目終わり
<tr>                      2行目開始
<td>Ⅲ</td>
<td>Ⅳ</td>
</tr>                     2行目終わり
<tr>
<td>Ⅴ</td>
<td>Ⅵ</td>
</tr>
</table>

表題1
表題2
表題3
  • X 表題の位置
    top:上中央
    bottom:下中央
    left:上左
    right:右左
  • Y 表題
  • ⅰ 表組みの外枠の太さ(ピクセル)
  • ⅱ セル同士の間隔(ピクセル)

横とのセルの連結(上の表題2)

<td colspan=ⅰ>Ⅰ</td>
ⅰ:連結数

縦とのセルの連結(上の表題3)

<td rowspan=ⅰ>Ⅰ</td>
ⅰ:連結数

2.スタイルシートでのサイズのあらわし方

絶対指定(長さを直接指定)

  • in:インチ
  • mm:ミリメートル
  • cm:センチメートル
  • px:ピクセル

相対指定(基準となる長さの倍数で指定)

  • ex:小文字の「x」の文字高さ基準
  • em:文字高さ基準
  • px:ピクセル基準

今日のポイント

  • SEO対策として、外部CSSを用いるのがよい。
  • テーブルを横に並べたい時は、入れ子構造にする。
  • IE6の互換モードでは、ボックスの寸法の基準が正規とは違うので要注意。

カテゴリー: 職業訓練 | コメント / トラックバック: 0個

基金訓練に行ってきました。(36日目)


基金訓練(Webデザイン・プログラミング科)の36日目に行ってまいりました。
本日は、Adobe Photoshop CS4の実習です。

本日の内容は下記のとおりです。

1.イラストレーターからフォトショップへのパーツのコピー。

イラストレーター上で、Ctrl+Cでパーツをコピーし、フォトショップ上で、Ctrl+Vで貼り付ける。

貼り付け時にどういう形式で貼り付けるか選択できる。

・スマートオブジェクト
 イラストレーターで後から修正可能。
・ピクセル
 ビットマップデータとして貼り付け。
・パス
 パスとして貼り付け。
・シェイプレイヤー
 フォトショップでさらに加工したい場合有効。

2.文字について・・・クライアントに見せる時、実際の見た目に近づけるため。

・文字を画像として扱う。・・・見た目重視
 文字パネルの「アンチエイリアスの種類の設定」をシャープに。
・文字をHTML上の文字データとして扱う。・・・文字情報重視
 文字パネルの「アンチエイリアスの種類の設定」をなしに。

3.立体的なボタンの作成

長方形ツールで四角形を作る。
レイヤースタイルの「ベベルとエンボス」で、四角形に立体感が出る。
文字ツールで文字を書く。
レイヤースタイルの「シャドウ(内側)」距離1px、サイズ1pxで、彫り込み文字のようになる。

カテゴリー: 職業訓練 | コメント / トラックバック: 0個

基金訓練に行ってきました。(35日目)

基金訓練(Webデザイン・プログラミング科)の35日目に行ってまいりました。

本日は、Adobe Dreamweiver CS4とHTMLプログラミングの実習です。

本日の内容は下記のとおりです。

  1. text-align:center
    • 文字を中央に。
  2. background-image:url(xxx)
    • 背景画像を指定。
    • xxx 画像の場所。(相対位置または絶対位置)
  3. background-repeat:xxx
    • 背景画像の繰り返し指示。
    • xxx no-repeat 繰り返しなし、repeat-x X方向に繰り返し、repeat-y Y方向に繰り返し
  4. background-position:xxx yyy
    • 背景画像の位置を指示。
    • xxx X方向の位置、yyy Y方向の位置
  5. line-height:xxx
    • 行送り指示。
    • xxx フォントサイズに対する倍数指定
  6. margin-right:auto;
    margin-right:auto
    • ブロックを中央寄せにする。

今日のポイント

  • 大体のブラウザの、標準フォントサイズは、16px。
  • 16pxの75%で、ほぼ、12pxになる。
カテゴリー: 職業訓練 | コメント / トラックバック: 0個