Html sayfanın yazıcı çıktısını biçimlendirme
4272 0

Html Sayfanın Yazıcı Çıktısını Biçimlendirme

Herhangi bir internet sayfasında yazdır komutu verildiğinde, sayfada bulunan menülerin, sayfa başlığının v.s. görüntülenmesini istemiyorsanız sayfanın yazıcı çıktısını biçimlendirmelisiniz. 

Sayfanız internet ortamındaki görüntüsünü biçimlendirmek için bir stil dosyası eklersiniz ve bunu "link" etiketi ile yaparsınız. Bu etiketin bir "media" özelliği var ve siz bir değer vermediğiniz sürece başlangıç ayarı "screen" yani ekranlar için ayarlanmış durumdadır. Bunun yanı sıra diğer yayın ortamları için bu özelliği ayarlamalısınız. Konumuzda belirttiğimiz gibi yazıcı çıktısı için "print" olarak ayarlanmalıdır. Örneğimizde ekran çıktısı için "ekran.css" dosyası, yazıcı çıktısı için "yazici.css" dosyası kodlanmıştır.

Örnekte küçük bir de javascript kodu kullanılmıştır. "window.print()" diyerek mevcut sayfa yazıcıya gönderiliyor.

index.html dosyası; 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
	<title>Yazıcı Çıktısını Biçimlendirme</title>
	<link rel="stylesheet" href="ekran.css" media="screen"/>
	<link rel="stylesheet" href="yazici.css" media="print"/>	
</head>
<body>
	<div id="dis">
		<div id="banner">Yazıcı İçin Stil Oluştur...</div>
		<div id="icerik">
			<div id="sol">
				Burada Menü olsun
			</div>
			<div id="sag">
				<h1>Konu Başlık</h1>
				<img src="logo.jpg" alt="" />
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, 
				Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik, Konu içerik,  
				<a href="javascript:void(0)" onclick="window.print()" id="yazdir">Konuyu Yazdır</a>
			</div>			
			<br style="clear:both;"/>
		</div>
	</div>
</body>
</html>

ekran.css dosyası;

*{margin:0px; padding:0px;}
#dis{width:700px; background-color:#EEE; border:2px solid #DDD; margin:10px auto;}
#banner{height:150px; background-color:#000; color:#FFF; margin-bottom:10px; font-size:30pt; line-height:150px;}
#sol{width:150px; float:left;}
#sag{width:550px; float:right;}
#sag h1{background-color:#333; color:#FFF;}
#sag img{float:left; margin:10px; width:300px; height:400px;}
#yazdir{display:block; width:150px; height:30px; float:right; margin-top:20px;}

yazici.css dosyası;

#banner{display:none;}
#sol{display:none;}
#sag img{float:left; margin:5px; width:300px; height:400px;}
#yazdir{display:none;}

 

^
X