เว็บเพจมีไว้เพื่อให้ดูบนหน้าจอ แม้ว่าจะมีอุปกรณ์ที่เป็นไปได้มากมายที่สามารถนำมาใช้เพื่อดูไซต์ (เดสก์ท็อปแล็ปท็อปแท็บเล็ตโทรศัพท์อุปกรณ์เสริมที่สามารถสวมใส่ได้โทรทัศน์ ฯลฯ ) อุปกรณ์เหล่านี้ทั้งหมดมีหน้าจอบางชนิด มีบางวิธีที่คนอื่นอาจดูเว็บไซต์ของคุณซึ่งเป็นวิธีที่ไม่มีหน้าจอ เรากำลังหมายถึงการพิมพ์ภาพจริงของหน้าเว็บของคุณ
หลายปีมาแล้วคุณจะพบว่าเว็บไซต์การพิมพ์สำหรับคนเป็นสถานการณ์ปกติทั่วไป เราจำการประชุมกับลูกค้าจำนวนมากที่เป็นคนใหม่ในเว็บและรู้สึกสะดวกสบายในการอ่านหน้าพิมพ์ของเว็บไซต์ จากนั้นพวกเขาได้ให้ข้อเสนอแนะและแก้ไขบทความเหล่านี้แทนที่จะมองหน้าจอเพื่อพูดคุยเกี่ยวกับเว็บไซต์ ในขณะที่ผู้คนรู้สึกสบายกับหน้าจอมากขึ้นในชีวิตของพวกเขาและในขณะที่หน้าจอเหล่านั้นทวีคูณขึ้นหลายครั้งเราได้เห็นผู้คนน้อยลงที่พยายามพิมพ์หน้าเว็บลงในกระดาษ แต่ก็ยังไม่เกิดขึ้น คุณอาจต้องการพิจารณาปรากฏการณ์นี้เมื่อวางแผนออกจากเว็บไซต์ของคุณ คุณต้องการให้ผู้คนพิมพ์หน้าเว็บของคุณหรือไม่? บางทีคุณอาจทำไม่ได้ หากเป็นกรณีดังกล่าวคุณมีทางเลือกบางอย่าง
วิธีการบล็อกหน้าเว็บจากการพิมพ์ด้วย CSS
ใช้ CSS ได้ง่ายเพื่อป้องกันไม่ให้ผู้คนพิมพ์หน้าเว็บของคุณ คุณเพียงแค่ต้องสร้างสไตล์ชีต 1 บรรทัดที่ชื่อว่า "print.css" ซึ่งมีบรรทัดต่อไปนี้ของ CSS
body {display: none; }
รูปแบบนี้จะเปลี่ยนองค์ประกอบ "body" ของหน้าเว็บให้เป็นแบบไม่แสดงผลและเนื่องจากทุกสิ่งทุกอย่างบนหน้าเว็บของคุณเป็นองค์ประกอบหลักของร่างกายซึ่งหมายความว่าทั้งหน้าเว็บ / ไซต์จะไม่ปรากฏขึ้น เมื่อคุณมีสไตล์ชีต "print.css" แล้วคุณจะโหลดลงใน HTML เป็นสไตล์ชีตการพิมพ์ นี่คือวิธีที่คุณจะทำ - เพียงเพิ่มบรรทัดต่อไปนี้ลงในส่วนหัว "" ในหน้า HTML ของคุณ
ข้อมูลนี้บอกเบราว์เซอร์ว่าถ้าหน้าเว็บนี้ถูกตั้งค่าให้พิมพ์เพื่อใช้สไตล์ชีทนี้แทนสไตล์ชีตที่เป็นค่าเริ่มต้นที่หน้าเว็บใช้สำหรับการแสดงผลบนหน้าจอ เมื่อหน้าเว็บเปลี่ยนเป็นแผ่น "print.css" นี้ลักษณะที่ทำให้ทั้งหน้าไม่แสดงขึ้นจะเตะลงไปและสิ่งที่พิมพ์ออกจะเป็นหน้าเปล่า หากคุณไม่ต้องการบล็อกหน้าเว็บจำนวนมากในไซต์ของคุณคุณสามารถปิดกั้นการพิมพ์แบบทีละหน้าโดยมีรูปแบบต่อไปนี้วางลงในส่วนหัวของ HTML ของคุณ
สไตล์ในหน้านี้จะมีความจำเพาะสูงกว่าสไตล์ใด ๆ ในสไตล์ชีตภายนอกซึ่งหมายความว่าหน้าเว็บจะไม่พิมพ์เลยในขณะที่หน้าอื่น ๆ ที่ไม่มีบรรทัดนี้จะพิมพ์ตามปกติ จะทำอย่างไรถ้าคุณต้องการบล็อกการพิมพ์ แต่ไม่ต้องการให้ลูกค้าของคุณผิดหวัง หากพวกเขาเห็นการพิมพ์หน้าว่างพวกเขาอาจรู้สึกเสียใจและคิดว่าเครื่องพิมพ์หรือคอมพิวเตอร์ของพวกเขาชำรุดและไม่ทราบว่าคุณได้ยกเลิกการพิมพ์เป็นหลัก! เพื่อไม่ให้ผู้เยี่ยมชมรู้สึกหงุดหงิดคุณจะได้รับความคลั่งไคล้เล็กน้อยและใส่ข้อความที่จะแสดงเมื่อผู้อ่านพิมพ์หน้า - แทนที่เนื้อหาอื่น ในการทำเช่นนี้ให้สร้างหน้าเว็บมาตรฐานของคุณและที่ด้านบนสุดของหน้าขวาหลังจากแท็ก body ให้ใส่: และปิดแท็กนั้นหลังจากเขียนเนื้อหาทั้งหมดไว้ที่ด้านล่างสุดของหน้า: จากนั้นหลังจากที่คุณปิด div "noprint" แล้วให้เปิด div อื่นด้วยข้อความที่คุณต้องการแสดงเมื่อพิมพ์เอกสาร: หน้านี้มีวัตถุประสงค์เพื่อให้ดูออนไลน์และอาจไม่สามารถพิมพ์ได้ โปรดดูหน้านี้ที่ http://webdesign.about.com/od/advancedcss/qt/block_print.htm ใส่ลิงค์ไปยังเอกสาร CSS ที่พิมพ์ print.css:
และในเอกสารฉบับดังกล่าวมีรูปแบบดังนี้: #noprint {display: none; } #print {display: block; }
สุดท้ายในสไตล์ชีตมาตรฐานของคุณ (หรือในรูปแบบภายในในหัวเอกสารของคุณ) เขียน: #print {display: none; } #noprint {display: block; }
ซึ่งจะช่วยให้มั่นใจได้ว่าข้อความพิมพ์จะปรากฏเฉพาะบนหน้าพิมพ์เท่านั้นในขณะที่หน้าเว็บปรากฏเฉพาะบนหน้าเว็บออนไลน์เท่านั้น การพิมพ์หน้าเว็บโดยทั่วไปเป็นประสบการณ์ที่ไม่ดีเนื่องจากไซต์ปัจจุบันมักไม่ค่อยแปลดีในหน้าพิมพ์ หากคุณไม่ต้องการสร้างสไตล์ชีตที่แยกกันทั้งหมดเพื่อกำหนดสไตล์การพิมพ์คุณสามารถลองใช้ขั้นตอนจากบทความนี้เพื่อพิมพ์ "ปิด" บนหน้าเว็บ ตระหนักถึงผลกระทบที่อาจเกิดกับผู้ใช้ที่พึ่งพาการพิมพ์เว็บไซต์ (อาจเป็นเพราะพวกเขามีวิสัยทัศน์ที่แย่และพยายามอ่านข้อความบนหน้าจอ) และตัดสินใจว่าจะสามารถใช้ได้กับผู้ชมเว็บไซต์ของคุณ บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard บล็อกหน้าเว็บทีละหน้า
ดูหน้าเว็บที่บล็อกของคุณ
พิจารณาประสบการณ์การใช้งานของผู้ใช้
