プログラミング 授業計画

お知らせ>

・この計画は進捗に応じて変更される可能性があるため常に確認すること。PC等の設定により古いキャッシュデータが表示されることがあるためブラウザの更新ボタンをクリックするか、キーボードの[F5]キーを押して確認する。
・大学のパソコンに資料やファイルを保存する場合はマイドキュメント以下とする(デスクトップ等に保存すると自動削除される)。
・演習の進め方はこちらを参照のこと。
・授業中の飲食、私語、情報端末利用、その他迷惑行為は減点対象。スマホはかばんに。
・購入する必要はないが参考書は経営情報論・HTML&CSS&PHPプログラミング・ネットビジネスのおすすめ参考書一覧を参照のこと。
・教員使用の発表順ランダマイザー(chrome用)

ページ選択 1〜5/6〜910〜15

    オリエンテーション
     授業をはじめるにあたり、計画、評価方法について説明する。
    環境設定とひな形ファイル
     初回授業として、今後プログラミング演習を行っていくための環境設定を行う。本日のミッションは以下。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    こちらを参照して、演習(開発)環境、Terapadの設定、webkisoフォルダの作成、画面設定を実施せよ。なお、大学のパソコン(ネットワークフォルダ)にwebkisoフォルダを作成する場合は、マイドキュメント以下とすること(デスクトップ等に保存すると自動削除される)。
    こちらを参照して、HTMLとは何か、基本タグとは何か、入れ子構造とは何か、理解せよ。
    上記資料に従い「基本タグ」を作成し、ひな形ファイルhina.htmlとして保存せよ。
    上記資料を参考に、hina.htmlをコピーしてpro01.htmlを作成し、タイトルタグを「名城公園キャンパス学食紹介」とせよ。
    pro01.htmlの本文として「〜名城公園キャンパス学食紹介〜名城公園キャンパスの学食を紹介します。Byあなたの名前」と表示させよ。
    こちらを参照して、インライン要素とブロックレベル要素の違いは何か理解せよ。
    こちらを参照して、pro01.htmlを編集し、本文の2つめの「名城公園キャンパス」を太字に、「学食を紹介します」に下線を引き、「byあなたの名前」をイタリックにせよ。
    pro01.htmlを編集し、本文の「〜名城公園キャンパスの学食紹介〜」のサイズを大きくし、それ以降の文字全ての色を「navy」にせよ。
    全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    インライン要素の使い方
    ■予習課題■授業前に以下について動画を見ておくこと。
    改行、画像表示、リンクの方法
    相対パスの方法

     インライン要素について演習する。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。
    全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    大学PCデスクトップにある[名城公園キャンパスフォルダ]-[management]-[hayashi]-[tue3]-[material]から演習ファイルjoho102a.exeを[Ctrl]+[c]でコピーし、前回作成したwebkisoフォルダに[Ctrl]-[v]で貼り付け(webkisoフォルダ未作成の人は前回ミッションを先に実施すること)。欠席などのため家で演習を行う場合はこの表の下の※印を参照し演習ファイルをダウンロードして下さい。
    joho102a.exeが、webkisoフォルダに保存できたら、ファイルをダブルクリック。自己解凍プログラムが動作して「pro02」フォルダが作られる。できない場合は再度演習ファイルをコピーしなおして試すこと。webkisoフォルダの中に「pro02」フォルダができたらjoho102a.exeは削除。
    前回作成したひな形ファイルhina.htmlを[Ctrl]+[c]でコピーし、そのまま[Ctrl]-[v]で貼り付けよ(webkisoフォルダ内にコピペ、pro02フォルダではないので注意)。そのうえで、コピペしてできたファイル名を「pro02.html」に変更せよ。その上で、Terapadでpro02.htmlを開き、前回の通り演習(開発)環境を整えよ。
    こちらを参照して、改行の方法、画像の表示方法、リンクの張り方を理解せよ。
    理解できたら、pro02.htmlを編集し、タイトルに「メニュー」、本文に「メニュー一覧」と表示せよ(前回の復習)。
    pro02.htmlを編集し、「愛知学院大学ウェブサイト」という文字で書かれたリンクを追加し、クリックすると大学ウェブサイトのトップページが表示されるようにせよ(トップページのURLは検索するなどして調べること)。また、リンクの前で改行すること。
    続けてpro02.htmlを編集して、「名城公園学食紹介」という文字で書かれたリンクを作成し、クリックすると前回作成したpro01.html(前回ミッションを完了していればwebkisoフォルダにpro01.htmlがあるはず)が表示されるようにせよ。また、リンクの前で改行すること。
    こちらを参照して、相対パスについて理解せよ。
    pro02.htmlを編集し「日進キャンパスの思い出」という文字で書かれたリンクを相対パスで追加し、クリックすると先に解凍してできた「pro02フォルダ」の中のomoide.htmlが表示されるようにせよ(omoide.htmlの保存フォルダは変えないこと)。
    先に解凍してできたpro02フォルダの中のomoide.htmlをTerapadで開いて編集し、「メニューに戻る」という文字で書かれたリンクを追加し、クリックするとpro02.htmlが表示されるようにせよ。リンクの設定は、先と同様、相対パスで指定すること。
    omoide.htmlを編集して、pro02フォルダに格納されているkeyaki.jpgとkoudou.jpgが表示されるようにせよ。画像の間は改行せよ。
    表示された2つの画像に設定を追加して、(1)枠有り、(2)サイズ200×200で、(3)alt属性をそれぞれ「ケヤキテラス」「記念講堂」とせよ。
    omoide.htmlを続けて編集して、pro02フォルダの中のokunaiフォルダの中にある2つのファイルが表示されるようにせよ。その際、画像の設定は、先のリンクと同様、相対パスを使うこと(画像ファイルの保存フォルダは変えない)。画像の間は改行せよ。
    全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    自宅で演習を行う場合、演習ファイルjoho102a.exeはこちらからダウンロード可能。
    ブロックレベル要素の操作
    ■予習課題■授業前に以下について動画を見ておくこと。
    ブロックレベル要素とは
    見出しタグとは
    段落、改行、区切り、中央寄せのタグ
    箇条書きのタグ

     ブロックレベル要素について学び演習する。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。
    全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    ひな形ファイルをコピーし「pro03.html」と名前を変更せよ。その上で、Terapadでpro03.htmlを開き、前回の通り演習(開発)環境を整えよ。
    こちらを参照して、ブロックレベル要素とは何か、前回演習で取り組んだインライン要素との違いは何か、理解せよ。
    こちらを参照して、見出しタグについて理解し、こちらの仕様書(文字データはpdfからコピー可)の見だし部分を作成せよ。
    こちらを参照して、段落タグと改行タグとの違い、区切りタグ、中央寄せのタグについて理解した上で、上記の仕様書1の見出し以外を完成させよ。
    この画像ファイルをダウンロード(右クリックして画像を保存、webkisoフォルダに保存)し、上記仕様書1の目次一覧の下(「沿革」の下)に表示させよ(インライン要素の復習)。その際、画像ファイルを段落タグで囲むこと。なお、画像表示の方法は、前回を思い出すこと(忘れた人はこちらを参照)。
    こちらを参照して、箇条書きの作成方法を理解した上で、上記の仕様書1の目次の「本学の使命」「行学一体」「報恩感謝」「沿革」を箇条書きにせよ。なお、箇条書きの各項の先頭の記号は四角とする。
    上記の箇条書きの4つの項目の内、「本学の使命」「行学一体」「報恩感謝」をクリックすると、ページ内の詳細内容の箇所にジャンプするよう、ページ内リンクを設定せよ。なお、ページ内リンクの方法は、前回を思い出すこと(忘れた人はこちらを参照)。
    全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。
    ブロックレベル要素の操作2
    ■予習課題■授業前に以下について資料を見ておくこと。
    テーブルタグと画面デザイン
    divタグの意義

     前回に続きブロックレベル要素を演習する。前回のミッションを終わらせていない人は、前回分のミッションを終わらせてから以下を実施すること(前回知識をベースとしているため、クリアミッションの順番が異なる場合、評価が下がる可能性がある)。全て完了し、チーム内にコンプリートメンバーがいたらそのメンバーから、いなければ教員からチェックを受けること。
    ひな形ファイルをコピーし「pro04.html」と名前を変更せよ。その上で、Terapadでpro04.htmlを開き、これまでの通り演習(開発)環境を整えよ。
    こちらを参照してTABLEタグと、画面デザインの考え方について理解せよ。
    TABLEタグの理解を踏まえ、横3×縦9セルの表を作成せよ(各セルは未入力で良い)。
    作成した横3×縦9セルの表を修正して、こちらの仕様書1の表を作成せよ(文字データはpdfからコピー可、TABLEタグの資料の属性の箇所をよく確認すること)。なお、ライムやオレンジの色指定はこちらの色見本を参照。
    この画像ファイルをダウンロード(右クリックして画像を保存)しpro04.htmlと同じフォルダに保存した上で、「表全体」の背景に設定せよ(背景色を設定したセルは背景色がそのまま残る形になる、TABLEタグの資料の属性の箇所をよく確認すること)。
    こちらを参照してdivタグの意義について理解せよ。
    divタグについての理解を踏まえ、pro04.htmlに続けて、こちらの仕様書2を作成せよ(文字データはpdfからコピー可)。
    先のdivタグの説明資料を参照してスタイルシート適用のサンプルを確認し、pro04.htmlの適切な位置に以下をコピーせよ(スタイルシートの詳細は後日確認する)。作詞作曲者が緑に、歌詞が紺色になることを確認せよ。
    全て終了したらチェックを受け、OKが出たら、こちらからミッションコンプリートを報告。

ページ選択 1〜5/6〜910〜15

  page bottom
 
 
 
SPONSORED LINK




page top
SPONSORED LINK