Při změně velikosti stránky tyto prvky bloků padají pod sebe ladně. Nastavil jsem několik různých instancí mediálních dotazů v externím stylu. To usnadňuje sledování stylů při návratu k pozdější úpravě.

 
 
 
Jake Rocheleau
 
Nezávislý spisovatel a webový vývojář
  Hudson, Massachusetts, USA  [email protected] Moje portfolio • @jakerocheleau 
 
  
 
 

Než skočíme do podrobných CSS, chci vysvětlit více o používání mikrodat. Podíváte-li se pozorně, vnořila jsem atributy do mnoha různých prvků s názvy typ položky, itemscope, a itemprop. To vše se týká projektu Schmea, který doufá nabídnout datové struktuře webu.

Formátování užitečných mikrodat

Všechny hlavní vyhledávače včetně Google, Yahoo !, a Bing přijaly Schema jako nejlepší syntaxi pro značení dat. Označením podrobností o sobě pomáhá těmto vyhledávačům zobrazovat související výsledky vašeho obsahu online. Pojďme rozdělit, jak je nastavit.

Atribut itemscope se aplikuje na každý kontejner, který obsahuje informace o položce schématu. Za ním vždy následuje atribut itemtype, který v tomto scénáři popisuje osobu. Uvnitř tohoto balíku div mohu označit jakýkoli obsah pomocí itemprop spolu s některým z údajů uvedených na jejich stránce dokumentace.

Doporučená metoda je zabalit váš obsah do tagu span namísto připojení přímo k elementu. Když označujete něco jako fotku, měli byste ji připojit k img přímo. Ale jinak budete mít mnohem čistší značení tím, že zabalíte data do značek.

Kolik je příliš mnoho?

Řekl bych, že neexistuje žádný limit na množství detailů, do kterých můžete jít. K dispozici jsou mikrodata, která pomohou počítačům rozpoznat lidi, organizace, produkty a další položky v rámci online. Čím více informací můžete nabídnout, tím lépe.

Stojí za to udržet a otevřít mysl a zjistit, jak můžete tyto mikroúdaje používat v aspektech svých vlastních webových stránek. Pokud strávíte 10-15 minut procházením dokumentace schématu, je to mnohem jednodušší, než si myslíte. Z ukázky životopisu se můžeme podívat na dva pevné příklady:

 
 
Sada dovedností
 
 
Rozvoj
 
 
HTML5 / CSS3
 
JavaScript a jQuery
 
PHP Backend
 
SQL databáze
 
Wordpress
 
Pligg CMS
 
Některé Objective-C
 
 
 
 
Software
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Při výpisu různých dovedností nastavím nový kontejner definující schéma ItemList. Nebyl žádný typ dovedností nebo zkušeností, které by se daly zařadit pod osobu, takže je to bezpečná alternativa. Hodnota zde je, že společnost Google může každému porozumět itemListElement souvisí. V tomto případě máme seznam jazyků a softwaru, se kterými pracuji.

 
 
poslední články
 
  10 Užitečné Fallback metody pro CSS a Javascript • Publikoval v Červenec 2012
 
  Přepisování URL ve WordPress: Tipy a pluginy • Publikoval v Červenec 2012
 
  Optimalizace JPEG pro Web - Ultimate Guide • Publikoval v Červenec 2012
 
  9 triky navrhnout Perfektní HTML Newsletter • Publikoval v Květen 2012
 
  Průvodce testováním A / B pomocí Optimalizátoru webových stránek Google • Publikoval v Březen 2012
 
 

Dalším dobrým příkladem je výpis článků, který se nachází na samém konci. Existuje nastavení schématu pro články a příspěvky do blogu, vše související s obsahem nalezeným online. Uvedl jsem článek URL a datum zveřejnění, které je více než dost informací pro tyto vyhledávače pro vyhledávače.

Mějte na paměti, že mikrodata se týkají formátování obsahu organizovaného počítači. Tento jednorázový životopis je dokonalým příkladem pro definování vlastností o konkrétní osobě. Ty nebudou užitečné na všech webových stránkách, ale je to vzrušující metodika, která je pochopitelná.

Relativní styly CSS

V této poslední části se podívejme, jak tuto webovou stránku vytvořit. Směrem k vrcholu naší šablony stylů definuji některé počáteční resety a základní elementární vlastnosti. Patří mezi ně záhlaví, položky seznamu a efekty přechodu na odkaz ukotvení.

* margin: 0; výplň: 0;  html výška: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); velikost písma: 62,5%; spodní čalounění: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; barva: # 454545; velikost písma: 3,6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; barva: # 484848; velikost písma: 2.5em; margin-bottom: 10px; text-decoration: underline;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; barva: # 777; font-weight: normální; velikost písma: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; barva: # 656565; font-weight: tučné; velikost písma: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; barva: # 565656; velikost písma: 1.8em; line-height: 1,4em; spodní okraj: 15px; polstrování vlevo: 35px;  small font-family: "Balthazar", serif; barva: # 656565; velikost písma: 1.6em; zobrazení: blok; margin-bottom: 6px;  ul zobrazit: blok; styl seznamu: žádný;  ul li padding-left: 45px; list-style-type: žádný; svislé zarovnání: horní; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; barva: # 666; velikost písma: 1.6em; line-height: 2.3em;  img border: 0; max-width: 100%;  a color: # 5582d6; text-decoration: žádný;  a: hover text-decoration: underline;  

Nic moc zajímavého kromě některých vlastních zásobníků písem. Namísto použití výchozího nastavení jsem také chytil jedinečnou ikonu odrážky “disk”. Při pokusu o vyhledání podobného návrhu můžete zkusit prohledávat adresář jako Finder ikon.

/ ** @ group core layout ** / #w margin: 0px 50px; polstrování: 20px 40px; polstrování: 35x; pozadí: #ff; min-width: 260px; max-width: 900px; okraj-pravý-pravý-rádius: 8px; okraj-dolní-levý rádius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header width: 100%;  / ** @ group osobní nastavení ** / #info float: left; spodní okraj: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; hraniční rádius: 3px; -webk-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); barva pozadí: #fff; hranice: 1px pevná #ccc; polstrování: 5px;  

Na stránce je jen několik důležitých blokových oblastí, které vyžadují pozornost. Samozřejmě, že balič div je nastaven s extra okraje a polstrováním. Také maximální šířka je omezena na 900 pixelů, protože každá větší velikost má pocit, že stránka má příliš mnoho mezer. Použil jsem také zaoblené rohy ve spodní části stránky pro hladší efekt na oči.

Citlivý design

Pravděpodobně nejdůležitější aspekt tohoto online životopisu je responzivní funkce. Mám pět různých nastavení zarážky k dosažení různých efektů při změně velikosti okna prohlížeče.

@ Pouze obrazovka a (max-width: 740px) h1 velikost písma: 4,5em;  h3 font-size: 2.2em;  h2 zobrazení: blok; zarovnání textu: střed;  #info float: none; zobrazení: blok; zarovnání textu: střed;  #photo float: none; zobrazení: blok; zarovnání textu: střed;  #w padding: 20px 15px;  p padding: 0;  

Počáteční 740px je přímo kolem místa, kde bude obrázek obrázku v rozporu s textem hlavičky. Namísto toho, aby se fotografie rozevírala na pravou stranu, vymažeme oba prvky a vycentrujeme celé uspořádání. Také jsem zvětšil velikost textu záhlaví, abych zanechal pevnější dopad.

Vzhledem k tomu, že okno se zmenšilo, odstranil jsem nějaké extra polstrování z obalu a odstavců. Další problém, na který narazíme po záhlaví, je seznam dovedností UL. Rozebírám přístup dvou sloupců a místo toho mají položky seznamu plovoucí vedle sebe.

@ Pouze obrazovka a (max-width: 570px) ul li zobrazení: vložený blok; polstrování vlevo: 15px; šířka: 140px; Pozice pozadí: -5px 0px; pravý okraj: 6px; line-height: 1.7em;  # skills-left, dovednosti-right margin-bottom: 15px;  

To také vyžaduje přemístění mnoha výchozích vlastností textu. Musíme aktualizovat výšku řádku a přemístit každou ikonu odrážky položky seznamu. Nastavil jsem pevnou šířku, takže mřížka se zdá být organizovanější až do dalšího bodu zlomu.

Kódování pro smartphony

Poslední tři mediální dotazy jsou malé, ale velmi důležité. Při přepínání mezi režimem na šířku a na výšku bude iPhone měnit velikost libovolného mobilního prohlížeče. To je také případ většiny zařízení se systémem Android a telefonů se systémem Windows Mobile.

@ Pouze obrazovka a (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  @media pouze obrazovka a (max-width: 320px) #w okraj: 0 10px;  / ** Pouze iPhone ** / @media obrazovka a (max-device-width: 480px) ul li width: 150px;  

Při prvním stisknutí tlačítka 480px nebo menším odstraníme z obalu další výplň a znovu změníme velikost položek seznamu. Pak na 320px jsem odstranil část prostoru mimo dokument. Stále můžete vidět texturované pozadí, ale na tak štíhlém vertikálním výřezu to není příliš důležité.

Konečně používám max-device-width zaměřit se na samotné zařízení iPhone nebo na jakoukoli jinou mobilní obrazovku s maximální šířkou 480px. V tomto případě chci aktualizovat položky seznamu o něco širší, aby vyplnily celou obrazovku. Ovlivní pouze seznamy dovedností v zobrazení na šířku, protože portrét je příliš hubený, aby si všiml jakýchkoli rozdílů.

• Demo
• Stáhněte si zdrojový kód

Závěrečné myšlenky

Práce na internetu často vyžaduje přinejmenším nějaký druh portfolia online. Když můžete odkaz na jednu stránku pokračovat se všemi svými detaily organizovány dohromady ukazuje, že máte na mysli podnikání. Seriózní zaměstnavatelé a potenciální klienti upadnou na paty k takovému charismatickému projevu profesionality ve web designu.

Doufám, že můžete z tohoto tutoriálu vzít několik klíčových bodů. Na volné noze v jakékoli lokalitě po celém světě se mohou prodávat sami s trochou technického úsilí. Neváhejte si stáhnout můj demo zdrojový kód výše, a podělte se o své myšlenky na tento článek v naší oblasti komentářů.