ads by google

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

Media Types


ในการกำหนดการแสดงผลหน้าตาเว็บเพจ บนสื่อประเภทต่างๆ เราสามารถกำหนด style ให้แตกต่างกันได้ เช่น ตอนที่เราเห็นบนหน้าจอ (screen) กับตอนที่สั่งพิมพ์ออกกระดาษ (print) ให้แสดงผลไม่เหมือนกัน

แล้วประเภทของสื่อมีอะไรบ้าง ...
Media Type
  • all - ใช้ในอุปกรณ์ทุกชนิด
  • aural - แสดงผลออกทางระบบช่วยอ่านออกเสียง
  • braille - แสดงผลออกทางเครื่องช่วยอ่านสำหรับคนตาบอด
  • embossed - แสดงผลออกทางเครื่องพิมพ์สำหรับคนตาบอด
  • handheld - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ชนิดพกพา (handheld) ซึ่งมีขนาดเล็ก ไม่สามารถแสดงสีได้ (monochrome) และมีประสิทธิภาพในการรับส่งข้อมูลต่ำ
  • print - แสดงผลออกทางเครื่องพิมพ์
  • projection - แสดงผลออกทางจอภาพที่มีความต่างสี(contrast) และความสว่าง(brightness) ต่ำ เช่น จอภาพ LCD, การแสดงผลผ่านเครื่อง projector
  • screen - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์
  • tty - แสดงผลออกทางเทอร์มินัลชนิดตัวอักษรเท่านั้น เช่น โปรแกรม Lynx, เครื่องโทรพิมพ์
  • tv - แสดงผลออกทางจอภาพของเครื่องโทรทัศน์
หากมีมากกว่า 1 media ให้ใช้ comma คั่น 
มาดูตัวอย่างการใช้งานกันค่ะ ให้ตอนที่เราเห็นเว็บเพจบนหน้าจอ ตัวอักษรมีขนาด 12px แต่ตอนที่เราสั่งพิมพ์ให้มีขนาด 50px และมีเส้นขีดคร่าตรงกลาง โดยทั้งตอนที่เห็นบนหน้าจอและเมื่อสั่งพิมพ์ให้เป็นตัวหนา่ทั้งคู่ เขียน style sheet กำหนดได้ดังนี้
ตัวอย่าง
<html>
<head>
  <style>
  @media screen
  {
     p.special {font-family:Verdana,sans-serif; font-size:12px}
  }
  @media print
  {
     p.special {font-family:Arial, Helvetica; font-size:50px;
         text-decoration:line-through}
  }
  @media screen,print
  {
     p.special {font-weight:bold}
  }
  </style>
</head>

<body>
  <p class="special">Enjoyday.net</p>
</body>
</html>
ตัวอย่างลองเลือกเมนู File > Print Preview ... ดูว่า Enjoyday.net ด้านล่างนี้จะเปลี่ยนไปอย่างไร
Enjoyday.net
อีกตัวอย่างหนึ่งใช้สำหรับตอนสั่งพิมพ์ค่ะ อาจจะมีบางส่วนของเว็บเพจ เช่น banner และโฆษณาต่างๆ ที่เราไม่ต้องการให้พิมพ์ออกมา เพื่อประหยัดหมึกพิมพ์ เราก็สามารถกำหนดได้ 

ตัวอย่าง
<html>
<head>
<style type="text/css">
@media print
{
.noprint {visibility:hidden;}
}
</style>
</head>
<body>
<p>ข้อความตรงนี้พิมพ์ออกมาตามปกติ</p>
<p class="noprint">ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา</p>
</body>
</html>

เราสามารถ copy คำสั่ง style sheet แล้วบันทึกเป็นไฟล์ .css จากนั้นจึงเรียกใช้จากภายนอกก็ำได้ (External Style Sheet)
file print.css
.noprint {visibility:hidden;}

file testnoprint.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
</head>
<body>
<p>ข้อความตรงนี้พิมพ์ออกมาตามปกติ</p>
<p class="noprint">ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา</p>
</body>
</html>
ผลลัพธ์ลองเลือกเมนู File > Print Preview ... ดูว่า ข้อความข่างล่างนี้หายไปหรือไม่
ข้อความตรงนี้พิมพ์ออกมาตามปกติ
ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา

เขียนโดย ที่