2009-02-01から1ヶ月間の記事一覧

Flashクロスフェードの練習

先生のブログより、Flashで消えながら次の写真へ変化させる練習をしました。インスタンスが同じタイミングで表示が変わるように設定してから時間軸をずらす事が良く分かりました。 1.写真をライブラリに読み込ませ、レイヤーごとに写真を配置してシンボルに…

WEBデザイン授業 7日目

Flash Flashは本を見ていると難しく感じましたが、実際に作業をしながらだったので分かり易かったです。 以前、Flashで「進む」と「戻る」のページを作成した事があったのですが、最後が上手くいかず「進む」ボタンを消していたのですが今回の授業でどうした…

テーブルレイアウトのコーディング

昨日の画像を書きだしてテーブルレイアウトのコーディングをしました。テーブルで空きをあける場合はCSSで設定せず、HTMLに直接、幅や高さを指定する。 HTML <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </meta></head></html>

テーブルレイアウト

「銀座菓楽」のサイトを利用させて頂きます。スライスして画像のみを書き出します。 この場合3つのテーブルに分けて作ります。 1つ目のテーブル(ロゴとナビゲーション、メインイメージ) 2つ目のテーブル(トピックスとバナー) 3つ目のテーブル(著作…

WEBデザイン授業 6日目

今日は主にテーブルレイアウトについて勉強しました。アクセシビリティ、ユーザビリティ、Photoshop、Fireworksで作成するスライスの違いや、スペーサーGIFを入れる意味、パターンの作り方などとても充実した1日でした。特にテーブルについて分からなかった…

IllustratorデータからPhotoshopデータへ書き出し

Photoshopデータにしてガイドを引きました。ビュー→スナップになっているのを確認して、レイヤーを選びCtrl+クリックで選択してガイドを引く。

ワイヤーフレーム

ワイヤーフレーム作りました。後程詳しい作業過程をのせます。

Illustratorでワイヤーフレームを作成

1.Illustratorでワイヤーフレームを作り、書き出し→ファイルの種類:psd→カラーモード:RGBを選ぶ→レイヤー保持にチェック→アンチエイリアスをオフにする。 2.Photoshopで開くとレイヤーが分かれているので、Ctrl+クリックで選択してガイドを引くとスナップ…

WEBデザイン授業 5日目

ワイヤーフレームからカンプ作成 Illustrator 1.Firefoxのアドオン「Pearl Crescent Page Saver Basic 2.0」からページ全体のキャプチャーを取る。http://pearlcrescent.com/products/pagesaver/ 2.新規ファイルに配置し、リンクのチェックを外して、テンプ…

h1の意味とSEO

h1の意味 本文の中の重要なキーワードを含めた一文。本文のキーワドと見出しのキーワードが一致するように記述。この一致がとても大切。 kyewords <meta name="kyewords" content="○○,○○,○○,○○,○○" /> キーワードは5個記述する。 description <meta name="description" content="○○○○○○" /> キーワードを含めた文章で100文字程度作成。各ページに合わせた内</meta></meta>…

XHTML内に記述した画像置換

2つの画像をXHTML内に記述して画像を切り替えるやり方です。今日はノートを見ないで打てるようになるまでを目標に、もくもくとタグ打ちの練習をしました。次に何を打てば良いかが分かってくると早く打てました。 HTML <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head></html>

CSSによる画像置換

2つの画像を用意して、CSSで背景画像に記述して切り替えるやり方です。 名前をclassで指定して画像置換の練習をしました。「#case1」、「#case1 ul」に全体の横幅と高さを記述。「#case1 ul li a」には1つの画像の横幅と高さを指定。「display:block;」と「…

WEBデザイン授業4日目

今日はCSSを使った画像置換、単純なJavascriptの画像置換、ナビボタンの作成、h1の意味、Daniel Nolan「rollover.js」ロールオーバーの置換、Dreamweaverの使い方を勉強しました。最後にロールオーバーの置換がうまくいかなかったので、忘れないうちに画像を…