Wprowadzenie do FlexBox

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

Download "Wprowadzenie do FlexBox"

Transkrypt

1 Wprowadzenie do FlexBox Zastąp Grid. Krzysztof Węgliński

2 Spis treści Wstęp...4 Rozdział 1 - Definicje...5 RWD - Responsive Web Design...5 Grid...5 Flexbox...6 Rozdział 2 - Struktury...8 Główny wrapper...8 Kolumny / Pudełka...8 Pogląd na całość...12 Rozdział 3 - Style kolumn...14 Standardowy styl...14 Elementy równej wysokości...14 Pozostawmy tabele danym tabelarycznym...15 Rozmieszczenie elementów w pionie...15 Możemy to oprzeć o własność flex...15 Dla indywidualnych elementów...16 Rozmieszczenie elementów w poziomie...16 Rozdział 4 - Style elementów...17 Rozmiary elementów...17 Flex-grow...17 Flex-shrink...17 Flex-basis...17 Niestandardowa kolejność elementów...18 Pozycja elementu w pionie...18 Rozdział 5 - Przykład...20 Układ typu blog...20 Rozdział 6 - Dodatkowa lektura...21 Błędy...21 Wsparcie przeglądarek...21 Rozdział 7 - Ściąga...22 Zakończenie...23 O autorze...23 Wprowadzenie do FlexBox - strona 2

3 Założenia Wstęp Ten podręcznik zakłada, drogi czytelniku, że jesteś już w posiadaniu podstawowej wiedzy z zakresu HTML5 i CSS3 i otarłeś się o RWD - Responsive Web Design, czyli projektowanie responswnych stron internetowych. Nie mniej, na pewno znajdą się tacy, którzy mimo nie posiadania tej wiedzy poradzą sobie z całą książką. Cel Niniejszy podręcznik będzie traktować o kluczowych problemach (i rozwiązaniach tych problemów), na które można, a nawet na pewno natrafisz chcąc stworzyć zarówno prostą stronę internetową, aplikację czy też zaawansowany system w oparciu o przeglądarki WWW. Wprowadzenie do FlexBox - strona 3

4 RWD - Responsive Web Design Rozdział 1 Definicje To technika tworzenia stron internetowych w taki sposób aby skład i układ elementów dynamicznie dostosowywał się do danego medium. Przed powstaniem tej techniki używaliśmy do każdego medium (telefon, czytnik, komputer, laptop, telewizor itd.) oddzielny arkusz styli, który był czytany przez przeglądarkę jako jedyny, lub dodatkowy zestaw styli dla danego medium, jako uzupełnienie. Później pojawił się zestaw styli o nazwie media query pozwalający określić do jakiego medium (szerokość ekranu, gęstość pixeli, wysokość ekranu, proporcje itd.) odnosimy się w następnych liniach kaskadowego arkuszu styli. Wraz z pojawieniem się tych narzędzi pojawił się RWD, który zrewolucjonizował spojrzenie na strony. Grid Grid to metoda składu stron oparta o, jak nazwa wskazuje, siatki. Wstawiamy kolumny, które opieramy o kilka kluczowych własności, takich jak: width/max-width: x %; float:left; Po czym na okalający div dodajemy sztuczkę zwaną clearfixem. Clearfix rozwiązuje problem opływania się kolejnych elementów. Na przykład jeśli mamy dwie kolumny z czego jedna jest niższa to gdy wstawimy następne, w nowym wierszu, to zapełnią one wolne miejsce pozostałe pod niższą kolumną. W większości przypadków nie chcemy uzyskiwać takiego efektu i wtedy właśnie na pomoc przychodzi clearfix i wygląda on następująco:.clearfix:after { content: " "; /* Starsze przeglądarki nie wspierają pustej własności content */ visibility: hidden; display: block; Wprowadzenie do FlexBox - strona 4

5 Flexbox height: 0; clear: both; } Flex box, flex, czy flexible boxes to zyskujący popularność sposób składu stron i aplikacji internetowych. Jego bezpośrednim poprzednikiem był Grid, który w zasadzie zapoczątkował erę responsywnego internetu. Większość stron w sieci na tę chwilę opartych jest na Gridzie. Niestety obarczony jest on pewnymi zaszłościami i problemami w sposobie działania. Na przykład nie możemy w prosty sposób uzyskać dwóch elementów obok siebie o równej wysokości przy założeniu, że ich zawartość będzie przydzielana dynamicznie i wymagana wysokość nie jest z góry znana. Oczywiście, możemy to obsłużyć za pomocą prostej sztuczki w JavaScript, ale chyba nie o to chodzi. Zwłaszcza gdy w grę wchodzą dobre praktyki czy wsparcie dla klientów bez obsługi JavaScript. Standardowo aby wykonać prosty skład na dwóch kolumnach będziemy potrzebowali okalającego <div>, który będzie posiadał własność display: flex; Oraz kolumn o własności: flex: x; gdzie x to wielkość kolumny, ale o tym później. Gotowe, mamy najprostszy układ kolumnowy we flexie. Potrzebujemy znać dwie własności w CSS, w przeciwieństwie do grida, który wymaga ich dwóch oraz Clearfix u, który składa się na pseudo klasę :after oraz pięć kolejnych własności. Flex wprowadza nas w zupełnie inny sposób rozwiązania wielu problemów, dając nam mnogość funkcjonalności prosto z pudełka. Możemy nie tylko definiować wielkości elementów czy wzajemne opływanie ale również kierunek wyświetlania elementów a nawet ich kolejność (co sprawia, że nazywany jest kierunkowo agnostycznym). Bezpośrednio z arkuszu styli. Niektórzy mówią, że flex jest dobry dla małych stron i porstych aplikacji a grid dla zaawansowanych systemów. Nie znalazłem jednak żadnego argumentu popierającego tę hipotezę. Nie Wprowadzenie do FlexBox - strona 5

6 krępuj się zatem, stosować flex w dowolnym rozwiązaniu. Zacznijmy więc naszą elastyczną podróż Wprowadzenie do FlexBox - strona 6

7 Główny wrapper Rozdział 2 Struktury Zarówno w Grid jak i Flex, nasze kolumny muszą znaleźć się we wrapperze. Element ten pozwala przeglądarce zorientować się i oczekiwać, że następne elementy będą boxami (pudełkami) Flex, lub przygotować miejsce na kolumny Grid. Dla Flex wrapper nazwiemy i nadamy własności:.container.{ display: flex; }; Natomiast w przypadku Grid będziemy używać pseudo klasy after, o następujących własnościach:.row:after { content: ""; display: table; clear: both; }; Głównego wrappera będziemy używać do definiowania strefy na kolumny/pudełka i rozdzielania stref między sobą. Kolumny / Pudełka To elementy w których zawieramy całą treść naszej strony. Dzielimy je na strefy zwane kolumnami, czy pudełkami. Strefy te mogą zawierać np. sidebar, treść artykułu, stopkę czy też dzielić stopkę na segmenty. Przy użyciu techniki Grid każdą z kolumn umownie nazywamy klasą.col-wielkość (od column czyli kolumna). Musimy też wstępnie ustalić ich maksymalną liczbę. Najpopularniejszą ilość stanowi 12. Jeżeli użyjemy jednej kolumny (.col-1) pozostaje nam miejsca na kolejne 11. Kolumna zawsze będzie zajmować procent szerokości całego wrappera. Tak więc jeśli mamy sytuację kolumny.col-6 czyli o szerokości 6 na 12 to będzie ona miała dokładnie 50% szerokości. A obok niej, w jednej linii Wprowadzenie do FlexBox - strona 7

8 możemy dodać jeszcze dowolną ilość kolumn o sumie szerokości 6 (np. 3 i 3, 1 i 5, 6 itd.). Wygląda to w następujący sposób: CSS [class^= col- ] { float: left; }.col-6 { width: 50%; }.col-3 { width: 25%; } odwołanie [class^= col- ] oznacza wszystkie klasy rozpoczynające się od przedrostka col-. HTML <div class= row > <div class= col-6 > mam 50% szerokości </div> <div class= col-3 > mam 25% szerokości </div> </div> Przeglądarka Dla podkreślenia efektu pokolorowałem kolumny i wyświetlone wziąłem w ramkę. Oczywiście odstępy są tylko ilustracyjne, jeśli nie zdefiniujemy odstępów to kolumny będą do siebie przylegać. Ten wyszarzony element na prawym krańcu ekranu to miejsce o szerokości trzech kolumn w które możemy włożyć następne elementy. Aktualne elementy nie zajmą jego Wprowadzenie do FlexBox - strona 8

9 miejsca. Mają od góry zdefiniowaną szerokość, która liczona jest względem rodzica, czyli naszego wrappera.row. W przypadku użycia Flex struktura będzie zachowywała się odrobinę inaczej. Mianowicie w bazowej wersji mamy do czynienia z pudełkami. Pudełka te zajmują pełną szerokość wrappera niezależnie od ilości użytych elementów, pod warunkiem, że ich zawartość nie ogranicza minimalnej szerokości pudełka. Tak więc przy założeniu, że nasze pudełka mogą mieć szerokość równą 0 - możemy dać nieskończoność elementów flex i żaden nie przejdzie do nowej linii, ale to dość abstrakcyjny przykład. Weźmy pod uwagę sytuację identyczną jak przykładzie z Grid. Tym razem nie musimy z góry przyjmować ilości kolumn, dostosowywane są dynamicznie na podstawie ilości zawartych elementów. Jeśli chcemy mieć pewność ile zajmą nasze pudełka możemy zdefiniować maksymalną szerokość (o tym za chwilę), lub dokonać prostych obliczeń. Szerokość naszej kolumny wynosi: X = (Y/Z)*100% gdzie X to szerokość kolumny w procentach, Y to własość flex a Z to suma wszystkich wartości własności flex wewnątrz danego wrappera. Właśnie, własność flex definiuje nam wielkości pudełek. Spójrzmy na przykład z poprzedniego rozwiązania dla Grid. CSS.flex-6 { flex: 6; }.flex-3 { flex: 3; } HTML <div class= flex > <div class= flex-6 >.flex-6 </div> <div class= flex-3 >.felx-3 </div> </div> Przeglądarka Wprowadzenie do FlexBox - strona 9

10 Jak widzisz, tym razem elementy zajęły proporcjonalnie miejsce do swoich wartości odpowiednio 6/9 i 3/9 szerokości. Równie prawidłową i identyczną w efekcie metodą będzie zastosowanie flex-3 i flex-1 dla pudełek powyżej (przy założeniu, że zachowamy wcześniejszą konwencję nazewniczą). Dobrze, w takim razie jak uzyskać identyczny efekt jak w przykładzie dla Grid? Nie zawsze chcemy dynamicznie przydzielać szerokość. Sposoby są dwa, jeden prostszy, ale mniej estetyczny i drugi odrobinę bardziej skomplikowany za to zgodny ze standardami i przydatny w szerszym użyciu flex a. W prostszej wersji dodajemy po prostu kolejny, tym razem pusty DIV z klasą flex-3, dzięki czemu suma pudełek jest identyczna co kolumn w przykładzie z Grid. Co z naszego prostego wzoru pozwala nam wnioskować o wymiarach kolejno 50%, 25% i 25% pustego miejsca. W wersji trudniejszej tworzymy serię klas o ograniczonej szerokości, warto, żeby wyróżniała się ona od poprzednich klas, dzięki czemu będziemy mogli korzystać z oryginalnych własności Flex jak i podejścia ala Grid. CSS.flex-max-6 { width: 50%; }.flex-max-3 { width: 25%; } HTML <div class= flex > <div class= flex-max-6 >.flex-max-6 </div> Wprowadzenie do FlexBox - strona 10

11 <div class= flex-max-3 >.flex-max-3 </div> </div> Przeglądarka Jak widzisz, uzyskaliśmy efekt identyczny co w przypadku Grid, natomiast nie musimy martwić się o clearfix. Co więcej, tym razem z racji, że podaliśmy szerokości, nie potrzeba dodawać własności flex dla pudełek. Pogląd na całość Teraz, posiadając podstawową wiedzę na temat różnic między Gridem a Flexem będzie nam o wiele łatwiej zrozumieć idee stojące za tymi rozwiązaniami. Przyszedł czas na wprowadzenie do zaawansowanych rozwiązań w obu metodach. Co do samego Grida, ciężko wspomnieć coś więcej przed rozpoczęciem kolejnego rozdziału. Naturalnie należy wspomnieć, że każda kolumna jest floatującym obiektem drzewa DOM i w zasadzie tyle, całość opiera się przecież o klasyczne elementy rzeczonego drzewa, które powinien znać początkujący Frontend Developer. Jest jednak dość obszerna informacja na temat Flexa. Aby to lepiej zrozumieć, przedstawiłem na ilustracji wszystkie elementy obiektu flex. Pamiętaj, że zawsze możesz wrócić do tej strony gdy działanie, któregoś z elementów na następnych stronach będzie dla Ciebie nie jasne. Zacznijmy od lewego górnego rogu. Oś główna to innymi słowy szerokość wrappera, jej przeciwnym elementem jest oś poprzeczna definiująca jego wysokość. Możemy je przyrównać do osi X i Y dobrze nam znanych z lekcji matematyki. Każda z tych osi ma swój początek i koniec. Wewnątrz pojemnika znajdują się pudełka flex. Pudełka mają swój wymiar główny (poziomy) i poprzeczny (pionowy). Wprowadzenie do FlexBox - strona 11

12 Tak więc lewy górny róg to de facto początek naszej struktury flex a prawy dolny róg to jej koniec. Wprowadzenie do FlexBox - strona 12

13 Standardowy styl Rozdział 3 Style kolumn W przypadku Grida standardowo elementy znajdują się w lewym górnym rogu i rozkładają się jeden za drugim. Ich wysokości są uzależnione od ilości zawartości i własności padding (pomijamy definiowane wysokości z pomocą min-height czy height). Natomiast szerokość definiujemy wcześniej w procentach, adekwatnie do klas,co zostało objaśnione w rozdziale drugim. Całą resztę musimy przypisać dodatkowo. W przypadku flexa różnicą będą elementy o jednakowej wysokości. Co ważne nie będą one się opływały tylko występowały obok siebie, równomiernie dystrybuując przestrzeń na podstawie własności flex, co zostało opisane w rozdziale drugim. W zasadzie bez większych różnic między metodami, przejdźmy jednak do bardziej praktycznych zastosowań. Elementy równej wysokości Jeśli chcemy aby elementy w jednym wrapperze były równomiernej wysokości w przypadku Grid potrzebujemy użyć jednej z kilku sztuczek. Może to być skrypt JavaScript, który będzie pobierał wysokość wrappera i aplikował ją do zawartych elementów, następnie usuwający te własności przy skalowaniu okna i wykonujący procedurę od nowa (tak aby uniknąć sytuacji gdzie treść wypływa poza kontener kolumny). Mogą to być style przypisane dla tabel czyli dla wrappera własność display: table; dla kolumn display: table-cell; W ten stosunkowo prosty sposób elementy wyświetlą się zupełnie jak w tabeli, czyli uzyskają również równą wysokość, dlatego, że właściwie dla przeglądarki stają się tabelą. Według standardów przyjmujemy jednak, że struktury tabel użytkujemy wyłącznie dla danych tabelarycznych (np. bilans przychodów i rozchodów w aplikacji do zarządzania domowym budżetem). Wprowadzenie do FlexBox - strona 13

14 Pozostawmy tabele danym tabelarycznym i skorzystajmy z zupełnie nowego rozwiązania. Z własności flex możemy skorzystać również jako drobny dodatek dla systemu Grid. Jeśli wyłączymy w danej serii kolumn własność float i przypiszemy flex, pozostawiając definicje maksymalnej szerokości a do wrappera dodajmy display: flex; Voila nasze kolumny będą teraz posiadać jednakową wysokość. Rozmieszczenie elementów w pionie Kolejnym częstym zapotrzebowaniem jest rozmieszczenie elementów względem wysokości wrappera. Załóżmy, że nasze kolumny czy pudełka nie mają być jednakowej wysokości i chcemy aby były wyrównane do postawy możemy zastosować kilka sztuczek. W przypadku Grida prawdopdobonie zastosujemy własność position: absolute, sztywne wysokości elementów + margin-top lub obsłużymy to za pomocą JavaScript wyliczając margin-top dla elementów na podstawie ich wyskości i wysokości wrappera. Pomijam rozwiązanie przy użyciu tabel, bo jak wcześniej pozostawiamy to rozwiązanie dla danych tabelarycznych. Podobnie jest w przypadku centrowania względem linii centralnej przebiegającej dokładnie przez środek wysokości wrappera. Możemy skorzystać z własności display: inline-block; czy z position: absolute; Tylko po co skoro: Możemy to oprzeć o własność flex jeżeli chcemy aby elementy centrowały się względem siebie w linii, na środku osi poprzecznej, skorzystamy z własności align-items: center; Tak. Właśnie tyle wystarczy aby wycentrować elementy względem środka. Oczywiście jeśli nasz wrapper posiada własność display: flex; Tak więc dla wyrównywania względem linii osi poprzecznej możemy skorzystać z następujących własności CSS: align-items: flex-start flex-end center stretch baseline ; align-items: flex-start - przypina elementy do początku osi poprzecznej, flex-end - przypina elementy do końca osi poprzecznej, center - centruje elementy względem osi poprzecznej, stretch - rozciąga elementy na wysokość osi poprzecznej Wprowadzenie do FlexBox - strona 14

15 baseline - ustawia elementy tak aby linia poprowadzona pod pierwszą linią tekstu była wspólna dla wszystkich pudełek. Dla indywidualnych elementów Co więcej flex pozwala nam na podpinanie własności nie tylko dla całej grupy ale dla indywidualnych elementów niezależnie. Tak więc pierwsze pudełko może być wyrównane do góry, drugie do środka a trzecie do dołu wrappera. Uzyskujemy to przez nadanie własności align-self do wskazanego pudełka. Dla tej własności wartości są dokładnie takie same i uzyskują taki sam efekt jak w przypadku alignitems, dochodzi do nich wartość auto, pobierająca wartość kontenera. align-self: auto flex-start flex-end center stretch baseline ; Rozmieszczenie elementów w poziomie Do niedawna, w przypadku użycia samego Grid, nie mieliśmy innej możliwości na zmianę kolejności wyświetlania elementów, jak manipulacja drzewem DOM. Po prostu fizycznie przestawialiśmy elementy, np. przy użyciu JavaScriptu. Te dni już dawno minęły. Flex pozwala nam na zmianę kierunku wyświetlania elementów przy użyciu flex-direction. Własność ta pozwala nam na ustawienie elementów w kierunku z lewa na prawo, z prawa na lewo, góra dół i dół góra. flex-direction: row row-reverse column column-reverse; flex-direction: row - najpopularniejsza kolejność lewo-prawo, row-reverse - prawo-lewo, column - w pionie góra-dół, column-reverse - w pionie dół-góra. Wprowadzenie do FlexBox - strona 15

16 Rozmiary elementów Rozdział 4 Style elementów W przypadku Grida, czy ogólnie CSS wyrażanie szerokości elementów wydaje się stosunkowo proste - podajemy szerokość w procentach, pixelach, generalnie używamy: width: 0-100% <liczba całkowita>px auto inherit initial; Które kolejno definiują: procentowy udział w szerokości wrappera, szerokość w pixelach, szerokość automatycznie dostosowaną do szerokości zawartości lub pełną szerokość (dla display: block;), odziedziczoną po rodzicu czy początkową. Lub jej bliźniaczą wersją maxwidth, definiującą maksymalną wartość dla podanego elementu. Możemy również użyć własności flex lub jej pochodnych. Wcześniej, trochę nie w pełni, wprowadziliśmy sobie flex. Wypadałoby ją uzupełnić. Mianowicie pełna struktura to flex: flex-grow flex-shrink flex-basis auto initial inherit; Rozbijmy sobie to na poszczególnego elementy. Uwaga: własność flex można łączyć z własnością max-width i width. Flex-grow Definiuje ile miejsca zajmie nasze pudełko. Wcześniej wspominaliśmy o prostym wzorze: szerokość pudełka = (wartość flex-grow / suma wszystkich pudełek) * 100% Flex-shrink Definiuje jak element może się pomniejszyć jeśli to niezbędne. uwaga: internet explorer 10 i wcześniejsze nie wspierają tej własności. Flex-basis Początkowa wartość naszego pudełka, definiuje minimalny rozmiar elementu. Jeśli np. ustawimy go na 80 pixeli w pudełku 1, wrapperowi nadamy 100px szerokości, to mimo użycia na pudełku 2 Wprowadzenie do FlexBox - strona 16

17 większej wartości flex - nasze pudełko 1 zajmie więcej miejsca (80px) niż pudełka 2. Wymiary mogą być również procentowe. Niestandardowa kolejność elementów Jak wcześniej wspomniałem flex jest kierunko-agnostyczny. Co pozwala nam poprzez własności CSS dokładnie sterować kolejnością wyświetlania elementów niezależnie od ich kolejności w drzewie DOM. Tak więc możemy sprawić by elementy, które zapisane są kolejno jako 1,2,3,4, wyświetliły się jako 3,4,1,2. A wszystko to kryje się za bardzo oczywistą nazwą order (ang. kolejność). Do ustalania kolejności możemy użyć dowolnej liczby całkowitej z zakresu od minus nieskończoności do plus nieskończoności. order: <liczba całkowita>; Dzięki tej prostej funkcjonalności możemy na przykład dynamicznie sortować elementy przy użyciu javascript obniżając cenę operacji na drzewie DOM. Do tej pory zmiana kolejności jednego elementu oznaczało wykonanie jego kopii, wstawienie w miejsce docelowe i usunięcie oryginału. Jakakolwiek operacja na drzewie to duży wysiłek dla przeglądarki. Prawdopodobnie domyślasz się, drogi czytelniku, jak wiele możemy zaoszczędzić wykonując to zmieniając nazwę klasy czy dodając atrybut style dla elementów? Wcześniej przy stu elementach musieliśmy wykonać trzysta ciężkich operacji na drzewie DOM, teraz sto o zdecydowanie niższym znaczeniu. Pozycja elementu w pionie Flex jest stosunkowo sprytnie przemyślany i trzyma się wielu różnych konwencji. Na przykład jeśli już opanowaliśmy układanie całego wiersza w konkretny sposób w pionie - układanie pojedynczych elementów nie powinno stanowić problemu. Użyjemy do tego własności align-self, która zawiera identyczne wartości jak align-items. align-self: auto flex-start flex-end center baseline stretch; align-self: flex-start - przypina element do początku osi poprzecznej, flex-end - przypina element do końca osi poprzecznej, center - centruje element względem osi poprzecznej, stretch - rozciąga element na wysokość osi poprzecznej Wprowadzenie do FlexBox - strona 17

18 baseline - ustawia element tak aby linia poprowadzona pod pierwszą linią tekstu była wspólna dla wszystkich pudełek. Wprowadzenie do FlexBox - strona 18

19 Układ typu blog Rozdział 5 Przykład Stwórzmy klasyczny układ, składający się na nagłówek, miejsce na treść, pasek boczny np. z kategoriami i stopkę. Header będzie najprostszy. Opakujemy go we wrapper z własnością display: flex; Następnie chcielibyśmy wstawić w niego logo i nawigację. Na kontener z logo nadamy flex: 1; a na nawigację flex: 7; to powinno w zupełności wystarczyć. Przejdźmy do treści i paska bocznego. Ponownie ubieramy go we wrapper, dodajemy do niego align-items: stretch; i do kolumn stosujemy kolejno flex: 4; i flex: 8;. To sprawi, że treść będzie równej wysokości co sidebar. Z footerem postępujemy identycznie jak z headerem. Wprowadzenie do FlexBox - strona 19

20 Błędy Rozdział 6 Dodatkowa lektura Niestety, jak to w IT, kod bez błędów to asymptota do której dążymy. Flexbox nie obył się bez tego typu problemów. Najlepszym źródłem informacji na ten temat jest kolekcja flexbugs Philip a Walton i Greg a Whitworth. Znajdziesz ją pod adresem: Wsparcie przeglądarek Wsparcie dla nowej wersji składni (tej, którą opisałem w całym poradniku) Chrome Safari Firefox Opera IE Android ios Żeby oddać rozwój flex a poniżej tabelka wsparcia dla starej składni flex, pokroju display: box; jest to składnia z 2009 roku. Chrome Safari Firefox Opera IE Android ios (wersja pośrednia) Wprowadzenie do FlexBox - strona 20

21 Rozdział 7 Ściąga display: flex flex-direction: row row-reverse column column-reverse; flex-wrap: nowrap wrap wrap-reverse; flex-flow: < flex-direction > < flexwrap > justify-content: flex-start flex-end center space-between space-around; align-items: flex-start flex-end center baseline stretch; order: liczba flex-grow: liczba flex-shrink: liczba flex-basis: liczba px % rem em flex: none [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ] align-self: auto flex-start flex-end center baseline stretch główna własność kontenera. wyświetlanie kolumn, kolejno: lewo do prawej, prawo do lewej, góra dół, dół góra. łamanie wierszy, kolejno bez łamania, łamanie, łamanie + wyświetlanie w odwrotnej kolejności. połączenie dwóch własności w jednej. wyrównanie elementów w poziomie, kolejno: do lewej, do prawej, wyśrodkowanie, odstęp pomiędzy, odstęp dookoła wyrównanie w pionie, kolejno: do góry, do dołu, wyśrodkowanie, pierwsza linia tekstu, rozciągnięcie w pionie. kolejność wyświetlania elementów kolejno adekwatnie do numeru. Wartość to liczba całkowita od minus nieskończoności do plus nieskończoności. rozszerzanie kolumny jeśli niezbędne o wartość liczbową. odwrotność flex-grow. minimalny rozmiar pudełka. połączenie poprzednich własności w jedną. wyrównanie w pionie dla pojedynczych elementów. Zachowanie podobne do align-items. Wprowadzenie do FlexBox - strona 21

22 Zakończenie Dziękuję za czas poświęcony na lekturę. Mam nadzieję, że jesteś teraz bogatszy o nową wiedzę i już wiesz jak poradzić sobie z flexem. Jeśli wciąż masz jakieś pytania pisz śmiało na krzysiek@sth.io O autorze Krzysztof Węgliński, Frontend Developer z Wrocławia. Kiedy programuje może żyć bez jedzenia i picia. Ma mnóstwo pomysłów jak naprawić świat i podbić kosmos. Przerywa pracę przed komputerem tylko po to żeby pojedzić na rowerze. Wprowadzenie do FlexBox - strona 22

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

Dokument hipertekstowy

Dokument hipertekstowy Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością

Bardziej szczegółowo

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

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

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15

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

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading

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

Co to jest Flexbox, zalety Wsparcie dla przeglądarek, wady Dostępność a Flexbox Przykłady, zastosowanie Test

Co to jest Flexbox, zalety Wsparcie dla przeglądarek, wady Dostępność a Flexbox Przykłady, zastosowanie Test FLEXBOX Co to jest Flexbox, zalety Wsparcie dla przeglądarek, wady Dostępność a Flexbox Przykłady, zastosowanie Test FLEXBOX W3C Last Call Working Draft model pozycjonowania elementów blokowych kolejna

Bardziej szczegółowo

Techniki wstawiania tabel

Techniki wstawiania tabel Tabele w Wordzie Tabela w Wordzie to uporządkowany układ komórek w postaci wierszy i kolumn, w które może być wpisywany tekst lub grafika. Każda komórka może być formatowana oddzielnie. Możemy wyrównywać

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

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

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

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. 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

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

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

Zadanie 3. Praca z tabelami

Zadanie 3. Praca z tabelami Zadanie 3. Praca z tabelami Niektóre informacje wygodnie jest przedstawiać w tabeli. Pokażemy, w jaki sposób można w dokumentach tworzyć i formatować tabele. Wszystkie funkcje związane z tabelami dostępne

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

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

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Idea of responsive web design Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Czym tak właściwie jest responsive web design? Jest to podejście do projektowania stron internetowych w taki

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

Rozdział VI. Tabele i ich możliwości

Rozdział VI. Tabele i ich możliwości Rozdział VI Tabele i ich możliwości 3.6. Tabele i ich możliwości W wielu dokumentach zachodzi konieczność przedstawienia danych w formie tabelarycznej. Dlatego też program OO Writer jest wyposażony w

Bardziej szczegółowo

Formatowanie komórek

Formatowanie komórek Formatowanie komórek 3.4 Formatowanie komórek Praca w MS Excel 2010 byłaby bardzo uciążliwa gdyby nie formatowanie. Duże ilości danych sprawiają, iż nasz arkusz staje się coraz pełniejszy, a my nie mamy

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

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap. Kod szkolenia: Tytuł szkolenia: FRONT-END Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap. Dni: 5 Opis: Adresaci szkolenia Kurs przeznaczony jest zarówno dla

Bardziej szczegółowo

Dwie perspektywy responsive web design: user experience i front-end developer

Dwie perspektywy responsive web design: user experience i front-end developer Dwie perspektywy responsive web design: user experience i front-end developer M O B I L E T R E N D S C O N F E R E N C E & A W A R D S 2 0 1 3 K r a k ó w 2 1-2 2 l u t y 2 0 1 3 R O Z D Z I A Ł 0 1 Czym

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

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

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

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

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37 Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników

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

Podstawy technologii WWW

Podstawy technologii WWW Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer

Bardziej szczegółowo

Ćwiczenie pochodzi ze strony

Ćwiczenie pochodzi ze strony Ćwiczenie pochodzi ze strony http://corel.durscy.pl/ Celem ćwiczenia jest poznanie właściwości obiektu Elipsa oraz możliwości tworzenia za pomocą niego rysunków. Dodatkowo, w zadaniu tym, ćwiczone są umiejętności

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

9. TABELE KURS HTML.

9. TABELE KURS HTML. 9. TABELE Tabele są czymś niezwykle waŝnym dla strony HTML. ChociaŜ początkujący omijają je szerokim łukiem, lepiej się je nauczyć. Ta lekcja będzie większym połączeniem oby dwóch języków kursu niŝ jakiekolwiek

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

Lp. Nazwisko Wpłata (Euro)

Lp. Nazwisko Wpłata (Euro) Tabele_Writer Wstawianie tabeli Na początku dokumentu wpisz tekst Rzym-Lista Wpłat i wciśnij Enter. Następnie naciśnij symbol strzałki przypisanej do ikony Tabela znajdujący się na pasku narzędzi Pracę

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

I. Wstawianie rysunków

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

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

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

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

Arkusz kalkulacyjny MS Excel 2010 PL.

Arkusz kalkulacyjny MS Excel 2010 PL. Arkusz kalkulacyjny MS Excel 2010 PL. Microsoft Excel to aplikacja, która jest powszechnie używana w firmach i instytucjach, a także przez użytkowników domowych. Jej główne zastosowanie to dokonywanie

Bardziej szczegółowo

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.) TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 02.11.2016 r.) 1) Mediaqueries - szablon podstawowy Przykład z szablonu strony który dostosowuje się w zalezności od dostępnej szerokości ekranu dostępny jest pod

Bardziej szczegółowo

Mateusz Bednarczyk, Dawid Chałaj. Microsoft Word Kolumny, tabulatory, tabele i sortowanie

Mateusz Bednarczyk, Dawid Chałaj. Microsoft Word Kolumny, tabulatory, tabele i sortowanie Mateusz Bednarczyk, Dawid Chałaj Microsoft Word Kolumny, tabulatory, tabele i sortowanie 1. Kolumny Office Word umożliwia nam dzielenie tekstu na kolumny. Zaznaczony tekst dzieli się na wskazaną liczbę

Bardziej szczegółowo

Formatowanie komórek

Formatowanie komórek Formatowanie komórek Korzystając z włączonego paska narzędziowego Formatowanie możemy, bez szukania dodatkowych opcji sformatować wartości i tekst wpisany do komórek Zmiana stylu czcionki (pogrubienie,

Bardziej szczegółowo

Celem tego projektu jest stworzenie

Celem tego projektu jest stworzenie Prosty kalkulator Celem tego projektu jest stworzenie prostego kalkulatora, w którym użytkownik będzie podawał dwie liczby oraz działanie, które chce wykonać. Aplikacja będzie zwracała wynik tej operacji.

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

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje: Projektowanie aplikacji internetowych (zajęcia 6.03.2017 r.) Zajęcia: grupa 3: środa 16:00-17:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:

Bardziej szczegółowo

Tworzenie infografik za pomocą narzędzia Canva

Tworzenie infografik za pomocą narzędzia Canva Tworzenie infografik za pomocą narzędzia Canva Spis treści Wstęp... 1 Układy... 3 Zmiana tekstu... 4 Obrazki... 5 Elementy... 6 Zdjęcia - Gratis... 6 Siatki... 8 Ramki... 10 Kształty... 12 Linie... 12

Bardziej szczegółowo

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych Klasa Średnia 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Do wstawienia wykresu w edytorze tekstu nie potrzebujemy mieć wykonanej tabeli jest ona tylko

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

Podział na strony, sekcje i kolumny

Podział na strony, sekcje i kolumny Formatowanie stron i sekcji Formatowanie stron odnosi się do całego dokumentu lub jego wybranych sekcji. Dla całych stron ustalamy na przykład marginesy, które określają odległość tekstu od krawędzi papieru.

Bardziej szczegółowo

Część II Wyświetlanie obrazów

Część II Wyświetlanie obrazów Tło fragmentu ABA-X Display jest wyposażony w mechanizm automatycznego tworzenia tła fragmentu. Najprościej można to wykonać za pomocą skryptu tlo.sh: Składnia: tlo.sh numer oznacza numer

Bardziej szczegółowo

Responsive Web Design

Responsive Web Design Responsive Web Design Zmieniamy Internet na plus Adrian Gadzina Kilka słów o mnie Autor bloga 7pl.pl Web is Brutal Miłośnik Androida Pasjonat kolarstwa (MTB + szosa) Programista aplikacji mobilnych i stron

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

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets Dlaczego stosować style? Specyfikacja The World Wide Web Consortium (www.w3c.org) Style wewnętrzne lokalne W sekcji BODY: To jest

Bardziej szczegółowo

Przekształcanie wykresów.

Przekształcanie wykresów. Sławomir Jemielity Przekształcanie wykresów. Pokażemy tu, jak zmiana we wzorze funkcji wpływa na wygląd jej wykresu. A. Mamy wykres funkcji f(). Jak będzie wyglądał wykres f ( ) + a, a stała? ( ) f ( )

Bardziej szczegółowo

JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB?

JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB? JAK ZAPROJEKTOWAĆ WYGLĄD STRONY INTERNETOWEJ W KREATORZE CLICK WEB? Czy można zbudować atrakcyjną stronę WWW w czasie krótkiej przerwy na kawę? W kreatorze Click Web zrobisz to bez trudu. Wystarczy, że

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

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

Nowy szablon stron pracowników ZUT

Nowy szablon stron pracowników ZUT Nowy szablon stron pracowników ZUT Uczelniane Centrum Informatyki ZUT przygotowało nowy szablon stron pracowników, zunifikowany z obecnymi stronami ZUT. Serdecznie zachęcamy Państwa do migracji na nowy

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

PORADNIK KODOWANIA: CSS

PORADNIK KODOWANIA: CSS PORADNIK KODOWANIA: CSS Przygotowane przez Jakuba Skórzyńskiego SPIS TREŚCI Wstęp... 3 Jak zacząć?. 4 Składnia 5 Klasy i unikaty.. 7 Rzeczy ważne 8 Najważniejsze komendy 9 Porady i Triki. 11 2 Wstęp Nazywam

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

CSS - layout strony internetowej

CSS - layout strony internetowej www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:

Bardziej szczegółowo

Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM

Zaznaczanie komórek. Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Zaznaczanie komórek Zaznaczenie pojedynczej komórki polega na kliknięciu na niej LPM Aby zaznaczyć blok komórek które leżą obok siebie należy trzymając wciśnięty LPM przesunąć kursor rozpoczynając od komórki

Bardziej szczegółowo

Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.

Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Tabele Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów. Ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: Cała zawartość

Bardziej szczegółowo

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt Zadanie: Utwórz szablon rysunkowy składający się z: - warstw - tabelki rysunkowej w postaci bloku (według wzoru poniżej)

Bardziej szczegółowo

WŁĄCZANIE W PRZEGLĄDARKACH INTERNETOWYCH OBSŁUGI SKRYPTÓW JAVASCRIPT

WŁĄCZANIE W PRZEGLĄDARKACH INTERNETOWYCH OBSŁUGI SKRYPTÓW JAVASCRIPT WŁĄCZANIE W PRZEGLĄDARKACH INTERNETOWYCH OBSŁUGI SKRYPTÓW JAVASCRIPT JavaScript jest językiem skryptowym powszechnie stosowanym przez programistów internetowych. Skrypty służą zazwyczaj do zapewnienia

Bardziej szczegółowo

Zastanawiałeś się może, dlaczego Twój współpracownik,

Zastanawiałeś się może, dlaczego Twój współpracownik, Kurs Makra dla początkujących Wiadomości wstępne VBI/01 Piotr Dynia, specjalista ds. MS Office Czas, który poświęcisz na naukę tego zagadnienia, to 15 20 minut. Zastanawiałeś się może, dlaczego Twój współpracownik,

Bardziej szczegółowo

BIBLIOTEKA BLOKÓW JABLOTRON 100 SYSTEM

BIBLIOTEKA BLOKÓW JABLOTRON 100 SYSTEM BIBLIOTEKA BLOKÓW JABLOTRON 100 SYSTEM Zawartość INORMACJE OGÓLNE... 3 WSTAWIANIE BLOKÓW W PROGRAMIE AutoCAD... 3 UWAGI DOTYCZĄCE WSTAWIANIA I DRUKOWANIA BLOKÓW... 4 Przykład... 5 ZESTAWIENIE BLOKÓW...

Bardziej szczegółowo

Arkusz strona zawierająca informacje. Dokumenty Excela są jakby skoroszytami podzielonymi na pojedyncze arkusze.

Arkusz strona zawierająca informacje. Dokumenty Excela są jakby skoroszytami podzielonymi na pojedyncze arkusze. ARKUSZ KALKULACYJNY Arkusz strona zawierająca informacje Dokumenty Excela są jakby skoroszytami podzielonymi na pojedyncze arkusze. Obszar roboczy fragment ekranu, na którym dokonywane są obliczenia Wiersze

Bardziej szczegółowo

Lokalizacja jest to położenie geograficzne zajmowane przez aparat. Miejsce, w którym zainstalowane jest to urządzenie.

Lokalizacja jest to położenie geograficzne zajmowane przez aparat. Miejsce, w którym zainstalowane jest to urządzenie. Lokalizacja Informacje ogólne Lokalizacja jest to położenie geograficzne zajmowane przez aparat. Miejsce, w którym zainstalowane jest to urządzenie. To pojęcie jest używane przez schematy szaf w celu tworzenia

Bardziej szczegółowo

Problemy techniczne. Jak wyłączyć obsługę plików cookie w przeglądarkach internetowych? Przeglądarka Internet Explorer

Problemy techniczne. Jak wyłączyć obsługę plików cookie w przeglądarkach internetowych? Przeglądarka Internet Explorer Problemy techniczne Jak wyłączyć obsługę plików cookie w przeglądarkach internetowych? Udostępniając treści w naszych serwisach internetowych wykorzystujemy pliki cookie (tzw. ciasteczka) na zasadach określonych

Bardziej szczegółowo

Stwórz baner na bloga

Stwórz baner na bloga Stwórz baner na bloga Baner, to pierwsza rzecz, jaką widzi czytelnik wchodząc na twego bloga stanowi on również jego swoiste logo. Baner musi, więc przyciągać uwagę i zachęcać, w pierwszych sekundach,

Bardziej szczegółowo

Model blokowy. Model blokowy w CSS

Model blokowy. Model blokowy w CSS Model blokowy Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania

Bardziej szczegółowo

Jeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli

Jeżeli pole Krawędź będzie zaznaczone uzyskamy obramowanie w całej wstawianej tabeli Tabela Aby wstawić tabelę do dokumentu należy wybrać z górnego menu Tabela-->Wstaw-->Tabela W kategorii Rozmiar określamy z ilu kolumn i ilu wierszy ma się składać nasza tabela. Do dokumentu tabelę możemy

Bardziej szczegółowo

Responsywne strony WWW

Responsywne strony WWW www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;

Bardziej szczegółowo

Instrukcja 3wcms najważniejsze funkcje

Instrukcja 3wcms najważniejsze funkcje Instrukcja 3wcms najważniejsze funkcje Spis: Dodawanie nowego dokumentu Edycja dokumentu Dodawanie dokumentu do menu Dodawanie grafiki do dokumentu Dodawanie grafiki głównej Lista dokumentów Operacje na

Bardziej szczegółowo

Pasek menu. Ustawienia drukowania

Pasek menu. Ustawienia drukowania Polecenie Ustawienia drukowania... z menu Plik pozwala określić urządzenie drukujące poprzez jego wybór z pola kombi. Urządzenie można skonfigurować poprzez przycisk właściwości. Otwiera się wówczas okno

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

TWORZENIE FORMULARZY WORD 2007

TWORZENIE FORMULARZY WORD 2007 TWORZENIE FORMULARZY WORD 2007 Witam serdecznie. Poniżej przedstawię w jaki sposób tworzyć formularze w programie WORD 2007. Poprzednie wersje programu WORD 2007 również udostępniały opcję tworzenia formularzy,

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

Google Chrome. Włączamy Google Chrome oraz przechodzimy do ustawień, klikając menu w prawym górnym rogu.

Google Chrome. Włączamy Google Chrome oraz przechodzimy do ustawień, klikając menu w prawym górnym rogu. Przeglądarki internetowe zapamiętują naszą aktywność w sieci, przechowując dane logowania, pliki cookie czy też ustawienia podręczne, przyspieszające przeglądanie Internetu. Jeżeli po zakończeniu pracy

Bardziej szczegółowo

FAQ. Dotyczące nowej bankowości mobilnej. https://bsbelskduzy24.pl

FAQ. Dotyczące nowej bankowości mobilnej. https://bsbelskduzy24.pl FAQ Dotyczące nowej bankowości mobilnej https://bsbelskduzy24.pl 1 1. Jak uzyskać dostęp do bankowości internetowej? Jeśli posiadasz już dostęp do bankowości internetowej w naszym banku, to wystarczy,

Bardziej szczegółowo

Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW.

Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW. Bootstrap Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW. Przygotowanie do pracy z Bootstrapem Przede wszystkim

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

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

Wyszukiwanie binarne

Wyszukiwanie binarne Wyszukiwanie binarne Wyszukiwanie binarne to technika pozwalająca na przeszukanie jakiegoś posortowanego zbioru danych w czasie logarytmicznie zależnym od jego wielkości (co to dokładnie znaczy dowiecie

Bardziej szczegółowo

DODAJEMY TREŚĆ DO STRONY

DODAJEMY TREŚĆ DO STRONY DODAJEMY TREŚĆ DO STRONY SPIS TREŚCI Pasek narzędzi i wyszukiwarka aplikacji... 2 Dodawanie portletów... 3 Widok zawartości stron... 4 Zawartość portletu... 5 Ikonki wybierz oraz dodaj zawartość stron...

Bardziej szczegółowo

8.2 Drukowanie arkusza kalkulacyjnego

8.2 Drukowanie arkusza kalkulacyjnego przede wszystkim zastanów się, co chcesz pokazać na wykresie (te same dane można pokazać na różne sposoby, uwypuklając różne ich aspekty) zaznacz zakres danych jeszcze przed wywołaniem kreatora wykonaj

Bardziej szczegółowo

UONET+ - moduł Sekretariat. Jak wykorzystać wydruki list w formacie XLS do analizy danych uczniów?

UONET+ - moduł Sekretariat. Jak wykorzystać wydruki list w formacie XLS do analizy danych uczniów? UONET+ - moduł Sekretariat Jak wykorzystać wydruki list w formacie XLS do analizy danych uczniów? W module Sekretariat wydruki dostępne w widoku Wydruki/ Wydruki list można przygotować w formacie PDF oraz

Bardziej szczegółowo

Notowania Mobilne wersja BlackBerry. Instrukcja obsługi programu

Notowania Mobilne wersja BlackBerry. Instrukcja obsługi programu Notowania Mobilne wersja BlackBerry Instrukcja obsługi programu Notowania Mobilne to aplikacja, która pozwala na dostęp do notowań giełdowych w czasie rzeczywistym z każdego miejsca na świecie, gdzie tylko

Bardziej szczegółowo

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty 1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,

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

Zadanie utworzenie szablonu kalkulatora

Zadanie utworzenie szablonu kalkulatora Zadanie utworzenie szablonu kalkulatora 1. Celem ćwiczenia jest zaprojektowanie podstawowego wyglądu kalkulatora funkcyjnego działającego w przeglądarce WWW. Ćwiczenie do wykonania w parach (para = dwójkami,

Bardziej szczegółowo

Excel wykresy niestandardowe

Excel wykresy niestandardowe Excel wykresy niestandardowe Uwaga Przy robieniu zadań zadbaj by każde zadanie było na kolejnym arkuszu, zadanie na jednym, wykres na drugim, kolejne zadanie na trzecim itd.: Tworzenie wykresów Gantta

Bardziej szczegółowo