คู่มือพื้นฐานโปรแกรม Adobe Dreamweaver Adobe Dreamweaver เป็นโปรแกรมสาหรับพัฒนาเว็บไซต์ ซึ่งมี คุณสมบัติครอบคลุมตั้งแต่การออกแบบและสร้างเว็บและสร้าง เว็บเพจ,การบริหารจัดการเว็บไซต์ ตลอดไปจนถึงการพัฒนาเว็บแอพ พลิเคชั่นเบื้องต้น โปรแกรมนี้ได้รับความนิยมเป็นอย่างมากเพราะมี คุณสมบัติเด่นคือใช้งานง่าย มีเครื่องมือสำ หรับวางข้อความ ภาพกราฟิก ตาราง แบบฟอร์ม มัลติมิเดีย รวมทั้งองค์ประกอบต่างๆเพื่อโต้ตอบกับผู้ ชมลงบนเว็บเพจได้ง่าย โดยผู้ใช้ไม่จำ เป็นต้องรู้จักภาษา HTML,CSS, JavaScript และภาษาสคริปต์อื่นๆ ดังนั้นจึงเหมาะสำ หรับผู้เริ่มต้นและ ผู้ใช้ทั่วไป นอกจากนี้ยังมีคุณสมบัติขั้นสูงอีกมากมายสาหรับนักพัฒนา เว็บไซต์มืออาชีพด้วยเช่นกัน Dreamweaver เป็นโปรแกรมที่ช่วยให้เขียนเว็บไซต์ได้ง่ายขึ้น แก้ไขได้ง่ายขึ้น และมีเครื่องมืออำ นวยความสะดวกมากมายที่มี ประโยชน์ในการทำ เว็บไซต์
แนะนำ Dreamweaver Dreamweaver เป็นโปรแกรมสำ หรับมืออาชีพที่ใช้ใน การพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยม มาก มีเว็บไซต์ดังๆ มากมายที่ใช้ Dreamweaver เพื่อ พัฒนาเว็บไซต์ เราจะมาดูกันว่าทำ ไม Dreamweaver ถึง เป็นที่นิยมมีผู้ใช้งานกันมากมาย 1. ช่วยให้คุณทำ งานได้เร็วขึ้น นี่คือข้อดีอันดับต้นๆ ของ Dreamweaver เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการ สร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขึ้นมาเพื่อ ให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความ ซึ่ไ
ในกรณีที่เราต้องการเขียน HTML เอง Dreamweaver ก็ เป็นเครื่องมือที่อำ นวยความสะดวกให้เราได้ดีมาก ไม่ เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็ รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น ออกมา ซึ่งทาให้เราทำ งานได้ช้าลง เพราะเราจะต้อง เขียน HTML ไปและดูการแสดงผลผ่าน browser ไป ว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สาหรับ ใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดง ผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเรา ได้เลย โดย Dreamweaver จะทำ การเขียน HTML ให้เราเองเป็น Editor ที่มีประสิทธิภาพตัวหนึ่ง
2.1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเรา และส่งไปแสดงผลที่ server ได้ทันที เพราะDreamwerver จะติดต่อกับ server ให้เราและ แสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและ แก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสาร องไว้ในเครื่องเราตลอดด้วย
2.2 Site map เป็นเครื่องมือที่ช่วยแสดงผล เว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดงให้ เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถ ย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำ การเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือ ที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเรา ตลอด 3. ช่วยให้เราทำ เว็บได้ง่ายขึ้น สาหรับคนที่ไม่เคยทำ เว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรม เดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือน กับการเขียนหนังสือ และสำ หรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำ ให้เรามีความคล่องตัวขึ้นเพราะตอน นี้Dreamwerver มีเครื่องมือมากมายและทำ งานเชื่อมต่อ กับโปรแกรมดังๆ มากมายเช่น Photoshop ,Illustrator, Flash หรือแม้แต่กระทั่งการใช้ใน ลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่า ใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ พิ่ที่ไ
Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการ พัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วย ในการจัดข้อความ, หน้าตาของเว็บเพจ และเครื่องมืออีก มากมาย ในบทความนี้ คงทำ ให้มองภาพ ของDreamwerver ว่าเป็นเครื่องมือที่อำ นวยความสะดวก มากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้น พัฒนาไปมากจากเวอร์ชันแรกๆ ที่ออกมา และช่วยลด เวลาในการพัฒนาเว็บไซต์ลงได้มาก 2. ความต้องการระบบของโปรแกรมสำ หรับ Microsoft Windows 1. หน่วยประมวลผลกลาง (CPU) ความเร็ว 1 GHz ขึ้นไป 2. หน่วยความจำแรม (RAM) 512 MB ขึ้นไป 3. เนื้อที่ว่างของฮาร์ดดิสก์ อย่างน้อย 1 GB ขึ้นไป 4. จอภาพ ความละเอียด 1280 x 800 จุด 5. มีซีดีรอมไดรฟ์ 6. ระบบปฏิบัติการ Window XP หรือสูงกว่า
3. ขั้นตอนการติดตั้งโปรแกรม มีวิธีการดังนี้ 1. เปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6 2. ดับเบิ้ลคลิกที่ไฟล์ Set-up.exe จากนั้นโปรแกรมอ้าง มีการแจ้งเตือนให้เรา restart เราเลือก Ignore เพื่อ ดำ เนินการต่อ ดังรูป
3. โปรแกรมจะทำ การตรวจสอบก่อนทำ การติดตั้ง โปรแกรม 4. เมื่อโปรแกรมตรวจสอบเสร็จแล้ว จะเข้าสู่หน้าจอข้อ กำ หนดในการติดตั้งโปรแกรม ให้เราคลิก Accept
5. กรอก Serial Number แล้วคลิกที่ปุ่ม Next
6. จะเข้าสู่หน้า Option ของโปรแกรม ให้เลือก Installs
7. รอให้โปรแกรมติดตั้งจนเสร็จ
8. เมื่อติดตั้งเสร็จจะปรากฏหน้าจอดังภาพ ให้เราคลิก Close
4. ขั้นตอนการเปิดโปรแกรม Adobe Dreamweaver CS6 1. สำ หรับ Windows7 ทำ การเปิดโปรแกรม Dreamweaver โดยเข้าไปที่ เมนู Start > All Programs > Adobe Dreamweaver CS6
2.สำ หรับ Windows8 ทำ การเปิดโปรแกรม Dreamweaver โดยเข้าไปที่ เมนู Start > Apps > Adobe Dreamweaver CS6
3.เมื่อเปิดโปรแกรมครั้งแรก จะพบหน้าจอดังภาพ ให้ คลิก Select All >> OK
4.จากนั้นจะเข้าสู่หน้าจอ Welcome Screen ดังรูป Welcome Screen เป็นเครื่องมือสำ หรับช่วยเลือก ขั้นตอนเริ่มต้นในการใช้งานโปรแกรมโดยตัวเลือก จะแบ่งออกเป็นกลุ่มๆ ดังภาพ ที่ไที่
5. ส่วนประกอบของหน้าจอโปรแกรม หมายเลขที่ 1 Open a Recent Item เปิดไฟล์ที่ เคยใช้ โดยคลิกเลือกจากรายชื่อที่แสดงอยู่ (เรียง ลำดับจากที่เคยเปิดหลังสุดเป็นต้นไปหรือคลิก Open เพื่อเปิดไฟล์อื่นๆ) หมายเลขที่ 2 Create New สร้างไฟล์ใหม่ โดย ถ้าคลิก HTML จะเป็นการสร้างเว็บเพจพื้นฐานแต่ถ้า คลิกหัวข้ออื่นจะเป็นการสร้างเว็บเพจหรือไฟล์ตาม ชนิดนั้นๆ หมายเลขที่ 3 Top Features (videos) เป็นเส้น ทางลัดสำ หรับเข้าดูรายละเอียดและเทคนิคในการ ใช้งานต่าง ๆ ของโปรแกรมผ่านทางเว็บไซต์ของ Adobe หมายเลขที่ 4 เปิดดูคำ แนะนำ การใช้โปรแกรม หมายเลขที่ 5 ดาวน์โหลดโปรแกรมหรือดูข้อมูลบน เว็บไซต์ของ Adobe หมายเลขที่ 6 คลิกออปชั่นนี้หากไม่ต้องการแสดง Welcome Screen อีกในครั้งต่อไป
โปรแกรม Dreamweaver ประกอบไปด้วยส่วนต่าง ๆ ดังนี้ 1. แถบเมนูหลัก (Menu bar) เป็นแถบรวมรวมคำ สั่ง ทั้งหมดของโปรแกรม โดยแบ่งคำ สั่งทั้งหมดออกเป็น หมวดหมู่ตามลักษณะของการใช้งาน 2. แถบเครื่องมือ (Insert Bar) เป็นแหล่งรวมเครื่อง มือซึ่งใช้ในการวางออบเจ็กต์ชนิดต่าง ๆ ลงบนหน้า เว็บเพจ เช่น ข้อความ รูปภาพ ลิงค์ รูปเคลื่อนไหว เป็นต้น โดยจะแบ่งเป็นกลุ่มคำ สั่งเพื่อให้ใช้งานได้ สะดวก ซึ่งจะประกอบด้วยกลุ่มคำ สั่งดังนี้ ที่
(หรือเลเยอร์) Common ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟล์มัลติมีเดีย เป็นต้น Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของ เว็บเพจ เช่น ตาราง เฟรม และ AP element Forms ใช้วางออบเจ็กต์ที่ใช้ในการสร้างแบบฟอร์ม รับข้อมูล เช่น ช่องรับข้อความ ปุ่มตัวเลือกต่าง ๆ เป็นต้น Data ใช้วางคำ สั่งที่ใช้การจัดการฐานข้อมูล และดึง ข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ Spry ใช้วางออบเจ็กต์ที่ใช้เทคโนโลยีของ Ajax jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์ มือถือและแท็บเล็ตโดยใช้เทคโนโลยีแบบ jQuery InContext Edting ใช้สร้างออบเจ็กต์ที่ช่วยอำ นวย ความสะดวกให้ผู้ใช้งานสามารถแก้ไขเว็บเพจได้ Text ใช้สำ หรับจัดปรับแต่งหรือจัดรูปแบบของตัว อักษรและข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัว หน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เป็นต้น ที่พิ่สั่ที่
3.แถบ Document Toolbar ประกอบไปด้วยปุ่มและ ป๊อปอัพเมนูที่ใช้กำ หนดรูปแบบ มุมมองของ Document Window ที่เรากำ ลังทำ งานอยู่และ คำ สั่งต่างๆที่ใช้ทำ งานกับ Document Window อย่างเช่น การแสดงเว็บเพจที่สร้างขึ้นในเว็บบราวเซอร์หรือ การกำ หนดออปชั่นของ Document Window เป็นต้น Favorites เป็นกลุ่มที่สามารถเพิ่มปุ่มคำ สั่งที่ใช้บ่อย จากกลุ่มอื่น ๆ เข้ามาเก็บไว้ใช้งานเอง เพื่อความ สะดวกในการใช้งาน
ปุ่ม หน้าที่ code แสดงเว็บเพจในมุมมองโค้ด split แสดงเว็บเพจในมุมมองโค้ดและ ออกแบบ Design แสดงเว็บเพจในมุมมอง ออกแบบ Live แสดงผลโค้ด (ทำ งานร่วมกับมุม มอง Live View) Live code ตรวจสอบความถูกต้องในการ แสดงผลบนบราวเซอร์ที่เลือก Inspect ตรวจสอบความถูกต้องของการใช้ สไตล์ CSS ในส่วนต่าง ๆ บน เว็บเพจโดยใช้ร่วมกับพาเนล CSS Styles และการแสดงผล ในรูปมุมมอง Live View แสดงเมนูสำ หรับเลือกเปิด บราวเซอร์เพื่อทดสอบเว็บเพจ (คีย์ลัดF12) แสดงเมนูซึ่งประกอบด้วยคาสั่ง ไ
4.พื้นที่สร้างงาน (Document Windows) คือ ส่วนที่ ใช้สาหรับใส่เนื้อหาและจัดองค์ประกอบของเว็บเพจ วิธี ใช้งานวินโดว์นี้จะคล้ายกับที่คุณใช้โปรแกรมเวิร์ด โปรเซสเซอร์ทั่วไป เช่น พิมพ์ข้อความ วางภาพกราฟิก นื้จัดการไฟล์ เช่น อัพโหลด (Put) หรือดาวน์โหลด (Get) ตรวจสอบความถูกต้องในการ แสดงผลบนบราวเซอร์ที่เลือก แสดงเมนูสำ หรับเปิด/ปิด ลักษณะพิเศษของแท็กหรือคำ สั่ง บางอย่าง เช่น ตาราง,เฟรม และ CSS เพื่อช่วยให้การแก้ไข เว็บเพจสะดวกขึ้น ปรับปรุงการแสดงผลของเว็บเพจ ในมุมมองออกแบบ หลังจากที่ แก้ไขคาสั่งในมุมมองโค้ด (คีย์ ลัด F5) ใช้กำ หนดชื่อหรือคำ อธิบาย เว็บเพจ ซึ่งจะถูกนำ ไปแสดงที่ ไตเติลบาร์ของบราวเซอร์
และสร้างตารางข้อมูลโดยเนื้อหาต่างๆจะแสดงออกมา คล้ายกับที่ปรากฏบนบราวเซอร์ ซึ่งสามารถเลือกเปิด พื้นที่สร้างงานได้ด้วยกัน 4 มุมมอง ในมุมมองนี้ Document Window จะแสดงเว็บเพจในรูป ของชุดคำ สั่งภาษา HTML ที่ถูกสร้างขึ้นอัตโนมัติโดย Dreamweaver หรือเป็นคำ สั่งที่คุณเขียนเพิ่มเข้าไปเอง นอกจากนี้ก็อาจจะมีคาสั่งสไตล์ชีต (CSS) และภาษา สคริปต์ (script) ต่างๆ ด้วยคุณสามารถตรวจสอบและ แก้ไขคาสั่งเหล่านี้ได้ตามต้องการ ซึ่งการแก้ไขจะส่งผลก ลับไปยังมุมมองออกแบบโดยอัตโนมัติ มุมมองโค้ด (Code View)
มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) ในมุมมองนี้ Document Window จะแสดงเว็บเพจทั้งใน รูปแบบที่ปรากฏบนบราวเซอร์ และรูปแบบคำ สั่งภาษา HTML พร้อมๆ กันดังรูป เพื่อใช้ในการออกแบบและ ตรวจสอบแก้ไขคำ สั่งไปในขณะเดียวกัน คุณสามารถ ปรับขนาดพื้นที่ของแต่ละส่วนได้โดยการคลิกแล้วลากที่ เส้นแบ่ง ระหว่างทั้ง 2 ส่วน มุมมองออกแบบ (Design View)
ในมุมมองนี้ Document Window จะแสดงเว็บเพจทั้งใน รูปของหน้าตาของเว็บเพจเหมือนกับที่เราเห็นในเว็บ บราวเซอร์ โดยที่เราสามารถแก้ไขเนื้อหาต่างๆ บน เอกสารด้วย ดังรูป ในมุมมองนี้ Document Window จะแสดงเว็บเพจ เหมือนกับการรันหน้าเว็บบนบราวเซอร์ สามารถแสดง ผลในส่วนของ JavaScript และ Plug in ต่างๆ ซึ่งถือ เป็นมุมมองที่เพิ่มขึ้นมาเพื่ออำ นวยความสะดวกต่อผู้จัดทา เว็บไซต์ในการตรวจเช็คองค์ประกอบและลิงค์ต่างๆได้ มุมมองแสดงหน้าเว็บเหมือนดูบนบราวเซอร์ (Live View)
อย่างรวดเร็ว ทำ ให้ประหยัดเวลากว่าการแสดงผลผ่านทาง เว็บบราวเซอร์โดยตรง ในมุมมองนี้ Document Window จะแสดงผลโค้ดร่วมกับ มุมมอง Live View (จะแสดงมุมมอง Live Code ได้ก็ต่อ เมื่ออยู่ที่มุมมอง Live View เท่านั้น) เป็นมุมมองที่เสมือน การใช้คำ สั่ง View > Source จากบราวเซอร์ ซึ่งใช้ตรวจ ดูโค้ดในตำ แหน่งต่าง ๆ เท่านั้น ไม่สามารถแก้ไขโค้ด ในมุมมองนี้ได้ มุมมองแสดงผลโค้ดหน้าเว็บ (Live Code)
ในมุมมองนี้จะแสดงผลร่วมกับมุมมอง Live View ซึ่งเป็น มุมมองที่ใช้ตรวจดูการจัดรูปแบบด้วยคำ สั่ง CSS ใน ตำ แหน่งที่เมาส์เลื่อนผ่าน โดยสามารถดูได้จากพาเนล CSS Styles เพื่อให้เลือกใช้หรือยกเลิกคำ สั่งที่เคย กำ หนดเอาไว้ในมุมมองนี้ได้ มุมมองแสดงผลหน้าเว็บที่จัดรูปแบบด้วย CSS (Inspect)
5.Tag Selector อยู่ใน Status Bar ที่อยู่ทางด้านล่าง ของ Document Window เมื่อเราคลิกวัตถุในเอกสารจะ ปรากฏ Tag Select ใน Status Bar ขึ้นมา เมื่อเราคลิก เลือก Tag Selector แล้วแท็กต่างๆ ที่ถูกล้อมด้วยแท็กที่ เราเลือกจะถูกเลือกด้วย 6.หน้าต่าง Properties Inspector เป็นหน้าต่างเล็ก ๆ ที่อยู่ด้านล่างสุดของหน้าจอโปรแกรม เป็นส่วนที่ใช้ งานมากที่สุด เนื่องจากเป็นส่วนที่ใช้กำ หนดคุณสมบัติ ที่
สำ คัญ ๆ ของออบเจ็กต์ที่วางในหน้าเว็บเพจ เช่น ตำ แหน่ง ขนาด และสี 7.กลุ่มพาเนลต่างๆ (Panel Groups) พาเนลเป็นกรอบเล็ก ๆ ที่รวบรวมเครื่องมือต่าง ๆ สำ หรับใช้ทำ งานเฉพาะเรื่องไว้ เช่น พาเนล CSS Styles ใช้จัดการกับสไตล์ CSS และพาเนล Files ใช้ จัดการกับไฟล์และโฟลเดอร์ภายในเว็บไซต์ใน Dreamweaver ประกอบไปด้วยพาเนลจำ นวนมาก ซึ่ง สามารถเปิด/ปิดได้โดยเลือกคาสั่ง Window แล้วเลือกชื่อ พาเนลนั้น หรือกดคีย์ลัดที่แสดงด้านหลังชื่อพาเนลดังรูป
ไม้บรรทัด (Ruler)
ไม้บรรทัดจะปรากฏที่ด้านบนและด้านซ้ายของวินโดว์ Document เพื่อให้สาหรับช่วยกำ หนดตำ แหน่งหรือ ขนาดขององค์ประกอบต่าง ๆ ที่วางบนเว็บเพจ สาหรับ การจัดการต่าง ๆ กับไม้บรรทัดจะทำ ได้ดังนี้ ซ่อน/แสดงไม้บรรทัด เลือกคาสั่ง View > Rulers > Show (คียลัด Ctrl +Alt +R) ย้ายตำ แหน่ง 0,0ให้คลิกลากรูป ไปวางตำ แหน่งใหม่ ย้ายตำ แหน่ง 0,0 กลับมาที่มุมซ้ายบนสุดให้ดับเบิล คลิกที่ หรือคลิกขวาบน ไม้บรรทัดแล้วคลิกเลือกคาสั่ง Reset Origin เปลี่ยนหน่วยวัดบนไม้บรรทัดให้คลิกขวาบน ไม้บรรทัด แล้วเลือกหน่วย ซึ่งมีดังนี้ Pixels พิกเซล Inches นิ้ว Centimeters เซนติเมตร
. เส้นกริด (Grid) เป็นอีกเครื่องมือหนึ่งที่ใช้ช่วยกำ หนดตำ แหน่งและขนาด ของออบเจ็คบนเว็บเพจ โดยมีลักษณะเป็นช่องตารางที่มี ระยะห่างเท่า ๆ กันทั้งแนวตั้งและแนวนอน สามารถ กำ หนดสีเส้นกริด และกำ หนดให้ออบเจ็คยึดจับ (snap to grid) กับเส้น เพื่อให้สามารถจัดออบเจ็คต่าง ๆ อยู่ ในแนวเดียวกันได้ง่าย ซ่อน/แสดงเส้นกริดทำ ได้โดยเลือกคำ สั่ง View > Grid> Show Grid (คีย์ลัด Ctrl Alt G) กำ หนดให้ออบเจ็คยึดจับเส้นกริดเลือกคำ สั่งView > Grid > Snap To Grid สั่
8. เส้นไกด์ (Guide) เป็นอีกเครื่องมือหนึ่งที่ใช้กำ หนดตำ แหน่งและขนาดขอ งออบเจ็คบนเว็บเพจ เพื่อให้ได้ตามแนวที่ต้องการอย่าง เที่ยงตรง การสร้างเส้นไกด์ทeได้โดยคลิกลากเมาส์จาก ไม้บรรทัดด้านใดด้านหนึ่งออกมาปล่อยบนเว็บเพจตรง จุดที่ต้องการ ปรับแต่งคุณสมบัติของเส้นกริดเลือกคำ สั่ง View > Grid > Grid Setting ซ่อน/แสดงเส้นไกด์ทำ ได้โดยเลือกคำ สั่ง View > Guides >Show Guides ย้ายเส้นไกด์ คลิกลากเส้นไกด์นั้นไปยังตำ แหน่งใหม่ ไไไ
9. การกำ หนด Font การกำ หนดค่าเบื้องต้นสำ หรับการสร้างเว็บเพจ ก็คือ การ กำ หนดค่าตัวอักษรให้เว็บบราวเซอร์สามารถแสดงผลได้ อย่างถูกต้อง และเหมาะสม มีวิธีการดังนี้ ลบเส้นไกด์ คลิกลากเส้นไกด์ออกไปปล่อยนอกวินโดว์ Document ลบเส้นไกด์ทั้งหมด เลือกคำ สั่ง View > Guides > clear Guides ล็อคเส้นไกด์ไม่ให้ถูกย้ายหรือลบ เลือกคำ สั่ง View > Guides > Lock Guides
2. หลังจากนั้นให้เลือก Category >> Fonts และ Fonts >> ไทย หรือ Unicode (รูปแบบตัวอักษาที่ รองรับหลายภาษา และภาษาไทยด้วย) ต่อไปการกำ หนด Proportional font และ Code view ให้เลือก Font ที่ เราต้องการ เช่น Tahoha, Angsana New เป็นต้น เพื่อ เป็นการกำ หนดค่า Font เริ่มต้น ดังรูป 1. ไปที่เมนู Edit >> Preferences จะได้หน้าต่างการ กำ หนดค่า ดังรูป
3. การกำ หนดค่า Default ให้กับเอกสาร สามารถทำ ได้ โดย Category >> New Document และ Default encoding>> ไทย (Windows) หรือ Unicode (UTF-8)