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

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

  • 第1回
    Webデザインを始めたい方に贈る、「HTMLとCSSって何」【概要理解とツール導入】
おためし受講中

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

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

コピーしました!
授業で使用する各サンプルファイルは教室内の「ファイル」ボタンよりダウンロードお願いします。

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全1回 2014年5月20日公開
    Webデザインを始めたい方に贈る、「HTMLとCSSって何」【概要理解とツール導入】
     
    【WEBデザインに必要なワイヤーフレーム全3回】」にて制作したワイヤーフレーム(webページの設計図)通りにHTML文書をCSSを使ってレイアウトしていきます。
     
    これからWebデザインを始めようと思っている方のために、「HTML/CSS」について簡単に説明してみましょう。
     

    HTMLとCSSについて

    HTML:エイチティーエムエル、HyperText Markup Languageの頭文字を取ってHTMLと呼びます。Webページを作成するために必要となる言語です。世の中のほとんどのWebページはHTMLで作られていると言っても過言ではありません。HTMLはコンピューターに、文書の構造を指示したり、検索エンジンやインターネットブラウザがきちんと表示をするために必要な言語です。
     
    CSS:カスケーディング・スタイル・シート、Cascading Style Sheetsと呼ばれます。その名の通り、Webページのスタイルを指示するための言語です。先ほどのHTMLと組み合わせることによって、Webページを装飾して、見栄えを良くしたりするといった、デザインをするときに必要になります。
     

    小規模な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回)

    受講生代表

    • 未定

      未定

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

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