Zaawansowane projektowanie stron w CSS



Podobne dokumenty
Podstawy pozycjonowania CSS

Dokument hipertekstowy

Pozycjonowanie elementów

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

Układy witryn internetowych

Laboratorium 1: Szablon strony w HTML5

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

Arkusze stylów CSS Cascading Style Sheets

I. Pozycjonowanie elementów

Podstawy (X)HTML i CSS

Zbuduj robota. Wprowadzenie HTML & CSS. W tym projekcie nauczysz się, jak wstawiać obrazki, by stworzyć własnego robota! Zadania do wykonania

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

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

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

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

Responsywne strony WWW

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>

Bezbolesny wstęp do CSS

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

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?

I. Wstawianie rysunków

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

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

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

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

Tworzenie stron internetowych w kodzie HTML Cz 5

Pierwsza strona internetowa

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

Blok dokumentu. <div> </div>

HTML5 Nowe znaczniki header nav article section aside footer

Dokumentacja techniczno-użytkowa Serwis internetowy

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

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

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

Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces

Wordpress: Joomla! Drupal.

Projektowanie aplikacji internetowych. CSS w akcji

CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites


HTML, Javascript, CSS oraz Bootstrap

Dzię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 cz. 2

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

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

2. Prezentacja wizualna

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

APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J

CSS - layout strony internetowej

Aplikacje WWW - laboratorium

Aplikacje internetowe. Interfejs użytkownika

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

Sierpień 2015 rozwiązanie plik: index.htlm

Systemy internetowe Wykład 2 CSS

Prezentacja dokumentów XML

Prezentacja dokumentów XML

CSS. Kaskadowe Arkusze Stylów

Tomasz Grześ. Systemy zarządzania treścią, cz. II

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

rgnewsce czyli tt_news na sterydach tt_news steroidos Krystian Szymukowicz

Programowanie internetowe

Technika pracy nad układem strony

2 Podstawy tworzenia stron internetowych

Rysunek otaczany przez tekst

Tworzenie Stron Internetowych. odcinek 8

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

Technika pracy nad układem strony

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

Elementy div i style CSS w praktyce

Ćwiczenie 9 - CSS i wstawianie CSS

HTML5 - informacje. Źródło. Struktura. Elementy. Atrybuty SVG.

Znaczniki języka HTML

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.

M o d e r n i z a c j a k s z t a ł c e n i a z a w o d o w e g o w M a ł o p o l s c e. Godziny szkolenia (od do) Ilość godzin. Liczba uczestników

W ramach realizacji zamówienia Wykonawca będzie świadczył usługi w zakresie m.in:

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

Elementarz HTML i CSS

URL:

Harmonogram kursu: ECDL Core (Europejski Certyfikat Umiejętności Komputerowych) Grupa II

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

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

CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny. Wydanie III

Norton Sec.3.0 STD PL CARD 1U 1Dvc 1Y Model : Norton Sec.3.0 STD PL CARD 1U 1Dvc 1Y ram sp. j.

Mailingi HTML. Specyfikacja techniczna

Języki programowania wysokiego poziomu. CSS Wskazówki

Specyfikacja techniczna dot. mailingów HTML

Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika

<!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01 Transitional//EN" "

Kompresja stron internetowych

Aplikacje webowe w obliczu ataków internetowych na przykładzie CodeIgniter Framework

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

Przygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)

Pozycjonowanie elementów


Kurs HTML 4.01 TI 312[01]

SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper)

Specyfikacja. Załącznik A

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

STANDARDY KODOWANIA MAILINGÓW

Transkrypt:

Jak budować strony zgodnie ze standardami i nie zwariować? momat@man.poznan.pl Poznańskie Centrum Superkomputerowo-Sieciowe 2005-04-11

1 Wprowadzenie 2 CSS layout Design i tabelki Metody pozycjonowania Skalowalność Przykłady rozwiązań 3 Cross-browser layout Quirks mode Robale w przeglądarkach Jak hakować w CSS 4 Podsumowanie

Plan wykładu 1 Wprowadzenie 2 CSS layout Design i tabelki Metody pozycjonowania Skalowalność Przykłady rozwiązań 3 Cross-browser layout Quirks mode Robale w przeglądarkach Jak hakować w CSS 4 Podsumowanie

Keep it clear & simple dostępność informacji łatwość zmiany wyglądu (jedno miejsce, przełączanie styli) mniejszy kod strony (łatwiejszy w zarządzaniu, szybsze ładowanie) O strukturze i semantyce http://brainstormsandraves.com http://www.mozilla.org/contribute/writing/markup

Plan wykładu 1 Wprowadzenie 2 CSS layout Design i tabelki Metody pozycjonowania Skalowalność Przykłady rozwiązań 3 Cross-browser layout Quirks mode Robale w przeglądarkach Jak hakować w CSS 4 Podsumowanie

Design i tabelki Tableless design przeznaczenie tabelki prezentacja danych tabelarycznych zmieszanie treści z warstwą prezentacji, nieczytelny kod (wiele zagnieżdżeń), ograniczona dostępność i skalowalność tabelki po prostu działają Przykładowa struktura kodu onet.pl, wp.pl, mozilla.org

Metody pozycjonowania Domyślne ułożenie elementów CSS position: static

Metody pozycjonowania Pozycjonowanie względne CSS position: relative; top: 1em; left: -2em;

Metody pozycjonowania Pozycjonowanie bezwzględne CSS position: absolute; top: 5%; right: -10%; position: fixed; top: 300px;

Metody pozycjonowania Pływające elementy Przykładowy float design nagłówek, trzy kolumny, stopka

Skalowalność Skalowanie względem rozmiaru fonta rozmiar elementów wyrażony wielkością fonta em, ex skalowalne obrazki Przykłady elastic design Elastic Lawn Elastic Design Demo

Przykłady rozwiązań Przydatne informacje Eksperymenty w CSS CSS Destroy css / edge Design detector Artykuły o projektowaniu A List Apart Listamatic evolt.org Linkownia webdevelopera CSS discuss wiki

Plan wykładu 1 Wprowadzenie 2 CSS layout Design i tabelki Metody pozycjonowania Skalowalność Przykłady rozwiązań 3 Cross-browser layout Quirks mode Robale w przeglądarkach Jak hakować w CSS 4 Podsumowanie

Quirks mode Dziwactwo przeglądarek quirks mode (brak definicji typu, emulacja NN4 i IE) almost standards mode (transitional/frameset z DTD) full standards mode (strict) Szczegółowe informacje DOCTYPE switching quirks mode w przykładach Mozilla quirks mode lista różnic

Robale w przeglądarkach O sztuce obchodzenia błędów błędy w Mozilli Bugzilla (przykład float bug) błędy w IE Kompendium wiedzy o błędach www.positioniseverything.net

Jak hakować w CSS Ukrywanie reguł IE only * html non IE html > body non IE5.x ma\rgin: 0; w\idth: 8em; non IE5.0 width/* */: auto; Kompendium wiedzy o filtrach CSS filters

Plan wykładu 1 Wprowadzenie 2 CSS layout Design i tabelki Metody pozycjonowania Skalowalność Przykłady rozwiązań 3 Cross-browser layout Quirks mode Robale w przeglądarkach Jak hakować w CSS 4 Podsumowanie

Poza projektowanie bez tabel 1 Jakość kodu 2 Stopień oddzielenia treści i warstwy prezentacyjnej 3 Dostępność dla użytkowników i urządzeń 4 Funkcjonalność i przyjazność serwisu Zasady dobrego projektowania webstandards checklist IBM accesibility checklist Bobby - accessibility checker

Co użytkownik zrobił dla realizacji planu? http://browsehappy.pl