Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Transkrypt

1 Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania spisów treści. Tworzenie autamatycznych spisów ilustracji. Przygotowanie prostych dokumentów HTML i umiejętność stosowania arkuszy CSS. Zaliczenie: Realizacja zadań od 1 do 5. Wyniki w postaci plików po przedstawieniu na zajęciach należy spakować do postaci imię_nazwisko_numeralbumu.zip i przesłać prowadzącemu zajęcia. Wstęp Tworząc dokumenty tekstowe najczęściej korzystamy z pakietów biurowych OpenOffice lub Microsoft Office. Oba te narzędzia są na tyle wygodne w użyciu, że zwykle nie zadajemy sobie trudu poznania bardziej zaawansowanych możliwości tworzenia dokumentów tekstowych. Jeśli spodziewanym efektem końcowym jest wydruk kilkustronicowego dokumentu tekstowego (np. listu do cioci), to rzeczywiście korzystanie z zaawansowanych funkcji składu tekstu może mijać się z celem. Jeśli jednak struktura dokumentu jest bardziej skomplikowana, zawiera on rozdziały, podrozdziały, ilustracje i spisy treści, to warto poświęcić trochę czasu i wysiłku na wykonanie tego zadania inteligentniej niż na piechotę. Praktyczne zastosowania tych umiejętności to sprawozdania i praca dyplomowa. Praktyka kilku ostatnich lat pokazuje, że na ok. 200 dyplomantów tylko kilku potrafi posłużyć się zaawansowanym systemem składu tekstu LaTeX, a zaledwie dalszych kilkunastu radzi sobie z właściwym użyciem pakietów biurowych. Pisanie pracy dyplomowej to częste modyfikacje układu i treści pracy, liczne rysunki, przypisy próba wykonania tego zadania na piechotę zwykle oznacza stratę czasu. W przyszłości (2 rok) wrócimy na krótko do arkuszy CSS/CSS2 przy okazji poznawania języka XML oraz w trakcie omawiania pewnych mechanizmów dziedziczenia w programowaniu obiektowym. Politechnika Wrocławska 1

2 Zadanie 0. Zapoznanie się z pakietem OpenOffice [do 10 min.] Ci, którzy nie poslugiwali się jeszcze tym pakietem, powinni przejrzeć dostępne opcje dotyczące formatowania tekstu. [F11] wyświetla okienko dialogowe zawierające informacje o dostępnych w bieżącym dokumencie stylach. Style są podzielone na kategorie, z których interesuje nas dzisiaj Paragraph styles oraz Character styles. Style paragrafów dotyczą całych paragrafów, natomiast style znakowe odnoszą się do fragmentów tekstu wewnątrz paragrafu. Zadanie 1. Definicje stylów użytkownika [20 min.] Zdefiniuj następujące style w kategorii Custom Styles: Paragraph styles Lista Nagłówek1 Nagłówek2 Tekst Ponadto, o ile czas pozwoli, także następujące style: Character styles Nazwa pliku (przykład) Zwrot obcojęzyczny (przykład) List styles Lista1 Lista2 Plik ze zdefiniowanymi stylami nazwij lab1zad1.odt. Zadanie 2. Zastosowanie stylów w dokumencie [20 min.] Zastosuj style w przygotowanym przez siebie dokumencie. W dokumencie powinny znaleźć się przynajmniej jeden nagłówek poziomu pierwszego i dwa nagłówki poziomu 2 oraz kilka paragrafów tekstu. Sprawdź, w jaki sposób modyfikacja stylu wpływa na wygląd dokumentu (bez konieczności edytowania dokumentu). Przygotuj automatyczny spis treści. W tym celu w w dokumencie powinny wystąpić nagłówki z konsekwentnie używanymi stylami. Przykładowo: Politechnika Wrocławska 2

3 Rys. 1: Nagłówek poziomu 1. Rys. 2: Nagłówek poziomu 2 Tak zdefiniowane style pozwalają na utworzenie przykładowego spisu treści w następujący sposób: Rys. 3: Wstawianie automatycznego spisu treści Rys. 4: Przykładowe parametry pozwalające na utworzenie spisu treści na podstawie wybranych stylów. Politechnika Wrocławska 3

4 Rys. 5: Określanie, które style mają być użyte do tworzenia spisu, jaka jest ich hierarchia oraz w jaki sposób mają być tworzone wcięcia. Plik wynikowy nazwij lab1zad2.odt. Zadanie 3. Modyfikacja stylów [10 min.] Zmień kolory nagłówków poziomu 1 na zielone, a nagłówków poziomu 2 na niebieskie. Niech wszystkie nagłówki poziomu 2 będą pisane kursywą. Dla wszystkich standardowych paragrafów w tym dokumencie ustal wielkość wcięcia akapitowego na 2 cm. Wszystkie zwroty obcojęzyczne mają być pogrubione zamiast pochylone. Plik wynikowy nazwij lab1zad3.odt. Arkusze stylów CSS/CSS2 w języku HTML Dokładniej można się przyjrzeć działaniu arkuszy stylów próbując stworzyć prostą stronę WWW (dokument HTML). Istnieje wiele gotowych edytorów działąjących w trybie WYSIWYG (What You See Is What You Get), polega to na tym, że dokument HTML edytujemy tak jak zwykły dokument Office/OO. Edytory te ukrywają przed użytkownikiem techniczną stronę języka HTML, czyli tzw. znaczniki. Przyjrzyjmy się, jak w języku HTML moglibyśmy zapisać powyższy fragment tekstu: <H2>Arkusze stylów CSS/CSS2 w języku HTML</H2> <P>Dokładniej można się przyjrzeć działaniu arkuszy stylów próbując stworzyć prostą stronę WWW (dokument HTML). Istnieje wiele gotowych edytorów działąjących w trybie WYSIWYG (What You See Is What You Get), polega to na tym, że dokument HTML edytujemy tak jak zwykły dokument Office/OO. Edytory te ukrywają przed użytkownikiem techniczną stronę języka HTML, czyli tzw. znaczniki.</p> <P>Przyjrzyjmy się, jak w języku HTML moglibyśmy zapisać powyższy fragment tekstu:</p> Politechnika Wrocławska 4

5 Znaczniki <H1>, <H2>,..., <H6> określają poziom nagłówka. Znacznik <P> służy do określania paragrafów w dokumencie. Znaczniki <I>, <B>, <U> dawniej służyły do ustalania atrybutów tekstu takich jak kursywa, pogrubienie czy podkreślenie. Obecnie nie jest zalecane ich stosowanie, ponieważ zostały zastąpione przez nowsze rozwiązania. Istnieje wiele innych znaczników, z których potrzebne nam będą jeszcze <HTML>, <HEAD>, <BODY>. Zamknięcia znacznika dokonuje się poprzez dodanie ukośnika (/) przed jego nazwą, np.: </BODY> <HTML> <HEAD> <TITLE>Tytuł strony</title> </HEAD> <BODY> <H1>Nagłówek (np. tytuł)</h1> <P>Paragraf, a w nim zwykła treść.</p> </BODY> </HTML> Charakterystyczne jest zagnieżdżanie znaczników, np. wewnątrz <BODY> mamy dwa znaczniki: <H1> oraz <P>. Nie wszystkie znaczniki można zagnieżdżać, są też znaczniki które w ogóle nie posiadają części zamykającej (np. <BR>, znacznik złamania wiersza). Powyższy fragment kodu można wkleić do dowolnego edytora tekstowego (wystarczy zwykły Notatnik) i zapisać pod nazwą z rozszerzeniem *.html. Taki plik mógłby zostać zinterpretowany przez przeglądarki WWW następująco: Rys. 6: Różnice w interpretacji identycznego pliku HTML w różnych przeglądarkach Politechnika Wrocławska 5

6 Widoczne są różnice polegające przede wszystkim na interpretacji znaków diakrytycznych. Poprawiony dokument będzie wyglądał następująco: <HTML> <HEAD> <TITLE>Tytuł strony</title> <META http-equiv=content-type content="text/html; charset=windows-1250"> </HEAD> <BODY> <H1>Nagłówek (np. tytuł)</h1> <P>Paragraf, a w nim zwykła treść.</p> </BODY> </HTML> Użycie zestawu znaków Windows-1250 zamiast ISO nie jest zbyt eleganckim rozwiązaniem, ale pozwoli nam bez problemu edytować stronę zawierającą polskie znaki diakrytyczne nawet w tak prostym narzędziu jak Notatnik. Załóżmy że nasz serwis internetowy zawiera nie jedną, lecz kilkadziesiąt podobnych stron oraz że każda strona składa się z kilku-kilkunastu nagłówków różnych poziomów. Chcemy, aby cały serwis wyglądał jednolicie, np. aby nagłówki pierwszego poziomu były czerwone. Dawniej należałoby użyć zapisu: <H1><FONT color= red >Nagłówek (np. tytuł)</font></h1> Komplikacje zaczynały się, gdy zaszła potrzeba zmiany koloru czerwonego np. na niebieski modyfikacje musiały być przeprowadzone w setkach lub nawet tysiącach miejsc. Współcześnie oddziela się treść strony od jej wyglądu. Za wygląd stron odpowiada najczęściej osobny plik, tzw. arkusz stylu CSS (Cascading Style Sheet). Można też arkusz CSS umieścić wewnątrz dokumentu HTML. Przed dodaniem informacji o stylach dokument o poniższej treści: <HTML> <HEAD> <TITLE>Tytuł strony</title> <META http-equiv=content-type content="text/html; charset=windows-1250"> </HEAD> <BODY> <H1>Nagłówek 1</H1> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> <H2>Nagłówek 2</H2> <H2>Nagłówek 2</H2> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> </BODY> </HTML> jest interpretowany następująco: Politechnika Wrocławska 6

7 Rys. 8: Zmiana atrybutów <H1> za pomocą znacznika <FONT color="red"> Rys. 7: Interpretacja przykładowego dokumentu HTML bez arkusza CSS Następnie modyfikujemy plik HTML dodając znacznik <STYLE>: <HTML> <HEAD> <TITLE>Tytuł strony</title> <META http-equiv=content-type content="text/html; charset=windows-1250"> <STYLE> H1 { color: red; font-family: Tahoma; font-weight: bold; } </STYLE> </HEAD> <BODY> <H1>Nagłówek 1</H1> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> <H2>Nagłówek 2</H2> <H2>Nagłówek 2</H2> <P>Treść paragrafu treść paragrafu treść paragrafu treść paragrafu.</p> </BODY> </HTML> Po wyświetleniu tak zmodyfikowanego dokumentu w przeglądarce internetowej powinniśmy uzyskać poniższy efekt: Politechnika Wrocławska 7

8 Rys. 9: Ten sam dokument HTML po dodaniu arkusza stylów Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.] Utwórz na podstawie podanych powyżej kodów źródłowych plik o nazwie lab1zad4.html. Zmodyfikuj arkusz stylów tak, aby nagłówki pierwszego poziomu były zielone, a nagłówki drugiego poziomu żółte. Niech wszystkie domyślne paragrafy (<P>) w dokumencie będą zapisane kursywą i czcionką wielkości 10pt. Zapis 'pt' to punkty, nie mylić z pikselami ('px'). Zadanie 5. Tworzenie własnego pliku HTML z arkuszem CSS [20 min.] Dwa akapity tej instrukcji przygotuj w postaci dokumentu HTML. W dokumencie powinny znaleźć się przynajmniej jeden nagłówek poziomu pierwszego i dwa nagłówki poziomu 2 oraz kilka paragrafów tekstu. <STYLE>). Do tak przygotowanego dokumentu HTML dodaj definicję stylów (znacznik Zachowaj kolorystykę i typografię używaną w tej instrukcji. W jaki sposób w języku HTML określamy kolory inne niż kolory podstawowe? Jak zdefiniować wcięcie akapitowe (wcięcie pierwszego wiersza)? Jak ustawić interlinię (odstępy między wierszami w akapicie) na 1, 1.5, 2? W jaki sposób można umieścić arkusz CSS poza dokumentem HTML (tak, aby ten Politechnika Wrocławska 8

9 sam arkusz CSS mógł być używany w wielu plikach HTML)? Plik wynikowy nazwij lab1zad5.html., ew. dodatkowo dołącz plik lab1zad5.css. Spis rysunków Rys. 1: Nagłówek poziomu Rys. 2: Nagłówek poziomu Rys. 3: Wstawianie automatycznego spisu treści... 3 Rys. 4: Przykładowe parametry pozwalające na utworzenie spisu treści na podstawie wybranych stylów... 3 Rys. 5: Określanie, które style mają być użyte do tworzenia spisu, jaka jest ich hierarchia oraz w jaki sposób mają być tworzone wcięcia... 4 Rys. 6: Różnice w interpretacji identycznego pliku HTML w różnych przeglądarkach... 5 Rys. 7: Interpretacja przykładowego dokumentu HTML bez arkusza CSS... 7 Rys. 8: Zmiana atrybutów <H1> za pomocą znacznika <FONT color="red">... 7 Rys. 9: Ten sam dokument HTML po dodaniu arkusza stylów...8 Spis treści Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS...1 Wstęp...1 Zadanie 0. Zapoznanie się z pakietem OpenOffice [do 10 min.]...1 Zadanie 1. Definicje stylów użytkownika [20 min.]... 2 Zadanie 2. Zastosowanie stylów w dokumencie [20 min.]... 2 Zadanie 3. Modyfikacja stylów [10 min.]... 4 Arkusze stylów CSS/CSS2 w języku HTML... 4 Zadanie 4. Modyfikacja istniejącego arkusza stylu [5 min.]... 8 Zadanie 5. Tworzenie własnego pliku HTML z arkuszem CSS [20 min.]... 8 Politechnika Wrocławska 9