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

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

１．表(テーブル)の作成

<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の互換モードでは、ボックスの寸法の基準が正規とは違うので要注意。

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

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

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

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

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

・スマートオブジェクト

　イラストレーターで後から修正可能。

・ピクセル

　ビットマップデータとして貼り付け。

・パス

　パスとして貼り付け。

・シェイプレイヤー

　フォトショップでさらに加工したい場合有効。

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

・文字を画像として扱う。・・・見た目重視

　文字パネルの｢アンチエイリアスの種類の設定｣をシャープに。

・文字をHTML上の文字データとして扱う。・・・文字情報重視

　文字パネルの｢アンチエイリアスの種類の設定｣をなしに。

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

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