はじめに
＊＊＊課題はページ最下段に記載しています。＊＊＊
今回より対面方式とオンデマンド方式を組み合わせて授業を進めていきます。
対面授業では、ソースコードをもとに実際にウェブサイトを構築していきます。オンデマンド授業では、はじめに企画書を完成させていきます。
ソースコードの記述
かんたんなソースコードを自分で書いてコンピュータ上に保存し，それをWebブラウザで開いて，Webページとして表示されるかどうかを試します。
作業手順
① PCを起動し，デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を，自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら，書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら，「ファイル」>「名前を付けて保存」で，「学籍番号」フォルダ内に保存する。
・ファイル名：学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード：UTF-8
・保存先：「デスクトップ」＞「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が，「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし，「プログラムから開く」>「Internet Explorer」を選択する。
⑧ Internet Explorer（Webブラウザ）が起動し，今作成したファイルがウェブページとして表示されれば成功です。
ソースコード01
ファイル名：「学籍番号.html」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのページ</title> </head> <body> こんにちは！ </body> </html>
ウェブサイトの制作
ソースコードを元に，新しい行を追加していきます。
作業手順
① 作成したファイル「学籍番号.html」を複製して，別のファイルをつくる。複製したファイルの名称を，「index.html」に変更する。
② 「index.html」を，メモ帳で開く。
③ どの行になにが書いてあるのかを自分で覚えておくために，コメントを記入する。
・タグの構造やページ構成をわかりやすくするため，ソースコードの中に覚え書きとして書いておくテキストを，「コメント」と呼んでいます。
・HTMLファイルにコメントを記入するときは， <!– と –> で囲います。
・<!– と –> で囲われた中身は，ブラウザで開いたときには表示されません。
④ 新しく制作するWebページの見出しと本文を記入する。
・ここでは，<h1> 〜 </h1>，<p> 〜 </p>というタグで中身を区切ります。
・このタグは，後で文字のサイズなどを指定するときに，目印として必要になります。
⑤ このWebページの制作者の情報を，ページの末尾に記入する。
・制作者情報は，<address> 〜 </address>というタグで区切るという決まりがあります。
ソースコード02_01
ファイル名：「index.html」
<!DOCTYPE html> <html lang="ja"> <!-- ここからhead --> <head> <meta charset="UTF-8"> <!-- ページのタイトルをここに入れる --> <title>タイトルを記述しましょう</title> <!-- スタイルシートの場所を指定している --> <link rel="stylesheet" href="style.css" type="text/css"> </head> <!-- headここまで --> <!-- ここからbody --> <body> <!-- サイトの見出しとその説明 --> <h1>サイトの見出し</h1> <p>本文を記述します。</p> <!-- addressには制作者の情報を入れる --> <address>制作者：自分の名前（愛知淑徳大学創造表現学部メディアプロデュース専攻）</address> </body> <!-- bodyここまで --> </html>
⑥ 文字の大きさや色を指定するため，スタイルシートを作成し，HTMLファイルを関連づける。
・メモ帳で新規ファイルを作成し，そのファイルの中にスタイルを記述します。
・スタイルシートには，「style.css」というファイル名をつけて，「index.html」と同じフォルダに入れておきます。
・「index.html」のファイルとスタイルシート「style.css」を関連づけるためには，<link>というタグを<head>の中に記入します。
⑦ 作成したスタイルシートの中に，スタイルを書き込む。
・スタイルは，CSSというスタイル言語を使って指定します。
・スタイルシートでの色の指定は，「#○○○○○○」という英数字でおこないます。この英数字は，RGBの数値を16進数であらわしたものです。
・「#000000」は，赤・緑・青すべてが0（点灯しない）なので，画面の表示色は黒になります。「#ffffff」は，赤・緑・青すべてがf（もっとも明るい）なので，画面の表示色は白になります。
・どのような色になるのかを調べたい場合は，http://www.colordic.org/ などを参照。
ソースコード02_02
ファイル名：「style.css」
@charset "utf-8";
/* ここからスタイルをはじめます */
body {
color: #444444;
}
h1 {
font-size: 36px;
font-family: Verdana, Helvetica, sans-serif;
color: #191970;
font-weight: normal;
}
p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}
address {
font-size: 14px;
font-style: normal;
}
【font-weightの種類】
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント
【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示
⑧ 以上の変更が反映されているかどうか，Webブラウザで開いて確認する。
課題４ １）オンデマンド課題 以下の用語について調査し、ウェブデザインとの関連を含めて記述しなさい。 ・ソースコード 課題提出方法 CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第４回 にPDF形式の文書を提出してください。 A4サイズ 縦位置・横書き 提出締切 10月25日（日）まで ２）対面授業課題 対面授業を受講後、作成したHTMLファイルとCSSファイルを提出する。 課題提出方法 HTMLファイルとCSSファイルを格納した学籍番号フォルダを圧縮（ZIP形式）して提出する。 提出締切 11月1日（日）まで ３）企画書制作課題 ワークシートをもとに企画書を完成させる。 課題提出方法 CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第４回にワークシートを提出してください。 ワークシートをPDF形式で提出すること。 手書きを写メしてPDFに変換して送付しても構わないが、データ容量は３MB以下になるよう調整すること。 提出締切 11月8日（日）まで ＊第4回授業用CSレポート掲示板の提出は11月8日（日）まで可能ですが、それぞれの締切日をこちらで確認していますので、 締切日を守って提出するようにしてください。