หน่�วยที่�� 8 สร้�างแสดงเน่��อหาบที่ความ ปรั�บแต่�งและเล�อกใช้�งาน Editor

เอดิ�เต่อรั� Editor เป�นปล��กอ�นเสรั�มหรั�อเครั��องม�อช้�วยในการัเขี!ยนและปรั�บแต่�ง

ขี�อความที่!�ใช้�เขี!ยนเน�#อหาบที่ความต่�างๆ ซึ่&�ง เอดิ�เต่อรั�ที่!�ต่�ดิมาพรั�อมก�บ Joomla และพรั�อม

ใช้�งานจะเป�นปล��กอ�นช้��อ TinyMCE แบบAdvanced ดิ�งรั)ป

ส*าหรั�บขี�#นต่อนการัเพ��มเครั��องม�อใน เอดิ�เต่อรั� ที่*าไดิ�ดิ�งน!#

1. คล�กเมน) Extensions > Plug-in Manager2. คล�กเล�อกช้น�ดิขีองปล��กอ�นเป�น editors ในช้�อง Select Type3. คล�กเล�อก Editor > TinyMCE เพ��อแก�ไขีค�าค,ณสมบ�ต่�ขีอง

เอดิ�เต่อรั� TinyMCE

4. ที่!� Functionally ให�คล�กเล�อกเอดิ�เต่อรั�แบบ Extended เพ��อเพ��มเครั��องม�อการัที่*างานในเอดิ�เต่อรั�5. คล�กป,.ม Save & Close บนแถบเครั��องม�อ

จากน�#นเอดิ�เต่อรั�ปล��กอ�นช้��อ TinyMCE จะเปล!�ยนเป�นExtended ดิ�งรั)ป

ส�วนปรัะกอบขีองเอดิ�เต่อรั� เอดิ�เต่อรั�ที่!�ใช้�ส*าหรั�บเขี!ยนขี�อความน�#น จะแบ�งพ�#นที่!�การัใช้�

งานออกเป�น 3 ส�วนหล�กๆ ดิ�วยก�นดิ�งน!# ส�วนที่!� 1 พ�#นที่!�แสดิงป,.มเครั��องม�อส*าหรั�บจ�ดิการัรั)ปแบบขี�อความ ส�วนที่!� 2 พ�#นที่!�ส*าหรั�บเขี!ยนขี�อความหรั�อแที่รักไฟล�ม!เดิ!ยต่�างๆ ส�วนที่!� 3 ป,.มเครั��องม�อที่างล�ดิ ปรัะกอบดิ�วย- ป,.ม Article ส*าหรั�บสรั�างล�งค�เน�#อหาบที่ความ- ป,.ม Image ส*าหรั�บแที่รักรั)ปภาพปรัะกอบ- ป,.ม Page Break ส*าหรั�บแบ�งขี�อความออกเป�นหลายหน�า- ป,.ม Read More ส*าหรั�บแบ�งขี�อความบางส�วนแล�วแสดิง

ล�#งค�Read More

- ป,.ม Toggle Editor ส*าหรั�บแที่รักค*าส��ง HTML

ก2อบป3# ขีอความจากโปรัแกรัม Wordเน�อหาเอกสารับางส�วนอาจจะใช้�ว�ธี!ก2อบป3# จาก

โปรัแกรัม Word มาวางก6ไดิ� เพ��อปรัะหย�ดิเวลาในการัพ�มพ�ซึ่&�งการัก2อบป3# น� #นที่*าไดิ�ดิ�งน!#1. เล�อกบรั�เวณที่!�ต่�องการัก2อบป3# แล�วกดิค!ย� Ctrl + C เพ��อกดิก2อบป3#

แที่รักรั)ปภาพไม�ช้�ดิก�บขี�อความ หล�งจากแที่รักรั)ปภาพเพ��อปรัะกอบบที่ความแล�ว เรัา

สามารัถจ�ดิการัก�บรั)ปภาพน�#นไดิ� ไม�ว�าจะเป�นใส�กรัอบให�ภาพ, จ�ดิวางภาพและขี�อความ โดิยม!ขี�#นต่อนดิ�งน!#1. คล�กรั)ปภาพที่!� ต่�องการัปรั�บแต่�ง2. คล�กป,.ม insert /edit image

3. ที่!�หน�าต่�าง Insert/edit Image ให�คล�กแที่6บ Appearance แล�วเล�อกรั)ปแบบการัจ�ดิวางรั)ปภาพที่!� Alignment ซึ่&�ง ม!ให�

เล�อกหลายรั)ปแบบ4. เม��อเสรั6จแล�วให�คล�กป,.ม Update

ปรั�บขีนาดิภาพการัปรั�บขีนาดิภาพที่!�แที่รักในบที่ความให�ม!ขีนาดิที่!�

เหมาะสมก�บเน�#อหา จะที่*าให�บที่ความน�าสนใจมากขี&#นซึ่&�งภาพที่!�ปรั�บให�ใหญ่�ขี&#นความคมช้�ดิจะลดิลงไป

ปรั�บความส)งขีองแถว ในกรัณ!ที่!�ความส)งขีองแถวช้�ดิหรั�อแคบจนเก�นไป เรัา

สามารัถปรั�บความส)งขีองแต่�ล�ะแถวให�ห�างก�นไดิ� โดิยม!ขี�#นต่อนดิ�งน!#

1. เล�อกแถวที่!�ต่�องการัปรั�บความส)ง2. คล�กป,.ม Table row properties

3. ที่!�แที่6บ General ในช้�อง Height ให�รัะบ,ความส)งขีองแถวที่!�ต่�องการั4. ที่!�ช้�องเหน�อป,.ม Update ให�เล�อกแถวที่!�ต่�องการัปรั�บความส)ง5. คล�กป,.ม Update

จากน�#นแถวที่!�เล�อกจะถ)กปรั�บความส)ง ดิ�งภาพ

ใส�ล�งค�ดิาวน�โหลดิไฟล�ส*าหรั�บการัสรั�างล�งค�เพ��อดิาวน�โหลดิไฟล�เอกสารั

ต่�างๆ สามารัถที่*าไดิ�เช้�นเดิ!ยวก�บการัใส�ล�งค� URL ดิ�งน!#1. เล�อกขี�อความรั)ปภาพที่!�ต่�องการัสรั�างเป�นล�งค�2. คล�กป,.ม Insret/edit link

3. จากน�#นจะแสดิงไดิอะล2อกบ2อกช้� Insret/edit link ที่!�แถบGrnaral ให�ใส� URL ในช้�อง Link URL ซึ่&�ง URL ในที่!�น!#ก6ค�อ พาธีที่!�เก6บขี�อม)ล4. เล�อกรั)ปแบบการัเป8ดิเพจปลายที่าง ในช้�อง Target5. ใส�ขี�อความแสดิงเม��อคล�กล�งค� ในช้�อง Title6. คล�กป,.ม Insert

ใส�ไฟล� Flash ลงในบที่ความหากต่�องการัเพ��มความน�าสนใจให�ก�บบที่ความดิ�วย

การัใส�ไฟล� Flash ปรัะกอบดิ�วยเน�#อหาบที่ความ ก6สามารัถ ที่*าไดิ�โดิยเรั��มต่�#งแต่�อ�พโหลดิไฟล� Flash ไปไว�ที่!�โฟลเดิอรั�

images ก�อน จากน�#นที่*าต่ามขี�#นต่อนดิ�งน!#1. วางเคอรั�เซึ่อรั�ต่รังต่*าแหน�งที่!�ต่�องการัแที่รัก2. 2. คล�กป,.ม Insert/edit embedded code บนเอดิ�เต่อรั�

3. ที่!�เก6บ General ในช้�อง Type ให�คล�กเล�อกแบบFlash4. ในช้�อง File/URL ให�รัะบ,พาธีที่!�เก6บไฟล� Flash

5. ที่!�เก6บ Advanced ให�ก*าหนดิรัายละเอ!ยดิเพ��มเต่อมดิ�งน!#- Auto play ก*าหนดิให�เล�นที่�นที่!โดิยอ�ต่โนม�ต่�- Loop ก*าหนดิให�เล�นซึ่*#า- Show menu ซึ่�อน/ แสดิง รัายการัค*าส��งต่�างๆ

6. คล�กป,.ม Insert

7. ในเอดิ�เต่อรั�จะปรัากฏกรัอบส!เหล�องขี&#น จากน�#นให�คล�กป,.มSave & Close บนแถบเครั��องม�อ

เม��อที่ดิลองเรั!ยกแสดิงผลหน�าเว6บเพจ จะไดิ�ดิ�งรั)ป