Mazur D. - HTML5 i CSS3. Definicja nowoczesności.pdf

dareks_ EBooki Infornatyka

Użytkownik dareks_ wgrał ten materiał 6 lata temu.

Komentarze i opinie (0)

Transkrypt ( 25 z dostępnych 267 stron)

STRONA 2

Spis treści Wstęp 1. Strony responsywne 2. Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu 2.2. Kaskadowe arkusze stylów CSS 3. Narzędzia 3.1. Edytory 3.1.1. Sublime Text 3.1.2. Adobe Brackets 3.2. Testowanie 3.2.1. Wprowadzenie 3.2.2. W przeglądarce 3.2.3. Adobe Inspect CC 4. Projektowanie Makieta 4.2. Projekt graficzny 5. Kodowanie elastycznej strony 5.1. Wprowadzenie 5.2. Struktura dokumentu HTML 5.3. Reset stylów CSS 5.4. Znacznik meta viewport 5.5. Organizacja pracy 5.6. Nagłówek strony 5.6.1. Wprowadzenie 5.6.2. Google Fonts 5.6.3. Określenie wysokości elementu-rodzica 5.6.4. Zapytania medialne 5.6.5. Dynamiczna zmiana klas za pomocą Biblioteki jQuery 5.7. Slogan

STRONA 3

5.8. Sekcja Oferta 5.8.1. Układ trójkolumnowy 5.8.2. Responsywne obrazy 5.8.3. Własność box-sizing 5.9. Obszar O nas & Blog 5.9.1. Układ dwukolumnowy 5.9.2. Ukrywanie elementów 5.10. Obszar Nasze realizacje 5.11. Stopka 5.11.1. Wprowadzenie 5.11.2. CSS sprite 5.11.3. Dodanie nowego punktu granicznego 5.12. Podstrony 6. Spis znaczników HTML użytych w książce 7. Kod źródłowy

STRONA 4

Więcej na: www.ebook4all.pl Wstęp Szczególnie obecnie sukces zależy od tego, czy istniejemy w internecie. Jeśli nie mamy strony internetowej lub jest ona wykonana w sposób, który nie spełnia aktualnych standardów, szanse, że nawiążemy z kimś współpracę, są raczej minimalne. Oczywiście są branże, które zadają kłam temu stwierdzeniu, jednak to rzadkość. Projektując strony internetowe, należy pamiętać, że coraz więcej internautów korzysta z urządzeń mobilnych. Tworzenie stron o sztywnych rozmiarach, które bardzo trudno przegląda się za pomocą smartfonów oraz tabletów, niejednokrotnie może użytkowników bardziej do nas zrazić, niż zachęcić do zapoznania się z tym, co mamy do zaoferowania. Termin Responsive Web Design działa czasami nieco odstraszająco. Jednak nie należy się go bać. W gruncie rzeczy korzystamy tu głównie z języka HTML5 oraz stylów CSS3, które są podstawowymi narzędziami webmasterskimi. W książce zostały przedstawione wszystkie etapy tworzenia witryny internetowej, począwszy od makiet oraz layoutów, a skończywszy na zakodowaniu serwisu dla różnych rozdzielczości.

STRONA 5

1 Strony responsywne Projektowanie stron internetowych to bardzo szeroki temat, do którego podejście w przeciągu ostatnich kilku lat zmieniło się diametralnie. Początkowo strony można było kojarzyć ze statycznym tekstem i zdjęciami, z czasem zaczęto jednak urozmaicać je różnymi elementami animowanymi. Obecnie na stronach www można umieścić również muzykę czy pliki wideo. Okazuje się jednak, że to za mało. Z chwilą, kiedy na rynku pojawiły się smartfony i tablety, tradycyjne strony internetowe przestały się sprawdzać w stu procentach. Strona internetowa po wczytaniu do przeglądarki w urządzeniach mobilnych zdecydowanie traci na jakości. Często, aby coś przeczytać, musimy dany fragment strony powiększyć, co z kolei sprawia, że inny fragment nie jest widoczny. Przeglądanie takiej strony bywa irytujące i bardzo niewygodne. Aby rozwiązać ten problem, zaczęto tworzyć strony mobilne. Jednak ich wykonanie najczęściej łączy się z powieleniem całej witryny i zaprojektowaniem jej tylko z myślą o urządzeniach mobilnych. To natomiast wiąże się z dwukrotną aktualizacją strony www – pierwsza aktualizacja dotyczy oczywiście wersji witryny przeznaczonej dla komputerów, druga natomiast wersji zaprojektowanej dla urządzeń mobilnych. Jeżeli aktualizacja jest wykonywana stosunkowo rzadko, można próbować projektować tego typu strony. O wiele lepszym rozwiązaniem jest Responsive Web Design, w skrócie zwane RWD. To technika projektowania stron, dzięki której uzyskujemy optymalne wyświetlanie treści witryny zarówno na monitorze komputera, laptopa, jak i na wyświetlaczach urządzeń mobilnych. Strona responsywna w porównaniu do tradycyjnej o wiele lepiej dopasowuje się do tych urządzeń, ponieważ już na etapie projektowania zakładamy różne rozdzielczości, w jakich w przyszłości będzie wyświetlana. Zaletą stron responsywnych jest fakt, że tworząc strony dla różnych urządzeń, nie musimy powielać ich treści. Również aktualizacja treści wymaga od nas zmian tylko w jednym miejscu – nie wykonujemy aktualizacji osobno dla komputerów oraz smartfonów i tabletów. Podczas wczytywania strony do okna przeglądarki automatycznie sprawdzana jest rozdzielczość ekranu urządzenia, z którego korzystamy, po czym ładowane są style, które przeznaczyliśmy dla tej właśnie

STRONA 6

rozdzielczości. Dzięki takiemu rozwiązaniu mamy pewność, że tekst będzie czytelny, a grafiki nie będą większe niż szerokość ekranu. Równie istotną sprawą jest nawigacja. Zastosowanie wielopoziomowej nawigacji w urządzeniach o stosunkowo niewielkich rozmiarach jest dość kłopotliwe dla użytkownika. Strony responsywne korzystają z bardzo prostej nawigacji, do której dostęp mamy z każdego miejsca witryny. Zazwyczaj, jeśli używamy smartfonu lub tabletu, widoczny jest niewielki przycisk menu. Wystarczy jedno stuknięcie w przycisk, aby menu zostało wyświetlone i abyśmy mogli wybrać w nim inną podstronę.

STRONA 7

2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) – hipertekstowy język znaczników. Dokument napisany w tym języku zawiera znaczniki (tagi) umieszczone w nawiasach ostrych, np.: ,

,. Zazwyczaj występują one w parach – pierwszy znacznik jest znacznikiem początkowym (lub znacznikiem otwarcia), drugi natomiast – końcowym (znacznikiem zamknięcia). Przeglądarka internetowa odczytuje znaczniki i interpretuje je tak, aby użytkownik zamiast kodu widział właściwie sformatowaną stronę internetową. Strony internetowe są tworzone według określonych standardów. Odpowiada za nie W3C (World Wide Web Consortium). Standardy ustanawiane przez W3C nie mają co prawda mocy prawnej, jednak użycie aktualnych standardów jest zalecane ze względu na prawidłowe wyświetlanie stron www w przeglądarkach internetowych. Do najpopularniejszych standardów należy HTML5, będący najnowszą wersją języka HTML i stanowiący rozwinięcie języków HTML4 i XHTML1. Projektując stronę internetową, zdecydowanie należy trzymać się szablonu, który daje nam pewność, że strona będzie prawidłowo wyświetlana w przeglądarce internetowej (rys. 1).

STRONA 8

Rysunek 1. Przykładowa struktura dokumentu HTML Mając taką poglądową strukturę dokumentu, sprawdźmy, jak należy opisać poszczególne części za pomocą kodu HTML. Istotny element dokumentów publikowanych w internecie stanowią deklaracje ich typów zalecane przez W3C. Zadaniem deklaracji jest wskazanie przeglądarce internetowej, w jakim języku dokument został napisany. Dzięki temu przeglądarka może odpowiednio zinterpretować kod oraz wyświetlić prawidłowo dokument. W języku HTML5 deklaracja ogranicza się do zaledwie jednej linii kodu umieszczanej na początku dokumentu:. Następnie musimy wyznaczyć ramy dokumentu, czyli wprowadzić znacznik , wewnątrz którego zawarte będą wszystkie pozostałe znaczniki. Większość znaczników ma tzw. atrybuty, dzięki czemu precyzujemy sposób ich działania. I tak przy znaczniku dość ważne jest określenie języka, w jakim ma być prezentowana zawartość witryny. Atrybut wpisujemy wewnątrz nawiasów <>, ostatecznie zatem znacznik powinien przyjąć postać . Kolejny krok to umieszczenie w dokumencie opisu zawartości strony oraz jej tytułu. Wszystkie te informacje należy wpisać wewnątrz znacznika , czyli w nagłówku dokumentu. Pierwszy znacznik, który wprowadzamy do nagłówka, to, czyli informacje profilowe strony. Możemy zastosować tu m.in. następujące atrybuty: http-equiv=”conent-type” – służy do określenia sposobu kodowania dokumentu i to właśnie dzięki niemu w przeglądarce będą prawidłowo wyświetlane polskie znaki, name=”description” – pozwala na wprowadzenie opisu strony, name=”keywords” – umożliwia wpisanie słów kluczowych. Następnie wstawiamy znacznik , dzięki któremu treść, jaką wpiszemy w jego obrębie, będzie widoczna w górnej części okna przeglądarki – jest to szczególnie użyteczne, jeśli mamy otwartych kilka stron w różnych kartach i chcemy przełączać się między nimi. W nagłówku powinniśmy umieścić także ścieżkę do pliku CSS, w którym opiszemy wygląd strony. Tym jednak zajmiemy się nieco później. Następnie, już poza nagłówkiem, powinniśmy wyznaczyć tzw. ciało dokumentu, czyli miejsce, w którym będzie umieszczona właściwa część strony. Służy do tego</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 9</label></header><p class="padding-10">znacznik <body> (rys. 2). Będziemy w nim opisywali wszystkie elementy pokazane na rysunku 1. Rysunek 2. Określenie ram dokumentu HTML Kiedy ramy dokumentu są już określone, można przystąpić do definiowania kolejnych elementów. Zacznijmy od znacznika <header>. Przede wszystkim należy pamiętać, że <head> oraz <header> to, mimo nieco mylącej nazwy, dwa różne elementy. Co możemy umieścić w znaczniku <header>? Zazwyczaj takie elementy, jak: logo, motto, hasło reklamowe, formularz wyszukiwania. Warto pamiętać, że bardzo często, będąc w dowolnym miejscu witryny, chcemy szybko wrócić do strony głównej. Dlatego też, jeśli w elemencie <header> wstawiamy logo, powinno ono stanowić odnośnik do tej właśnie strony (rys. 3). Rysunek 3. Przykład elementu <header>W przedstawionym na rysunku 3 kodzie zastosowane zostały znaczniki: <a>,<img> oraz <h1>. Pierwszy z nich to kotwica. Wraz z atrybutem href tworzy hiperłącze (odnośnik, link) do wskazanego dokumentu HTML.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 10</label></header><p class="padding-10">Znacznik <img> służy do umieszczenia w dokumencie obrazu. Najistotniejsze atrybuty to rozmiary oraz alt, czyli tekst alternatywny – w razie, gdyby obraz nie został wczytany, pojawi się przypisana do tego atrybutu treść. Ostatni użyty znacznik to <h1>, czyli nagłówek poziomu pierwszego. Takich poziomów w języku HTML jest sześć, przy czym <h1> oznacza czcionkę w największym dopuszczalnym dla nagłówków rozmiarze, natomiast <h6> odpowiada za najmniejszą czcionkę nagłówka (rys. 4). Rysunek 4. Przykład elementu <header> w przeglądarce Google Chrome Kolejny element to <nav>. Jak można się domyśleć, w tej części strony umieszczamy odnośniki do innych stron lub do wyznaczonych fragmentów bieżącej strony. Załóżmy, że nasza witryna składa się z czterech stron: głównej (czyli domyślnie index.html), o nas, oferty oraz kontaktu. Do znacznika <nav> zatem powinniśmy wstawić cztery odnośniki. Najczęściej tworzymy z nich listę wypunktowaną, którą później opisujemy za pomocą stylów CSS. Za listę wypunktowaną odpowiada znacznik<ul>, natomiast każdy punkt listy określany jest za pomocą znacznika <li> (rys. 5).</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 11</label></header><p class="padding-10">Rysunek 5. Przykład elementu <nav>Znacznik <aside> odpowiada za dodanie do strony treści, które niekoniecznie muszą być powiązane ściśle z tematyką naszej witryny. Mogą to być reklamy, przypisy lub linki nawigacyjne (rys. 6). Element <section> to sekcja dokumentu obejmująca określoną część tematyczną. Zazwyczaj element ten zawiera nagłówek. Dzięki podziałowi treści na sekcje strona jest przejrzystsza, a co za tym idzie, o wiele łatwiejsza w odbiorze. Czytając treść, w której są wyodrębnione pewne fragmenty, bez problemu odnajdujemy na stronie miejsce, w którym skończyliśmy czytać (rys. 7). W sekcjach użyto kolejnego znacznika <p>. Służy on do tworzenia nowego akapitu. Akapit często mylnie jest postrzegany jako wcięcie w tekście. Przy projektowaniu stron akapit należy rozumieć jako fragment tekstu, zazwyczaj obejmujący kilka wierszy. Zauważmy, że na razie strona nie do końca oddaje układ, jaki został przedstawiony na rysunku 1. Aby poszczególne elementy zostały ułożone w określonych miejscach, np. <aside> oraz <section> były ustawione w jednym wierszu, musimy sformatować je za pomocą stylów CSS. Aktualny wygląd zatem nie jest skutkiem błędnego projektowania, lecz kwestią tego, że na razie budujemy dopiero strukturę HTML.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 12</label></header><p class="padding-10">Rysunek 6. Przykład elementu <aside>Element <article> oznacza samodzielny fragment treści dokumentu, np. wpis na blogu lub komentarz. Zmienimy nieco strukturę przykładowego dokumentu. Z tekstów, które umieściliśmy w elementach <section>, utworzymy autonomiczne artykuły. Oczywiście w praktyce będą zazwyczaj dłuższe. Nagłówki zostawimy w takiej formie, w jakiej są, natomiast pozostałą część zamienimy na artykuły (rys. 8).</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 13</label></header><p class="padding-10">Struktura HTML prostego dokumentu jest już niemal gotowa. Brakuje tylko elementu <footer>, czyli stopki. W stopce umieszczamy najczęściej informacje na temat autora, praw autorskich, czasami linki. W naszym przykładzie stopka zostanie umieszczona na samym dole witryny (rys. 9). Jednak można ją stosować także dla opisanych wcześniej elementów, czyli: <article>, <aside>, <nav> czy <section>.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 14</label></header><p class="padding-10">Rysunek 7. Zastosowanie elementu <section></p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 15</label></header><p class="padding-10">Rysunek 8. Zastosowanie elementu <article>Rysunek 9. Przykład zastosowania elementu <footer>2.2. Kaskadowe arkusze stylów CSS Kiedy struktura pliku HTML jest gotowa, możemy przystąpić do jego „ostylowania”, czyli sformatowania treści strony za pomocą kaskadowych arkuszy stylów. Założeniem</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 16</label></header><p class="padding-10">kaskadowych arkuszy stylów (Cascading Style Sheets, CSS) jest oddzielenie struktury strony od jej formatowania. Dzięki ich zastosowaniu możemy również formatować wszystkie strony witryny w sposób globalny. Kaskadowe arkusze stylów mogą występować w trzech formach: Style inline (style lokalne) – style wstawiane w tej samej linii, w której umieszczony jest element, którego dotyczy formatowanie. Zewnętrzny arkusz stylów – plik zapisany w formacie CSS. Sposób formatowania elementów witryny zdefiniowany w takim pliku może być używany na wielu stronach jednocześnie. Jeśli zatem nasza witryna obejmuje klika lub więcej stron, w pliku CSS określamy np.: wygląd akapitu, sposób wypunktowania listy, rozmiar czcionki, dołączamy plik do wszystkich stron, po czym zostają one jednolicie sformatowane. Wewnętrzny arkusz stylów – umieszczany w nagłówku formatowanego dokumentu. Z wewnętrznego arkusza stylów korzystamy, jeżeli w dokumencie będą się powtarzały dowolne elementy, np. chcemy, aby kilka akapitów wyglądało tak samo, zdjęcia miały ten sam rozmiar i kolor obramowania itp. Kaskadowość stylów wynika z ważności poszczególnych stylów. Jeżeli w dokumencie został zastosowany styl inline oraz styl w nagłówku dokumentu, ważniejszy jest styl inline i to on jest brany pod uwagę. Styl z nagłówka jest pomijany. Tak samo dzieje się, jeśli formatujemy element za pomocą stylu wpisanego w nagłówek oraz zewnętrznego arkusza stylów – ważniejszy jest styl wewnętrzny, który zostaje zastosowany. Każdy arkusz stylów jest złożony z reguł opisujących styl poszczególnych elementów dokumentu. Reguła zawiera selektor oraz deklarację. Selektor wskazuje, którego elementu lub częściej których elementów dotyczy deklaracja. Selektorem może być dowolny znacznik, np. <p>, <body>, <img>. Deklaracja natomiast składa się z dwóch części: właściwości (property), zwanej również cechą lub własnością, oraz wartości (value). Wróćmy do naszego przykładu. Pokażemy w nim, jak używać wszystkich trzech typów stylów. Zacznijmy od stylów inline. Załóżmy, że chcemy, aby element <header>miał ściśle określony kolor tła. Musimy zatem wrócić do pliku i odszukać w nim ten element. Następnie wewnątrz nawiasów <> wprowadzamy zapis style=”background-color:nazwa koloru lub kod koloru”. Jak należy</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 17</label></header><p class="padding-10">rozumieć taki zapis w odniesieniu do reguł? Otóż selektorem jest w tym wypadku<header>, cechą kolor tła, czyli background-color, natomiast wartością kod koloru – w przykładzie to #DDE6DE (rys. 10). Rysunek 10. Formatowanie tła wybranego elementu za pomocą stylu inline Zatrzymajmy się przy kolorach, które stanowią istotną część formatowania stron. Jeżeli kolor, który chcemy zastosować, należy do podstawowej palety barw, możemy wpisać odpowiednio jego nazwę: red, green, blue, yellow, pink, navy itp. Pozostałe kolory podajemy zazwyczaj w postaci kodu szesnastkowego, np. #ff1493 oznaczający głęboki róż, czy #40E0D0 oznaczający turkusowy. Wykaz kodów możemy znaleźć w internecie. Zapis umożliwiający określenie barwy docelowej to trzy bajty opisywane przez trzy pary cyfr zgodne z modelem RGB (czerwony, zielony, niebieski). Każdy z bajtów przyjmuje wartość z przedziału 00 (0) do FF (255). 00 to najmniejsza intensywność barwy, FF – największa. Jeśli wpiszemy np. #000000, otrzymamy kolor czarny, #FFFFFF da kolor biały, #FF0000 to kolor czerwony, a dzięki #700070 uzyskamy kolor fioletowy itd. Oczywiście kolory to nie wszystko. Jeśli dodatkowo chcielibyśmy, aby np. wszystkie obiekty elementu <header> były wyśrodkowane, możemy style rozszerzyć, dodając do selektora cechę align (rys. 11).</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 18</label></header><p class="padding-10">Rysunek 11. Formatowanie akapitu za pomocą stylu inline W analogiczny sposób będziemy formatować pozostałe elementy. Jeśli natomiast chcielibyśmy wstawić style do elementu <head>, musimy wprowadzić tam znacznik<style>. Atrybutem, o którym należy pamiętać, jest w tym przypadku type określający typ stylów. Najczęściej używamy typu text/css. Kiedy dokument jest uzupełniony o podany znacznik, możemy zacząć formatować poszczególne elementy. Formatując dokumenty, powinniśmy określić grupę czcionek, które mają być używane w przeglądarkach internetowych. To zagwarantuje, że strona będzie prezentowana prawidłowo. Załóżmy, że wszystkie teksty, które pojawiają się na stronie, będą miały ten sam krój, przy czym w pierwszej kolejności będzie stosowana Helvetica, w razie jej braku Arial, a gdyby również jej nie było, to dowolna czcionka systemowa z rodziny fontów bezszeryfowych (rys. 12). Rysunek 12. Zastosowanie wewnętrznego stylu CSS Czym różnią się czcionki szeryfowe od bezszeryfowych? Krój szeryfowy oznacza taki rodzaj pisma, w którym występują motywy dekoracyjne (ornamenty). Krój bezszeryfowy jest ich pozbawiony (rys. 13). Czcionki szeryfowe są wyraźniejsze w druku, natomiast na ekranach monitorów lepiej wyglądają czcionki bezszeryfowe. Spowodowane jest to rozdzielczością ekranu, która jest o wiele mniejsza niż rozdzielczość druku, przez co elementy ozdobne tracą na jakości, a tekst staje się nieczytelny. Warto odsunąć treść strony od jej brzegów. Możemy rozszerzyć style elementu<body>, wprowadzając wartość wszystkich marginesów (rys. 14).</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 19</label></header><p class="padding-10">Rysunek 13. Przykłady czcionek szeryfowych i bezszeryfowych Ostatni sposób zastosowania stylów CSS to skorzystanie z pliku zewnętrznego. Tworzymy nowy plik, lecz tym razem w formacie CSS. Można go nazwać np. style.css. Plik zapisujemy oczywiście w tym samym folderze, w którym znajduje się plik HTML. Jeśli korzystamy z edytorów treści stron www, po utworzeniu nowego pliku powinna pojawić się deklaracja kodowania znaków (rys. 15). Jeśli zapis taki nie istnieje, należy go wprowadzić.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 20</label></header><p class="padding-10">Rysunek 14. Formatowanie marginesów za pomocą wewnętrznych stylów CSS Rysunek 15. Deklaracja sposobu kodowania znaków Aby w zewnętrznym pliku CSS sformatować elementy, które występują na większości podstron, np. <header>, <body> lub <p>, wystarczy wprowadzić ich nazwy, a następnie w nawiasach {} określić ich style. Jeśli przyjrzymy się elementowi</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 21</label></header><p class="padding-10"><header>, okaże się, że logo oraz tekst, które są w nim umieszczone, wydają się „przyklejone” do jego krawędzi. Chcąc odsunąć je nieco, musimy powiększyć margines wewnętrzny, przy czym w tym konkretnym przypadku zajmiemy się tylko marginesem lewym, prawym oraz górnym, margines dolny pominiemy. Cechą, której użyjemy, jest padding (rys. 16). Padding, tak samo jak margin, mają tę właściwość, że nie musimy za każdym razem wpisywać, o który margines nam chodzi. Jeżeli zamiast padding-left:10px, padding-top:10px; itd. zastosujemy zapis padding:10px 20px 10px 0, będzie to również prawidłowa forma. Wystarczy tylko zapamiętać, że pierwsza wartość dotyczy marginesu górnego, następna prawego, kolejna dolnego i wreszcie ostatnia – lewego. Rysunek 16. Określenie marginesów wewnętrznych elementu <header>w zewnętrznym pliku CSS Zmieniliśmy szerokości marginesów, tymczasem nic się nie zmieniło. Zgadza się. Musimy teraz plik CSS dołączyć do dokumentu HTML. W elemencie <head>wprowadzamy ścieżkę prowadzącą do pliku style.css. Zapisujemy oba pliki – po odświeżeniu w przeglądarce zobaczymy wyraźną różnicę w elemencie <header> (rys. 17). Jeśli w pliku zewnętrznym chcemy odwołać się do konkretnego obiektu na konkretnej podstronie, powinniśmy skorzystać z nieco innej metody. W takim przypadku nadajemy obiektowi identyfikator, który jednoznacznie będzie wskazywał właśnie na niego.</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 22</label></header><p class="padding-10">W dokumencie HTML zastosowaliśmy nagłówki <h1>, <h2> oraz <h3>. Bez względu na to, ile stron będzie zawierała witryna, za każdym razem napisy sformatowane tymi nagłówkami będą wyglądały identycznie. Chcemy, aby motto strony wyróżniało się kolorystycznie. W znaczniku <h1> wprowadzimy zatem identyfikator oraz jego nazwę, np. id=”slogan” (rys. 18). Wprowadzając identyfikator, zazwyczaj korzystamy z języka angielskiego, który jest najbardziej uniwersalny, jeśli chodzi o projektowanie stron. Oczywiście nie będzie błędem, jeśli zastosujemy polski wyraz, jednak wówczas należy pamiętać, aby nie używać znaków typowych dla języka polskiego, np. ą, ć, ż itp. Rysunek 17. Dołączenie zewnętrznego pliku CSS do dokumentu HTML Musimy teraz odwołać się do tego identyfikatora w arkuszu stylów. Odwołanie tworzymy za pomocą znaku # (rys. 19). Rysunek 18. Przypisanie identyfikatora do wybranego obiektu</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 23</label></header><p class="padding-10">Jeżeli utworzymy pozostałe strony witryny i będziemy chcieli, aby hasło znajdujące się na nich również miało ten kolor, którego użyliśmy na stronie głównej, w każdym z dokumentów HTML musimy nadać temu elementowi taki sam identyfikator. Inna możliwość to nadanie elementom tzw. klas i odwoływanie się do tych klas. Zajmiemy się naszym menu – aktualnie ma ono formę pionowej listy. Taka lista może pojawiać się również w treści strony. Gdybyśmy więc w zewnętrznym pliku CSS sformatowali elementy <ul> oraz <li>, każda lista, którą umieścilibyśmy później w witrynie, miałaby styl określony w pliku CSS. Aby uniknąć takiej ewentualności, nadamy liście klasę o nazwie menu. W tym celu w kodzie HTML w elemencie <ul>wprowadzamy zapis class=”menu” (rys. 20). Rysunek 19. Odwołanie w zewnętrznym pliku CSS do identyfikatora Rysunek 20. Nadawanie klasy wybranemu elementowi</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 24</label></header><p class="padding-10">Do klasy, w przeciwieństwie do identyfikatora, odwołujemy się nie za pomocą symbolu #, lecz kropki. Umieszczamy zatem w arkuszu stylów zapis .menu. W tym szczególnym przypadku musimy odwołać się nie tylko do samej klasy, lecz również do elementów<ul> oraz <li>. W pliku CSS wpisujemy zatem ul.menu, ul.menu li. Następnie powinniśmy wyczyścić z listy znaki wypunktowania. Użyjemy do tego celu stylu listy (rys. 21). Rysunek 21. Usuwanie stylu listy Zamieniamy listę na blok – w tym celu musimy zmienić sposób wyświetlania, czyli określić właściwość display. Aby ustawić elementy blokowe obok siebie i mieć możliwość ustalenia szerokości pojedynczego elementu oraz odstępów między nimi, powinniśmy zastosować oblewanie elementów. Zastosujemy cechę float, która może mieć wartość left (element jest ustawiany po lewej stronie względem pozostałych elementów), right (element jest wyrównywany do prawej strony) oraz none (element nie sąsiaduje z innymi elementami). W przypadku menu wybieramy</p></article></section><section class="comments padding-b-5 padding-l-0"><article class="comment"><header><label class="muted pag"> STRONA 25</label></header><p class="padding-10">wartość left. Pamiętajmy, że dotyczy to nie całej listy, lecz tylko jej pojedynczych pozycji, czyli <li> (rys. 22). Rysunek 22. Zamiana listy na blok Na rysunku 22 widać, że cecha float sprawiła, iż element <aside> również został ustawiony obok pozycji menu. Aby przenieść go niżej, musimy wyczyścić tę cechę dla elementu <aside> (rys. 23).</p></article></section></section></div></div></div><script type="text/javascript">var _qasp = _qasp || []; _qasp.push('go'); _qasp.push(['setFastPAID', 'sadDoci']);</script><script type="text/javascript">(function (d, x, a) { var z = d.createElement(x); z.type = 'text/javascript'; z.src = a; var s = d.getElementsByTagName(x)[0]; s.parentNode.insertBefore(z, s); })(document, 'script', '//a.spolecznosci.net/core/45e90454f0fad720f5b56a8634cc7f07/main.js');</script><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-2" name="doublebillboard_doci_12123" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-2" name="square_doci_11888" scrolling="no" frameborder=0 width=0 height=0></iframe></div></div></div><div class="footer contentpage"><footer><div class="socialallthethings">Made in Warsaw · Copyright 2016 · All rights reserved -<a class="Grupa Webshark.pl" href="http://webshark.pl">webshark.pl</a><a class="" href="/regulations-pl">Regulamin</a><a class="" href="/privacy">Polityka Prywatności</a><a class="" href="/contact">Kontakt</a></div></footer><div class="banner"></div></div><script>function mouseMovedOrMouseCLicked(e) { var mainEl = document.getElementById("html"); mainEl.removeEventListener("mousemove", mouseMovedOrMouseCLicked); mainEl.removeEventListener("touchstart", mouseMovedOrMouseCLicked); mainEl.removeEventListener("touchmove", mouseMovedOrMouseCLicked); mainEl.removeEventListener("mousedown", mouseMovedOrMouseCLicked); mainEl.removeEventListener("scroll", mouseMovedOrMouseCLicked); /* var element = document.getElementById('square-1'); var element2 = document.getElementById('doublebillboard-1'); */ var element3 = document.getElementById('adrino-a1'); /* element.classList.remove('logg'); */ /* element.style.maxHeight = null; element2.style.maxHeight = null; */ if(element3!==null){ element3.style.maxHeight = null; element3.style.display = 'block'; } } var html = document.getElementById("html"); html.addEventListener("mousemove", mouseMovedOrMouseCLicked, false); html.addEventListener("touchstart", mouseMovedOrMouseCLicked, false); html.addEventListener("touchmove", mouseMovedOrMouseCLicked, false); html.addEventListener("mousedown", mouseMovedOrMouseCLicked, false); html.addEventListener("scroll", mouseMovedOrMouseCLicked, false);</script><script id="container-header-template" type="x-handlebars-template"></script><script id="search-container-template" type="x-handlebars-template"><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-4" name="doublebillboard_doci_9895" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-4" name="square_doci_9250" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="span8"><div class="content" ><section><h3 class="w-100-p overflow-a"><div class="float-l">Lista plików <span id="search_files_count_1"></span></div><div class="float-r" id="search_pages_1"></div></h3></section><section class="padding-0 margin-0" id="search_files_result"><div class="w-100-p extra centered"><i class="icon-spinner icon-spin"></i> Proszę czekać, szukam...</div></section><section><h3 class="w-100-p overflow-a"><div class="float-l padding-5">Lista plików <span id="search_files_count_2"></span></div><div class="float-r" id="search_pages_2"></div></h3></section></div></div><div class="span4"><div class="content"><section><h3>Lista użytkowników <span id="search_users_count"></span></h3></section><section id="search_users_result" class="comments-thread padding-l-r-0 margin-l-r-0"><div class="padding-0 margin-0 w-100-p centered"><i class="icon-spinner icon-spin"></i> Proszę czekać, szukam...</div></section></div></div><div class="a-750" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/397?lo=1" class="frame_shadow iframe_async" id="doublebillboard-3" name="doublebillboard_doci_5228" scrolling="no" frameborder=0 width=0 height=0></iframe></div><div class="a-300" style="padding: 10px!important;"><iframe data-src="/aserver/campaign/398?lo=1" class="frame_shadow iframe_async" id="square-3" name="square_doci_12740" scrolling="no" frameborder=0 width=0 height=0></iframe></div></script><script id="search-files-content-template" type="x-handlebars-template">{{#each data_files_render}}<article class="elem"><header><img height="45" width="45" id="thumbnail-{{id}}" src="/static/img/loader/thumb-loader.gif" data-src="https://img.doci.pl/i/{{id_url}}/7/2/thumb.png"><p class="margin-0 padding-0" id="file_name_{{id}}" style="padding-bottom: 1px !important;"><span ><div class="text-ellipsis elipsis-file"><a href="/{{user_data.url}}/{{name_url}}+f{{id_url}}" title="{{name_display}}">{{name}}</a></div><span class="float-r size-11">• {{date_add_format}}</span></span></p><label class="muted"><span class="float-r size-11 padding-l-10">dodał: <a href="/{{user_data.url}}" title="{{user_data.display}}">{{user_data.display}}</a></span>{{#unless in_trash}}<span class="fileSystemMenu d-block float-r">{{#if is_admin}}<span class="{{#if abused}} red {{else}} green {{/if}} padding-l-10 pointer change-abused"> <i class="fa fa-ban"></i></span>{{/if}}</span>{{/unless}}</label></header><div class="margin-0 padding-0 size-11">Rozmiar: {{size_format}} - <span class="uppercase" style="color:#15935c">{{extension}}</span></div></article>{{/each}}</script><script id="search-users-content-template" type="x-handlebars-template">{{#each data_users_render}}<article class="comment"><header><p>{{#if user_data.avatar}}<img height="45" width="45" style="margin-left:10px;margin-right:15px;position:relative;float:left;" src="https://img.doci.pl/avatar/{{user_data.userID}}/2.png">{{else}}<img height="45" width="45" style="margin-left:10px;margin-right:15px;position:relative;float:left;" src="{{../../config.streaming_url}}static/img/avatar/avatar.png">{{/if}}<a class="portrait_wrapper" href="/{{user_data.url}}">{{user_data.display}}</a>• {{user_data.files_count_format}} plików<br/>{{user_data.register_date}}</p></header></article>{{/each}}</script><script id="search-files-empty-content-template" type="x-handlebars-template"><div class='extra w-100-p hover centered' >Brak wyników wyszukiwania dla frazy: "{{search_phrase}}"</div></script><script id="search-users-empty-content-template" type="x-handlebars-template"><div class='extra w-100-p hover centered'>Brak wyników</div></script><script id="search-pagination-template" type="x-handlebars-template">{{#if is_next_page}}<span class="link2 pointer search-next-page-click" data-href="{{next_page}}"><div class="float-r padding-5 padding-l-10 padding-r-10 hover" style="font-size:14px;"> Następna strona <i class="fa fa-chevron-right"></i></div></span>{{/if}} {{#if is_previous_page}}<span class="link2 pointer search-previous-page-click" data-href="{{previous_page}}"><div class="float-r padding-5 padding-l-10 padding-r-10 hover"style="font-size:14px;"><i class="fa fa-chevron-left"></i> Poprzednia strona </div></span>{{/if}}</script><script id="search-advanced-template" type="x-handlebars-template">{{#if show_search_saved_filter}}<div class="float-l centered pointer hover padding-5 {{#if search_saved}} modulo green {{/if}} action-search-saved" style="width: 200px; border-right: 1px solid #dfe0df;"><i class="icon-anchor"></i> Szukaj zachowane</div>{{/if}}<div class="float-l" style="border-right: 1px solid #dfe0df;"><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_all}} modulo green {{/if}} action-search-type" data-type="all"><i class="icon-copy"></i> Wszystkie</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_movie}} modulo green {{/if}} action-search-type" data-type="movies"><i class="icon-film"></i> Filmy</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_music}} modulo green {{/if}} action-search-type" data-type="music"><i class="icon-headphones"></i> Muzyka</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_photo}} modulo green {{/if}} action-search-type" data-type="photos"><i class="icon-picture"></i> Zdjęcia</div><div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_other}} modulo green {{/if}} action-search-type" data-type="other"><i class="icon-paper-clip"></i> Inne</div>{{#if show_search_directory_filter}}<div class="float-l padding-5 hover pointer padding-l-10 padding-r-10 {{#if search_directory}} modulo green {{/if}} action-search-type" data-type="directory"><i class="icon-folder-open-alt"></i> Katalogi</div>{{/if}}</div></script><script id="search-directories-content-template" type="x-handlebars-template">{{#each data_directories_render}}<div id="d-{{id}}" class='search-element-container margin-0 w-100-p hover {{#if modulo}}modulo {{/if}} ' style="padding-top: 8px; padding-left: 15px; "><div class='search-icon'><img src="/img/icons/big_dir.png"></div><div class="search-name" style="margin-top: 7px;"><div style=" width: 515px ; height: 28px; "><div class="text-ellipsis" style="max-width: 515px;"><a title="{{name}}" href="/{{user_data.url}},d-{{id}},{{name_url}}">{{name}}</a></div><div class="search-desc" style="margin-top:5px;"><span>Katalogów:: {{dir_count}} / plików: {{file_count}}</span><span class="search-desc float-r size-11" style="min-width:100px;text-align:right;margin-top:-4px;">{{#if saved}}<i class="icon-anchor green" title="Plik zachowany" style="margin-left: 10px;"></i>{{/if}}<i class="{{icon}}" style="margin-left: 10px;"></i></span></div></div><span class="search-desc float-l text-ellipsis" style="max-width:400px;margin-top:7px;">Dodał: <a class="link search-link" href="/{{user_data.url}}">{{user_data.display}}</a><span> w katalogu: <a class="link search-link" href="/{{user_data.url}},d-{{dir_data.id}},{{dir_data.name_url}}">{{dir_data.name}}</a></span></span><span class="search-desc float-r" style="min-width:100px;text-align:right;margin-top:5px;">{{date_add_format}}</span></div></div>{{/each}}</script><script id="comments-comment-list-each-template" type="x-handlebars-template">{{#each file_comments}}<section class="comments padding-b-5" ><article class="comment"><header><p>{{#if user_data.avatar}}<img height="45" width="45" src="https://img.doci.pl/avatar/{{user_data.userID}}/2.png">{{else}}<img height="45" width="45" src="{{../../config.streaming_url}}static/img/avatar/avatar.png">{{/if}} {{#unless is_guest}}<a class="portrait_wrapper" href="/{{user_data.url}}">{{/unless}} {{user_data.display}} {{#unless is_guest}}</a>{{/unless}} • {{date_format}}</p><label class="muted">{{#if can_edit}}<span data-comment-id={{ID}} style="cursor:pointer;margin-right:8px; margin-left: 8px; margin-top: -4px;" type="button" class="close comment_remove_btn" data-dismiss="modal" aria-hidden="true" title="{{lang.file_comment_remove}}">×</span>{{/if}} {{#if show_file_data}}<a title="{{file_data.name}}" style="float:right; margin-left: 8px; margin-right:8px; font-size:11px;" href="/{{owner_data.url}}/{{file_data.name_url}}+f{{file_data.id_url}}"><i class="fa fa-link"></i></a>{{/if}}</label></header><p>{{{comment}}}</p></article></section>{{/each}}</script><div class="modal-container"></div><script src="//ovh.webshark.pl/adsrv/10/main.js" rel="javascript" type="text/javascript" ></script><script>var loadDeferredStyles = function() { var addStylesNode = document.getElementById("deferred-styles"); var replacement = document.createElement("div"); replacement.innerHTML = addStylesNode.textContent; document.body.appendChild(replacement); addStylesNode.parentElement.removeChild(addStylesNode); }; var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); }); else window.addEventListener('load', loadDeferredStyles);</script></body></html>

Rozmiar :	14.5 MB
Rozszerzenie:	pdf

dareks_