Wprowadzenie do FlexBox
|
|
- Irena Kołodziejczyk
- 7 lat temu
- Przeglądów:
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 Pozycjonowanie elementów na stronie 2 Atrybuty position/float Rozwiązania z czasów przed rewolucją mobilną FlexBox
Bardziej szczegółowoDokument 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ółowoPodstawy 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ółowoUkł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ółowoBootstrap. 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ółowoSpis 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ółowoNazwa 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ółowoLaboratorium 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ółowoCo 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ółowoTechniki 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ółowoTabele. 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ółowoPozycjonowanie 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ółowoStudia 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ółowoBox 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ółowoI. 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ółowoDokumentacja 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ółowoTworzenie 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ółowoZadanie 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ółowoABC 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ółowoBezbolesny 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ółowoIdea 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ółowoPo 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ółowoRozdział 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ółowoFormatowanie 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ółowoElementy 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ółowoFront-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ółowoDwie 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ółowoZa 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ółowoKaskadowe 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ółowoRESPONSYWNE 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ółowoDanuta 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ółowoSpis 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ółowoDeklarowanie 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ółowoPodstawy 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 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ółowoRysunek otaczany przez tekst
Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko
Bardziej szczegółowo9. 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ółowo1. 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ółowoLp. 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ółowoKATEGORIA 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ółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoAndrzej 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ółowoSylabus 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ółowoJę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ółowoArkusz 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ółowoTECHNIKI 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ółowoMateusz 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ółowoFormatowanie 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ółowoCelem 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ółowo1. 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ółowoW 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ółowoTworzenie 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ółowoZadanie 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ółowoRESPONSYWNE 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ółowoPodział 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ółowoCzęść 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ółowoResponsive 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ółowoPoradnik 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ółowoCascading 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ółowoPrzekształ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ółowoJAK 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ółowoProgramowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
Bardziej szczegółowoJeś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ółowoNowy 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ółowoCSS. 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ółowoPORADNIK 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ółowo2 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ółowoCSS - 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ółowoZaznaczanie 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ółowoCzę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ółowoPrzed 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ółowoWŁĄ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ółowoZastanawiał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ółowoBIBLIOTEKA 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ółowoArkusz 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ółowoLokalizacja 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ółowoProblemy 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ółowoStwó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ółowoModel 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ółowoJeż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ółowoResponsywne 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ółowoInstrukcja 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ółowoPasek 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ółowoArkusze 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ółowoTWORZENIE 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ółowoYoung 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ółowoGoogle 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ółowoFAQ. 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ółowoBootstrap 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ółowoZadanie 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ółowo1. 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ółowoWyszukiwanie 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ółowoDODAJEMY 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ółowo8.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ółowoUONET+ - 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ółowoNotowania 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ółowoTECHNOLOGIE 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ółowoI. 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ółowoZadanie 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ółowoExcel 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