szablon - Kurs HTML i CSS
Oprawa graficzna / Zamiennik obrazkowy...wyboru skórki, która najbardziej im odpowiada. Problem w tym, że w ten sposób nie uda Ci się podmienić statycznie wstawionych obrazków, tworzących szablon graficzny - np. logo i inne elementy. W szczególności nie stworzysz szybko ładującej się skórki, pozbawionej zbędnych elementów graficznych. Coraz więcej użytkowników przegląda sieć za pomocą urządzeń mobilnych (smartfony, tablety). Dzięki obsłudze różnorodnych typów mediów, bez dużego wysiłku można przygotować specjalne wersje serwisu...
- Dobre praktyki / Przykazania webmastera
Spis treści Wstęp Dobre praktyki HTML Dbaj o poprawność ortograficzną i stylistyczną tekstu Używaj polskich znaków diakrytycznych Rozpoczynaj pracę od stworzenia semantycznego kodu HTML bez żadnej stylizacji Nie używaj elementów ani atrybutów zdeprecjonowanych Unikaj stosowania ramek - zarówno tradycyjnych jak i lokalnych Nie stosuj tabelek do budowania układu strony Nawigacja musi być intuicyjna i wygodna Unikaj używania atrybutu target="..." dla odsyłaczy Nie używaj znaczników img...
Aktualizacja / Data aktualizacji strony...Date(document.lastModified).date('d.m.Y')); </script> Sposób wyświetlania daty można zmienić, podając w wyróżnionym miejscu inny szablon formatujący datę. Pojedyncze litery w tym tekście odpowiadają specjalnym kodom formatującym. Przykładowo: litera d zostanie zastąpiona dniem miesiąca, m - numerem miesiąca, natomiast Y - rokiem. W związku z tym wpisanie d.m.Y może poskutkować następującym wynikiem na ekranie: Lista wszystkich możliwych do użycia kodów w szablonie...
- Skórki
...arkusze stylów Niektóre serwisy pozwalają swoim użytkownikom zmienić wygląd stron, poprzez wybór jednego spośród przygotowanych specjalnych szablonów, które często nazywa się skórkami (ang. skins). Choć na pierwszy rzut oka operacja zmiany wyglądu wydaje się być dość skomplikowana, tak naprawdę absolutnie nie ma potrzeby budowania drugiej wersji strony dla każdej kolejnej skórki. Z pomocą przychodzą style CSS, które wręcz idealnie do tego się nadają. Do przygotowania nowej skórki...
Widżety HTML / Ramki HTMLRamka to dodatkowe okienko, często z własnymi suwakami do przewijania jego zawartości, umieszczone bezpośrednio na stronie, w którym jest wyświetlana inna strona. Można powiedzieć, że jest to taka strona w stronie. W jednym dokumencie HTML możemy umieścić wiele tego typu okienek. Jednak należy pamiętać, że każde z nich wczytuje wewnątrz pełną stronę - razem ze wszystkimi multimediami, które mogą być na niej osadzone. Może to oznaczać bardzo długi czas ładowania całego dokumentu z wstawionymi...
- Układ elastyczny CSS / Flexbox
W zamierzchłych czasach sieci, gdy style CSS nie były jeszcze tak rozwinięte jak dzisiaj, rozplanowanie elementów na stronie realizowano się przy pomocy tabelek. Nie był to jednak najlepszy sposób, gdyż nie spełniał podstawowych zasad semantyki. Tabele zostały stworzone z myślą o prezentacji zbioru danych o powtarzającym się charakterze. Na szczęście style CSS wprowadziły nowe sposoby układania elementów na stronie, bez potrzeby używania w niewłaściwy sposób znaczników tabeli. Paradoksalnie...
- Układ elastyczny CSS / Kolejność {order}
...obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało...
- Komendy CSS3 / Układ siatki CSS
...Zastosowanie kontenery układu siatki Dziedziczenie zobacz cechy indywidualne Procenty zobacz cechy indywidualne grid-template-areas Obszary szablonu układu siatki Wartość none | <string>+ Inicjalizacja none Zastosowanie kontenery układu siatki Dziedziczenie nie Procenty nie grid-template-columns Kolumny szablonu układu siatki Wartość none | <track-list> | <auto-track-list> Inicjalizacja none Zastosowanie kontenery układu siatki Dziedziczenie nie Procenty odnosi się do...