10 Ábendingar um betri prentstíllark
Prentstílblöð hafa verið nokkuð gleymt og ennþá eru þeir enn mikilvægir. Margir prenta út greinar til að lesa á ferðalagi eða þegar þeir hafa ekki aðgang að Netinu.
Prenta stílblöð hafa ákveðnar ávinningar . Til dæmis, lestur á pappír er minna þreytandi á augun en að lesa á skjánum.
Einnig er eftirfarandi leiðbeiningar auðveldara ef þú hefur einn við hliðina á þér, með ritstjóranum þínum opið á skjánum; Þannig þarftu ekki að skipta um glugga í hvert sinn til að líta eitthvað upp.
Í þessari grein munum við benda á 10 einföldum ábendingum sem hjálpa þér að búa til betri prentblöð .
Ef þú hefur gleymt, hér er hvernig á að setja upp prenta stíl blað:
The media="print" eiginleiki tryggir að notendur sjái ekki hvaða stíl sem er skilgreind í print.css skránni.
Nokkur athygli er þó krafist, þó: ef aðalstíllinn þinn hefur ekki fjölmiðla eiginleiki, þá mun prentaratillagan arfleifa stíl sinni. Til að aðgreina þau skaltu stilla aðalstíllinn þinn þannig:
Hér eru 10 ráð til að hefjast handa með prenta stílblaðinu.
1. Fjarlægðu Navigation
Hver er helsta munurinn á pappír og tölvu? Pappír er truflaður, en tölva er gagnvirk. Og til að auðvelda þessa samskipti hafa vefsíður flakk, sem verður gagnslaus á pappír.
Fela flakk og aðra hluta vefsvæðis þíns sem verða tilgangslaust á pappír, svo sem skenkur sem tengjast öðrum innleggum. Kóðinn fyrir þetta er mjög auðvelt: bara stilltu þáttinn display til none .
2. Stækka innihaldssvæðið
Með flakki og skenkur fjarlægð er efni okkar nú breiðst út á síðunni. Þetta þýðir að prenta stíll lagsins lítur meira eins og venjulegt skjal, í stað þess að pappír útgáfa af the website.
Allt sem við þurfum að gera til að stækka efnið er endurstillt flotið, fjarlægðu hvaða marmar og stilla breiddina að 100%.
[css] # content {width: 100%; margin: 0; float: none;} [/ css]3. Endurstilla bakgrunnslitina
Flestar vafrar hunsa nú þegar bakgrunns eiginleika til að varðveita blek. En til að ganga úr skugga um að allt bakgrunnurinn sé hvítur getum við stillt líkamann að hvítu, og þá gefðu hvert frumefni barnsins áfram á hvítum bakgrunni.
[css] líkami {bakgrunnur: hvítur;} # efni {bakgrunnur: gagnsæ;} [/ css]4. Endurstilla textalitir
Með því að endurstilla bakgrunninn birtist annað vandamál. Hvað ef þú ert með dökkgráða "Höfundarupplýsingaskipan" í lok innlegganna með textanum í ljósgráu eða hvítu? Með bakgrunninum sem nú er stillt á hvítt, þessar upplýsingar verða ósýnilegar.
Til að laga þetta, breyttu hvaða lituðum texta sem er eitthvað dökkari: svart eða helst dökkgrátt.
[css] #author {lit: # 111;} [/ css]
Taktu Sam Brown bloggið hér að ofan. Gætirðu ímyndað þér hvað þetta myndi líta út ef hann endurstillti ekki litbrigði textans? Ólesanlegt örugglega.
5. Birta áfangastað tengla
Vegna þess að pappír er ekki gagnvirkt miðill getur lesandinn auðvitað ekki smellt á tengla til að safna fleiri upplýsingum.
Segðu að einhver sé að lesa útprentun um nýja vöru. Að sjá "Smelltu hér til að fá meiri upplýsingar" myndi allt í einu vera frekar pirrandi fyrir þá, væri það ekki? Þetta er auðvelt að laga með því að bæta við tengilinn á áfangastaðnum eftir textann sjálfan og gefa þér eitthvað svona: "Smelltu hér til að fá frekari upplýsingar (http://hereismore.com/information)."
Ennfremur, fyrir CSS 2-tilbúna vafra, þetta er hægt að gera með venjulegu, gamla CSS. Hér er kóðinn:
[css] a: hlekkur: eftir {efni: "(" attr (href) ")";} [/ css]Þú getur kryddað það upp með minni leturstærð, skáletrun eða hvað sem er.
6. Búðu til tengla frá venjulegri texta
Lesendur þurfa að geta greint tengla frá venjulegum texta. Grunnnotkunarreglur gilda hér: Blár og undirstrikun er valinn, en ég vil frekar bæta við feitletruninni líka.
Mundu að skjöl eru oft prentuð í svörtu og hvítu. Ekki treysta eingöngu á lit munur. Hér er kóðinn fyrir skynsamlegar prentaðar tenglar:
[css] a: hlekkur {leturþyngd: feitletrað; textaskreyting: undirstrikun; litur: # 06c;} [/ css]# 0066cc er ferskur blár litur og það lítur út eins og # 999999 þegar prentað er í gráskala. Með þessu munu tenglar líta vel út, bæði í lit eða í svörtu og hvítu. Þeir munu einnig standa út úr venjulegri texta.
7. Hvað um leturstærð?
Í prenti er 12 stig staðallinn. En hvernig þýðum við að þýða það í CSS? Sumir segja að stilla leturstærðina til 12 stig (pt) sé nógu gott. Aðrir mæla með að setja það í 100%. Enn aðrir segja ekki að lýsa hvaða leturstærð sem er í prentunarstílnum þínum yfirleitt, vegna þess að það gerði það ógilt óskir notandans.
Persónulega fer ég með 12 punkta leturstærð oftast:
[css] p {leturstærð: 12pt;} [/ css]8. Hvað um leturgerðir?
Flestir kjósa serif letur vegna þess að þeir eru minna þreytandi á augunum, þau leiða betur lesandann í gegnum textann og svo framvegis. Stilling á font-family til serif Í prentunarstílblöðunum þínum er líklega góð hugmynd, þótt sumir lesendur mega vera undrandi að finna að letrið í prentun þeirra er ekki það sama og sá sem er á vefsíðunni þinni.
Hér er kóðinn fyrir góða prenta letur stafla:
[css] líkami {font-family: Georgia, Times New Roman, serif;} [/ css]
Einn af kostum CSS 3's @ font-face eign er að sérstaka leturgerðir þínar geti prentað út, svo að útprentanir líta miklu meira út eins og vefsvæðið þitt!
9. Bloggið mitt hefur mikið af athugasemdum. Hvað ætti ég að gera?
Jæja, þetta er í raun þitt val. Annars vegar skaltu hugsa um allar tréin sem þú vilt spara með því að bæta við #comments { display: none; } á prenta stíl blaðinu þínu. Á hinn bóginn eru athugasemdir gagnlegar á sumum bloggum og innihalda nokkrar frábærar umræður.
Með því að flytja athugasemdirnar á eigin síðu gefurðu notendum kost á því að prenta þær. CSS hefur eign sem gerir þetta mjög auðvelt:
[css] #comments {page-break-before: alltaf;} [/ css]Til dæmis, ef greinin þín er tvær og hálf síður löng, mun athugasemdin keyra frá blaðsíðu 4 upp að segja: 6. Notendur gætu valið hvaða síður að prenta án þess að tapa upplýsingum.
10. Sýna skilaboð sem eru aðeins prentuð
" Þakka þér fyrir að prenta þessa grein! Vinsamlegast ekki gleyma að komast aftur á mysite.com fyrir nýjar greinar. "Af hverju ekki að sýna vinalegan skilaboð eins og þetta í prentuninni? Eða kannski biðja lesendur að endurvinna pappír sem þeir hafa notað til að varðveita umhverfið.
Hér er það sem myndi líta út:
Þakka þér fyrir að prenta þessa grein. Vinsamlegast ekki gleyma að komast aftur á mysite.com fyrir nýjar greinar.
[css] #printMsg {sýna: blokk;} [/ css] Þú getur bætt við smá stíl líka, eins og 1 pixla landamæri. Ekki gleyma að bæta við #printMsg { display: none; } til venjulegs stílmáls, til að koma í veg fyrir ruglingslegar gesti.
Sýningin
Hér eru nokkur dæmi frá vel þekktum vefsíðum sem hafa hugsað (eða gleymt) um prenta stíllinn. Feel frjáls að vera innblásin.
Lítur vel út:
Hér eru nokkrar vefsíður sem gera gott starf með prentblöðum:
24 leiðir : Vefsíðan fyrir þessa "ævintýra dagatalið fyrir vefnum geeks" hefur ímyndaða hönnun, en ég velti því fyrir mér hvernig það myndi líta út í prentun. Niðurstaðan er mjög góð. The slick CSS 3 efni hefur verið fjarlægt. Útlitið er hreint og samt flókið. Stór vörumerki hefur verið fjarlægt, í staðinn af einföldum hægri-takt "24 leiðir" við hlið titill titilsins.
ThinkVitamin Bloggið Carsonified er gott dæmi um hvernig á að gera prentblöð. Engin raunveruleg veik blettur nema að áfangastaður áfangans sé ekki sýndur.
CSS-bragðarefur : Chris Coyier frá CSS-Tricks.com hefur gert gott starf með prentstiku hans. Hann hefur fjarlægt öll ringulreið og færði athugasemdir á nýjan síðu, þannig að notendur geti valið að prenta þær ekki.
Gæti notað suma vinnu
Hér eru nokkrar vefsíður sem eru nú þegar frábærar en hver prentunarstíll blöð gætu notað smá pólsku. Engin brot á neinn í þessum kafla.
Webdesign Ledger : Webdesign Ledger virðist hafa vanrækt prenthönnunarspjaldið. Þegar þú smellir á "Prenta", endar þú með þremur síðum auglýsinga og tengdum tenglum.
The Design Cubicle : Brian Hoff virðist hafa gleymt um blaðsíðu sína líka. Þegar þú prentar út grein færðu einnig athugasemdareyðublaðið.
Flickr : Að vera fær um að prenta út myndir til að sýna vinum vildi vera gott. Flickr gæti hafa fjarlægt allt en myndina sjálft og höfundarréttarupplýsingar í útprentunum. En allt virðist í látlausu ósnortnu HTML.
Resources
- Handy ráð til að búa til prenta CSS stíl blað með línu25
- Prenta stíll lak: Endanlegur handbók
- CSS Design: Að fara að prenta
- CSS-Bragðarefur fær loksins prenta stíl lak
Skrifað eingöngu fyrir WDD eftir Pieter Beulque. Hann er nemandi og webdeveloper , býr í Belgíu. Þú getur fylgst með honum Twitter líka.