超ド素人nagomiがWEBデザイナー目指して学校通ってみました。 半年勉強して気づけば私もWEBデザイナー♪人生なんとかなるものですね★ 新米デザイナーになったnagomiのお仕事や勉強したことなどのメモブログです。これからどういう風になっていくのか楽しみです★
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Dreamweaverでテーブルコーディング(復習 その9)
最近主旨のはっきりしない記事ばっかり書いてたらアドセンスが変なことになってます。加えてアマゾンの広告枠も最近導入してみたんだけど・・・
なんだかこのブログの主旨とマッチしないのですよね。
エントリー内容がよくないのかなぁ?

という訳で久々に復習です。
今日はテーブルコーディング。
WEB2.0が進む中、テーブルなんて今更?とも思ったりもするけど
まだまだテーブルは消えないと思うし、
昔のサイトはみんなテーブルだしやっぱり知っておかなきゃだもんね!

今日はかるーく画像なしで行ってみます。
後日詳細版ってことで、
実際にコーディングしつつ実践版やるつもりです☆


◆◆◆◆◆◆
マクロミル↓
アンケート調査のサイトというのかな?今色んなところがリサーチしてポイント貯めてってやってますけど、ココが一番アンケート数が多い気がします。(私も登録してる★)
なので、いつ小金が貯まるかわからないけど、お小遣い稼ぎにどうぞ!


◆◆◆◆◆◆
それでは本格的にDreamweaverでテーブルコーディング。


・起動したら→サイトの管理

・勝手にCSSを生成しないように設定
 編集→環境設定→一般
 →「HTMLタグの代わりにCSSを使用」のチェックをはずす

・タイトルをつける
 必ず、タイトルはつけるようにしましょう
 「無題ドキュメント」は、NG!

・テーブルの考え方
 全体を見たときに、どこで分割されているか。
 何列、何段で構成されているか。
 おおざっぱでいいので、イメージしてみる。



テーブルコーディングする際、
どこで段組するかをまず考えてからですね。確かに。

こうやっておさらいしてみると色々参考になります。
実際にコーディングの流れとしては、
画像がないのでわかりにくいと思うけど、
とりあえず並べちゃいます。


・修正→ページプロパティ
 マージンの設定
 背景イメージの設定
 テキストリンクの色の設定

・テーブルを作成

・幅を設定

・画像の配置方法 その1
 画像を挿入したいセルにカーソルを置き、
 右のファイルパレットからドラッグ&ドロップ
・画像の配置方法 その2
 画像を挿入したいセルにカーソルを置き、
 レイアウトメニューから挿入(木の絵のボタン)

・代替(alt属性)
 画像を挿入したら、代替も入れておきましょう。
 画像が見えない時などに表示してくれるテキストです。
 また、音声読み上げにも使われます。

・テーブルを中央に寄せる
 テーブル全体を選択し、下部のプロバティから
 「行揃え」を中央にする。

・行の追加
 *Ctrl+M
 *セルにカーソルを置き、右クリック→テーブル→行の挿入
 *セルにカーソルを置き、修正→テーブル→行の挿入



こんな感じでテーブル組んで画像も配置。
飛ばし過ぎ?
まぁ復習なんでOKでしょ。


◆テーブルの選択の仕方
 ・選択したいテーブルの枠をクリック
 ・選択したいテーブルの中のどこかにカーソルを置き、画面の下(プロパティの上)

をクリック
 ・選択したいテーブルの外側からクリック&ドラッグ

◆セルの分割
 分割したいセルにカーソルを置き、プロパティメニューから
 セルの分割ボタンをクリック(プロパティの左下)

◆spacer.gif
 つっかえ棒みたいなもの?
 透明のつっかえ棒で、バランスを調整します

◆ボタンのロールオーバーを作ろう!(カーソルを上に持ってきたときに変わる)
 ウィンドウ→ビヘイビアパレットを出す
 -ロールオーバーさせたい画像を選択
 →ビヘイビアパレットのプラスボタンで設定

・プリロードイメージ
 スムーズに、ロールオーバーをします。
・onMouseOutでイメージを復元
 マウスをはずしたら、元の画像に戻します
 *設定を削除したい-削除したいリストを選択し、マイナスボタンをクリック

◆検索および置換
 ・文字を置き換える
 ・同じものを一括で、ほかのものに置き換えた時に使用。
 (例)<font>テキスト</font>→テキストだけにしたい場合。
  大量の変更をする場合にとても便利。
  ※しかし、置換に失敗すると、激しくくずれる場合があるので慣れるまでは、データのバックアップをとってから置換しましょう。

◆CSS
・以上のテーブルコーディングで設定したものをすべてCSSで設定することができます。

◆フォントの指定
 ピクセルで指定するとIEで文字のサイズが変わらない。(あまりお勧めできない)
 アクセスビリティを考慮して、サイズを変えられる用にした方がよい。
 →emで指定。0.75emとフォントサイズ2と同じ位。
  1を基準に。大きくしたい場合は1.25em。
 ・emは継承される。重ねて設定するとさらに小さくなっていきます。
 (例)bodyで0.75emを設定→その中のクラスで0.75emを設定
  →クラスで設定した文字は、さらに小さくなります。





こんな感じ。
フォントの指定とか、こんなに初期で勉強してたんだね。
やっぱり当事はアタマに入りきっていなかったようです・・・。
今日はこの辺で。



banner_02.gif
スポンサーサイト

コメント

管理人にのみ表示


トラックバック
TB*URL

© 初心者WEBデザイナーのメモ帳. all rights reserved.
Page top
FC2 BLOG
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。