เริ่มต้นสร้างเว็บเพจ

ขั้นตอนการสร้างเว็บไซต์         การสร้างเว็บไซต์ อาจเริ่มตั้งแต่การกำหนดเนื้อหารายละเอียดต่างๆในหน้าเว็บเพจ จนถึงการอัพโหลดเว็บไซต์ขึ้นบนอินเทอร์เน็ต   จะมีขั้นตอนดังนี้     ขั้นตอนที่ 1 วางแผนจัดทำเว็บไซต์             กำหนด เนื้อหา แบ่งเนื้อหาเป็นหมวดหมู่ต่างๆ ตามลำดับก่อนหลัง และรายละเอียด ของเว็บที่เราจะจัดทำเพื่อให้เห็นมุมมอง คร่าวๆ ก่อนจะลงมือสร้างเว็บไซต์     ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ             คือขั้นตอนการกำหนดผังของเว็บไซต์ หรือที่เรียกว่า Site Map เพื่อให้ทราบ องค์ประกอบทั้งหมดของเว็บไซต์ ตัวอย่างเช่น    เรามีหน้าเว็บเพจทั้งหมด 6 เว็บเพจ กำหนด Site Map ได้ดังรูป     ขั้นตอนที่ 3 กำหนดการเชื่อมโยงระหว่างเว็บเพจ             เป็นการกำหนดการเชื่อมโยงในแต่ละหน้าเว็บเพจให้สามารถเชื่อมโยงกลับ ไปกลับมาระหว่างหน้าเว็บเพจต่าง ๆ        ได้ จากตัวอย่าง จะเห็นว่าหน้า index.html สามารถเชื่อมโยงไปยังหน้าต่างๆได้และแต่ละหน้าก็สามารถเชื่อมโยงกลับมา    ยังหน้า index.html ได้ตัวอย่างดังรูป     ขั้นตอนที่ 4 ออกแบบหน้าเว็บเพจแต่ละหน้า             ออกแบบโครงสร้างหน้าเว็บเพจในแต่ละหน้าเพื่อจะได้รู้ว่าในเว็บเพจแต่ละหน้า มีรายละเอียดอะไรบ้าง ไม่ว่าจะเป็น ข้อมูล รูปภาพ จากนั้นทำการออกแบบหน้าเว็บเพจ หน้าต่อไป         จากรูปด้านบนจะเห็นว่าเราได้แบ่งหน้าเว็บเพจออกเป็นส่วนๆ โดยเราสามารถแบ่ง ส่วนประกอบของหน้าเว็บ ได้ดังนี้ ส่วนประกอบของหน้าเว็บเพจ ส่วนประกอบของหน้าเว็บเพจที่ดี จะมีอยู่ด้วยกันทั้งหมด 3 ส่วนหลัก ๆ ดังนี้         1. ส่วนหัวของหน้า (Header)         เป็นส่วนที่อยู่บนสุดของหน้า มักใส่ภาพกราฟิกเพื่อสร้างความประทับใจ เช่น ภาพโลโก้ (Logo) เมนูหลักหรือลิงก์ (Navigation Bar) เพื่อเป็นจุดเชื่อมโยงไปสู่เนื้อหา ของเว็บไซต์ในหน้าต่อไป         2. ส่วนของเนื้อหา (Body)          เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ประกอบด้วย ข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะ กลุ่มวางอยู่ในส่วนนี้ด้วย         3. ส่วนท้ายของหน้า (Footer)         เป็นส่วนที่อยู่ด้านล่างสุดของหน้า มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น  โดยปกติส่วนหัวและส่วนท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ     ขั้นตอนที่ 5 สร้างเว็บเพจในแต่ละหน้า             เมื่อได้ทำการออกแบบหน้าเว็บเพจแต่ละหน้าแล้ว ต่อไปคือขั้นตอนการสร้างหน้า เว็บเพจตามที่ได้ออกแบบไว้ ด้วยโปรแกรมต่างๆไม่ว่าจะเป็นโปรแกรมประเภทText Editor  เพื่อใช้ในการเขียนชุดคำสั่ง HTML หรือโปรแกรมสำเร็จรูปเพื่อให้แต่ละหน้าเว็บเพจ นำเสนอข้อความ รูปภาพ วีดีโอ และเสียง อยู่ในรูปแบบตามที่ต้องการ ตัวอย่างการสร้างหน้าเว็บเพจด้วยโปรแกรม Notepad      ขั้นตอนที่ 6 จดโดเมนเนมและหาพื้นที่ฝากเว็บไซต์             หลังจากเราสร้างเว็บไซต์เสร็จแล้ว ขั้นตอนต่อไป คือ ทำการตั้งชื่อเว็บไซต์คือ การจดโดเมนเนม และหาที่ฝากเว็บไซต์    ที่เรียกว่า เว็บโฮสติ้ง (Web Hosting) ที่มีทั้งแบบเสียค่าใช้จ่าย และแบบให้พื้นที่ฝากเว็บไซต์ฟรี อย่างเช่นเว็บไซต์ที่ให้บริการ ฝากเว็บไซต์ฟรี คือ http://www.thcity.com วิธีการให้ทำการสมัครตามขั้นตอนต่างๆ บนหน้าเว็บเพจ เท่านี้เราก็จะมีชื่อเว็บไซต์และพื้นที่ ฝากเว็บไซต์แล้ว     ขั้นตอนที่ 7 อัพโหลด เว็บไซต์             หลังจากสมัครบริการพื้นที่ฝากเว็บไซต์แล้ว ขั้นตอนต่อไป คือการอัพโหลดไฟล์ เว็บไซต์ของเราไปยังเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บไซต์ผ่านโปรแกรม FTP เช่นโปรแกรม  Filezilla แค่นี้ทุกคนทั่วโลกก็สามารถเปิดดูเว็บไซต์ของเราผ่านระบบเครือข่ายอินเทอร์เน็ต ได้แล้ว

เริ่มต้นการพิมพ์

https://drive.google.com/file/d/1eDRPBGmTfiw2J17Eka5qp6FAt0jLxy9O/view

การสร้างเว็บไซต์ด้วย Dreamwemver Cs6

การเริ่มต้นสร้างเว็บไซต์

การเริ่มต้นสร้างเว็บไซต์เป็นการตั้งโฟล์เดอร์ที่ใช้เก็บทุกส่วนประกอบบนหน้าเว็บเอาไว้ และใช้เป็นตำแหน่งอ้างอิงเพื่อเชื่อมโยงหน้าเว็บแต่ละหน้าเข้าไว้ด้วยกัน

การกำหนดโครงร่างเว็บไซต์

การกำหนดโครงสร้างเว็บไซต์เป็นการออกแบบส่วนประกอบทั้งหมดของเว็บไซต์ที่ต้องการให้ผู้เข้ามาเยี่ยมชม ได้ทราบเช่น เว็บไซต์ทั้งหมดจะมีกี่หน้า แต่ละหน้าจะมีเนื้อหาอะไร เนื้อหาแต่ละส่วนจะเชื่อมโยงกันอย่างไร เปรียบเสมือนการเขียนหนังสือที่แบ่งเนื้อหาออกเป็นบทย่อย ๆ แต่ละบทมีหัวข้อใหญ่ เช่น โครงสร้างเว็บไซต์ จากโครงสร้างจะเห็นว่า ไฟล์ Index.html จะอยู่แยกออกมาต่างหาก ไม่รวมอยู่ในโฟล์เดอร์ใด ๆ เพราะเป็นหน้าโฮมเพจที่เมื่อมีผู้เข้ามาเยี่ยมชมเว็บไซต์จะต้องเข้ามาที่หน้านี้เป็นอันดับแรก ก่อนที่จะลิงก์ไปยังหน้าเว็บเพจอื่น ๆ

การสร้างไซต์ (Site)

การกำหนดไชต์ (Site) งานเป็นการนำโครงสร้างเว็บไซต์ที่ได้ออกแบบไว้แล้วมาสร้างจริงด้วยโปรแกรม Dreamweaver CS6 โดยโปรแกรมจะแบ่งงานของเราออกเป็น 2 ส่วน คือส่วนที่อยู่บนเครื่องจะเรียกว่า Local Folder หรือ  โลคอลไซต์ (Local Site) ต่อเมื่อได้ สร้างเว็บไซต์เสร็จแล้วจึงจะนำไซต์ทั้งหมดอัพโหลดเข้าสู่เครื่องเซิร์ฟเวอร์จริงเพื่อเผยแพร่

มีขั้นตอนการสร้างไซต์ 1. คลิกที่เมนู Site 2. คลิกเลือกคำสั่ง New Site

2. จะได้หน้าต่าง Site Setup เพื่อกำหนดชื่อไซต์ใหม่ โดยมี   7  ขั้นตอนดังนี้ 1.       Click ที่ Site เพื่อตั้งชื่อและสร้างที่เก็บ 2.       ตั้งชื่อSite (ในที่นี้ใช้ชื่อว่า SiteKruAoh) 3.       Click ที่ Folder เลือกตำแหน่งที่ต้องการจัดเก็บ ไว้สำหรับเวลา save/save as 4.       Click ที่ Advanced Setting 5.       เลือก Local Info 6.       Click ที่ Folder Dialog เพื่อเลือก Path ที่ต้องการเก็บรูปภาพ 7.        กดปุ่ม Save

การจัดการโครงสร้างเว็บไซต์

การแก้ไขไซต์ การปรับการตั้งค่าการใช้งานไซต์ ให้คลิกที่คำสั่ง Sites > Manage Sites เลือกไซต์ที่ต้องการแก้ไขหรือปรับปรุง  ดังนี้

การจัดการโฟล์เดอร์และไฟล์ภายในไซต์

การสร้างโฟล์เดอร์ย่อยและไฟล์งานบรรจุไว้ในไซต์ตามแผนงานที่ได้วางไว้มีวิธีสร้าง 4 ขั้นตอนดังนี้ ที่ Panel เลือก Files Right Click ที่ Folder หลัก ในที่นี้คือ Site – site kruaoh เลือก New Folder ทำการสร้าง Folder ใหม่ขึ้นมา พิมพ์ชื่อโฟล์เดอร์ใหม่แล้ว กด Enter

การนำเสนองาน

ใบงานที่ 4.1 เรื่อง การพัฒนาผลงานนำเสนอด้วยเทคโนโลยีสารสนเทศ

คำชี้แจง    ให้นักเรียนออกแบบการนำเสนองานและบทดำเนินเรื่องจากกรณีศึกษาที่ครูกำหนดให้

         สำหรับนักเรียนห้องม.3.4 วันนี้เป็นวันอาเซียนให้นักเรียนออกแบบงานนำเสนอ เพื่อให้ตระหนักถึงวันอาเซียน โดยครอบคลุม  ประวัติวันอาเซียน  สมาชิกประเทศอาเซียน  การแต่งกาย  ธงชาติ  อาหาร เป็นต้น

วันพฤหัสบดีที่ 9 สิงหาคม 2561 
ม.3/7 ม. 3/6 และ ม.3/5   ให้นักเรียนออกแบบสไลด์คอมพิวเตอร์  เรื่อง  วันแม่  โดยครอบคลุม 
ความสำคัญของวันแม่  แม่ที่ฉันรัก และเราจะทำอะไรเพื่อแม่ 

“กลุ่มอนุรักษ์ช้างไทย ประกอบด้วยสมาชิก ได้แก่ น้ำฝน น้ำมนต์ และน้ำใจ ได้ร่วมกันพัฒนาโครงงานโปรแกรม    ประยุกต์ประเภทเกม คือ โครงงานเกมคืนช้างสู่ป่า ซึ่งได้ผ่านเข้ารอบการประกวดซอฟต์แวร์ระดับมัธยมศึกษาตอนต้น     โดยโครงงานเกมดังกล่าวมีเนื้อหาประกอบด้วย ประวัติช้างไทย ลักษณะช้างไทย ชีวิตความเป็นอยู่ของช้างไทยใน         ปัจจุบัน  กลุ่มอนุรักษ์ช้างไทยต้องการนำเสนอผลงานดังกล่าวให้กรรมการผู้ตัดสินและผู้เข้าประกวดทุกคนเข้าใจ และ     โน้มน้าวให้เชื่อมั่นในโครงงานว่า จะก่อให้เกิดประโยชน์ต่อสังคม”

         กลุ่มอนุรักษ์ช้างไทยจึงเตรียมการนำเสนอโครงงานเกมคืนช้างสู่ป่า โดยออกแบบการนำเสนองานและออกแบบบทดำเนินเรื่องดังนี้

การออกแบบการนำเสนองาน

                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

การออกแบบบทดำเนินเรื่อง (storyboard)

สไลด์	รายละเอียดสไลด์

ศึกษาข้อมูลในหน่วยที่ 3 หรือ http://www.krulita.com/lesson3.html#bookmark1

งานบทที่ 2 โครงงานคอมพิวเตอร์

นร.ศึกษาในหน่วยที่ 2 เพิ่มเติม งานที่จะต้องทำดังนี้
1. ชิ้นงาน (POWER POINT /WEBBLOGS/GAMES)เลือกตามความถนัดและประเภทของโครงงาน
2. ให้นักเรียนนำสื่อที่สร้างขึ้นนำไปใช้กับกลุ่มตัวอย่างและส่งให้ครูดู
3. เพาเวอร์พอยต์สำหรับนำเสนอเมื่อสร้างชิ้นงานเสร็จแล้ว
4. รายงานสรุปหลังจากนำสื่อไปใช้(สร้างแบบสอบถาม 10 ข้อ) จำนวน 5 บท ตามแบบในหน้าเว็บครู
    unit2
5. จัดบอร์ดและนำเสนอ เริ่มอาทิตย์ที่ 28 สิงหาคม

งานวันอังคารที่ 26มิ.ย.และพุธที่ 27 มิ.ย.61

วันอังคารที่ 26 มิ.ย.61 ม.3/3

วันพุธที่ 27 มิ.ย.61 และ พฤ.- ศุกร์ที่ 29 มิ.ย.61

ให้นักเรียนศึกษาความรู้เรื่องโครงงานคอมพิวเตอร์ จากเว็บบล็อกครู

www.kruployja.blogspot.com, www.kruploy2.blogspot.com, www.kruploy10.blogspot.comและ www.ploy25101.blogspot.com

บันทึกความรู้ลงในสมุด ตามหัวข้อต่อไปนี้  ส่งท้ายชม.

   1.    ความหมายของโครงงานคอมพิวเตอร์

   2.    ประเภทของโครงงานคอมพิวเตอร์

   3.    ขั้นตอนการทำโครงงานคอมพิวเตอร์

  4.    คุณค่าของโครงงานคอมพิวเตอร์

  5.    ประโยชน์ของโปรแกรม PowerPoint

งานวิชา เทคโนโลยีและการสื่อสาร ม.3

สวัสดีค่ะนร. สำหรับปีการศึกษา 2561 มีงานสำหรับนักเรียนดังนี้นะคะ ห้อง หน่วย 1 หน่วย 2 หน่วย 3 3/2 My mapping,ใบงาน โครงงานคอมพิวเตอร์ การเขียนโปรแกรม 3/3 My mapping,ใบงาน โครงงานคอมพิวเตอร์ “ 3/4 My mapping,ใบงาน โครงงานคอมพิวเตอร์ “ 3/5 Powerpoint,present โครงงานคอมพิวเตอร์ “ 3/6 Powerpoint,present โครงงานคอมพิวเตอร์ “ 3/7 Powerpoint,present โครงงานคอมพิวเตอร์ “

ใบงานที่ 11

ใบงานที่ 11 เรื่อง การเชื่อมโยงภายนอกเว็บเพจ คำชี้แจง 1. ให้นักเรียนสร้างเว็บเพจ 1 หน้า รายละเอียดตามตัวอย่าง 2.ทำการเชื่อมโยง (Link) เว็บเพจ 3.บันทึกชิ้นงานชื่อ weblink.html ไว้ในโฟลเดอร์ของตัวเอง (10 คะแนน) รวมเว็บไซต์ www.google.com www.sanook.com www.kapook.com www.hotmail.com ติดต่อ E-mail : ชื่ออีเมล์ของตนเอง เช่น nauchey@hotmail.com

ใบความรู้ที่ 12 เรื่อง การสร้างแบบฟอร์มโดยใช้ Text Field และ Checkbox การสร้างแบบฟอร์ม 1. วางตัวบอกตำแหน่งการพิมพ์ลงในตำแหน่งที่ต้องการสร้างฟอร์ม 2. เลือกไปที่เมนู Insert > Form หรือในแถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม Form 3. กำหนดค่าต่างๆ ในพาเนล Properties (โปรดใช้ Mouse ชี้ไปยังส่วนต่างๆ ในภาพเพื่อทราบรายละเอียด) การใส่องค์ประกอบของฟอร์มลงในฟอร์ม องค์ประกอบต่างๆ ของฟอร์ม สามารถเลือกได้โดย เลือกไปที่เมนู Insert > Form Objects หรือเลือกจากแถบ Insert ในแท็บ Forms ซึ่งมีดังนี้ การสร้าง Text Field ลงในฟอร์ม Text Field คือ ออบเจ็คที่ทำให้ผู้เข้าเยี่ยมชมสามารถกรอกข้อความได้ ซึ่งมีอยู่ 3 แบบ ดังต่อไปนี้ Single - Line Text Fields ใช้สำหรับการกรอกข้อความที่ไม่ยาวมากนัก เช่น ชื่อ ที่อยู่ เป็นต้น Multiple - Line Text Field หรือ Textareaใช้สำหรับกรอกข้อความที่มีความยาวมากๆ เช่น คำติชม หรือ คำแนะนำต่างๆ Password Fields ใช้สำหรับการกรอกรหัสผ่านซึ่งตัวอักษรจะแสดงออกมาเป็นเครื่องหมาย ดอกจัน หรือเครื่องหมายอื่นเพื่อป้องกันไม่ให้ผู้อื่นเห็นขณะที่พิมพ์ • การสร้าง Text Field สามารถทำได้ดังนี้ 1. วางตัวบอกตำแหน่งการพิมพ์ในกรอบเฟรม 2. เลือกไปที่เมนู Insert > Form Objects > Text Field 3. กำหนดค่าตรงส่วนของพาเนล Properties การสร้าง Checkbox ลงในฟอร์ม Checkbox คือ ออบเจ็คที่ใช้สำหรับสร้างกลุ่มตัวเลือกเพื่อให้ผู้เข้าาเยี่ยมชมใช้เลือก โดยสามารถเลือกได้มากกว่า 1 ตัวเลือก 1. วางตัวบอกตำแหน่งการพิมพ์ในกรอบเฟรมในตำแหน่งที่ต้องการ 2. เลือกไปที่เมนู Insert > Form Objects > Checkbox หรือตรงแถบ Insert ในแท็บ Forms เลือกปุ่ม Checkbox 3. กำหนดค่าตรงส่วนของพาเนล Properties

การสร้างฟอร์ม

ใบความรู้ที่  12

เรื่อง  การสร้างแบบฟอร์มโดยใช้ Text Field และ Checkbox

การสร้างแบบฟอร์ม

1. วางตัวบอกตำแหน่งการพิมพ์ลงในตำแหน่งที่ต้องการสร้างฟอร์ม

2. เลือกไปที่เมนู Insert > Form หรือในแถบ Insert เลือกแท็บ Forms แล้วคลิกที่ปุ่ม Form

 

3. กำหนดค่าต่างๆ ในพาเนล Properties (โปรดใช้ Mouse ชี้ไปยังส่วนต่างๆ ในภาพเพื่อทราบรายละเอียด)

 

การใส่องค์ประกอบของฟอร์มลงในฟอร์ม

องค์ประกอบต่างๆ ของฟอร์ม สามารถเลือกได้โดย เลือกไปที่เมนู Insert > Form Objects หรือเลือกจากแถบ Insert ในแท็บ Forms ซึ่งมีดังนี้

 

การสร้าง Text Field ลงในฟอร์ม

Text Field คือ ออบเจ็คที่ทำให้ผู้เข้าเยี่ยมชมสามารถกรอกข้อความได้ ซึ่งมีอยู่ 3 แบบ ดังต่อไปนี้

Single - Line Text Fields ใช้สำหรับการกรอกข้อความที่ไม่ยาวมากนัก เช่น ชื่อ ที่อยู่ เป็นต้น

Multiple - Line Text Field หรือ  Textareaใช้สำหรับกรอกข้อความที่มีความยาวมากๆ เช่น คำติชม หรือ

คำแนะนำต่างๆ

Password Fields ใช้สำหรับการกรอกรหัสผ่านซึ่งตัวอักษรจะแสดงออกมาเป็นเครื่องหมาย

ดอกจัน หรือเครื่องหมายอื่นเพื่อป้องกันไม่ให้ผู้อื่นเห็นขณะที่พิมพ์

·       การสร้าง Text Field สามารถทำได้ดังนี้

1. วางตัวบอกตำแหน่งการพิมพ์ในกรอบเฟรม

2. เลือกไปที่เมนู Insert > Form Objects > Text Field

 

3. กำหนดค่าตรงส่วนของพาเนล Properties

 

การสร้าง Checkbox ลงในฟอร์ม

Checkbox คือ ออบเจ็คที่ใช้สำหรับสร้างกลุ่มตัวเลือกเพื่อให้ผู้เข้าาเยี่ยมชมใช้เลือก โดยสามารถเลือกได้มากกว่า 1 ตัวเลือก

1. วางตัวบอกตำแหน่งการพิมพ์ในกรอบเฟรมในตำแหน่งที่ต้องการ

2. เลือกไปที่เมนู Insert > Form Objects > Checkbox หรือตรงแถบ Insert ในแท็บ Forms เลือกปุ่ม Checkbox 

3. กำหนดค่าตรงส่วนของพาเนล Properties