GRID LAYOUT. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska
|
|
- Kazimierz Nowacki
- 6 lat temu
- Przeglądów:
Transkrypt
1 GRID LAYOUT Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska
2 Pozycjonowanie elementów na stronie 2 Atrybuty position/float Rozwiązania z czasów przed rewolucją mobilną FlexBox Jednowymiarowy kontener n Orientacja pozioma LUB pionowa Grid Layout Dwuwymiarowy kontener
3 Grid Layout 3 Umożliwia pozycjonowanie elementów na dwuwymiarowej siatce wierszy i kolumn Wymiary wierszy i kolumn można definiować: Przy użyciu jednostek bezwzględnych (np. px) Proporcjonalnie do dostępnej przestrzeni n np. procentowo n Nowa jednostka na potrzeby gridu: fr Elementy mogą zajmować wybraną liczbę kolumn oraz wierszy W przypadku nachodzących na siebie elementów wykorzystywany atrybut z-index
4 Kontener 4 Kontener dla gridu definiowany za pomocą atrybutów: display: grid lub display: inline-grid <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div> Arkusz CSS:.wrapper { display: grid;
5 Kolumny i wiersze 5 Kolumny i wiersze definiowane za pomocą atrybutów: grid-template-columns grid-template-rows Przykładowo:.wrapper { display: grid; grid-template-columns: 200px 400px 200px;
6 Jednostka fr 6 Rozmiary wierszy i kolumn można definiować z użyciem wszystkich miar długości Na potrzeby Grid Layout wprowadzono nową jednostkę: fr Jednostki fr reprezentują ułamek dostępnej przestrzeni Umożliwiają proporcjonalny podział dostępnego miejsca pomiędzy wiersze/kolumny
7 Jednostka fr 7 Przykładowo:.wrapper { display: grid; grid-template-columns: 1fr 3fr 2fr; Zdefiniowane 3 kolumny Dostępna szerokość zostanie podzielona między kolumny w proporcjach 1:3:2 Jeśli wrapper ma szerokość 960px: Pierwsza kolumna: 960/(1+3+2)*1 = 160 Druga kolumna: 960/(1+3+2)*3 = 480 Trzecia kolumna: 960/(1+3+2)*2 = 320
8 Jednostka fr 8 Jednostki fr można łączyć z innymi, przykładowo:.wrapper { display: grid; grid-template-columns: 100px 3fr 2fr; Pierwsza kolumna ma szerokość 100px niezależnie od szerokości gridu Pozostała szerokość gridu jest dzielona pomiedzy drugą i trzecią kolumnę w proporcjach 3:2
9 Składnia repeat() 9 W przypadku powtarzających się deklaracji można zastosować składnię repeat(), np.:.wrapper { display: grid; grid-template-columns: repeat(12, 1fr); Definicja gridu o 12 kolumnach równej szerokości Składnię repeat() można łączyć z innymi definicjami:.wrapper { display: grid; grid-template-columns: 30px repeat(4, 1fr) 10%;
10 Wiersze 10 Wiersze można zdefiniować jawnie za pomocą atrybutu grid-template-rows W przypadku jego braku mamy do czynienia z niejawną definicją Wiersze są dodawane automatycznie tak, aby grid zmieścił całą zawartość Wymiary niejawnych wierszy: Predefiniowana wysokość: grid-auto-rows: 200px; Składnia minmax(): grid-auto-rows: minmax(100px, auto);
11 Odstępy między wierszami/kolumnami 11 Możliwe jest zdefiniowanie odstępów pomiędzy wierszami/kolumnami w gridzie: Dla kolumn: n grid-column-gap: 10px Dla wierszy: n grid-row-gap: 10px Zbiorczy atrybut: n grid-gap: 10px
12 Linie gridu 12 Struktura gridu jest definiowana poprzez określenie liczby wierszy i kolumn Pozycjonowanie elementów w gridzie nie odbywa się względem wierszy/kolumn, ale względem linii definiujących ich granice
13 Pozycjonowanie elementów w gridzie 13 Pozycję elementu w gridzie określają atrybuty: grid-column-start grid-column-end grid-row-start grid-row-end Wartości powyższych atrybutów odnoszą się do numerów linii gridu Jeśli atrybuty nie zostaną zdefiniowane domyślnie element zajmuje jedną komórkę w gridzie i są lokowane w kolejności definicji w pliku HTML na kolejnych wolnych komórkach gridu
14 14 Przykładowy układ Paczka 08 grid layout.zip
15 Skrócone atrybuty 15 grid-column Łączy grid-column-start oraz grid-column-end Przykładowo: grid-column: 1 / 3; Odpowiada: grid-column-start: 1; grid-column-end: 3; grid-row Łączy grid-row-start oraz grid-row-end grid-area Łączy grid-row-start, grid-column-start, grid-row-end, gridcolumn-end (w tej kolejności) Grid-area: 2 / 1 / 4 / 3;
16 Atrybuty pozycjonowania 16 Wartości dla atrybutów *-end nie są obowiązkowe Domyślnie element zajmuje jeden wiersz/kolumnę Zamiast podawać początek i koniec obszaru można podać początek i liczbę kolumn/wierszy, np.: Składnia span: grid-column: 2 / span 2; Do linii gridu można odnosić się również za pomocą liczb ujemnych (od prawej do lewej), np.: grid-column: 1 / -1;
17 Nazwane linie gridu 17 Liniom gridu można nadawać nazwy, np.:.wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end]; Nazwy można wykorzystać w miejscu numerów linii:.content { grid-column: content-start / content-end;
18 Szablony 18 Grid Layout umożliwia zdefiniowanie szablonu gridu Atrybut grid-template-areas, np.:.wrapper { grid-template-columns: repeat(6, 1fr); grid-template-areas: "head head head head head head" "side side main main main advs" "foot foot foot foot foot foot"; Elementy potomne można przypisać do zdefiniowanych tak obszarów Zamiast przypisywać im linie początkowe/końcowe:.content { grid-area: main; //zamiast: grid-area: 2 / 3 / 3 / 6;
19 Szablony 19 Obszary w obrębie szablonu muszą mieć kształt prostokąta Liczba kolumn musi zgadzać się z atrybutami gridtemplate-column W przeciwnym razie szablon zostanie zignorowany przez przeglądarkę Mechanizm szablonów jest szczególnie przydatny w połączeniu z progami responsywnymi
20 Responsywne szablony: mobile-first 20.wrapper { display: grid; grid-auto-rows: minmax(100px, auto); grid-gap: 10px; grid-template-columns: 1fr; grid-template-areas: "head" "side" "main" "advs" "foot";
21 Responsywne szablony (min-width: 768px) {.wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: "head head" "side main" "advs advs" "foot (min-width: 992px) {.wrapper { grid-template-columns: repeat(6, 1fr); grid-template-areas: "head head head head head head" "side side main main main advs" "foot foot foot foot foot foot";
22 22 Przykładowy układ Paczka 08b grid layout.zip
23 Grid Layout 23 Grid Layout posiada istotne zalety w porównaniu do wcześniejszych rozwiązań: Grid jest responsywny n Dla różnych progów responsywnych można wykorzystywać różne liczby kolumn n Dostępne wcześniej biblioteki oferowały typowo statyczny grid, np. 12 kolumn Kontener definiuje układ dla elementów potomnych n Wcześniej rozmiar kontenera wynikał ze stylów elementów potomnych Elementy mogą rozpościerać się na wiele wierszy gridu n Wcześniej typowo każdy wiersz gridu definiowany osobno
24 24 Pytania? Dziękuję za uwagę
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ół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ół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ół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ół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ół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ółowoWykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska.
Wykorzystano fragmenty wykładu Krystyny Dziubich GRAFIKA WEKTOROWA Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska Grafika rastrowa 2 Plik graficzny jako siatka pixeli (bitmapa)
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ół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ół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ółowoAlfabetyczna lista stylów
Tematy: Kaskadowe arkusze stylów Alfabetyczna lista stylów Uwaga: wiele stylów CSS3 nie jest ciągle interpretowanych przez przeglądarki Styl Znaczen CSS1 CSS2 CSS3 IE FF A animation Zbiorcza definicja
Bardziej szczegół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ół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ół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ół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ółowoTABLICA (ang. array) pojedyncza zmienna z wieloma komórkami, w których można zapamiętać wiele wartości tego samego typu danych.
Złożone typy danych - TABLICE TABLICA (ang. array) pojedyncza zmienna z wieloma komórkami, w których można zapamiętać wiele wartości tego samego typu danych. * Może przechowywać dowolny typ danych, typ
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ół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ół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ółowoProgram szkoleniowy. 16 h dydaktycznych (12 h zegarowych) NAZWA SZCZEGÓŁY CZAS. Skróty dostępu do narzędzi
Program szkoleniowy Microsoft Excel Poziom Podstawowy 16 h dydaktycznych (12 h zegarowych) NAZWA SZCZEGÓŁY CZAS 1. Skróty klawiszowe Skróty do przeglądania arkusza Skróty dostępu do narzędzi Skróty dotyczące
Bardziej szczegółowoWidżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.
Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1
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ółowo1. Otwórz skoroszyt Zadania 04.xlsx i zapisz otwarty skoroszyt pod nazwą: Wykonane zadanie 4.xlsx.
1. Otwórz skoroszyt Zadania 04.xlsx i zapisz otwarty skoroszyt pod nazwą: Wykonane zadanie 4.xlsx. 2. Przejdź do arkusza Biuro. Wstaw pusty wiersz przed wierszem 2. 3. Scal komórki od A2:F3, wyśrodkowując
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ół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ół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ółowoTablice, DataGridView
Tablice, DataGridView Gdy rośnie liczba danych do przechowywania w programie, a następnie ich obrobienia - pojawiają się nowe struktury danych (moŝna by powiedzieć pojemniki na dane) zwane tablicami. Tablica
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ółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoTworzenie stron internetowych RAMKI
Tworzenie stron internetowych RAMKI RAMKI Ramka to zdefiniowana część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. ramka może być przewijana niezależnie od pozostałej
Bardziej szczegółowo5. Mechanizm szablonów.
5. Mechanizm szablonów. Moduł szablonów daje możliwość definicji dowolnej ilości szablonów strony publicznej serwisu. W połączeniu z modułami Marketing MIX oraz Wzorców Elementów został opracowany tak
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ół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ółowoHTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
Bardziej szczegółowo1. Otwórz skoroszyt Zadania 03.xlsx i zapisz pod nową nazwą: Wykonane zadanie 3.xlsx.
1. Otwórz skoroszyt Zadania 03.xlsx i zapisz pod nową nazwą: Wykonane zadanie 3.xlsx. 2. Przejdź do arkusza Arkusz 1. 3. W komórce F5 oblicz średnią komórek z zakresu C5:E5. Skopiuj formułę do komórek
Bardziej szczegółowo01 grid tablica grid. Copyright 2017, mgr inż. Janusz Bonarowski 1
01 grid tablica grid Zadanie Wykonajmy aplikację posiadającą dwa obiekty DataGridView. Jeden o nazwie DataGridView1, będzie formularzem wejściowym, drugi o nazwie DataGridView2 będziemy używać jako element
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ółowoRysunek otaczany przez tekst
Tekst i obrazy 1 Rysunek otaczany przez tekst Wprowadzanie obiektu graficznego Rozmiar ramki: width= 200 deklaruje się tylko
Bardziej szczegółowoDodatkowe pakiety i polecenia L A TEXowe
Dodatkowe pakiety i polecenia L A TEXowe 3 grudnia 2007 1 Ustawienia strony Do zmian ustawień strony warto użyć pakietu geometry, tj. w preambule wpisujemy: \usepackage[]{geometry} Dostępne opcje pakietu
Bardziej szczegółowoPROJEKTOWANIE INTERFEJSÓW
PROJEKTOWANIE INTERFEJSÓW APLIKACJI INTERNETOWYCH Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska 2 Krótka historia interfejsów internetowych Tabele (1995) 3 Jedyny
Bardziej szczegółowoZdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
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ółowoSTANDARDY KODOWANIA MAILINGÓW
STANDARDY KODOWANIA MAILINGÓW Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? II. Budowa nagłówka wiadomości. III. Style kaskadowe CSS. IV. Elementarna budowa szablonu. V. Podsumowanie.
Bardziej szczegółowoDzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Bardziej szczegółowoBudowa aplikacji wielowarstwowych. Zastosowanie szablonów
Budowa aplikacji wielowarstwowych. Zastosowanie szablonów Laboratorium 2 Technologie internetowe Zofia Kruczkiewicz 1 Wykaz pytań dotyczących materiału wykorzystanego w lab2, które należy opracować (wykład
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ółowoTworzenie Stron Internetowych. odcinek 6
Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą
Bardziej szczegółowoOdsyłacze. Style nagłówkowe
Odsyłacze ... polecenie odsyłcza do dokumentu wskazywanego przez url. Dodatkowym parametrem jest opcja TARGET="...", która wskazuje na miejsce otwarcia wskazywanego dokumentu, a jej parametrami
Bardziej szczegółowoTablice. Jones Stygar na tropie zmiennych
Tablice Jones Stygar na tropie zmiennych Czym jest tablica? Obecnie praktycznie wszystkie języki programowania obsługują tablice. W matematyce odpowiednikiem tablicy jednowymiarowej jest ciąg (lub wektor),
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ółowoKrótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Bardziej szczegół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ół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ółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Bardziej szczegółowoużywane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów
opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania
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ółowoStruktury Danych i Złożoność Obliczeniowa
Struktury Danych i Złożoność Obliczeniowa Zajęcia 1 Podstawowe struktury danych Tablica Najprostsza metoda przechowywania serii danych, zalety: prostota, wady: musimy wiedzieć, ile elementów chcemy przechowywać
Bardziej szczegółowoMailingi HTML. Specyfikacja techniczna
Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna
Bardziej szczegółowoWstęp do wskaźników w języku ANSI C
Wstęp do wskaźników w języku ANSI C / Materiał dydaktyczny pomocniczy do przedmiotu Informatyka sem.iii kier. Elektrotechnika/ 1. Wprowadzenie W języku ANSI C dla każdego typu X (wbudowanego, pochodnego,
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ółowoE.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści
E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki
Bardziej szczegółowo[ HTML ] Tabele. 1. Tabela, wiersze i kolumny
[ HTML ] Tabele 1. Tabela, wiersze i kolumny Opis tabeli znajdowad się powinien wewnątrz znaczników . W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.
Bardziej szczegół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ółowo2. MATERIAŁ NAUCZANIA
1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML dotyczącą identyfikacji i grupowania elementów oraz wstawiania plików multimedialnych. 2. MATERIAŁ NAUCZANIA 2.1. Wstawianie
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ółowoHTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
Bardziej szczegółowoNowe funkcje w programie Forte Finanse i Księgowość
Forte Finanse i Księgowość 1 / 11 Nowe funkcje w programie Forte Finanse i Księgowość Spis treści : Korzyści z zakupu nowej wersji 2 Forte Finanse i Księgowość w wersji 2011.b 3 Nowe wzory deklaracji VAT
Bardziej szczegółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2016 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie Układ graficzny CKE 2016 chronione do momentu rozpoczęcia egzaminu CENTRALNA KOMISJA EGZAMINACYJNA Nazwa kwalifikacji: Twmzenie aplikacji internetowych i baz danych oraz
Bardziej szczegółowoGA Przepustowość najlepszy program generujący formularze obliczeniowe dla przepustowości skrzyżowań w środowisku CAD.
www.gacad.pl stworzyliśmy najlepsze rozwiązania do projektowania organizacji ruchu Dołącz do naszych zadowolonych użytkowników! Wrocław, 13.12.2016 GA Przepustowość najlepszy program generujący formularze
Bardziej szczegółowona podstawie modelu 3D
Przygotowanie dokumentacji technicznej 2D na podstawie modelu 3D SST-2013/2014 Przygotowanie dokumentacji technicznej 2D 1 Wydruk rysunku z AutoCAD 2D można przygotować na dwa sposoby 1. na zakładce Model
Bardziej szczegółowoSylabus Moduł 3: Arkusze kalkulacyjne
Sylabus Moduł 3: Arkusze kalkulacyjne Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera podstawowe
Bardziej szczegółowoLaboratorium 6 Tworzenie bloga w Zend Framework
Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy
Bardziej szczegółowoAplikacje internetowe
Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.
Bardziej szczegółowoHTML, Javascript, CSS oraz Bootstrap
HTML, Javascript, CSS oraz Bootstrap Adresaci szkolenia: Kurs przeznaczony jest dla programistów pragnących poszerzyć swoje kompetencje w zakresie tworzenia aplikacji webowych. W ramach szkolenia zostaną
Bardziej szczegółowoTworzenie szablonów użytkownika
Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera
Bardziej szczegółowoZastosowanie systemu siatki w aplikacji POL-on
Jacek Pietrus Laboratorium Inteligentnych Systemów Informatycznych, OPI Zastosowanie systemu siatki w aplikacji POL-on Warszawa, 2012 Interfejs Interfejs zespół środków zapewniających dopasowanie oraz
Bardziej szczegółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Układ graficzny CKE 2017 Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie
Bardziej szczegółowoBaltie 3. Podręcznik do nauki programowania dla klas I III gimnazjum. Tadeusz Sołtys, Bohumír Soukup
Baltie 3 Podręcznik do nauki programowania dla klas I III gimnazjum Tadeusz Sołtys, Bohumír Soukup Czytanie klawisza lub przycisku myszy Czytaj klawisz lub przycisk myszy - czekaj na naciśnięcie Polecenie
Bardziej szczegółowoSpecyfikacja mailingu GG Network
Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy
Bardziej szczegółowoLEGISLATOR. Data dokumentu:17 września 2012 Wersja: 1.3 Autor: Paweł Jankowski
LEGISLATOR Dokument zawiera opis sposobu tworzenia tabel w załącznikach do aktów prawnych Data dokumentu:17 września 2012 Wersja: 1.3 Autor: Paweł Jankowski Zawartość Wprowadzenie... 3 Strukturalizowanie
Bardziej szczegółowoetrader Pekao Podręcznik użytkownika Strumieniowanie Excel
etrader Pekao Podręcznik użytkownika Strumieniowanie Excel Spis treści 1. Opis okna... 3 2. Otwieranie okna... 3 3. Zawartość okna... 4 3.1. Definiowanie listy instrumentów... 4 3.2. Modyfikacja lub usunięcie
Bardziej szczegółowoECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 6.0
ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 6.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i
Bardziej szczegółowoElementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Bardziej szczegółowoCzęść 4 życie programu
1. Struktura programu c++ Ogólna struktura programu w C++ składa się z kilku części: część 1 część 2 część 3 część 4 #include int main(int argc, char *argv[]) /* instrukcje funkcji main */ Część
Bardziej szczegółowoRysunek map AutoCada jako narzędzie do rysowania mapy
Rysunek map AutoCada jako narzędzie do rysowania mapy Elżbieta Lewandowicz Uniwersytet Warmińsko-Mazurski w Olsztynie Katedra Geodezji Szczegółowej leela@uwm.edu.pl www.ela.mapa.net.pl Organizacja rysunku
Bardziej szczegółowoTutorial. HTML Rozdział: Ramki
Autor: Mateusz Wojtyna Opis ogólny Tutorial HTML Rozdział: Ramki Ramki są bardzo pomocnym narzędziem przy tworzeniu strony internetowej jeżeli na przykład chcemy stworzyć sobie menu wszystkich podstron
Bardziej szczegół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ółowoEGZAMIN POTWIERDZAJĄCY KWALIFIKACJE W ZAWODZIE Rok 2018 CZĘŚĆ PRAKTYCZNA
Arkusz zawiera informacje prawnie chronione do momentu rozpoczęcia egzaminu Układ graficzny CKE 2017 Nazwa kwalifikacji: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Oznaczenie
Bardziej szczegółowoRozdział 4 KLASY, OBIEKTY, METODY
Rozdział 4 KLASY, OBIEKTY, METODY Java jest językiem w pełni zorientowanym obiektowo. Wszystkie elementy opisujące dane, za wyjątkiem zmiennych prostych są obiektami. Sam program też jest obiektem pewnej
Bardziej szczegółowowww.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Bardziej szczegółowoPowtórzenie materiału: CSS3 Spis treści
Powtórzenie materiału: CSS3 Spis treści Kolory...2 Jednostki...3 Czcionka...3 Elementy blokowe...3 Cienie...5 Gradient...5 Zgodność z przeglądarkami...6 Kolory Wartości kolorów w CSS podawać można na 4
Bardziej szczegółowoECDL/ICDL CAD 2D Moduł S8 Sylabus - wersja 1.5
ECDL/ICDL CAD 2D Moduł S8 Sylabus - wersja 1.5 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL CAD 2D. Sylabus opisuje zakres wiedzy i umiejętności, jakie musi opanować
Bardziej szczegółowoD D L S Q L. Co to jest DDL SQL i jakie s jego ą podstawowe polecenia?
D D L S Q L Co to jest DDL SQL i jakie s jego ą podstawowe polecenia? D D L S Q L - p o d s t a w y DDL SQL (Data Definition Language) Jest to zbiór instrukcji i definicji danych, którym posługujemy się
Bardziej szczegółowoKaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.
Kaskadowe arkusze stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają np. określać rozmiar i kolor czcionki, definiować odstępy
Bardziej szczegółowoECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0
ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i
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ół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ółowoBudowa i oprogramowanie komputerowych systemów sterowania. Laboratorium 4. Metody wymiany danych w systemach automatyki DDE
Budowa i oprogramowanie komputerowych systemów sterowania Laboratorium 4 Metody wymiany danych w systemach automatyki DDE 1 Wprowadzenie do DDE DDE (ang. Dynamic Data Exchange) - protokół wprowadzony w
Bardziej szczegółowo