このWEBページは、愛知淑徳大学創造表現学部メディアプロデュース専攻 ウェブデザイン第１回の授業資料になります。
この授業では、HTMLやCSSといった、基本的な言語＝コードを用いてウェブデザインの制作を進めていきます。
各自でテーマを選定し、調査や素材集めを進めたうえで、ウェブデザインのレイアウトを進め、HTMLとCSSを用いてコーディングを進めて完成させます。
完成したウェブサイトは、授業内でプレゼンテーションしてもらいます。
授業計画
第1回 ガイダンス、HTMLとは、ソースコードの記述
第2回 HTMLとCSSの基礎１：タグとは、CSSとは
第3回 HTMLとCSSの基礎２：スタイルの定義
第4回 HTMLとCSSの基礎３：リンクとナビゲーション
第5回 HTMLとCSSの基礎４：スタイルの調整
第6回 HTMLとCSSの基礎５：画像の配置、リストとテーブル
第7回 企画書作成
第8回〜第13回 課題制作
第14回・第15回 講評会
課題と評価
第１課題 練習用WEBページの制作：20％
企画書 独自制作のWEBページのための企画・計画：10％
第２課題 企画を元にしたWEBページの制作：30％
講評会*: 発表30％＋相互評価10%
*講評会は定期試験に準ずる扱いとします。
ソースコードの記述
かんたんなソースコードを自分で書いてコンピュータ上に保存し，それをWebブラウザで開いて，Webページとして表示されるかどうかを試します。
作業手順
① PCを起動し，デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を，自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら，書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら，「ファイル」>「名前を付けて保存」で，「学籍番号」フォルダ内に保存する。
・ファイル名：学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード：UTF-8
・保存先：「デスクトップ」＞「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が，「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし，「プログラムから開く」>「Google Chrome」などWebブラウザを選択する。
⑧ Google ChromeなどWebブラウザが起動し，今作成したファイルがウェブページとして表示されれば成功です。
ソースコード01
ファイル名：「学籍番号.html」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのページ</title> </head> <body> こんにちは！ </body> </html>
練習課題 ソースコードが完成したら、bodyタグで囲まれた箇所<body>〜</body>に、 文章を加えてみましょう。 加える文章：本授業への抱負