Ｗｅｂページを制作しよう！ 応用編 高校１年⑩「社会と情報」.

Presentation on theme: "Ｗｅｂページを制作しよう！ 応用編 高校１年⑩「社会と情報」."— Presentation transcript:

1 Ｗｅｂページを制作しよう！ 応用編 高校１年⑩「社会と情報」

2 課題の内容 料理（お菓子）のレシピを紹介するWebサイトを制作する ３ページ制作する 実際に家庭で制作し、途中経過を撮影する
材料・途中経過・出来上がり写真は必ず撮影 誰かに手伝ってもらってもかまわない ３ページ制作する ①トップページ（タイトル・出来上がり） ②材料のページ（材料の写真・一覧表） ③作り方のページ（写真と手順を表で作成）

3 スケジュール Ｋ１Ａ Ｋ１Ｂ 研究・企画 ９／１０ ９／１７ 制作 ９／１７・２４ ・２９・１０／１ ９／２４・２９・ １０／１・６
相互評価 １０／６ １０／８ 料理の制作は　９／２４までに行い 　・材料の写真　・制作途中の写真　・出来上がりの写真　を撮影する 　・写真データはＷｅｂメール・クラウド（OneDriveなど）・カードで持参

4 Webページの研究 レシピが掲載されているページを研究
サイト名 Cookpad ( レシピ名 お月見団子 分析 ・写真 ・手順 ・工夫 ・動画も付けてわかりやすくしている ・具体的な数字を書いてイメージをもちやすい ・かぼちゃの団子も混ぜてオリジナリティがある 感想

5 Webページ企画書 レシピ名 我が家の自慢カレー （タイトルも工夫を） 理由
我が家の自慢カレー　（タイトルも工夫を） 理由 ・家で何度も作ったことがあり慣れているのと、ひと工夫があるので、カレーライスとしました。 ねらい ・途中段階の写真を多く使って初めての人でもわかりやすくする ・ポイントマークを付けて注意するところを目立たせる 絵コンテ Page1 タイトル ・背景はオレンジ系の色 ・タイトルは赤い字で ・写真はお皿に盛りつけて ・リンクはボタンを作る 写真 リンク リンク K1A(0)･････

6 Assumption high-school
写真撮影のコツ その１　近距離で撮影せよ！ （接写モードが有効！） その２　フラッシュは使うな！ （反射を防げ！手ぶれに注意！） その３　食器の色も工夫！ （白・黒は料理が引き立つよ！） その４　背景を工夫せよ （和風の小道具・ランチョンマット） Assumption high-school

7 テキスト・写真もすべて表を組んで、その中に配置する！！
Webは表をうまく使おう！ ３行１列の表 テキスト・写真もすべて表を組んで、その中に配置する！！ タイトルLOGO 表の枠を非表示に設定 ページの説明 組・番・名前 表を使う意味 表は位置関係を固定するために使います表を使わないと写真や画像が重なることが起こります！！　　　　　 ３行２列の表＋セルの結合 出来上がり写真 料理の説明 選んだ理由 その他 １行３列の表 リンク リンク Assumption high-school

8 Assumption high-school
リンクするときのアドレス k1a40 ａ ｂ ｃ ../b/b.html ../c/c.html a.htm b.htm c.htm ../c/c.html ../a/a.html Assumption high-school

9 提 出 できたＷｅｂを提出しよう！ 「Web」フォルダの名前を「k1a40web」（半角）に変更しよう
提　出 できたＷｅｂを提出しよう！ 「Web」フォルダの名前を「k1a40web」（半角）に変更しよう 上のフォルダを「コンピュータ→高1→提出」にコピーして提出しよう 提出できたら、自己評価シートにアピールを書こう 自分の組・番号

10 相互評価 評価項目 Ａ Ｂ Ｃ Ａの中でもとくにすばらしいものにＳをつける！ 発 表 デザイン 内 容 ①写真の選択・撮影 ②配色・配置
発　表 デザイン ①写真の選択・撮影 ②配色・配置 ③レイアウト （配置工夫） よく できている だいたい もう一工夫 内　容 ①手順の分かりやすさ ②オリジナリティ ③ボリューム （内容量） 「発表」の項目は今回評価しません Ａの中でもとくにすばらしいものにＳをつける！ 評価態度も評価対象です（ＡとＢをきっちりつけること）