Płytki Szablony HTML

Czyste szablony HTML z kafelkami z edytowalnymi znacznikami źródłowymi

Kiedy programista dziedziczy szablon HTML z kafelkami, otrzymuje zestaw plików, a to, jak przyjemny będzie kolejny miesiąc, zależy od tego, jak te pliki zostaną ze sobą połączone. Wzór pojawia się wszędzie: w indeksie portfolio, siatce produktów czy na okładce magazynu. Poniższy znacznik decyduje o tym, czy dodanie dwustu wpisów to zadanie na popołudnie, czy przepisanie.

Wzorce znaczników, które będziesz często kopiować

Powtarzanie jest istotą układu kafelków i pierwszą rzeczą, którą należy sprawdzić. Karta zazwyczaj zawiera obraz, tytuł i link, a jej kształt powinien pozostać identyczny od pierwszego do ostatniego wpisu. Otwórz kod źródłowy i zwróć uwagę na kilka rzeczy:

1. Sekcje semantyczne wokół każdej grupy kafelków zamiast jednego nieskończonego kontenera.
2. Nagłówki, które schodzą w dół, z wyróżnionym wpisem nad elementami, które wprowadzają.
3. Wzór karty powtarzany dosłownie, z haczykami klas pozostawionymi na miejscu do późniejszej pracy. 4. Linki umieszczone na elementach, w które użytkownik faktycznie klika.

Kolejność czytania przetrwa każde załamanie

Układ kafelków, który dobrze się prezentuje na szerokim ekranie, może pojawić się w dziwnej kolejności na telefonie, ponieważ położenie wizualne panelu i jego miejsce w źródle różnią się. Element wyróżniony w lewym górnym rogu nie powinien pojawiać się poniżej trzech mniejszych kart. Szybka kontrola powtarzających się bloków:

1. Element, którego użytkownik potrzebuje jako pierwszy, pojawia się jako pierwszy w źródle.
2. Tekst pomocniczy pozostaje powiązany z obrazem, który opisuje.
3. Link zamyka blok, zamiast unosić się nad treścią, na którą oddziałuje.

Jeśli zrobisz to dobrze na jednej karcie, dwie setne karty odziedziczą to samo. Jeśli zrobisz to źle, usłyszysz o tym od klienta trzymającego telefon.

Po eksporcie, najpierw sprawdź linki

Nicepage eksportuje projekt z aplikacji desktopowej, a przewodnik eksportu opisuje ten proces. Na dysku ląduje zestaw plików, które można hostować w dowolnym miejscu, więc nic nie jest powiązane z hostingiem Nicepage, a kod źródłowy pozostaje otwarty na dalszą edycję.

Pierwszy etap po eksporcie jest krótki i warty poświęcenia czasu. Sprawdź, czy linki względne i ścieżki dostępu do zasobów nadal działają po umieszczeniu plików na serwerze, czy atrybuty alt obrazów dokładnie opisują zawartość i czy nagłówki przeszły wymianę treści w odpowiedniej kolejności. Powtarzające się karty zasługują na ponowne przyjrzenie się, gdy wypełni je prawdziwy materiał, ponieważ tytuł, który pasuje do wersji demonstracyjnej w czterech słowach, rzadko pasuje do rzeczywistości w dwunastu.

Oceniasz, jak łatwo będzie zaakceptować kod źródłowy. Znaczniki, które możesz czytać, edytować i rozszerzać bez sprzeciwu, pozostają użyteczne długo po zmianie układu na ekranie.