Utskriftsvennlig HTML Tutorial

June 28

Å gjøre sidene lett å skrive er en funksjon som en rekke nettsteder kunne virkelig bruke, men svært få gjør. Opprette utskrivbare versjoner av sidene dine er veldig enkelt å gjøre hvis HTML-koden er rent i første omgang, og du bruker stilark til egen design fra innhold.

Opprette Semantiske Sider

Det første skritt mot å skape enkle utskriftsvennlig HTML-sider gjør at du har en ren fundament, noe som betyr at ved hjelp av CSS (Cascading Style Sheets) for å håndtere alle designelementer av sidene dine. Hvis du ikke er kjent med CSS, det er nok av gratis tutorials rundt på nettet (se Ressurser for en link), og ideen bak det er ganske enkelt: det tillater deg å fjerne alle stil og layout kode fra HTML og butikk det i et annet dokument, kalt et stilark, gjør HTML full av ingenting, men klart definert, lett redigerbart innhold.

Bruke Media = \ "Print \"

For å lage en utskriftsvennlig versjon av hver side på nettstedet ditt, alt du trenger å gjøre å lage en enkel sekundær stilark og bruke HTML \ "media \" attributt for å la nettlesere vet at det er stilarket som skal brukes når du skriver ut.

I praksis vil begge stilark knyttes til fra <head> delen av siden som så:

Når en besøkende prøver å skrive ut en side fra din side, vil nettleseren automatisk lete etter stilarket med media = \ "print \" betegnelse.

Hvis du bygger inn stilark rett inn i <head> delen i stedet for å linke til dem, ville de se slik ut:

<Style type = \ "text / css \" media = \ "skjerm \">
... Hoved stilark ...
</ Style>

<Style type = \ "text / css \" media = \ "print \">
... Utskriftsvennlig style sheet ...
</ Style>

Sekundær Style Sheet

Nå har du to stilark satt opp, må du finne ut hvilke regler utskrifts stilark skal inneholde.

Vanligvis brukere skrive ut sider fordi de ønsker en kopi av hovedteksten på siden - artikkelen, ordrebekreftelse, etc. De trenger ikke alle navigasjonselementer eller menyer - koblinger er ubrukelig på en trykt side, etter alle - og i de aller fleste tilfeller de ikke trenger noen bilder, heller. Å kvitte seg med dem, bare bruke CSS \ "display: none \" regelen.

I tillegg sørge for at teksten vises på riktig måte. Stilark for utskrivbare sider skal ikke omfatte faste bredder, fordi det kan gjøre teksten kjøre forbi kanten på siden i stedet for automatisk innpakning på marginen. Når erklære skriftstørrelser, bør du også bruke \ "pt \" i stedet for \ "px. \"

Så hvis du har en side strukturert som dette:

<Div id = \ "header \"> ... nettstedet tittel og hovedmenyen ... </ div>
<Div id = \ "content \"> ... Hovedartikkelen ... </ div>
<Div id = \ "sidebar \"> ... sidebar linker ... </ div>

Din utskriftsvennlig style sheet kan se slik ut:

div # header, div # sidebar {
display: none
GÅ
}

div # innhold {
font-size: 12pt
GÅ
bredde: auto
GÅ
}