Webページを制作しよう! 応用編 高校1年⑩「社会と情報」
課題の内容 料理(お菓子)のレシピを紹介するWebサイトを制作する 3ページ制作する 実際に家庭で制作し、途中経過を撮影する 材料・途中経過・出来上がり写真は必ず撮影 誰かに手伝ってもらってもかまわない 3ページ制作する ①トップページ(タイトル・出来上がり) ②材料のページ(材料の写真・一覧表) ③作り方のページ(写真と手順を表で作成)
スケジュール K1A K1B 研究・企画 9/10 9/17 制作 9/17・24 ・29・10/1 9/24・29・ 10/1・6 相互評価 10/6 10/8 料理の制作は 9/24までに行い ・材料の写真 ・制作途中の写真 ・出来上がりの写真 を撮影する ・写真データはWebメール・クラウド(OneDriveなど)・カードで持参
Webページの研究 レシピが掲載されているページを研究 サイト名 Cookpad (http://cookpad.com/) レシピ名 お月見団子 分析 ・写真 ・手順 ・工夫 ・動画も付けてわかりやすくしている ・具体的な数字を書いてイメージをもちやすい ・かぼちゃの団子も混ぜてオリジナリティがある 感想
Webページ企画書 レシピ名 我が家の自慢カレー (タイトルも工夫を) 理由 我が家の自慢カレー (タイトルも工夫を) 理由 ・家で何度も作ったことがあり慣れているのと、ひと工夫があるので、カレーライスとしました。 ねらい ・途中段階の写真を多く使って初めての人でもわかりやすくする ・ポイントマークを付けて注意するところを目立たせる 絵コンテ Page1 タイトル ・背景はオレンジ系の色 ・タイトルは赤い字で ・写真はお皿に盛りつけて ・リンクはボタンを作る 写真 リンク リンク K1A(0)・・・・・
Assumption high-school 写真撮影のコツ その1 近距離で撮影せよ! (接写モードが有効!) その2 フラッシュは使うな! (反射を防げ!手ぶれに注意!) その3 食器の色も工夫! (白・黒は料理が引き立つよ!) その4 背景を工夫せよ (和風の小道具・ランチョンマット) Assumption high-school
テキスト・写真もすべて表を組んで、その中に配置する!! Webは表をうまく使おう! 3行1列の表 テキスト・写真もすべて表を組んで、その中に配置する!! タイトルLOGO 表の枠を非表示に設定 ページの説明 組・番・名前 表を使う意味 表は位置関係を固定するために使います表を使わないと写真や画像が重なることが起こります!! 3行2列の表+セルの結合 出来上がり写真 料理の説明 選んだ理由 その他 1行3列の表 リンク リンク Assumption high-school
Assumption high-school リンクするときのアドレス k1a40 a b c ../b/b.html ../c/c.html a.htm b.htm c.htm ../c/c.html ../a/a.html Assumption high-school
提 出 できたWebを提出しよう! 「Web」フォルダの名前を「k1a40web」(半角)に変更しよう 提 出 できたWebを提出しよう! 「Web」フォルダの名前を「k1a40web」(半角)に変更しよう 上のフォルダを「コンピュータ→高1→提出」にコピーして提出しよう 提出できたら、自己評価シートにアピールを書こう 自分の組・番号
相互評価 評価項目 A B C Aの中でもとくにすばらしいものにSをつける! 発 表 デザイン 内 容 ①写真の選択・撮影 ②配色・配置 発 表 デザイン ①写真の選択・撮影 ②配色・配置 ③レイアウト (配置工夫) よく できている だいたい もう一工夫 内 容 ①手順の分かりやすさ ②オリジナリティ ③ボリューム (内容量) 「発表」の項目は今回評価しません Aの中でもとくにすばらしいものにSをつける! 評価態度も評価対象です(AとBをきっちりつけること)