Daha İyi Baskı Stil Sayfaları İçin 10 İpucu
Baskı stil sayfaları biraz unutuldu ve yine de hepsi aynı derecede önemli. Birçok kişi, seyahat ederken veya İnternet'e erişemediğinde okumak için makaleler yazdırır.
Baskı stil sayfalarının belirli yararları vardır . Örneğin, kağıt üzerinde okumak, ekranda okumadan daha az yorucu gözüküyor.
Ayrıca, kod editörünüzün ekranda açık olması ile yanınızda bir tane varsa, öğreticilerin takip edilmesi daha kolaydır; Bu şekilde, bir şeyler aramak için her seferinde pencereleri değiştirmek zorunda kalmazsınız.
Bu yazıda , daha iyi baskı stil sayfaları oluşturmanıza yardımcı olacak 10 kolay ipucu göstereceğiz .
Unuttuğunuz takdirde, bir baskı stili sayfası nasıl ayarlanır?
media="print" attribute ensures that users don't see any of the styles defined in the print.css file. özniteliği, kullanıcıların print.css dosyasında tanımlanan stilleri görmemesini sağlar.
Bununla birlikte, bazı dikkat edilmesi gerekir: Ana stil sayfanızda ortam özelliği yoksa, baskı stili sayfası stilini devralır. Bunları ayırmak için ana stil sayfanızı aşağıdaki gibi ayarlayın:
Baskı stil sayfasıyla başlamanıza yardımcı olacak 10 ipucu.
1. Navigasyonu kaldırın
Kağıt ve bilgisayar arasındaki ana fark nedir? Bir bilgisayar etkileşimli iken, kağıt statiktir. Ve bu etkileşimi kolaylaştırmak için, web sitelerinde kağıt üzerinde işe yaramaz hale gelen gezinme vardır.
Web sitenizin diğer yazılara yönlendiren kenar çubukları gibi kağıt üzerinde anlamsız hale gelen gezinmeyi ve diğer bölümlerini gizleyin. Bunun için kod çok kolaydır: sadece öğenin display için none .
2. İçerik Alanını Büyüt
Gezinme ve kenar çubuğu kaldırıldığında, içeriğimiz artık sayfada yayılıyor. Bu, yazdırma stil sayfasının, web sitesinin bir kağıt sürümü yerine normal bir belgeye benzemesini sağlar.
İçeriği genişletmek için tek yapmamız gereken, float'ı sıfırlamak, marjları kaldırmak ve genişliği% 100'e ayarlamaktır.
[css] #content {genişlik:% 100; kenar boşluğu: 0; yüzdürme: yok;} [/ css]3. Arka Plan Renklerini Sıfırla
Çoğu tarayıcı, mürekkebi korumak için arka plan özelliklerini zaten göz ardı etmektedir. Fakat tüm arka planın beyaz olduğundan emin olmak için, gövdeyi beyaza ayarlayabilir ve ardından her alt öğeyi sayfaya yine beyaz bir arka plan verebiliriz.
[css] vücut {arka plan: beyaz;} # içerik {background: transparent;} [/ css]4. Metin Renklerini Sıfırla
Arka planı sıfırlayarak başka bir sorun ortaya çıkıyor. Gönderinizin sonunda açık gri veya beyaz olan koyu gri “Yazar bilgisi” kutunuz varsa ne olur? Arka plan şimdi beyaz olarak ayarlandığında, bu bilgi görünmez olacak.
Bunu düzeltmek için, açık renkli bir metni daha koyu bir şeye değiştirin: siyah veya tercihen koyu gri.
[css] #author {color: # 111;} [/ css]
almak Sam Brown Yukarıdaki blog. Metnin renklerini sıfırlamadığında bunun nasıl olacağını hayal edebiliyor musunuz? Gerçekten okunamaz.
5. Bağlantıların Hedefini Gösterme
Kağıt etkileşimli bir ortam olmadığı için, okuyucular daha fazla bilgi toplamak için linkleri tıklayamazlar.
Birinin süslü yeni bir ürün hakkında bir çıktıyı okuduğunu söyle. “Daha fazla bilgi için buraya tıklayın” ifadesini görmek aniden rahatsız edici olabilir, değil mi? Bağlantı metninin kendisinden sonra link hedefinin eklenmesiyle bu durum kolayca giderilebilir, size şöyle bir şey verir: “Daha fazla bilgi için buraya tıklayın (http://hereismore.com/information).”
Dahası, CSS 2'ye hazır tarayıcılar için bu, eski düz CSS ile yapılabilir. İşte kod:
[css] a: bağlantı: {content: "sonra (" attr (href) ")";} [/ css]Daha küçük yazı tipi, italik ya da başka bir şey ile şeyleri baharatlayabilirsiniz.
6. Bağlantıların Düzenli Metinden Çıkmasını Sağlayın
Okuyucular, normal metinlerden bağlantıları ayırt edebilmelidir. Temel kullanım kuralları burada uygulanmaktadır: mavi ve altı çizili tercih edilir, fakat ben de cıvata eklemeyi tercih ederim.
Belgelerin çoğunlukla siyah beyaz yazdırıldığını unutmayın. Sadece renk farklılıklarına bağlı kalmayın. İşte mantıklı basılı linkler için kod:
[css] a: link {font-weight: kalın, metin-dekorasyon: alt çizgi; renk: # 06c;} [/ css]# 0066cc, taze bir mavi renktir ve gri tonlarında yazdırıldığında # 999999 gibi görünür. Bu sayede, bağlantılar renkli veya siyah beyaz olarak iyi görünecektir. Düzenli metinlerden de öne çıkacaklar.
7. Yazı Tipi Boyutu Nedir?
Baskıda 12 puan standarttır. Fakat bunu CSS'ye nasıl çevireceğiz? Bazıları yazı tipi boyutunu 12 punto (pt) olarak ayarlamanın yeterli olduğunu söylüyor. Diğerleri bunu% 100 olarak ayarlamanızı önerir. Yine de diğerleri, yazdırma stil sayfanızda herhangi bir yazı tipi boyutunu bildirmemeyi tercih ederler, çünkü bunu yapmak kullanıcının tercihlerini geçersiz kılar.
Şahsen, çoğu zaman 12 punto yazı tipi boyutu ile giderim:
[css] p {font-size: 12pt;} [/ css]8. Yazı Tipleri Nedir?
Çoğu insan serif yazı tiplerini tercih eder çünkü göze daha az yorulurlar, okuyucuyu metin boyunca yönlendirirler, vb. ayarlamak font-family için serif Bazı stil okuyucular, yazı biçimlerindeki yazı tiplerinin web sitenizdekilerle aynı olmadığını görmeleri şaşırtıcı olsa da, baskı stil sayfanızda iyi bir fikir olabilir.
İyi bir baskı yazı tipi yığınının kodu:
[css] vücut {font-aile: Gürcistan, 'Times New Roman', serif;} [/ css]
CSS 3'ün @ font-face özelliğinin faydalarından biri de, özel yazı tiplerinin de basılabilmesidir, böylece çıktılarınız web sitenize daha çok benziyor!
9. Blogumun Çok Yorumları Var. Ne yapmalıyım?
Bu gerçekten senin seçimin. Bir yandan, sadece ekleyerek tasarruf edeceğiniz tüm ağaçları düşünün. #comments { display: none; } baskı stil sayfanıza. Öte yandan, bazı bloglarda yorumlar çok değerli ve büyük tartışmalar içeriyor.
Yorumları kendi sayfalarına taşıyarak, kullanıcılara bunları yazdırıp basmama konusunda seçim yaparsınız. CSS'nin bunu çok kolaylaştıran bir özelliği var:
[css] #comments {page-break-önce: her zaman;} [/ css]Örneğin, makaleniz iki buçuk sayfa uzunsa, yorumlar sayfa 4'ten 6'ya kadar çalışır. Kullanıcılar, herhangi bir bilgi kaybetmeden yazdırılacak sayfaları seçebilir.
10. Sadece Yazdır Mesajını Göster
“ Bu yazıyı yazdırdığınız için teşekkürler! Taze ürünler için mysite.com adresine geri dönmeyi unutmayın. Neden çıktığında böyle samimi bir mesaj gösterilmiyor? Ya da belki de okuyuculardan çevreyi korumak için kullandıkları kağıdı geri dönüştürmelerini isteyin.
İşte böyle görünüyordu:
Bu makaleyi yazdırdığınız için teşekkür ederiz. Taze ürünler için mysite.com adresine geri gelmeyi unutmayın.
[css] #printMsg {ekran: blok;} [/ css] 1 piksellik bir kenarlık gibi, biraz stil ekleyebilirsiniz. Eklemeyi unutma #printMsg { display: none; } Ziyaretçilerin kafa karıştırmasını önlemek için normal stil sayfanıza.
Vitrin
İşte, baskı stili sayfası hakkında düşünülmüş (veya unutulmuş) iyi bilinen web sitelerinden bazı örnekler. İlham almaktan çekinmeyin.
İyi görünüyor:
Baskı stil sayfaları ile harika bir iş çıkaran bazı web siteleri:
24 Yol : Bu “web geeksleri için varış takvimi” nin web sitesi, süslü bir tasarıma sahipti, ancak baskıya nasıl bakılacağını merak ettim. Sonuç gerçekten güzel. Kaygan CSS 3 malzeme kaldırıldı. Düzen temiz ve yine de kaygan. Büyük markalaşma kaldırıldı, yerini, başlığın yanındaki basit bir sağ hizalanmış “24 Yol” aldı.
ThinkVitamin : Carsonified'in blogu, baskı stil sayfalarının nasıl yapıldığına iyi bir örnektir. URL'nin hedefinin gösterilmemesi dışında gerçek zayıf noktalar yok.
CSS-Tricks : CSS-Tricks.com'dan Chris Coyier, baskı stili sayfasıyla iyi bir iş çıkardı. Tüm dağınıklığı kaldırdı ve yorumları yeni bir sayfaya taşıdı, böylece kullanıcılar bunları yazdırmamayı seçebilirler.
Bazı Çalışmaları Kullanabilir
Burada zaten harika olan, ancak baskı stili sayfalarının birazcık cila kullanabileceği bazı web siteleri. Bu bölümdeki hiç kimseye karşı bir suç yoktur.
Web Tasarım Defteri : Webdesign Ledger, baskı stil sayfasını ihmal etmiş görünüyor. “Yazdır” ı tıklattığınızda, üç sayfa reklam ve ilgili bağlantılar ile sonuçlanırsınız.
Tasarım Hücresi : Brian Hoff, baskı tarzı sayfasını da unutmuş gibi görünüyor. Bir makaleyi yazdırdığınızda, yorum formunu da alırsınız.
Flickr : Arkadaşlara göstermek için fotoğraf basabilme güzel olurdu. Flickr, fotoğrafın kendisini ve çıktılardaki çıktıların telif hakkını kaldırabilirdi. Ancak her şey düz hizalanmamış HTML'de görünür.
kaynaklar
- Baskı CSS stil sayfası oluşturmaya yönelik kullanışlı ipuçları Line25 tarafından
- Baskı stil sayfası: Kesin kılavuz
- CSS Tasarımı: Yazdırmaya gidiyor
- CSS-Tricks sonunda bir baskı stil sayfası alır
Pieter Beulque tarafından WDD için özel olarak yazılmıştır. O bir öğrencidir ve webdeveloper , Belçika'da yaşıyor. Onu takip edebilirsin heyecan çok.