1 Projektowanie Stron WWWStudia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2013/2014, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW Robert Banasiak Projektowanie stron WWW STRuktura projektu. wybrane ZAgadnienia PRACY Z TEKSTEM I ELEMENTAMI GRAFICZNYMI . Czas prezentacji: 45 minut

2 Zamiast ramek – kontenery ???Domyślny szablon CSS - omówienie Zamiast ramek – kontenery ??? Jeszcze kilka lat temu ramki były bardzo popularnym sposobem na tworzenie layoutu stron internetowych. Dzięki nim bardzo łatwo można było podzielić strony na główne bloki, takie jak nagłówek, menu, treść strony oraz stopka. Z czasem jednak okazało się, że używanie ramek niesie ze sobą wiele niedogodności…

3 Ramki (Frames) Ramki są jednym z wielu wynalazków powstałych podczas wojny przeglądarek. W tych okrutnych czasach strony robiło się zazwyczaj w „gołym HTML”, bez pomocy technologii po stronie serwera. Autorzy stron, nie zdając sobie sprawy z istnienia preprocesorów HTML, zmagali się wówczas z aktualizowaniem wspólnych elementów stron (menu) na wszystkich podstronach serwisu. To szybkie, proste i zupełnie nieprzemyślane rozwiązanie dostarczył Netscape.

4 Wady szablonu strony stworzonego na ramkach Ramki (Frames) Wady szablonu strony stworzonego na ramkach Adresy podstron nie są widoczne, cały czas w adresie przeglądarki widnieje URL głównej strony (tej która posiada podział na ramki); W związku z pkt 1 w zwykły sposób niemożliwe jest dodanie do zakładek konkretnej podstrony,  przesłanie jej komuś itp.; Jeżeli jednak uda nam się zdobyć adres podstrony (jest to możliwe) i go otworzymy, strona będzie niekompletna, np. brak menu; Jeżeli treść w jakiejś ramce nie zmieści się, to zostaje ona automatycznie niewidoczna; Ramki są ciężko strawne dla robotów indeksujących. Ma to negatywny wpływ na pozycję strony w wyszukiwarkach lub nawet jej brak w indeksie

5 Domyślny szablon CSS - omówienie

6 Domyślny szablon CSS - omówienie

7 Domyślny szablon CSS - omówienie

8 Domyślny szablon CSS - omówienie

9 Domyślny szablon CSS - omówienie

10 Domyślny szablon CSS - omówienie

11 Domyślny szablon CSS - omówienie

12 Domyślny szablon CSS - omówienie

13 Domyślny szablon CSS - omówienieFloat Określa, który bok innych elementów, np. tekstu, bloków DIV AP, tabel itd. będzie opływać dany element. Pozostałe elementy opływają element pływający w zwykły sposób. Atrybut opływu jest obsługiwany przez obie przeglądarki. Clear Definiuje boki elementu, przy których nie mogą pojawić się elementy AP. Jeżeli element AP pojawi się po omijanej stronie, to element z ustawieniem Clear (omijaj) przesunie się pod niego. Atrybut omijania jest obsługiwany przez obie przeglądarki.

14 Wybrane znaczniki HTML formatujące tekst... - Znacznik pozwala zmienić atrybuty fragmentu tekstu. Podstawowe atrybuty: size="..." - rozmiar czcionki (1 - 7). color="..." - kolor czcionki. face="..." - krój czcionki. (...) Normalny tekst. Ten tekst będzie wyświetlany w kolorze niebieskim. Normalny tekst. (...) Efekt: Normalny tekst. Ten tekst będzie wyświetlany w kolorze niebieskim. Normalny tekst. Uwaga: obecnie stosowanie powyższego znacznika jest odradzane na rzecz stosowania styli kaskadowych, ale nie jest błędem.

15 Wybrane Znaczniki HTML formatujące tekst... - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu pogrubionego. ... - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu kursywą. ... - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu, jako przekreślonego. _... - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu w indeksie dolnym. ^... - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu w indeksie górnym.

16 Listy punktowane i numerowane

17 Sprawdzenie pisowni tekstu

18 Sprawdzenie pisowni tekstu

19 Wyszukiwanie i zastępowanie tekstu

20 Obiekty Spry Zestaw danych Spry Struktura widżetu: Blok kodu HTML, ktory definiuje strukturalną budowę widżetu. Zachowanie widżetu: Kod JavaScript, ktory steruje reakcjami widżetu na zdarzenia inicjowane przez użytkownika. Style widżetu: Kod CSS, ktory definiuje wygląd widżetu. Infrastruktura Spry to biblioteka kodu JavaScript, która umożliwia projektantom stron WWW tworzenie bardziej funkcjonalnych i rozbudowanych serwisów. Korzystając z infrastruktury Spry można wprowadzać dane XML do dokumentów HTML, tworzyć tzw. widżety, takie jak harmonijki i paski menu oraz stosować rozmaite efekty dla różnych elementów strony, używają języka HTML, stylów CSS i minimalnej ilości kodu JavaScript. Infrastruktura Spry została przygotowana w taki sposób, że osoby o podstawowej znajomości języka HMTL, stylów CSS i JavaScript mogą z łatwością konstruować kod. Infrastruktura Spry jest przeznaczona przede wszystkim dla użytkowników zawodowo zajmujących się tworzeniem serwisów WWW oraz dla zaawansowanych amatorów. Nie jest to pełnowymiarowa infrastruktura aplikacji internetowych do projektowania korporacyjnych serwisów WWW (choć można jej używać w połączeniu z innymi stronami korporacyjnymi).

21 Obiekty Spry Region Spry

22 Obiekty Spry Powtarzalny Spry

23 Powtarzalna lista SpryObiekty Spry Powtarzalna lista Spry

24 Pole tekstowe zatwierdzenia SpryObiekty Spry Pole tekstowe zatwierdzenia Spry Widżet Spry Walidacja - pole tekstowe to pole tekstowe wyświetlające stan 'prawidłowy' lub 'nieprawidłowy', gdy użytkownik serwisu wpisze tekst. Taki widżet można dodać np. do formularza, w którym użytkownicy wpisują adresy . Jeżeli nie wpiszą w adresie symbolu i kropki, widżet zwróci komunikat informujący, że wprowadzone dane są nieprawidłowe.

25 Obszar tekstowy zatwierdzenia SpryObiekty Spry Obszar tekstowy zatwierdzenia Spry

26 Pole wyboru zatwierdzenia SpryObiekty Spry Pole wyboru zatwierdzenia Spry

27 Zaznaczanie zatwierdzenia SpryObiekty Spry Zaznaczanie zatwierdzenia Spry

28 Hasło zatwierdzania SpryObiekty Spry Hasło zatwierdzania Spry

29 Potwierdzenie zatwierdzania SpryObiekty Spry Potwierdzenie zatwierdzania Spry

30 Grupa przycisków opcji zatwierdzania SpryObiekty Spry Grupa przycisków opcji zatwierdzania Spry

31 Obiekty Spry Pasek menu Spry

32 Panele z zakładkami SpryObiekty Spry Panele z zakładkami Spry

33 Obiekty Spry Harmonijka Spry

34 Obiekty Spry Panel zwijany Spry

35 Wskazówka do narzędzia SpryObiekty Spry Wskazówka do narzędzia Spry

36 Elementy graficzne w projekcie

37 Elementy graficzne w projekcie