09 May 2007

20 เคล็ดลับสำหรับการออกแบบเวบ[ตอนที่ 2]

20 เคล็ดลับสำหรับการออกแบบเวบ[ตอนที่ 2]
โดย: Jason Arber ที่มา: netmag.co.uk

6. ใช้ PHP อย่างง่ายสร้างเวบไซท์ : ไม่มีความจำเป็นที่จะต้องเป็นผู้เชี่ยวชาญใน PHP เพื่อจะสร้างเวบไซท์คุณ ถ้าเซิฟเวอร์ของคุณสนับสนุนการใช้ PHP
คุณสามารถใช้เครื่องเซิฟเวอร์ในการสร้างชุดคำสั่งที่จะใช้เป็นหลักได้อย่างง่ายดายและรวดเร็ว แทรกชุดคำสั่งนั้นไปที่เวบเพจด้วยลิ้งค์ง่ายๆ สิ่งนี้เป็นเหมือนเมนูหลัก
ซึ่งจะมีอยู่เพียงอันเดียวและหมายถึงว่าถ้าคุณจะเพิ่มเมนูใหม่หรือเปลี่ยนการออกแบบ คุณจำเป็นต้องเปลี่ยนแฟ้มที่ประกอบซึ่งจะปรับปรุงเวบไซท์ของคุณทั้งหมด

<?php include(“filename.html”); ?>

7. ตั้งค่าอักษรโดยการใช้ em : นักออกแบบชอบที่จะระบุชนิดขนาดด้วยพิกเซล เพราะว่ามันง่ายและเป็นความเคยชินที่เคยใช้ใน Photoshop แต่ก็เป็นเช่นเดียว
กับการระบุขนาดสำหรับเวบ พิกเซลมีข้อเสียอยู่อย่างหนึ่งคือ จะไม่สามารถเปลี่ยนแปลงขนาดใน Internet Explorer ได้ หากจอเพิ่มความคมชัด(Resolution)ขึ้น
มันไม่เพียงแต่เสียรูปทรงไปแต่มันจะเพิ่มขนาดอักษรในการออกแบบเวบคุณด้วย ดังนั้นอะไรคือการแก้ปัญหาล่ะ?

คำตอบก็คือการระบุชนิดใน em ถ้าคุณไม่คุ้นเคยกับหน่วย em คือ ขนาดคร่าวๆของอักษรตัวเล็กในรูปแบบของตัวอักษร และเป็นการใช้ภายในสไตล์ชีท
มาตราฐานของบราวเซอร์ หนึ่ง em มีขนาดคร่าวๆเท่ากับ 16 พิกเซล ตั้งค่าคุณสมบัติขนาดอักษรในแท็ก <body> เป็น 65 เปอร์เซ็นอย่างนี้

body { font-size: 65% }

นี่เป็นการทำหนึ่ง em ให้เท่ากับสิบพิกเซล (16X62.5%=10) ตอนนี้คุณสามารถใช้ขนาดพิกเซลเป็น em ได้แล้ว สำหรับตัวอย่าง ชนิดซึ่งตั้งค่าเป็น 12 พิกเซล
ควรจะเป็น 1.2em; 9 พิกเซลก็ควรจะเป็น 0.9em และอื่นๆ อะไรมีเพิ่มเข้ามาล่ะ? ทั้งผู้สร้างเวบและผู้ใช้งานต่างก็ยินดี

8. IE Box Model Hack : ในไม่ช้าคุณจะพบจุดบกพร่องที่สำคัญใน Internet Explorer ซึ่งจะคำนวนความกว้างและความสูงของระดับวัตถุรวมถึงค่า padding
ที่อยู่ภายในขนาดของกล่องไม่ถูกต้อง มากกว่าการเพิ่มภายนอกกล่อง สิ่งนี้สามารถแยกออกเป็นแผนผังได้ ความคมชัดเป็นเช่นเดียวกับ Box Model Hack
ซึ่งจะใช้กับจุดบกพล่องตัวอื่นๆใน IE เพื่อบังคับให้ใช้แท็กซึ่งบราวเซอร์อื่นไม่สนใจ

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

คุณจะจบกับขนาดความกว้างของกล่อง 120 พิกเซลในบราวเซอร์ส่วนใหญ่ แต่ใน IE ใช้ขนาดความกว้างได้เพียง 100 พิกเซลเท่านั้น การแก้ปัญหาที่ง่ายที่สุด
คือ box-within-a-box method ซึ่งจะวาง div ในแต่ละอัน:

div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }


นี่คือประโยชน์ที่จะใช้วิธีต่อไปนี้:
<div>
<div class=”hack”>
ใส่เนื้อหาของคุณที่นี่
</div>
</div>


9. Space saver : ไม่มีใครชอบที่จะสร้างฟอร์มใน HTML โดยเฉพาะบราวเซอร์ที่มีการเพิ่ม padding ล้อมบราวเซอร์โดยไม่มีเหตุผล การเพิ่ม CSS อย่างง่าย
โดยวิธีใช้สไตล์ชีทของคุณดังต่อไปนี้:

<form style=”margin-top: 0; margin-bottom: 0;”>

10. ทดสอบ ทดสอบและทดสอบอีกครั้ง : ในขณะที่ Internet Explorer ยังคงโดดเด่นใสตลาดบราวเซอร์ด้วยเปอร์เซ็นที่เพิ่มมากขึ้น การเป็นผู้นำกำลัง
ถูกกัดเซาะจาก Fierfox และ Opera ยังมีผู้คนมากมายที่ยังคงใช้บราวเซอร์รุ่นก่อนๆอย่าง Mozilla ของ Netscape

มันเป็นไปไม่ได้ที่จะออกแบบให้ดีที่สุดสำหรับทุกรุ่นของบราวเซอร์ ดังนั้นการตัดสินใจที่ดีที่สุดสำหรับบราวเซอร์ที่คุณจะสนับสนุน บราวเซอร์ Mozilla
บราวเซอร์ Web-kit (เช่น Safari ของ Apple) บราวเซอร์ KHTML (เช่น Konqueror) บราวเซอร์ Opera และ Internet Exploere รุ่นที่สี่และที่สูงกว่า
จะถูกวัดความปลอดภัย อย่างไรก็ตาม คุณควรที่จะยังคงเป็นชาวเนตที่ดีโดยการทำให้แน่ใจว่าโค๊ดของคุณไม่ถูกลดคุณภาพลง เพื่อให้บราวเซอร์ที่คุณ
ไม่ได้สนับสนุนสามารถรับรู้เวบไซท์ของคุณได้ แม้แต่ในขอบเขตที่จำกัด (ดูทิปที่ 14)

No comments: