Po zvláštnom zmätku v poslednom videu o tom, ktorú hlavičku sme vlastne robili, tentoraz skutočne budeme implementovať vlastnú hlavičku pre stránku Deals! Tú urobila Meg Hunt.
Rovnako ako všetky hlavičky, aj my sme strávili nejaký čas pozeraním pôvodných súborov a zisťovaním, ako bude najlepšie sedieť na stránke. Vyskúšame niekoľko možností, ale nakoniec sa rozhodneme, že vloženie do uzavretého boxu je najlepšie (na rozdiel od niečoho ako hlavička Demos, kde sa hlavička taví do hranice okolo obsahu.
Pri jeho exportovaní sa pohrávame s mnohými rôznymi grafickými formátmi. Je zaujímavé, že tento konkrétny štýl je približne rovnaký v kvalite aj vo veľkosti súboru medzi formátmi PNG a JPG.webp. Na výstupe máme šírku 2 000 pixelov, čo by malo vyzerať dobre na každej obrazovke. Zasiahli sme tiež asi 150 000, čo je veľké, ale pre hrdinu, ako je tento, je OK cieľ.
Začíname dostávať šablónu pre ponuky v poradí, vrátane sledovania toho, ako sú jednotlivé obchodné dohody individuálne, ktoré sú pred výstupom randomizované. Strávime viac času týmto značením a tým všetkým neskôr, ale keďže sme v tejto šablóne a pripravovali veci na hlavičku, mohli by sme ju vyčistiť.
Pozeráme sa na niekoľko rôznych možností umiestnenia vlastnej grafiky hlavičky na stránku. Obrázok na pozadí má najväčší zmysel, pretože používame sémantiku
na nahradenie názvu a obrázka. Pomocou background-sizeskontrolujeme cover, ale to môže spôsobiť prerušenie transakcie. Skontrolovali sme obsah, ale to umožňuje priestor zvonku. 100%robí trik, ale aby to dobre fungovalo, budeme musieť vyrobiť rámček v štýle pomeru strán. Je to jednoduché, iba urobíme výšku 0 a použijeme percentuálne horné polstrovanie, aby to fungovalo (polstrovaná škatuľa).
Toto je siedma vlastná hlavička, ktorú sme vytvorili, a každá z nich bola urobená inak. Webdizajn, hm? Aký výlet.