grafika - Kurs HTML i CSS
HTML dla zielonych / Jak zrobić dobrą stronę HTML...tekstu. Nie przesadzaj z grafiką. Fakt, że wiesz jak wstawić na stronę obrazek nie oznacza, że musi się od nich roić. Pamiętaj, że to właśnie grafika najbardziej wpływa na szybkość ładowania strony, dlatego ogranicz jej ilość oraz rozmiary. Jeśli już musisz coś umieścić, postaraj się, aby było to naprawdę dobrej jakości. Tworząc samodzielnie obrazy używaj antialiasingu, czyli wygładzania poszarpanych krawędzi. Cechą po której na pierwszy rzut oka można rozpoznać dobrego projektanta jest...
Oprawa graficzna / Zamiennik obrazkowySpis 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...
- Podcast HTML / #9 HTML5
...(id). minlength, maxlength: atrybuty wymuszające minimalną i maksymalną liczbę znaków w polu formularza (<input>, <textarea>). Multimedia, grafika i ścieżki tekstowe fo filmów Zmiany w obsłudze mediów: <video>, <audio>, <source>: elementy te służą do osadzania odtwarzaczy filmów wideo i muzyki audio bez wtyczek. Element <source> jest używany do wskazania tego samego materiału multimedialnego w wielu formatach (np. MP4 i OGV), aby przeglądarka mogła wybrać obsługiwany format...
- 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...