Di masa lalu, membuat versi yang ramah printer dari halaman web berarti merancang halaman terpisah dengan tata letak dan pemformatan yang dimodifikasi sehingga Anda dapat mencapai hasil yang memuaskan saat mencetak. Sekarang, dengan menggunakan XHTML dan CSS terstruktur, Anda dapat mencapai efek yang sama dengan upaya yang jauh lebih sedikit. Sebagian besar halaman web dari layar layar untuk mencetak efek
Di masa lalu, membuat versi yang ramah printer dari halaman web berarti merancang halaman terpisah dengan tata letak dan pemformatan yang dimodifikasi sehingga Anda dapat mencapai hasil yang memuaskan saat mencetak. Sekarang, dengan menggunakan XHTML dan CSS terstruktur, Anda dapat mencapai efek yang sama dengan upaya yang jauh lebih sedikit.
Dari layar layar hingga efek mencetak
Sebagian besar halaman web dirancang agar cocok untuk dilihat di layar komputer. Namun, kadang-kadang pengguna perlu mencetak halaman tertentu, mungkin hanya untuk menyimpan catatan jangka panjang, atau menggunakannya sebagai referensi offline yang nyaman.
Masalahnya sekarang adalah bahwa banyak fitur yang membuat halaman web terlihat menarik dan berwarna -warni pada layar warna komputer tidak dapat menunjukkan efek yang sama pada versi cetak dari halaman web - terutama ketika printer berwarna hitam dan putih. Ketika diturunkan ke pencetakan skala abu -abu, kombinasi warna akan kehilangan efek kontras (asli); Grafik akan terlihat terdistorsi dan terlalu lama untuk dicetak; Tombol navigasi yang memainkan peran penting di halaman web tidak berguna di halaman pencetakan.
Untuk mengatasi masalah ini, pembuat web sering merancang versi halaman yang ramah printer sehingga pengunjung memiliki keinginan untuk mencetak. Versi ramah printer biasanya menyertakan konten yang sama dengan halaman web utama, tetapi sebagian besar grafik, latar belakang, dan elemen navigasi dihilangkan. Halaman ini juga mengubah warna menjadi beberapa bentuk untuk menghasilkan gambar skala abu -abu yang dapat diterima.
Solusi CSS
Salah satu keuntungan memisahkan konten dan representasi menggunakan tag XHTML terstruktur dan format CSS adalah bahwa dengan mengubah gaya CSS, Anda dapat dengan mudah memformat ulang konten. Oleh karena itu, membuat halaman yang ramah printer adalah menautkan file CSS yang berbeda ke halaman XHTML yang sama.
Anda dapat menautkan lembar gaya layar dan lembar gaya cetak ke file XHTML yang sama secara bersamaan, jadi tidak perlu membuat halaman ramah printer secara terpisah, hanya lembar gaya ramah printer yang cukup. Saat Anda menambahkan file jenis multimedia ke kode tautan, ini memberi tahu browser mana aturan CSS untuk diikuti atau diabaikan untuk output layar, dan aturan mana yang akan digunakan untuk dicetak.
Berikut adalah contoh yang menghubungkan ke sepasang file CSS:
Berikut ini adalah konten yang dikutip:
<linkrel = stylesheettype = text/cssmedia = screenhref = mysite-screen.css/>
<linkrel = stylesheettype = text/cssmedia = printThref = mysite-print.css/>
Jika Anda perlu mendukung browser yang lebih lama, Anda harus tetap menggunakan layar deskriptor media CSS1 dan mencetak. Mereka saling eksklusif, jadi ketika menghasilkan halaman untuk tampilan layar, browser mengabaikan lembar gaya cetak dan sebaliknya. Jadi, setiap stylesheet perlu berisi pemilih gaya yang sama, tetapi ada deklarasi aturan yang berbeda untuk menghasilkan gaya halaman secara terpisah untuk perangkat output yang berbeda.
Sederhanakan CSS
Jika Anda bersedia menyerah merawat browser yang lebih lama dan menganggap pengguna Anda menggunakan browser yang mendukung CSS2 (seperti IE5 dan di atas atau Netscape6 dan di atas), Anda dapat menggunakan deskriptor semua media baru untuk sangat menyederhanakan kode CSS.
Berikut adalah contoh tautan menggunakan deskriptor media CSS2:
Berikut ini adalah konten yang dikutip:
<linkrel = stylesheetType = text/cssmedia = allhref = mysite-all.css/>
<linkrel = stylesheettype = text/cssmedia = printThref = mysite-print2.css/>
Tautan ini hampir persis sama dengan yang sebelumnya; Perbedaannya adalah bahwa file CSS berisi gaya untuk media cetak.
Gaya yang terkait dengan media = semua dalam file CSS dapat diterapkan untuk tampilan layar, pencetakan, dan semua media lainnya, sehingga Anda dapat memasukkan semua gaya yang dibuat ke dalam file ini. File CSS yang secara individual terkait dengan media = cetak bisa jauh lebih kecil karena halaman mewarisi semua gaya dari semua file media, jadi tidak perlu menyalin gaya ini dalam file media cetak.
Satu -satunya gaya yang dibutuhkan dalam file CSS media cetak adalah yang mengubah atau menambahkan gaya halaman untuk cetakan. Secara umum, ini tidak lebih dari beberapa gaya yang melarang menampilkan div yang berisi grafik dan konten navigasi, dan mengganti label tubuh dan lebar dan pengaturan kosong dari div utama dengan pengaturan yang cocok untuk cetakan.
Trik ini berfungsi karena semua file CSS media dan file cetak media CSS digabungkan menjadi aturan gaya cascading yang sama. Oleh karena itu, urutan tautan file CSS ini cukup penting. Semua tautan file media harus ditempatkan sebelum mencetak tautan file media.
Berikut adalah beberapa tips tentang menggunakan file CSS media cetak:
Jika Anda melarang tampilan div, Anda harus menggunakan tampilan: tidak ada alih -alih visibilitas: disembunyikan.
Baik titik maupun inci adalah unit pengukuran yang benar untuk tampilan layar, tetapi mereka adalah unit pengukuran yang benar untuk cetakan.
Pemilih yang digunakan dalam mencetak file media harus persis sama dengan pemilih yang Anda gunakan di semua file media. Misalnya, jika Anda menggunakan Div #Sidenav untuk memilih Divs dengan ID sebagai Sidenav di semua file media, maka menggunakan #SidenAV dalam mencetak file media mungkin tidak dapat berhasil mencapai tujuan Anda.
Jangan lupa untuk secara eksplisit memaksa mengganti deklarasi aturan yang berubah dari satu file ke yang lain. Misalnya, jika Anda mengatur padding untuk elemen di semua file media dan ingin menghapus padding ini dalam cetakan, tidak cukup untuk menambahkan gaya yang mengabaikan deklarasi padding dalam file media cetak - Anda harus secara eksplisit mengatur padding: 0pt untuk mengganti pengaturan sebelumnya.
Jika Anda menggunakan editor grafis seperti Dreamweaver, Anda dapat melihat pratinjau efek layar dari halaman yang dihasilkan alih -alih efek cetakan. Untuk mempratinjau gaya cetak di jendela DreamWeaver Design, ubah tautan ke file cetak media CSS ke media = layar. Ini memungkinkan Anda untuk mempratinjau gaya CSS dalam file media cetak. Jangan lupa untuk mengubah deskriptor media kembali ke media = cetak sebelum memposting halaman Anda.
Ketika Anda perlu memberi pengunjung halaman web yang ramah printer, Anda tidak perlu lagi membuat versi terpisah dari halaman asli. Menambahkan tautan ke CSS Stylesheet dengan Media = Print Media Descriptor dapat mengubah halaman XHTML/CSS apa pun menjadi halaman ramah printer.