Htmlarea3xtdv11rc1.zip

- 42 -

WORKSHOP 6 การติดตั้ง WYSIWYG Editor ในบทเรียนนี้ จะนําเสนอ WYSIWYG Editor 2 อยาง คือ TinyMCE และ HTML Area3 XTD 1. TinyMCE การใชงาน TinyMCE สําหรับใสและแกไขขอมูล Content Item การใสและแกไขขอมูลลง ใน Content จะมีลักษณะคลาย ๆ กับโปรแกรมออกแบบเว็บไซตทั่วไป เชน Macromedia Dreaweaver โดยจะมีกรอบที่สามารถใสขอมูลสองสวนคือ สวนแรก Intro Text เปนสวนที่ Content Item จําเปนตองมี อาจจะใสขอมูลทั้งหมดหรือ ขอความบางสวนที่เกริ่นถึงเนื้อหาใน Content Item ทั้งหมด สวนที่สอง Main Text เปนสวนที่แสดงเนื้อหาที่เหลือตอจาก Intro Text ทั้งหมด

- 43 ความหมายของปุมคําสั่งบน Toolbar ตัวหนา, ตัวเอียง, ขีดเสนใต, ตัวขีดทับ จัดขอความ ชิดซาย, ชิดขวา, กึ่งกลาง, เต็มบรรทัด ชนิดตัวอักษร ขนาดตัวอักษร ตัดขอความ, คัดลอกขอความ, วางขอความแบบ Plain Text, วางขอความแบบ Word, เลือกทั้งหมด สรางรายการแบบสัญลักษณ, สรางรายการแบบลําดับ ยกเลิก, ทําซ้ํา ใส Link, นํา Link ออก, ใส Link ภายในหนาเดียวกัน ใสรูปภาพ เปด pop up เพือ่ แกไขขอมูลในรูปแบบ HTML คนหาหรือแทนที่ วันที,่ เวลา รูปอมยิ้ม สีตัวอักษร, สีพื้นหลังตัวอักษร ลบรูปแบบที่ถูกกําหนด ตัวหอย, ตัวยก ตัวอักษรพิเศษ เสนคั่น ใส Flash, ใสไฟล Multimedia (Flash, Quicktime, Shockwave, Windows Media, Real Media) ใสตาราง

- 44 การจัดการตาราง (Table) การแทรกตาราง 1. ใหกดปุม ที่ Toolbar ของ TinyMCE Editor

2. กําหนดคาตาง ๆ ดังนี้ Columns Rows Cellpadding Cell Cellspacing Alignment Width, Height

จํานวนของแถวในแนวตั้ง จํานวนของแถวในแนวนอน ระยะหางระหวางชอง Cell กับตัวอักษรภายในชอง ระยะหางระหวางชอง Cell กําหนดใหตารางชิดซาย ขวาหรือกึ่งกลาง กําหนดความกวางและความสูงหนวยเปน pixels (สามารถเปลี่ยนหนวยเปน % ได โดย เติม % ตอทายคาที่กําหนด) จากนั้น ใหกดปุม เพื่อแทรกตาราง 3. กดปุม เพื่อแทรกตาราง การแทรกและลบ Row หรือ Column 1. คลิกชอง Cell 2. เลือกกดปุมคําสั่งบน Toolbar ดังนี้ แทรก Row ใหมตรงดานบน แทรก Row ใหมตรงดานลาง ลบ Row

แทรก Column ใหมกอนหนา แทรก Column ใหมดานหลัง ลบ Column

- 45 การรวม ชอง Cell 1. คลิกชอง Cell จากนัน้ กดปุม

จะปรากฏสวนกําหนดคาตาง ๆ ดังรูป

2. กําหนดคาการรวมชอง Cell ในสวน Merge table cells การรวมชอง Cell จะรวมโดยยึดตําแหนงจากชอง Cell ที่เลือกไวไปดานซายในกรณี Column และดานลางในกรณี Row) 3. กดปุม Update (การรวมจะเริ่มรวมจากทางขวาและดานลาง ของชอง Cell ที่คลิกเลือกไว) การแยก ชอง Cell 1. คลิกชอง cell ที่ไดถูกรวมไว จากนั้นกดปุม

- 46 การจัดการรูปภาพและ MOSImage สามารถเลือกใช Tools ในการจัดการรูปภาพไดแก • ปุม Images บน Toolbar • MOSImage ปุม images บน toolbar การแทรกรูปภาพ 1. กดปุม ที่ TinyMCE Editor จะปรากฏสวนกําหนดคาตาง ๆ ดังรูป

2. ระบุ Image URL เชน http://esanenvi.com/~nitit.j/images/stories/clock.jpg 3. กําหนด Image description (คําอธิบายรูปภาพ) 4. แลวกดปุม การปรับขนาดของรูปภาพ มี 2 วิธี วิธีแรก 1. คลิกที่รูปภาพจะปรากฏจุดสี่เหลี่ยมเล็ก ๆ ตามขอบรูปภาพ

2. ใชเมาสคลิกคางไวแลวลากออกหรือเขา เพื่อปรับขนาดของรูปภาพ วิธีที่สอง 1. คลิกที่รูปภาพ แลวกดปุม ที่ TinyMCE Editor

- 47 -

2. คลิก Tab Appearance แลวกําหนดขนาดของรูปในชอง Dimensions (กวาง x ยาว) มีหนวยเปน pixels (หากไมระบุความกวาง x ยาว รูปจะแสดงตามขนาดของไฟลรปู ) นอกจากนี้ยังสามารถปรับขอความใหลอมรอบรูปภาพในลักษณะตาง ๆ ไดโดยเลือกที่สวนของ เพื่อบันทึก Alignment เมื่อปรับคาตาง ๆ เปนที่เรียบรอยแลวใหกดปุม MOSImage การแทรกรูปภาพ 1. คลิกเมาสเพื่อเลือกตําแหนงที่จะวางรูปภาพภายในกรอบ จากนั้นปรากฏขอความ { mosimage } ภายในกรอบ 2. กดปุม

- 48 3. คลิกที่ Tab Images เพื่อเปดสวนการใชงาน MOSImage บน Panel ทางดานขวา

4. คลิกเลือกไฟลรูปภาพในกรอบ Gallery Images 5. กดปุม จากนั้นจะปรากฏชื่อไฟลที่เลือกมาในกรอบ Content Images หากตองการยกเลิกไฟลที่เลือกมา ใหคลิกไฟลรูปภาพในกรอบ Content Images และกดปุม 6. กดปุม รูปภาพที่ถูก mosimage จะแสดงจํานวนรูปภาพตามจํานวนที่แทรกรูปดวยคําสั่ง แสดงจะถูกนํามาจาก Content Images หากตองการเปลี่ยนลําดับภายใน content image สามารถทําไดโดยการกดปุม และ

- 49 การปรับคาตาง ๆ ของรูปภาพ 1. คลิกชื่อไฟลที่ตองการปรับคาในกรอบ content images 2. กําหนดคาตาง ๆ ไดแก Image Align การจัดวางรูปภาพ (ชิดซาย, ชิดขวา, กึ่งกลาง) Alt Text ขอความที่จะปรากฏเมื่อนําเมาสมาวางบนรูปภาพ border ขนาดของกรอบรูปภาพ 3. กดปุม

- 50 2. HTMLArea3 XTD HTMLArea3 XTD เปน editor ตัวหนึ่งที่ความนิยมและมีความงายในการใชงาน ซึ่ง ความสามารถมาก และใชงานไดอยางสะดวกสบาย การติดตั้ง HTMLArea3 XTD จะเหมือนกับ การตัดตั้ง editor ทั่วไป คือ การ install mambots สมาถทําไดโดย ไปที่ menubar (Installers--> mambots)

จะปรากฏหนานี้

ใหคลิกที่ Browse จะปรากฏหนาจอ ดังนี้

- 51 -

เมื่อทําการคลิก Browse จะขึ้นหนาตางใหเราไปที่ Folder ที่เก็บ File HTMLArea3XTDv11RC1.zip แลวใหคลิกที่ file กด Open

Click ที่ Upload File & Install เพื่อติดตั้ง HTMLArea3XTD หากการติดตั้งไมมีขอผิดพลาดใดๆ จะปรากฏหนานี้

- 52 -

Click ที่ปุม Continue เพื่อเปนการสิ้นสุดการติดตั้ง หลังจากนัน้ เพื่อการใชงาน HTMLArea3XTD เปน editor ของ Joomla จะตองมีการตั้งคา โดยทํา ไดดังนี้ โดยไปที่ menuber (site--> Global Configuration) แลวเลือกไปที่ site

เมื่อไปยังหนาการตั้งคา site แลว ใหคลิกที่ Default WYSIWYG Editor: ใหเลือก HTMLArea3 XTD แลวกด Save ที่ toolber

- 53 -

เมื่อมีการจัดการเนื้อหา ก็จะปรากฏ editor : HTMLArea3 XTD ใหใช