| ตัวอักษรเป็นสื่อที่ใช้สื่อสารกับผู้ชมเว็บเพจได้ดีที่สุด ดังนั้นคุณจึงควรพิถีพิถันกับมันมากขึ้นกว่าที่เคยคิดไว้ |
ส่วนประกอบที่หลากหลาย
เนื้อหาของหลักการเลือกสรรตัวอักษรโดยทั่วไปนั้น ประกอบไปด้วยการจัดองค์ประกอบภาพ , การเว้นช่องว่าง , การปรับแต่งอัตราส่วน , การจัดความสมดุลและการสร้างความกลมกลืน ซึ่งเมื่อศิลปะ แขนงนี้ ได้เข้ามาอยู่ในเว็บ เลยทำให้ถูกต้องเพิ่มการคำนึงถึงข้อจำกัดพื้นฐานบางประการเข้าไปด้วย ถึงแม้ว่า จะมีข้อจำกัด บางประการ ที่ขัดขวางการออกแบบไม่ให้เป็นไปอย่างราบรื่นก็ตาม แต่ในขณะ เดียวกัน นักออกแบบเว็บ ก็สามารถใช้เทคโนโลยีที่เกี่ยวข้อง และทดลองแต่งแต้มเพิ่มเติมรูปทรง และสีสัน เข้ามาช่วย ให้เกิดการพัฒนา รุปแบบแปลก ๆ ใหม่ ๆ ได้
ด้วยแนวทางดังกล่าว เทคนิค 23 ประการต่อจากนี้ไปจึงถูกคิดค้นขึ้น เพื่อช่วยคุณพัฒนา การเลือกสรร ตัวอักษรในเว็บของคุณ หลักการพื้นฐานที่รองรับเทคนิคเหล่านี้ได้แก่ ความต้องการดาวน์โหลด อย่างรวดเร็ว , ความเป็นระเบียบเรียบร้อย , มีโครงสร้างแน่นอน และมีความกลมกลืน ที่ผสมผสานกัน อย่างลงตัว โปรดจำไว้ว่า การเลือกสรรตัวอักษรที่ไม่เข้าท่าในเว็บเพจนั้น เป็นเรื่องที่ไม่น่าให้เกิดขึ้น ด้วยประการทั้งปวง
เทคนิคไฮเทค
ด้วยเทคโนโลยีต่าง ๆ ที่เกี่ยวข้อง ทำให้การเลือกสรรตัวอักษรในเว็บ มีความคล่องตัวกว่า การจัดการ กับอักษรในสื่ออื่น ๆ มาก ไม่ว่าจะในแง่ของการจัดช่องห่างระหว่างตัวอักษร (front) ที่มีรูปแบบ อันหลากหลาย คุณควรเรียนรู้ถึงเทคโนโลยีที่เกี่ยวข้องกับการเลือกสรรตัวอักษรและข้อจำกัดของมัน เพื่อคุณ จะทราบว่า คุณทำอะไรได้บ้าง และคุณจะสร้างเว็บเพจให้เป็นที่ประทับใจผู้ดูด้วยเทคโนโลยีนั้น ๆ อย่างไร
1. ใช้ HTML เข้าไว้ เพื่อความเร็วสูงสุด
คุณควรดูแลให้เว็บเพจของคุณไปปรากฎบนหน้าจอของผู้ดูอย่างรวดเร็วที่สุด และสามารถมัดใจผู้ดู ได้อย่าง ทันทีทันใด การออกแบบสิ่งพิมพ์เป็นความผิดพลาดใหญ่หลวง เพราะ HTML นั้นต่างจาก QuarkX Press หรือ Pagemaker และธรรมชาติของเว็บเพจก็ไม่เหมือนกับสิ่งพิมพ์ด้วย คุณควรจำกัดขนาด ของเว็บเพจ แต่ละหน้า ของคุณไว้ที่ 15 ถึง 30 กิโลไบต์ สำหรับไฟล์ HTML บวกกับ รูปภาพ และภาพเคลื่อนไหว อีกไม่เกิน 20 ถึง 30 กิโลไบต์ เท่านี้ก็เกินพอแล้ว เพราะการโหลดข้อมูล ขนาด 35 ถึง 60 กิโลไบต์ (KB) ก็ถือว่าอืดแล้ว สำหรับผู้ดูที่ใช้โมเด็ม 28.8 Kbps ซึ่งถ้าต้องการโหลด เว็บเพจ ขนาดประมาณนี้ ให้ได้เร็วจริงๆ ก็ต้องใช้ขนาดสาย T1
อย่างไรก็ดี มีอยู่ทางหนึ่งที่จะจำกัดขนาดเว็บเพจของคุณได้ ก็โดยการใช้ไฮเปอร์ลิงก์ของ HTML แทนที่ จะใช้ รูปภาพปุ่มสำหรับคลิ้ก เพื่อไปยังเว็บเพจอื่น ๆ เพราะอักษรย่อมกินเนื้อที่น้อยกว่ารูปภาพเสมอ ทั้งนี้ เว็บไซต์ขนาดใหญ่ ซึ่งมีเว็บเพจเป็นร้อย ๆ พัน ๆ ควรจะมีรายการลิงก์ (ไซต์แมพ) เพื่อไปยังส่วนต่าง ๆ ของเว็บไซต์ วางเรียงรายอยู่ทางด้านซ้ายมือ ในแนวตั้งของบราวเซอร์ ส่วนเว็บไซต์รายย่อย ที่ไม่ค่อยมีความ สลับซับซ้อนเท่าใด ก็อาจจะวางลิงก์ไว้อย่างไรก็ได้ ตามแต่ความเหมาะสม
เว็บเพจที่มีรูปภาพและภาพเคลื่อนไหวเป็นส่วนน้อยและมีข้อมูล HTML เป็นส่วนใหญ่ก็สามารถ เป็นเว็บเพจ ที่ดีได้ คุณไม่จำเป็นต้องอาศัยรูป GIF หรือ JPEG ขนาด 150 กิโลไบต์ในการตกแต่ง ให้เว็บเพจ ของคุณ สวยงามเสมอไป ความจริงแล้ว เว็บเพจที่ดีจะต้องมี 2 สิ่งที่ไปด้วยกัน ได้แก่ หน้าตาของเว็บเพจ และประสิทธิภาพ ที่ผู้ดูจะได้รับประโยชน์จากมัน
2. ใช้ในรูป GIF บ้างก็ได้
บางครั้งเมื่อ HTML ไม่สามารถตอบสนองความต้องการของคุณได้ทั้งหมด คุณก็มีทางเลี่ยงไปใช้รูปภาพ GIF แทนแน่นอนคุณสามารถออกแบบตัวอักษรได้ตามใจชอบด้วยวิธีนี้ แต่ก็แน่นอนที่ต้องออกแบบรูปภาพ GIF ให้กะทัดรัดที่สุดด้วย โดยอาจกำหนดรูปภาพให้เป็นสีขาวดำ และใช้โปรแกรม Macromedia Freehand และ Adobe lllustrator) ในการสร้างรูปภาพ (ที่ไม่แน่นอนให้คุณส้รางรูปสีก่อน เพราะสีของรูปภาพ มักจะเพี้ยนไป เมื่อมีการโยกย้ายจากไฟล์ของโปรแกรมวาดภาพแบบเว็กเตอร์ ซึ่งมีหลักการใช้สีแบบ CMYK ไปใช้ในโปรแกรมตกแต่งภาพ ซึ่งมีหลักการใช้สีแบบ RGB)
เมื่อสร้างรูปตัวอักษรเสร็จเรียบร้อยแล้ว คุณก็มาตกแต่งต่อในโปรแกรมตกแต่งภาพ (เช่น Photoshop หรือ Fontographer ของ Macromedia เป็นต้น) เริ่มด้วยการกำหนดสีฉากหลัง ของรูปอักษร ให้เป็นสีเดียวกับ สีฉากหลัง ของเว็บเพจ จากนั้นจึงระบายสีตามใจชอบ โปรดอย่าลืมใช้ชุดสี 216 Web-safe เพื่อสีในรูป ของคุณ จะได้ไม่ต้องไปตามแก้สีในภายหลัง
สุดท้ายเพื่อเป็นการตัดแต่งให้ไฟล์รูปภาพมีขนาดกะทัดรัดที่สุด คุณควรแปลงไฟล์รูปภาพไปเป็น adaptive palette (โดยทั่วไปจะเป็น palette แบบ 2 ถึง 4 บิต ขึ้นอยู่กับสีที่คุณเลือกใช้) หรือเป็นแบบ exact palette (สำหรับรูปภาพที่มีไม่กี่สี) หรือใช้โปรแกรมตัดทอนสี (image stripper) เช่น โปรแกรม DeBabelizer เพื่อตัดสีที่ไม่จำเป็นออกจากรูปภาพของคุณเสีย
3. ใช้ฟอนต์ให้เข้ากับบราวเซอร์
ฟอนต์ตัวอักษรของ HTML ที่ใช้การได้แน่นอนกับบราวเซอร์ในเครื่องคอมพิวเตอร์ประเภทต่าง ๆ มีจำนวนจำกัด ดังนี้
ฟอนต์สำหรับเครื่องพีซี ได้แก่ Verdana , Arisl , Helvetica , Courier New , Palatino และ Times New Roman ส่วนภาษาไทย ก็น่าจะเป็น MS Sans Serif หรือ Cordia UPC พูดง่าย ๆ ก็คือฟอนต์ที่เป็นมาตรฐานในวินโดว์นั่นเอง
ฟอนต์สำหรับยูนิกซ์ ได้แก่ Helvetica , Courier , Palation , Times , Verdana และ Arial (ผู้ใช้เครื่องแมค ได้ฟอนต์สองแบบหลังสุดนี้ มาจากโปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ 4.0 หรือ จากการ ดาวน์โหลด จากเว็บไซต์ของไมโครซอฟท์)
ถึงแม้ว่าแท็ก กำลัวจะหายไปเมื่อ CSS ก้าวเข้ามา แต่มันยังคงเป็นแท็ก ที่ใช้การได้อยู่ ไม่ว่า จะอยู่ในบราวเซอร์อะไรก็ตาม โดยมีประโยชน์สำหรับเลือกฟอนต์จากบรรดาฟอนต์เท่าที่มีอยู่ อย่างไรก็ดี วิธีที่ดีที่สุด คือคุณกำหนดรูปแบบของฟอนต์ (typeface) ที่คุณต้องการไว้ พร้อมกับมีรายชื่อฟอนต์สำรอง ไว้ด้วย เผื่อกรณีที่ ในเครื่องของผู้ดูเว็บเพจ ไม่มีฟอนต์ที่คุณต้องการ ยกตัวอย่างเช่น คุณต้องการให้มีตัวอักษรแบบ sans-serif ในเว็บเพจของคุณ คุณก็กำหนดดังนี้
ถ้าผู้ดูเว็บเพจไม่มีฟอนต์ Verdana เขาอาจจะมีฟอนต์ Arial หรือ Helvetica ก็ได้ แต่ถ้าไม่มี ฟอนต์ทั้งหมดนี้เลย บราวเซอร์ก็จะแสดงฟอนต์ใดก็ตาม ที่มีอยู่ในรูปแบบ sans-serif
อีกตัวอย่างหนึ่ง ถ้าคุณต้องการฟอนต์ serif คุณก็กำหนด
ทั้งในเครื่องแมคและเครื่องพีซีมักจะมีฟอนต์ Palatino อยู่ แต่ถ้าไม่มี เครื่องแมคก็จะไปใช้ ฟอนต์ Times แทน ในขณะที่เครื่องพีซีก็ใช้ฟอนต์ Times New Roman (แต่ถ้าไม่มีอีก ก็ใช้ฟอนต์อื่น ๆ ในรูปแบบ serif)
นักออกแบบเว็บจำนวนมาก พยายามก้าวข้ามข้อจำกัดของฟอนต์ของ HTML ไปโดยการใช้ไฟล์รูปภาพ GIF เป็นตัวอักษรพาดหัวแทน โดยสร้างรูปตัวอักษรจากโปรแกรมวาดภาพแบบเว็กเตอร์ และตกแต่ง ด้วยโปรแกรมตกแต่งภาพ (เช่น Adobe Photo Deluxe หรือ Photoshop ซึ่งในเวอร์ชั่น 5.0 ที่เพิ่งออกใหม่ เมื่อเร็ว ๆ นี้ มีความสามารถพิเศษในการออกแบบตัวอักษรเพิ่มมาให้ด้วย) แต่ทั้งนี้ทั้งนั้น ก็ขึ้นอยู่กับ แนวคิดของนักออกแบบเว็บแต่ละคนด้วย ซึ่งบางคนเห็นว่า ไม่ควรใช้รูปตัวอักษรในไฟล์ GIF มาปะปนกับตัวอักษรทั่วไป ในขณะที่บางคนต้องการให้ตัวอักษรที่มีอยู่เป็นไฟล์รูปภาพ GIF ทั้งหมด
4. ให้ภาพพูดแทน
เนื่องจากคนส่วนใหญ่ยังคงใช้อินเทอร์เน็ตที่ความเร็วสูงนัก คุณจึงควรออกแบบให้ภาพแรก ที่ปรากฎ บนหน้าจอ นั้น สามารถบอกกับผู้ดูได้ว่าเว็บไซต์ของคุณเป็นเว็บไซต์เกี่ยวกับเรื่องอะไร การใช้รูปภาพ GIF พาดหัวไว้ ก็เป็นทางเลือกที่ไม่เลว โดยที่กำหนดขนาดรูป GIF อย่าให้ใหญ่โตนัก เพื่อจะได้โหลด ได้อย่าง รวดเร็ว ก่อนที่เนื้อที่เหลือในเว็บเพจจะถูกโหลดตามมา
ยกตัวอย่างเช่น การใช้รูปภาพพาดหัวเป็นที่รวมลิงก์สำหรับไปยังเว็บเพจต่าง ๆ ในเว็บไซต์ และมี รูปภาพ อื่น ๆ ต่อลงมา (ซึ่งอาจจะมี หรือไม่มีลิงก์ ในรูปภาพที่ต่อลงมาก็ได้)
หรือคุณอาจจะสร้างรูปภาพ ๆ หนึ่ง ซึ่งเมื่อเคลื่อนเมาส์ไปอยู่เหนือภาพนั้น จะปรากฎอีกรูปหนึ่ง ซึ่งมี ข้อความขึ้นมา วิธีนี้รูปภาพที่มีข้อความจะถูกโหลดเข้ามาโดยไม่เป็นที่สังเกตขณะที่ผู้ดูเห็นรูปภาพแรก ปรากฎขึ้นมาก่อน
นอกจากนี้ ยังมีวิธีที่คุณสามารถใช้ทดแทนการโหลดเลเยอร์ของ CSS ซึ่งตามปกติ จะใช้เวลา นาน โดยการสร้างตัวอักษรในรูปภาพ GIF แล้วกำหนดให้เป็นรูปฉากหลังของเว็บเพจ จากนั้น คุณก็ใส่ ตัวอักษร HTML หรือตัวอักษรในรูปของภาพ GIF แบบโปร่งใส (transparent GIF) ข้างหน้ารูป ฉากหลัง ซึ่งจะให้ผล คล้ายกับ CSS เลยที่เดียว การใช้รูปภาพช้า ถ้าหากคุณได้ตัดทอนทุก ๆ รูปภาพ ให้กะทัดรัด (optimize) เรียบร้อยแล้ว
5. เล็ก ๆ น้อย ๆ กับเจ้าหนูตัวจ้อย
เทคนิคหนึ่งในการเพิ่มลูกเล่นเล็ก ๆ น้อย ๆ ให้กับเว็บเพจ HTML ธรรมดา ๆ โดยไม่มีผลกระทบต่อ ความเร็ว ในการโหลดเว็บเพจ ก็คือการใช้จาวาสคริปต์ใส่ภาพเล็ก ๆ เข้าไปในเว็บเพจ แล้วกำหนด ภาพนั้น เข้าไปที่ไฮเปอร์ลิงก์เป็น rollover ซึ่งจะมีผลทำให้เมื่อใดก็ตามที่ผู้ดูเคลื่อนเมาส์มาทับลิงก์นั้น ก็จะมีรูปปรากฎขึ้น ในบริเวณใกล้เคียงกับไฮเปอร์ลิงก์ที่เป็นจุดกำเนิดของรูปภาพ มิฉะนั้น หากคุณวาง ไฮเปอร์ลิงก์ ไว้ที่ส่วนต้นของเว็บเพจ แต่กลับให้รูปภาพ ไปปรากฎที่ส่วนท้าย ของเว็บเพจ อย่างนี้ก็จะ ไม่เป็นการดี เพราะ ทำให้ ผู้ดูต้องเหลือบมองหารูปภาพ เสียอารมณ์เปล่า ๆ
6. เทคนิคการแทรกช่องว่าง
การใช้ช่องว่างเป็นเทคนิคที่สำคัญอักเทคนิคที่สำคัญอีกเทคนิคหนึ่งในการออกแบบเว็บเพจ เพราะมันเป็นวิธีที่นักออกแบบใช้ในการวางเนื้อความลงตรงตำแหน่งที่ต้องการ และสามารถใช้ ดึงดูด สายตา ของผู้ดู ให้ไปยังตำแหน่งที่กำหนดได้อีกด้วย
ตลอดระยะเวลา 1 ถึง 2 ปีที่ผ่านมา นักออกแบบเว็บเพจทั้งหลายได้คิดค้นวิธีต่าง ๆ มากาย เพื่อจะได้ วางเนื้อความลงตรงตำแหน่งในเว็บเพจอย่างเหมาะเหม็ง วิธีที่ใช้กันมากที่สุดคือ การใช้แท็ก<PRE> ซึ่งจะแสดงตัวอักษรแบบไม่ผ่านการปรับแต่งใด ๆ (unfilter) อีกวิธีหนึ่งคือ การใช้ รูปภาพ GIF ที่ว่างเปล่า พร้อมกับกำหนด vspace และ hspace ของรูปภาพนั้น
การใช้ตารางของ HTML ก็เป็นอีกเทคนิคหนึ่ง ซึ่งทำให้นักออกแบบเว็บได้ผลลัพธ์ออกมา เป็นเนื้อความ ที่เรียงตัวกัน อย่างเป็นระเบียบเรียบร้อยในเว็บเพจ ส่วนเทคนิคใหม่ ๆ อย่าง CSS และ Dynamic HTML นั้นเป็นก้าวกระโดดครั้งสำคัญ ที่ทำให้นักออกแบบเว็บ สามารถระบุตำแหน่ง ที่ต้อง วางตัวอักษร ได้เลย รวมถึงความสามารถในการจัดวางชิ้นส่วนของเว็บเพจเป็นชั้น ๆ (layering) ด้วย สำหรับ เทคนิคใหม่เหล่านี้ จะติดปัญหาก็ตรงที่ผู้ดู จะต้องใช้บราวเซอร์รุ่นใหม่ ๆ เท่านั้น จึงจะได้ สัมผัส กับเทคนิค เหนือชั้นดังกล่าว นักออกแบบเว็บที่มีไหวพริบ จะรู้จักหยิบฉวย เอาเทคนิคทั้งหมด ที่บรรยาย ไปใช้ประกอบกัน เพื่อได้เว็บเพจ ที่สวยงาม ตามต้องการ
7. รูปภาพ GIF ที่ว่างเปล่า
การใช้รูปภาพ GIF ที่ว่างเปล่า มาแทรกตามจุดต่าง ๆ เพื่อช่วยในการจัดตำแหน่ง เนื้อความ เป็นวิธีที่ได้รับความนิยม วิธีหนึ่ง และเทคนิคที่ นักออกแบบเว็บ นิยมใช้มากที่สุด สำหรับการใช้ เครื่องช่วย นี้ ได้แก่การกำหนด vspace และ hspace ของรูปภาพ GIF ที่ใช้<
คุณจะเห็นว่าการระบุแบบที่สอง จะทำให้เว็บเพจของคุณดูเรียบง่ายและโหลดได้เร็วยิ่งขึ้น
ตารางที่ว่าง
เมื่อคุณต้องการจัดเนื้อความในเว็บเพจเป็นแนวดิ่งตรงกันหลาย ๆ แนว คุณสามารถสร้างตารางที่มีช่องว่างนำมาช่วยในการจัดเว็บเพจตามความต้องการได้ ดังตัวอย่าง
<TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=360 BORDER=1>
<TR>
<TD width=200 height=30 align=right valign=top> Some text. </TD>
<TD width=10> </TD>
<TD width=150 align=left valign=bottom> Some more text. </TD>
</TR>
</TABLE>
|
ช่องว่างในตารางที่แทรกเข้ามาตรงกลางระหว่างเนื้อความทั้งสอง เป็นผลที่ได้จากการใช้เทนนิคนี้
8. สีสันของตัวแทรก
สืบเนื่องจากเทคนิคที่แล้ว เมื่อคุณใช้ช่องว่างของตารางในการแยกเนื้อความแล้ว คุณอาจจะต้องการใส่ สีสัน ให้กับช่องว่างนั้น เพื่อจะดูเป็นกรอบที่เด่นชัดยิ่งขึ้น ซึ่งคุณสามารถทำได้ โดยใช้เทคนิคใส่สีสัน ที่เป็นสีฉากหลัง ของเนื้อความเข้าไปในช่องว่าง
ในการใส่สีสันลงในช่องว่าง คุณต้องกำหนดสีของฉากหลังเสียก่อน ด้วย bgcolor ในแท็ก <TD> จากนั้นใส่ช่องว่าง ( ) ลงในช่องของตาราง แล้วคุณก็จะเห็นช่องว่างมีสีสันขึ้นมาทันที
ดังตัวอย่างต่อไปนี้
<TABLE CELLPADDING=2 CELLSPACING=0 WIDTH=360 BORDER=0>
<TR align=left valign=top>
<TD width=200 align=right bgcolor="#FF6633"> Some text. </TD>
<TD width=10 bgcolor="FFCC66" > </TD>
<TD width=150 bgcolor="FF6633" > Some more text. </TD>
</TR>
</TABLE>
|
ผลลัพธ์ที่ได้คือ ช่องว่างที่มีสีสันแทรกอยู่ระหว่างกลางเนื้อความ 2 ส่วน
9. กับ Dynamic HTML
Dynamic HTML คงเป็นที่ถูกอกถูกใจของนักออกแบบเว็บส่วนใหญ่เป็นแน่ เพราะมันได้รวมเอา จาวาสคริปต์ และ CSS เข้าไว้ในตัว ซึ่งทั้งสอง ต่างก็เป็นเครื่องมือ สำหรับการจัดหน้าเว็บ ที่ช่วยให้ การทำงาน ง่ายขึ้นกว่าแต่ก่อนมาก ดังตัวอย่างประโยชน์สารพันของ DHTML ดังต่อไปนี้
เทคนิคการใช้ตัวอักษรต่างขนาด
กล่าวโดยย่อแล้ว การใช้ตัวอักษรต่างขนาดก่อให้เกิด 3 ประการดังต่อไปนี้
10. รู้จัก < FONT size > และ <H>
การที่เครื่องคอมพิวเตอร์ต่างระบบมีอัตราส่วนการย่อขยายตัวอักษรไม่เท่ากัน นำมาซึ่งความปวดหัว ให้กับ นักออกแบบเว็บเป็นอย่างมาก โดยทั่วไป ตัวอักษรในเว็บเพจในเครื่องพีซี จะมีขนาดใหญ่กว่า ตัวอักษรชุดเดียวกันนั้น ที่แสดงในเครื่องแมคอินทอช นักออกแบบเว็บส่วนใหญ่ นิยมใช้เครื่องแมคอินทอช แต่ทางด้านผู้ดู ส่วนใหญ่แล้ว กลับนิยมเครื่องพีซีกันเกือบทั้งหมด
คุณอาจจะทดลองด้วยตัวคุณเองก็ได้ โดยการทดลองแสดงตัวอักษรแบบต่าง ๆ ด้วยโปรแกรมเน็ตสเคปเนวิกเตอร์ 4.05 ในเครื่องแมคอินทอช และในเครื่องพีซี โดยใช้ HTML ข้างล่างนี้ กับโปรแกรมบราวเซอร์ ของทั้งสองระบบ ซึ่งจะแสดงฟอนต์ Verdana ขนาด 1 ถึง 7 , + 1 ถึง + 7 , - 1 ถึง - 7 และ h1 ถึง h6 (หรือคุณจะทดลองฟอนต์อื่น ๆ แทนก็ได้ อาทิเช่น Arial , Helvetica หรือฟอนต์ sans-serif อื่น ๆ เป็นต้น) และอย่าลืมปรับให้หน้าจอของทั้งสองระบบ มีความละเอียดเท่ากันด้วย ซึ่งถ้าเป็น 800 x 600 pixels ก็จะดีที่สุด แล้วคุณก็จะได้เห็น ความแตกต่าง ที่เกิดขึ้น ระหว่างฟอนต์ชื่อเดียวกัน ขนาดเดียวกัน แต่กลับ ปรากฏออกมา ไม่เหมือนกัน เมื่อไปอยู่ในคนละเครื่อง
<HTML > <HEAD > <TITLE >Font size for Verdana </TITLE > </HEAD > <BODY BGCOLOR="#FFFFFF" > <TABLE border="1" width="400" > <TR > <TD align=center > <P ><FONT SIZE="1" FACE="Verdana" >1</FONT ></P > <P ><FONT SIZE="2" FACE="Verdana" >2</FONT ></P > <P ><FONT SIZE="3" FACE="Verdana" >3</FONT ></P > <P ><FONT SIZE="4" FACE="Verdana" >4</FONT ></P > <P ><FONT SIZE="5" FACE="Verdana" >5</FONT ></P > <P ><FONT SIZE="6" FACE="Verdana" >6</FONT ></P > <P ><FONT SIZE="7" FACE="Verdana" >7</FONT ></P > </TD > <TD align=center > <P ><FONT SIZE=" +1" FACE="Verdana" > +1</FONT ></P > <P ><FONT SIZE=" +2" FACE="Verdana" > +2</FONT ></P > <P ><FONT SIZE=" +3" FACE="Verdana" > +3</FONT ></P > <P ><FONT SIZE=" +4" FACE="Verdana" > +4</FONT ></P > <P ><FONT SIZE=" +5" FACE="Verdana" > +5</FONT ></P > <P ><FONT SIZE=" +6" FACE="Verdana" > +6</FONT ></P > <P ><FONT SIZE=" +7" FACE="Verdana" > +7</FONT ></P > </TD > <TD align=center > <P ><FONT SIZE=" -1" FACE="Verdana" > -1</FONT ></P > <P ><FONT SIZE=" -2" FACE="Verdana" > -2</FONT ></P > <P ><FONT SIZE=" -3" FACE="Verdana" > -3</FONT ></P > <P ><FONT SIZE=" -4" FACE="Verdana" > -4</FONT ></P > <P ><FONT SIZE=" -5" FACE="Verdana" > -5</FONT ></P > <P ><FONT SIZE=" -6" FACE="Verdana" > -6</FONT ></P > <P ><FONT SIZE=" -7" FACE="Verdana" > -7</FONT ></P > </TD > <TD align=center > <H1> <FONT FACE="Verdana"> h1</FONT> </H1> <H2> <FONT FACE="Verdana"> h2</FONT> </H2> <H3> <FONT FACE="Verdana"> h3</FONT> </H3> <H4> <FONT FACE="Verdana"> h4</FONT> </H4> <H5> <FONT FACE="Verdana"> h5</FONT> </H5> <H6> <FONT FACE="Verdana"> h6</FONT> </H6> </TD > </TR> </TABLE> </BODY> </HTML> |
โปรดจดจำความจริงที่น่าปวดหัวนี้ไว้ตลอดไป เพื่อคุณจะได้ระลึกอยู่เสมอทุกครั้งที่ออกแบบ เว็บเพจว่า เมื่อระบบคอมพิวเตอร์เปลี่ยนไป อัตราส่วน การย่อขยายอักษร ในเว็บเพจของคุณ ย่อมจะเปลี่ยนแปลง ตามไปด้วยเสมอ
11. ใช้ตัวใหญ่ให้เป็นประโยชน์
คุณสามารถดึงดูดสายตาของผู้ดูเพจได้ โดยการใส่ตัวอักษรตัวใหญ่ ๆ ลงในตำแหน่ง ของเนื้อความ ที่คุณต้องการให้ผู้ดู อ่านเป็นอันดับแรก ถ้าคุณต้องการให้ผู้ดู อ่านจากข้างล่างของเว็บเพจ ก็ควรจะมี ขนาดใหญ่โต ถึงที่ว่าสายตาทุก ๆ คู่จ ะต้องจับจ้องมองมาที่ด้านล่างของเว็บเพจอย่างหลีกเลี่ยงไม่ได้
12.ขึ้นย่อหน้าด้วยตัวใหญ่
การขยายตัวอักษรตัวแรกของย่อหน้าให้ใหญ่ขึ้น เป็นเทคนิคที่ใช้กันมานมนานแล้ว โดยมาก นักออกแบบเว็บ มักจะใช้เทคนิคนี้ สำหรับเว็บเพจ ที่มีรูปร่างหน้าตา เลียนแบบหนังสือทั่วๆไป
การทำตัวใหญ่ขึ้นย่อหน้านั้นง่ายนิดเดียว ตามปกติ ตัวใหญ่นั้นจะมีขนาดใหญ่กว่าตัวอักษร ในเนื้อความอยู่ 2 ถึง 5 พอยต์ และมักจะใช้ฟอนต์ที่แตกต่างจากฟอนต์ของเนื้อความ เพื่อความโดดเด่น ตัวอย่าง ข้างล่าง นี้ แสดงวิธีทำตัว "T" เป็นตัวใหญ่ขึ้นย่อหน้า โดยใช้ภาพ
|
< IMG src="t.gif" width=30 height=30 > < FONT face ="Verdana" size=5 > he answer is out there-some-were.< /FONT > |
ถ้าต้องการความโดดเด่นยิ่งขึ้นไปอีก คุณก็ใช้ตัวใหญ่ที่สลับสี (inverse) แทน สีของตัวสลับสี จะเข้ม จนดึงดูสายตาได้มากกว่า ในขณะที่ตัวใหญ่ธรรมดานั้น กลืนหายไปกับฉากหลัง แต่ถ้าคุณคิดว่า HTML ไม่มีลูกเล่นอะไรมากนัก ก็ขอให้คุณอดใจรอ CSS ซึ่งคุณจะใช้ได้อย่างพลิกแพลงมากกว่า
|
< IMG src="t2.gif" width=30 height=30 HSPACE=5> < FONT face ="Verdana" size=5 > he answer is out there-some-were.< /FONT > |
หรือจะทดลองใช้ฟอนต์แบบลายมือเขียนก็จะได้ดังนี้
|
< IMG src="s.gif" width=60 height=38 > < FONT face ="Verdana" size=5 > ometimes cursive type is more attractive to look at as an initial cap.< /FONT > |
หรือคุณอาจจะอาศัยการวางตำแหน่งของ CSS มาช่วย หรือสำหรับบราวเซอร์ที่สามารถแสดง style sheet ได้ คุณก็ใช้ตารางผสมกับการกำหนดสีของฉากหลังเพื่อให้ได้ผลล้ายคลึงกับการใช้ CSS ตัวอย่างต่อไปนี้ ใช้รูปภาพ GIF ที่ว่างเปล่า สร้างเอฟเฟกต์เลเยอร์ ให้กับตัวอักษร T ซึ่งมีฉากหลังเป็นสีเทา
|
<TABLE border=0 cellpadding=0 cellspacing=0 > <TR > <TD style= "back ground:white url(Images/t3.gif) no - repeat," valign=top > < IMG src= "blank.gif" hspace=22 vspace=34 width=1 height=2 > < FONT face="Verdana" size = 5 > he answer is out there-some-were.< /FONT > </TD > </TR> </TABLE> |
13.ใช้ขนาดดึงความสนใจ
บางครั้งคุณก็ไม่จำเป็นมีรูปภาพใด ๆ ในเว็บเพจของคุณ ถ้าคุณเลือกใช้ขนาดต่าง ๆ ของตัวอักษร ได้อย่าง มีประสิทธิภาพ คุณสามารถดึงความสนใจของผู้ดูได้มากขึ้น โดยการใช้ตัวอักษร ที่มีขนาดต่าง ๆ กัน ภายในย่อหน้าเดียวกัน
|
<TABLE width=0 border=0 cellpadding=0 cellspacing=0 > <TR > <TD width=250 valign=top > < IMG src= "blank.gif" hspace=22 vspace=34 width=1 height=2 > < FONT face="Verdana; Helvetica, Arial, Sans serif" size = 2 > Sometimes I take alook in the mirror and < BR > < FONT size=5> want to < FONT size=7> scream < /FONT > < /FONT > < BR > And then again, sometimes Ijust take look at myself and wink ;-) < /FONT > </TD > </TR> </TABLE> |
ตัวอักษรที่มีขนาดหลากหลายประกอบกับการใช้เลเยอร์ จะสร้างความเด่น ให้กับ ทั้งเนื้อความในย่อหน้า และข้อความที่เป็นพาดหัวไปพร้อมกัน
14.ใช้ขนาดสร้างระดับชั้นของข้อมูล
ผู้ดูจะดูข้อมูลไปตามลำดับของระดับชั้นของข้อมูล ซึ่งถูกสร้างขึ้น โดยการใช้ขนาดของตัวอักษร ที่แตกต่างกัน อาทิเช่น ที่ส่วนหัวของแต่ละตอนของเนื้อความ ที่หัวข้อเรื่องและที่อื่น ๆ
ตัวอย่างการใช้เทคนิคนี้ ก็เช่น การนำให้ผู้ดู อ่านพาดหัวของเนื้อความ แล้วอ่านไล่ไปยัง ตัวอักษรตัวแรก ของย่อหน้า ด้วยการเลือกตัวอักษร ที่มีขนาดเห็นได้ชัดเจน และวางสองส่วนดังกล่าว ให้อยู่ ใกล้ชิดกัน เป็นต้น นอกจากนี้ คุณสามารถเลือกใช้ตัวอักษรขนาดต่าง ๆ สำหรับเนื้อความ ที่บอกถึง แหล่งข้อมูล ที่ผู้ดูจ ะค้นคว้าเพิ่มเติมต่อไป
เทคนิคการใช้ตัวอักษรอย่างสมดุล
การมีตัวอักษรแบบต่าง ๆ ให้เลือกใช้มากมายอาจทำให้นักออกแบบเว็บหยิบเอาตัวอักษรทั้งหลาย มาใช้ อย่างมันมือ แต่เคล็ดลับประการหนึ่ง ของการเลือกสรรตัวอักษร อยู่ตรงการรู้จักเลือกใช้ และจัดวาง ตัวอักษร อย่างสมดุล เพื่อไม่ให้ผู้ดู เกิดความรู้สึกเอียนตัวอักษรที่หลากหลายไปเสียก่อน ถึงคำสั่งใน HTML จะไม่ทันสมัยสุด ๆ เสียแล้วในยุคนี้ แต่นักออกแบบ , วางแนว และจัดกลุ่มก้อน ของตัวอักษร ในเนื้อความ โดยใช้ตารางและเฟรม
การวางแนวที่ตรงกันของตัวอักษร การจัดกลุ่มก้อน และการจัดวางที่ไม่สมมาตรตายตัว ประกอบกับ การใช้รูปภาพ ประกอบอย่างผสมผสานกลมกลืน เหล่านี้ ทั้งหมดคือ หลักพื้นฐาน ของการสร้างสมดุล ในการออกแบบเว็บเพจ
15. จัดเป็นกลุ่มก้อน
คุณควรแบ่งข้อมูลที่คุณมีอยู่ในเว็บเพจให้เป็นประเภท ๆ เพื่อผู้ดูจะได้แยกแยะ และเลือกดูได้อย่างรวดเร็ว เทคนิคที่คุณจะใช้เพื่อการนี้ได้ ก็คือการเว้นช่องว่างและการแบ่งเป็นคอลัมน์ (ความกว้างของคอลัมน์ที่อ่านง่าย จะตกประมาณ 8 ถึง 15 คำต่อหนึ่งบรรทัด) และการจัดลิงก์ให้เป็นหมวดหมู่อยู่ใกล้ ๆ กัน
คุณควรคงรูปแบบการจัดหน้าอย่างใดอย่างหนึ่งไว้ให้เป็นเอกภาพไปตลอดทั้งเว็บเพจของคุณ การเปลี่ยน รูปแบบ โดยทันทีทันใด อาจจะดึงความสนใจของผู้ดูมากขึ้น หรือไม่ก็อาจจะสร้างความสับสน ถ้าการเปลี่ยนแปลงนั้น ไม่มีเหตุผลที่ดีรองรับ เว็บไซต์ของ Atlas magazine (http://www. Atlas magazine.com) เป็นตัวอย่างที่ดี ของการแบ่งเนื้อความ สำหรับแต่ละหัวข้อ แต่ในขณะเดียวกัน ก็คงความเป็นเอกภาพไว้ ได้ตลอดทั้งเว็บเพจ
16. สร้างสมดุลด้วยความไม่สมมาตร
คุณไม่จำเป็นต้องจัดกลุ่มก้อนตัวอักษรอย่างสมมาตรตายตัว การสร้างความไม่สมมาตร เช่น จัดวางคอลัมน์ ที่ไม่มีกรอบ 2 คอลัมน์ในอัตราส่วนกว้างไม่เท่ากัน อาจจะประมาณ 30:70 ไม่ใช่ 50:50 ไปทั้งเว็บ โดยที่ นอกจาก จะสร้างความสนใจขึ้นมาแล้ว ยังเป็นการสร้างความสมดุลให้กับช่องว่าง และตัวอักษรอีกด้วย (อัตราส่วน 30:70 ยังเหมาะสำหรับ การแยกรายการชื่อ ออกจากพาดหัว ของเนื้อความด้วย
เทคนิคที่ดีที่สุดสำหรับใช้ในการจัดวางตัวอักษรอย่างไม่สมมาตร คือการใช้ตาราง คุณสามารถดู หน้าต่าง ของ The Razorfish Subnetwork (http://www.rsub.com/typo/) เป็นตัวอย่าง ของความ ไม่ สมมาตร ที่ลงตัว ซึ่งผู้ดูจะถูกนำสายตาให้อ่านจากมุมบนซ้ายไปมุมล่างขวาโดยอัตโนมัติ
17. เรียงลิงก์ในแนวนอน
แทนที่จะเรียงลิงก์ให้อยู่ต่อ ๆ กันลงมาตามลำดับ คุณควรจะปลี่ยนมาเรียงลิงก์ในแนวนอน จะทำให้เกิด ความน่าสนใจ ในเว็บเพจมากยิ่งขึ้น ซึ่งคุณอาจเรียงลิงก์ไว้บริเวณตอนล่างของเว็บเพจ สำหรับลิงก์ ที่จะนำ ไปสู่ หน้าต่อ ๆ ไป ต่อจากเว็บเพจนั้น
เทคนิคนี้ต้องอาศัยการใส่ลิงก์ไว้ในตาราง โดยที่คุณกำหนดความกว้างของช่องในตาราง ไว้อย่าง ตายตัวด้วย
18. ใช้ตัวใหญ่และตัวเล็กอย่างกลมกลืน
หลักการของการเลือกสรรตัวอักษรอยู่ตรงการสร้างความสมดุลระหว่างตัวอักษรกับ รูปภาพ GIF เป็นตัว อักษรที่เป็นเนื้อความ เทคนิคสำคัญจึงอยู่ที่การออกแบบ โดยคำนึงถึงความสมดุล เพื่อให้ตัวอักษร ที่เป็น รูปภาพ GIF ผสมกลมกลืนกับตัวอักษร HTML อย่างไม่มีที่ติ
เว็บไซต์อง The Fray (http://www.fray.com/) เป็นตัวอย่างที่ดีของการเลือกสรรตัวอักษรที่เหมาะสม รวมทั้งการจัดการ จัดแบ่ง และการสร้างสมดุล ระหว่าง รูปภาพขนาดใหญ่ กับตับอักษร HTML ที่มี ขนาดเล็กลงมา
19. จัดวางแบบถัด ๆ กันลงมา
การแบ่งเนื้อความออกเป็นส่วน ๆ แล้วจัดวางแบบถัด ๆ กันลงมา เป็นวิธีสร้างความสมดุลในเว็บเพจ วิธีหนึ่ง ยกตัวอย่างเช่น ถ้าคุณมีเนื้อความ 3 ย่อหน้า คุณก็อาจจะวางมันเรียงลำดับถัดกันลงมา จากซ้าย ไปขวา ซึ่งจะทำให้ ผู้ดูโดยส่วนใหญ่อ่านย่อหน้าที่ อยู่ด้านบนซ้ายก่อนเสมอ เทคนิคนี้เป็นการจัดเนื้อความ เป็นกลุ่มก้อน ซึ่งจะทำให้คุณใช้เทคนิคอื่น ๆ เช่น การใช้ขนาดที่แตกต่าง, การใช้สี, การจัดเลเยอร์ และการวางรูปเคลื่อนไหว เป็นต้น เข้ามาประกอบได้
คุณอาจทดลองเทคนิคการแบ่งเนื้อความเพื่อจัดวางนี้ โดยลองพยายามตัดเนื้อความ ให้เหลือคำน้อยที่สุด เพื่อให้ได้องค์ประกอบ ที่กะทัดรัด สำหรับการจัดหน้าเว็บเพจ ทดลองใช้รูปภาพตัวอักษรขนาดใหญ่ (96 พอยต์ หรือใหญ่กว่านั้น) โดยคำนึงถึงเวลาในการโหลดและความสอดคล้องสมดุลกับองค์ประกอบอื่น ๆ ในหน้าเดียวกัน นอกจากนั้น ทดลองแยกเนื้อความให้อยู่หลาย ๆ หน้าติด ๆ กัน โดยพยายามใช้เทคนิค ต่าง ๆ เพื่อดึงความความสนใจผู้ดูให้คงอยู่ตลอด การทดลองเหล่านี้จะช่วยให้คุณ มีประสบการณ์ การใช้เนื้อที่ของเว็บเพจ ให้เกิดผลมากที่สุด
โฮมเพจของ The Eyecandy (http://www.eyecandy.org/) เป็นตัวอย่างที่ดี สำหรับเทคนิคต่าง ๆ ที่ได้บรรยายไปในตอนนี้
เทคนิคการเล่นสีสัน
สีสันเป็นส่วนประกอบที่สำคัญอีกส่วนหนึ่งของการเลือกสรรตัวอักษรสำหรับเว็บเพจ มันเป็นการตกแต่ง ครั้งสุดท้าย ให้กับตัวอักษรทั้งหลายที่ผ่านการจัดวางเรียบร้อยแล้ว เทคนิค 4 ประการจากนี้ไป จะช่วย ให้คุณ เลือกใช้สีสัน กับตัวอักษรของคุณได้อย่างเหมาะสม
20. สร้างระบบสี (palette) ของคุณเอง
เว็บไซต์จะต้องมีระบบสีประจำตัวซึ่งประกอบไปด้วยสีหลักประมาณ 3 ถึง 7 สี ซึ่งนักออกแบบเว็บจะใช้สี เหล่านี้ เป็นหลักในการตกแต่งส่วนต่าง ๆ ของเว็บเพจ รวมทั้งตัวอักษรด้วย การมีระบบสี ไม่ได้เป็นการ บังคับ ให้คุณจำกัดใช้อยู่เพียงไม่กี่สี เพราะคุณสามารถเพิ่มเติมสีใหม่ ๆ เข้าไปในระบบสีได้อยู่เสมอ แต่ เป็นการวางแนวทาง ให้การใช้สีในเว็บเพจเป็นไปอย่างมีระเบียบและสวยงาม (คุณควรเลือกสีต่าง ๆ ให้กับระบบสี จาก Websafe palette ของเน็ตสเคป)
สำหรับสีต่าง ๆ ที่คุณเลือกใช้ในเว็บเพจ คุณควรรู้ค่าที่เป็นตัวเลขฐานสิบหกและค่า RGB ของแต่ละสี ด้วย ค่าตัวเลขฐานสิบหกนั้นใช้สำหรับการกำหนดสีใน HTML ส่วนค่า RGB ก็ใช้กับโปรแกรมอย่าง Photoshop และโปรแกรมตกแต่งภาพอื่น ๆ นอกจากนี้ ถ้าหากคุณรู้ค่า CMYK ของแต่ละสี ของคุณ ด้วย ก็จะเป็นการดี เผื่อไว้ในกรณีที่คุณต้องการพิมพ์เว็บเพจออกมาทางเครื่องพิมพ์
คุณสามารถใช้ CSS มาช่วยในการกำหนดสีที่คุณจะใช้ในเว็บเพจ เพื่อความเป็นระบบระเบียบ และเป็นเอกภาพของเว็บเพจของคุณ
21. ระบุค่าสีให้แน่นอน
ระหว่างที่รอคอยให้ CSS เป็นที่แพร่หลายกว่าที่เป็นอยู่ทุกวันนี้ คุณคงต้องใช้วิธี ระบุค่าสี ทุกครั้ง สำหรับแต่ละ องค์ประกอบในเว็บเพจ เพื่อให้สีสันของเว็บเพจไม่มีการผิดเพี้ยน และป้องกันความสับสน ของผู้ดู
เทคนิคนี้จะอาศัยไฟล์ HTML ที่มีแท็ก < FONT color > สำหรับทุก ๆ สีที่คุณใช้อยู่เป็นประจำ เพื่ออำนวยความสะดวก ให้คุณก๊อปปี้แท็กต่าง ๆ ไปใส่ไฟล์ HTML โดยไม่ต้องพิมพ์ซ้ำทุก ๆ ครั้ง
22. แบ่งย่อหน้าด้วยสีสัน
ถ้าเนื้อความของคุณยาวมากและภายในเนื้อความนั้นประกอบไปด้วยประเด็นย่อย ๆ หลายประเด็น (เช่น เรื่องเกี่ยวกับ ผลิตภัณฑ์ต่างชนิดกัน) คุณก็ควรจะแบ่งเนื้อความนั้นออกเป็นส่วน ๆ โดยใช้สีสัน ที่แตกต่าง เข้าช่วย
การใช้สีต่าง ๆ กันสำหรับแต่ละประเด็นของเนื้อความได้รวดเร็วยิ่งขึ้น และถ้าคุณระบุสีสันเฉพาะให้กับ แต่ละประเด็น ไปตลอดทุก ๆ หน้าของเว็บเพจ ผู้ดูก็จะสามารถเก็บรายละเอียดเกี่ยวกับประเด็นต่าง ๆ จากทุก ๆ หน้าได้ โดยไม่ตกหล่นเลย
คุณลองนึกภาพเว็บเพจหนึ่งซึ่งมีรายละเอียดของผลิตภัณฑ์ 3 ชิ้น เนื้อความของผลิตภัณฑ์ชิ้นที่สอง เป็นสีส้ม และชิ้นที่สามเป็นสีเขียว ตัวอย่างนี้เป็นการใช้สีต่าง ๆ มาแบ่งเนื้อความ โดยที่ผู้ดู ยังคงอ่านต่อไปได้ อย่างไม่มีสะดุด และเนื่องจากสีทั้งสามมีความกลมกลืนเข้ากันได้ดี จึงเท่ากับ เป็นการสร้างสีสันสวย งาม ให้กับเว็บเพจด้วย
คำสั่ง HTML สำหรับตัวอย่างดังกล่าว เป็นดังนี้
|
< FONT color="#999999 > This is paragraph of type in a certain color that may or may not be easy to read as colored text-not all colored text is easy to read. However, darker colors usually work well. < /FONT > < P > < FONT color="ff6633" > This is paragraph of type in a certain color that may or may not be easy to read as colored text-not all colored text is easy to read. However, darker colors usually work well. < /FONT > < P > < FONT color="009900" > This is paragraph of type in a cwetain color that may or may not be easy to read as colored text-not all colored text is easy to read. However, darker colors usually work well. < /FONT > |
23. สีสันของลิงก์
ใน HTML นองจากคุณจะกำหนดสีของข้อความที่เป็นลิงก์ได้แล้ว คุณยังสามารถกำหนดสีของสิงก์ที่ทำงาน (สีของลิงก์ ขณะที่ลิงก์ถูกคลิ้ก) และสีของสิงก์ที่เคยเข้าไปแล้ว (สีของลิงก์ที่แสดงให้ทราบว่า ผู้ดูเคยคลิ้กแล้ว อย่างน้อยหนึ่งครั้ง) ได้ด้วย การใช้สีของลิงก์ที่ทำงานเป็นการสร้างการตอบสนอง ต่อผู้ที่ คลิกลิงก์แบบทันทีทันใด ส่วนการใช้สีของลิงก์ที่เคยเข้าไปแล้ว เป็นการแจ้งให้ผู้ดูรู้ว่า เขาอยู่ที่จุดไหน ของเว็บไซต์ (แต่แน่นอนว่า การกำหนดสีของลิงค์ ไม่ว่าแบบใดก็ตาม จะไม่มีผลใด ๆต่อผู้ดูเลย ถ้าหากว่าผู้ดูไ ด้กำหนด สีของลิงด้วยตัวเองในบราว-เซอร์ก่อนแล้ว)
แม้แต่การเปลี่ยนแปลงแค่ความเข้มของสีก็มีผลต่อผู้ดูด้วย ยกตัวอย่างเช่น คุณกำหนดให้ลิงก์ มีสีเขียว, สิงก์ที่ทำงานเป็นสีเขียวแก่ และลิงก์ที่เคยเข้าไปแล้ว เป็นสีเขียวอ่อน เป็นต้น
|
เน็ตสเคปก็ได้ เอ็กซ์พลอเรอร์ก็ดี
บ่อยครั้งที่สิ่งที่คุณเห็นหรือสิ่งที่เป็นไปได้ในบราวเซอร์ตัวหนึ่ง กลับแปรเปลี่ยนไปเป็นอีกอย่างเมื่อไปอยู่ ในบราวเซอร์อีกตัว คุณจึงควรยึดหลักต่อไปนี้ในการออกแบบเว็บเพจของบคุณเพื่อป้องกันปัญหาดังกล่าว
Dynamic HTML
ทั้งบราวเซอร์เอ็กซ์พลอเรอร์ 4.0 และเนวิเกเตอร์ 4.0 ต่างก็มี Document Object Models สำหรับ การใช้ องค์ประกอบต่าง ๆ ของเว็บเพจผ่านทางภาษาสคริปต์ อย่างเช่น จาวาสคริปต์ แต่ปัญหานั้นอยู่ตรงที่ บราวเซอร์ จากสองบริษัทต่างมี object models เป็นของตัวเอง ทางออกก็คือ การทำความเข้าใจ ความแตกต่างนั้น เพื่อจะได้สร้างสคริปต์ ที่สามารถทำงานได้ กับบราวเซอร์ทั้งคู่
ในเอ็กซ์พลอเรอร์ 4.0 คุณสามารถกำหนดสคริปต์ให้กับทุก ๆ องค์ประกอบใน HTML รวมทั้ง style-sheet properties ด้วย โดยที่มันจะมองทุก ๆ องค์ประกอบเป็น object ที่อยู่ใน document.all ซึ่งคุณจะใช้องค์ประกอบเหล่านี้ได้โดยการระบุ index หรือชื่อ (name) หรือ ID ของมัน ยกตัวอย่างเช่น ชุดคำสั่งต่อไปนี้จะแสดงชื่อแท็กทั้งหมดที่มีอยู่ในเว็บเพจออกมาให้เห็น
for (i=0; i<document.all.length; i++)
{
document.write(document.all[i].tagName + "\n");
}
ส่วนคำสั่งต่อไปนี้เป็นการใช้แท็กโดยระบุ ID ของมัน
การเปลี่ยนแปลงคุณสมบัติใด ๆ ของอ็อปเจ็กต์ในเอ็กซ์พลอเรอร์ 4.0 จะปรากฎให้เห็นทันที ส่วนในเนวิเกเตอร์ 4.0 คุณจะใช้สคริปต์ เรียกใช้องค์ประกอบของ HTML ได้อย่างจำกัด เช่น เลเยอร์ เป็นต้น โดยที่เลเยอร์ที่เรียกใช้ได้ จะเป็นบริเวณ ที่กำหนด โดยแท็ก < LAYER > และบริเวณ ที่กำหนดโดย Cascading Style Ssheet (CSS) ซึ่งคุณจะใช้เลเย่อร์ได้โดยการระบุ index หรือชื่อ (name) หรือ ID ของมัน
for (i=0; i<document.layers.length; i++)
{
document.write(document.layers[i]).name + "\n");
}
ส่วนคำสั่งต่อไปนี้เป็นการใช้เลเยอร์โดยระบุ ID ของมัน
Document.write("myLayer visibility is:" + document.layers ['mylayer'] .visibility);
และเนวิเตอร์ 4.0 ก็เช่นเดียวกับเอ็กซ์พลอเรอร์ 4.0 คือมันจะแสดงการเปลี่ยนแปลงคุณสมบัติของเลเยอร์ ให้เห็นทันที เมื่อทราบรายเอียดดังนี้แล้ว คุณก็สามารถเขียนสคริปต์ที่ใช้ได้กับทั้งสองบราวเซอร์ได้ โดยการ กำหนดตัวแปร 2 ตัวที่เก็บค่าที่แตกต่างกันระหว่างบราวเซอร์ เพื่อให้สคริปต์นำไปใช้ตามประเภทของ บราวเซอร์ ที่เรียกสคริปต์ขึ้นมาทำงาน ดังนี้
if (navigator.appName == "Netcape") {
layerRef="document.layers";
styleRef="";
} else {
layerRef ="document.all";
styleRef=".style";
}
เมื่อคุณกำหนดไว้เช่นี้แล้ว คุณก็สามารถใช้สคริปต์เพียงชุดเดียวสำหรับบราวเซอร์ 2 ตัว ยกตัวอย่าง คำสั่งที่ทดสอบองค์ประกอบที่ชื่อ myLayer ดังนี้ isVisible = eval(layerRef + "myLayer"]' + styleRef + '.visibility'); |
|
เกร็ดเล็กเกร็ดน้อยกับตัวอักษรใน HTML
การออกแบบหน้าตาและจัดวางเนื้อความด้วย HTML ไม่ใช้เรื่องง่าย เพราะผู้ดูเว็บเพจสามารถกำหนด ลักษณะตัวอักษร ในบราวเซอร์ได้ตามใจชอบ นักออกแบบเว็บ จึงไม่อาจแน่ใจได้เลยว่า ผู้ดูจะได้เห็น เว็บเพจที่สวยงามตามที่นักออกแบบเว็บคิดฝันไว้หรือไม่
แต่ก็ยังมีอีกหลายสิ่งที่คุณสามารถทำได้ อย่าลืมแท็กพื้นฐานอย่าง < H1 > ถึง < H6 > สำหรับข้อความ พาดหัว , < BIG > และ < SMALL > ที่ช่วยขยายหรือหดคำหรือข้อความ , < SUP > และ < SUB > สำหรับยกตัวยกและตัวห้อย , < STRONG > (หรือ < B > ) เพื่อทำตัวหนา และ < EM > (หรือ < I > ) เพื่อทำตัวเอน
นอกจากนั้น คุณยังสามารถกำหนดคุณสมบัติของตัวอักษรได้อีกหลายอย่างในแท็ก < BODY> เช่น สีสัน และความเป็นลิงก์ และยังมีแท็ก < FONT > ใช้กำหนดขนาด , สี และรูปตัวอักษรให้กับเนื้อความอีกด้วย เทคนิคอื่น ๆ
|