บทความ บทความ ทิปการใช้งาน Homesite 5.2 เรียบเรียงใหม่โดย พรชัย กำเหนิดอุย

ในการเขียนเว็บเพจโดยโปรแกรมเอดิเตอร์มีประโยชน์มากมายหลายอย่างที่เป็นประโยชน์กับการใช้คอมพิวเตอร์ อย่างที่ผมยกตัวอย่างมานี้




ในการสร้างเว็บเพจนั้นคุณจะสร้างเว็บเพจหรือพัฒนาแอพพลิเคชันบนเว็บด้วยโปรแกรมอะไรก็ได้ แต่ที่แนะนำโปรแกรมเอดิเตอร์นี้ก็เพราะสามารถเปิด และแก้ไขไฟล์ต่างได้มากมาย อาทิ HTML, JAVA SCRIP, JAVA, WML, PHP, ASP ,JSP เป็นต้น และมีเครื่องมือที่สนับสนุนการเขียนโปรแกรม เช่น การแสดงหมายเลข บรรทัด, สี, ตรวจสอบแทกซ์, การแสดงแทกซ์อัตโนมัติ เป็นต้น (ดูรูปที่ 1)



รูปที่ 1

กำหนดการพิมพ์ และแสดงผลภาษาไทย

นี่เป็นสิ่งแรกที่ต้องกระทำก่อนการใช้งาน หากคุณต้องการจะให้เว็บบราวเซอร์แสดงภาษาไทย และแน่นอนว่าจะต้องพิมพ์ข้อความภาษาไทยลงไปด้วยโดยทำตามขั้นตอนดังนี้ คลิ้กที่เมนูคำสั่ง Options Settings... หรือกดแป้น F8 Editor จากนั้นในหน้าต่างด้านขวาจะแสดงแถบข้อมูล Editor ที่บอกว่าตอนนี้คุณกำหนดฟอนต์ด้วยฟอนต์อะไร ให้คลิ้กเลือก Font MS Sans Serif และ Charset เป็น Default จากนั้นก็เลือกกำหนดสีและขนาดตามต้องการ กดคลิ้กที่ปุ่ม OK (ดูรูปที่ 2)



รูปที่ 2

การใช้งานคีย์บอร์ดชอร์ตคัต

โดยปกติแล้วการทำงานของชอร์ต คัตวินโดวส์ก็สามารถใช้แป้น Ctrl+Z, Ctrl+X, และ Ctrl+C ได้เช่นกัน แต่หากต้องการใส่แทกซ์ หรือ ลงไปในเอกสาร HTML เช่น กดแป้น Shift+Ctrl+P จะได้แทกซ์คำสั่ง หรือกดแป้น Shift+Ctrl+Enter จะได้แทกซ์คำสั่ง แต่ใน HomeSite 4.0 ขึ้นไปคุณก็สามารถกำหนดคีย์บอร์ดชอร์ตคัตได้โดยเลือกเมนูคำสั่ง Options Customize แล้วคลิ้กเลือกที่แถบ Keyboard Shortcuts เพื่อให้คุณสร้างชอร์ตคัตได้ตามต้องการ (ตามตาราง)

ชอร์ตคัต สิ่งที่เกิดขึ้น
Shift+Ctrl+P แทรกแทกซ์

Shift+Ctrl+B แทรกแทกซ์
ในบรรทัดเดียวกัน
Ctrl+Enter แทรกแทกซ์
แล้วขึ้นบรรทัดใหม่
Shift+Ctrl+M แทรกแทกซ์ คอมเมนต์
Ctrl+M ค้นหาแทกซ์ที่เหมือนกัน
Ctrl+Y ลบบรรทัดปัจจุบัน
Ctrl+DblClick เลือกแทกซ์ปัจจุบัน
Shift+Ctrl+R เปิดหน้าต่าง Extended Replace
Ctrl+Shift+DblClick เลือกตำแหน่งเริ่มต้นและสิ้นสุดของข้อมูล
F12 พรีวิวบราวเซอร์

สนับสนุนการลาก และใส่รูปภาพ

การใช้งานหน้าต่าง HomeSite resource เพื่อนำรูปภาพจากหน้าต่างดังกล่าวมาใช้งาน ด้วยการลากและวางไฟล์รูปภาพลงไปยังตำแหน่งที่ต้องการ โดยจะนำเอาความกว้างและสูงของรูปภาพนั้นมาแสดงบนเพจ HTML เพื่อช่วยให้ทำงานได้เร็วขึ้น ถ้าเราลากรูปภาพจากหน้าต่าง resource ไปยังเอกสาร HTML จะได้แทกซ์ IMG และแสดงค่าแอตทริ-บิวต์ความกว้างและยาวของรูปภาพ ในแทกซ์ ALT=”” และ BORDER=0 ซึ่งคำสั่ง ALT จะแสดงข้อความเมื่อนำเมาส์ไปวางเหนือรูปภาพ หากยังไม่ได้ทำการบันทึกไฟล์ แล้วทำการลากและวางไฟล์รูปภาพลงไป โปรแกรมจะเตือนว่าควรมีการบันทึกไฟล์ก่อน (ดูรูปที่ 3)



รูปที่ 3

ตรวจสอบเวลาในการดาวน์โหลดเพจ

เมื่อสร้างเว็บเพจขึ้นมาแน่นอนว่าต้องทดลองดูว่า ใช้ เวลาในการดาวน์โหลดนานเท่าใด ไม่ว่าผู้เปิดอ่านเพจจะใช้โมเด็มที่มีความเร็ว 28.8 หรือ 64 kbps. เป็นต้น ให้คลิ้กไปที่เมนูคำสั่ง Tools Document Weight จะปรากฏหน้าต่าง Document Weight แสดงไฟล์เอกสาร ขนาดไฟล์ จำนวนไฟล์ทั้งหมดและเวลาที่ใช้ในการดาวน์โหลด

กำหนดสีให้คำสั่ง

การกำหนดสีให้กับแทกซ์นั้นจะมีข้อดีตรงคุณจะสามารถเปิดอ่าน ค้นหา คำสั่งต่างๆได้สะดวกขึ้น ยิ่งเวลาค้นหาบั๊กในโปรแกรมก็สามารถทำได้ง่าย เช่น หากคำสั่งในการสร้างตารางเป็นสีเขียว คุณก็สามารถเลื่อนสกรอลล์หาคำสั่งดังกล่าวได้ทันที โดยทำตามขั้นตอนดังนี้
ไปคลิ้กที่เมนูคำสั่ง Options/Settings... คลิ้กที่รายการ Editor Color Coding จากนั้นเลือกชนิดของ Scheme ว่าเป็นไฟล์ประเภทใด แล้วไปคลิ้กที่ปุ่ม Edit Scheme... จะปรากฏหน้าต่างขึ้นมา ให้คุณได้กำหนดรูปแบบของการแสดงสี ข้อความ ตัวเอียง เมื่อกำหนดค่าเสร็จแล้วแล้วคลิ้กปุ่ม OK เมื่อกลับมาที่หน้าต่างหลัก จะแสดงผลทันที และถ้าคุณพิมพ์โค้ดลงไปก็จะแสดงสี รูปแบบฟอนต์ตามที่กำหนดไว้ทันที



รูปที่ 4

การใช้ CodeSweeper

ฟีเจอร์จะมีในเวอร์ชัน HomeSite 4.0 ขึ้นไปที่เพิ่มการวิวในแบบ Design View แต่มีคอมโพเนนต์ของ Wysiwyg ซึ่งผู้ใช้งานต้องโค้ด โดยหากต้องการใช้งาน Design View คุณต้องให้ HomeSite เรียกใช้งานส่วนนี้ขึ้นมา ซึ่งการเรียกใช้งานฟังก์ชันก็คือไปคลิ้กเลือกที่เมนูคำสั่ง Options/CodeSweeper Settings แล้วเลือก Apply Current CodeSweeper when Switching from Design View. CodeSweeper เป็นการปรับแต่งค่าสำหรับ HTML/CFML และ HTML เท่านั้น คุณสามารถเพิ่มการปรับแต่งแบบนี้ไปใช้งานยังโปรเจ็กต์ต่างๆ ได้ ซึ่งต้องติดตั้ง My CodeSweeper (เพื่อใช้ในการทดสอบ) โดยคุณสามารถแก้ไข CodeSweeper หรือคอนฟิกด้วยขั้นตอนดังนี้
ไปที่เมนู Options Settings จะปรากฏหน้าต่าง Settings ให้ไปคลิ้กที่รายการ CodeSweeper ภายใต้ Current CodeSweeper ให้เลือก My CodeSweeper หรือคลิ้กที่ Add จะได้ชื่อ CodeSweeper ขึ้นมา ใต้ CodeSweeper Settings คุณสามารถแก้ไขฟีเจอร์เพื่อนำไปใช้งานกับโค้ดทั้งหมด เช่น ไม่ว่าแทกซ์นั้นจะพิมพ์ด้วยอักษรตัวเล็ก, ตัวใหญ่ หรือทุกกรณี ในหน้าต่างทางด้านขวาคุณสามารถเลือกแก้ไขค่า CodeSweeper ได้ตามต้องการ โดยคลิ้กที่ปุ่ม Edit Profile ในกรณีที่ต้องการให้ลากคลุมยังแทกซ์ที่ต้องการ ให้คลิ้กที่ปุ่ม Code Sweeper หรือกดแป้น Ctrl+Alt+F จากนั้น CodeSweeper จะเริ่มทำงานทันที

จัดตำแหน่งโค้ดให้อยู่ทางซ้ายมือ

ในการเขียนโค้ดบางครั้งอาจมีการจัดตำแหน่งหรือไม่ได้จัดตำแหน่งตามต้องการ หรือบางคนอาจชอบแบบซิกแซ็ก ก็ทดลองใช้งานคำสั่ง Unindent นี้ดู
เลือกโค้ดที่ต้องการจะให้ชิดซ้าย แล้วคลิ้กเลือกที่เมนูคำสั่ง Edit Unindent (หรือกดแป้น Shift+Ctrl+,) โค้ดดังกล่าวจะถูกเลื่อนตำแหน่งมาชิดทางด้านซ้ายทันที (ตัวอย่างผลการใช้งาน Unindent) โปรแกรมจะทำงานด้วยคำสั่ง unindent โดยแบ่งระดับโค้ดออกเป็น 3 ระดับ (ดูรูปที่ 5)



รูปที่ 5

การแสดงหมายเลขบรรทัด

ในการเขียนโปรแกรมหมายเลขของบรรทัดนับว่ามีความสำคัญมาก หากต้องการไปแก้ไขที่บรรทัด 120 เป็นต้น ใน HomeSite นั้น เราสามารถยกเลิก หรือแสดงหมายเลขของบรรทัดได้ โดยการคลิ้กที่ปุ่ม Show line number in gutter หมายเลขของบรรทัดจะแสดงขึ้นมาทันที หากคลิ้กอีกครั้งหมายเลขดังกล่าวจะหายไป

การเลือกแทกซ์ตามต้องการ

มันคงไม่ผิดที่คุณจะพิมพ์แทกซ์ด้วยข้อความแบบใด แต่คุณสามารถเขียนข้อความของแทกซ์ในแบบ นี้ได้ โดยไม่สนใจข้อความว่าเป็นตัวเล็กหรือตัวใหญ่หรือปนกันก็ได้ ซึ่งถ้าต้องการพิมพ์โค้ดผสมกัน ดังนั้นให้ไปใช้การแปลงแทกซ์ โดยไปที่เมนูคำสั่ง Edit Convert Tag Case... แล้วเลือกว่าจะแปลง Convert All Tags to UPPERCASE หรือ Convert All Tags to Lowercase จากนั้นกดคลิ้กปุ่ม OK

แถบหน้าต่างพรีวิว หรือ Browser

การสร้างเว็บเพจนั้นต้องคำนึงถึงขนาดของหน้าจอที่แสดงผล โดยคุณอาจต้องดูผลลัพธ์ของเว็บเพจตามขนาด 640x480 หรือขนาด 1024x768 สิ่งที่มองเห็นจะแตกต่างกัน เช่น รูปภาพ ข้อความ เป็นต้น หากเป็นอย่างนี้ทาง HomeSite 4.0 นั้นจะให้คุณสามารถกำหนดความละเอียดของภาพเป็นแบบมัลติ หรือบางคนอาจบอกก็ใช้การเปลี่ยนแปลง Desktop Properties แทนรอเพียง 15 วินาทีก็เปลี่ยนความละเอียดหน้าจอเอาเอง เพื่อดูเว็บเพจ หากต้องการดูจำนวนขนาดก็สามารถคลิ้กที่ไอคอน Toggle Rulers ในแถบ Browser และไอคอน Browser Size เพื่อดูการวิวขนาดของเว็บไซต์ในแบบ 640x480 หรือ 800x600

การกำหนดค่า Save As เป็นค่าดีฟอลต์

ปกติแล้วในออฟฟิศของคุณอาจมีแพลตฟอร์มอยู่หลายตัว การสร้างเว็บอาจเป็นการสร้าง HTML, ฐานข้อมูลหรือสคริปต์ แต่อยากให้เป็นรูปแบบเดียวกัน เช่น มีการเขียน Perl เพื่อบันทึกไปใช้บน UNIX แต่โค้ด HTML จะทำงานบนเครื่องพีซี แต่คุณสามารถแปลงไฟล์ดังกล่าวให้อยู่ในรูปแบบที่ต้องการได้ แต่ HomeSite สามารถกำหนดให้บันทึกค่า เป็นค่าดีฟอลต์ โดยการคลิ้กที่เมนู Options Settings File Settings คลิ้กที่ PC, Unix,และ Macintosh จากส่วน Format when saving

Undo หลังจากการบันทึก

ถ้าเว็บไซต์ของคุณต้องมีการแก้ไขบ่อยๆ หรือคุณเองอาจต้องตรวจสอบโค้ดเมื่อนำไปแสดงกับบราวเซอร์ต่างๆ อาจต้องแก้ไข โดยปกติ HomeSite จะแสดงผลผ่านทาง Internet Explorer แต่หากไปแสดงบน Netscape อาจเกิดข้อผิดพลาดบ้าง จนอาจจะต้อง แก้ไขโค้ด หากต้องการนำโค้ดก่อนเก่ามาใช้เมื่อบันทึกไฟล์ไปแล้วจะทำอย่างไร คุณสามารถกำหนดค่าใน HomeSite เพื่อใช้ฟีเจอร์การบันทึกแบบนี้ ปกติการ undo จะใช้แป้น Ctrl+Z แต่หากใช้ฟีเจอร์นี้ให้ไปที่เมนูคำสั่ง Options Settings Edit แล้วคลิ้กเลือกออปชัน Allow undo after save (ดูรูปที่ 6)



รูปที่ 6

การสร้างเทมเพลต

ในกรณีที่เราสร้างเว็บไซต์หลายหน้า แต่มีลักษณะหรือเทมเพลตเหมือนกัน เราสามารถสร้างเป็นเทมเพลตเก็บไว้ เพื่อนำมาใช้งานในอนาคตได้ โดยคุณสามารถสร้างเทมเพลต หรือเปิด ลบข้อมูลภายในเพจได้ตามต้องการ (เช่น META tags, headers, footers เป็นต้น) เมื่อสร้างไฟล์เสร็จแล้ว ให้ไปคลิ้กเลือกที่เมนูคำสั่ง File Save as Template แล้วใส่ชื่อของเทมเพลตที่ต้องการลงไป (ดูรูปที่ 7)



รูปที่ 7

สร้างกลุ่มสีด้วยตนเอง

การสร้างเว็บเพจคงต้องมีสีสันเข้ามาเกี่ยวข้อง แต่สีบางสีคุณก็คงเลือกจากเครื่องมือแล้วไม่มี บางครั้งอาจต้องสร้างขึ้นมาเอง โดยการสร้างพาเลตของสีใน HomeSite 4.0 ให้ทำดังนี้
-คลิ้กเลือกไอคอน palette จากทูลบาร์
-เลือกปุ่ม Options ในมุมด้านล่างซ้าย
-คลิ้ก Edit
-คลิ้กปุ่ม New Palette ในหน้าต่างป็อปอัพ
-ใส่ค่า RGB หรือโค้ดฐาน 16 ของสีลงไปหรือใช้เครื่องมือ dropper เพื่อเลือกสีจากสเปกตรัม คลิ้กที่ Add
-ทำซ้ำขั้นตอนที่ 5 และ 6 จนกระทั่งเพิ่มสีไปจนครบ
-คลิ้ก Save
-ใส่ชื่อของ palette แล้วคลิ้ก Close
ได้รู้เทคนิคกันแล้ว หากคันไม้คันมืออยากทดลองใช้งานก็ให้ไปดาวน์โหลด HomeSite Update 4.5.2 ได้ที่ http://a1739.g. akamai.net/7/1739/613/EUP-HS452-NT-US01040102/ftp2.allaire.com/homesite/HomeSite-452-win-update-us.exe ด้วยขนาดไฟล์ 12.9 เมกะไบต์ หรือเวอร์ชันล่าสุด HomeSite 5.0 ได้ที่ http://a731.g. akamai.net/7/731/3564/v002/down load.macromedia.com/pub/homesite/esd/HomeSite_5_Trial_Installer.exe เป็นผลิตภัณฑ์ของทางบริษัท มาโครมีเดียไปแล้ว
สนใจเวอร์ชันไหนก็ทดลองได้ตามชอบใจเลยครับ


ที่มา
www.arip.co.th/article.php?id=404733

BACK