Hoe maak je een webpagina uit de Printer-vriendelijke

Afdrukken van een webpagina is beschouwd als een "getroffen of missen"-proces, vooral te wijten aan de gemeenschappelijke valkuilen van webdesigners. Met enkele eenvoudige regels met trapsgewijze opmaakmodellen (CSS), kunnen uw gehele site drukklare zonder noodzakelijkerwijs het veranderen van de inhoud. In dit artikel wordt ervan uitgegaan dat u al bekend met de basisprincipes van HTML en CSS codering, evenals het proces van het beheren van externe bestanden op een webhost bent.

Instructies

1

Bepalen van de algemene ruimten van uw lay-out: koptekst, kant, voettekst en hoofdtekst. Een kop bevat uw logo en wellicht ook navigatielinks. Zijden bevatten navigatiekoppelingen en eventueel reclame of speciale functies. Voetteksten kunnen bevatten meer gedetailleerde navigatie, auteursrecht en wettelijke informatie. Lichaamsinhoud is wat heeft verlaten---de "kern" van de pagina. Wanneer een bezoeker een pagina wordt afgedrukt, is het deel dat ze wil op papier de lichaamsinhoud.

2

De algemene gebieden van stap 1 met tagkenmerken, te herkennen als u dit nog niet gedaan in uw oorspronkelijke ontwerp. Gebruik de "id =" toeschrijven en ervoor te zorgen dat elke naam slechts één keer is toegewezen op elke pagina. Dit maakt ze meer toegankelijk in de stylesheet.

3

Start een nieuw, platte tekst bestand en sla het op als "printer.css" in dezelfde locatie als uw "standaard" stylesheet. Laat het leeg voor nu. Dit opmaakmodel wordt uw oorspronkelijke opmaakregels behalve niet vervangen wanneer een bezoeker een pagina van uw site wordt afgedrukt.

4

Een van uw bestaande HTML-pagina's in de editor openen en opslaan van een nieuw exemplaar met een andere naam. (bijvoorbeeld een pagina met de naam "biography.html" kan worden opgeslagen als "biografie-print.html"). Binnen de < link >-code, de naam van het opmaakmodel wijzigen in "printer.css" zodat het laadt het bestand dat u net hebt gemaakt. Als er een "media =" toeschrijven, verwijderen. Gebruik alleen de "printer.css" stylesheet voor die pagina op dit moment.

5

Upload het nieuwe exemplaar van die pagina, samen met "printer.css" naar uw host. Open een browser en typ de volledige URL---inclusief de hele bestandsnaam---voor de gekopieerde, dit is een alleen-print pagina. Het lijkt zeer ongebruikelijk, maar dat zal veranderen.

6

Nieuwe regels voor uw pagina maken in de "printer.css" stylesheet. Als u nieuwe regels toevoegen, bijwerken van de "printer.css" op uw host en reload de pagina in uw browser. Om te beginnen, maakt u een regel voor de koptekst, de zijkant(en) en het gebruik van de voettekst "weergegeven: geen" om ze te verbergen.
Wanneer u klaar bent, probeer het afdrukken van de pagina en controleer of de resultaten op papier. Afgedrukte versies van de pagina houden evalueren en bijsturen indien nodig alvorens over te gaan.

7

Uw oorspronkelijke opmaakmodel naast de nieuwe met behulp van twee < link > tags--één voor uw oorspronkelijke opmaakregels en een andere voor "printer.css" stijlen toepassen. Invoegen de [media = "afdrukken"] attribuut in de tag voor "printer.css" en [media = "screen"] in de tag voor uw oorspronkelijke opmaakmodel. Vervolgens bijwerken uw site. Wanneer toegepast op uw hele site, uw pagina's de hetzelfde scherm verschijning als voor zal hebben, en afgedrukte pagina's worden weergegeven volgens de regels van uw alleen-afdrukken.

Tips & waarschuwingen

  • Houd in gedachten dat als webpagina wordt weergegeven op het scherm, uw pagina's zijn interactief, net zoals ze bedoeld waren. Als een afgedrukte vel papier, echter, is de pagina niet langer interactieve. Het kan niet worden gezocht, behalve door het menselijk oog.
  • Deze gids is mogelijk niet op sites met behulp van CMS, aangezien veel CMS pakketten al functies voor afdrukken optimalisatie bevatten nuttig. In dergelijke gevallen raadpleegt u de documentatie van uw CMS-platform voor tips over het opmaken van de "printer-friendly".