grafika - Kurs HTML i CSS
Oprawa graficzna / "Duszki" CSS...w rozsądnym czasie nie doczeka się na załadowanie pełnej treści. "Najcięższymi" elementami stron internetowych są wszelkiego rodzaju multimedia - grafika, animacje Flash itp. - nie należy więc przesadzać z ich liczbą, bo dużo nie zawsze znaczy lepiej. Tworząc galerię zdjęć zadbaj, aby miniatury były fizycznie pomniejszonymi grafikami, a nie tymi samymi plikami co duże zdjęcia, a jedynie zmniejszone za pomocą atrybutów HTML lub CSS. Weź pod uwagę, że użytkownik niekoniecznie będzie chciał...
- Menu w CSS / Poziome menu
...musisz utworzyć szerszą grafikę zakladka2.gif. Lewy narożnik obrazka zakładki został wstawiony w tle pozycji listy (bez powielania), natomiast grafika ze środkiem i prawym narożnikiem znalazła się w tle odnośników. Odnośniki muszą być wyświetlone w bloku, ponieważ inaczej grafiki zakładek nie pokrywałyby się (alternatywnie można przypisać pozycjom listy taki sam pionowy margines wewnętrzny jak odnośnikom): Czcionki Tekst Tło Marginesy Obramowanie Lewy margines wewnętrzny...
Podcast HTML / #6 Multimedia HTML...src: wskazuje ścieżkę dostępu do lokalizacji, w której znajduje się obrazek. alt (tekst alternatywny): krótka informacja, która pojawia się, jeśli grafika nie zostanie wyświetlona (np. gdy użytkownik wyłączył wyświetlanie grafiki) lub jest odczytywana przez syntezatory mowy. width i height: określają szerokość i wysokość obrazka w pikselach ("x") lub w procentach ekranu ("x%"). Jest to dobry nawyk, ponieważ jeśli nie wstawimy rozmiarów, treść może się "rozjeżdżać" podczas wczytywania...
- Tło CSS / Powtarzanie tła obrazkowego {background-repeat}
...tła (zostanie wyświetlone jako pojedynczy obrazek) space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3) round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3) Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są ustawiane obok siebie tak, że zajmują cały obszar tła. Ale możliwe jest również zdefiniowanie...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
...Możliwe jest przy tym podanie: jednej wartości - określa jednakowe odległości cięć linii siatki od wszystkich krawędzi obrazka; jeżeli cała grafika będzie kwadratowa i jako obcięcie podamy wartość trzy razy mniejszą od długości boku obrazka, to uzyskamy siatkę w postaci dziewięciu równych kwadratów - jak na ściance kostki Rubika dwóch wartości - pierwsza określa odległości cięć linii siatki od górnej i od dolnej krawędzi, natomiast druga - od lewej i prawej trzech wartości...
- Tło CSS / Atrybuty mieszane tła {background}
...tutaj jeszcze wspomnieć o możliwości dodawania obrazków do dowolnego tekstu. Można w ten sposób stworzyć tekst, obok którego znajduje się jakaś grafika (np. po lewej stronie). Nie trzeba w takim wypadku dodawać znacznika <img>, odpowiadającego za wstawienie rysunku, ale wystarczy np. zadeklarować odpowiednią klasę w zewnętrznym arkuszu stylów, a grafika zostanie dodana jako tło (bez powtarzania). Dodatkowo tekst będzie przesunięty w prawo, aby nie zasłaniał obrazka. Sposób taki ma tą...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
...border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: round; border-width: 10px Powielenie z dopasowaniem rozmiarów - grafika obramowania nie powinna być przycięta, a ewentualnie dopasowana poprzez rozciągnięcie. border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: space; border-width: 10px Powielenie z dopasowaniem odstępów - grafika obramowania nie powinna być przycięta, a ewentualnie zwiększona pusta przestrzeń pomiędzy...
- Menu w CSS / Pionowe menu
...do stylizacji punktów. Można natomiast wstawiać grafikę w tle. Tak właśnie został osadzony obrazek punktów listy (punkt.gif). Normalnie jeżeli grafika wstawiona w tle jest mniejsza od rozmiarów elementu, zostaje powielona, tak aby zajmowała cały dostępny obszar. W naszym przypadku takie zachowanie nie jest pożądane, dlatego blokujemy to powielanie (no-repeat). Musimy również określić lewy margines wewnętrzny pozycji listy (padding-left) o szerokości równej szerokości obrazka, ponieważ...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...miejscach należy wpisać odpowiednio: kolor tła Definicja koloru który wyświetli się w tle strony w następujących przypadkach: w miejscach gdzie grafika tapety będzie miała elementy przezroczyste (jest to możliwe np. w formacie GIF) lub półprzezroczyste (format PNG) przez krótki moment kiedy grafika tapety nie zdąży się jeszcze załadować, a strona będzie już widoczna w oknie przeglądarki jeśli nie uda się załadować grafiki z tapetą - np. ze względu na problemy z połączeniem internetowym...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
...i półprzezroczystość. W żadnym wypadku nie należy stosować formatu BMP, gdyż nie posiada on żadnej lub bardzo słabą kompresję i w związku z tym grafika zapisana w tym formacie ma dużo większą objętość. Grafikę przydatną dla stron WWW możesz znaleźć bezpośrednio w Internecie. Istnieje wiele serwisów internetowych dla webmasterów, oferujących darmowo gotowe przyciski menu i inne przydatne dodatki. Wystarczy trochę poszukać. Pytania i odpowiedzi <img src alt> Jak wstawić obrazek w HTML...