|
ใช้ตัววิเศษ (Wizard) ช่วยดีกว่า
เทคนิคหนึ่งที่คุณจะพบเมื่อใช้งานไปคือ Auto Wizard เมื่อมีการแทรก Tag คำสั่งลงไป โดยการพิมพ์เอง หรือแก้ไขภายหลัง แล้วคุณเคาะคานเคาะวรรค (Spacebar) รอสักครู่ยังไม่ต้อง พิมพ์อะไรลงไป คุณจะเห็น Auto Wizard คอยแนะนำ Tag ต่างๆ ให้อยู่เสมอ เราสามารถใช้เมาท์ คลิกคำสั่ง หรือใช้คีย์ลูกศรเลื่อนทับคำสั่งแล้วกด Enter คำสั่งนั้นจะถูกเลือกไปแสดงทันที และจะ แนะนำ Attribute ตัวต่อไปให้เลือกต่อไปได้อีก สะดวกมากทีเดียว ดังตัวอย่างในภาพที่ 1-4
ภาพที่ 1 เมื่อเราต้องการใส่ Tags ใน <body> เมื่อเคาะ Spacebar 1 ครั้ง รอสักครู่ Wizard จะแสดงตัวเลือกให้ปรากฏขึ้นมา เราเลือก bgcolor โดยใช้เมาท์คลิกจะได้ผลดังภาพที่ 2
ภาพที่ 2 เมื่อรอสักครู่ Wizard จะแสดงสีให้เลือกทันที ในที่นี้คลิกเลือกสีดำครับ ก็จะ เกิดผลดังภาพที่ 3 ค่าสีถูกบรรจุลงเรียบร้อยแล้ว
ภาพที่ 3 เมื่อเคาะ Spacebar อีกครั้ง Wizard จะเสนอตัวเลือกขึ้นมาอีก เราจะเลือก Text ก็เพียงเคาะแป้นอักษร T ตัววิเศษจะเลื่อนไปที่หมวดอักษรทีให้เลย เลือก text เคาะ Enter จะได้ ภาพที่ 4
ภาพที่ 4 ตัววิเศษจะให้เลือกสีทันที เราเลือกสีเหลือง ง่ายดังใจจริงๆ ถ้าเราเคาะที่คาน Spacebar อีก ตัววิเศษก็จะเสนอทางเลือกให้เราต่อไปจนครบถ้วน สังเกตได้ว่า ตัววิเศษจะเสนอ Tags ที่ เกี่ยวข้องกับเรื่องนั้นๆ เสมอ เช่น ตารางก็จะเสนอเกี่ยวกับ border, width, height, bgcolor, colorspan, rowspan และอื่นๆ ลองทำความคุ้นเคยดูจะเห็นว่ามันง่ายกว่าที่คิด
การปรับแต่งเกี่ยวกับรูปประโยค ข้อความก็เช่นเดียวกันกับการใช้โปรแกรมจัดหน้าตา เอกสาร เช่น ต้องการให้ตัวอักษรอยู่กึ่งกลาง ก็ลากดำที่ข้อความนั้น แล้วคลิกเลือกที่ปุ่ม Align Center ในแถบเมนู Common ครับ ซึ่งเราสามารถจัดกึ่งกลางของรูปภาพ หรือตารางด้วยวิธีนี้ ได้เช่นเดียวกัน
การแทรกรูปภาพ
|
เมื่อจะแทรกรูปภาพ
|
เมื่อคุณต้องการจะแทรกรูปภาพ เพียงคุณเลือกที่ แท็ป Common แล้วคลิก I-beam ลง ในตำแหน่งที่ต้องการแทรกภาพ
คลิกปุ่ม Images ตรงลูกศรเมาท์ชี้อยู่ จะมีกรอบโต้ตอบแทรกภาพขึ้นมาดังภาพล่าง
คลิกที่รูปโฟลเดอร์ทางขวามือของ Source เพื่อเลือกรูปที่ต้องการแทรก ในกรอบจะมี รายละเอียดเกี่ยวกับภาพเช่น ขนาดกว้าง ยาว ให้คุณกำหนดอักษรอธิบายภาพ (Alt="?") กำหนด ระยะห่างจากขอบภาพ hspace, vspace และอื่นๆ เมื่อได้รายละเอียดตามต้องการแล้วก็คลิก OK ภาพจะถูกแทรกในตำแหน่งที่ต้องการพร้อมกับระบุเส้นทาง (path) ให้ด้วย
|
|
ตัวอย่างการแทรก Tag ตัวอักษร
|
เมื่อคุณต้องการจะกำหนดรูปแบบของตัวอักษร เช่น สีตัวอักษรและขนาด ให้คลิกที่แถบ Fonts เลือกปุ่มอักษร A (ปุ่มแรก) จะมีกรอบโต้ตอบของ Fonts ดังภาพ
คุณสามารถเลือกสีตัวอักษรได้จากช่อง Color ซึ่งจะมีสีหลักๆ ให้เลือก ถ้ายังไม่ถูกใจ คุณอาจเลือกได้จากสีในตาราง Custom ได้ ส่วนขนาดตัวอักษรให้คุณเลือกที่ช่อง Relative+/ Absolute/ Relative- ซึ่งจะมีให้เลือกตั้งแต่ +1 ถึง -7 (ขนาดปกติของบราวเซอร์คือ 3) ตัวอย่างข้างล่างได้จาก กรอบโต้ตอบ ตัวอักษรแบบตัวปกติ สีเหลือง ขนาด 6
ตัวอย่างฟอนต์ขนาด 6
เมื่อเราลากดำที่ข้อความตัวอย่างนี้ แล้วคลิกที่ปุ่มอักษร B (ทำตัวหนา) จะได้ดังตัวอย่าง ข้างล่าง
ตัวอย่างฟอนต์ขนาด 6
|
|
ตัวอย่างการแทรกจุดเชื่อมโยง
|
การทำจุดเชื่อมโยงไม่ใช่เรื่องยากครับสำหรับโปรแกรม Homesite 4 up ถ้าจุดเชื่อมโยงเป็น ตัวอักษรข้อความ ก็เพียงแต่ลากดำที่ข้อความนั้นแล้วคลิกที่รูปสมอในแถบ Common
จะมีกรอบโต้ตอบขึ้นมาดังภาพข้างล่างให้ระบุจุดเชื่อมโยงที่จะไป (ในที่นี้คือให้เปิดหน้า page2.htm) ต้องการให้หน้านี้ปรากฏอย่างไร แทนที่เดิมหรือเปิดบราวเซอร์หน้าใหม่ (ในที่นี้เปิด หน้าใหม่) คลิก OK
โปรแกรมจะใส่ Tags คำสั่ง HTML ให้อย่างครบถ้วนทีเดียวครับ ง่ายมากจริงๆ
นอกจากจะทำจุดเชื่อมโยงจากข้อความแล้ว ยังสามารถใช้ภาพเป็นจุดเชื่อมโยงได้ อีกด้วย โดยการลากดำที่ Tags คำสั่งควบคุมภาพนั้น <img src="รูปภาพ "> แล้วคลิกที่รูปสมอ ทำเช่นเดียวกันกับข้อความ และสามารถทำจุดเชื่อมโยงอ้างอิงในหน้าเดียวกัน โดยการอ้างชื่อ (name) ได้ง่าย ๆ อีกด้วย ดังตัวอย่าง
- การตั้งชื่อให้กับภาพหรือข้อความ ตัวอย่างจากหน้านี้ กำหนดให้ภาพ Homesite 4.0 ข้างบนสุดมีชื่อว่า "top" มีวิธีการทำดังนี้
- ลากดำที่ Tags คำสั่งกำหนดรูปภาพก่อน แล้วคลิกรูปสมอจะเห็นกรอบดังภาพ (สังเกตข้างล่างที่กรอบ description)
- ที่ช่อง name ให้ระบุชื่อที่ต้องการ ในที่นี้คือ top แล้วคลิก OK โปรแกรมจะสร้างคำสั่ง HTML ให้ดังภาพล่าง
- การกำหนดจุดเชื่อมโยงไปหาตำแหน่งชื่อที่กำหนด ตัวอย่างจากหน้านี้ กำหนดให้ข้อความ Go to Top เป็นจุดเชื่อม มีวิธีการทำดังนี้
- ลากดำที่ Go to TOP แล้วคลิกรูปสมอจะเห็นกรอบดังภาพ (สังเกตข้างล่างที่กรอบ description)
- ที่ช่อง href ให้ระบุชื่อที่ต้องการนำหน้าด้วยเครื่องหมาย # ในที่นี้คือ #top แล้วคลิก OK โปรแกรมจะสร้างคำสั่ง HTML ให้ดังภาพล่าง
ลองคลิกที่คำ GO to TOP ดูครับจะเห็นว่าหน้านี้จะกลับไปที่ตำแหน่งบนตามที่กำหนด
GO to TOP
คงจะสนุกมากขึ้นนะครับ เมื่อคุณได้ทดลองใช้งานไปสักระยะหนึ่งแล้วจะติดใจ และพบ เทคนิคเพิ่มเติมอีก ผมยังไม่ได้ทดลองทั้งหมดครับ ช่วยกันศึกษาครับแล้วนำมาเผยแพร่กันให้มาก ถ้าไม่ทราบว่าจะเผยแพร่ยังไงก็ส่งเทคนิคและความรู้เหล่านั้นมา ผมจะเป็นตัวกลางนำเสนอให้ ณ ที่นี้ต่อไปครับ
ขณะที่กำลังปรับปรุงหน้าตาเว็ปเพจหน้านี้อยู่ ปรากฏว่า Allaire ได้ออก HomeSite 4.5 มาแล้วครับ จ๊าบมากขึ้นไปอีกด้วย Wizard มากมายคอยช่วยเหลือคุณ รวมทั้งสนับสนุน HTML 4.0 ตามข้อกำหนดของ W3C แล้วอย่างเต็มตัวครับ ถ้าสนใจก็ไปดาวน์โหลดมาใช้งานได้เลยครับ คลิกที่นี่
|
