HTML+CSS実践

第3回|HTML&CSSの特訓授業〜カンプからスライス切り出しした画像をwebページに組み込む〜

おためし受講中
  • 授業で使用する教材

    教材はありません

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全4回 2014年6月17日公開
    HTML&CSSの特訓授業〜カンプからスライス切り出しした画像をwebページに組み込む〜

    HTML/CSSの特訓をしましょう!
    制作した画像をサイトに反映していくための、HTMLとCSSを学びましょう。

    授業中は、ひたすらコーディングをしていきます。

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

    (現在、以下の2つの授業は無料で受講が可能です)

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

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

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

    jQueryの基礎を理解する全6回

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

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

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

    1)クライアント(お客様)へのヒヤリング
    2)ターゲット設定
    3)サイト設計(ワイヤーフレーム)
    4)制作仕様書策定(デザインルール、コーディングルール策定)
    5)開発(デザイン&コーディング)
    6)ローカルテスト
    7)テストサーバーレビュー(クライアントチェック)
    8)リリース(本サーバーアップ)
    9)ランニング(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/

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!