Drukowanie

Karta pracy 2016/2017

Dokument:
http://www.plotkarka.eu/kp/css3-page.html
Autor:
Radosław Kowaluk

Drukowanie stron

Czynności wstępne

Utwórz plik css3-page.html z podstawową strukturą strony WWW w standardzie HTML5.

<!DOCTYPE html>
<html>
 <head>
  <title>Drukowanie stron</title>
  <meta charset="utf-8"/>
  <style>

  </style>
 </head>
 <body>

 </body>
</html>

Marginesy strony (kartki) wydruku 1

W elemencie style dodaj kod:

@page {
margin: 3cm;
}

W elemencie body dodaj kod:

<h2>h2</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3>h3</h3>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>h2</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3>h3</h3>

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Właściwości strony lewej 2, prawej 3 i pierwszej 4 wydruku

W elemencie style dodaj kod:

@page :left {
margin-right: 5cm;
}
@page :right {
margin-left: 5cm;
}
@page :first {
margin-top: 1cm;
margin-bottom: 1cm;
}

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Właściwości łamania stron przed 5, po 6, w 7.

W elemencie style dodaj kod:

h2 {
page-break-before: always;
}
h3 {
page-break-after: avoid;
}
h2, h3 {
page-break-inside: avoid;
}

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Kotrola wdów 8 i sierot 9up>.

W elemencie style dodaj kod:

p {
orphans: 3;
widows: 3;
}

Zapisz zmiany i odśwież stronę. Sprawdź podgląd wydruku.

Wgrywanie plików na serwer

Umieść plik css3-page.html na serwerze po sprawdzeniu poprawności.

Zadanie

Zastosuj poznane wiadomości w swojej witrynie.

  1. Reguła CSS @page – definiuje włąściwości strony (kartki) wydruku.
    Style: {margin-top:}, {margin-right:}, {margin-bottom:}, {margin-left:} i {margin:} umieszczone w regule @page odnoszą się do strony (kartki) wydruku.
    Styl {margin:} - definiuje margines elementu. Wartościami mogą być: liczby z jednostka długości, procent lub auto. Wartość auto - powoduje, że przeglądarka ustawia marginesy automatyczne.
    Podanie jednej wartości ustala tę wartość dla wszystkich marginesów strony.
    Dwie wartości: pierwsza - margines górny i dolny, druga - margines prawy i lewy strony.
    Trzy wartości: pierwsza - margines górny, druga - margines prawy i lewy, trzecia - margines dolny strony.
    Cztery wartości to odpowiednio: prawy, dolny, lewy i górny margines strony.
    Styl {margin-top:} - definiuje margines górny strony.
    Styl {margin-right:} - definiuje margines lewy strony.
    Styl {margin-bottom:} - definiuje margines dolny strony.
    Styl {margin-left:} - definiuje margines lewy strony.
  2. Selektor CSS @page :left – definiuje lewą stronę kartki wydruku.
  3. Selektor CSS @page :right – definiuje prawą stronę kartki wydruku.
  4. Selektor CSS @page :first – definiuje pierwszą stronę wydruku.
  5. Styl CSS {page-break-before:} – definiuje rozpoczęcie nowej strony wydruku przed elementem. Wartościami są: auto - niewymuszone łamanie stron, always - wymusza łamanie strony, avoid - unikanie łamania stron, left - wymusza takie łamanie strony, że następna strona złoży się jako lewa, right - wymusza takie łamanie strony, że następna strona złoży się jako prawa.
  6. Styl CSS {page-break-after:} – definiuje rozpoczęcie nowej strony wydruku po elemencie. Wartościami są: auto, always, avoid, left, right.
  7. Styl CSS {page-break-inside:} – definiuje rozpoczęcie nowej strony wydruku wewnątrz elementu. Wartościami są: auto, avoid.
  8. Styl CSS {orphans:} – definiuje definiuje minimalną ilość wierszy w akapicie, które muszą być widoczne na końcu strony. Wartością stylu jest liczba.
  9. Styl CSS {widows:} – definiuje minimalną ilość wierszy w akapicie, które muszą być widoczne na początku strony. Wartością stylu jest liczba.