2023ウェブデザイン第1回

このWEBページは、愛知淑徳大学創造表現学部メディアプロデュース専攻 ウェブデザイン第1回の授業資料になります。
この授業では、HTMLやCSSといった、基本的な言語=コードを用いてウェブデザインの制作を進めていきます。
各自でテーマを選定し、調査や素材集めを進めたうえで、ウェブデザインのレイアウトを進め、HTMLとCSSを用いてコーディングを進めて完成させます。

完成したウェブサイトは、授業内でプレゼンテーションしてもらいます。

授業計画
第1回  ガイダンス、HTMLとは、ソースコードの記述
第2回  HTMLとCSSの基礎1:タグとは、CSSとは
第3回  HTMLとCSSの基礎2:スタイルの定義
第4回  HTMLとCSSの基礎3:リンクとナビゲーション
第5回  HTMLとCSSの基礎4:スタイルの調整
第6回  HTMLとCSSの基礎5:画像の配置、リストとテーブル
第7回  企画書作成
第8回〜第13回 課題制作
第14回・第15回 講評会

課題と評価
第1課題 練習用WEBページの制作:20%
企画書 独自制作のWEBページのための企画・計画:10%
第2課題 企画を元にした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>に、
文章を加えてみましょう。

加える文章:本授業への抱負