目次
授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
Webサイトの制作
14回に続いて、Webサイトを制作していきましょう。
準備
Studioにログインします。
制作手順
以下の流れでWebサイトを制作していきましょう。
| 作業タイトル | 作業詳細 | 参考URL | |
|---|---|---|---|
| 1 | コンポーネントの作成 | コンポーネントで「ヘッダー」と「フッター」を作成しましょう | 第06回 |
| 2 | ページの追加 | 必要なページを追加しましょう ・ABOUT ・CONTACT ・THANK YOU | 第07回 |
| 3 | リンクの設定 | ヘッダーとフッターのコンポーネントを調整して、 | 第07回 |
| 4 | ユーザー体験の改善 | Webサイトの使い勝手を改善します。 ・パンくずリスト ・トップに戻るボタン ・ホバー ・カルーセル | 第09回 |
| 5 | お問い合わせフォームの実装 | お問い合わせフォームを実装しましょう ・CONATCT ・THANK YOU | 第10回 |
| 6 | お知らせの追加 | CMS機能を使って「お知らせ」を実装しましょう | 第11回 |
| 7 | レスポンシブデザインの実装 | ハンバーガーメニューを実装しましょう | 第12回 |
| 8 | コンテンツの追加 | 各ページにコンテンツを追加しましょう ・HOME（主要な内容） ・ABOUT（自己紹介） | 企画書 |
| 9 | デザインの反映 | 配色を反映させて、カラフルなWebサイトにしましょう | 企画書 |
| 10 | 作り込み | コンテンツをブラッシュアップしたり、レスポンシブ対応を追加するなどで完成度を高めましょう |
「ライブプレビュー」を有効にして、CampusAppからライブプレビューのURLを提出してください。
参考：評価基準
- ライブプレビューURLが共有されている
- ヘッダーがある
- ヘッダーにロゴ／見出しがある
- ヘッダーにナビゲーションがある
- ナビゲーションでページ移動ができる
- フッターがある
- フッターにナビゲーションがある
- フッターにコピーライトがある
- パンくずリストがある（どのページでも可）
- トップに戻るボタンがある（どのページでも可）
- ホバーが実装されている（どのページでも可）
- カルーセルが実装されている（どのページでも可）
- CONTACTページがある
- お問い合わせフォームが実装されている
- お問い合わせフォームが機能する
- THANK YOUページがある
- CMSが実装されている
- CMS詳細ページが実装されている
- CMS一覧が実装されている
- 企画書に基づいたカラーが反映されている
- HOMEにコンテンツが反映されえている
- ABOUTページがある
- ABOUTにコンテンツが反映されている
- ハンバーガーメニューが実装されている
- レスポンシブデザインが実装されている（どのページでも可）
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。