【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全６回

小規模なWebサイトを作れるようになるための6回授業

１限目　Webデザインを始めたい方に贈る、「HTMLとCSSって何」【概要理解とツール導入】

HTMLとCSSについて

２限目　Webデザインを始めたい方に贈る、「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】

【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全5回の2回目です。

３限目　Webデザインを始めたい方に贈る、「HTMLが嫌いにならない正しい構文」必要スキル【CSS編】

2回目の「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】で完成した、html5文書にスタイルシートを当てていきます。

４限目　HTML＋CSSのコーディングルールについて学ぶ

【HTMLとCSSを使って、150分で簡単なWEBサイト制作】全6回の4回目です。

【WEBデザインのためのPhotoshop】全3回で制作したカンプからビルボードとサムネールをスライスで切り出しました。これでサイトを制作する準備が整いました。

jQueryを設置してインタラクティブなサイトを完成させる前に、htmlとcssのコーディングルールについて詳しく勉強して行きましょう。

５月７日の「Webデザインの骨組み「ワイヤーフレーム」を学ぼう」からadobe クリエイティブクラウドの体験版を使用してこられた方は、体験期間の１ヶ月が終了していますので、生授業ではコーディングツールはSublime Text2を使用していきます。

adobe クリエイティブクラウドは月単位の課金が可能です。既にDream Weaver（ヴァージョンは問いません）をお持ちの方、adobe クリエイティブクラウドに課金して利用を続行する方はDream Weaverを使用して頂いてかまいません。

５限目　カンプからスライス切り出しした画像をwebページに組み込む「HTML＆CSS特訓」

サイト内への画像の配置や、デザインの反映など、ここまでのHTMLとCSSの知識を使ってコーディングしながら慣れていきましょう。

（現在、以下の２つの授業は無料で受講が可能です）

全くHTMLとCSSに触れた事の無い方は、下記の授業で勉強して望むと、より学べます。

■html+cssを挫折した全ての人のための基礎実習
■挫折した人のための、初心者速習html+css【4ページのサイトマルッと制作編】

【WEBデザインのためのPhotoshop】で制作したカンプから切り出したビルボード及び、サムネールをwebページ上に設置してコーディングする方法を学びます。

※ 授業中で作るサイトはこんな感じです

６限目　jQueryに取り組む前の「HTML＆CSS特訓」

前回の授業同様、サイト内への画像の配置や、デザインの反映など、ここまでのHTMLとCSSの知識を使ってコーディングしながら慣れていきましょう。

（現在、以下の２つの授業は無料で受講が可能です）

全くHTMLとCSSに触れた事の無い方は、下記の授業で勉強して望むと、より学べます。

■html+cssを挫折した全ての人のための基礎実習
■挫折した人のための、初心者速習html+css【4ページのサイトマルッと制作編】

次は、設置した画像をインタラクティブに動かして行く【jQueryプラグインの設置に必要なhtmlとcssの知識】を学びますので、この授業ではしっかり画像の配置を学んでおきましょう。

途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインのためのPhotoshop】全3回の事前受講をオススメします。

サイト制作の大まかな流れは、下記の様な物になります。

１）クライアント（お客様）へのヒヤリング
２）ターゲット設定
３）サイト設計（ワイヤーフレーム）
４）制作仕様書策定（デザインルール、コーディングルール策定）
５）開発（デザイン＆コーディング）
６）ローカルテスト
７）テストサーバーレビュー（クライアントチェック）
８）リリース（本サーバーアップ）
９）ランニング（SEO解析）
 
この演習では、5番の開発の部分です。
完成した静的ページをユーザーさんのアクションでインタラクティブに動くページにブラッシュアップしていきます。

受講にあたって準備するもの

1）Sublimeのインストール（授業中コードを打つのに使います）
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。
※DreamWeaverが慣れている人は、こちらを使用されてもかまいません。

2）解凍ツール （授業中配布する教材の解凍に使います）
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。（Mac OSXの場合はダブルクリックで展開します。windows7～の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK）

3）その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/