namo webeditor 8¸„ ม อการใช โปรแกรม namo webeditor 8 หน า 1 จ...

47
คู่มือการใช้โปรแกรม Namo WebEditor 8 หน้า 1 จัดทาโดย...นางปราณี บุญเทพ ตาแหน่ง ครู โรงเรียนสองพิทยาคม การติดตั้งโปรแกรม Namo WebEditor 8 1. ดับเบิ้ลคลิกไอคอน 2. จะปรากฏหน้าจอยินดีต้อนรับเข้าสู่การติดตั้งโปรแกรม ให้คลิก Next หรือ Yes ไปเรื่อยๆ ตามขั้นตอน

Upload: nguyenngoc

Post on 10-Apr-2018

315 views

Category:

Documents


20 download

TRANSCRIPT

Page 1: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 1

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การตดตงโปรแกรม Namo WebEditor 8 1. ดบเบลคลกไอคอน

2. จะปรากฏหนาจอยนดตอนรบเขาสการตดตงโปรแกรม ใหคลก Next หรอ Yes ไปเรอยๆ ตามขนตอน

Page 2: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 2

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

3. โปรแกรมตดตงเรยบรอยแลว คลกท finish เพอจบการตดตงโปรแกรม

Page 3: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 3

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การเรมตนใชงานโปรแกรม Namo WebEditor 8 1. ดบเบลคลกไอคอน บนหนาจอ Desktop ****ถาเปนโปรแกรมรนทดลองใชงาน(Trail) จะปรากฏหนาจอแจงใหทราบและใหเราเลอกความตองการวา ตองการซอลขสทธฉบบเวอรชนเตมหรอไม ถาเราตองการซอกใหคลก Buy Now… ถาตองการท างานตอใหคลก Continue

2. หลงจากคลก Continue จะปรากฏหนาจอเขาสโปรแกรมพรอมใชงาน

Page 4: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 4

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ถาตองการเขาโปรแกรมโดยไมใหโปรแกรมแจงเตอนวนทดลองใชงาน ท าไดโดยหาโปรแกรม Crack หรอ

Patch ไฟล ซงในทนมใหแลวโดยหาไอคอนโปรแกรมดงรป

จะปรากฏหนาตางใหคลกท Crack It!

โปรแกรมจะถามหาชอไฟลทตองการ crack ใหใสชอๆไฟลในชอง filename ซงไฟลทตองการอยทไดรฟ C: ในโฟลเดอร Program files Namo WebEditor 8 Trail bin ชอไฟล WebEditor

จากนนออกจากโปรแกรม โดยคลกท Exit

Page 5: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 5

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

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

Page 6: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 6

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การใชงานโปรแกรม Namo WebEditor 8 เมอเขาสโปรแกรมจะปรากฏหนาจอดงน

ปม Namo WebEditor Button ปมตางๆทจ าเปนในการจดการเอกสาร ไมวาจะเปน การเปด และปดเอกสาร การ Publish (การอพโหลดไฟลไป Server) การพมพเอกสารจะรวมไปอยในทเดยวกน โดยคลกทปมๆเดยว

Page 7: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 7

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ปม Preference

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

ซงเมอเราเขาไปท Preference กสามารถตงคาของเอกสารอยางทเราตองการ เชน ชนดของไฟลท Save ชนดของ Browser สของ Hyperlink และชนดของฟอนตและส ใน Source code เปนตน

Page 8: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 8

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

Quick access tool bar ซงเปนปมเลกๆดานบนสด เพอใหเราเรยกสงตางๆทใชงานเปนประจ าไดสะดวกยงขน เชน save , open , do , undo , publish ,copy format ,paste format ,post to blog , desktop image เปนตน

Tab ตางๆ Home

Insert

Document

Tool

View

Page 9: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 9

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

Develop

View toolbar สามารถเลอกดมมมอง ได 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)

Page 10: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 10

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การใชงาน Document properties และ การใส Keywords คลกขวาในทวางเปลาของ Edit window เลอก Document properties จะแสดงหนาตางขนมา เลอกแทบ General พรอมทงก าหนดคาตางๆ ไดดงน

หากตองการใสเสยงเพลง (เลอกไฟลเพลง ,จ านวนครงทเลนเพลง หรอเลนตลอด)/ ก าหนดระยะขอบของหนาเวบใหชดซายหรอชดขอบบนของหนาจอคอมพวเตอร / ก าหนดเอฟเฟคส เมอผชมมาเขาเวบของเรา จะตองไปทแทบ Style และลองก าหนดตามคาดานลางน แลวลอง Preview ด

Page 11: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 11

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

แทบทมกจะก าหนดกนกคอ แทบ Appearance ทมไวใหเราก าหนด Background ของหนาเวบทงหนา และก าหนดสของ Hyperlinks/visited/Active ตองขอเตอนไวกอนหากเรามแผนทจะใช style sheet คาตางๆของสทโปรแกรมก าหนดมาตองคงไวอยางเดม หามไปแกไขไมเชนนน style sheet จะไมท างาน

Page 12: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 12

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

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

การใชงาน Image Effect

เมอตองการแทรกภาพ ใหไปทแทบ Insert และเลอกปม image

Page 13: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 13

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

กรณเมอเลอก Clip Art แลว Namo จะแสดงหนาตาง Resource Manager ซงเปนแหลงรวมภาพและไฟลแบนเนอร ไฟลแฟลชไว ดงรป

เมอเราเลอกภาพและคลก OK ภาพกจะไปปรากฏใน Edit window ซงเมอคลกไปทภาพนนๆ จะปรากฏขนาดของภาพแสดงไว เรยกวา Image properties bar

เมอเราคลกทภาพนน และคลกขวาทตวภาพ จะปรากฏเมนใหเลอก ใหเราเลอก Image effect จะแสดงดงรป

Page 14: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 14

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

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

เมอเราคลก OK กจะปรากฏหนาตางเพอใหเราเลอกแหลงทเกบไฟล และชนดของไฟลทตองการเลอก ในทนเราเลอกชนดของไฟลเปน gif แลวคลก Ok ดงรป

Page 15: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 15

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

หาก เรา Double click อกครงทตวรปภาพ กจะกลบไปทโปรแกรมตกแตงภาพ image effect อกครง ซงเราจะแกไขกครงกไดตามทเราตองการ

Page 16: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 16

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การสรางตารางและการใสขอมลในตาราง 1. เลอกต าแหนงทตองการใสตาราง คลกไปทปมตาราง (Table) และก าหนดรายละเอยดของตาราง

ตามทตองการ ดงรป

2. จะไดตารางตามตองการ

การปรบแตงรายละเอยดของตาราง 1. ลากทบด าคลมตาราง 2. คลกเมาสปมขวาตารางแลวเลอก Table Properties

จ านวนแถวและ

คอลมน

จดต าแหนง

ตารางบน

ก าหนดเสนขอบ

ของตาราง

ถาไมตองการให

มเสนขอบ

ก าหนดรปแบบ

พนหลง

ความกวางและ

ความสง

Cell padding ระยะ

ระหวางขอความใน

ตารางกบขอบ

ตาราง

ก าหนดรปแบบ

พนหลง

Page 17: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 17

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

3. จากนนปรบรายละเอยดตางๆ ของตารางตามรปภาพขางลาง

การปรบแตงรายละเอยดของเซลล 1. ลากทบด าคลมเซลลทตองการ 2. คลกเมาสปมขวาตารางแลวเลอก Cell Properties

Page 18: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 18

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

3. จากนนปรบรายละเอยดตางๆ ของตารางตามรปภาพขางลางเมอก าหนดรายละเอยดตางๆ เสรจแลวคลกปม OK

การแทรกตารางและลบตาราง 1.1 การแทรกแถวและคอลมน

1.1.1 น าเคอรเซอรไปวางยงต าแหนงทตองการจะแทรกแถวหรอคอลมน

1.1.2 คลกเมาสปมขวาจะปรากฏเมนยอยใหเลอก Table > Insert Rows or Columns

Page 19: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 19

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

Insert rows : คลกเลอกเมอตองการแทรกแถว Insert columns : คลกเมอตองการแทรกคอลมน Number of rows : ใสจ านวนแถวหรอจ านวนคอลมนทตองการแทรก Above the current row : แทรกบนแถว/คอลมนทเคอรเซอรกระพรบอย Below the current row : แทรกขางลางแถว/คอลมนทเคอรเซอรกระพรบอย

1.1.3 จะปรากฏแถวขนมาหนงแถว ซงมขนาดของเซลลเทากบขนาดของแถวเดมทเขาไปแทรก

***** วธลดในการเพมแถวท าไดโดยการคลกเมาสทเซลลสดทายของตารางแลวกด Tab ทคยบอรด จะเปนการเพมแถวถดไปอก 1 แถว

1.2 การลบแถวและคอลมน ถาตองการลบทงตารางสามารถท าไดโดยคลมตารางคลกขวา เลอก Table > Delete Selected Rows/Columns

Page 20: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 20

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ถาจะลบแถวหรอ คอลมนอยางเดยวคลกท แถวนน หรอ คอลมนนน คลกขวา เลอก Table > Delete Row /Columns

การรวมและการแบงเซลล

การรวมเซลล 1. ลากเมาสคลมเซลลทตองการรวม

2. คลกเมาสปมขวาจะปรากฏเมนยอยใหเลอก Table > Merge Cells

Page 21: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 21

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

จะไดเซลลทรวมกนดงภาพ

การแบงเซลล

1. คลกเมาสเซลลทตองการแบง 2. คลกเมาสปมขวาจะปรากฏเมนยอยใหเลอก Table > Split Cells..

• Split into rows : คลกเมอตองการแบงเซลล • Split into Columns : คลกเมอตองการแบงคอลมน • Number of rows or columns : จ านวนแถว/คอลมนทตองการแบง

Page 22: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 22

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ในทนตองการแบงคอลมน 3 คอลมน

จะไดเซลลทแบงเซลลดงภาพ

Page 23: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 23

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การแทรกปม Flash สวย ๆ

1.คลกท ปม บน แทบ Insert 2. จะเปดหนาตาง Resource Manager ขนมา คลก button ดานซายจะปรากฏ

4. เลอกปม flash สวย ๆ ทางดานขวามอ เมอเลอกรปแบบทชอบแลวใหคลก OK 5. จะเกดกรอบ Flash Button Properties เปนทเราจะปรบแตง Flash button ใหเปนขอความทเรา

ตองการ

Text พมพขอความทตองการ

Page 24: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 24

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

Font เลอกแบบอกษรทตองการ (Tahoma)

การท า Banner

1. คลกท ปม บน แทบ Insert 2. จะเปดหนาตาง Resource Manager ขนมา คลก banner ดานซายจะปรากฏ

3. เลอกรปแบบ Banner ทตองการจากนนกด Ok Banner ทเราเลอกจะถกใสลงไปยงหนาเวบเพจทเราไดเลอกไว

4. จะสงเกตเหนวาขอความภายใน Banner จะเปนขอความทโปรแกรมใหมาซงขอความนเราจะสามารถแกไขไดโดยดบเบลคลกท Banner จะขนหนาโปรแกรมในการจดการขอความและรปแบบตางๆ ดงภาพ

6. เพยงเทานเรากได Banner ใสในหนาเวบเพจเรยบรอยแลว ดงภาพ

Page 25: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 25

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การใช Photo Album

คลกทแทบเมน Insert และ Photo Album กอนใชงานฟงกชนน จะตองท าการ Save ชอไฟลนกอนเปนอนดบแรก โปรแกรมจงจะยอมใหสรางได

จากนนจงจะขนหนาตางดงรป

ใหคลกตอท Create New

Page 26: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 26

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ใหเลอกการแสดงผลของภาพ

จากนนใหคลก Next กจะไดดงรป เพอเลอกรปภาพทจะน ามาท าเปน Photo Album (หมายถงคลกเลอกภาพเลก แลวใหขยายเปนรปใหญ)

ใหท าการคลกเลอกไฟลทละไฟลหรอเลอกทงโฟลเดอรกได ดงรป

Page 27: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 27

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

จากนนคลก Next

ใหเลอกชนดและขนาดของ Thumnail และคาตางๆ แลวคลก Next

Page 28: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 28

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ใหก าหนดจ านวนคอลมน , ลกษณะการจดวาง, และสของเสนตาราง

ดานบนนใหก าหนดทของไฟลทจะน าไปเกบ แลวคลก Finish

โปรแกรม Namo กจะท าการสราง photo album ใหอตโนมต ดงรป

Page 29: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 29

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

เมอลอง preview เมอคลกรปเลก จะไปขยายรปใหญดานลาง

การเชอมโยง(Link)

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

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

Page 30: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 30

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

4. การเชอมโยงดวยอเมล 5. การเชอมโยงไปยงไฟลดาวนโหลด

1. การเชอมโยงภายในเวบเพจเดยวกน หากขอมลในหนาเวบเพจเดยวกนมขนาดยาวมาก ท าใหตองใช Scroll bar เลอนด เราสามารถเชอมโยงขอมลภายในเพจเดยวกนไดโดย Click mouse ต าแหนงทเปน Link จะกระโดดไปยงขอมลสวนอนซงอยในเพจเดยวกน โดยการก าหนด Bookmark Bookmark หมายถงการก าหนดจดปลายทางทตองการหรอจดท Link ทจะกระโดดไปหนาเวบเพจนน มขนตอนการสรางดงน

1. คลกเมาสตรงจดทตองการสราง Book Mark

2. คลกทปม บน แทบ Home และตงชอ Bookmark

3. การสราง Link ไปยง Bookmark โดยไปจดทตองการสรางการเชอมโยง

สรางการเชอมโยง คลกทปม บน แทบ Home

Page 31: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 31

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

จะไดขอความหรอไอคอนทมการเชอมโยงดงน

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

2. คลกทปม บน แทบ Home 3. จะปรากฏหนาตางขนมาดงน

4..การก าหนดลกษณะของเพจใหมทเชอมโยง

Page 32: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 32

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

เมอม การคลกท link เราสามารถก าหนดการเปดหนาเวบทเชอมโยงได เชน ใหแสดงหนาเวบทเชอมโยงได เชน ใหแสดงหนาเวบทเชอมโยงในหนาตางบราวเซอรใหม หรอใหแสดงแทนหนาเพจเดม เปนตน โดยก าหนดไดจากสวนของ Target ดงน • blank ใหเปดเพจทเชอมโยงในหนาตางบราวเซอรใหมอกหนาตาง • parent ใหเปดเพจทเชอมโยงในหนาตางบราวเซอรเดม • self ใหเปดเพจเชอมโยงในเฟรมเดม หรอหนาตางเดม • top ใหเปดเพจทเชอมโยง ในหนาตางบราวเซอรเดมโดยจดใหเตมจอ

3. การเชอมโยงไปยงเวบไซตอน ในการเชอมโยงกบเวบไซตอน ใหระบ URL ของเวบเพจนน โดยใหพมพ http:// น าหนาชอเวบเพจท

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

1. คลกเลอกรปภาพหรอขอความทตองการสราง Link

2. คลกทปม บน แทบ Home 3. พมพชอ URL เวบไซตทเราตองการเชอมโยงในชอง URL ในหนาตาง Create Hyperlink แลวกดปม OK

Page 33: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 33

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

4. การเชอมโยงดวยอเมล โดยปกตเพอใหผทมาเยยมชมเวบเพจของเราสามารถตดตอกบเราได จะมการสราง Link ชไปยง

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

1. เลอกขอความทตองการจะท าเปน Link

2. คลกทปม บน แทบ Home

การสรางแบบทดสอบ

Namo WebEditor 8 ไดใหฟงกชนการทดแบบทดสอบนกเรยน วานกเรยนไดรอะไรไปบางจากบทเรยน ซงผสอนสามารถรผลลพธทไดจากทไหนกได ทๆสามารถตออนเตอรเนตได ดวยคณสมบตการสรางแบบทดสอบอยางงายนทแสดงบนเวบไซตของสถานศกษา เพยงแคผท าแบบทดสอบ คลกปม submit หรอ สง ผลลพธกจะถกสงไปยงอเมลของผจดท าหรอครผสอนทนท

ขอควรระวงส าหรบนกเรยนทมความรภาษา html นนสามารถทราบค าตอบไดหาก preview source code ดงนน หากเปนการท าแบบทดสอบทส าคญๆและวดเกรดกนจรงๆ และยงสามารถสรางแบบทดสอบวชาตางๆไปยงเวบไซตของหองเรยน โดยคลกผาน Hyperlinkg และสามารถก าหนดใหหนาเวบนนๆหรอการใส Action script เพอไมใหสามารถคลกขวาเพอท าการคดลอกบทความได

Page 34: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 34

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ขนตอนการสรางแบบสอบถาม ใหลองพมพขอความวา Science Quiz ลงในหนาเอกสาร หรอใน Edit windowแลวใหไปทแทบ Home แลวไปทกลมของ Style เลอก Define Style เพอก าหนดลกษณะของสอกษรแบบใช Style

จากนนจะปรากฏหนาตางใหคลกเลอกสอกษรเปนสน าเงน แลวคลก OK

Page 35: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 35

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

***หากไมม style ใหเลอก ใหเพม style และก าหนดคาตางๆตามตองการ

หลงจากคลก OK แลว ซงเปนผลลพธ คอตวอกษรมสน าเงน

จากนนวางเคอรเซอรไวทายค าทจะใสค าถาม

Page 36: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 36

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ไปทแทบ Tool -> Quiz Style และผลลพธหนาตางทแสดง Quiz Properties

ก าหนดเวลาส าหรบแบบทดสอบ และเกรดลงใน Quiz Properties และคลกเลอกค าตอบททกเทานน คอใหคลกเลอก Display the number of correct answers only

คลก OK ตอไปใหคลกเลอก Insert Question ดงรป

กรณทเลอก Multiple Choice (one answer) หลายตวเลอก แตหนงค าตอบ ใหเราใสค าถามและคลก Add เพอใสค าตอบจ านวน 4 ครง ชอตางกน และตองคลกถกทค าตอบทถกดวย

Page 37: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 37

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

คลก Ok แลวดผลลพธดงรป

ผลจากการ Preview

ตอไปตองใสปม Submit button เขาไปดงรป

หลงคลก submit button กจะปรากฏ message box ใหเรากรอก email address ดงรป

เสรจแลว จะเหนวาค าตอบมอกษรเปนสเทา

Page 38: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 38

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ลอง Preview ด และท าแบบทดสอบโดยเลอกค าตอบ และคลก Submit

ถาตอบถกจะปรากฏแสดงในรป

ถาตอบผด จะไดดงรปลางน

หมายเหต อกษรตวเลอก มค าวา จ ทแสดงออกมานนไมตองหวง ลบทง ในหนา Edit window ไดเลย เวลา preview กปรกตไมมปญหาอะไร

Page 39: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 39

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

กรณทเลอกเตมค าตอบสนๆ กจะพบหนาตางปรากฏขนมา ดงรปใหท าการเลอก short Answer

จากนนคลก OK และจะแสดงค าถาม และค าตอบเปนอกษรสเทา ทผท าแบบทดสอบจะไมสามารถมองเหนได แตจะแสดงค าตอบใหเหนเมอ ผเรยนกดปม Submit แลวเทานน

ผลจากการ Preview

กอนทจะท าใหการท างานสมบรณ กจะตองสรางปม Submit button ขนมา

เมอคลกแลวจะปรากฏหนาตางขนมา ดงรปลาง เพอใหเราใส email address ของผจดท า หรอครผสอน

คลก Ok จะไดดงรปตอไปน

Page 40: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 40

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ถาตอบถกจะปรากฏแสดงในรป

ถาตอบผด จะไดดงรปลางน

Page 41: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 41

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การปองกนการส าเนาหนาเวบ หรอ copy

เราสามารถใส Action ทไมใหผเขาชมคลกขวา เพอท าการส าเนาหรอ Copy เนอหา หรอ View

Source Code ซงกคอคนหาค าตอบของบททดสอบบนเวบไดกอนทจะท าบททดสอบเสรจ ทแทบ View ในกลมของ Panel ใหคลก Action และคลก Add

กจะพบเมน Action เพมเขามาทหนา Edit window

จากนนกจะปรากฏหนาตาง Action Properties ขนมา

ใหคลกเลอก Event เปน OnLoad และ Action เปน Disable Shortcut Menu แลวคลก OK

Page 42: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 42

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

ในสวนของ Action Menu กจะพบวามรายการของ Event , Action เพมเตมเขามา

เมอท าการ Preview หนาเวบ และมการคลกขวา กจะปรากฏ Message box ทแจงวา

Page 43: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 43

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การใชงานโปรแกรมน าเสนอ

โปรแกรมทใชในการน าเสนอเชน Microsoft PowerPoint file (*.ppt) มกน ามาใชในวงการศกษา แตการทรนไฟลนไดตองมโปรแกรมและตองเพม Plugin เขาไปในคอมพวเตอรจงจะสามารถเปดไฟลได

ดงนน Namo WebEditor 8 จงมเครองมอ ส าหรบแปลงไฟล PowerPoint ไปเปนไฟล HTML หรอรปภาพได เพอใหไฟลนสามารถรนทไหนกไดทๆซงม Web Browser ถกตดตงอย การน าเขาหรอแกไขไฟล (*.ppt) สามารถถกเปดไดบนเวบและใหภาพเตมจอ

ในทนเราจะไดมาเรยนรกนวา เราจะน าเขาไฟล PowerPoint file (*.ppt) เขามาใน Namo WebEditor 8 ในรปของ HTML ไดอยางไร และไดศกษาวาจะแกไขไฟลน าเสนอนและรนใน Web Browser ไดอยางไร การน าเขาไฟล PowerPoint เปน HTML 1) คลก ปม Namo WebEditor Button 2) คลก Open 3) ใน mesage box ในสวนของ Option ใหท าการเลอก "Import PowerPoint File" ใหท าการเลอก Convert to HTML format

รปท 1 รปท 2

รปท 3

Page 44: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 44

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

หากเลอก Convert to image files ภาพน าเสนอแตละหนาของ PowerPoint กจะถกแปลงไปเปนภาพ ทยงคงความชดเหมอนไฟลตนฉบบ การตงคา Presentation SetUp ใหไปทแทบ Tool

รปท 4

รปท 5

รปท 5 ก าหนดใหพนหลงมสด า และหนาไฟลเอกสารนสามารถรนบน Web Browser ได สวนใน Namo สามารถรนได ดวยการคลกไปทแทบ Tool แลวคลกท Run Presentation ดงรปท 6 หรอ รนบน Internet explorer รปท 7

รปท 6

รปท 7

Page 45: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 45

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

การแทรก YouTube Tags

มาเรยนรการแทรก YouTube Tags ลงใน Namo WebEditor 8 เรมดวยการวางต าแหนง cursor ทๆเราตองการจะแทรก Tag ลงในหนาเวบเรา รปท 1 คอเวบ www.youtube.com สวนดานขวามอ (รปท 2) เราจะเหน embed tags ทเราตอง การใสในเวบเรา

รปท 1

รปท 2

เรมตนดวยการใหเราไปทแทบ Insert -> Insert Media -> Insert YouTube Embed ดงรปท 3

Page 46: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 46

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

รปท 3

หลงจากทคลกเลอก Insert YouTube Embed แลว จะม message box แสดงดานลาง

รปท 4

ใหเรากลบไปท YouTube แลวคลกทชอง Embed เพอใหขนเปนแทบสน าเงน ดงรปท 5 แลว ท าการคลกขวาเพอเลอก Copy

รปท 5

จากนเมอคลกกลบมาทโปรแกรม Namo WebEditor 8 แทกทเราส าเนามาจะถกแสดงขนโดย อตโนมต โดยไมตอง Paste เลย

รปท 6

เมอคลก Ok แลวจะไดดงรปท 7 และรปท 8

Page 47: Namo WebEditor 8¸„ ม อการใช โปรแกรม Namo WebEditor 8 หน า 1 จ ดท าโดย...นางปราณ บ ญเทพ ต าแหน ง

คมอการใชโปรแกรม

Namo WebEditor 8 หนา 47

จดท าโดย...นางปราณ บญเทพ ต าแหนง คร โรงเรยนสองพทยาคม

รปท 7 รปท 8