Zaawansowane projektowanie stron w CSS

Save this PDF as:

WORD PNG TXT JPG

Wielkość: px

Rozpocząć pokaz od strony:

Download "Zaawansowane projektowanie stron w CSS"

Bogusław Szczepański
2 lat temu
Przeglądów:

Transkrypt

1 Jak budować strony zgodnie ze standardami i nie zwariować? Poznańskie Centrum Superkomputerowo-Sieciowe

2 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

3 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

Przykłady rozwiązań 3 Cross-browser layout Quirks

4 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

w zarządzaniu, szybsze ładowanie) O strukturze i semantyce

5 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

6 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

nieczytelny kod (wiele zagnieżdżeń), ograniczona dostępność i

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

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

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

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

11 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

12 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

13 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

14 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

(transitional/frameset z DTD) full standards mode (strict)

15 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

16 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

$x ma\rgin: 0; w\idth: 8em; non IE5.$

17 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

18 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

Funkcjonalność i przyjazność serwisu Zasady dobrego projektowania

19 Co użytkownik zrobił dla realizacji planu?

Podobne dokumenty

Podstawy pozycjonowania CSS

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