โรงเรียนสาธิตมหาวิทยาลัย...

โรงเรยนสาธตมหาวทยาลยราชภฏสวนสนนทา

แผนการจดการเรยนร กลมสาระการเรยนร การงานอาชพและเทคโนโลยสารสนเทศ (คอมพวเตอร) ชนประถมศกษาปท ๖

หนวยการเรยนร หลากหลายสไตลสอ เวลา ๑ คาบเรยน อาจารยผสอน อาจารยศรลกษณ เลศหรญทรพย

๑. ความคดรวบยอด

Input Device คอ อปกรณทน าเขาหรอรบขอมลจากผใช เพอปอนค าสงใหหนวยประมวลผลท างาน แลวแสดงผลออกมา Output Device ผานทางอปกรณทผใช ใชงานซง Input Device / Output Device กจะมเครองมอแตกตางกน และมคณสมบตการใชงานทตางกน

๒. ผลการเรยนรทคาดหวงรายป

๑ เขาใจเหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมล การเรยนร การสอสาร การแกปญหา การท างานและอาชพอยางมประสทธภาพ ประสทธผล และมคณธรรม

๒ ใชเทคโนโลยในการท างาน การผลต การออกแบบ การแกปญหา การสรางงาน การสรางอาชพสจรต อยางมความเขาใจ มการวางแผนเชงกลยทธ และมความคดสรางสรรค

๓. จดประสงคการเรยนรเชงพฤตกรรม

๑) นกเรยนสามารถอธบายถงขอแตกตางในการท างาน Input Device / Output Device

๒) นกเรยนรหนาทและสามารถจ าแนกเครองมอ ระหวาง Input Device / Output Device

๓) นกเรยนรขอแตกตางเครองพมพ (Printer) แตละประเภทและสามารถเลอกใชใหเหมาะสมกบงานได

๔. เนอหาการเรยนร

อปกรณน าเขาขอมล (Input Device) เปนเครองมอทมหนาทรบค าสงเพอน าแสดงยงอปกรณสงออก (Output Device)

หนาทและการท างานของ

Input Device ไดแก คยบอรด เมาส ไมโครโฟน กลองดจตอล สแกนเนอร จอยสตก

Output Device ไดแก จอภาพ เครองพมพ หฟง ล าโพง

๕. บรณาการกบ ทกวชา ๖. กจกรรมการเรยนร ขนน า น าภาพ รปคอมพวเตอร แสดงทสไลด ดงรป

พรอมใหผเรยนสงเกต อปกรณจากรปดงกลาวแลวตอบค าถาม

ขนสอน

- ใบความรตามจ านวนนกเรยน

- ฉายสไลดเรอง Input Device / Output Device โดยใชโปรแกรม Power Point อธบาย ดงน

อปกรณรบเขา (Input Device) คอ สวนทสามารถรบขอมลทมาจากภายนอกโดยผานอปกรณอนๆ ได เชน คยบอรด เมาส สแกนเนอร กลองดจตอล

อปกรณสงออก (Output Device) คอ สวนของอปกรณทสงขอมลทมอยภายในเครองโดยผานชองสญญาณสงออกเพอไปแสดงผลทอปกรณอนๆ ไดเชน จอภาพ เครองพมพ ล าโพง โมเดม

น าสอการสอนเรอง หนาทของอปกรณ Input Device / Output Device เพออธบายหนาทและการท างานของอปกรณ

อปกรณรบเขา

๑. แปนพมพ หรอ คยบอรด (Key Board) เปนอปกรณทส าคญของเครองคอมพวเตอร สามารถรบขอมลจาการกดแปนพมพสงตอไปใหกบคอมพวเตอร แปนพมพทนยมใชจะม ๑๐๑ แปน และยกแปนอกขระและตวเลขออกจากกน สวนบนจะเปนชดค าสงพเศษเพอใหใชงานไดสะดวกขน ดงรป

๒. เมาส (Mouse) เปนอปกรณทมลกษณะคลายตวหน ดงรป

เราใชเมาสในการควบคมตวช (Pointer) ทปรากฏบนจอภาพใหสามารถเลอนไปสต าแหนงตางๆ ทตองการไดงาย สามารถใชรวมกบโปรแกรมในการควบคมค าสงกได จะมปม

ควบคม ๒ ปม ดวยกนท าหนาท ดงน

- ปมซายมอถากดหนงครง หมายถง การเลอกและถากดสองครงตดตอกนหมายถง สงใหโปรแกรมหรอสญรปทเลอกท างาน

- ปมขวามอถากดใหแสดงฟงกชนพเศษ โดยใชตวชเปนตวเลอกฟงกชนทตองการ

๓. สแกนเนอร เครองกราดตรวจรายหนา (Page scanner)

เปนอปกรณทใชอานรปภาพหรอตวหนงสอ เชน รปถาย และ สญลกษณตางๆ เปนตน

อปกรณสงออก

๑. จอภาพแสดงผล (Monitor) เปนอปกรณแสดงขอมลผลลพธทเกดจากการประมวลผลจากเครองคอมพวเตอรซงแสดงไดทงตวอกษร ตวเลข เครองหมายพเศษ และยงสามารถแสดงรปภาพ จอภาพ ม 2 แบบ คอ ซอารท (Cathode Ray Tube : CRT) ใชเทคโนโลยของหลอดรงสอเลกตรอนเชนเดยวกบจอโทรทศนในการท าใหเกดภาพ และจอแบบแอลซด (Liquid Crystal Display : LCD) ใชเทคโนโลยของการบรรจของเหลวไวภายในจอ เชนเดยวกบหนาปดนาฬกาในระบบตวเลข การแสดงผลบนจอภาพจะแสดงดวยจดเลกๆ ตามแนวนอนและแนวตง แตเดมจอภาพแสดงผลไดเพยงสเดยว พฒนาการตอมาท าใหการแสดงผลเปนสหลายสได นอกจากนยงมความละเอยดมากขน เชน จอภาพทใชกบคอมพวเตอรในปจจบน แสดงผลในภาวะกราฟกได ในแนวนอน 800 จด ในแนวตง 600 จด และแสดงสไดถงลายสขนาดของจอภาพจะวดความยาวตามเสนทแยงมม จอภาพ โดยทวไปจะมขนาด 15 นว หรอ 17 นว การแสดงผลของจอภาพควบคมโดยแผงวงจรอเลกทรอนกสซงอยภายในเครองคอมพวเตอร

๒. เครองพมพ (Printer) เปนอปกรณทใชในการพมพภาพหรอรายงาน เครองพมพทใชกบคอมพวเตอรมหลายประเภทตามเทคโนโลยการพมพ เครองพมพเปนอปกรณสงออกทพมพลงบนกระดาษ เครองพมพทใชกบคอมพวเตอร มดงน

- เครองพมพแบบจด (Dot matrix printer) เปนเครองพมพทมหวยงเปนเขมขนาดเลก พงไปชนแผนผาหมก เพอใหหมกตดบนกระดาษเปนจดเลกๆ หลายๆ จดเรยงกนเปนตวหนงสอหรอรปภาพ หวเขมทใชยงไปยงผาหมกมจ านวนหลายหว โดยปกตใชขนาด 24 หวเขม ซงจดวางเรยงกนในแนวตง ท าใหไดตวหนงสอท ละเอยดพอควร ขอด คอ พมพส าเนาพรอมกนไดหลายชดในครงเดยว เชนการออกบล

- เครองพมพเลเซอร (Laser printer) เปนเครองพมพทใหความคมชดและความละเอยดสง การพมพจะใชหฃกการทางแสง ปกตมความละเอยดไมนอยกวา 600 จดตอนว เครองพมพเลเซอรจงเปนเครองพมพทเหมาะกบงานพมพทตองการคณภาพ พฒนาการทางเทคโนโลยท าใหเครองพมพชนดนไดรบความนยมสงขน เพราะเมอเทยบประสทธภาพตอราคาแลวเครองพมชนดนเหมาะทจะใชในส านกงาน แตไมสามารถพมพส าเนากระดาษคารบอนได ดงรป

- เครองพมพแบบพนหมก (Inkjet printer) เปนเครองพมพทใชวธการพนหมกและผสมสจากแมสสามส คอ แดง เหลองและน าเงน โดยจะผสมสใหไดสตามความตองการและพนหมกเพอใหตดบนกระดาษ ในปจจบนเครองพมพแบบพนหมกเปนทนยมกนมาก เนองจากสามารถพมพรปภาพออกมาเปนสทสวยงาม ดงรป

ในปจจบนเครองพมพแบบพนหมกเปนทนยมกนมาก เนองจากสามารถพมพรปภาพออกมาเปนสทสวยงาม ดงรป

๓. ล าโพง และชดหฟง เปนสวนประกอบทส าคญในระบบเสยง

อธบายอปกรณอนๆ เพมเตมเชน

สรปพรอมซกถามความรความเขาใจของนกเรยน

๗. แหลงการเรยนร

โรงเรยน แบบทดสอบ ใบความร

๘. สอการเรยนร

Power point , เครองปรนเตอร , สแกนเนอร , เมาส

๙. การวดผลประเมนผล

๑) การมสวนรวมในการเรยน เชน ตอบค าถาม ความตงใจเรยน

๒) การตอบค าถามเปนรายบคคล

๓) การตอบค าถามจากแบบฝกหด

๑๐. การตรวจปรบปรงแกไขและขอเสนอแนะของผตรวจแผนการจดการเรยนร

๑๑. สรปผลการจดการเรยนร

๑๒. ปญหาจากการจดการเรยนร

๑๓. ปญหาจากการจดการเรยนร

๑๔. สาเหตทท าใหเกดปญหา

๑๕. แนวทางการแกปญหาเพอพฒนากระบวนการจดการเรยนร

ลงชอ ผสอน

(อาจารยศรลกษณ เลศหรญทรพย)

ลงชอ ผตรวจ

(อาจารยจฑารตน สรวบลยผล)

โรงเรยนสาธตมหาวทยาลยราชภฏสวนสนนทา แผนการจดการเรยนร

กลมสาระการเรยนร การงานอาชพและเทคโนโลยสารสนเทศ (คอมพวเตอร) ชนประถมศกษาปท ๖

โปรแกรม Image Ready จะมคณสมบตหลายอยางเหมอนกบ Photoshop แตจะมความแตกตางกนบาง เชน ท างานไดเฉพาะรปโหมด RGB เทานน , ไมมเครองมอระบายส นยมใชโปรแกรมมาใชส าหรบสรางภาพ เคลอนไหว ปายโฆษณาในเวบ

๑) นกเรยนสามารถอธบายการท างานของโปรแกรม Image Ready

๒) นกเรยนรจกหนาทและการท างานเครองมอของโปรแกรม Image Ready

๓) นกเรยนสามารถเลอกใชเครองมอใหเหมาะสมกบชนงานไดอยางถกตอง

การท างานเบองตนกบ โปรแกรม ImageReady 7.0 นกเรยนรจกเครองมอ และพนฐานทใชในการท างานของโปรแกรม Image Ready เพอน าไปออกแบบในการสรางชนงาน

๕. บรณาการกบ

ทกวชา

๖. กจกรรมการเรยนร

ขนน า

๑. แจกใบกจกรรมท ๑ ตามจ านวนนกเรยนเตรยมตวอยางภาพเคลอนไหว โดยฉายสไลตเพอน าเขาบทเรยน ดงรป

๒. ถามนกเรยนเพอทบทวนเกยวกบโปรแกรม Photoshop จากนน แนะน าโปรแกรม Image Ready ซงอยในตระกล Adobe เชนเดยวกบ Photoshop

๓. สาธตการเขาสโปรแกรมโดยใหนกเรยนปฏบตพรอมกน คอ

๓.๑ เปดคลกทปม Start > Program > เลอก โปรแกรม Photoshop จะปรากฏโปรแกรม ดงรป

เรมใชงาน Photoshop CS 6

ส าหรบใครทใชโปรแกรม Adobe Photoshop CS 6 นะครบ ท าตามขนตอนไดเลยครบ สวน version อน กสามารถเขาสโปรแกรมไดคลาย ๆ กน

การเขาสโปรแกรม Photoshop หลงจากทมการตดตงตวโปรแกรมแลว เรมเขาสโปรแกรมโดยเรมตนจาก 1. > ไปท ปม start 2. > All program 3. > โฟลเดอร Adobe master collection cs6 4. > Adobe Photoshop CS 6

เปนแถบทใชเกบค าสงหลกตางๆของโปรแกรม โดยเราสามารถเรยกใชค าสง ในแถบค าสงได ดวยวธการดงตอไปน 1.Click mouse ทแถบค าสง จะปรากฎแถบค าสงยอย 2.Click mouse เลอกแถบค าสงยอยทเราตองการ

ค าสงใน Menu Bar มดงตอไปน 1. File หมายถง รวมค าสงทใชจดการกบไฟลรปภาพ เชน สราง

ไฟลใหม, เปด, ปด, บนทกไฟล, น าเขาไฟล, สงออก

ไฟล และอน ๆ ทเกยวกบไฟล

2. Edit หมายถง รวมค าสงทใชส าหรบแกไขภาพ และปรบแตงการท างานของโปรแกรมเบองตน เชน กอปป, วาง, ยกเลกค าสง, แกไขเครองมอ และอน ๆ 3. Image หมายถง รวมค าสงทใชปรบแตงภาพ เชน ส, แสง, ขนาดของภาพ (image size), ขนาดของเอกสาร (canvas), โหมดสของภาพ, หมนภาพ และอน ๆ 4. Layer หมายถง รวมค าสงทใชจดการกบเลเยอร ทงการสรางเลเยอร, แปลงเลเยอร และการจดการกบเลเยอรในดานตาง ๆ 5. Select รวม ค าสงเกยวกบการเลอกวตถหรอพนทบนรปภาพ (Selection) เพอน าไปใชงานรวมกบค าสงอน ๆ เชน เลอกเพอเปลยนส, ลบ หรอใชเอฟเฟกตตาง ๆ กบรปภาพ 6. Filter เปนค าสงการเลน Effects ตางๆส าหรบรปภาพและวตถ

7. View เปนค าสงเกยวกบมมมองของภาพและวตถในลกษณะตางๆ เชน การขยายภาพและยอภาพใหดเลก 8. Window เปนสวนค าสงในการเลอกใชอปกรณเสรมตางๆทจ าเปนในการใชสราง Effects ตางๆ 9. Help เปนค าสงเพอแนะน าเกยวกบการใชโปรแกรมฯและจะมลายละเอยดของโปรแกรมอยในนน

Option Bar (ออปชนบาร) เปนสวนทใชปรบแตงคาการท างานของเครองมอตาง ๆ โดยรายละเอยดในออปชนบารจะเปลยนไปตามเครองมอทเราเลอกจากทลบอกซในขณะนน เชน เมอเราเลอกเครองมอ Brush (พกน) บนออปชนบารจะปรากฏออปชนทใชในการก าหนดขนาด และลกษณะหวแปรง,โหมดในการระบายความโปรงใสของสและอตราการไหลของสเปนตน Tool Panel (ทลพาเนล) หรอ กลองเครองมอ จะประกอบไปดวยเครองมอตาง ๆ ทใชในการวาด ตกแตง และแกไขภาพ เครองมอเหลานมจ านวนมาก ดงนนจงมการรวมเครองมอทท าหนาทคลาย ๆ กนไวในปมเดยวกน โดยจะมลกษณะรปสามเหลยมอยบรเวณมมดานลางดงภาพ 2 เพอบอกใหรวาในปมนยงมเครองมออนอยดวย

เครองมอ

Move ใชส าหรบเลอกพนทบนภาพเปนรปสเหลยม วงกลม วงร หรอเลอกเปนแถวคอลมน ขนาด 1 พเซล

Marquee ใชส าหรบยายพนททเลอกไวของภาพ หรอยายภาพในเลเยอรหรอยายเสนไกด

Lasso ใชเลอกพนทบนภาพเปนแนวเขตแบบอสระ

Magic Wand ใชเลอกพนทดวยวธระบายบนภาพ หรอเลอกจากสทใกลเคยงกน

Crop ใชตดขอบภาพ

Slice ใชตดแบงภาพเพอบนทกไฟลภาพยอย ๆ ทเรยกวาสไลซ (Slice) ส าหรบน าไปสราง เวบเพจ

Eyedropper ใชเลอกสจากสตาง ๆ บนภาพ

Healing Brush ใชตกแตงลบรอยต าหนในภาพ

Brush ใชระบายลงบนภาพ

Clone Stamp ใชท าส าเนาภาพ โดยกอปปภาพจากบรเวณอนมาระบาย หรอระบายดวย ลวดลาย

History Brush ใชระบายภาพดวยภาพของขนตอนเดมทผานมา หรอภาพของสถานะ เดมทบนทกไว

Eraser ใชลบภาพบางสวนทไมตองการ

Gradient ใชเตมสแบบไลระดบโทนสหรอความทบ

Blur ใชระบายภาพใหเบลอ

Bern ใชระบายเพอใหภาพมดลง

Dodge ใชระบายเพอใหภาพสวางขน

Pen ใชวาดเสนพาธ (Path)

Horizontal Type ใชพมพตวอกษรหรอขอความลงบนภาพ

Path Selection ใชเลอกและปรบแตงรปทรงของเสนพาธ

Rectangle ใชวาดรปทรงเรขาคณตหรอรปทรงส าเรจรป

Hand ใชเลอนดสวนตาง ๆ ของภาพ

Zoom ใชยอหรอขยายมมมองภาด

Set Foreground Color, Set Background Color ใชส าหรบก าหนดส - Foreground Color และ Background Color

เปดแสดงหนากระดาษ แบบ Full screen

Panel (พาเนล) เปนวนโดวยอย ๆ ทใชเลอกรายละเอยด หรอค าสงควบคมการท างานตาง ๆ ของโปรแกรม ใน Photoshop มพาเนลอยเปนจ านวนมาก เชน พาเนล Color ใชส าหรบเลอกส, พาเนล Layers ใชส าหรบจดการกบเลเยอร และพาเนล Info ใชแสดงคาสตรงต าแหนงทชเมาส รวมถงขนาด/ต าแหนงของพนททเลอกไว

ขนปฏบต

๔. ใหผเรยนสรางภาพเคลอนไหวของปลาตามอาจารยซงฉายผานเครองฉายสไลด หนากระดาษพรอมทงดตามใบกจกรรมทแจก ตามจ านวนนกเรยน

๔.๑ เลอกเมน File > Open เพอเลอกภาพทจะน ามาท าเปน Background และภาพเคลอนไหว

๔.๒ สราง Selection โดยใชเครองมอ Lasso เลอเฉพาะรปปลา ดงรป

๔.๓ เลอกค าสง Edit > Copy เพอ กอบปรปปลา จากนนสลบไปยงรป Background และเลอกค าสง Edit > Past วางรปปลาลงประมาณ 3 ครง จะปรากฏรปปลาทเลเยอรใหม เลอกแตละเลเยอร และใชค าสง Transform (Ctrl + T) เพอปรบขนาดและหมนปลาในแตละเลเยอรใหมรปรางตางกน ถาตองการเปลยนสรปปลา สามารถเลอกใชค าสง Image > Adjustment > Hue / Saturation เพอปรบแตงสของปลาใหแตกตางกน

การใชงาน Palettes

Palettes คอ Dialog ทใชตรวจสอบและก าหนดคณสมบตตาง ๆ ของรปภาพ เชน Palette ของ Navigator และ Info, Palette ของ Color, Swatches เปนตน

Palette ตาง ๆ จะถกจดเปนกลม ๆ ส าหรบการซอนหรอแสดง Palettes นนใหคลกทเมนค าสง Window จากนนเลอก Palette ทตองการซอนหรอแสดง Palette ใดถกเปดใชงานอยจะมเครองหมายถก

หนา Palette

Navigator Palette

Navigator Palette เปน Palette ทใชส าหรบเปลยนขนาดมมมอง ทจอภาพตามความเหมาะสม ประกอบดวยสวนตาง ๆ ดงน

1. Proxy Preview Area คอสวนทแสดงถงขนาดของภาพในชนงาน กรอบสหมายถงขนาดของชนงาน หากกรอบของ Proxy Preview อยรมสดของภาพแสดงวาภาพนนมขนาดพอดกบชนงาน

2. ตวเลขเปอรเซนตของภาพ คอสวนทใชก าหนดขนาดมมมองของภาพ ซงอยในรปแบบของเปอรเซนต โดยคาของขนาดภาพจรงจะเทากบ 100 เปอรเซนต

3. Zoom Out & Zoom In คอสวนทใชก าหนดขนาดมมมองของภาพ ประกอบดวยสวนทใชก าหนด 3 สวน คอ

3.1 Zoom Out คอสวนทอยดานซายสด ใชส าหรบยอขนาดมมมองของภาพใหเลกลง

3.2 Zoom In คอสวนทอยดานซายสด ใชส าหรบขยายขนาดมมมองของภาพใหใหญขน

3.3 Zoom Slider คอสวนทเปนแถบเลอน หากเลอนทางดานซายจะยอขนาดมมมองของภาพใหเลกลง แตหากเลอนมาทางขวาจะขยายขนาดมมมองของภาพใหใหญขน

Color Palette

Color Palette คอ Palette ทท าหนาทเปนจานส ซง Mode สทปรากฏในภาพจะเปนลกษณะการผสมใน Mode RGB มสวนประกอบตาง ๆ ดงน

1. Set foreground color คอสวนแสดงสของ foreground

2. Set background color คอสวนแสดงสของ background

Zoom Slider

Zoom In Zoom Out

ตวเลขเปอรเซนตของภาพ

Proxy Preview

3. RGB slider คอสวนทใชก าหนดคาของการผสมสใน Mode RGB ซงสามารถเลอนเพอปรบคาสไดจากแถบ slide หรอระบเปนตวเลข (0-255)

4. Sample color คอสวนส าหรบก าหนดคาสในลกษณะจมเลอกส

Swatches Palette

Swatches Palette คอ Palette ทท าหนาทส าหรบเกบสหลกๆ ทนยมใช สามารถเลอกน ามาใชไดทนทและถาหากวาคณมสทตองการใชเปนประจ า สามารถบนทกสนนไวใน Palette นได

การบนทกสทตองการไวท Swatches Palette สามารถท าไดโดยเลอกสทตองการ จากนนคลกเมาสทปมบนทกสใหมท Swatches Palette จะสามารถบนทกสทตองการได

Styles Palette

Styles Palette คอ Palette ทมไวส าหรบเกบลวดลายอยางลวดเรว สามารถเลอกลวดลายจาก Palette นไปใชในภาพ จะท าใหภาพทวาดไวเปลยนไปตามลวดลายทเลอกไวทนท และยงสามารถสรางลวดลายใหขนมาเองไดดวย

สหลกๆ ทใชเปนประจ า

บนทกสใหม

ลบสทมอย

Sample

RGB slider Set background

Set foreground

การใชงานนนสามารถท าไดโดยเลอกท Layer ทตองการจะท า Style แลวคลกเลอกท Style บน Styles Palette จากนน Layer จะเปลยนตาม Style นนๆ

๕. โดยใหนกเรยนท าการ Save งานโดยเลอกท เมน File > Save Optimized As เลอกโฟลเดอรท Save คอ Drive D : > โฟลเดอร Student > p6 ตามดวยหมายเลขหองนนๆ

ใบกจกรรม

ใบกจกรรม เครองฉายสไลด

๑) การมสวนรวมในการเรยน เชน ตงใจ และปฏบตตาม

๒) การสอบถาม เมอไมเขาใจ หรอปฏบตตามไมทน

คลกท Preview in Browser เพอทดสอบการใชงาน

ลวดลายตางๆ

Clear Style

New Style

Delete Style

๓) ชนงาน

๔) ความตรงตอเวลา

๑) นกเรยนรจกหนาทและการท างานเครองมอของโปรแกรม Image Ready

๒) นกเรยนสามารถเลอกน าเครองมอมาใชสรางสรรคชนงานไดอยางเหมาะสม

๓) นกเรยนสรางสรรคชนงานตามความสามารถของตนเองได

นกเรยนรและเขาใจเครองมอทใชในการท างานของโปรแกรม Image Ready เพอน าไปออกแบบในการสรางชนงาน ตามความสามารถของนกเรยนได

ทกวชา

ขนน า

๑. ทบทวนเครองมอทนกเรยนน ามาใชสรางชนงาน ใบกจกรรมท ๑

๒. น าตวอยางชนงานมาใหนกเรยนดเพอเปนแนวทางในการออกแบบชนงานตน ดงรป

๓. อธบายการใชงานของเครองมอเพมเตม และสอบถามเพอทดสอบความรความเขาใจ

๔. มอบหมายงานโดยใหนกเรยนน ารปของตนเองมาใชในการออกแบบภาพเคลอนไหว โดยใหมความสมพนธกนกบกจกรรมวนพอ โดยก าหนดตรวจงานภายในคาบเรยน น

๕. อาจารยเดนดพรอมใหค าแนะน านกเรยน

๖. กอนหมดเวลา 10 นาท ใหนกเรยน Save งานของตนเอง

๗. อาจารยเดนตรวจชนงานนกเรยน

๒) การสอบถาม เมอไมเขาใจ หรอปฏบตตามไมทน

๓) ชนงาน

ลงชอ ผสอน (อาจารยศรลกษณ เลศหรญทรพย)

ลงชอ ผตรวจ (อาจารยจฑารตน สรวบลยผล)

๑) นกเรยนสามารถใชโปรแกรม Image Ready ใชในการสราง Image Map ได

๒) นกเรยนสามารถออกแบบ Image Map เพอสรางลงคใหกบบรเวณรปตางๆ ได

๓) นกเรยนสามารถใชเครองมอในโปรแกรม Image Ready สรางชนงานตามทออกแบบได

นกเรยนเรยนรเกยวกบเครองมอ Image Map ซงมจ านวน 4 ชน คอ Rectangle Image Map ใชสรางเปนรปสเหลยม Circle Image Map สรางเปนรปวงกลม Polygon Image Map สรางเปนรปหลายเหลยม และ Image Map Select เลอกตามทตองการเพอน ามาออกแบบชนงาน

ทกวชา

ขนน า

๑. แจกใบกจกรรมท การสราง Image Map ตามจ านวนนกเรยน

๒. ทบทวนเกยวกบเครองมอทนกเรยนใชสรางชนงานกจกรรมทผานมา

๓. ใหนกเรยนดตวอยาง Image Map โดยฉายสไลดเพอน าเขาสบทเรยน ดงรป

ขนสอน

๑. อธบาย เครองมอในกลม Image Map โดยฉายสไลดแสดงเครองมอภายในโปรแกรม ซงมเครองมอจ านวน ๔ ชน ดงน

ขนปฏบต

๑. ใหนกเรยนเปดไฟลรปภาพทก าหนดในการน ามาใชสราง Image Map ขนมาใน Image Ready

๒. เปดพาเลต Image Map ขนมาโดยใชค าสง Window > Image Map

๓. คลกเลอกเครองมอ Image Map ตามรปทรงทตองการ คอ

สเหลยม , วงกลม หรอ รปหลายเหลยม

๔. ใชเมาสวาดขอบเขตของรปทรงลงไปในต าแหนงบนรปภาพ ทตองการท าเปนลงค

๕. ในชองดานขวาของพาเลต Image Map ใหก าหนดคาตางๆ ดงน

๖. การบนทก Image Map เพอน าไปใชงาน มขนตอน ดงน

ตองก าหนดออปชนในพาเลต Optimized แลวเลอกค าสง File > Save Optimized As แลวระบชอไฟลโดยตองระบในชอง Save as type เปน HTML and Image

กจกรรม ใหนกเรยนเลอกภาพ 1 ภาพ เพอน ามาใชในการออกแบบ Image Map ตามรปทรงทนกเรยนตองการ

๒) การสอบถาม

๓) การใชเครองมอสรางชนงานไดถกตอง

กลมสาระการเรยนร การงานอาชพและเทคโนโลยสาระสนเทศ (คอมพวเตอร) ชนประถมศกษาปท ๖

๑) นกเรยนมความรความเขาใจประโยชนของปายโฆษณาบนเวบ หรอ Banner

๒) นกเรยนรจกหนาทของเครองมอทใชในการสราง Banner

๓) นกเรยนสามารถปฏบตตามขนตอนในการสรางชนงานไดอยางถกตอง

การใชปายโฆษณาบนเวบ หรอ Banner เปนการชวยสรางจดเดนใหกบเวบไซทนนๆ ซงสามารถบอก หรอสอถงตวองคกรเจาของเวบไซทไดเปนอยางด ในโปรแกรม Image Ready เปนโปรแกรมหนงทมเครองมอ สามารถน ามาใชในการออกแบบ Banner ได

๕. บรณาการกบวชา

ทกวชา

ขนน า

๑. น าตวอยางปายโฆษณาบนเวบ Banner แสดงทางเครองฉายโปรเจคเตอร ดงรป

๒. อธบายถงประโยชนของการน าปายโฆษณาบนเวบหรอ Banner มาใช

๓. แจกใบกจกรรมตามจ านวนนกเรยนโดยผเรยนนงประจ าเครองตน

ขนปฏบต

ก าหนดใหนกเรยนปฏบตพรอมอาจารยผสอน

๑. เปดโปรแกรม Image Ready

๒. เลอกค าสง File > New ในชอง Image Size เลอก Wed Banner และเลอกเลเยอรแบบ White ดงรป

๓. สรางเลเยอรรปภาพโดยใชค าสง File > Open เลอกรปทตองการเพอน ามาวางทเลเยอร

Background

ใชเมาสคลกทปม เพอจะท าการลากรปภาพในแตละเลเยอร มาวางท Background

กรณทรปทตองน ามามขนาดใหญ ใหใชค าสง Free Transform เพอปรบขนาดรปใหไดตามตองการ

๔. สรางเลเยอรขอความขนมา 2 เลเยอร โดยคลกทปม กอน จากนนใหนกเรยนพมพขอความ เชนเลเยอรขอความท 1 ยนดตอนรบเขาสเวบไซท

เลเยอรขอความท 2 โรงเรยนประถมสาธตมหาวทยาลยราชภฏสวนสนนทา จะไดเลเยอร ทงหมด 5 เลเยอร ดงรป

๕. จากนนไปทพาเลท Animation เพอทากรสรางเฟรมภาพเคลอนไหว โดยเรมแรกจะปรากฏเพยง 1 เฟรม เดยวใหคลกทปม

Duplicates Current Frame เพอสรางเฟรมใหมขนมาอก 1 เฟรม ดงรป

เลอกก าหนดเวลาในแตละเฟรม ก าหนดใหเลอก 1.0 วนาท

๖. เลอกรปภาพใหกบแตละเฟรม โดยการคลกทเฟรมทตองการ เรมจากเฟรมท 1 แลงคลกเลอกเลเยอรทจะใหปรากฏในเฟรม โดยคลกในชองเพอซอน / แสดง เลเยอร โดยก าหนดทละเฟรมวาเฟรมไหนจะแสดงเลเยอรอะไรบาง ดงตวอยาง

เฟรมท 1 เลอก Layer ทจะแสดง ดงรป

เฟรมท 2 เลอก

๗. ทดสอบการท างานโดยคลกทปม Play ทขางพาเลท Animation คลกปม Stop

เมอตองการหยด (หรอจะทดสอบกบ กได)

.๘. เลอกค าสง File > Save Optimized As ท ไดรฟ D : > Student > P6 เลอกเกบงานไวในหองของตนเองเทานน (นกเรยนตองเปลยน save ใหเปนนามสกล .GIF เสมอ)

๙. นกเรยนสามารถน าเครองมอ Tweens Animation Frame มาประยกตใชได

ใบกจกรรม เครองฉายโปรเจคเตอร

๒) การตอบค าถาม

๓) การใชเครองมอสรางชนงานไดถกตอง

หนวยการเรยนร สนนทาทรก เวลา ๑ คาบเรยน อาจารยผสอน อาจารยศรลกษณ เลศหรญทรพย

รถงขอแตกตางระหวางค าวา Website , Home Page , Web Page เพอใหนกเรยนเขาใจแลวน ามาใชในการออกแบบโดยใชโปรแกรม Macromedia Dreamweaver MX

โปรแกรม Dreamweaver MX เปนโปรแกรมส าหรบออกแบบและพฒนาเวบไซต การสรางเวบเพจ และเวบแอพพลเคชน ก าลงเปนทนยมน ามาสรางเวบเพจในปจจบน เนอจากใชไดงาย สามารถจดวางขอความรปภาพ ตารางขอมล และอนๆ ลงในเวบเพจไดอยางงายโดยไมจ าเปนตองทราบโคด HTML ทงนโปรแกรมยงมเครองมอทชวยในการจดการและบรหารเวบไซทไดอยางสมบรณ

๑) นกเรยนมความรความเขาใจขอแตกตางระหวางค าวา Web Site , Home Page , Web Page ได

๒) นกเรยนบอกถงความส าคญของการออกแบบและการวางแผนสรางเวบไซตได

๓) นกเรยนมความคดสรางสรรคในการออกแบบเวบเพจของตนเองได

นกเรยนทราบถงกระบวนการออกแบบและการวางแผนเพอใชในการออกแบบเวบไซต อยางถกตอง และสามารถน ามาใชในการออกแบบ ผงเวบไซตของตนได

ทกวชา

เปดตวอยางเวบไซตใหนกเรยนดโดยผานเครองโปรเจคเตอร

ขนตอน

๑. สมถามนกเรยนเรอง ขอแตกตาง ของค าวา Home Page , Web page , และ Web Site

๒. อธบายเรอง Website คออะไร โดยการน าเสนอโดยผานโปรเจคเตอร

๓. อธบายถงความส าคญหลกในการออกแบบเวบไซต

๔. ใหนกเรยนดตวอยางเวบไซตทอาจารยน ามาเปนตวอยาง พรอมอธบายแตละสวน ดงรป

สวนบนสดของหนา (Page Header) สวนบนของหนาสวนใหญจะนยมจดวาง โลโก ชอเวบไซต เปนตน

สวนของเนอหา (Page Body) สวนแสดงภายในเวบนน ซงจะประกอบไปดวยขอความ กราฟก ตารางขอมลซงขนอยกบการจดวางของคนทออกแบบเวบ

สวนทายของหนา (Page Footer) สวนใหญจะนยมวางลงค ทเกยวของกบเวบไซต ชอของเจาของ

๕. อธบาย การวางแผนออกแบบเวบไซต

ก าหนดเปาหมายของเวบไซท เพอทจะไดพฒนาเวบไซตไดตรงกบความตองการ และท าใหทราบถงเนอหา และเครองมอทจะใชในการพฒนาเวบไซต

ก าหนดกลมเปาหมายของผเขาชม เพอจะไดออกแบบเวบเพจไดเหมาะสม การเลอกภาษาและ Interface ทจะใชตดตอกบผชม เปนตน

จดโครงสรางเวบไซท การจดโครงสรางเพอทจะไดจดเกบไฟล HTML ไฟลรปภาพ และองคประกอบอนๆ ใหเปนหมวดหม โดยสรางทเกบและรวบรวมไฟล เพอทจะไดคนหางาย และไมเกบไฟลซ าซอนกน และสะดวกส ากรบเวลา Upload ไฟลขนเวบเซรฟเวอร

ออกแบบโครงรางหลกของเวบไซท วาตองการใหเวบไซตออกมาในรปแบบใด จดวางองคประกอบแบบไหน เวบเพจแตละหนาจะตองมอะไรบางทเปนองคประกอบหลก

ก าหนด Dreamweaver Site เปนเครองมอทใชในการสรางและจดการกบเวบไซตของเรา โดยจะรวบรวมไฟลทใชในการสรางเวบไซต และคอยตรวจสอบลงคทเชอมโยงยงเวบเพจตางๆ เมอมการแกไขไฟล

สรป

สอบถามนกเรยนเพอความรความเขาใจ

Internet

ใบกจกรรม เครองฉายโปรเจคเตอร Internet

๑) การตอบค าถาม ความตงใจ ๒) ความตรงตอเวลา ๓) ท าชนงานตามมอบหมาย ๑๐. การตรวจปรบปรงแกไขและขอเสนอแนะของผตรวจแผนการจดการเรยนร

กลมสาระการเรยนร การงานอาชพและเทคโนโลยสาร สนเทศ (คอมพวเตอร) ชนประถมศกษาปท ๖

๑) นกเรยนรจกและสามารถอธบายสวนประกอบตางๆ ของโปรแกรมได

๒) นกเรยนอธบายความส าคญของเครองมอตางๆ ภายในโปรแกรม Dreamweaver MX ได

๓) นกเรยนสามารถเลอกใชเครองมอตางๆ ภายในโปรแกรม Dreamweaver MX

นกเรยนรจกกบสวนประกอบตางๆ ของโปรแกรมและหนาทการท างานของเครองมอตางๆ ของโปรแกรม Dreamweaver MXได

ทกวชา

ขนน า

๑. สาธตการเขาสโปรแกรม

เรมตนใชงานโปรแกรม Macromedia Dreamweaver

การเปดโปรแกรม Dreamweaver ท าไดโดย

คลกทปม Start ของ Windows จากนนเลอนไปท All Programs > เลอก Dreamweaver และคลก

ท Macromedia Dreamweaver MX

จากนนจะเขาสพนทการท างานของโปรแกรม Dreamweaver MX

๒. อธบายเครองมอแตละตวของโปรแกรม ดงรป

๓. อธบายการท างานของวนโดว Document

วนโดว Document คอ สวนจะใสเนอหาและจดองคประกอบของเวบเพจลงไป การใชงาน วนโดวนจะคลายกบการใช program Word ทวไป คอ มการพมพขอความ ใสรปภาพ สรางตารางขอมล โดยเนอหาตางๆ ทแทรกลงไปจะปรากฏใหเหน คลายกบทปรากฏในบราวเซอร ยกเวนขอมลบางอยาง เชน ภาพเคลอนไหวหรอ Movie ของ Flash

Window Document นจะมมมในการท างาน 3 มมมองดวยกนคอ มมมองการออกแบบ (Design) มมมองโคด (HTML) และมมมองทงโคดและออกแบบ จะท าใหการสรางเวบเพจสะดวกรวดเรว เพราะสามารถท าไดหลายวธสลบกนไปตามความเหมาะสม

๔. อธบายการท างานของเครองมอตางๆ ใน Insert bar

คอ แถบเครองมอทประกอบไปดวยปมค าสงทใชในการแทรก Object ชนดตางๆ ลงไปในเวบเพจ ซงจะแยกเปนหมวดหมดวยแทบ เชน แทบ Common แทบท างานทวไป แทบ Table เกยวกบการสรางตาราง เปนตน

ใน Insert bar จะประกอบไปดวยแทบค าสงซงแยกแตละหมวดไว ดงน

Common กลมค าสงทใชในการแทรก Object ทใชงานบอยๆ ในการสรางเวบเพจ เชน ค าสงแทรก รปภาพ ค าสงแทรกตาราง เปนตน

Layout กลมค าสงทใชแทรก Object ทใชจดการกบโครงสรางของเวบเพจ เชน ตาราง เลเยอร และการท างานของมมมองแบบ เลยเอาท

Text กลมของค าสงทใชจดรปแบบขอความภายในเวบเพจ เชน หวเรอง ตวหนา ตวเอยง เปนตน

Table กลมค าสงทใชแทรกตาราง แถว คอลมน

๕. อธบายการท างานของ Properties Inspector

แสดงคณสมบตของ Object ตางๆ ทเลอกในเวบเพจ และแสดงค าสงในการจดการกบ Object ทเลอก เชน ต าแหนง ส ขนาดของ Object เปนตน

๖. อธบายการท างานของ Panel ตางๆ

พาเนลเปนกรอบเลกๆ ทประกอบดวยปมเครองมอทใชส าหรบจดการกบ Code , Site , Behaviors และจดการกบไฟล และโฟลเดอรภายใน Site โดยประกอบไปดวยหลายพาเนลดวยกนส าหรบการใชงานเฉพาะ เรอง สามารถเปด พาเนลขนมาใชงาน โดยเลอกค าสง Window แลวเลอกพาเนลทตองการ เปด / ปด

๗. สาธตการสรางเวบไซตใหม โดยนกเรยนปฏบตพรอมกน ดงรป

เลอกค าสง Site > New site จากเมน

จะปรากฏไดอะลอกบอกซ Site Definition for Untitled Site 1 ใหคลกทแทบ Basic

ใน Edit Files หนาแกร พมพชอเวบไซทลงไปทชอง What would you like to name your site? และคลกปม Next

ใน Edit Files , Part 2 เลอก server Technology แลวเลอก No. I do not want to use server technology และคลกปม next

ใน Edit Files , Part 3 ใหเลอกไดเรคทอรทจะท าเปนเวบไซท โดยคลกทไอคอน เพอเปดเขาไปในโฟลเดอรทตองการแลวคลก Select จากนนคลกปม Next

หลงจากนนจะปรากฏหนาจอของการเลอก Sharing Files ใหเลอกเปน None และคลกปม next จะปรากฏหนาจอ Summary ซงแสดงรายละเอยดของเวบไซทขนมาใหคลกทปม Done เพอสนสดการสราง Site

ปมค าสงภายใน Document Toolbar

ปม หนาท

แสดงเวบเพจในมมมองโคด HTML

แสดงเวบเพจในมมมองโคด และออกแบบ

แสดงเวบเพจในมมมองออกแบบ

กรอบชอเวบเพจ เพอจะถกน าไปแสดงท Title bar ของ บราวเซอร

เปดบราวเซอรดฟอลตเพอทดสอบการท างานของเวบเพจ (F12)

๗. สรป

ถามเพอทดสอบความรความเขาใจของผเรยน

Internet ใบความร

๑) การตอบค าถาม ความตงใจ

๒) ความตรงตอเวลา

๓) ท าชนงานตามมอบหมาย

๑) นกเรยนสามารถบอกถงเครองมอทใชในการใสขอความ และรปภาพลงเวบเพจได

๒) นกเรยนสามารถปฏบตตามขนตอนในการออกแบบผลงานได

๓) นกเรยนสามารถสรางสรรคชนงานโดยน าเครองมอมาใชไดอยางถกตอง

การวางเนอหาขอมล และรปภาพ โดยนกเรยนน าเครองมอมาใชไดอยางถกตอง

ทกวชา

๑. ทบทวนเนอหาคาบเรยนทผานมา

๒. ใหนกเรยนสรางเวบเพจใหม โดยนกเรยนปฏบตตามอาจารยผสอน โดย เลอกค าสง File > New จากนนเลอกประเภทของเวบเพจทจะสราง ดงรป

จะแสดงพนทการท างาน ดงรป

๓. การก าหนดคณสมบตพนฐานของเวบเพจ โดยใชค าสง Page Properties

เลอกค าสงจาก Modify > Page Properties หรอกดคย Ctrl + J จะปรากฏ หนาตาง ดงรป

๔. ก าหนดคณสมบตของหนาเวบเพจน

Title ชอเวบเพจทจะปรากฏใน ไตเตลบารของโปรแกรมบราวเซอร เวลาแสดงผล

Background Image รปภาพทจะปรากฏทฉากหลงของเวบเพจ

Background ก าหนดสพนฉากหลงของเวบเพจ

Text สของขอความปกตทวไปในเวบเพจ

Links สของความทเปนไฮเปอรลงค

Visited Links สของขอความของไฮเปอรลงคทถกคลกไปแลว

Active Links สของขอความของไฮเปอรลงคทก าลงคลกอย

๕. การใสเนอหาลงในเวบเพจ โดยอาจารยผสอนสาธตใหนกเรยนปฏบต ดงรป

การจดรปแบบขอความ

หมายถง ฟอนต ขนาด ส ตวหนา ตวเอยง ตลอดจนการนดต าแนหงขอความ และยอหนาภายในเวบเพจโดยใชเครองมอ Properties Inspector

การก าหนดขนาดตวอกษร

การก าหนดนเปนไปตามคณสมบตของ HTML ซงมขนาดตวอกษรตงแต 1 – 7 เทานน โดยขนาดปกต คอ 3

การก าหนดสตวอกษร

การก าหนดสตวอกษรในชอง Text Properties จะมผลกบขอความทงหนาเวบเพจ แตการก าหนดส ตรงนจะมผลเฉพาะขอความทเลอกไวเทานน

๑. เลกขอความทตองการก าหนดส

๒. คลกทปม บน Properties Inspector แลวคลกเลอกสจากตาราง หรอสามารถใส

รหสส ลงในชอง ได

การยอหนาขอความ

สามารถจดยอหนาใหกบขอความภายในเวบเพจ โดยใหขอความนนอยในต าแหนงตางๆ ทตองการ เชน กงกลาง ชดขวา ชดซาย เปนตน โดยใชเครองมอจาก Properties Inspector

๖. การวางรปภาพลงในเวบเพจโดยอาจารยผสอนสาธตใหนกเรยนปฏบตตาม ดงรป

เมอน ารปภาพมาวางในเอกสาร โปรแกรมจะสรางโคด HTML เปนค าสงในการแทรกรปภาพ คอ แทก <IMG> ทระบต าแหนงทเกบรปภาพ และขนาดของรปภาพ เพอใหการท างานเปนไปอยางถกตอง และจะตองบนทกรปภาพนนเกบไวในเวบไซทของเรา การวางรปมขนตอน ดงน

๑. คลกวางเคอรเซอรตรงจดทตองการวางรปในวนโดว Document

๒. คลกทปม Image ทแทบ Common ของ Insert bar

๓. คลกทชอง Look in เพอเปดไปยงต าแหนงทเกบรปภาพแบบตางๆ ตามตองการ

๔. คลกทปม View และเลอกแสดงรปภาพแบบตางๆ ตามตองการ

๕. คลกเลอกรปภาพทตองการ และดตวอยางรปทางดานขวา

๖. คลก OK

๗. ถาขอความแสดงวารปนอยนอก Site จะตอง Copy เขามาไวในเวบไซทโดยใหตอบ Yes

๘. เลอกต าแหนงโฟลเดอรทจะเกบรปในเวบไซท

๙. คลก Save

การปรบแตงคณสมบตตางๆ ของรปภาพ

การปรบแตงคณสมบตเฉพาะของรปภาพเพมเตม โดยการใช Properties Inspector ดงนน

การใสกรอบรปใหรปภาพ

ถาตองการใหรปภพามกรอบเพอทจะไดเหนขอบเขตของรปภาพ ใหระบความหนาของเสนกรอบในเสนชอง Border บน Properties Inspector

การจดต าแหนงภาพเทยบกบขอความ

การใชออปชน Align ในแถบ Properties Inspector ดงรป

Default ไมระบต าแหนง การแสดงผลขนอยกบบราวเซอร

Baseline และ Bottom จดใหขอบดานลางของภาพอยในแนวเดยวกนเสนฐานตวอกษร

Top จดขอบบนของภาพใหอยในแนวเดยวกบเสนฐานของตวอกษร หรอออบเจคสงทสด Middle จดใหอยกงกลางของภาพอยในแนวเดยวกบเสนฐานของตวอกษร

Text Top จดใหขอบบนของภาพอยในแนวเดยวกบสวนบนของตวอกษรทสงทสด

Absolute Middle จดจดกลางของภาพอยแนวเดยวกบกงกลางบรรทดขอความ

Absolute Bottom จดใหขอบดานลางของรปภาพอยในแนวลางสดของบรรทด

Left จดรปภาพไวดานซายสดของขอความ

Right จดรปภาพไวดานขวาสดของขอความ

๗. สรป

๘. ใหนกเรยนใชเครองมอเพอจดรปแบบของขอความและรปภาพตามทก าหนดให

ใบกจกรรม Internet เครองฉายโปรเจคเตอร

รถงขอแตกตางระวหางค าวา Website , Home Page , Web Page เพอใหนกเรยนเขาใจแลวน ามาใชในการออกแบบโดยใชโปรแกรม Macromedia Dreamweaver MX

๑) นกเรยนมความรความเขาใจขอแตกตางระหวางไฮเปอรลงคแบบตางได

๒) นกเรยนสามารถน าเครองมอมาใชสรางไฮเปอรลงคแตละประเภทได

๓) นกเรยนสามารถสรางสรรคผลวานโดยใชเครองมอการสรางไฮเปอรลงค

นกเรยนมความรความเขาใจในการสรางลงค แบบไฮเปอรลงค วามองคประกอบอย 2 สวน ดวยกน คอ ตนทาง และปลายทาง และสามารถก าหนดลงปลายทางได 4 แบบ ดงน

การลงคภายในเวบเพจเดยวกน การลงคภายในเวบไซต การลงคไปยงเวบไซตอน การลงคอเมล

ทกวชา

๒. อธบายความหมายของค าวา ไฮเปอรลงค (Hyperlink)

๓. แสดงตวอยางการลงค โดยเปดโปรแกรม อนเตอรเนต (Internet Explorer Browser) ผานเครองฉายโปรเจคเตอร

๔. อธบายองคประกอบของไฮเปอรลงค

ตนทาง (Source Anchor)

หมายถงขอมลบนเวบเพจทเมอผชมเลอนเมาสไปช พอยเตอรจะเปลยนเปนรป และเมอผชมคลกเอกสารหรอขอมลปลายทางจะถกเรยกขนมา ตนทางจะเปนขอความ รปภาพ หรอเมน กได

ปลายทาง (Destination Anchor)

คอ URL หมายถง Uniform Resource Locator ทอางถงเอกสาร ไฟล โปรแกรมหรอแหลงขอมลใดๆ บนอนเตอรเนต

๕. อาจารยสอนการสรางลงค แบบภายในเวบเพจเดยวกน (Name Anchor) โดยใหนกเรยนปฏบตตามขนตอนดงรป

การสราง Name Anchor

๕.๑ เปดเวบเพจทตองการสรางลงคมาเวบเพจขนมา 1 เวบเพจ

๕.๒ เลกขอความหรอรปภาพทจะสรางเปนจด Name Anchor

๕.๓ คลกทปม Name Anchor ทแทบ Common บน Insert Bar

๕.๔ ตงชอของ Name Anchor (หามเวนวรรค) จากนนคลก OK

๕.๕ จะปรากฏรปสมอเรอตรงต าแหนงทสามารถ การสรางลงคไปยง Name Anchor

๕.๖ เลอกขอความหรอรปภาพ ทจะสรางเปนลงค

๕.๗ พมพชอ Name Anchor ชอง Link ในแถบ Properties Inspector โดยใสเครองหมาย # น าหนาชอ เชน #Action

๕.๘ ทดสอบการท างานของลงค โดยการกดคย F12 และลองคลกทลงคทสรางไว

๖. อาจารยสอน การลงคภายในเวบไซท (Web Page / Fill) โดยใหนกเรยนปฏบตตามเปนการสรางลงคภายในเวบไซทเดยวกน จากเวบเพจหนงไปยงเวบเพจหนงขนตอน ดงรป

๖.๑ เลอกขอความหรอรปภาพทตองการสรางเปนลงค

๖.๒ คลกทปม Browse for File

๖.๓ คลกเลอกชอไฟลทจะลงคไปหา

๖.๔ คลกทปม OK

๖.๕ ถาตองการก าหนดเฟรม หรอวนโดวปลายทางทตองการใหเวบเพจนแสดงผลจากชอง Target

> _blank ใหเปดเวบเพจปลายทางในวนโดวใหม

> _self ใหแสดงเวบเพจในเฟรมเดมจากทเลอกลงค

> _parent ใหแสดงเวบเพจในเฟรมทครอบเฟรมปจจบนอย

> _top ใหแสดงเวบเพจในวนโดวเดม โดยยกเลกเฟรมทครอบอยทงหมด

๖.๖ ทดสอบการท างานของลคภายในเวบไซต

๗. อาจารยสอน การลงคไปยงเวบไซทอน (Website) โดยใหนกเรยนปฏบตตาม

เปนการสรางลงคไปยงเวบไซต เวบเพจ รปภาพ โปรแกรมแหลงขอมลอนทอย

จะแสดงพนทการท างาน ดงรป โปรแกรม หรอแหลงขอมลอน ทอยภายนอกเวบไซทของเรา

๗.๑ เลอกขอความหรอรปภาพทจะท าเปนลงค

๗.๒ ใส URL ปลายทางในชอง Link บน Propertiesp Inspector ปลายทางตองระบแบบเตม คอ http://www. ชอ เวบไซต เชน http://www.primary.riss.ac.th

๗.๓ ถาตองการเลอกวนโดว หรอเฟรมปลายทางทจะแสดงเวบเพจในชอง Target

๘. อาจารยสอน การลงคไปยงอเมล โดยใหนกเรยนปฏบตตาม

การสรางลงคไปยงอเมล คอ การระบชออเมลแอดเดรสเปนปลายทางของลงค ซงมผชมคลกทลงคจะมการเปดโปรแกรมอเมลขนมา พรอมกบน าทอยอเมลในลงคไปใสในชอง link โดยอนโนมตท าใหผชมสามารถกรอกขอมลและสงอเมลไดเลย

๘.๑ เลอกขอความ หรอรปภาพทจะท าเปนลงค

๘.๒ ใสแอดเดรสปลายทางในชอง Link บน Properties Inspector โดย แอดเดรสปลายทางตองระบในรปแบบ mailto: อเมลแอดเดรส เชน mailtosurin_18@hotmail.com

๙. สรป

๑๐. นกเรยนฝกปฏบตซ า

รถงขอแตกตางระวหางค าวา Website , Home Page , Web Page เพอใหนกเรยนเขาใจแลวน ามาใชในการออกแบบโดยใชโปรแกรม Macromedia Dreamweaver MX

๑) นกเรยนอธบายความส าคญของการน าตารางมาใชในการออกแบบเวบเพจได

๒) นกเรยนรจกเครองมอทใชสรางเวบเพจดวยตารางได

๓) นกเรยนสามารถออกแบบชนงานโดยการใชตารางในการสรางชนงานได

นกเรยนรจกวธการใชตารางมาเปนเครองมอทชวยในการจดวางเลขเอาทของเวบเพจใหมความสวยงาม และชวยในการจดวางต าแหนงการแสดงผลของขอความ หรอรปภาพใหตรงตามต าแหนงทตองการ การวางต าแหนงของตาราง การเพมตาราง การลบตาราง

ทกวชา

๒. แนะน าและอธบายความส าคญการออกแบบเวบเพจดวยตาราง (Table)

ตารางเปนเครองมอทเราใชในการแสดงผลขอมล ชวยในการจดวางเลยเอาทของเวบเพจ ไดอยางสวยงาม และยงชวยในการจดการวางต าแหนงการแดสงผลของขอความ หรอรปภาพไดตรงตามต าแหนงทตองการ

ตารางประกอบไปดวย คอลมน (Column) ในแนวตง และแถว (Row) ในแนวนอนมจดตดทเกดขนจากแถว และคอลมนเรยกวาเซล (Cell)

ขนตอนการสรางตาราง

1. คลกทปม ในแทบ Common บน Insert Bar

2. ในไดอะลอกบอกซของ Insert Table ใหก าหนดคณสมบตของตาราง

> Row จ านวนแถว > Column จ านวนคอลมน > Width ความกวางตารางทงหมดก าหนดเปน หรอ > Border ความหนาของเสนขอบตาราง > Cell spacing ก าหนดระยะหางระหวางขอความกบเสนขอบเซล > Cell spacing ก าหนดระยะหางระหวางเซลแตละเซล

3. คลก OK จะไดตารางตามทก าหนดจากนนไปใชค าสงท Properties Inspector เพอก าหนดคณสมบตดานอนๆ เชน ส , ต าแหนง , เปนตน

๓. ใหนกเรยนสรางเวบเพจใหมโดยใชตารางนกเรยนปฏบตตามอาจารยผสอน

๔. ใหนกเรยนฝกปฏบตซ า โดยนกเรยนสามารถออกแบบตามความคดสรางสรรคของนกเรยน

เลอกใชเครองมอตางๆ ของโปรแกรม Macromedia Dreamweaver MX ทนกเรยนไดเรยนร เพอน ามาใชในการออกแบบชนงานทมอบหมาย

๑) นกเรยนสามารถวางแผน และออกแบบเวบไซทไดเหมาะสมตามหวขอทก าหนดใหได

๒) นกเรยนเลอกใชเครองมอใหเหมาะสมกบชนงาน

๓) นกเรยนสรรคสรางชนงานไดอยางเหมาะสม

ออกแบบเวบไซตทม เนอหา “เกาะรตนโกสนทร” โดยใชเครองมอตางๆ ออกแบบ

ทกวชา

ชนน า

- อาจารยน าตวอยางรปแบบการสรางเวบไซตเพอใหนกเรยนดเปนแนวทาง

- ทบทวนเครองมอทใชในการสรางชนงานโดยจารย สมถามนกเรยน

- อาจารยมอบหมาย โครงงานใหนกเรยนออกแบบเวบไซตทมเนอหาเกยวกบ “เกาะรตนโกสนทร” โดยใหนกเรยนดรปแบบตางๆ ตามอาจารยเตรยมเปนแนวทางแสดงผานโปรเจคเตอร

- มอบหมายใหนกเรยนสรางหนาหลกของเวบไซทตามความคดสรางสรรคของนกเรยน

- อาจารยคอยใหค าแนะน า และชวยเหลอนกเรยนตลอดเวลา

เครองฉายโปรเจคเตอร

หนวยการเรยนร รอบรงรมวง เวลา ๑ คาบเรยน อาจารยผสอน อาจารยศรลกษณ เลศหรญทรพย

๑) นกเรยนสรางชนงานตามมอบหมายตอเนอง

๒) นกเรยนปฏบตโครงการตามมอบหมายได

ออกแบบเวบไซตทมเนอหา “เกาะรตนโกสนทร” โดยใชเครองมอตางๆ ออกแบบ (ตอเนองสปดาหท 2)

ทกวชา

- ใหนกเรยนออกแบบเวบเพจทมเนอหา เกยวกบประวตของตนเอง 1 เวบเพจ

โดยอาจารยผสอนคอยใหค าแนะน า และชวยเหลอนกเรยนตลอดเวลา

- ทายชวโมง อาจารยตรวจความกาวหนาของโครงการเพอวดและประเมนผล

ใบความร

๑) ความตงใจ

หนวยการเรยนร รอบรวรมวง เวลา ๑ คาบเรยน อาจารยผสอน อาจารยศรลกษณ เลศหรญทรพย

๑) นกเรยนเลอกใชเครองมอใหเหมาะสมกบชนงาน

๒) นกเรยนสรางสรรคชนงานไดอยางเหมาะสม

นกเรยนเหนคณคาของสถานททส าคญของไทยทมมาตงสมยรตนโกสนทร และน าเครองมอตางๆ ทนกเรยนไดเรยนรจากโปรแกรม Macromedia Dreamweaver MX มาออกแบบประชาสมพนธตามความสามารถนกเรยนได

ทกวชา

ชนน า

อาจารยเตรยมขอมลเกยวกบสถานทส าคญของเกาะรตนโกสนทรเพอใหนกเรยนเลอกน าขอมลไปใชในการออกแบบเวบเพจ ดงน

- โดยอาจารยผสอนรวบรวมขอมลเกบขอมลไวในเครองของนกเรยนทกคน โดยใหนกเรยนเลอกน าขอมลมาใชออกแบบหนาเวบเพจของตนตามความคดสรางสรรคของตน

- สรางเวบเพจตามโครงการทไดรบมอบหมาย

- อาจารยผสอนคอยใหค าแนะน า และชวยเหลอนกเรยน

นกเรยนเหนคณคาของสถานททส าคญของไทยทมมาตงสมยรตนโกสนทร และน าเครองมอตางๆ ทนกเรยนไดเรยนรจากโปรแกรม Macromedia Dreamweaver MX มาออกแบบประชาสมพนธตามความสามารถนกเรยนได

ทกวชา

ใบกจกรรม เครองฉายโปรเจคเตอร

นกเรยนเหนคณคาของสถานททส าคญของไทยทมมาตงสมยรตนโกสนทร และน าเครองมอตางๆ ทนกเรยนไดเรยนรจากโปรแกรม Macromedia Dreamweaver MX มาออกแบบเพอน าเสนอในรปแบบของเวบไซทตามความสามารถนกเรยนได (ตอเนอง)

ทกวชา

๑) นกเรยนใชเครองมอในโปรแกรม Macromedia Dreamweaver MX เพอใชในการ Upload ผลงานของตนได

๒) นกเรยนสามารถปฏบตตามขนตอนไดอยางถกตองสมบรณ

กระบวนการ Upload คอ การน าเวบไซททไดออกแบบไวเครองขน ไปเผยเพรบนอนเตอรเนต การ Upload ท าใหทโปรแกรม Dreamweaver โดยตรง

ทกวชา

ขนน า

- อธบายความหมายของค าวา “Upload” และค าวา “Download”

- อธบายกระบวนการกอนทจะมการอพโหลดขอมลขนไป ตองมการเชอมตอกบเซรฟเวอร โดย FTP

- อาจารยสอนและใหนกเรยนปฏบตตาม ขนตอนการเชอมตอกบเซรฟเวอร FTP ดงน

1. เลอกค าสง Site > Edit Site

2. เลอกชอ Site ทตองการ และคลกปม Edit ดงรป

3. ในหนาตาง Site Definition คลกแทบ Advanced

4. คลกหวขอ Remote Info และก าหนดรายละเอยดของ FTP ลงไป ดงน

- Access เลอกการเชอมตอเปน FTP

- Host Directory พมพชอโฟลเดอรทตองการอพโหลดไฟลไปเกบ

- Login พมพชอลอกอนของคณตามทผใหบรการโฮสตงแจงมา

- Password พมพรหสผาน

5. คลกทปม Test เพอทดสอบการเชอมตอ ถาเชอมตอส าเรจจะมไดอะลอกบอกซแจงวา successfully จากนนตอบ OK

6. คลกทปม Done ในหนาตาง Edit Site

- เมอนกเรยนท าเสรจแลวใหนกเรยนตรวจสอบไฟลทนกเรยนจะอพโหลด

- อาจารยสอนและใหนกเรยนปฏบตตาม ขนตอนการ Upload ใน Dreamweaver ดงน

1. เลอกทพาเนล Site ใหคลกทปม Connect to remote host

2. คลกเปลยนมมมองเปน Local View เพอแสดงไฟลของเวบไซทในเครองของนกเรยน

3. เลอกไฟลทตองการอพโหลด

4. คลกทปม Put File

5. จะปรากฎหนาตางการอพโหลดไฟลแสดงขนมาจากนนกรอการอพโหลดจนกวาจะเสรจสมบรณครบทกไฟลทเลอก

6. คลกเปลยนมมมอง Remote View จะเหนรายชอไฟลทอพโหลดขนไป ดงรป

หองเรยน

โรงเรียนสาธิตมหาวิทยาลัย...

Documents

แผนการจัดการเรียนรู้elsd.ssru.ac.th/sawitree_ph/pluginfile.php/57... ·...

ความหมายโครงงานคอมพิวเตอร์elsd.ssru.ac.th/sudarat_sr/pluginfile.php/144/course...•โครงงานประเภทน...

โครงการสารพันป้องกันการท้องก่อนวัยอันควรelsd.ssru.ac.th/ketum_sa/pluginfile.php/168/block... ·...

1...

elsd.ssru.ac.thelsd.ssru.ac.th/siriluck_le/pluginfile.php/50/block... ·...

บทที่...

เทคโนโลยีการสื่อสารelsd.ssru.ac.th/sawitree_ph/pluginfile.php/62... ·...

โรงเรียนสาธิตมหาวิทยาลัย...

elsd.ssru.ac.thelsd.ssru.ac.th › siriluck_le ›...

elsd.ssru.ac.thelsd.ssru.ac.th/siriluck_le/pluginfile.php/50/block_html... ·...

ข้อมูลและสารสนเทศelsd.ssru.ac.th/siriluck_le/pluginfile.php/146/block_html/content/เอกสาร... ·...

แผนการจัดการเรียนรูที่...

รายงานการวิจัยelsd.ssru.ac.th/tharapong_th/pluginfile.php/102... ·...

สารชีวโมเลกุลelsd.ssru.ac.th/yuttana_ru/pluginfile.php/30/course... ·...

1....

องค์ประกอบและประเภทของเกมelsd.ssru.ac.th/siriluck_le/pluginfile.php/146/block_html... ·...

โรงเรียนสาธิตมหาวิทยาลัย...

ปรากฏการณ์ทางธรรมชาติelsd.ssru.ac.th/jutharat_si/pluginfile.php/43/block... ·...

2....

รายงานการพัฒนาตนเองelsd.ssru.ac.th/jintana_ph/pluginfile.php/144/block_html/content/รายงาน... ·...