Elementy pozycjonowania

Save this PDF as:
 WORD  PNG  TXT  JPG

Wielkość: px
Rozpocząć pokaz od strony:

Download "Elementy pozycjonowania"

Transkrypt

1 Elementy pozycjonowania Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów. Pozycjonowanie absolutne Pozycjonowanie względne Pozycjonowanie ustalone Odległości Pionowe wyrównanie Pozycja w stosie Kadrowanie Pozycjonowanie absolutne Przykład: <div style="position:absolute; left:0%; top:0%"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div> Elementy pozycjonowane w sposób "absolutny" są wlewane do zarezerwowanych obszarów i zajmują tam miejsce bez względu na pozycję innych elementów. W taki właśnie sposób jest ustawiony obrazek "Enter". Elementy te mogą się nakładać na inne elementy absolutne lub względne, które akurat się tutaj znalazły. Element pozycjonowany absolutnie wypada niejako z normalnego przepływu dokumentu - ustawionych kolejno elementów. Polecenie pozycjonowania absolutnego może mieć przykładową postać: position:absolute; left:800px; top:20px Zalecane jest bardzo uważne i ostrożne stosowanie definicji absolutnych, aby nie popsuć widoku strony, zwłaszcza przy zmianach wielkości okna przeglądarki. 1

2 Pozycjonowanie względne Pozycjonowanie względne odnosi się do miejsca wstawienia definicji. Na przykład akapit mógłby mieć nadane pozycjonowanie: position:relative; left: 200px; top: 50px czyli przesunięcie o 200 pikseli w prawo i 50 pikseli w dół. Gdybyśmy zastosowali wartość ujemną, np. top: -50px, akapit zostałby przesunięty w górę. Przykłady: <p style="position: relative; left: 200px; top: 50px; width: 400px">Ten akapit...</p> Ten akapit ma pozycję względną (relative), jest odsunięty od lewego marginesu o 200 pikseli i o 50 pikseli w dół. Pole akapitu ma 400 pikseli szerokości. W rzeczywistości powinien być wyświetlany zaraz pod podaną wyżej definicją, ale pozycjonowanie spowodowało przesunięcie w prawo i w dół. Aby nie nakładał się na następny akapit, umieszczono pod nim kilka znaczników <br>. <div style="position: relative; left: 300px; width: 400px">Wykaz odsunięty o 300 pikseli i mający 400 pikseli szerokości</div> To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu Kod pozycjonowania możemy umieszczać bezpośrednio w znaczniku elementu lub obejmować element znacznikami <span> lub <div>. Pozycjonowanie ustalone Pozycjonowanie ustalone (fixed) pozwala utrzymywać element w stałej pozycji w okienku przeglądarki, np. grafikę. Polecenie jest interpretowane przez Netscape'a i Operę (z uchybieniami), ale nie przez Internet Explorera. Ciekawym sposobem wykorzystania może być symulacja strony ramkowej w dokumencie nie zawierającym ramek. Możliwe jest bowiem wstawienie definicji, która rozdzieli stronę na odseparowane od siebie bloki, przy czym jeden blok będzie tkwił w miejscu, gdy drugi będzie można przewijać. W ten sposób możemy na przykład utrzymywać widoczny cały czas spis treści, gdy zawartość dokumentu jest przewijana. <div style="position:fixed; left:2%; top:0; right:75%; bottom:0"> <H1>Spis treści</h1> <A HREF=" <A HREF=" </div> 2

3 <div style="position:absolute; left:26%; bottom:0; right:0; top:0"> <H1>Tekst główny</h1> <P>to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst to jest tekst</p> </div> I ilustracja w Netscape 6: Jak widać, dokument jest przewijany (widać to na suwaku), natomiast część ze spisem tkwi w miejscu. Odległości Pozycjonowanie absolutne i względne jest realizowane za pomocą parametrów left, right, top i bottom, którym przypisujemy jednostki miary, np. piksele, centymetry czy procenty. Jak widzieliśmy to już w podanych przykładach, możemy zastosować takie definicje, jak: <P style="position:relative; left:10%">przykładowy akapit</p> Przykładowy akapit <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT="pan samochodzik" style="position:relative; right: 5cm"> 3

4 Za pomocą pozycjonowania względnego (ale i absolutnego) możemy łatwo uzyskiwać "efekty specjalne", np. nakładanie elementów: <img src="ami.gif" width=80 height=114 border=0 alt=" "> <div style="position: relative; top: -84px; left: 30px"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div> <div style="position: relative; top: -168px; left: 60px"><img src="pcq.gif" width=80 height=114 border=0 alt=" "></div> Wyjaśnienie konstrukcji: Obrazki mają 80 pikseli szerokości i 114 pikseli wysokości. Blok DIV powoduje ustawianie ich jeden pod drugim. Chcemy jednak, aby kolejne obrazki były przesunięte o 30 pikseli w dół i w prawo w stosunku do poprzedniego. Pierwszy obrazek można wstawić bez definiowania pozycji. Drugi obrazek jest ustawiany pod pierwszym, Musimy więc "cofnąć" go o 84 piksele w górę (114-30), a także przesunąć w prawo o 30 pikseli. Trzeci obrazek musimy przesunąć w górę już o pikseli, czyli top: -168px. Trzeba go także przesunąć w prawo o 60 pikseli, czyli left: 60px. Jak widać, powstaje jednak "dziura", którą można zlikwidować, podciągając do góry pozostałe elementy na stronie. 4

5 W analogiczny sposób można nakładać na siebie bloki tekstu: <font size="+4" color="#ff0000">to jest jakiś tam tekst</font> <div style="position:relative; left: 200px; top: -30px"><font size="+3" color="#ffccff">to jest inny tekst</font></div> To jest jakiś tam tekst To jest inny tekst Pionowe wyrównanie Parametr vertical-align pozwala ustalać pionowe relacje elementów strony. Do dyspozycji mamy wartości: baseline, sub, super, top, text-top, middle, botom, text-bottom, długość, procent. Wartością domyślną jest baseline. <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT="pan samochodzik" STYLE="vertical-align: middle">tekścik middle <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT="pan samochodzik" STYLE="vertical-align: baseline"> tekścik baseline <P>Normalny akapit <span STYLE="vertical-align: 3mm"><B>podniesienie tekstu</b></span> dalszy ciąg akapitu.</p> 5

6 Normalny akapit podniesienie tekstu o 3mm dalszy ciąg akapitu. <P>Normalny akapit <span STYLE="vertical-align: -20%"><B>opuszczenie tekstu</b></span> dalszy ciąg akapitu.</p> Normalny akapit opuszczenie tekstu o 20% dalszy ciąg akapitu. <P>Normalny akapit <span STYLE="vertical-align: sub"><b>użycie sub</b></span> dalszy ciąg akapitu.</p> Normalny akapit użycie sub dalszy ciąg akapitu. <P>Normalny akapit <span STYLE="vertical-align: super"><b>użycie super</b></span> dalszy ciąg akapitu.</p> Normalny akapit użycie super dalszy ciąg akapitu. Pozycja w stosie Możemy regulować pionową pozycję w stosie nałożonych na siebie elementów (tzw. z-order). Służy do tego polecenie z-index: n. <div style="position: relative; z-index: 1"> <img src="ami.gif" width=80 height=114 border=0 alt=" "> </div> <div style="position: relative; top: -84px; left: 30px; z-index: 3"> <img src="enter.gif" width=80 height=114 border=0 alt=" "> </div> <div style="position: relative; top: -168px; left: 60px; z-index: 2"> <img src="pcq.gif" width=80 height=114 border=0 alt=" "> </div> Obrazki są układane w kolejności od z-index: 1 (na spodzie) do z-index: 3 (na wierzchu). 6

7 Analogicznie, w przypadku tekstu: <div style="position:relative; z-index: 2"><font size="+4" color="#ff0000">to jest jakiś tam tekst</font></div> <div style="position:relative; left:200px; top: -40px; z-index: 1"><font size="+5" color="#000000">to jest inny tekst</font></div> To jest jakiś tam tekst To jest inny tekst Kadrowanie Polecenie kadrowania (Internet Explorer, Netscape 6) pozwala przycinać obraz, kolejno, góry, prawej strony, dołu i lewej strony (pozycje linii tnących liczone zawsze od góry, od lewej, od góry, od lewej). Jest to obecnie możliwe jedynie dla pozycji absolutnej - position:absolute. Wycinkiem może być jedynie prostokąt rect. Na ilustracjach pokazujemy oryginał i obraz wykadrowany. Wartości określają de facto rogi prostokąta: górny-prawy i dolny-lewy. <div style="position:absolute; top:200px; clip: rect(20px 60px 114px 0px)"> <img src="ami.gif" width=80 height=114 border=0 alt=" "> </div> <IMG SRC="../grafika/car1.gif" WIDTH="376" HEIGHT="188" BORDER="1" ALT=" " style="position:absolute; top:500px; left:400px; clip:rect(0px 200px 100px 0px);"> 7

8 Wypływanie treści Gdy "pudełko", czyli naturalny obszar jakiegoś elementu jest zbyt małe, aby zawrzeć w sobie całą zawartość elementu, wypływa ona z niego. Fakt ten możemy obsłużyć za pomocą polecenia overflow. Jeśli określiliśmy pudełko, ale nie zdefiniowaliśmy wartości overflow, treść wypływa ze zdefiniowanego obszaru i rozszerza faktyczny obszar jej występowania - zdefiniowana szerokość jest zachowywana, natomiast poszerza się wysokość. Jest to naturalne zachowanie elementu, np. treści akapitu czy tytułu. <h1 style="width:250px; height:100px">zawartość tytułu stopnia 1</h1> zawartość tytułu stopnia 1 <P style="width:250px; height:100px">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Możemy jednak określić, jak ma się zachować przeglądarka, gdy nastąpi owo "przelanie" tekstu. W poleceniu overflow możemy przyjąć jedną z czterech wartości: scroll, visible, auto i hidden. Scroll powoduje wyświetlenie pionowego i poziomego paska przewijania obejmujących zdefiniowany obszar występowania. <P style="width:250px; height:100px; overflow:scroll">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> 8

9 zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Visible powoduje wyświetlenie całej zawartości elementu, bez względu na zdefiniowany obszar występowania. W Internet Explorerze wylana zawartość nie nakłada się na inne elementy, w Netscape 6 - nakłada się. Wydaje się, że poprawna (i logiczna) jest interpretacja Netscape'a. <P style="width:250px; height:100px; overflow:visible">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Auto powoduje wyświetlenie jedynie tego paska przewijania, który jest w danej sytuacji potrzebny. W przypadku akapitu będzie to jedynie pasek pionowy. <P style="width:250px; height:100px; overflow:auto">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Hidden powoduje przycięcie widocznej zawartości akapitu do obszaru zdefiniowanego pudełka. Wylana część akapitu nie będzie widoczna. <P style="width:250px; height:100px; overflow:hidden">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu Pływanie elementów Polecenie float pozwala przepływać elementom we wskazanym kierunku w danej linii i opływać go sąsiadującym elementom z przeciwnego kierunku. Float może przyjmować wartości left, right i none. 9

10 <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" STYLE="float: left"> Obrazek przepływający na lewo i tekst opływający go z prawej strony. Obrazek przepływający na lewo i tekst opływający go z prawej strony. <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" STYLE="float: right"> Obrazek przepływający na prawo i tekst opływający go z lewej strony Obrazek przepływający na prawo i tekst opływający go z lewej strony <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" STYLE="float: none"> Obrazek ustawiony bez opływania. Obrazek ustawiony bez opływania. Gdybyśmy chcieli natomiast "skontrować" opływanie elementów, możemy się posłużyć parametrem clear, który zrzuca w dół element. Przyjmuje on wartości left, right i both. <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:left"> <p>akapit bez clear</p> Akapit bez clear 10

11 <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:left"> <p style="clear:left">zrzucony akapit</p> Zrzucony akapit <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:right"> <p>akapit bez clear</p> Akapit bez clear <IMG SRC="../grafika/pcq.gif" WIDTH="80" HEIGHT="114" BORDER="1" ALT="pcq" style="float:right"> <p style="clear:right">zrzucony akapit</p> Zrzucony akapit Wyświetlanie elementów Parametr display reguluje sposób wyświetlania elementów, tworząc z nich elementy blokowe, liniowe czy punkty wykazu. Lista wartości jest bardzo obszerna, ale jest interpretowana przez przeglądarki w sposób szczątkowy. Lista obejmuje: none, block, inline, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption. Kilka działających przykładów: Dwa akapity mogą być ustawione w jednym wierszu, gdy obu nadamy wartość inline (IE5). Normalnie nie jest możliwe, gdyż akapit jest blokiem rezerwującym dla siebie odrębne "pudełko". 11

12 <P style="display:inline"><b>akapit pierwszy </B></P> <P style="display:inline"><i>akapit drugi</i></p> Akapit pierwszy Akapit drugi Podobnie, w jednym rzędzie z tekstem możemy ustawić tabelę, dodając w niej parametr display:inline.: tekst przed tabelką tekst za tabelką Element nie będący z natury blokiem, jak obrazek, możemy oznaczyć jako blok, wskutek czego nie będzie sąsiadował poziomo z innym elementem. Przykład obrazka i tekstu bez display:block Przykład oznaczenia obrazka jako bloku. jakiś tam tekst <IMG SRC="kubus.jpg" WIDTH="263" HEIGHT="236" BORDER="0" ALT="" style="display:block"> jakiś tam tekst 12

13 jakiś tam tekst display:none powoduje niewyświetlanie elementu, chociaż w źródle dokumentu w dalszym ciągu istnieje. Tutaj ma się pojawić obrazek, ale display:none usuwa go z ekranu. <IMG SRC="kubus.jpg" WIDTH="263" HEIGHT="236" BORDER="0" ALT="" style="display:none"> Widzialność elementów Parametr visibility pozwala decydować o tym, czy element jest widoczny na ekranie, czy też nie. Parametr przyjmuje wartości visible, hidden i collapse. Wartość hidden ukrywa element, zostawiając puste miejsce. Przykład: schowanie całego akapitu. <P style="visibility:hidden">ten akapit ma być niewidoczny.</p> Ten akapit ma być niewidoczny. Przykład: schowanie fragmentu akapitu objętego wycinkiem span. 13

14 John Fitzerald Kennedy został zastrzelony przez no, widzę, że jesteście ciekawi..., ale mało kto o tym wie. Wartość visible wymusza wyświetlenie elementu. Wartość collapse wymusza ukrycie elementu - obsługuje ją jedynie Netscape 6 i Opera 7. tego akapitu nie widać w Netscape 6 i Operze 7. Jednostki miary Do dyspozycji mamy dwa rodzaje jednostek miary - absolutne i relatywne. Przykładem miary absolutnej jest centymetr, relatywnej - piksel. Jednostkę miary podajemy zawsze bezpośrednio po liczbie, np. 1cm, 0,1in itd. Miary absolutne in - cale, 1in = 2.54cm cm - centymetry, 1cm mm - milimetry, 1mm pt - punkty, 1pt = 1/72in pt - pika, 1pc = 12pt Miary relatywne em - wysokość czcionki elementu ex - x-height - wysokość litery x px - piksele, w odniesieniu do rozdzielczości tła Oddzielnie wyróżnia się wielkości procentowe oraz absolutne (np. x-large) i relatywne (np. smaller) miary czcionek. Przykłady wielkości absolutnych <H1 style="font-size: 1.5cm">Tytuł stopnia 1</H1> Tytuł stopnia 1 <p style="font-size: 2pc">Akapit 2 pika</p> Akapit 2 pika <ul style="margin-left: 30mm"> <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> </ul> 14

15 punkt 1 punkt 2 punkt 3 Przykłady wielkości relatywnych <p style="text-indent: 3em; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki.</p> Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości czcionki. <p style="text-indent: 3em; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki.</p> Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości czcionki. <p style="text-indent: 3ex; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery.</p> Akapit z czcionką 12-punktową, o wcięciu trzykrotnej wysokości litery. <p style="text-indent: 3ex; font-size: 15pt">Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery.</p> Akapit z czcionką 15-punktową, o wcięciu trzykrotnej wysokości litery. <p style="text-indent: 100px; font-size: 12pt">Akapit z czcionką 12-punktową, o wcięciu 100 pikseli.</p> Akapit z czcionką 12-punktową, o wcięciu 100 pikseli. Stosowanie miar relatywnych ma sens przede wszystkim w sytuacjach, w których chcemy zachować proporcje wyświetlania różnych elementów. Na przykład na 14-calowym monitorze piksel ma inną wartość w centymetrach w rozdzielczości 800x600 niż 1024x768. Kursory Internet Explorer od wersji 4, Netscape 6 i Opera 7 interpretują definicje kursorów. Zauważmy, że przesunięcie kursora nad jakiś element strony WWW powoduje niekiedy zmianę jego kształtu. Na przykład kursor nad odsyłaczem ma kształt "łapki", nad tekstem - kształt wielkiej litery I, nad grafiką - kształt strzałki. Okazuje się, że możemy sami wybrać kształt kursora, dając dodatkową informację czytelnikowi strony. Definicja taka nie wpływa na wyświetlanie strony w innych przeglądarkach, więc jej użycie jest bezpieczne. Kursor możemy definiować w stylach, przypisując jakiś kształt każdemu elementowi określonego rodzaju na danej stronie, czy też doraźnie tworzyć styl i przypisywać go wybranej grafice, tytułowi itd. 15

16 Definicje są niezmiernie proste. Wystarczy jedynie napisać w stylu cursor:styl_kursora. Zaprezentujmy pierwszy z brzegu przykład, w którym przesunięcie kursora myszki nad grafikę spowoduje wyświetlenie kursora ze znakiem zapytania. <img src="lupus.gif" width=176 height=200 alt="" border="0" style="cursor:help"> Oczywiście definiowanie kursorów nie jest tylko zwykłą zabawą. Jeśli jakiś element powoduje wyświetlenie kursora ze znakiem zapytania, może to sugerować istnienie jakiejś pomocy. Podobnie, strzałka zwrócona we wskazanym kierunku może zwracać uwagę na inny obiekt na stronie. Oto cała lista kursorów, wraz z przykładami. Aby zobaczyć dany styl kursor, wystarczy przesunąć kursor myszki nad wyraz. Przy "resize" n=north, s=south, w=west, e=east. cursor:crosshair cursor:hand cursor:move cursor:e-resize cursor:ne-resize 16

17 cursor:nw-resize cursor:n-resize cursor:se-resize cursor:sw-resize cursor:s-resize cursor:w-resize cursor:text cursor:wait cursor:help 17

18 cursor:default cursor:auto Default, jeśli dobrze zauważyłem, generuje zawsze typowy kształt kursora myszki, czyli strzałkę. Auto jest zgodne z domyślnymi wartościami przeglądarki. Możliwe jest też wykorzystanie kursora w formacie.cur (statyczny) lub.ani (animowany). Oto przykłady (przesuń kursor myszki nad odsyłacz) - efekt działa na pewno w Internet Explorerze 6: Kurs HTML Kod definicji: <a HREF=" style="cursor:url('banana.ani');">kurs HTML</A> Kurs HTML <a HREF=" style="cursor:url('hourglass.cur');">kurs HTML</A> Własności drukowania Wbrew przewidywaniom, że biuro bez papieru zawładnie bez reszty naszą codziennością, papier i drukarki mają się całkiem dobrze. Choć Internet jest medium w pełni elektronicznym, często się zdarza, że pobrane informacje chcemy przelać na papier, który możemy łatwo przenosić, choćby do łóżka czy wanny :-) Nic więc dziwnego, że WWW Consortium przykłada do problemu drukowania należną wagę i rozwija poświęcone mu fragmenty specyfikacji nowej wersji języka HTML. Fragmenty tej specyfikacji obsługują częściowo Internet Explorer od wersji 4 oraz Opera od wersji 3.5. Nowe własności pozwalają autorowi strony określić, jak ma być drukowany dokument HTML. Wyobraźmy sobie, że tworzymy duży, jednostronicowy dokument, który dzielimy na logiczne bloki, np. rozdziały. Gdyby czytelnik takiego dokumentu zechciał go wydrukować, przeglądarka wydrukuje go "jak leci", strona po stronie, bez zważania na te logiczne fragmenty. Nowa wersja języka HTML pozwala jednak wstawić odpowiednie otagowanie, które nakaże drukarce "przełamywać" strony. Odpowiada to znanej z bardziej zaawansowanych edytorów tekstów funkcji twardego przełamania strony (zazwyczaj kombinacją Ctrl-Enter), czyli wymuszenia nowej strony. Do drukarki zostanie po prostu wysłany sygnał, że w tym miejscu należy przestać drukować stronę, choćby pozostało jeszcze na niej wolne miejsce. Drukowanie zostanie podjęte dopiero na następnej stronie. Jest to wygodne rozwiązanie, gdyz w ten sposób wydruk będzie bardziej przejrzysty - lepiej jest przecież czytać początek rozdziału od nowej strony. 18

19 Strony możemy przełamywać za pomocą dwojakiego rodzaju poleceń: page-break-before: wartość spowoduje przełamanie strony PRZED otagowanym elementem. page-break-after: wartość spowoduje przełamanie strony PO otagowanym elemencie. Polecenia przyjmują cztery wartości: auto, always, left, right. Zachowanie Internet Explorera nie jest jednoznaczne w przypadku auto, left i right (specyfikacja jest ciągle w fazie opracowania). Funkcjonuje jednak bez kłopotu najważniejsza wartość - always. Załóżmy, że tytuły rozdziałów w naszym dokumencie są oznaczone tagiem tytułu pierwszego stopnia, czyli H1. Życzymy sobie, aby drukarka przerywała drukowanie strony tuż przed tytułem pierwszego stopnia i przenosiła drukowanie na następną stronę. Wystarczy w takim razie opatrzyć każdy tytuł odpowiedniem otagowaniem (styl lokalny): <H1 style="page-break-before: always">rozdział 4</H1> Możemy skorzystać także ze stylu zagnieżdżonego i umieścić odpowiednią deklarację jeszcze w ramach nagłówka HEAD. Można jednak postąpić inaczej. Każdy z rozdziałów możemy zakończyć np. poleceniem: <p style="page-break-after: always">treść ostatniego akaptu w rozdziale</p> Teoretycznie polecenia powinny działać w stosunku do elementów blokowych poza tabelami. Obecnie nie funkcjonuje ono jednak np. w odniesieniu do <br>, czyli przełamania wiersza. Definując przełamania możemy się także posłużyć klasami. W definicji stylu zagnieżdżonego (w ramach HEAD) możemy na przykład zdefiniować klasę:.nowastrona {page-break-after: always} a następnie przywołać tę klasę w ostatnim akapicie rozdziału: <p class=nowastrona>treść ostatniego akapitu w rozdziale</p> Drukarka zakończy druk strony po tak zdefiniowanym akapicie i rozpocznie drukowanie dalszego ciągu dokumentu już na następnej stronie. Przeglądarka Opera obsługuje także widows i orphans. Pierwsze polecenie informuje przeglądarkę, ile co najmniej wierszy ma być wydrukowanych na górze strony, natomiast drugie informuje o tym, ile minimum wierszy ma być pozostawionych na wydruku na dole strony. Decydują tutaj względy estetyki. <p STYLE="widows: 2">jakiś tam akapit leci...</p> <p STYLE="orphans: 4">jakiś tam akapit leci...</p> Oto podgląd wydruku w Operze, gdzie styl <p STYLE="widows: 4"> w ostatnim akapicie wymusił przeniesienie 4 wierszy na ostatnią stronę, gdy bez niego przeglądarka wydrukowałaby tylko dwa wiersze. 19

20 20

Podstawy pozycjonowania CSS

Podstawy pozycjonowania CSS Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

I. Pozycjonowanie elementów

I. Pozycjonowanie elementów Wykład 4 - część I. I. Pozycjonowanie elementów 1 I. Pozycjonowanie elementów Model blokowy Każdy element użyty w kodzie XHTML tworzy na stronie blok. W związku z tym strona XHTML w rzeczywistości składa

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

Rysunek otaczany przez tekst

Rysunek otaczany przez tekst Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko

Bardziej szczegółowo

Alfabetyczna lista stylów

Alfabetyczna lista stylów Tematy: Kaskadowe arkusze stylów Alfabetyczna lista stylów Uwaga: wiele stylów CSS3 nie jest ciągle interpretowanych przez przeglądarki Styl Znaczen CSS1 CSS2 CSS3 IE FF A animation Zbiorcza definicja

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Zadanie 1. Stosowanie stylów

Zadanie 1. Stosowanie stylów Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 8

Tworzenie Stron Internetowych. odcinek 8 Tworzenie Stron Internetowych odcinek 8 CSS jednostki Jednostki miary stosuje się w poleceniach dotyczących np. wielkośd czcionki lub rozmiarów marginesów. Zapis składa się z znaku "+" (domyślny) lub "

Bardziej szczegółowo

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER=1> <TR> Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem

Bardziej szczegółowo

Odsyłacze. Style nagłówkowe

Odsyłacze. Style nagłówkowe Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami

Bardziej szczegółowo

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style="float: left">pierwsza treść, zdjęcie, tabele lub cokolwiek </div>

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style=float: left>pierwsza treść, zdjęcie, tabele lub cokolwiek </div> Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie

Bardziej szczegółowo

Pozycjonowanie elementów

Pozycjonowanie elementów Pozycjonowanie elementów Dzięki pozycjonowaniu w CSS, możesz umieścić element dokładnie tam gdzie tylko chcesz. Razem z efektem pływania pozycjonowanie daje ci nieograniczone możliwości tworzenia zaawansowanego

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Krótki przegląd własności języka CSS Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Elementy div i style CSS w praktyce

Elementy div i style CSS w praktyce Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze

Bardziej szczegółowo

Arkusze stylów CSS Cascading Style Sheets

Arkusze stylów CSS Cascading Style Sheets Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów... Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...

Bardziej szczegółowo

Bezbolesny wstęp do CSS

Bezbolesny wstęp do CSS CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i

Bardziej szczegółowo

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz

Bardziej szczegółowo

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1

WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 WYKŁAD 2 KASKADOWE ARKUSZE STYLÓW CSS CZĘŚĆ 1 KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets, CSS) Mechanizm służący do definiowania stylu prezentacji dokumentów w Internecie. Arkusz stylów CSS to lista

Bardziej szczegółowo

A P L I K A C J E I N T E R N E T O W E KONSPEKT nr 3 (DIV, galeria, formularze)

A P L I K A C J E I N T E R N E T O W E KONSPEKT nr 3 (DIV, galeria, formularze) 1 BLOK DOKUMENTU Polecenie div (blok, sekcja) odgrywa istotną rolę w grupowaniu wielu różnych elementów i pozycjonowaniu fragmentów dokumentu. We wcześniejszych wersjach HTML, od 3.2 do 4.01, na blokach

Bardziej szczegółowo

Ćwiczenie 4 Konspekt numerowany

Ćwiczenie 4 Konspekt numerowany Ćwiczenie 4 Konspekt numerowany Celem ćwiczenia jest zastosowane automatycznej, wielopoziomowej numeracji nagłówków w wielostronicowym dokumencie. Warunkiem poprawnego wykonania tego ćwiczenia jest właściwe

Bardziej szczegółowo

Tutorial. HTML Rozdział: Ramki

Tutorial. HTML Rozdział: Ramki Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron

Bardziej szczegółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets)

KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Sieci Komputerowe i Technologie Internetowe Materiał pomocniczy na podstawie fragmentu wykładu: KASKADOWE ARKUSZE STYLÓW CSS (ang. Cascading Style Sheets) Opracowanego przez dr inż. Dariusza Trawickiego

Bardziej szczegółowo

Zadanie 9. Projektowanie stron dokumentu

Zadanie 9. Projektowanie stron dokumentu Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Technika pracy nad układem strony

Technika pracy nad układem strony Układ strony Technika pracy nad układem strony nad układem strony pracujemy: krok po kroku, testując witrynę po wprowadzeniu jakiejkolwiek zmiany, sprawdzamy poprawnośd kodu HTML, CSS oraz wygląd w przeglądarkach,

Bardziej szczegółowo

Technika pracy nad układem strony

Technika pracy nad układem strony Układ strony Technika pracy nad układem strony nad układem strony pracujemy: krok po kroku, testując witrynę po wprowadzeniu jakiejkolwiek zmiany, sprawdzamy poprawnośd kodu HTML, CSS oraz wygląd w przeglądarkach,

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Blok dokumentu. <div> </div>

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

czyli Arkuszy / Układów na podstawie modelu

czyli Arkuszy / Układów na podstawie modelu Przygotowanie dokumentacji technicznej czyli Arkuszy / Układów na podstawie modelu Przygotowanie dokumentacji technicznej w AutoCAD 1 Wydruk rysunku z AutoCAD można przygotować na dwa sposoby 1. na zakładce

Bardziej szczegółowo

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2 Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy

Bardziej szczegółowo

DOKUMENTÓW W EDYTORACH

DOKUMENTÓW W EDYTORACH 2015-10-12 TWORZENIE DOKUMENTÓW W EDYTORACH Microsoft Word Jan Kowalski UAM Tworzenie dokumentów w edytorach Spis treści Struktura a formatowanie... 1 Formatowanie za pomocą stylów... 1 Nagłówki... 2 Rysunki...

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria obrazów Amiant... 5 4. Lista stron... 8 5. Aktualności...

Bardziej szczegółowo

czyli Arkuszy / Układów na podstawie modelu w zakładce MODEL

czyli Arkuszy / Układów na podstawie modelu w zakładce MODEL Przygotowanie dokumentacji technicznej 2D czyli Arkuszy / Układów na podstawie modelu w zakładce MODEL Przygotowanie dokumentacji technicznej w AutoCAD 1 Wydruk rysunku z AutoCAD można przygotować na dwa

Bardziej szczegółowo

Spis treści. 1. Szerokość witryny WWW

Spis treści. 1. Szerokość witryny WWW Jednym z ważniejszych założeń webmasteringu jest to, by strona WWW była poprawnie wyświetlana na wielu różnych urządzeniach, w wielu różnych środowiskach. Wynikają z tego liczne trudności i komplikacje.

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.2.

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2. Spis treści: 1 Podstawy pracy z aplikacją... 2 1.1 Układ strony... 2 strona 1 z 7 1 Podstawy pracy z aplikacją InDesign jest następcą starzejącego się PageMakera. Pod wieloma względami jest do niego bardzo

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Wyższa Szkoła Ekologii i Zarządzania Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Slajd 1 Slajd 2 Numerowanie i punktowanie Automatyczne ponumerowanie lub wypunktowanie zaznaczonych akapitów w

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Jak założyć stronę na blogu?

Jak założyć stronę na blogu? Jak założyć stronę na blogu? lewej stronie widzisz menu: 1. Po zalogowaniu na blog znajdziesz się w panelu administracyjnym. Po 2. Klikasz Strony, a następnie Dodaj nową i otwiera się taki ekran: 1 3.

Bardziej szczegółowo

na podstawie modelu 3D

na podstawie modelu 3D Przygotowanie dokumentacji technicznej 2D na podstawie modelu 3D SST-2013/2014 Przygotowanie dokumentacji technicznej 2D 1 Wydruk rysunku z AutoCAD 2D można przygotować na dwa sposoby 1. na zakładce Model

Bardziej szczegółowo

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Wyższa Szkoła Ekologii i Zarządzania Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Slajd 1 Slajd 2 Numerowanie i punktowanie Automatyczne ponumerowanie lub wypunktowanie zaznaczonych akapitów w

Bardziej szczegółowo

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt.

1. Umieść kursor w miejscu, w którym ma być wprowadzony ozdobny napis. 2. Na karcie Wstawianie w grupie Tekst kliknij przycisk WordArt. Grafika w dokumencie Wprowadzanie ozdobnych napisów WordArt Do tworzenia efektownych, ozdobnych napisów służy obiekt WordArt. Aby wstawić do dokumentu obiekt WordArt: 1. Umieść kursor w miejscu, w którym

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 8

Tworzenie Stron Internetowych. odcinek 8 Tworzenie Stron Internetowych odcinek 8 CSS jednostki Jednostki miary stosuje się w poleceniach dotyczących np. wielkość czcionki lub rozmiarów marginesów. Zapis składa się z znaku "+" (domyślny) lub "

Bardziej szczegółowo

GRID LAYOUT. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska

GRID LAYOUT. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska GRID LAYOUT Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska Pozycjonowanie elementów na stronie 2 Atrybuty position/float Rozwiązania z czasów przed rewolucją mobilną FlexBox

Bardziej szczegółowo

LEGISLATOR. Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow

LEGISLATOR. Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow LEGISLATOR Dokument zawiera opis sposobu tworzenia podpisów pod aktami dla celów wizualizacji na wydrukach Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow Zawartość Wprowadzenie...

Bardziej szczegółowo

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW. Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1 Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe

Bardziej szczegółowo

KATEGORIA OBSZAR WIEDZY

KATEGORIA OBSZAR WIEDZY Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z

Bardziej szczegółowo

Znaczniki języka HTML

Znaczniki języka HTML www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline

Bardziej szczegółowo

Czcionki. Rodzina czcionki [font-family]

Czcionki. Rodzina czcionki [font-family] Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana

Bardziej szczegółowo

Samouczek edycji dokumentów tekstowych

Samouczek edycji dokumentów tekstowych 1. Różne sposoby zaznaczania tekstu. Najprostszą czynnością, którą możemy wykonać na zaznaczonym tekście, jest jego usunięcie. Wystarczy nacisnąć klawisz Delete lub Backspace. Aby przekonać się, jak to

Bardziej szczegółowo

Podstawy informatyki

Podstawy informatyki Podstawy informatyki semestr I, studia stacjonarne I stopnia Elektronika rok akademicki 2012/2013 Pracownia nr 5 Edytor tekstu Microsoft Word 2007 mgr inż. Adam Idźkowski Pracownia nr 5 2 Edytor tekstu

Bardziej szczegółowo

Edytor tekstu MS Office Word

Edytor tekstu MS Office Word Edytor tekstu program komputerowy ukierunkowany zasadniczo na samo wprowadzanie lub edycję tekstu, a nie na nadawanie mu zaawansowanych cech formatowania (do czego służy procesor tekstu). W zależności

Bardziej szczegółowo

TWORZENIE PREZENTACJI MS POWERPOINT

TWORZENIE PREZENTACJI MS POWERPOINT TWORZENIE PREZENTACJI MS POWERPOINT Wstęp TWORZENIE PREZENTACJI MS POWERPOINT Czasami zdarza się, że zostajemy poproszeni o poprowadzenia spotkania czy szkolenia w firmie, w której pracujemy lub po prostu

Bardziej szczegółowo

Podstawy pracy z edytorem tekstu. na przykładzie Open Office

Podstawy pracy z edytorem tekstu. na przykładzie Open Office Podstawy pracy z edytorem tekstu na przykładzie Open Office inż. Krzysztof Głaz krzysztof.glaz@gmail.com http://krzysztofglaz.eu.org Wprowadzenie Dokument ten został napisany jako pomoc dla osób, które

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 7

Tworzenie stron internetowych w kodzie HTML Cz 7 Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

Bardziej szczegółowo

Masz pomysł na lepszy wygląd?

Masz pomysł na lepszy wygląd? Właśnie zrobiłem świetne narzędzie dla ludzi z wyobraźnią i wyczuciem smaku :) No właśnie mogę się pochwalić nowym narzędziem, jakie zrobiłem w panelu (do tego są potrzebne uprawnienia, jak ktoś zna się

Bardziej szczegółowo

Mailingi HTML. Specyfikacja techniczna

Mailingi HTML. Specyfikacja techniczna Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria zdjęć... 5 4. Lista stron... 8 5. Aktualności...

Bardziej szczegółowo

Zawartość specyfikacji:

Zawartość specyfikacji: Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny [ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.

Bardziej szczegółowo

Podstawowe czynnos ci w programie Word

Podstawowe czynnos ci w programie Word Podstawowe czynnos ci w programie Word Program Word to zaawansowana aplikacja umożliwiająca edytowanie tekstu i stosowanie różnych układów, jednak aby w pełni wykorzystać jej możliwości, należy najpierw

Bardziej szczegółowo

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu:

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Klikasz Wpisy, a następnie Dodaj nowy i otwiera się taki ekran: 1 W tym miejscu tworzysz

Bardziej szczegółowo

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

Bardziej szczegółowo

Elementy blokowe. To jest tytuł pierwszego stopnia. Katalog Produktów. To jest tytuł drugiego stopnia. To jest tytuł trzeciego stopnia

Elementy blokowe. To jest tytuł pierwszego stopnia. Katalog Produktów. To jest tytuł drugiego stopnia. To jest tytuł trzeciego stopnia Elementy blokowe Tytuł pierwszego stopnia To jest tytuł pierwszego stopnia Zwróćmy od razu uwagę na pewien atrybut, który można wykorzystać w połączeniu z tytułem, akapitem czy niemal dowolnym

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Klawisze funkcyjne w OpenOffice.org Writer

Klawisze funkcyjne w OpenOffice.org Writer Klawisze funkcyjne w OpenOffice.org Writer F2 Ctrl + F2 F3 Ctrl + F3 F4 Shift + F4 F5 Ctrl + Shift + F5 F7 Ctrl + F7 F8 Ctrl + F8 Shift + F8 Ctrl+Shift+F8 F9 Ctrl + F9 Shift + F9 Ctrl + Shift + F9 Ctrl

Bardziej szczegółowo

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub

RESPONSYWNE INTERFEJSY. Klasy urządzeń klienckich Responsywne style CSS. Waldemar Korłub RESPONSYWNE Waldemar Korłub INTERFEJSY Klasy urządzeń klienckich Responsywne style CSS Wytwarzanie Aplikacji Internetowych KASK ETI Politechnika Gdańska Klasy urządzeń klienckich Desktopy z zewnętrznymi

Bardziej szczegółowo

Deklarowanie tytułu związanej z tabelą

Deklarowanie tytułu związanej z tabelą Tabele 1 Deklarowanie tytułu związanej z tabelą Przychody w latach 2007-2010 Położenie pozbawione stylu Treść nagłówka Formatowanie położenia w stylach

Bardziej szczegółowo

Andrzej Frydrych SWSPiZ 1/8

Andrzej Frydrych SWSPiZ 1/8 Kilka zasad: Czerwoną strzałką na zrzutach pokazuje w co warto kliknąć lub co zmieniłem oznacza kolejny wybierany element podczas poruszania się po menu Ustawienia strony: Menu PLIK (Rozwinąć żeby było

Bardziej szczegółowo

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Zad.1 Zapoznaj się z poniŝszymi artykułami dotyczącymi projektowania stron WWW:. http://galeria.muzykaduszy.pl/zasady.php

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 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

Bardziej szczegółowo

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3 DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz

Bardziej szczegółowo

4.2. Program i jego konfiguracja

4.2. Program i jego konfiguracja 4.2. Program i jego konfiguracja Dopasowywanie wielkości widoku Podczas pracy z programem często dochodzi do sytuacji w której trzeba dopasować ilość zawartych danych w arkuszu do wielkości ekranu. Np.

Bardziej szczegółowo

Zajęcia e-kompetencje

Zajęcia e-kompetencje Zajęcia e-kompetencje Podstawy obsługi pakietu biurowego. Word i Writer cz.2 Projekt pt:. E-dzi@dek, e-b@bcia i nauczyciel wnuczek 1 Plan dzisiejszych zajęć: 1. Podstawy obsługi pakietu biurowego. Word

Bardziej szczegółowo