การงานอาชีพและเทคโนโลยี - suksanari...

1

การออกแบบเวบเพจเบองตน

การจดกจกรรมการเรยนรโดยใชชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนร การงานอาชพและเทคโนโลย ชดท 2 เรอง การออกแบบเวบเพจเบองตน ครควรเตรยม ความพรอมและปฏบตตามค าแนะน า ดงตอไปน 1. ศกษารายละเอยดเกยวกบการใชชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนร การงานอาชพและเทคโนโลย ชดท 2 เรอง การออกแบบเวบเพจเบองตน และเตรยมสอ การเรยนรทใช 2. การจดกจกรรมการเรยนร ครจะตองจดกจกรรมใหครบตามทระบไวใน แผนการจดการเรยนร เพอใหกจกรรมเปนไปอยางตอเนองและบรรลตามวตถประสงค 3. กอนท ากจกรรมทกครง ครตองอธบาย ชแจง วธการปฏบตใหชดเจน ใหนกเรยนเขาใจตรงกน จงจะท าใหการจดการเรยนรบรรลเปาาหมายและมประสทธภาพ 4. ครควรกระตนใหนกเรยนทกคนมสวนรวมในการท ากจกรรม เพอเปนการฝกใหนกเรยนรจกการท างานรวมกน ชวยเหลอซงกนและกน รบผดชอบตอหนาทและกลาแสดงออกสงเกตพฤตกรรมขณะทท ากจกรรมและใหความชวยเหลอนกเรยนดแลอยางใกลชด

ค าชแจงส าหรบคร

2


ชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชดท 2 เรอง การออกแบบเวบเพจเบองตน ใชเวลาจ านวน 2 ชวโมง ใหนกเรยนปฏบตดงน 1. นกเรยนแบงกลม กลมละ 4 – 5 คน โดยคละกนระหวางเกง ปานกลางและออน แลวเลอกประธานกลม และเลขานการกลม พรอมตงชอกลม 2. นกเรยนรบชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชดท 2 เรอง การออกแบบเวบเพจเบองตน กลมละ 1 ชด 3. นกเรยนศกษาบตรค าสงใหเขาใจอยางละเอยด และปฏบตตามขนตอนทก าหนดให 4. นกเรยนอานมาตรฐานการเรยนร ตวชวด สาระส าคญและ จดประสงคการเรยนร

5. นกเรยนท าแบบทดสอบกอนเรยนดวยความซอสตยไมเปดดเฉลยกอน จ านวน 10 ขอ เวลา 15 นาท ลงในกระดาษค าตอบกอนเรยน 6. ตรวจแบบทดสอบกอนเรยนดวยตนเอง และเขยนคะแนนทไดในชองคะแนนทไดในกระดาษค าตอบกอนเรยน 7. นกเรยนศกษาบตรเนอหา ท าบตรกจกรรม แลวท าตามค าชแจงตามล าดบดวยความตงใจ และความซอสตยไมเปดดเฉลยกอน 8. เมอเสรจทกขนตอน ใหเปดดบตรเฉลยกจกรรม และตรวจค าตอบ หากตอบผด หรอไมแนใจใหกลบไปศกษาใหมอกครง 9. นกเรยนท าแบบทดสอบหลงเรยนดวยความซอสตยไมเปดดเฉลย จ านวน 10 ขอ เวลา 15 นาท ลงในกระดาษค าตอบหลงเรยน 10. ตรวจแบบทดสอบหลงเรยนดวยตนเอง และเขยนคะแนนทไดในชองคะแนนทไดในกระดาษค าตอบหลงเรยน 11. สงชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ใหครผสอน เพอตรวจค าตอบอกครง และตรวจสอบคะแนนกอนเรยน ระหวางเรยน และหลงเรยน

บตรค าสง ส าหรบนกเรยน

3


แผนผงแสดงขนตอนการใช ชดการเรยนรการสรางเวบเพจดวยภาษา HTML มดงน

อานค าชแจง / บตรค าสง

ศกษาตวชวด และจดประสงคการเรยนร

ท าแบบทดสอบกอนเรยน

ศกษาบตรเนอหา และท ากจกรรมตามบตรกจกรรม

ท าแบบทดสอบหลงเรยน

ศกษาชดการเรยนรการสรางเวบเพจดวยภาษา HTML ชดตอไป

ไมผานเกณฑ

ผานเกณฑ 80%

http://www.fotosearch.com/UNC265/u12781948/


























4


มาตรฐานการเรยนร / ตวชวด

มาตรฐาน ง 3.1 เขาใจ เหนคณคา และใชกระบวนการเทคโนโลยสารสนเทศในการสบคนขอมล การเรยนร การสอสาร การแกปญหา การท างาน และอาชพอยางมประสทธภาพ ประสทธผล มคณธรรม ตวชวด ง 3.1 ม.3/1 อธบายหลกการท าโครงงานทมการใชเทคโนโลยสารสนเทศ ง 3.1 ม.3/2 เขยนโปรแกรมภาษาขนพนฐาน

สาระส าคญ

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

จดประสงคการเรยนร

1. บอกหลกการออกแบบเวบเพจ ขนตอนการพฒนาเวบเพจ และลกษณะโครงสรางของเวบเพจไดถกตอง 2. อธบายวธการก าหนดโฟลเดอรส าหรบจดเกบขอมล และวธการจดเตรยมภาพ ทเกยวของกบเนอหาเวบได 3. บอกวธการสรางเอกสารเวบได 4. มความซอสตย ความใฝรใฝเรยน มความรบผดชอบ ความมระเบยบวนย

5


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

2. ขอใดคอความหมายของเวบไซต ก. ชดเอกสารทเผยแพรในอนเทอรเนต ข. ชอทถกตองขนเพอใชเรยกแทนองคกร ค. เวบเพจแรกสดทเขาถงกอนของเวบไซต

ง. แหลงทเกบขอมลเวบเพจหลาย ๆ เวบเพจ

3. ค าวา Web Page มความหมายตรงกบขอใด ก. ฐตมา พมพรายงานในคอมพวเตอร ข. พรหมพลาส เปดเอกสารเวรด หรอ PDF ไฟล ค. ณฐรกา ตกแตงงานกราฟกตางๆ ในคอมพวเตอร ง. เอร เขยนเอกสารทเผยแพรในระบบเครอขายคอมพวเตอร

แบบทดสอบกอนเรยน เรอง การสรางเวบเพจดวยภาษา HTML

รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย

ชดท 2 เรอง การออกแบบเวบเพจเบองตน

ค าชแจง นกเรยนเลอกค าตอบทถกตองทสดเพยงค าตอบเดยว แลวท าเครองหมาย ลงในกระดาษค าตอบ (10 คะแนน)

6


4. Notepad จดเปนเครองมอพฒนาเวบในกลมใด

ก. Text Editor ข. Text Word ค. HTML Word

ง. HTML Editor

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

6. อกขระพเศษในขอใดสามารถน ามาท าการตงชอของแฟามขอมล ในระบบเวบเพจได ก. ค าถาม (?) ข. ขดลาง (_) ค. เทากบ (=)

ง. มากกวา ()

7. โครงสรางของเอกสาร HTML นนประกอบไปดวย 2 สวน คอขอใด ก. สวนหว และสวนเนอหา ข. สวนหวเอกสาร และสวนค าสง ค. สวนค าสง และสวนประมวลผล ง. สวนเนอหา และสวนค าสงของเอกสาร

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

7


9. ลกษณะโครงสรางเวบเพจในปจจบนโดยทวไปเปนลกษณะใด ก. แบบผสม ข. แบบเชงเสน ค. แบบล าดบชน ง. แบบลางขนบน

10. ขอใดกลาวถกตองเกยวกบประเภทขององคกร (.gov) ก. องคกรรฐบาล

ข. องคกรทางทหาร ค. สถาบนการศกษา

ง. บรษท/องคกรพานชย

8


กระดาษค าตอบแบบทดสอบกอนเรยน

เรอง การสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3

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

ชอ – นามสกล ........................................................................ชนมธยมศกษาปท 3 เลขท ........ เกณฑการประเมน คะแนนระหวาง 9 - 10 อยในเกณฑ ดมาก

คะแนนระหวาง 7 - 8 อยในเกณฑ ด คะแนนระหวาง 5 - 6 อยในเกณฑ ปานกลาง คะแนนระหวาง 0 - 4 อยในเกณฑ ปรบปรง

ขอ ก ข ค ง 1

2 3

4

5 6

7

8 9

10

คะแนนเตม 10 คะแนนได

ผลการประเมน ดมาก ด ปานกลาง ปรบปรง

(ลงชอ).....................................ผประเมน (นายณฐวฒ ณรงคเดชา) วนท ........เดอน.....................พ.ศ..........

9


บตรเนอหา

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


การพฒนาเวบเพจ

ใชภาษา HTML ปาอนค าสงภาษา HTML ดวย โปรแกรม Text Editor เชน NotePad ใสค าสงไดตามตองการ ไมเหมาะส าหรบผพฒนาในระดบตน














10


1. ก าหนดหวขอทตองการจะท าเวบ 2. สรางผงความสมพนธของขอมลแบบรากตนไม

ขนตอนการพฒนาเวบเพจ

11


เปนการจดแสดงหนาเวบ เรยงตามล าดบกงกาน แตกแขนงตอเนองไปเหมอนตนไมกลบหว

การวางแผนพฒนาเวบเพจ

แบบล าดบขน (Hierarchy)

12


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

เปนการจดหนาเวบชนดผสมระหวางแบบล าดบขน และแบบเชงเสน

แบบเชงเสน (Linear)

แบบผสม (Combination)

13


3. ก าหนดชอไฟลของเอกสารเวบ ชอไฟลและนามสกลของไฟลเอกสารเวบจะถกควบคมจาก Web Administor นามสกลของไฟลเอกสาร HTML ม 2 แบบคอ .htm, .html ชอและนามสกลทใช เปนภาษาองกฤษตวพมพเลก ไมมชองวาง ไมควรใชสญลกษณพเศษใดๆ ยกเวนเครองหมาย ขด “ -” ไฟลแรกมกจะใชชอ index

4. ก าหนดชอไฟลของเอกสารเวบ

14


5. สรางโฟลเดอรเฉพาะส าหรบเอกสารเวบแตละชด/เรอง

ตวอยาง สรางโฟลเดอรชอ MyHomePage บนเดสทอปของ Window Explorer

6. จดหาภาพ หรอสรางภาพทเกยวของกบเนอหา สรางดวยโปรแกรมกราฟก เชน Adobe Photoshop 7 หรอ PhotoScape เปนตน คดเลอกจาก ClipArt for Web เชน CD-ROM รวมภาพส าหรบเวบ

• คลกปมขวาของเมาสบน ทวางของเดสทอป

• เลอกรายการค าสง New > Folder

• พมพชอโฟลเดอร MyHomePage แลวกดปม <Enter> 1 ครง

15


7. ภาพทเลอกใชทงหมด ตองเกบไวในโฟลเดอรทสรางไวกอนแลว

8. สรางเอกสารเวบ โดยการเขยนภาษา HTML หรอใชโปรแกรมชวยสรางเวบเพจ 9. ไฟลเอกสาร HTML ทกไฟลจะตองบนทกไวในโฟลเดอรทสรางไวกอนรวมกบรปภาพทจดเตรยมไวแลว

10. ตรวจสอบผลเอกสาร HTML ดวยเวบเบราวเซอร

11. สงขอมลขนเครองแมขาย (Server)

12. ตรวจสอบผลการเรยกดจากเครองแมขาย

Copy To

Index.html บนทกไวท

16


1. ผใช / เครองลกขาย (User / Client)

http://www.snr.ac.th/index.html

2. เครองใหบรการ (Server)

3. แปลงโคด html ใหเปนรปภาพ และขอความ

index.html

17


1. ขอมลตาง ๆ เชน Name, message, time

http://www.faq108.co.th/board/index.php

2. ประมวลผล index.php โคดภาษา html, php

3. โคดภาษา html , php

4. แปลงโคด html, php ใหเปนรปภาพและขอความ

Server-Side Script

Index.php

Page.html contact.html board.php

เครองใหบรการ (Server)

18


รปแบบของชอโดเมน

สวนขยายบอกประเภทขององคกร .ac หรอ .edu คอ สถาบนการศกษา (Academic) .co หรอ .com คอ องคกรธรกจ (Commercial) .or หรอ .org คอ องคกรอน ๆ (Organization) .go หรอ gov คอ หนวยงานของรฐบาล (Government) .net คอ ผวางระบบเนตเวรก (Networking) .mi หรอ mil คอ องคกรทางทหาร (Military organization) สวนขยายบอกประเทศ .au ออสเตรเลย .ca แคนาดา .fr ฝรงเศส .it อตาล .jp ญปน .ru รสเซย .uk องกฤษ .us สหรฐอเมรกา .th ไทย

เชน www.snr..ac.th คอ เวบโรงเรยนศกษานาร www.obec.go.th คอ ส านกงานคณะกรรมการการศกษาขนพนฐาน

Domain Name (โดเมนเนม) การตงชอแทนหมายเลข

ชอ สวนขยายบอก สวนขยายบอก

องคกร ประเภทขององคกร ประเทศ

19


แบงเปน 3 สวน สวนหวของหนา (Page Header) สวนของเนอหา (Page Body) สวนทายกระดาษ (Page Footer)

1. สวนหว (Page Header) จะอยบรเวณบนสดของหนาเวบเพจ เปนสวนทแสดงชอ เวบไซต โลโก แบนเนอรโฆษณาลงค ส าหรบไปยงหนาเวบอน

สวนประกอบของหนาเวบเพจ

20


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

3. สวนทาย (Page Footer) จะอยบรเวณดานลางสดของหนาเวบเพจ สวนมากใชส าหรบลงคขอความสน ๆ เขาใจงาย หรอจะมชอเจาของเวบไซต อเมลแอดเดรสของผดแลเวบไซตส าหรบตดตอกบทางเวบไซต

21


http://www.satriwit.ac.th/home/

Example Web

http://www.prapayneethai.com/th/culture/

22


http://women.sanook.com/health/

http://thai.tourismthailand.org/

23


ค าชแจง ใหตอบค าถามตอไปนใหถกตอง (10 คะแนน) 1. ใหบอกขนตอนการพฒนาเวบ (5 คะแนน) 1) ........................................................................................................................ 2) ........................................................................................................................ 3) ..................................................................................................... ................... 4) ........................................................................................................................ 5) ................................................................................. ....................................... 6) ........................................................................................................................ 7) ........................................................................................................................ 8) ........................................................................................................................ 9) ........................................................................................................................ 10) ....................................................................................................................... 11) ....................................................................................................................... 12) ....................................................................................................................... 2. สวนประกอบของหนาเวบเพจ แบงไดเปนกสวนอะไรบาง (5 คะแนน) ............................................................................................................................. .... ............................................................................................................................. .... .................................................................................................... ............................. ............................................................................................................................. .... ...................................................................... ........................................................... ............................................................................................................................. .... ................................................................................................................................. ............................................................................................................................. ....

บตรกจกรรมท 1

24


ค าสง ใหนกเรยนออกแบบเวบเพจเรองทสนใจคนละ 1 เรอง ตามความคดของนกเรยน ลงในสมด (10 คะแนน) เชน

http://www.snr.ac.th/index.php http://www.freewebsitetemplates.com https://www.free-css.com/free-css-templates?start=12 http://www.templatefree.org/download.template1-0.template https://free-template.co/

บตรกจกรรมท 2

http://www.freewebsitetemplates.com/

http://www.templatefree.org/download.template1-0.template

25


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

2. ค าวา Web Page มความหมายตรงกบขอใด ก. ฐตมา พมพรายงานในคอมพวเตอร ข. พรหมพลาส เปดเอกสารเวรด หรอ PDF ไฟล ค. ณฐรกา ตกแตงงานกราฟกตางๆ ในคอมพวเตอร ง. เอร เขยนเอกสารทเผยแพรในระบบเครอขายคอมพวเตอร

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

แบบทดสอบหลงเรยน เรอง การสรางเวบเพจดวยภาษา HTML



ค าชแจง นกเรยนเลอกค าตอบทถกตองทสดเพยงค าตอบเดยว แลวท าเครองหมาย ลงในกระดาษค าตอบ (10 คะแนน)

26


4. Notepad จดเปนเครองมอพฒนาเวบในกลมใด ก. Text Editor

ข. Text Word ค. HTML Word

ง. HTML Editor

5. อกขระพเศษในขอใดสามารถน ามาท าการตงชอของแฟามขอมล ในระบบเวบเพจได ก. ค าถาม (?) ข. ขดลาง (_) ค. เทากบ (=)

ง. มากกวา ()

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

7. โครงสรางของเอกสาร HTML นนประกอบไปดวย 2 สวน คอขอใด ก. สวนหว และสวนเนอหา ข. สวนหวเอกสาร และสวนค าสง ค. สวนค าสง และสวนประมวลผล ง. สวนเนอหา และสวนค าสงของเอกสาร

8. ลกษณะโครงสรางเวบเพจในปจจบนโดยทวไปเปนลกษณะใด ก. แบบผสม ข. แบบเชงเสน ค. แบบล าดบชน ง. แบบลางขนบน

27


9. ขอใดคอความหมายของเวบไซต ก. ชดเอกสารทเผยแพรในอนเทอรเนต ข. ชอทถกตองขนเพอใชเรยกแทนองคกร ค. เวบเพจแรกสดทเขาถงกอนของเวบไซต

ง. แหลงทเกบขอมลเวบเพจหลาย ๆ เวบเพจ

10. ขอใดกลาวถกตองเกยวกบประเภทขององคกร (.gov) ก. องคกรรฐบาล

ข. องคกรทางทหาร ค. สถาบนการศกษา

ง. บรษท/องคกรพานชย

28


กระดาษค าตอบแบบทดสอบหลงเรยน เรอง การสรางเวบเพจดวยภาษา HTML



ชอ – นามสกล ........................................................................ชนมธยมศกษาปท 3 เลขท ........ เกณฑการประเมน คะแนนระหวาง 9 - 10 อยในเกณฑ ดมาก

คะแนนระหวาง 7 - 8 อยในเกณฑ ด คะแนนระหวาง 5 - 6 อยในเกณฑ ปานกลาง คะแนนระหวาง 0 - 4 อยในเกณฑ ปรบปรง

ขอ ก ข ค ง

1

2 3

4

5 6

7

8 9

10

คะแนนเตม 10

คะแนนได

ผลการประเมน ดมาก ด ปานกลาง ปรบปรง

(ลงชอ).....................................ผประเมน (นายณฐวฒ ณรงคเดชา) วนท ........เดอน.....................พ.ศ..........

29


เฉลยแบบทดสอบกอนเรยน เรอง การสรางเวบเพจดวยภาษา HTML



1. ก 2. ค 3. ง 4. ก 5. ก 6. ข 7. ง 8. ข 9. ก 10. ก

30


เฉลยแบบทดสอบหลงเรยน เรอง การสรางเวบเพจดวยภาษา HTML



1. ข 2. ง 3. ก 4. ก 5. ข 6. ก 7. ง 8. ก 9. ค 10. ก

31


32


ค าชแจง ใหตอบค าถามตอไปนใหถกตอง (10 คะแนน) 1. ใหบอกขนตอนการพฒนาเวบ (5 คะแนน) 1) ก าหนดหวขอทตองการจะท าเวบ 2) สรางฝงความสมพนธของขอมลแบบรากตนไม 3) ก าหนดชอไฟลของเอกสารเวบ 4) ก าหนดชอไฟลของเอกสารเวบ 5) สรางโฟลเดอรเฉพาะส าหรบเอกสารเวบแตละชด/เรอง 6) จดหาภาพหรอสรางภาพทเกยวของกบเนอหา 7) ภาพทเลอกใชทงหมด ตองเกบไวในโฟลเดอรทสรางไวกอน 8) สรางเอกสารเกบโดยการเขยนภาษา HTML 9) ไฟลเอกสาร HTML ทกไฟลจะตองบนทกไวในโฟลเดอรทสรางไวกอนรวมกบรปภาพ ทจดเตรยมไวแลว 10) ตรวจสอบผลเอกสาร HTML ดวยเวบเบราวเซอร 11) สงขอมลขนเครองแมขาย (Server) 12) ตรวจสอบผลการเรยกดจากเครองแมขาย 2. สวนประกอบของหนาเวบเพจ แบงไดเปนกสวนอะไรบาง (5 คะแนน) 3 สวน ไดแก 1. สวนหว (Page Header) จะอยบรเวณบนสดของหนาเวบเพจ เปนสวนทแสดงชอ เวบไซต โลโก แบนเนอรโฆษณาลงคส าหรบขามไปยงหนาเวบอน 2. สวนเนอหา (Page Body) จะอยบรเวณตอนกลางของหนาเวบเพจ ซงเปนสวนท แสดงเนอหาภายในหนาเวบเพจนน โดยประกอบดวยขอความ ขอมล ภาพเคลอนไหว เปนตน 3. สวนทาย (Page Footer) จะอยบรเวณดานลางสดของหนาเวบเพจ สวนมากใช ส าหรบลงคขอความสน ๆ เขาใจงาย หรอจะมชอเจาของเวบไซต อเมลแอดเดรส ของผดแลเวบไซตส าหรบตดตอกบทางเวบไซต

บตรเฉลยกจกรรมท 1

33


บตรเฉลยกจกรรมท 2

ค าสง ใหนกเรยนออกแบบเวบเพจเรองทสนใจคนละ 1 เรอง ตามความคดของนกเรยน ลงในกระดาษวาดรป A4 (10 คะแนน)

แนวค าตอบ บตรเฉลยกจกรรมท 2 (ตวอยางผลงานนกเรยน)

บนทกชอไฟล : Ex2-เลขทชอ.html (Ex2-01nattawut.html) สงงานมาท https://classroom.google.com หองเรยนของตนเอง

สงพมพหวขอ สงงาน Ex2 ชอนกเรยน ชน.. เลขท.. หรอสง ทาง Googel Drive

34


35


บรรณานกรม

กระทรวงศกษาธการ,ส านกงานคณะกรรมการการศกษาขนพนฐาน. (2551). ตวชวดและ สาระการเรยนรแกนกลาง กลมสาระการเรยนรการงานอาชพและเทคโนโลย ตามหลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551. ส านกวชาการ และมาตรฐานการศกษา กรงเทพฯ จนทรเพญ เชอพานช. (2549). “นวตกรรมการศกษาไทย :รปแบบการเรยนการสอน” นวตกรรม การจดการเรยนรตามแนวปฏรปการศกษา. ศนยต าราและเอกสารทาง วชาการ คณะศกษาศาสตร จฬาลงกรณมหาวทยาลย. ชยวฒน สทธรตน . (2552). 80 นวตกรรมการจดการเรยนรทเนนผเรยนเปนส าคญ. กรงเทพฯ: บรษท แดเนกซ อนเตอรคอรปปอเรชน. สวทย มลค า และ อรทย มลค า (2545). 19 วธจดการเรยนร : เพอพฒนาความรทกษะ. พมพครงท 3. กรงเทพฯ : โรงพมพภาพพมพ ศนยสงเสรมวชาการ. 231/4 ซอยวดกระสงขกระจาย เขตบางกอกใหญ กรงเทพ. เวบครณฐวฒออนไลน web : https://sites.google.com/a/snr.ac.th/nattawut/home

36


ชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชดท 2 เรอง การออกแบบเวบเพจเบองตน เปนเครองมอส าคญในกระบวนการจดการเรยนการสอน ซงจะชวยกระตนกระบวน การเรยนรและตรวจสอบคณภาพการเรยนรของนกเรยน ผจดท าไดศกษาวเคราะห หลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551 อกทงไดศกษาคนควาหาความร ทกษะการปฏบต ทกษะดานการคด เพอน าขอมลมาประกอบการจดท าชดการเรยนรการสรางเวบเพจดวยภาษา HTML ใหสอดคลองกบมาตรฐานการเรยนร ทมงใหนกเรยนไดรบการพฒนาทงดานความร คณธรรม คานยมทถกตองเหมาะสม ชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชดท 2 เรอง การออกแบบเวบเพจเบองตน มจดประสงคการเรยนร คอ สามารถบอกหลกการออกแบบเวบเพจ บอกขนตอน การพฒนาเวบเพจ บอกลกษณะโครงสรางของเวบเพจ อธบายวธการก าหนดโฟลเดอรส าหรบจดเกบขอมลได อธบายวธการจดเตรยมภาพทเกยวของกบเนอหาเวบได สามารถบอกวธการสรางเอกสารเวบได มความซอสตย ความใฝรใฝเรยน มความรบผดชอบ ความมระเบยบวนย ผจดท าหวงเปนอยางยงวาชดการเรยนรการสรางเวบเพจดวยภาษา HTML รายวชาเทคโนโลย 3 รหสวชา ง23102 ชนมธยมศกษาปท 3 กลมสาระการเรยนรการงานอาชพและเทคโนโลย ชดท 2 เรอง การออกแบบเวบเพจเบองตน เลมนจะเปนประโยชนตอผเรยนในการเรยนรอยาง มประสทธภาพ มความเขาใจ ผลสมฤทธทางการเรยนสงขน ขอบคณผใหขอเสนอแนะตลอดจน ใหการสนบสนน ทกทานไว ณ โอกาสน ณฐวฒ ณรงคเดชา

ค าน า

37


เรอง หนา

ค าชแจงส าหรบคร................................................................... ................................................ 1 บตรค าสง ส าหรบนกเรยน..................................................................... ................................ 2 แผนผงแสดงขนตอนการใชชดการเรยนรการสรางเวบเพจดวยภาษา HTML........................ 3 มาตรฐานการเรยนร / ตวชวด. ............................................................................................. 4 สาระส าคญ / จดประสงคการเรยนร......................................................... ............................. 4 แบบทดสอบกอนเรยน............................................................................. ............................... 5 กระดาษค าตอบแบบทดสอบกอนเรยน................................................ .................................. 8 บตรเนอหา .................................................................................. ......................................... 9 บตรกจกรรมท 1 .................................................................................................................. 23 บตรกจกรรมท 2 .................................................................................................................. 24 แบบทดสอบหลงเรยน............................................................................................................. 25 กระดาษค าตอบแบบทดสอบหลงเรยน................................................................................... 28 เฉลยแบบทดสอบกอนเรยน.................................................... ................................................ 29 เฉลยแบบทดสอบหลงเรยน.................................................................................................... 30 ภาคผนวก................................................................................ ............................................... 31 บรรณานกรม........................................................................... ............................................... 35

สารบญ

การงานอาชีพและเทคโนโลยี - suksanari...

Documents