CSS ile yazıcı çıktı işlemleri

Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır
www.dijitalders.com

Bazı siteler ki, çoğunlukla önemli bazı haber siteleri her sayfanın bir de çıktıya uygun hallerini de hazırlarlar. Ancak bu çok uğraş gerektiren bir durumdur ve de zaman alacak bir iştir. Kullanışlı değildir.

CSS bu duruma el atarak basit bir çözüm getirmiştir. Çıktıya uygun css kodu oluşturup bunu sayfamıza ekleyerek bu sorunları halledebiliriz. Web tarayıcıları normal css kodunu yorumlarken yazıcıdan çıktı almak istediğimiz de ise sizin hazırladığınız özel çıktı versiyonu kullanılacaktır.

Çıktı Almak için CSS Oluşturmak

Çıktı almak için oluşturduğumuz özel css’i sayfamıza eklemek çok kolay bildiğimiz link ekleme koduna fazladan sadece media kısmı eklenerek değeri print atanır.

  1. <link rel=”stylesheet” type=”text/css” href=”ciktistil.css” media=”print”>

Diğer bir yöntemde import kullanımıdır.

  1. <style type="text/css">
  2. @import url("webicin.css") screen;
    www.dijitalders.com
  3. @import url("ciktial.css") print;
  4. </style>
Çıktıya Uygun CSS Hazırlarken Dikkat Edilecek Hususlar

Fontları Değiştirmek

İlk yapılacak şey fontları değiştirmektir. Yukarıda da belirttiğimiz gibi web sitelerinde kolay okunurluluğu nedeni ile san-serif fontları kullanılır( Verdana veya Arial gibi) çıktı almak içinse serif fontları kullanılmalıdır(Times New Roman veya Garamond gibi) Örneğin sayfa içindeki h1 veya p için yapılan sans-serfi fontları serif fontlarla değiştirelim.

  1. h1, p { font-family: Garamond, "Times New Roman", Times, serif; }

Web için verilen değerler px veya em yerine pt değeri kullanılmalıdır. Çıktı alırken daha iyi sonuçlar verir.

  1. h1 { font: 24pt Garamond, "Times New Roman", Times, serif; }
  2. p { font: 12pt Garamond, "Times New Roman", Times, serif; }

Ayrıca line-height değeri, font-weight değeri, word-spacing ve text-align değerlerini de çıktı ama durumu için düzenlemeliyiz. Bunu için we tarayıcılarının çıktı ön izleme özelliğinden yararlanabilriz. Firefox web tarayıcısının bu ve diğer web düzenlemeleri için güzel bir eklentisini de kullana bilrisiniz. Buradan indirebilirsiniz. http://chrispederick.com/work/webdeveloper/

Bazı Elementleri Kaldırmak

Sitemizdeki bazı elementler çıktı almamızda bize lazım olmayacaktır örneğin sol menü, bannerlar vb. Bu elementleri elemeliyiz bunun en kolay yöntemide display:none‘dır.

Bir elementin display özelliğini "none" yaparak çıktı alırken görütülenmesini engelleriz. Örneğin solmenu için #SolMenu tanımlması yapmış isek

  1. #SolMenu{display:none}

kodu ile bu bölümü çıktı alırken görüntü dışında bırakacağız. Bu yöntemi formlar, menüler, bannerlar, ana resimler hariç diğer resimler vb. gereksiz bölümleri bu şekilde çıkarmalıyız.

Margin’ler, Renkler ve Diğerleri

Çıktı alırken yazıların tabloları ve diğer elementlerin daha açık ve net görünmesi için aralarına belirli mesafeler vermeliyiz.

  1. table { margin-top:10px;}
  2. div { margin:10px}

Çıktı alacağımız sayfalarda px vd. birimler yerine inç birimini kullanmak daha iyi sonuçlar verir.

  1. table{margin:sin}
  2. div{margin:1in}

Renklerle ilgili olarakta şunu söyleyebilriz ki, web sitelerinde bir çok renk kullanılır ancak bu renklerin çıktı alırken görünümü web tarayıcılrdaki görünümüne benzemez, bu nednele fontları siyah veya grinin toplarında yapmalıyız. Arkaplanı da beyaz yapmalıyız.

Bunu dışında diğer elementlerin çıktı alırken görünüşleri çıktı ön izleme ekranından bakılarak çıktıya en uygun duruma getirilebilir.

Sonuçta yapılacakları kısa özetlersek:www.dijitalders.com

  • Renklerin siyah-beyaz yapılması
  • Font ailelerinin serif yapılması
  • font-size değerlerinin ayarlanması
  • Tüm linklerin altının çizilmesi
  • Çıkarılması gereken bölümler için site yapısı katmanlardan oluşturlması
  • Ana resimler hariç diğerlerinin çıkarılması
  • Menülerin çıkarılması
  • Banner ve tanıtım yazılarının çıkarılması
  • Sağ, Sol ve alt bölümlerin çıkarılması
  • Tüm javascript, flash, form ve hareketli gif’lerin çıkarıtlması gereklidir.
Kaynak www.fatihhayrioglu.com/

23,157 Okunma Henüz yorum yapılmamış 11/07/2007 00:05:06

Yorumunuzu Ekleyin
Görsel Liste


CSS ile Web Sayfası Oluşturma

CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.

76,539 okuma, 31/05/2014

CSS ile Web Sayfası Oluşturma
Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Semih güzelel

61,554 okuma,

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri
Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Cssin html içerisinde kullanım şekilleri, puseduo class örnekleri

59,803 okuma,

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri
Css İle Hizalama İşlemleri

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.

57,755 okuma, 29/12/2013

Css İle Hizalama İşlemleri
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz.

45,600 okuma, 16/12/2013

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.
Tek Parça Resim Dosyasından İlgili Resmi Css İle Gösterme

Tek parça resim dosyası

28,644 okuma,

Tek Parça Resim Dosyasından İlgili Resmi Css İle Gösterme
CSS Konumlandırma (Position)

CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.

27,983 okuma, 29/12/2013

CSS Konumlandırma (Position)
CSS ile Content Menü Yapımı

İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı

27,404 okuma,

CSS ile Content Menü Yapımı
CSS’i Web Sayfalarına Eklemek

CSS’in yapısı iki ana kısımdan oluşur.Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block).Bildirim Bloğuda iki ye ayrılır.Özellik(Property) ve Değer(Value)

27,088 okuma, 25/10/2024

CSS’i Web Sayfalarına Eklemek
CSS Seçicileri

CSS diğer web standartlarından çok farklıdır. CSS olarak da bilinen Cascading Style Sheets, daha zarif bir şekilde tasarlanmış web sayfaları oluşturmak için kullanılan bir tasarım dilidir. Bir öğe bir seçiciye göre seçilir ve şekillendirilebilir. HTML öğeleri CSS seçicileri kullanılarak şekillendirilebilir.

25,118 okuma, 22/11/2024

CSS Seçicileri
Internet Explorer Koşullu İşlemleri

Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.

23,929 okuma,

Internet Explorer Koşullu İşlemleri
CSS Tanımlamalarında Kullanılan Ölçü Birimleri

23,251 okuma,

CSS Tanımlamalarında Kullanılan Ölçü Birimleri
Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements

Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements

22,799 okuma,

Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements
Cssin Html İçerisinde Kullanım Şekilleri, Pseudo Class Örnekleri

Cssin html içerisinde kullanım şekilleri, pseudo class örnekleri

22,692 okuma,

Cssin Html İçerisinde Kullanım Şekilleri, Pseudo Class Örnekleri
Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

22,205 okuma,

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.

22,074 okuma,

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.
Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements gibi css nesnelerinin açıklamaları ve örnekleri.

21,462 okuma,

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements
CSS te kullanılan kısaltmalar

CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz

21,169 okuma,

CSS te kullanılan kısaltmalar
Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

Background, border, classification, dimension, font, generated content, list and marker, margin

20,940 okuma,

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin
Background, Border, Dimension, Font, List And Marker, Margin

20,613 okuma,

Background, Border, Dimension, Font, List And Marker, Margin
Şerit Halindeki Resimden Bölümler Almak

Sitelerin yüklenme hızını arttıran ve template yapısına uygun olmasını sağlayan CSS özelliği hakkında bir makale

20,579 okuma,

Şerit Halindeki Resimden Bölümler Almak
Tek parça resim dosyasından ilgili resmi CSS ile kullanmak

20,550 okuma,

Tek parça resim dosyasından ilgili resmi CSS ile kullanmak
Pseudo-sınıfları ve Pseudo-elementleri

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi. )

20,512 okuma,

Pseudo-sınıfları ve Pseudo-elementleri
(X)HTML Döküman Hiyerarşisini Anlamak

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

20,378 okuma,

(X)HTML Döküman Hiyerarşisini Anlamak
CSS Classları Hakkında

Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale

20,131 okuma,

CSS Classları Hakkında
CSS ile kullanımdan kalkan özellikler

CSS kullanımı ile tedavülden kalkan veya kullanımı azalan özellikleri sıralayalım:

20,042 okuma,

CSS ile kullanımdan kalkan özellikler
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası Ve Class Css De Neyi İfade Eder.

19,818 okuma,

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası Ve Class Css De Neyi İfade Eder.
Özellik Seçicileri(Attribute Selectors)

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri

19,514 okuma,

Özellik Seçicileri(Attribute Selectors)
CSS Shorthand(kısacası) Tenikleri

Uzun parametlereler alan CSS taglarının kısaca yazılış metotları

19,451 okuma, 03/10/2024

CSS Shorthand(kısacası) Tenikleri
CSS ve Filitreler

18,900 okuma,

CSS ve Filitreler
Yükleniyor...
Yükleniyor...