Webページ作成基礎 1Aクラス｜シラバス情報

シラバス情報

教員名：北原　俊一

科目名

Webページ作成基礎 1Aクラス

担当教員名

北原　俊一

ナンバリング

SAi2003

学科

2021年度大学社情デザイン学部社情デザイン学科 2年

学年

2年

開講期

2023年度前期

授業形態

演習

単位数

2.00単位

実務経験の有無

無

実務経験および科目との関連性

無

ねらい

①科目の性格

本科目は、社会情報デザイン学科専門科目「情報領域」の選択科目であり、PCによる演習形式で授業が進められる。マークアップ言語などの文法を理解しながらWebページへの表現方法を学ぶ。本科目で学んだことは、２年次後期配当の「Webページ作成応用」へつながるものである。

②科目の概要

ホームページ作成に特化したアプリケーションを利用することなく、テキストエディタを使って、見やすく使いやすいWebページの作成ができることを目指す。また、コンピュータが自分の意図しない表示をしたときに、粘り強く自分で原因を探って修正する姿勢を身につけ、独力でWebページへの表現ができるようになること目指す。

③授業の方法（ALを含む）

・授業前に作業するテキストの範囲を確認し、読んでおく。また、その前後の内容にも目を通す。
・テキストを参照しながら、自分でWebページに必要な文書やコードを入力し、ブラウザで表示を確認する。その表示が意図したものでない際には、自分で原因を探って修正する。
・Webページを自由に拡張する、自分の発想でWebページを作成する場合もある。
・原則的には、作業したファイルを毎回提出する。
・授業後に作業したテキスト範囲を改めて読み、内容を再確認する。

実技、実験／創作、制作

④到達目標

1．インターネット環境におけるホームページの設置から閲覧のしくみを理解する
2．マークアップ言語(HTML)によるWebページの構造を理解し、Webページの作成をすることができる
3．スタイルシート(css)を使って、Webページを見やすくデザインすることができる。
4．意図と異なるWebページが表示されたとき、粘り強く自分で原因を探り、解決できる。極力エラーを生じないような自分なりのやり方を確立する。

⑤ディプロマ・ポリシーとの関係（右の資質・能力を育成することを目的とする）

SA①-2　情報活用技術の修得

第１回

事前学習

テキスト第１章を読み、理解が難しいところを把握しておく。

90分

授業内容

オリエンテーション。アプリケーションの確認。ファイルの保存とWebページの表示。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第２回

授業内容

HTML文書の構造／画像。文書の見出し、段落の設定と画像の挿入。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第３回

授業内容

リンク／リスト／作表。他のHTML文書やホームページへのハイパーリンクの作成。箇条書きと表の作成。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第４回

授業内容

フォーム／グループ化。ユーザのテキスト入力欄や選択ボタンの作成。HTML要素のグループについて。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第５回

授業内容

文字・文章の装飾／背景の装飾。CSSによるフォント、色などの指定。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第６回

授業内容

要素のサイズ指定・余白・境界線。ブロック要素の概念と、その大きさ等の指定。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第７回

授業内容

リストの装飾／クラスとIDによるデザイン対象の指定。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第８回

授業内容

要素のレイアウト。CSSによるHTML要素の配置の設定。【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第９回

授業内容

ページのデザイン1：１段組みのレイアウト【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第１０回

授業内容

ページのデザイン1：１段組みのレイアウト(9回目の続き)【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第１１回

授業内容

ページのデザイン2：2段組みのレイアウト【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第１２回

授業内容

ページのデザイン2：2段組みのレイアウト(11回目の続き)【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第１３回

授業内容

ページのデザイン3：画像を並べるのに適したレイアウト【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第１４回

授業内容

ページのデザイン3：画像を並べるのに適したレイアウト(13回目の続き)【実技】

事後学習・次回事前学習

テキストの授業で扱った範囲を読み、理解を深める。
テキストの次回の授業範囲を読み、理解が難しいところを把握しておく。

180分

第１５回

授業内容

まとめ／(外部メディアの利用）【実技・創作】

事後学習

テキストの授業で扱った範囲を読み、理解を深める。

90分

フィードバック

9回目から14回目までの作業について、クラス内へ公開し、相互にコメントしあう機会を設ける。また、得られたコメントに基づいて、必要に応じてWebページを改良する。

評価方法および評価の基準

評価項目1.については、Webページを作成する過程で、Webページのしくみは理解できたと評価する(10%)。
評価項目2.について、提出されたHTMLファイルをより、HTML文法の理解度について評価する(20%)。
評価項目3.について、提出されたHTMLファイルより、CSS文法の理解度を評価する(30%)。
評価項目4.について、提出されたオリジナルHTMLファイルにより評価する(40%)。
以上得点化し、その合計を100点に換算して、60点以上を合格とする。

教科書

書名

著者

出版社

ISBN

備考

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

Mana

SBクリエイティブ

978-4-7973-9889-2

推薦書・参考文献

履修上の助言、教員からのメッセージ