1. トップ
  2. 学校紹介
  3. 情報公開
  4. 学科情報
  5. シラバス - 科目一覧

シラバス

グラフィックデザイン科 2023年度入学生

科目名 Webデザイン制作Ⅰ 作成日 2023/04/03
区分 必修 実習
開催時期 1年次 前期
講義・演習駒数/週 0駒
実習・実験駒数/週 1駒
合計駒数/週 1駒
総時間数 30時間
総単位数 1単位
企業連携
授業の目的 HTMLの基本文法(タグ、属性、値、コメントアウト)とCSSの基本文法(セレクタ、プロパティ、値、単位、コメントアウト)、Dreamweaverの基本操作方法(サイト定義、HTMLコーディング、CSSコーディング、パネル操作、バー操作、サーバーアップロード)を学習することを目的とする。
到達目標 HTML、CSSの基本文法を説明出来る。 Dreamweaverによる基本的なホームページの更新が出来る。 ホームページをサーバー上にアップロード出来る。

評価項目 ①定期テスト ②小テスト ③レポート ④課題 ⑤作品 ⑥ポートフォリオ ⑦成果発表 ⑧その他
割合  % 10%  % 90%  %  %  %  %
評価基準
授業で課さられる課題の提出とその内容を基準とする
※上記に示した評価項目の割合(%)を基準に、総合評価点を算出して成績評価を行う。
※出席率が80%未満の場合は、評価対象としない。

担当教員 槌家 良
テキスト・参考文献 オリジナル教材
実務経験有無  
web業界にてWEBコーダー、WEBデザイナー、WEBディレクターに10年以上実務にあたり、web制作のワークフローを一通り経験し、現在はWEBマーケターとしても従事している。現役の現場の経験と知識を元にWEB制作を行う基礎を指導する。  
関連科目 webデザイン制作Ⅱ  履修前提   

授業計画

回数 学習目標 学習項目
1 1. WEBサイトが何でできているかを理解する。 2. 課題を提出出来る。  WEB業界、WEBの職種、授業との関係を理解する。 WEBサイトとは何でできているかを理解し、作成する。 自己紹介をする文章を作成する。 課題の提出の仕方を理解する。 
【理解度確認】提出課題
2 1.WEBサイトファイルを作る。 2.Dreamweaverの導入を学習する。 3.HTMLについて学習する。 4.文章構造の種類を学習する  Dreamweaverを起動し、名称を理解する。 HTML言語について理解する。 文章構造の種類を理解し、作成する。 
【理解度確認】提出課題
3 1.HTML5の基本文法(要素、開始タグ、終了タグ、入れ子)の作成が出来る。 2.基本的なHTMLタグを理解を確認できる。 3.HTML5の基本文法の用語を理解する。  HTMLとは何かを学習する。 Dreamweaverを使い、基本文法を直打ちで実践し、開始タグ、終了タグを学習する。 HTMLタグのh1,h2,p,ol,li,ul,brを学習する。 
【理解度確認】提出課題
4 1.HTMLの画像を表示が出来る 2.パスについて学ぶ  画像を表示する。 横幅、高さ、Altを学習する パスについて学習する 
【理解度確認】提出課題
5 1.CSSの概念を理解を確認出来る。 2.CSSの基本文法の用語を理解する。  CSSとは何かとその用語を学習する。 HTMLの属性とクラスを学習し、CSSを使い装飾を加える。 文字の装飾、color, font-size,font-weight,opacity,を実践する。 
【理解度確認】提出課題
6 1.CSSの基本的なプロパティを理解を確認出来る。 2.CSSの基本文法(セレクタ、プロパティ、値、単位)で作成が出来る。 3.HTMLの基本文法(クラス、属性)を作成出来る。  HTMLの属性とクラスを学習し、CSSを使い装飾を加える。 文字の装飾、line-height,letter-spacing と背景の装飾 backgroundを実践する。 
【理解度確認】提出課題
7 1.リンクの仕方を学ぶ 2.擬似クラスの概念を理解を確認出来る。  他サイトへリンクを行う a タグを学習する。 基本的な擬似クラスのE:visited, E:hover, E:active を学習する。 
【理解度確認】提出課題
8 1.文字を装飾するプロパティの理解を確認出来る。  空のspanタグ、文字の調整に使う基本的なプロパティ、text-decoration, text-align、text-shadow、font、font-family, outline,sub,sup,text-shadow,を学習する。 
【理解度確認】提出課題
9 1.ボックスモデルを学習する。 2.CSSの基本文法(子孫セレクタ)の理解を確認出来る。  ボックス要素に触れ、divタグと、レイアウトに関わるプロパティのmargin, width, height, box-shadow, border,を学習する。 レイアウトに関わるCSS、display, position, floatに触れる。 
【理解度確認】提出課題
10 1.HTMLで表を作成出来る。 2.WEBフォントを使って書体を変更する  HTMLのtable、CSSのpaddingを使い、表の作成を学習する。 外部サービスの機能を使う 
【理解度確認】提出課題
11 1.リッチコンテンツに触れる 2.外部サービスの埋め込みに触れる  video, audio, iframe などを使った要素に触れる 複数クラスタ、隣接クラスタ、疑似クラスタに触れる CSSアニメーションや疑似セレクタなどに触れる 
【理解度確認】提出課題
12 1.テンプレートファイルを用いてサイトを構築することが出来る。 2.WEBレイアウトについて理解する。  テンプレートファイルからサイトを構築する WEBサイトのレイアウトについて学ぶ 
【理解度確認】提出課題
13 1.どのようなWEBサイトにするか決める 2.背景画像の更新が出来る。  テンプレートのサイトを更新していく。 background-imageを学習する。 
【理解度確認】提出課題
14 1.バナー画像を作成して更新することが出来る。  WEBサイト上のバナーの作り方を学ぶ 
【理解度確認】提出課題
15 1.テンプレートのHTMLを完成させることが出来る。  文章、画像の変更を行う。 
【理解度確認】提出課題