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...
- 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...
- 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 / 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...
- 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...
- 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...