おためし受講中

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

「HTML文書を正しい構文で組み立てる」必要スキル【HTML編】完成した、html5文書にスタイルシートを当てていきます。
■ 作成した「ワイヤーフレーム」HTMLとCSSでデザインを反映していきましょう
 

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

この全6回シリーズは、3回連続授業の後、「WEBデザインのためのPhotoshop全3回」をはさみ、その後2回実施されます。その後「jQueryの基礎を理解する全6回」の6回目でweb制作ワークフロー全行程完了となります。シリーズを通して授業を受けると小規模なwebサイトを制作するスキルを身に付ける事ができます。
 
途中からでも参加できるように、演習課題はそこまでの段階が出来上がった物を配布しています。録画が受講できるようであれば、【WEBデザインに必要なワイヤーフレーム全3回】の事前受講をオススメします。
 

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

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)
 
この演習では、5番の開発の部分です。
ワイヤーフレームのレイアウト通りにコーディングするスキルを身につけます。
 

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

1)adobe DreamWeaverCC
下記のurlより、ダウンロードしてください。
DreamWeaverを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。(既に旧ヴァージョンのadobe DreamWeaverを使用して授業を受ける事も可能です。)
 
・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。
 
・初めてDreamWeaverに触れる人は、以下の公式サイトのトレーニングビデオやチュートリアルをを見てDreamWeaverの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。DreamWeaverではどんな事ができるか知っておきましょう。
 
【DreamweaverでWebページを作成する方法】
 
【Learn Dreamweaver CC】(Adobe TVのDreamweaverチュートリアル)
 
【Dreamweaver ヘルプ】
 
【Dreamweaver CC の一般的なキーボードショートカット】

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

学生代表

  • 未定

    未定

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:48  (00:12 ~ )
    前回の復習:CSSはうまくあたっていますか?
    01:58  (02:00 ~ )
    chomeの拡張機能「Awesome Screenshot」を入れておこう
    00:47  (03:58 ~ )
    カンプとはなんだろう
    01:15  (04:45 ~ )
    Dreamweaverを起動しよう
    01:36  (06:00 ~ )
    CSSスタイルの中のスタイルシートの添付をしよう
    02:24  (07:36 ~ )
    コメントアウトの出し方
    04:15  (10:00 ~ )
    YouTubeの動画を「埋め込みコード」を使って貼り付けてみよう
    01:48  (14:15 ~ )
    動画のサイズをカスタマイズしてみよう
    01:05  (16:03 ~ )
    動画の埋め込みコードに「https:」を入れよう
    01:27  (17:08 ~ )
    Google Mapsを貼り付けよう
    05:40  (18:35 ~ )
    【後半】質疑応答
    Q:CSSでレイアウトを自由に組めるようになるにはどのような勉強が効果的ですか?
    01:35  (24:47 ~ )
    Q:前回ちょっとやってみたところ一番左上のlogoMarkが微妙に下書きからずれてしまいました。それだとCSSかHTMLが間違ってるってことになりますよね?
    01:31  (26:22 ~ )
    Q:ユーチューブ以外でもwebに張り込みはできますか?
    01:06  (27:53 ~ )
    Q:今回のサンプルでは商品アイテムをfloatで並べてますが、右端のものはmargin-rightなしにするのは、どうするのが一般的でしょうか?
    01:21  (28:59 ~ )
    レポート課題発表
      (30:20 ~ )