Membuat tampilan untuk monitor dan print berbeda di WEB

Juli 14, 2010 utami99

Tampilan untuk monitor dan untuk print harusnya berbeda karena tidak mungkin kita membuat laporan cetak dan di situ terdapat menu navigasi, belum lagi background yang menggangu. Yup, se Untuk itu kita harus membuat 2 versi halaman kita. Versi layar monitor dan versi cetak.

Berikut cara-cara membuat dua versi halaman, yakni: versi layar monitor dan versi cetak yang bisa Anda pilih salah satunya:

menggunakan tag PHP untuk memanggil 2 file CSS
menggunakan tag HTML untuk memanggil 2 file CSS
menggunakan @import url
menggunakan satu file CSS untuk dua versi tampilan

1. Menggunakan tag PHP untuk memanggil 2 file CSS

Berikut kode PHPnya dan letakkan di bagian <HEAD> pada kode HTML Anda.

view plain copy to clipboard print

<?php if ($_GET['q'] == ”printme”) { ?>

</p>

<?php } else { ?>

Kelemahan dari cara ini adalah harus load ulang halaman. bayangkan jika halaman yang akan kita cetak merupakan bentuk rekapitulasi dengan banyak query dan loadnya sangat lama. Wew tidak praktis. Cara ini sama saja dengan membuat link ke halaman baru, dengan desain halaman baru yang minimalis, yang sengaja disiapkan untuk cetak laporan.

2. Menggunakan tag HTML untuk memanggil 2 file CSS

view plain copy to clipboard print

Cara ini yang sering penulis gunakan. Cukup membuat 2 file CSS yang berbeda dan menempatkan tag tersebut di bagian <HEAD>. kemudian menyembunyikan <div> yang tidak ingin kita tampilkan. Lebih lengkapnya bisa dilihat di pembahasan selanjutnya.

3. Menggunakan @import url

view plain copy to clipboard print

@import url(print.css) print,projection;

@import url(print.css) print,projection; Hampir sama dengan cara di atasnya, cuman beda kode.

4. Menggunakan satu file CSS untuk dua versi tampilan

view plain copy to clipboard print

@media screen {

BODY {font-size: medium; line-height: 1em; background: silver;}

}

@media print {

BODY {font-size: 10pt; line-height: 120%; background: white;}

}

</STYLE>

<STYLE type=”text/css”> @media screen { BODY {font-size: medium; line-height: 1em; background: silver;} } @media print { BODY {font-size: 10pt; line-height: 120%; background: white;} } </STYLE>

cara ini juga bagus dan bahkan hanya menggunakan 1 file CSS. Yup, style untuk dua versi tampilan (layar dan printing) dalam satu file CSS.

Baiklah, sekarang kita mulai praktek membuat laporan di web yang bisa langsung kita cetak. Tapi sebelumnya mari kita lihat versi layar untuk aplikasi SIMPEG yang penulis buat.

view plain copy to clipboard print

#atas{

height: 100px; /*Height of top section*/

background:url(items/header.jpg) repeat-x #2D1721;

}

#atas h1{

margin: 0;

padding-top: 15px;

}

#wrapper{

float: left;

width: 100%;

}

#isi{

margin-right: 170px;

}

#kanan{

float: left;

width: 170px; /*Width of right column in pixels*/

margin-left: -170px; /*Set left margin to -(RightColumnWidth) */

}

#bawah{

clear: left;

width: 100%;

background: black;

color: #FFF;

text-align: center;

padding: 4px 0;

}

#atas{ height: 100px; /*Height of top section*/ background:url(items/header.jpg) repeat-x #2D1721; } #atas h1{ margin: 0; padding-top: 15px; } #wrapper{ float: left; width: 100%; } #isi{ margin-right: 170px; } #kanan{ float: left; width: 170px; /*Width of right column in pixels*/ margin-left: -170px; /*Set left margin to -(RightColumnWidth) */ } #bawah{ clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; }

File di atas disimpan dengan nama layar.css

Kalau untuk printing tentunya kita harus menyingkirkan <div> yang tidak diperlukan. Dengan CSS kita bisa menyembunyikannya. Berikut CSS lengkapnya.

view plain copy to clipboard print

#atas, #kanan, #bawah

{display:none;}

#wrapper{

float: left;

width: 100%;

}

#isi{

width: 100%;

}

#atas, #kanan, #bawah {display:none;} #wrapper{ float: left; width: 100%; } #isi{ width: 100%; }

Selanjutnya disimpan menjadi print.css

Dan untuk format tampilan <div> yang masih kita tampilkan perlu mendapat beberapa perubahan, seperti lebar kita set 100% dan background gambar kita ubah menjadi background warna putih.

Untuk menampilkan 2 file CSS di atas kita menggunakan kode sebagai berikut:

view plain copy to clipboard print

<p>

Like this:

Be the first to like this post.

Entry Filed under: IT

← Cara Membuat Website

Satu komentar Add your own

1. Brahmanto Anindito | Juli 19, 2010 pukul 8:38 am

Info yg berguna Aku coba ya …

Balas

Tinggalkan Balasan Cancel reply

Enter your comment here...

Fill in your details below or click an icon to log in:

Email (wajib) (Address never made public)

Nama (wajib)

Situs web

You are commenting using your WordPress.com account. ( Log Out / Ubah )

You are commenting using your Twitter account. ( Log Out / Ubah )

You are commenting using your Facebook account. ( Log Out / Ubah )

Batal

Connecting to %s

Trackback this post | Subscribe to comments via RSS Feed

S	S	R	K	J	S	M
« Jun
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

	Brahmanto Anindito on Membuat tampilan untuk monitor…
	muslim on Noordin M Top Buronan yang mas…
	kupatahu28 on Tujuan manusia sebenarnya
	sedjatee on Tujuan manusia sebenarnya
	Septa on Noordin M Top Buronan yang mas…
	Mahrus Fauzi on Noordin M Top Buronan yang mas…
	hakimcool on Pesawat garuda terbang ke Uni…
	velsy on Hello to my friend
	Adinda on Pesawat garuda terbang ke Uni…
	teadonk on Ketika jodohmu tak kunjung…
	dewie on Pesawat garuda terbang ke Uni…
	little erni on Galeri
	little erni on Hello to my friend
	puguhoke on Ketika jodohmu tak kunjung…
	liephenkpetroza on Kurangi Software dengan k…