Stran za tiskanje lahko naredite na dva načina:
1. Posebej uporabite ločen skript za prikaz strani brez menijev in nepotrebnega oblikovanja.
2. Prikaži isto stran, ki jo gledamo ob ogledu spletnega mesta, vendar z različnimi podprtimi slogi, kjer so nepotrebni elementi skriti.
Imel sem možnost izdelave dokumentov (računi, fakture itd.) za tisk. Zato sem se odločil za prvo možnost. Toda v mojem primeru je to preprosto. Druga možnost se mi zdi bolj prilagodljiva.
Tukaj je moja izkušnja, opombe:
1. Glavno pravilo je, da bodite preprostejši in ljudje vas bodo pritegnili. 🙂 Skratka, ne uporabljajte različnih dizajnov. Človek mora samo prebrati tiskano besedilo, ni ga treba obremenjevati z nepotrebnim dizajnom. Da, in odpadno črnilo v tiskalniku.
2. Ne uporabljamo slik za ozadje; pri tiskanju jih vseeno ne bo. Ali pa bodo, vendar ne v vseh brskalnikih. Vsaj meni so se zgodile podobne grablje.
3. Poskušamo uporabiti belo ozadje in črno besedilo. Če je obratno, boste zapravili veliko barve. Mislim, da ni potrebe po barvnem besedilu - veliko ljudi ima tako ali tako črno-bel tiskalnik.
4. Če želite, da se naslednja vsebina natisne na naslednjo stran, pred tem besedilom vstavite blok div z razredom prelom strani. Razred opisujemo v slogih:
Pagebreak ( page-break-after: vedno; )
prelom strani ( page - break - after : vedno ; |
besedilo za tem blokom bo natisnjeno na novi strani. Deluje v vseh sodobnih brskalnikih. In tudi ne sodobnih. En IE do vključno različice 7 ne uspe. Toda zadeti mu moraš!
5. In tako, natisnite. Tisk si lahko uporabnik izbere sam. Lahko stavite na
window.onload = funkcija () ( window.print(); )
in sam gumb:
< button onclick = "window.print();" >Pečat< / button > |
Ta gumb se bo prikazal ob ogledu strani, vendar ne bo natisnjen, ker smo nastavili display: none; v slogu za media="print", to je v slogih za tiskalno napravo. Ko kliknete gumb, se prikaže okno za tiskanje.
Za tiste, ki želite super avtomatizirati proces tiskanja, tako da na primer odpremo stran in tiskalnik takoj začne tiskati stran - ohladite svoj žar ali tistega, ki to od vas zahteva. Nisem našel te metode. Da, ne obstaja. Ker je logično. Predstavljajte si, da greste na spletno mesto in je prek javascripta programirano za tiskanje sto kopij strani. In tiskalnik ponori in začne tiskati ta kup strani brez vaše vednosti. Nelogično? Nelogično!
Nekoč me je vodja projekta iskreno prosil, naj naredim nekaj takega. Vse to sem mu moral razložiti, navesti primere, da je razumel, da se to ne da in ni potrebno.
6. Če se kdo pritožuje, da se naslov strani, naslov in ostale bedarije v nogah izpisujejo, mu svetujte, naj si nastavi brskalnik. Tega ni mogoče konfigurirati s strani spletnega mesta. Vsaj jaz ne vem kako. Na primer, v Firefoxu je to konfigurirano v »Natisni« - »Nastavitve strani« - »Robovi in noge«
7. Mimogrede, nadaljevanje prejšnjega. Recimo, da je uporabnik onemogočil prikaz vseh glav in nog, vključno z naslovom strani. To pomeni, da če uporabnik čez nekaj časa pogleda izpis, ne bo mogel razumeti, s katerega mesta ga je natisnil. Zato je morda vredno narediti kratko opombo z navedbo vira, naslova strani, logotipa ali česa drugega.
8. Uporabite veliko pisavo (seveda v razumnih mejah). Glavna stvar je, da je vse berljivo, ko je natisnjeno.
10. Mislim, da moramo uporabiti dimenzije, ki so neodvisne od naprave – absolutne dimenzije. Na primer v,cm,mm,pt,pc.
11. Tukaj je uporabna povezava http://www.webdevout.net/browser-support-css#css2propsprint. Opise slogov najdete na spletni strani http://htmlbook.ru
Na splošno vam svetujem, da pregledate celoten seznam lastnosti CSS, tudi če ste izkušen razvijalec. Presenečen sem bil, ko sem odkril neznane lastnosti CSS in da je nekatere lastnosti CSS že mogoče brez strahu uporabljati.
Seveda to ni popoln seznam nasvetov. To so samo moje misli.
Pogosto lahko najdete na spletnih mestih natisljivo različico določene strani. Mnogi ljudje mislijo, da je to nekaj, kar je vgrajeno v sam brskalnik ali da se naredi zelo preprosto. Pravzaprav to sploh ne drži. Različica za tiskanje je navadna stran, ki ga potrebujete na svojem narediti.
Lahko si ogledate različico tega članka za tiskanje. Pravzaprav, kaj bi moralo biti tam prikazano? Naslov članka, rubrika, kategorija, avtor, samo besedilo in datum. Vse to je prikazano na tej strani. Potrebujete meni, iskalni obrazec ali različne bloke? Mislim, da ne, zato jih ni.
Prepričajte se tudi, da je širina različice za tiskanje enaka ne presega 650px, sicer lahko brskalnik preseže robove.
Torej, to že razumete različica za tiskanje Ustvariti ga morate sami in izpisati točno tisto, kar uporabnik potrebuje. Zdaj pa se pogovorimo o tem, kako to storiti.
Jejte 2 možnosti: ustvarite ločeno stran in ustvarite ločeno slogovno datoteko. Prva možnost se mi zdi jasna. Ustvari novo stran z različico za tiskanje in na glavni strani zagotovite povezavo do te tiskane različice. Uporabnik krmari po njem in skozi "Datoteka" -> "Natisni" ga bo natisnil.
Druga možnost vključuje ustvarjanje ločenega slogovnega lista, kjer boste skrili vse nepotrebne bloke (prek zaslon: brez;) in nastavite ustrezne velikosti za izhodno vsebino. Nato je ta slogovna datoteka povezana na naslednji način:
Če želi uporabnik natisniti to stran, potem ne bo natisnjeno tisto, kar vidi, ampak tisto, kar je zapisano v print.css. Pravzaprav uporabnik vidi stran v enem pogledu, tiskalnik pa v povsem drugem pogledu.
Na ta način nastaja različica za tiskanje katero koli stran spletnega mesta.
Mnogi uporabniki svetovnega interneta niti ne slutijo, da je splet večnamensko okolje, ki ponuja različne načine posredovanja informacij. V tem primeru ne mislimo na multimedijo - avdio in video podatke, ki so danes zelo razširjeni, temveč na prave vire, preko katerih ljudje pridobivajo informacije s spleta. Levji delež uporabnikov interneta za te namene uporablja zaslon, ki je lahko samostojna naprava (PC monitor) ali sestavni del mobilne naprave z dostopom do omrežja. Glede na uspešen razvoj računalniške tehnologije in razpoložljivost tako namiznih kot prenosnih računalnikov ter vseh vrst elektronskih pripomočkov lahko z gotovostjo trdimo, da je danes monitor najbolj priljubljeno sredstvo za pregledovanje spletnih strani.
Kakor koli že, v nekaterih primerih preprosto ne moremo brez tiskanja strani, ki nas zanimajo. Zato je na številnih spletnih mestih za vsak dokument, ki je na voljo uporabniku, navedena njegova različica, ki se uporablja pri tiskanju na tiskalniku. Toda zaradi dejstva, da je razvoj spletnih tehnologij usmerjen predvsem v vizualno predstavitev informacij na zaslonih monitorjev v brskalniku, je veliko spletnih strani natisnjenih v obliki, ki ni povsem primerna za branje. Navigacijske vrstice, pasice za različne namene in drugi podobni elementi spletne strani zamegljujejo njeno vizualno predstavitev v tiskani obliki. Poleg tega je večina teh elementov zasnovanih za interakcijo z uporabnikom prek brskalnika in zato, ko so preneseni na papir, sploh niso uporabni. Zato vse pogosteje na obiskanih spletnih straneh najdete povezave, kot je "Tiskana različica strani", ki vam omogoča ogled dokumenta na zaslonu v obliki, v kateri bo natisnjen na tiskalniku.
Orodja za specifikacijo CSS spletnim razvijalcem omogočajo preprosto ustvarjanje različnih možnosti predstavitve strani, odvisno od tega, kako so prikazane (monitor, tiskalnik in drugo). Ta članek obravnava načine za implementacijo tega pristopa z uporabo CSS.
Vzpostavljanje povezav.
Obstaja več načinov za uvoz vsebine zunanjih slogovnih listov CSS v dokument HTML in definiranje potrebnih pravil neposredno v datoteki izvorne kode strani.
Meta oznaka .
Najpogostejša in znana možnost je uporaba meta oznake. , ki zagotavlja medijski atribut, ki vam omogoča, da določite napravo, za katero je dokument formatiran z navedeno datoteko CSS. Tukaj je primer:
Zgornji primer vključuje datoteko CSS print_stylesheet.css, zasnovano za oblikovanje dokumenta pri izpisu v tiskalnik (media="print" ). To pomeni, da za vse druge primere predstavitve spletne strani (razen tiskane različice) pravila CSS, definirana v datoteki print_stylesheet.css, niso upoštevana. Specifikacija CSS opredeljuje deset veljavnih vrednosti za medijski atribut, ki zagotavlja različne naprave in načine predstavitve spletnih informacij: vse, zvočne, braillove pisave, reliefne, ročne, tiskane, projekcijske, zaslonske, tty in tv. V tem članku ne bomo upoštevali vseh vrednosti, ampak samo tiste, ki določajo tiskalno napravo. Pozorni pa morate biti tudi na vrednost all , ki je privzeto nastavljena za atribut media, razen če ni izrecno določeno drugače. Poleg tega, če je določena datoteka CSS namenjena oblikovanju strani pri izpisu na več vrst naprav hkrati, potem lahko ustrezne ključne besede podate v eni vrstici, ločene z vejico:
Ukaz za uvoz CSS.
Za vključitev zunanje datoteke CSS lahko uporabite tudi ključno besedo @media. Pravilo, definirano v tem primeru, lahko določi več vrst medijev, za katere je namenjeno oblikovanje. V tem primeru sintaksa omogoča dve možnosti za pisanje ukaza:
@import url("styles/stylesheet.css") tisk, projekcija;
oz
@import "styles/stylesheet.css" tisk, projekcija;
Kot je razvidno iz primera, med sprejemljivimi možnostmi ni posebnih razlik. V enem primeru se uporablja direktiva url, drugi pa vključuje pisanje poti do zahtevane datoteke CSS brez nje. Primer pravila vključuje uporabo datoteke stylesheet.css, ki se nahaja v mapi styles in je namenjena oblikovanju dokumenta za naprave z izpisom stranskih informacij (tiskanje - tiskalniki, projekcije - diaprojektorji in podobne naprave).
Neposredno v html dokumentu spletne strani.
Če želite to narediti, uporabite pravilo CSS @media, znotraj katerega so določene lastnosti oblikovanja dokumenta in zahtevane vrednosti zanje. Takoj za ključno besedo @media je določena ena ali več vrst medijev (ločenih z vejicami), za katere se izvede oblikovanje: