講義予定・講義済内容

このページには講義予定、講義済みの内容や、課題の内容を掲載していきます。
欠席などで学習が遅れた際にはこのページを確認し、各自でフォローするよう心掛けなさい。

講義内容


第１回　９月２４日 Webサイトの基礎知識 【１】基本的なページの作成

授業や公欠について

Webサイトの基礎知識

準備

【１】基本的なページの作成

Ｗｅｂページの作成をはじめます。作成したページにはコンテンツを記述してHTMLでマークアップし、スタイルシートで文字のデザインを設定します。

  1. htmlファイルとcssファイルをつくる
  2. ページの土台をつくる

第２回１０月　１日　【１】基本的なページの作成(つづき)

【１】基本的なページの作成(つづき)

  1. コンテンツを記述する
  2. コンテンツをマークアップする
    ＜h1＞, ＜p＞
  3. 文字のデザインをカスタマイズする
    ｛font-family: ;｝, ｛font-size: ;｝, ｛line-height: ;｝
  4. １つのコンテンツとしてマークアップする
    ＜article＞
  5. ヘッダーとフッターを追加する
    ＜header＞, ＜footer＞, ＜small＞

第３回１０月　９日（火曜日）　【２】レイアウトとデザイン

【２】レイアウトとデザイン

コンテンツの横幅や配置を調節してレイアウトを行い、背景や罫線、影、角丸といった装飾を施してデザインしていきます。また、Ｗｅｂフォントを利用してインパクトのある文字も使ってみます。

  1. 背景に色を付ける
    ｛background-color: ;｝
    色についてはここを参照しましょう
    カラーピッカーツールサイト→http://hslpicker.com/
  2. 横幅と配置を指定する
    ｛width: ;｝, ｛margin-left: ;｝, ｛margin-right: ;｝
  3. 罫線で囲む
    ｛border: ;｝, ｛margin-top: ;｝, ｛margin-bottom: ;｝, ｛padding: ;｝, ｛-webkit-box-sizing: ;｝, ｛-moz-box-sizing: ;｝, ｛box-sizing: ;｝
  4. 影をつける
    ｛box-shadow: ;｝, ｛-webkit-box-shadow: ;｝
  5. 角を丸くする
    ｛border-radius: ;｝
  6. ヘッダーをバーの形にする
  7. WEBフォントを利用する
    @import url( );
    Googleが提供するWebフォントサイトGoogle Fonts

第４回１０月１５日 【２】レイアウトとデザインのつづき

【２】レイアウトとデザインのつづき

[再掲載]
コンテンツの横幅や配置を調節してレイアウトを行い、背景や罫線、影、角丸といった装飾を施してデザインしていきます。また、Ｗｅｂフォントを利用してインパクトのある文字も使ってみます。
（詳細は「第３回」を参照してください。）

【3】画像の表示（その１）

ページに画像を追加していきます。ここでは、記事の本文中に画像を表示して、ヘッダー部分にロゴ画像を表示します。また、ページの背景には背景画像を表示します。

  1. 画像を表示する
    2. ＜figure＞
  2. 画像を中央に配置する
    3. ｛text-align: ;｝, ｛class: ;｝

第５回１０月２２日　【3】画像の表示（その１）と　評価課題１の制作

評価課題１の制作

写真を掲載したオリジナルのＷｅｂページを制作しなさい。
・提出期限：１１月５日（月）２３：５９　締め切りました
詳細は科目トップページの指示を確認してください。

第６回１０月２９日 Photoshopでの写真編集の基本【3】画像の表示(その２)

Photoshopを使った写真編集の基本


【3】画像の表示（その２）

まず前回の「評価課題１」とは別に、授業中の実習用「サブリナ」フォルダーを用意しなさい。

ヘッダー部分にロゴ画像を表示します。また、ページの背景には背景画像を表示します。 まずGETサーバから「第６回」講義の資料データを、自分のパソコン内に複製しなさい。

  1. 画像を左または右に配置する
    2. ・｛overflow: ;｝ , ｛clear: ;｝ , ｛float: ;｝
  2. ロゴ画像を表示する
    3. ・｛vertical-align: ;｝
  3. 背景画像を表示する
    4. ・｛background-image: ;｝
  4. 画像にキャプションをつける
    5. ・＜figcaption＞

    これまで制作してきた「menu01.html」ファイルを複製し「menu02.html」という名前に変更する。
    上と同様に「menu01.html」ファイルを複製し「menu03.html」という名前に変更する。
  5. 記事ページを増やす（１）menu02.html・・・プリンのページ
  6. 記事ページを増やす（２）menu03.html・・・サンドイッチのページ

第７回１１月　５日　【4】リンクとナビゲーション

【4】リンクとナビゲーション

リンクを設定していきます。このとき、主要ページへのリンクはナビゲーションメニューとしてヘッダー部分に表示して、各ページに効率よくアクセスできるようにします。

  1. リンクを設定する
    2. ・＜a＞ , ｛color: ;｝
  2. 関連記事へのリンクをリストアップする
    3. ・＜aside＞ , ＜ul＞ , ＜li＞ , ｛list-style-image: ;｝ , ｛text-decoration: ;｝
  3. ナビゲーションメニューを作成する
    4. ・＜nav＞
  4. ナビゲーションメニューのデザインを指定する
    5. ・｛list-style-type: ;｝ , ｛display: ;｝
  5. ロゴ画像とサイト名にリンクを設定する
    6. ・｛border: ;｝
  6. 各ページのヘッダーを統一する

第８回１１月１２日　【5】インデックスページの作成

【5】インデックスページの作成

・前回の【４】までに作成した各「記事ページ」に効率よくアクセスできるようにするため、目次や入り口の役目をする「インデックスページ」と呼ばれるページを作成します。ここでは、記事の一覧ページとトップページを作成します。

  1. 記事（メニュー）を一覧表示するページを作成する
    2. ・＜article＞ , ＜section＞
  2. 特定ページ専用のデザインを指定する・・・メニューの一覧表示用ページ
    3. ・＜id＞
  3. 記事投稿日時の表示欄のデザインを設定する
    4. ・＜time＞
  4. 記事ごとにリンクを設定する
    5. ・＜a＞

第９回１１月１９日　【5】インデックスページの作成(続き)

【5】インデックスページの作成(続き)

  1. トップページを作成する
    2. ・＜h1＞ , ＜p＞ , ＜section＞
  2. 大きな写真をイメージ画像としてトップページに掲載する
    3. ・｛font-weight: ;｝ , ｛text-shadow: ;｝ , ＜div＞
  3. 既存の設定を流用してデザインを指定する
  4. グラデーションのリンクボタンを追加する
    5. ・｛linear-gradient: ;｝

第１０回１１月２６日　評価課題２の制作実習

評価課題２の制作実習

インデックスページと複数のサブページを持つ、オリジナルのＷｅｂサイトを作る。
・提出期限：１２月１０日（月）２３：５９まで
詳細は科目トップページの指示を確認してください。

第１１回１２月　３日　【6】テーブルとフォーム

【6】テーブルとフォーム

  1. テーブルを作成する
    2. ・＜table＞ ,＜tr＞ ,＜th＞ ,＜td＞
  2. テーブルのデザインを指定する
    3. ・｛border-collapse: ;｝
  3. テーブルにキャプションをつける
    4. ・＜caption＞

  4. 投稿フォームを作成する
    5. ・＜form＞ , ＜input＞ , ＜textarea＞ , ＜label＞
  5. 投稿フォームのデザインを指定する
    6. ・＜input　type="submit"＞
  6. 投稿フォームの送受信の設定を行う
    7. ・フォームデコードサービスの利用→「こちら」
    ・フォームメールのしくみ→「こちら」

第１２回１２月１０日　ページを公開する　評価課題３の制作実習（1/2）

ページを公開する


参考： レンタルサーバ


評価課題３の制作実習（1/2）

第１３回１２月１７日　Java Scriptの利用　評価課題３の制作実習（2/2）

Java Scriptの利用


評価課題３の制作実習（2/2）

発展学習１ １２月２４日　ＧＩＦアニメ
評価課題３のアップグレード

ＧＩＦアニメーション入門

完成したＧＩＦアニメの「.gif」ファイルを、サブリナサイトの「img」フォルダへコピーし、
＜img＞タグを使って任意のページに表示してみましょう。

発展学習２ 2019年　１月２１日　インタラクティブコンテンツ
評価課題３のアップグレード

Flash入門


Adobe Animate