Web Design ｜ Syllabus data

授業科目名

Web Design

学年

1Grade

単位数

2.00Credits

実務経験の有無

Have work experience

開講クォーター

semester not specified

担当教員

Kohatsu Mika

授業形態

授業で主に使用する言語

日本語

授業方法区分

開講キャンパス

Togane Campus

授業の到達目標及びテーマ

本授業では、HTMLとCSSによるWebページ作成の基本について学びます。
インターネット、WWW、Webページの仕組みを理解することからはじめ、HTMLとCSSの基本知識とWebページの制作技術を学びます。
それぞれ基本書式を理解した上で、実際にページを作成しながら、その技術を身につけます。

授業の概要

Webデザインに関する基礎知識と制作技術を学びます。HTMLによる文書構造を学び、基本書式を理解し、各種タグの役割等の知識を学びながら、実際のページ作りを行います。また、CSSによるレイアウトや装飾についても、基本書式を理解した後に、各スタイルについて実習します。講義と実習を通して、実際にWebページを作成できる力を身につけます。
事前、事後学習として、テキストでの予習、復習が必要です。

★ ノートパソコンを使用する授業です。Windowsでも構いませんが、授業の画面はMacで行います。
パソコンの使用方法などについてのサポートしません。

授業計画

1回

・ガイダンス：授業の内容、進め方、成績評価について。テキストの紹介。
・Webデザインについて。インターネットの歴史、Webの仕組み
到達目標：Webデザインの仕事について、Webに関する基礎を理解する

事前学習

[1h]シラバス、授業の内容を確認しておく。テキストを用意する。

事後学習

[3h]日頃見ているWebサイト、Webページを改めて見直してみる

2回

・Webの基本：Webサイトの仕組み、Webブラウザについて、拡張子
・HTMLの基本１：マークアップ、情報の整理、HTMLの書き方、文書の骨格
到達目標：基本構造とタグの記述方法について理解する

事前学習

[2h]ブラウザやテキストエディターのインストールをし、作業環境を整える。テキストを用意し、読んでおく。

事後学習

[2h]授業の復習をする

3回

・HTMLの基本２：見出し、段落、リスト、リンク、画像、パス
到達目標：主なタグを理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業の復習をする

4回

・HTMLの基本３：相対パスの書き方、表　
・小テスト１：相対パスの記述
到達目標：相対パスの書き方について理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]小テスト１の相対パスについて復習し、理解する

5回

・CSSの基本１：CSSの基本文法、書き方　
・小テスト２：HTMLの記述
到達目標：CSSの基本、書き方、セレクタを理解する、HTMLの基本を理解する

事前学習

[2h]HTMLの復習をする、テキストを読んでおく

事後学習

[2h]授業内容を復習し、HTML、CSSの記述について理解する

6回

・小テスト２の解説
・CSSの基本２：ボックスモデル　
到達目標：レイアウトに関するプロパティを理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業内容を復習し、HTML、CSSの記述について理解する

7回目

・CSSの基本３：背景色、フォント
到達目標：CSSのプロパティを理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業の復習をする

8回

・CSSの基本４：ボックスモデルの復習、中央揃え、文字色、文字の太さ
・CSSで使用する単位について
到達目標：CSSのプロパティを理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業の復習をする

9回

・２カラムレイアウト作成１：文章構造のマークアップ
・ナビゲーションについて
到達目標：Webサイトを構成するパーツを理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業の復習をする

10回

・２カラムレイアウト作成２：フレックスボックスレイアウト、文字、背景のCSS
・セレクタの種類
到達目標：フレックスボックス、セレクタについて理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業の復習をする

11回

・２カラムレイアウト作成３：幅、ボックスの装飾
・小テスト３：CSSの記述
到達目標：主なCSSについて理解する

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業の復習をする

12回

・小テスト３の解説
・制作の流れとWebデザインの基本

事前学習

[2h]テキストを読んでおく

事後学習

[2h]授業の復習をする

13回

・まとめ、復習　
到達目標：HTMLとCSSの基本を理解する

事前学習

[2h]これまでの内容を復習する

事後学習

[2h]授業内容を復習し、期末試験の準備をする

14回

事前学習

事後学習

15回

事前学習

事後学習

16回

事前学習

事後学習

17回

事前学習

事後学習

18回

事前学習

事後学習

19回

事前学習

事後学習

20回

事前学習

事後学習

21回

事前学習

事後学習

22回

事前学習

事後学習

23回目

事前学習

事後学習

24回

事前学習

事後学習

25回

事前学習

事後学習

26回

事前学習

事後学習

試験及び成績評価

中間の小テスト（３回）と期末テスト（ペーパーテスト）を実施します
・小テスト：30%
・期末テスト：60％
・授業への取り組み：10％

課題(試験やレポート等)に対するフィードバック

小テストに関するフィードバック：小テストの次回授業時にて解説します

講義で使用するテキスト（書名・著者・出版社・ISBN・備考）

これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本

Capybara Design

翔泳社

978-4798170114

参考文献・推薦図書

研究室

東金キャンパス・A棟1階メディアラボ1またはH棟2階H210

オフィスアワー

F1：水5限、金4限

科目ナンバリング

学位授与方針との関連