grafika - Kurs HTML i CSS
- Oprawa graficzna / Zamiennik obrazkowy
Spis treści Wstęp Fahrner Dwyer Phark Gilder/Levin Jefferies Zamienniki obrazkowe a Google Wstęp Po lekturze rozdziałów Menu w CSS oraz Szablon strony na DIV-ach powinny być Ci już znane ogromne możliwości wpływania na wygląd dokumentów stron WWW tylko za pomocą stylów CSS. Wiesz już, w jaki sposób można przygotować optymalny kod HTML, a następnie za pomocą w zasadzie drobnych wpisów w arkuszu CSS, wprowadzać daleko idące zmiany wyglądu witryny. Nie jest żadnym kłopotem zmiana...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img>
...tekstowych, które nie wyświetlają grafiki. Dzięki temu również w takich przeglądarkach możliwe będzie używanie odsyłacza obrazkowego, chociaż grafika nie zostanie wyświetlona. Jeżeli nie podasz tekstu alternatywnego (atrybut alt="..." dla znacznika <img>) dla obrazka w odsyłaczu, użytkownicy z przeglądarkami tekstowymi albo z wyłączonym wyświetlaniem obrazów mogą mieć utrudnioną lub wręcz uniemożliwioną nawigację w takim menu! Przykład <a href, img> Kliknij na tym przycisku: Aby...
- Komendy HTML 4.01 / LINK
...urządzeń aural - syntezatory mowy braille - urządzenia do czytania braillem handheld - urządzenia ręczne (mały ekran, monochromatyczne, grafika bitmapowa, ograniczona szerokość pasma) print - urządzenia drukujące nieprzezroczyście i umożliwiające podgląd wydruku projection - projektor screen - ekran komputera (domyślnie) tty - urządzenie o ograniczonych zdolnościach wyświetlania (terminale, urządzenia przenośne itp.) ty - telewizor (niska rozdzielczość, kolor, ograniczone...
- Komendy HTML 4.01 / STYLE
...urządzeń aural - syntezatory mowy braille - urządzenia do czytania braillem handheld - urządzenia ręczne (mały ekran, monochromatyczne, grafika bitmapowa, ograniczona szerokość pasma) print - urządzenia drukujące nieprzezroczyście i umożliwiające podgląd wydruku projection - projektor screen - ekran komputera (domyślnie) tty - urządzenie o ograniczonych zdolnościach wyświetlania (terminale, urządzenia przenośne itp.) ty - telewizor (niska rozdzielczość, kolor, ograniczone...
- Pozycjonowanie CSS / Pozycja absolutna {position: absolute}
...poza krawędzie "obejmującego bloku". Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie normalnych elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: absolute} Przykład
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...(jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3) [Zobacz także: Wstawianie stylów] Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg); background-attachment: fixed }...
- Aktywne przyciski / Pamięć podręczna
...akcja, przeglądarka nie wie jaki obrazek, dajmy na to po podświetleniu, ma zostać wyświetlony. Jednak po pierwszym użyciu przycisku, dodatkowa grafika zostanie wczytana i zapisana w pamięci podręcznej przeglądarki, czyli na dysku lokalnym użytkownika. Dlatego przy drugim użyciu aktywnego przycisku, nic już się nie doczytuje. Istnieje możliwość wcześniejszego poinformowania przeglądarki o dodatkowych obrazkach aktywnych przycisków, dzięki czemu zostaną one jeszcze przed pierwszym użyciem...
- Pozycjonowanie CSS / Pozycja relatywna {position: relative}
...gdy nie używamy żadnego pozycjonowania. Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki! Przykład {position: relative} Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
...bloków i przygotowania trzech obrazków. Ramka musi mieć stałą szerokość. Natomiast wysokość automatycznie dopasowuje się do zawartości, ale za to grafika pionowych krawędzi ramki nie może być zbyt skomplikowana. Obrazek obramowania {border-image-source} selektor { border-image-source: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać...
- Ochrona strony
...do dalszej publikacji innym osobom. Chodzi tutaj głównie o opracowania typu: praca dyplomowa, ważny referat lub obszerny artykuł, unikalna grafika nad którą długo pracowaliśmy czy wyniki badań doświadczalnych. Niestety zwykle jedyną ochroną przed plagiatami jest podanie wyraźnej informacji: "Wszelkie prawa zastrzeżone". Jak wiadomo taki zapis sam w sobie niestety nie może uchronić przed podkradaniem naszej własności intelektualnej. Istnieją pewne metody utrudniające kradzież...