CSS Styling for Print

การพิมพ์หน้าเว็บเพจออกมาทางเครื่องพิมพ์นั้น ส่วนใหญ่หน้าเว็บเพจ ที่พิมพ์ออกมาจะมีการแสดงผลที่ผิดพลาดไป แต่ด้วย CSS สามารถที่จะทำให้ปัญหาในการแสดงผลที่ผิดพลาดหายไปได้ โดยสร้างไฟล์ CSS ที่ใช้สำหรับควบคุมการแสดงผลเมื่อมีการสั่งพิมพ์ โดยทำการลิงค์ไฟล์ CSS สำหรับพิมพ์นี้เข้ากับไฟล์ HTML ด้วยการแทรก

<link rel=”stylesheet” href=”=ชื่อไฟล์ CSS” media=”print” />

ต่อจากการลิงค์ไปยังไฟล์ CSS ที่ใช้ควบคุมการแสดงผลบนหน้าจอทั่วไป

มีข้อควรพิจรณาสำหรับการแสดงผลบนหน้าจอคอมพิวเตอร์ และการแสดงผลเมื่อพิมพ์ออกมาทางเครื่องพิมพ์ดังนี้

สิ่งที่การแสดงผลทางเครื่องพิมพ์ไม่สามรถทำได้

-ไม่สามารถคลิกที่ลิงค์ เพื่อไปยังลิงค์ปลายทางได้
-ไม่สามารถทำการ Search การส่งค่าตัวแปรต่างๆได้
-ซูมเข้า-ออก รูปภาพ แผนที่ หรือเปลี่ยนขนาดของตัวอักษรได้
-ไม่สามารถส่งอีเมล์ให้เพื่อนได้
-ไม่สามารถใช้ Scroll เลื่อนดูเนื้อหาได้
-ไม่สามารถส่ง feedback ได้

แต่เราสามารถที่จะ

-ซ่อนเนวิเกชั่นต่างๆไม่ให้แสดงผลได้
-ซ่อนการแสดงผลการลิงค์ ต่างๆได้
-ซ่อนการแสดงผลของ Search หรือ ฟอร์มต่างๆได้

การทำไฟล์ CSS สำหรับการพิมพ์ อาจจะต้องพิจารณาเรื่องดังนี้

การใช้รูปแบบตัวอักษร
ควรใช้อักษรที่มีลักษณะเป็นเส้นเล็กๆ เนื่องจากการแสดงผลบนหน้าจอ กับการแสดงผลสำหรับการพิมพ์นั้นต่างกัน การใช้อักษรที่มีลักษณะเส้นเล็กนั้นจะทำให้สามารถอ่านได้ง่ายขึ้น โดยรูปแบบอักษรที่เหมาะสม เช่น Sans-serif fonts (อย่างเช่น Verdana, Arial, and Helvetica)

ตรวจสอบความกว้างของหน้าจอ
ถ้ากำหนดความกว้างของหน้าเว็บเพจเป็น พิกเซล ให้เปลี่ยนหน่วยวัดเป็น เซนติเมตร มิลลิเมตร หรือ นิ้ว แทน เพื่อให้แน่ใจว่าเครื่องพิมพ์ของผู้ใช้งานจะสามารถพิมพ์ออกมาได้ทั้งหมด เพราะเครื่องพิมพ์ของผู้ใช้แต่ละคนจะพิมพ์ออกมาได้ในลักษณะที่ต่างกัน เช่นบางเครื่องสามารถพิมพ์ออกได้ถึงขอบกระดาษ แต่บางเครื่องก็ไม่สามารถทำได้
การกำหนดระยะห่างของเนื้อหาภายในกับขอบกระดาษนั้น อาจจะวัดระยะห่างออกจากด้านใดด้านหนึ่งของขอบเป็นขนาด 1/4 นิ้ว

ข้อผิดพลาดของการพิมพ์ กับตำแหน่ง ที่กำหนดใน CSS
ตำแหน่งของ Layout ที่ถูกกำหนดด้วย CSS นั้นอาจจะมีการแสดงผลที่ผิดพลาดได้ เมื่อทำการพิมพ์ออกมา การแก้ไขสามารถทำได้โดยการกำหนดค่า float ของ Layout สว่นนั้นๆเป็น none และค่า position เป็น static

ให้ข้อมูลเกี่ยวกับไฟล์ที่พิมพ์

การทำเว็บให้สามารถแสดงผลสำหรับเครื่องพิมพ์นั้นเป็นเรื่องที่ยากในการกำหนดว่าจะให้แสดงผลอะไรบ้าง บางคนอาจจะถามว่า “ทำไม หน้าเว็บเพจพิมพ์ออกมาแล้วไม่สมบูรณ์?” ผู้ใช้ส่วนใหญ่ความหวังว่าได้ เห็นเว็บเพจบนหน้าจออย่างไร เมื่อพิมพ์ออกมาก็ต้องเป็นอย่างนั้น เพราะฉะนั้นจำเป็นที่จะต้องให้ ข้อมูล อาจจะสร้าง div ขึ้นมา div หนึ่ง โดยที่กำหนดค่าใน CSS ทั่วไปให้ display เป็น none แต่เมื่อแสดงสำหรับการพิมพ์ กำหนดค่าเป็น block เพื่อแสดงข้อมูล บางอย่าง เช่น “หน้านี้ เป็นการแสดงผลสำหรับเครื่องพิมพ์” เป็นต้น

ใส่ URL ลงในไฟล์ที่จะพิมพ์ออกมา
หน้าเว็บเพจจะมีลิงค์ต่างๆ ที่สามารถคลิกได้ เพื่อดูว่าจะลิงค์ไปยังปลายทางที่ใด แต่เมื่อพิมพ์ออกมาแล้วจะไม่สามารถรู้ปลายทางของ ลิงค์นั้นได้ ดังนั้นจึงมี 2 ทางของปัญหาเรื่องนี้ 2 ทางด้วยกันคือ

1. นำเอาสัญลักษณ์ที่แสดงถึงการ ลิงค์ได้ออก เช่น เส้นใต้ลิงค์
2. ใส่ URL ต่อท้าย ลิงค์ นั้นๆ โดยสามารถทำได้ดังนี้

a:after {
content: ” (” attr(href) “) “;
}

แทรกลงในไฟล์ CSS สำหรับการพิมพ์

ข้อแนะนำ
บางครั้งไม่ต้องการให้มีการแสดง URL ของลิงค์ทั้งหน้าเว็บเพจ สามารถกำหนดให้แสดงลิงค์เฉพาะ class หรือ id ใดๆได้ เช่นต้องการให้แสดงURL เฉพาะ กับลิงค์ที่อยู่ภายใน #content สามารถกำหนดได้ดังนี้

#content a:after {
content: ” (” attr(href) “) “;
}

***เทคนิคข้างต้นไม่รองรับการทำงานของ IE 7 และเวอร์ชั่นที่ต่ำกว่า

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

การลำดับความสำคัญของ CSS

โดยปกติแล้ว CSS จะทำงานจากบนลงล่าง ถ้าเกิดเราสร้าง class ที่มีชื่อเดียวกันอยู่ในไฟล์ css เดียวกันแล้วนั้น Class ที่อยู่ด้านล่างจะเป็นตัวที่ถูกนำมาใช้งาน และแสดงผล ตัวอย่างเช่น

.test {
color : red ;
}
.
.
.test {
color : green ;
}

จากตัวอย่างจะเห็นได้ว่า มี Class ที่เหมือนกันอยู่ 1 Class นั้นก็คือ class test นั้นเอง เมื่อนำ css ตัวนี้ไปใช้ เช่น

<div class="test">ตัวหนังสือจะได้สีอะไร</div>

เมื่อนำ class test ไปใช้ การแสดงผลจะทำให้คำว่า “ตัวหนังสือจะได้สีอะไร” กลายเป็นสีเขียว เพราะ class test ที่กำหนดให้ตัวอักษรที่อยู่ใน class กลายเป็นสีเขียวอยู่นั้นเอง

แต่ถ้าเราต้องการให้ ตัวหนังสือภายใน class test นั้นกลายเป็นสีแดงนั้นเราก็สามารถทำได้โดยการใส่ !importan ไว้ในค่าของ class นั้นๆ เช่น

.test {
color : red!importan ;
}
.
.
.
.test {
color : green ;
}

เพียงเท่านี้ ตัวหนังสือที่อยู่ภายใน class test ก็จะมีสีเป็นสีแดงแล้ว ถึงแม้ว่าจะเป็น class ที่อยู่ด้านบนก็ตาม

ถ้าหากเราต้องการทราบถึงลำดับความสำคัญจากการประกาศ Class และ id ที่เราสร้างขึ้นมา เราสามาถที่จะคำนวนด้วยวิธีการดังนี้

b .test {
color : red;
}
ul li b .test {
color : green ;
}

จากโค้ดตัวอย่าง เราจะเห็นได้ว่าเป็นการกำหนด ค่าสีของตัวอักษรให้กับ class test โดยทั้ง 2 ตัว เรากำหนดค่าไว้ต่างกัน เมื่อนำมาใช้งานจริง ตัวที่มีความสำคัญมากสุดเท่านั้นที่จะถูกนำมาแสดงผล โดยที่เราสามารถที่จะคำนวณได้ดังนี้

โดยเราจะสมมุติให้
-จำนวน ID เป็น a
-จำนวน Class เป็น b
-จำนวน Tag HTML เป็น c

จากนั้นเราก็มาดูที่ CSS นั้นว่ามีจำนวน id, class และ Tag html มากน้อยเพียงใด โดยเรียงจำนวนเป็น a b c จากตัวอย่างจะเห็นได้ว่าตัวแรกคือ

b .test
จะเห็นได้ว่ามี 1 class และ 1 tag html ดังนั้นเมื่อนำค่ามาเรียงจะได้ค่าเป็น
abc=011
0 (จำนวนของ ID เป็น 0 เพราะไม่มี ID)
1 (จำนวนของ Class)
1 (จำนวนของ Tag html คือ tag b)

และตัวที่ 2 คือ

ul li b .test
จะเห็นได้ว่ามี 1 class และ 3 tag html ดังนั้นเมื่อนำค่ามาเรียงจะได้ค่าเป็น
abc=013
0 (จำนวนของ ID เป็น 0 เพราะไม่มี ID)
1 (จำนวนของ Class)
3 (จำนวนของ Tag html คือ tag ul,li และ b)

จะเห็นได้ว่า class test ตัวที่ 2 เมื่อรวมค่าออกมาแล้วจะได้ค่า เท่ากับ 13 ซึ่งมากกว่าค่าตัวแรกคือ 11 เพราะฉะนั้น ลำดับความสำคัญของ “ul li b .test ” จึงมากกว่า “b .test” และเมื่อมีการแสดงผล ตัวอักษรที่อยู่ใน class test ก็จะกลายออกมาเป็นสี เขียว

Design Design Web2 (slide)

สร้างเว็บไซต์แบบ Tableless

Tableless คืออะไร? หลายคนอาจจะสงสัยเมื่อได้ยินคำนี้เป็นครั้งแรก ถ้าแปลกันแบบกำปั้นทุบดินก็จะมีความหมายว่า “ไม่มีตาราง” แต่เมื่อคำว่า Tableless ปรากฎอยู่ในเรื่องของการสร้างเว็บไซต์ เราก็พอที่จะแปลความหมายของคำว่า Tableless ได้ว่า เป็น “การพัฒนาเว็บไซต์โดยไม่ใช้ตาราง” นั้นเอง

แต่เดิมที่นักพัฒนาเว็บหลายคนคงใช้แท็ก <table> ในการจัดการโครงสร้างของเว็บ ซึ่งจริงๆ แล้วตารางควรจะถูกใช้เมื่อต้องการนำเสนอข้อมูลที่เป็นกลุ่มก้อนมากกว่า เช่น การแสดงรายการผลสอบของวิชาหนึ่ง หากเราจัดข้อมูลใส่ในตาราง ผลที่ได้ก็จะประกอบด้วยคอลัมน์ของ รหัสนักเรียน ชื่อนักเรียน คะแนนที่ได้ หรือเกรดที่ได้ ส่วนการควบคุมการแสดงผลอื่นๆ เราก็ใช้ eXtensible HyperText Markup Language (XHTML) และ Cascading Style Sheets (CSS) แทนนั้นเอง

สำหรับเทคนิค Tableless นี้ บางคนก็เรียกว่า Tableless layout หรือไม่ก็ CSS Layout เพราะเราจะใช้ CSS เข้ามาแสดงบทบาทแทนที่ตารางในการจัดการโครงสร้างเว็บไซต์ โดย CSS นั้นจะทำการควบคุมแท็กต่างๆ เช่น <div> หรือ <span> ว่าควรจะมีขนาดเท่าใด ตำแหน่งอยู่ตรงไหน ใช้รูปแบบอักษรอะไร ขนาดเท่าไร ใช้สีอย่างไร ฯลฯ ดังนั้นการใช้เทคนิค Tableless ในการพัฒนาเว็บไซต์นี้จะได้ผลลัพธ์ที่สำคัญมากประการหนึ่งคือ การแยกแยะส่วนข้อมูล และส่วนที่ใช้ควบคุมการแสดงผลออกจากกัน เมื่อต้องการแก้ไขส่วนของการแสดงผลเราก็เพียงเข้าไปแก้ในส่วนที่ใช้ควบคุม ซึ่งในที่นี้ก็คือ CSS นั้นเอง

เพราะฉะนั้นเราสามารถสรุปได้ว่าการออกแบบและพัฒนาเว็บไซต์ด้วยเทคนิค Tableless นั้น เราไม่ใช่จะไม่ใช้ Table เลย Table หรือตารางนั้นควรจะทำหน้าที่เฉพาะของมันนั้นก็คือ ใช้ในการแสดงข้อมูลที่มีความเกี่ยวเนื่องกัน เช่นตารางที่ใช้แสดงข้อมูลชื่อของสินค้า รหัสสินค้า ราคา และแหล่งผลิตเป็นต้น หรือใช้ในการแสดงข้อมูลต่างๆที่สมควรจะอยู่ในตาราง แต่จะไม่ใช่ในการควบคุมตำแหน่งการแสดงผลของวัตถุต่างๆ บนเว็บ

การศึกษาการใช้เทคนิค Tableless ในการพัฒนาเว็บไซต์นั้น จำเป็นที่จะต้องมีความรู้พื้นฐานในเรื่องของ CSS มาก่อน และควรทำการศึกษาตัวอย่างจากเว็บไซต์ที่ใช้ Tableless ในการพัฒนา เพื่อรวบรวมแนวคิดต่างๆในการออกแบบเพื่อใช้ในการพัฒนาต่อไป เช่น http://www.cssplay.co.uk, http://www.csszengarden.com, และ http://www.oswd.org เป็นต้น
หรือลองดูเว็บที่ออกแบบด้วย เทคนิค Tableless ดู เช่น WordPress ก็ได้เช่นกัน