Webデザイナースクール体験記の新着記事10件
【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】
【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】
Dreamwerverでswfファイルをhtmlに組み込み、複数ページ展開していく上で各ページが同じヘッダーだとつまらない・・
ということで今日は、Fireworksでの各ページ用のヘッダー画像(Flash swfファイル)のリサイズ、作成方法とFlashとの連動を学びました。
"【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】"の詳細はこちら
【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】
【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】
DreamwerverでFlash(swfファイル)をhtmlに組み込み、複数ページ展開していきます。
これにCSSの適用も取りいれながらCSSの基本とDreamwerverでの操作方法も練習しました。
テーブルを使ったレイアウトからCSSレイアウトへの移行する過渡期の方法論。
簡素なテーブルに、CSSレイアウトを組み合わせてコーディングを行います。
"【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】"の詳細はこちら
【Webスタンダードテクニックユニット 教程20 Flash】
【Webスタンダードテクニックユニット 教程20 Flash】
Flashの3回目。
先週の続きで、今週はヘッダー右側の「会社概要」などの5つのボタンにボタンタイプをつくり、ここに動きを入れていきます。
ページが表示された時、タイトル部分の動きが止まると同時くらいに上部から5つのボタンが順番におりてくるように設定。
マウスオーバー時のカラーにも変化をつけます。
完成ファイルはこちら
"【Webスタンダードテクニックユニット 教程20 Flash】"の詳細はこちら
【Webスタンダードテクニックユニット 教程19 Flash】
【Webスタンダードテクニックユニット 教程19 Flash】
今週はFlashの2回目。
ナビゲーションのエリアを使い文字の表現の仕方を交えながらFlashの基本を身につけていきます。
FireworksからWebサイトのヘッダー部分をコピーして、Flashにペースト。
タイトル部分に透明感をもたせ、動きの変化をつけていきます。
完成ファイルはこちら
"【Webスタンダードテクニックユニット 教程19 Flash】"の詳細はこちら
【Webスタンダードテクニックユニット 教程18 Flash】
【Webスタンダードテクニックユニット 教程18 Flash】
今週はいよいよFlashに入ります。
Flashをさわるのは初めてなので、ちょっとワクワク・・・。
Flashは、アニメーションのように1コマ1コマ作らなくても、人が設定することで勝手に計算しながら動いてくれるのが大きな特徴。
初めての「Flash」の授業の方針は、あえてローテクから。
まずは、3つの基本をマスターしていきます。
"【Webスタンダードテクニックユニット 教程18 Flash】"の詳細はこちら
【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】
【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】
先週の複数ページ展開の続きです。
ホームページの基本となるレイアウトとコンテンツの関連情報を入れるフォーマットができたらあとは複製していくだけです。
後半は、トップページのポイントとなるアイコンを作成しました。
"【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】"の詳細はこちら
【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】
【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】
先週作成したトップページを活かしながら複数ページ展開の方法を学びました。
コンテンツとしてCDジャケットと関連情報をテーブル(表組み)で入れていきます。あくまでのWeb2.0的なWeb制作のための準備という考え方です。
"【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】"の詳細はこちら
【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】
【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】
Fireworksでスライスをきり、書き出したパーツをDreamwerverで実装して、デザインしたパーツを1pxも違わずブラウザで確実に表示させるというサイト作り。
現在はこれらを完璧にできるようにとその過程を反復練習しながら、Fireworks、Dreamwerverの操作に慣れるという流れです。
今週は、先週、先々週に習った作業を反復練習、CSSの解説、キャッチコピー、テキストの配置などをしました。
"【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】"の詳細はこちら
【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】
【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】
前回からの続きです。
表示させたボタンの対となるボタンを作りロールオーバーイメージを作ります。
Fireworksの同一画面でロールオーバーボタンを作成するミソは、レイヤーを整理して上手く使いこなすこと。
"【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】"の詳細はこちら
【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】
【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】
今週から、もう一歩進んだ「実践的レイアウト、デザイン」に入ります。
目的は、ナビゲーションの役割や考え方を踏まえながら、0から自分のデザインでホームページを作る訓練。
初心者の実践的レイアウト、デザイン練習のコツは、
■記事一覧 を見るには
>>Webデザイナーサイトマップへ
