Projektowanie Stron WWW Studia 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
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…
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.
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 http://magazynt3.pl/html-ramki/
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie
Domyślny szablon CSS - omówienie Float 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.
Wybrane znaczniki HTML formatujące tekst <FONT>...</FONT> - Znacznik pozwala zmienić atrybuty fragmentu tekstu. Podstawowe atrybuty: size="..." - rozmiar czcionki (1 - 7). color="..." - kolor czcionki. face="..." - krój czcionki. (...) Normalny tekst. <FONT COLOR="blue">Ten tekst będzie wyświetlany w kolorze niebieskim.</FONT> 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.
Wybrane Znaczniki HTML formatujące tekst <B>...</B> - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu pogrubionego. <I>...</I> - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu kursywą. <S>...</S> - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu, jako przekreślonego. <SUB>...</SUB> - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu w indeksie dolnym. <SUP>...</SUP> - Znacznik ten nakazuje przeglądarce wyświetlanie tekstu w indeksie górnym.
Listy punktowane i numerowane
Sprawdzenie pisowni tekstu
Sprawdzenie pisowni tekstu
Wyszukiwanie i zastępowanie tekstu
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).
Obiekty Spry Region Spry
Obiekty Spry Powtarzalny Spry
Powtarzalna lista Spry Obiekty Spry Powtarzalna lista Spry
Pole tekstowe zatwierdzenia Spry Obiekty 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 e-mail. Jeżeli nie wpiszą w adresie e-mail symbolu "@" i kropki, widżet zwróci komunikat informujący, że wprowadzone dane są nieprawidłowe.
Obszar tekstowy zatwierdzenia Spry Obiekty Spry Obszar tekstowy zatwierdzenia Spry
Pole wyboru zatwierdzenia Spry Obiekty Spry Pole wyboru zatwierdzenia Spry
Zaznaczanie zatwierdzenia Spry Obiekty Spry Zaznaczanie zatwierdzenia Spry
Hasło zatwierdzania Spry Obiekty Spry Hasło zatwierdzania Spry
Potwierdzenie zatwierdzania Spry Obiekty Spry Potwierdzenie zatwierdzania Spry
Grupa przycisków opcji zatwierdzania Spry Obiekty Spry Grupa przycisków opcji zatwierdzania Spry
Obiekty Spry Pasek menu Spry
Panele z zakładkami Spry Obiekty Spry Panele z zakładkami Spry
Obiekty Spry Harmonijka Spry
Obiekty Spry Panel zwijany Spry
Wskazówka do narzędzia Spry Obiekty Spry Wskazówka do narzędzia Spry
Elementy graficzne w projekcie
Elementy graficzne w projekcie