การสร้าง Web Page โดยใช้โปรแกรมสำเร็จรูป NAMO Web Editor Version 6
มารู้จักกับโปรแกรมสำเร็จรูป NAMO Web Editor Version 5 กันก่อนนะคะ
โปรแกรมสำเร็จรูป NAMO Web Editor Version 6 เป็นโปรแกรมเพื่อการเขียนเว็บเพจ ที่ผู้เขียนไม่จำเป็นต้องมีพื้นฐานในเรื่อง HTML หรือ JavaScript เลยก็สามารถเขียนได้
เพราะเป็นโปรแกรมที่ได้จัดเตรียมองค์ประกอบต่างๆที่สำคัญสำหรับการเขียนเว็บไว้เป็นแบบสำเร็จรูป ที่สามารถเรียกมาใช้ได้ทันทีอย่างง่ายๆ และยังมีความแม่นยำในการวางองค์ประกอบต่างๆ นั้นลงบนหน้าเว็บเพจ และยังสามารถสร้างข้อมูลแบบ ไดนามิก ตอบโต้กับผู้เข้าชมเว็บไซต์ได้ มีเครื่องมือต่างๆที่ช่วยจัดการกับกราฟฟิกได้อย่างดี และที่สำคัญที่สุด คือ ง่ายต่อการใช้งาน ปัจจุบันโปรแกรมนี้ มีการพัฒนาไปจนถึง Version 6 แล้ว ทำให้ผู้เขียนเว็บเพจ สามารถสร้างงานได้อย่างหลากหลายมากขึ้น และง่ายขึ้นด้วย
สำหรับเอกสารฉบับนี้ เขียนขึ้นเพื่อใช้ประกอบการอบรม ซึ่งใช้เวลาเพียง 3 วัน จึงจะเขียนเนื้อหาเฉพาะที่นำมาใช้งานบ่อยๆเท่านั้น รายละเอียดเพิ่มเติมท่านสามารถอ่านได้จาก Help บนเมนูบาร์ ซึ่งเป็นภาษาอังกฤษ ถ้าต้องการข้อมูลที่เป็นภาษาไทย โปรดเข้าไปที่ http://www.namo.co.th/support.html จะมีคำอธิบายเป็นภาษาไทย เป็นบทๆ ไป
ก่อนลงมือทำงานกับ NAMO Web Editor Version 6 ต้องทำการติดตั้งโปรแกรมนี้ลงในเครื่องให้เรียบร้อยก่อน ควรซื้อโปรแกรมที่มีลิขสิทธิ์ถูกต้องตามกฎหมายจากบริษัทผู้ขาย เพื่อจะได้รับ Serial No. และ CD-Key ที่ถูกต้อง ทั้งยังได้รับสิทธิในการรับบริการจากบริษัท รวมถึงการ Update โปรแกรม หรือ ข้อมูล และการสอบถามเมื่อเกิดปัญหากับโปรแกรมที่ซื้อมา
Menu barรูปร่างหน้าตาของโปรแกรม
Standard tool bar
Formatting Tool bar
View Tab bar มี 4 มุมมอง :1. Edit (สร้าง) 2.Edit & HTML(ไว้ดู Code) 3. HTML 3. Preview ไว้ดูตัวอย่างงานที่สร้างขึ้นมา
Command bottons
Document Tab Bar
โปรแกรม NAMO Web Editor Version 6 นั้น ได้อำนวยความสะดวกในการใช้งานไว้ โดยผู้เขียนเว็บเพจ สามารถเลือกดูมุมมอง ได้ 4 ลักษณะ ดังนี้
1. Edit เป็นมุมมอง สำหรับการสร้างงานเว็บเพจ โดยสามารถเลือกใช้เครื่องมือต่างๆ ที่โปรแกรมมีไว้ให้
2. Edit & HTML เป็นมุมมองที่ผู้ใช้เลือกดู เมื่อต้องการเห็น Source Code ในขณะที่สร้างงานพร้อมกันไป
3. HTML (F6) เป็นมุมมองที่ผู้ใช้งานเลือกดู เมื่อต้องการเป็น Source Code ที่เป็นภาษา html ซึ่งภาษา HTML (Hypertext Markup Language) คือภาษาสำหรับการแสดงเป็น เว็บเพจ ซึ่งโปรแกรมจะสร้างให้โดยอัตโนมัติเมื่อผู้ใช้งานสร้างงานในมุมมอง Edit และผู้ที่มีความรู้ในภาษา HTML นี้ สามารถเพิ่มเติม หรือแก้ไข โดยใช้ภาษา HTML ในมุมมองนี้ได้
4. Preview เป็นมุมมองเพื่อดูตัวอย่างที่มีไว้ให้ผู้ใช้งานได้ตรวจสอบงานที่สร้างไว้ใน Edit เพื่อได้เห็นหน้าเว็บจริงๆ ก่อนจะไปดูใน Browser หรือจะส่งขึ้น (Upload ไปยัง Server)
Tips : กดปุ่ม F 11 เป็นการลัดเส้นทางเพื่อดูงานที่สร้างโดยใช้ Browser ‘Internet Explorer’
กดปุ่ม F 12 เป็นการลัดเส้นทางเพื่อดูงานที่สร้างโดยใช้ Browser ‘Netscape’
Tools หรือ เครื่องมือ ที่อยู่บน Standard Toolbar มีดังนี้
1. Standard Tools : Tools เหล่านี้ เป็น Tools ทั่วๆ ไป ที่เคยใช้กันอยู่แล้ว
1
2
3
4
5
6
7
8
9
10
11
12
13
14
8. ตรวจสอบคำศัพท์
9. ส่งข้อมูล Upload เพื่อไปวางที่ Server
10. สำหรับ Browser ที่เป็น Netscape
11. สำหรับ Browser ที่เป็น Internet Explorer
12. Cut / ตัด
13. Copy / คัดลอก
14. Paste / วาง
1. สร้างงานใหม่ 2. เปิดงานเก่าที่มีอยู่ 3. บันทึก (เฉพาะเพจที่กำลังทำงานอยู่)
4. บันทึกทุกเพจที่เปิดอยู่
5. ส่ง เมล
6. สั่ง Print
7. ภาพ Preview ก่อน Print
15
16
17
18
19
20
21
22
23
24
25
15. Undo ล้างการกระทำก่อนหน้า
16. Redo ทำซ้ำการกระทำก่อนหน้า
17. เปิดภาพ clipart ทั้งหมดที่มีอยู่ใน File ของ Namo
18. เปิดหน้าต่าง Image เพื่อแทรกภาพลงในเพจ
19. เปิดภาพ Banners, Bullets, Buttons , Images ที่มีใน Namo
20. สร้างตาราง
21. แทรก Layer
22. แทรก Frame
23. แทรก Script Wizard
24. สร้าง Link (เชื่อมต่อระหว่างเพจ)
25. ตัดการเชื่อมต่อ
2. Formatting Tools หรือ เครื่องมือที่ใช้ในการจัดการเรื่อง การจัดรูปแบบต่างๆ
1
2
3
4
1. จัดรูปแบบ Paragraph
2. กำหนดระดับความสำคัญของย่อหน้า
3. เลือกตัวอักษร
4. เลือกขนาดตัวอักษร
และ Tools อื่นๆ ในกลุ่ม Formatting นี้ก็เหมือนกับ ซอร์ฟแวร์ตัวอื่นๆ ที่เราคุ้นเคยนั่นเอง
เริ่มสร้างงาน My Webpage
1. เปิดโปรแกรม NAMO Web Editor Version 5 จาก Start ----> Program -----> Namo Web editor 5 -----> Namo Web editor 5 ดังนี้
2. โปรแกรมจะแสดงหน้าต่างแรกดังนี้
2.2 คลิกที่ Document Properties...
2.1 คลิกที่ File
3. จะได้หน้าต่าง : Document Properties
3.1 เลือกใส่สีพื้นหลังและสีตัวอักษรตามที่ต้องการ หรือถ้าพอใจตามค่าเริ่มต้น (Default) ที่กำหนดไว้แล้วก็คลิก OK ได้เลย ถ้าต้องการเปลี่ยนเป็นสีอื่นๆ ก็คลิกที่ปุ่มรูป ข้างหลังสีตามหัวข้อ แล้วเลือกสีที่ต้องการ แล้วคลิก OK
แต่ถ้าต้องการพื้นหลัง จากรูปภาพ Background ที่เก็บไว้ใน ไฟล์ ก็ต้อง ไปเลือก Browse ตรง ส่วนข้างล่าง Background image
ถ้าเลือกที่ปุ่ม เป็นการขอ browse ไปยังตำแหน่งที่เก็บไฟล์ แต่ถ้าเลือกปุ่ม จะเป็นการเรียกภาพสำเร็จรูปที่มีอยู่ในโปรแกรมมาใช้งาน
Tips
3.2 ลองเลือกคลิก เพื่อเลือก background จากภาพที่โปรแกรมเตรียมไว้ให้ จะได้ หน้าต่างนี้
หน้าต่าง : Resource Manager มีรูป และ icon สำเร็จรูปหลายอย่างให้เลือกใช้ เลือก สีและลาย Background ที่ถูกใจโดย ใช้ mouse ไปคลิกที่รูปที่ต้องการ แล้วให้ คลิก OK
( ควรคำนึงด้วยว่า การเลือกสีและลายของ Background จะมีผลต่อสีของตัวอักษร บนเพจที่เราเขียน)
4. เมื่อเลือก Background ได้แล้ว ต่อไปจะ วาง layout ของเอกสารหน้าแรกหรือ Home Pageโดย
4.1 สร้างตาราง 6 สดมภ์ (column) 2 แถว (row) ดังนี้
(ใส่ Logo )
(ใส่ชื่อหัวของเพจ เช่น : “มะเร็ง : โรคที่คุณต้องกลัว” )
link 1
link 2
link 3
link 4
link 5
link 6
4.2 แถวบน ให้ผสานสดมภ์ที่ 2 – 6 ให้เป็นช่องเดียวกัน ไว้ใส่ชื่อเรื่องและกลุ่ม สำหรับสดมภ์ที่ 1 ของแถวบน ไว้ใส่ รูปสัญลักษณ์ (Logo) ที่กลุ่มสร้างขึ้นมา
4.3 ส่วนแถวล่าง พิมพ์หัวข้อที่จะสร้างไว้ใน เพจ ต่อๆไป และต้องการ ลิ้งค์ จาก
หน้าแรก (Home Page) นี้ ขอให้ดูตัวอย่างในหน้าถัดไป
(รายละเอียดการกำหนดคุณสมบัติตาราง จะอธิบายไว้ในหัวข้อที่ 6 )
4.4 ต่อจากส่วนหัวของ Home Page นี้ ให้ Enter เพื่อเว้นบรรทัดไว้ใส่ภาพเคลื่อนไหว หรือ ข้อความเคลื่อนไหวอื่นๆ ให้สวยงาม
4.5 สร้างตารางตามตัวอย่างข้างล่างนี้ และพิมพ์ข้อความตามลำดับ
วิชาการกลุ่มสาระฯ
ภาพกิจกรรมกลุ่มสาระการงานฯ
ข่าวประชาสัมพันธ์
การวิเคราะห์หลักสูตร
ใส่รูปกิจกรรมเด่น พร้อมคำบรรยาย
ใส่ Clipart
ข่าวที่ 1
การวัด/ประเมินผลแนวใหม่
แผนการจัดการเรียนรู้
งานในกลุ่มสาระฯ
(ตรงนี้ทำ Drop Down Menu)
บทเรียน Online (New)
บุคลากรเด่น
Link ที่น่าสนใจ
ข่าวที่ 2
v กระทรวงศึกษาธิการ
v เขตพื้นที่ฯ
v Nectec
v เดลินิวส์
v มติชน
v ข่าวสด
(คลิกที่นี่)
คำบรรยาย
ข่าวที่ 3
ใส่ภาพที่ 2
คำบรรยาย
5. การใส่รูปลงบนเพจ5.1 วางเคอร์เซอร์ในตำแหน่งที่ต้องการใส่รูปภาพ5.2 เลือกรูปภาพจากตำแหน่งที่ตั้ง ที่ต้องการ 5.2.1 ถ้าต้องการรูปภาพที่อยู่ใน Clip Art ของโปรแกรม Namo นี้ ให้คลิกที่ icon จะได้หน้าต่าง Resource Manager -----> เลือก Images ----> เลือกกลุ่มรูปภาพที่ ต้องการ เช่น Architectures ก็จะปรากฏภาพให้เลือกดังนี้
1. เลือก Images
2. เลือก กลุ่มภาพที่ต้องการ
3. Double click เพื่อเลือกภาพไปวางบนเพจ
5.2.2 ถ้าต้องการรูปภาพจากไฟล์ที่บันทึกไว้เอง ให้เลือก icon จะได้หน้าต่างนี้
1. คลิกที่นี่เพื่อไปยังตำแหน่งที่เก็บไฟล์รูปภาพ เมื่อเห็นภาพที่จะใช้ ก็คลิกที่ภาพนั้น แล้วเลือก “เปิด” จากหน้าต่างที่แสดงที่เก็บไฟล์ เส้นทางของภาพจะมาปรากฏในช่อง Image Path
ค่าเริ่มต้นการจัดวางภาพ (ภาพจะชิดซ้าย) ถ้าต้องการเปลี่ยนตำแหน่งก็เลือก รูปสามเหลี่ยมเล็กๆ แล้วคลิกเลือกตำแหน่งที่ต้องการ
ขนาดของภาพ
2. ถ้าต้องการเปลี่ยนขนาดรูปภาพให้คลิกที่นี่ก่อน เพื่อให้ขนาดเปลี่ยนไปอย่างถูกต้องตามสัดส่วน
3. ใส่ตัวเลขบอกขนาด pixels ที่ต้องการส่วนใหญ่ภาพที่จะวางบนเว็บเพจ ควรมีขนาดไม่เกิน 300 pixels * อีกด้านที่เหลือ
6. การจัดการกับตาราง เมื่อต้องแทรกตารางเพื่อใช้งานบนเว็บเพจ ให้ดำเนินการตามลำดับดังนี้6.1 ลองวาง Layout ดูก่อนว่าต้องการกี่ สดมภ์ และกี่แถว เช่น 3 สดมภ์ 10 แถว 6.2 คลิกเมาส์ที่ icon รูปตาราง บน Toolbar คลิกเมาส์ค้างลากไปให้ได้สดมภ์และ แถวตามจำนวนที่ต้องการ แล้วจึงปล่อยเมาส์ที่คลิกค้างไว้ 6.3 การกำหนดคุณสมบัติตาราง ต้องคลิกที่ Table บน เมนูบาร์ จะได้ รายการคำสั่งดังนี้
เลือกคำสั่งนี้เมื่อต้องการเพิ่มแถว หรือ สดมภ์
เลือกคำสั่งนี้เมื่อต้องการลบแถว หรือ สดมภ์
เลือกคำสั่งนี้เมื่อต้องการกำหนดคุณสมบัติของตาราง
เลือกคำสั่งนี้เมื่อต้องการกำหนดคุณสมบัติของเซลล์
เลือกคำสั่งนี้เมื่อต้องการแยกเซลล์
คลิกเลือก Tab bar ที่ต้องการ กำหนดคุณสมบัติ 6.4 ลองเลือก Table Properties จะได้หน้าต่างนี้
กำหนดตำแหน่งตาราง
เลือกขนาดของเส้นขอบตาราง ถ้าไม่ต้องการให้เห็นเส้นขอบเมื่อแสดงบน Browser เลือก Hide
เลือกสี ของเส้นขอบ
ถ้าต้องการใส่พื้นหลังให้ตาราง เลือกจาก icon อันใดอันหนึ่ง นี้
7. การสร้าง Drop Down Menu 7.1 วางเคอร์เซอร์ ตรงตำแหน่งที่ต้องการสร้าง (ในที่นี้คือวางไว้ใต้ข้อความ“งานในกลุ่มสาระ”)7.2 เลื่อนเมาส์ไปที่ Insert บนเมนูบาร์ จะได้ รายการคำสั่งดังนี้
คลิกที่ Script จะได้ รายการคำสังข้างล่างนี้
7.3 เลือก Script wizard จะได้หน้าต่างข้างล่างนี้
เลือก Drop Down Menu
3. เลือก Browse ที่นี่เพื่อไปเลือก ตำแหน่งของเพจที่สร้างไว้
2. ตั้งชื่อในช่อง Item name แล้วกำหนดการลิ้งค์ ให้ลิ้งค์ไปยัง เพจที่มีข้อมูลของหัวข้อนั้นอยู่
1. เลือก Add จะได้หน้าต่าง Menu Item Settings 7.4 คลิก Next จะได้หน้าต่างข้างล่างนี้
ในที่นี้กำหนดให้สร้าง Drop Down Menu เพื่อแสดงเว็บเพจของงานต่างๆ ในกลุ่มสาระการงานอาชีพและเทคโนโลยี ดังนั้นในการ Add จะต้อง Add ทั้งหมด 6 งาน คือ (ต้อง Add ทีละ งาน)งานคหกรรม, งานช่าง, งานเกษตรกรรม, งานอุตสาหกรรม, งานพาณิชยกรรม, งานคอมพิวเตอร์
เมื่อเสร็จเรียบร้อยแล้วจะปรากฏเป็น Drop Down Menu บนมุมมอง Edit ดังนี้
แต่จะไม่สามารถคลิกให้เห็นงานอื่นๆได้ จะเห็นได้ต่อเมื่อไปที่มุมมอง Preview .. เมื่อคลิกที่ลูกศร สามเหลี่ยม จะเป็นดังนี้
และเมื่อสร้างเว็บเพจของแต่ละงานไว้แล้ว และสร้างคำสั่ง Link ไว้เมื่อตอน Add แต่ละ item เมื่อเลือกงานใด Browser ก็จะไปเปิดเพจของงานนั้นขึ้นมาแสดง
8. การทำ HyperLink การสร้าง Link เพื่อให้เปิดเว็บเพจหน้าอื่นๆ ที่เราสร้างไว้ ให้กระทำดังนี้8.1 ทำแถบทำที่ข้อความที่ต้องการให้คลิกเพื่อ Link หรือ คลิกที่รูปภาพ ที่ต้องการ Link
8.2 เลื่อน mouse ไปที่ Tool bar เลือก icon จะได้หน้าต่าง Create HyperLInk ลองดูตัวอย่าง
ÿ ทำแถบดำที่ “กระทรวงศึกษาธิการ”
ÿ คลิกที่ icon จะได้หน้าต่าง
ใส่ URL ของกระทรวงศึกษา
ซึ่งได้มาจากการเข้า เว็บของกระทรวง และ คัดลอก URL มา
Target Frame มีให้เลือก 4 ตัวเลือก ดังนี้ 1. blank ถ้าต้องการให้เปิด เพจใหม่สำหรับ Link ที่กำหนดไว้
2. parent ถ้าต้องการให้เปิดเพจที่ link ไป บน frame หลักของ เพจ นั้น
3. self ถ้าต้องการให้เปิดเพจ บน frame ที่มี Drop Down Menu อยู่
9. การบันทึกงาน ไปที่ File -----> Save as -------> (เลือกตำแหน่งที่ตั้งของ File ที่ต้องการบันทึก ทั้งนี้ควรกำหนดไว้เป็น Folder เฉพาะของเราไว้ก่อน แล้วจึงบันทึกลงใน Folder ดังกล่าว)ในที่นี้คือ Desktop -------> Folder ชื่อของท่าน ---------> ตั้งชื่อ File (ถ้าเป็น HomePage ก็น่าจะตั้งเป็น index (และจะมีนามสกุลเป็น htm. หรือ html) แล้วสั่ง “บันทึก” หน้าต่างสำหรับการบันทึก จะมีหน้าตาดังนี้
1. ต้องเลือก Location หรือตำแหน่งที่จะบันทึกให้ถูกกต้องก่อน
3. คลิก Save เพื่อสั่งให้บันทึก
2. ตั้งชื่อเพจที่สร้างงานไว้ ควรใช้เป็นภาษาอังกฤษง่ายๆจะดีกว่า
ถ้างานที่กำหลังสร้าง ได้ถูกบันทึกไว้แล้ว เมื่อต้องการบันทึกซ้ำหลังจากมีทำงานเพิ่มเติม ก็ไม่จำเป็นต้องเข้าไปที่ File ------> Save as แต่สามารถ Save ได้ทันทีโดยคลิกที่ icon หรือถ้ามีการสร้างเพิ่มเติมอีกหลายเพจ ก็เลือกคลิกที่ เพื่อเป็นการ Save งานทั้งหมด ในกรณีที่มีการใส่รูปเพิ่มเติม หรือใส่ ภาพพื้นหลัง (Background) หรือ Object ใดๆ เพิ่มเติมเข้าไป เมื่อสั่งบันทึก โปรแกรมจะถามว่า จะให้บันทึก ภาพเหล่านั้น ด้วยหรือเปล่า ให้ตอบ Yes แล้วจึงสั่งบันทึก
10. การ Import ไฟล์ ที่สร้างด้วยโปรแกรมอื่นเช่น Flash หรือ Swish เข้ามาไว้บนเพจของเรา สามารถทำได้ดังนี้10.1 วาง เคอร์เซอร์ไว้ตรงตำแหน่งที่ต้องการวางวัตถุนั้น10.2 เลื่อนเมาส์ไปที่ เมนูบาร์ เลือก คำสั่ง Insert ------>Object ----->Flash -------->จะมีหน้าต่างให้เลือกตำแหน่งของ File นั้น เมื่อเลือกตำแหน่ง และเลือก File ที่จะ แทรกได้แล้ว คลิกที่ -----> Open วัตถุนั้นก็จะมาวางอยู่ในตำแหน่งที่ เคอร์เซอร์วางอยู่ ลอง Preview ดู
ลองดูเมนูคำสั่งที่ให้เลือก ไฟล์ที่จะแทรก
11.
บ๊าย บาย ไปนอนแล้วค่ะ ซาหวัดดียังมี Function อีกมากมายที่สามารถนำมาใช้สร้างงาน webpage ของเราให้น่าสนใจ ขอให้ท่านผู้เข้าอบรมได้ลองศึกษา และทดลองทำดู จะรู้สึกสนุก และยังได้ผลงานเป็นรูปธรรมอีกด้วย ขอให้สนุกกับการสร้างเว็บค่ะ
เทคนิคเพิ่มเติม การทำ Roll Over
การทำ Roll Over ที่รูปภาพ (Roll Over) หมายความว่า เมื่อนำ เมาส์ไปจี้ที่รูปภาพ แล้ว รูปภาพนั้น จะเปลี่ยนเป็นรูปอีกรูปหนึ่ง มีวิธีการดังนี้ 1. คลิกที่ ได้หน้าต่างนี้2. เลือกภาพที่ต้องการ ภาพแรก จาก แหล่งที่เก็บภาพไว้ กำหนดขนาด (size) ที่ต้องการ
3. คลิกที่ Rollover แล้วเลือก ภาพที่ 2 กำหนดขนาดให้เท่ากับภาพแรก แล้วคลิก OK
4. จะมองเห็นภาพแรก บนเพจที่สร้าง เมื่อเลือกมุมมอง Preview นำเม้าส์ไปชี้ที่ภาพ จะเห็น
ภาพที่ 2 สลับมา
จะเห็นว่า ใน Script Wizard นั้น มีลูกเล่นอื่นๆ อีกมากมาย ให้นักเรียนลองทำดู และขอให้สนุกนะคะ
สวัสดีค่ะ
ศิริพร
ไม่มีความคิดเห็น:
แสดงความคิดเห็น