10 vinkkejä parempia tulostustyylejä varten
Painetut tyylisivut on hieman unohtunut, mutta ne ovat edelleen tärkeitä. Monet ihmiset tulostavat artikkeleita lukea matkoilla tai kun heillä ei ole pääsyä Internetiin.
Tulostetyylilevyillä on selviä etuja . Esimerkiksi paperiin lukeminen on vähemmän väsyttävää silmissä kuin lukeminen näytöllä.
Myös opetusohjelmien seuraaminen on helpompaa, jos sinulla on vieressä oleva kansio, kun koodinmuokkaus on avoinna näytölle. Näin sinun ei tarvitse vaihtaa ikkunoita joka kerta etsimään jotain.
Tässä artikkelissa mainitaan 10 helppokäyttöistä vinkkejä, joiden avulla voit luoda parempia tulostustyyppilevyjä .
Jos olet unohtanut, tässä on ohjeet tulostustyylien määrittämiseen:
media="print" attribute ensures that users don't see any of the styles defined in the print.css file. attribuutti varmistaa, että käyttäjät eivät näe mitään print.css- tiedostossa määriteltyjä tyylejä.
Jotkut huomiot ovat kuitenkin tarpeen: jos päätyylisivustossasi ei ole mediaominaisuutta, tulostustyyliarkki perii sen tyylin. Jos haluat erottaa ne, aseta päätyylisi seuraavasti:
Tässä on 10 vinkkejä, joiden avulla voit aloittaa tulostustyyli-arkin.
1. Poista navigointi
Mikä on tärkein ero paperin ja tietokoneen välillä? Paperi on staattista, kun taas tietokone on vuorovaikutteinen. Ja tämän vuorovaikutuksen helpottamiseksi verkkosivustoilla on navigointi, mikä on hyödytöntä paperiin.
Piilota navigointi ja muut verkkosivustosi, jotka tulevat hyödyttömiksi paperilla, kuten sivupalkit, jotka linkittävät muihin viesteihin. Tämä koodi on erittäin helppoa: aseta vain elementti display että none .
2. Suurenna sisältöalue
Kun navigointi ja sivupalkki poistetaan, sisältömme levitetään nyt sivulle. Tällöin tulostustyyliarkki näyttää enemmän kuin tavallinen dokumentti, eikä verkkosivuston paperiversio.
Kaikki mitä tarvitsemme sisällön laajentamiseksi on nollaa float, poista marginaalit ja asetamme leveyden 100 prosenttiin.
[css] #content {leveys: 100%; marginaali: 0; float: none;} [/ css]3. Palauta taustavärit
Useimmat selaimet eivät enää huomioi taustaominaisuuksia musteen säilyttämiseksi. Mutta varmistaaksemme, että koko tausta on valkoinen, voimme asettaa kehon valkoiseksi ja antaa jokaiselle elementille vielä sivulle valkoisen taustan.
[css] body {tausta: valkoinen;} # sisältö {tausta: läpinäkyvä;} [/ css]4. Nollaa tekstin värit
Palauttamalla tausta, toinen ongelma ponnahtaa esille. Entä jos sinulla on tummanharmaa "Kirjoittajan tiedot" -ruutu viestiesi lopussa, tekstin ollessa vaalean harmaa tai valkoinen? Kun tausta on asetettu valkoiseksi, tiedot ovat näkymättömiä.
Voit korjata tämän muuttamalla vaalean värisen tekstin tummemmaksi: musta tai edullisesti tummanharmaa.
[css] #author {väri: # 111;} [/ css]
ottaa Sam Brown blogin yläpuolella. Voisitteko kuvitella, miltä tämä näyttäisi, jos hän ei palaisi tekstin värejä? Todella lukematon.
5. Näytä linkkien määräpaikka
Koska paperi ei ole interaktiivinen tietoväline, lukijat eivät tietenkään voi napsauttaa linkkejä kerätäkseen lisätietoja.
Sano että joku luki tulosta hienosta uudesta tuotteesta. Nähdäksesi "Klikkaa tästä saadaksesi lisätietoja" yhtäkkiä olisi ärsyttävää heille, eikö niin? Tämä voidaan helposti korjata lisäämällä linkin kohde itse linkkitekstin jälkeen, jolloin saat jotain tällaista: "Napsauta tästä saadaksesi lisätietoja (http://hereismore.com/information)."
Lisäksi CSS 2 -valmis selaimilla tämä voidaan tehdä tavallisella CSS: llä. Tässä on koodi:
[css] a: linkki: {content: "(" attr (href) ")";} [/ css]Voit maistella asioita pienemmällä kirjasinkoko, kursiivi tai mikä tahansa muu.
6. Tee linkkejä erottumaan tavallisesta tekstistä
Lukijoiden on kyettävä erottamaan linkit säännölliseen tekstiin. Käyttökelpoisuussääntöjä sovelletaan tässä: sininen ja alleviivaus ovat suositeltavia, mutta haluan lisätä myös lihavointiin.
Muista, että asiakirjat tulostetaan usein mustavalkoisena. Älä ole riippuvainen vain värieroista. Tässä on järkevien painettujen linkkien koodi:
[css] a: linkki {font-weight: bold; teksti-decoration: underline; väri: # 06c;} [/ css]# 0066cc on tuore sininen väri, ja se näyttää # 999999, kun se tulostetaan harmaasävyllä. Tämän avulla linkit näyttävät hyviltä painettuina joko väreissä tai mustavalkoisina. Ne myös erottuvat tavallisesta tekstistä.
7. Mitä fontin kokoa?
Tulosteessa on 12 pistettä. Mutta miten kääntää tämä CSS: lle? Jotkut sanovat, että kirjasinkoko on 12 pistettä (pt) riittävän hyvä. Toiset suosittelevat asettamista 100%: iin. Toiset taas sanovat, ettet anna minkäänlaista kirjasinkokoa tulostustyyppikilvissään, koska muuten ohitettaisiin käyttäjän asetuksia.
Henkilökohtaisesti minulla on 12-pistekokonaisuus suurimman osan ajasta:
[css] p {font-size: 12pt;} [/ css]8. Mitä fonteista?
Useimmat ihmiset suosivat serif-fontteja, koska ne ovat vähemmän väsyttäviä silmissä, ne paremmin johtavat lukijan tekstin läpi ja niin edelleen. Asettaminen font-family että serif tulostustyyppilevy on luultavasti hyvä idea, vaikka jotkut lukijat saattavat olla yllättyneitä siitä, että kirjasimen tulostus ei ole sama kuin verkkosivustollasi.
Tässä on hyvä tulosteet fontille:
[css] body {font-family: Georgia, "Times New Roman", serif;} [/ css]
Yksi CSS 3: n @ font-face -ominaisuuden eduista on, että erityiset fontit voidaan tulostaa myös tulosteiden näyttämiseksi paljon enemmän kuin sivustosi!
9. Blogissani on paljon kommentteja. Mitä minun pitäisi tehdä?
No, tämä on oikeastaan sinun valintasi. Tarkastele toisaalta kaikkia puita, jotka säästät vain lisäämällä #comments { display: none; } sinun tulostustyylialustasi. Toisaalta, kommentit ovat erittäin arvokkaita joillakin blogeilla ja sisältävät hienoa keskustelua.
Kun siirrät kommentit omalle sivulle, annat käyttäjille valinnan siitä, tulostetaanko ne. CSS: llä on ominaisuus, joka tekee siitä erittäin helppoa:
[css] #kommentit {sivu-break-before: aina;} [/ css]Esimerkiksi jos artikkelisi on kaksi ja puoli sivua, kommentit näyttävät sivulta 4 aina 6: een. Käyttäjät voisivat valita tulostettavien sivujen menettämättä tietoja.
10. Näytä tulostettava viesti
" Kiitos tämän artikkelin tulostamisesta! Älä unohda palata mysite.com:iin tuoreista artikkeleista. "Miksi ei tällaisessa ystävällisessä viestissä näytetä tulostusta? Tai ehkä pyytää lukijoita kierrättämään paperia, jota he ovat käyttäneet ympäristön säilyttämiseen.
Tässä se näyttää siltä,
Kiitos tämän artikkelin tulostamisesta. Älä unohda palata mysite.com:iin tuoreista artikkeleista.
[css] #printMsg {display: block;} [/ css] Voit myös lisätä hieman muotoilua, kuten yhden pikselin rajan. Älä unohda lisätä #printMsg { display: none; } säännölliseen tyyliarkistoosi, jotta kävijät eivät sekaisi.
näyteikkuna
Seuraavassa on muutamia esimerkkejä tunnetuista verkkosivustoista, jotka ovat ajatelleet (tai unohtaneet) tulostustyylialustasta. Voit vapaasti olla innoittamana.
Näyttää hyvältä:
Seuraavassa on muutamia verkkosivustoja, jotka tekevät erinomaista työtä tulostustyyliään varten:
24 tapaa : Tämän "advent calendar for web geeks" -sivustolla on hieno muotoilu, mutta mietin, miten se näyttäisi tulosta. Tulos on todella mukava. Liukas CSS 3 -materiaali on poistettu. Asettelu on puhdas ja silti liukas. Iso brändi on poistettu, korvattu yksinkertaisella oikealla linjalla "24 Ways" postin otsikon vieressä.
ThinkVitamin : Carsonifiedin blogi on hyvä esimerkki siitä, miten tulostustyyliä voidaan käyttää. Ei todellisia heikkoja kohtia, paitsi että URL-osoitteen määräpaikka ei näy.
CSS-Tricks : Chris Coyier of CSS-Tricks.com on tehnyt hyvää työtä tulostustyylinsä kanssa. Hän on poistanut kaiken häirinnän ja siirtänyt kommentteja uudelle sivulle, joten käyttäjät voivat valita, ettei heitä tulosta.
Voisi käyttää jotain työtä
Seuraavassa on muutamia verkkosivustoja, jotka ovat jo hyviä, mutta joiden tulostustyyliarkit voisivat käyttää hieman kiillotusta. Ei rikoksia kenellekään tässä jaksossa.
Webdesign Ledger : Webdesign Ledger näyttää jättäneen tulostustyyppinsä. Kun valitset "Tulosta", päätyy kolmeen sivulle mainoksia ja niihin liittyviä linkkejä.
Suunnittelukerho : Brian Hoff näyttää unohtaneen myös hänen painatustyyliään. Kun tulostat artikkelin, saat myös kommenttimuodon.
Flickr : Olisi mukavaa tulostaa kuvia, jotka näyttävät ystäville. Flickr olisi voinut poistaa kaiken, mutta itse kuvan ja tekijänoikeustiedot tulosteissa. Mutta kaikki näkyy pelkkänä epävirallisena HTML-muodossa.
voimavarat
- Käytännöllisiä vinkkejä tulostetun CSS-tyylisivun luomiseen linjalta25
- Tulosta tyyliarkki: Lopullinen opas
- CSS-suunnittelu: Tulostaminen
- CSS-Tricks saa vihdoin tulostustyyliarkin
Kirjoitettu yksinomaan WDD: lle Pieter Beulquesta. Hän on opiskelija ja Web-kehittäjä , asuu Belgiassa. Voit seurata häntä Viserrys liian.