Webスタンダードテクニックユニット 教程7 ブラウザとソースコード
【教程7 ブラウザとソースコード】
今回から、いよいよHTML。
Dreamwerverを使用してHTMLの基本を覚えていきます。
前半は、前回の続きでIllustratorでポストカードの仕上げ。
後半が、HTMLの基本。
という授業内容でした。
"Webスタンダードテクニックユニット 教程7 ブラウザとソースコード"の詳細はこちら
Webスタンダードテクニックユニット 教程8 テーブルレイアウト
【教程8 テーブルレイアウト】
今日は、テーブルレイアウトです。
テーブルを構成するHTMLタグの細かな設定の前に、Dreamwerverの操作に慣れる、感覚をつかむという内容。
テーブルレイアウトにも様々なやり方があるので、Dreamwerverの操作方法のシュミレーションを兼ねて、どんどんテーブルでレイアウトしたページを作っていきテーブルと仲良くなるというスタンスで授業は進みます。
"Webスタンダードテクニックユニット 教程8 テーブルレイアウト"の詳細はこちら
Webスタンダードテクニックユニット 教程9 テーブルレイアウト、テーブルタグの詳細、FFFTP
【教程9 テーブルレイアウト テーブルタグの詳細、FFFTP】
今回も先週に続いて、テーブルレイアウトです。
先週は、Dreamwerverの操作に慣れる、感覚をつかむという感じでテーブルレイアウトをやりましたが、今回はテーブルを構成するHTMLタグの細かな解説を受けながらの授業でした。
またファイル転送ソフトFFFTPを使って受講生用に準備されているサーバーへのアップロードも行いました。
"Webスタンダードテクニックユニット 教程9 テーブルレイアウト、テーブルタグの詳細、FFFTP"の詳細はこちら
Webスタンダードテクニックユニット 教程10 テーブルレイアウト データ用テーブル、入れ子テーブル
【教程10 テーブルレイアウト データ用テーブル、入れ子テーブル】
今回も先週に続いて、テーブルレイアウトです。
テーブルを構成するHTMLタグの細かな解説を受けながらレイアウトのためのテーブルを理解していくという授業内容でした。
"Webスタンダードテクニックユニット 教程10 テーブルレイアウト データ用テーブル、入れ子テーブル"の詳細はこちら
Webスタンダードテクニックユニット 教程11 実践的レイアウト、デザイン
【Webスタンダードテクニックユニット 教程11 実践的レイアウト、デザイン】
今週からいよいよ本格的なデザイン、レイアウトを実践していきます。
今後、Webデザイナーとして作成するホームページの基本となる技です。
【実践的レイアウト、デザインの課題】
Fireworksで作ったパーツをスライスを切って書き出し、Fireworksでデザインした通りにDreamwerverと連動させ、1ピクセルも違わずにブラウザで表示させる技術を身につけること。
これは、実践のために身につけたい技術のひとつであり、これができればあとは、デザイン、レイアウトのセンスを磨き、どんどん作品を作っていくことができるとのこと。
"Webスタンダードテクニックユニット 教程11 実践的レイアウト、デザイン"の詳細はこちら
Webスタンダードテクニックユニット 教程12 実践的レイアウト FireworksとDreamwerverの連動
【Webスタンダードテクニックユニット 教程12 実践的レイアウト FireworksとDreamwerverの連動】
今週は、前回の続き。
自分のデザインしたレイアウトをブラウザで確実に表示させる超実践的な授業です。
"Webスタンダードテクニックユニット 教程12 実践的レイアウト FireworksとDreamwerverの連動"の詳細はこちら
【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】
【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】
今週から、もう一歩進んだ「実践的レイアウト、デザイン」に入ります。
目的は、ナビゲーションの役割や考え方を踏まえながら、0から自分のデザインでホームページを作る訓練。
初心者の実践的レイアウト、デザイン練習のコツは、
"【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】"の詳細はこちら
【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】
【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】
前回からの続きです。
表示させたボタンの対となるボタンを作りロールオーバーイメージを作ります。
Fireworksの同一画面でロールオーバーボタンを作成するミソは、レイヤーを整理して上手く使いこなすこと。
"【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】"の詳細はこちら
【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】
【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】
Fireworksでスライスをきり、書き出したパーツをDreamwerverで実装して、デザインしたパーツを1pxも違わずブラウザで確実に表示させるというサイト作り。
現在はこれらを完璧にできるようにとその過程を反復練習しながら、Fireworks、Dreamwerverの操作に慣れるという流れです。
今週は、先週、先々週に習った作業を反復練習、CSSの解説、キャッチコピー、テキストの配置などをしました。
"【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】"の詳細はこちら
【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】
【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】
先週作成したトップページを活かしながら複数ページ展開の方法を学びました。
コンテンツとしてCDジャケットと関連情報をテーブル（表組み）で入れていきます。あくまでのWeb2.0的なWeb制作のための準備という考え方です。
"【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】"の詳細はこちら
【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】
【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】
先週の複数ページ展開の続きです。
ホームページの基本となるレイアウトとコンテンツの関連情報を入れるフォーマットができたらあとは複製していくだけです。
後半は、トップページのポイントとなるアイコンを作成しました。
"【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】"の詳細はこちら
【Webスタンダードテクニックユニット 教程18 Flash】
【Webスタンダードテクニックユニット 教程18 Flash】
今週はいよいよFlashに入ります。
Flashをさわるのは初めてなので、ちょっとワクワク・・・。
Flashは、アニメーションのように1コマ1コマ作らなくても、人が設定することで勝手に計算しながら動いてくれるのが大きな特徴。
初めての「Flash」の授業の方針は、あえてローテクから。
まずは、3つの基本をマスターしていきます。
"【Webスタンダードテクニックユニット 教程18 Flash】"の詳細はこちら
【Webスタンダードテクニックユニット 教程19 Flash】
【Webスタンダードテクニックユニット 教程19 Flash】
今週はFlashの2回目。
ナビゲーションのエリアを使い文字の表現の仕方を交えながらFlashの基本を身につけていきます。
FireworksからWebサイトのヘッダー部分をコピーして、Flashにペースト。
タイトル部分に透明感をもたせ、動きの変化をつけていきます。
完成ファイルはこちら
"【Webスタンダードテクニックユニット 教程19 Flash】"の詳細はこちら
【Webスタンダードテクニックユニット 教程20 Flash】
【Webスタンダードテクニックユニット 教程20 Flash】
Flashの3回目。
先週の続きで、今週はヘッダー右側の「会社概要」などの5つのボタンにボタンタイプをつくり、ここに動きを入れていきます。
ページが表示された時、タイトル部分の動きが止まると同時くらいに上部から5つのボタンが順番におりてくるように設定。
マウスオーバー時のカラーにも変化をつけます。
完成ファイルはこちら
"【Webスタンダードテクニックユニット 教程20 Flash】"の詳細はこちら
【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スタンダードテクニックユニット 教程22 Flash・Fireworks】
【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】
Dreamwerverでswfファイルをhtmlに組み込み、複数ページ展開していく上で各ページが同じヘッダーだとつまらない・・
ということで今日は、Fireworksでの各ページ用のヘッダー画像（Flash swfファイル）のリサイズ、作成方法とFlashとの連動を学びました。
「Webデザイナースクール体験記」をはてなRSSに追加
