Webスクールレベルの授業が格安で学べるWebデザインのオンライン講座。Illustratorでロゴやパーツを作り、PhotoshopでWebデザイン、その後、HTML・CSSでのコーディングまでの現場レベルのWeb制作を効率的に学べる実践編 Webスクールレベルの授業が格安で学べるWebデザインのオンライン講座。

HOME >> Webデザイナースクール体験記スタンダードテクニックユニット >> 【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】

【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】

【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】
Webデザインスクール 名古屋 Flash・HTML・CSSDreamwerverでFlash(swfファイル)をhtmlに組み込み、複数ページ展開していきます。
これにCSSの適用も取りいれながらCSSの基本とDreamwerverでの操作方法も練習しました。
テーブルを使ったレイアウトからCSSレイアウトへの移行する過渡期の方法論。
簡素なテーブルに、CSSレイアウトを組み合わせてコーディングを行います。

【今日の授業内容】

Dreamwerver
まずトップページの作成。
これを別名保存して複数ページ作成していくという展開です。

・ファイルから新規作成。
index.html

・外部CSS 新規CSSルール
基本的にbodyは基本情報のみ。
ボックスとブロックに要素を入れていきます。

Webデザインスクール 名古屋 CSS

Webデザインスクール 名古屋 CSS

テーブルの挿入
Webデザインスクール 名古屋 Flash・HTML・CSS

このレイアウトをテーブルで組んでいきます。

3行1列のテーブルを挿入。
1行1列目にFlash navi.flaを挿入。

2行目にさらに1行2列のテーブルを挿入。
ここにナビゲーションやイメージ画像、テキストを入れていきます。

Webデザインスクール 名古屋 Flash・HTML・CSS

・CSS
テキスト部分にカスタムクラスを適用。
カスタムクラスは、スタイルを定義してからHTMLに反映させます。

Webデザインスクール 名古屋 CSS

Webデザインスクール 名古屋 CSS

・CSSの記述場所について
CSSの記述場所には、インライン、エンヘッド、リンクという記述方法がありますが、推奨されるのはリンクです。
初心者は、インライン、エンヘッドから覚えていくと、理解が深まるとのこと。

・インライン
各HTMLファイルの中に直接記述する方法です。
タグの数だけ書かなければならないためソースが増えてしまい、また修正も厄介です。

<h1 style="color: #333333">

・エンヘッド
各HTMLファイル内の<head></head>内に記述します。
複数のタグに対して設定をまとめて記述することはできますが、HTMLファイルの数だけ記述しなければいけません。
ページ間の整合性を保つのが大変です。

<style type="text/css"> </style>

・リンク
HTMLファイルから外部のCSSファイルにリンクする方法。
ブログなどではすべてこの方法がとられています。

複数のHTMLファイルから一つのCSSファイルにリンクすれば、ソースが節約でき、また、修正時にもCSSファイルのみを修正するだけですみます。

【HTMLファイル内】

<link href="style.css" rel="stylesheet" type="text/css">

【CSSファイル内】

body {
margin: 0px;
padding: 0px;
text-align: center;
}


今日までの授業で、いつも戸惑うのが、Fireworksでスライスを切り、HTMLに組み込む時。
CSSレイアウトとテーブルレイアウト。
HタグやPタグなどで構造的なHTMLのマークアップ。
このビジュアル情報は基本的にすべてCSSで設定してくことが王道なのですが、
例えば、マージンやフォント関連、背景色など直接テーブルに対してHTMLで併記することもある。

このあたりで、自分が習得すべきスキルは何を基準にすればよいのか?

プロの現場では、どうなっているのか?
複雑なソースコードとなるテーブルレイアウトでも現場で通用するのか?

これについて講師に質問したところ、依頼されるサイトのタイプや予算、納期によって違ってくるそうです。

Web2.0的な(CSSレイアウト)を要求される場合もあれば、プログラム系でコンテンツを作るため、テーブルレイアウトを必須とする場合、予算や納期が少なくて簡単にテーブルレイアウトで組んでいく場合・・
など様々なケースがあるとのこと。

こういったケースに対応できるよう、従来の手法(テーブルレイアウト)もWeb2.0的(CSSレイアウト)な手法も幅広くマスターしていくべきなのでしょう。


Webデザイナースクール探しのコツ

ウェブデザイナースクールを探す時、まずあなたはどんな情報を重視しますか?

Webデザイナーと一言でいっても、 Webプロデューサー、Webディレクター、Webプログラマー、派遣でWeb制作、企業内でWeb担当・・といったように就職先や職種など様々な道があります。

無駄なく、すべてを学べる最適な学習プランを見つけるコツはWeb講座専用の資料を入手することです。

Web講座専用の資料を請求すると、Webデザイナーとして目指すクリエイターになるには、何を勉強し、どんなスキルを習得すればよいのか?
また、それには費用はいくらかかるのか?
など無駄なく、すべてを学べる最適な学習プランをチェックできます。

また、講座の詳しい説明はもちろん、修了生の感想や活躍状況など ネットや広告には書かれていないプロならではの業界最新事情なども手に入ります。

ヒューマンアカデミーには、無料資料が用意されていますので、スクール探しの情報収集として、まずは最新情報を無料で取り寄せてみましょう!!


ウェブデザイナー スクール ヒューマンアカデミー名古屋


ウェブデザイナー スクール ヒューマンアカデミー名古屋ヒューマンアカデミWeb講座資料請求(無料)>>>

ウェブデザイナー スクール ヒューマンアカデミー名古屋Webのお仕事とは?

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web講座コース料金一覧

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web講座の特徴・講師紹介

ウェブデザイナー スクール ヒューマンアカデミー名古屋Web関連試験資格情報


ウェブデザイナー スクール ヒューマンアカデミー名古屋ヒューマンアカデミーWeb講座資料請求(無料)はこちらから>>>

« 【Webスタンダードテクニックユニット 教程20 Flash】 | HOMEへ | 【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】 »

【Webデザイナースクール体験記スタンダードテクニックユニットカテゴリーの関連記事】

【Webスタンダードテクニックユニット 教程22 Flash・Fireworks】
【Webスタンダードテクニックユニット 教程21 Flash・HTML・CSS】
【Webスタンダードテクニックユニット 教程20 Flash】
【Webスタンダードテクニックユニット 教程19 Flash】
【Webスタンダードテクニックユニット 教程18 Flash】
【Webスタンダードテクニックユニット 教程17 実践的レイアウトその6】
【Webスタンダードテクニックユニット 教程16 実践的レイアウトその5】
【Webスタンダードテクニックユニット 教程15 実践的レイアウトその4】
【Webスタンダードテクニックユニット 教程14 実践的レイアウトその3】
【Webスタンダードテクニックユニット 教程13 実践的レイアウトその2】
Webスタンダードテクニックユニット 教程12 実践的レイアウト FireworksとDreamwerverの連動
Webスタンダードテクニックユニット 教程11 実践的レイアウト、デザイン
Webスタンダードテクニックユニット 教程10 テーブルレイアウト データ用テーブル、入れ子テーブル
Webスタンダードテクニックユニット 教程9 テーブルレイアウト、テーブルタグの詳細、FFFTP
Webスタンダードテクニックユニット 教程8 テーブルレイアウト
Webスタンダードテクニックユニット 教程7 ブラウザとソースコード


HOMEへ   ▲画面上へ
Hatenaブックマークに追加 このエントリーをHatenaブックマークに追加

Yahoo!ブックマークに登録 Yahoo!ブックマークに登録  ブックマークに追加する

トラックバック

このエントリーのトラックバックURL:
http://www.pro-web.info/mt/mt-tb.cgi/16

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)