แปลงหน้า XHTML CSS เป็นหน้าเครื่องพิมพ์

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

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

จากการแสดงผลหน้าจอถึงผลการพิมพ์

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

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

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

โซลูชัน CSS

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

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

นี่คือตัวอย่างที่เชื่อมโยงไปยังไฟล์ CSS คู่หนึ่ง:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<linkrel = stylesheetType = text/cssmedia = screenhref = mysite-screen.css/>

<linkrel = stylesheetType = text/cssmedia = printthref = mysite-print.css/>

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

ทำให้ CSS ง่ายขึ้น

หากคุณเต็มใจที่จะเลิกดูแลเบราว์เซอร์รุ่นเก่าและสมมติว่าผู้ใช้ของคุณใช้เบราว์เซอร์ที่เปิดใช้งาน CSS2 (เช่น IE5 และสูงกว่าหรือ NetScape6 ขึ้นไป) คุณสามารถใช้ตัวบ่งชี้สื่อทั้งหมดใหม่เพื่อลดความซับซ้อนของรหัส CSS ได้อย่างง่ายดาย

นี่คือตัวอย่างของการเชื่อมโยงโดยใช้ css2 media descriptors:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<linkrel = stylesheetType = text/cssmedia = allhref = mysite-all.css/>

<linkrel = stylesheetType = text/cssmedia = printthref = mysite-print2.css/>

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

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

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

เคล็ดลับนี้ใช้งานได้เนื่องจากไฟล์ Media CSS ทั้งหมดและไฟล์สื่อสิ่งพิมพ์ CSS รวมอยู่ในกฎสไตล์การเรียงซ้อนเดียวกัน ดังนั้นลำดับลิงก์ของไฟล์ CSS เหล่านี้จึงค่อนข้างสำคัญ ลิงก์ไฟล์สื่อทั้งหมดจะต้องวางไว้ก่อนที่จะพิมพ์ลิงค์ไฟล์สื่อ

นี่คือเคล็ดลับในการใช้ไฟล์สื่อสิ่งพิมพ์ CSS:

หากคุณห้ามการแสดงผลของ DIV คุณต้องใช้การแสดงผล: ไม่มีแทนที่จะมองเห็น: ซ่อน

ทั้งจุดหรือนิ้วไม่ได้เป็นหน่วยการวัดที่ถูกต้องสำหรับการแสดงหน้าจอ แต่เป็นหน่วยการวัดที่ถูกต้องสำหรับการพิมพ์

ตัวเลือกที่ใช้ในการพิมพ์ไฟล์สื่อควรเหมือนกับตัวเลือกที่คุณใช้ในไฟล์สื่อทั้งหมด ตัวอย่างเช่นหากคุณใช้ div #sidenav เพื่อเลือก divs ด้วย id เป็น sidenav ในไฟล์สื่อทั้งหมดจากนั้นการใช้ #Sidenav ในไฟล์สื่อการพิมพ์อาจไม่สามารถบรรลุเป้าหมายได้สำเร็จ

อย่าลืมบังคับให้แทนที่การประกาศกฎที่เปลี่ยนแปลงจากไฟล์หนึ่งไปอีกไฟล์หนึ่ง ตัวอย่างเช่นหากคุณตั้งค่าการขยายสำหรับองค์ประกอบในไฟล์สื่อทั้งหมดและต้องการลบช่องว่างภายในนี้ในการพิมพ์มันไม่เพียงพอที่จะเพิ่มสไตล์ที่ไม่สนใจการประกาศการพายในไฟล์สื่อสิ่งพิมพ์ - คุณต้องตั้งค่าการจัดงานอย่างชัดเจน: 0pt เพื่อแทนที่การตั้งค่าก่อนหน้า

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

เมื่อคุณต้องการให้หน้าเว็บที่เป็นมิตรกับผู้เยี่ยมชมของคุณคุณไม่จำเป็นต้องสร้างหน้าต้นฉบับที่แยกต่างหากอีกต่อไป การเพิ่มลิงก์ไปยังรูปแบบ CSS ด้วยสื่อ = ตัวอธิบายสื่อสิ่งพิมพ์สามารถแปลงหน้า XHTML/CSS ใด ๆ เป็นหน้าเครื่องพิมพ์ที่เป็นมิตรกับเครื่องพิมพ์