情報デザイン演習II
授業の狙い
デジタル化社会における情報発信スキル・制作技術について学ぶ。
- 情報を分析・整理し、構造化することができる。
- ホームページ・CMSに関する制作フローを理解できる。
- ホームページ・CMSに関する基本技術を理解し、制作できる。
学修内容・方法
ホームページの制作を通じ、情報の分析・整理・構造化、HTML・CSS・JavaScript、サーバ環境、CMSといった基本技術について学ぶ。Wordpressによるサイトの制作・発表を通じて、情報発信スキルの基本を習得する。
使用テキスト
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 ISBN：978-4-7973-9889-2
演習内容
-
オリエンテーション 授業の目的と内容、授業の進め方について説明する。
-
HTML基本 HTMLの基本文法・見出しと段落・画像タグについて学修する。
-
HTML実践 HTMLによるリンク・表・フォームの実装について学修する。
-
CSSの基本 CSSの基本文法・クラス/ID・継承・ボックスモデルについて学修する。
-
CSS実践 リセット/ノーマライズCSSについて学修する。
-
Webの構造化 構造化言語としてのHTML、セマンティックコーディングについて学修する。
-
Webレイアウト基本 float, Flexbox, CSS Gridによるレイアウトについて学修する。
-
Webレイアウト応用 レスポンシブデザイン・CSSフレームワークについて学修する。
-
プロトタイプの作成 HTMLを利用したプロトタイプを作成する。
-
プロトタイプの作成実践 XDを利用したプロトタイプを作成する。
-
Wordpress入門 Wordpressの導入、及び投稿・固定ページについて学修する。
-
WordPress基礎 WordPressのテーマ・メニュー・プラグインについて学修する。
-
WordPressによるサイトの制作1-企画立案 WordPressを用いた実践的なサイトの企画立案をする。
-
Wordpressによるサイトの制作2-コンテンツ制作 Wordpressを用いた実践的なサイトを構築する。
-
[講評] 各自の制作したWordPressサイトについて講評する。
注意事項：毎回ノートパソコンを持参すること。 ※１授業につき、2限連続
スクリーンキャスト
「1冊で全て身につくHTML&CSSとWebデザイン入門講座」第2版の 4-7章までをスクリーンキャスト化しました。
テキストだけでよくわからない人は参考にしてください。
wordpress簡単な使い方
wordpressの機能を一通り触って、簡単なページを作ってみます。