Pri premenovávaní stránky tieto blokové prvky pôvabne spadajú pod seba. V externom štýle šablón som nastavil niekoľko inštancií mediálnych dopytov. To uľahčuje sledovanie štýlov, keď sa vrátite a neskôr upravíte.

 
 
 
Jake Rocheleau
 
Spracovateľ na voľnej nohe a vývojárov webu
  hudson, Massachusetts, USA  [email protected] Moje portfólio • @jakerocheleau 
 
  
 
 

Skôr než sa dostaneme do podrobného CSS, chcem vysvetliť viac o používaní mikrodat. Ak sa pozriete pozorne, v názvoch som uviedol atribúty vo viacerých rôznych prvkoch typ položky, itemscope, a itemprop. Všetci sa týkajú projektu Schmea, ktorý dúfa, že ponúkne štruktúru údajov pre web.

Formátovanie užitočných mikrodat

Všetky hlavné vyhľadávacie nástroje vrátane Google, Yahoo !, a Bing prijali Schema ako najlepšiu syntax pre označovanie dát. Označením podrobností o sebe pomôže týmto vyhľadávacím nástrojom zobraziť súvisiace výsledky online. Poďme rozložiť, ako ich nastaviť.

Atribút itemscope sa aplikuje na akýkoľvek kontajner, ktorý obsahuje informácie o položke schémy. Nasleduje vždy atribút itemtype, ktorý v tomto scenári popisuje osobu. V rámci tejto obálky div môžem označiť ľubovoľný obsah pomocou ikony ihneď spolu s niektorými údajmi uvedenými na ich stránke dokumentácie.

Odporúčaná metóda je zabaliť váš obsah do značky rozpätia namiesto pripojenia priamo k prvku. Keď označujete niečo ako fotku, mali by ste pripojiť itemprop na img priamo. Ale inak budete mať oveľa čistejšiu značku tým, že zabalíte svoje dáta v značkách rozpätia.

Koľko je príliš veľa?

Chcel by som tvrdiť, že nie je obmedzenie množstva podrobností, do ktorých môžete vstúpiť. Médiá sú k dispozícii na to, aby pomohli počítačom rozpoznať ľudí, organizácie, produkty a iné položky v online kontexte. Čím viac informácií môžete ponúknuť, tým lepšie.

Stojí za to udržať a otvoriť myseľ a zistiť, ako môžete použiť tieto mikrodaty v aspektoch vašej vlastnej webovej stránky. Ak strávite 10-15 minút prechádzaním dokumentácie schémy, je to oveľa jednoduchšie, než si myslíte. Môžeme sa pozrieť na dva pevné príklady z demo obnovenia:

 
 
skillset
 
 
vývoj
 
 
HTML5 / CSS3
 
JavaScript a jQuery
 
PHP Backend
 
Databázy SQL
 
Wordpress
 
Pligg CMS
 
Niektoré ciele-C
 
 
 
 
softvér
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Pri výbere rôznych zručností som nastavil nový kontajner definujúci schému položkyList. Neexistoval žiadny typ zručností alebo skúseností, ktoré by sa mohli uvádzať pod osobou, takže je to bezpečná alternatíva. Hodnota je tu, že Google môže každý pochopiť itemListElement sú vzájomne prepojené. V tomto prípade máme zoznam jazykov a softvéru, s ktorými pracujem.

 
 
Nedávne články
 
  10 Užitočné metódy spätného odozvy pre CSS a Javascript • Vydaný v Júl 2012
 
  Prepisovanie adries URL v programe WordPress: Tipy a doplnky • Vydaný v Júl 2012
 
  Optimalizácia JPEG pre web - Ultimate Guide • Vydaný v Júl 2012
 
  9 triky na návrh Perfektný HTML Newsletter • Vydaný v Máj 2012
 
  Sprievodca testovaním A / B pomocou nástroja na optimalizáciu webových stránok Google • Vydaný v Marec 2012
 
 

Ďalším dobrým príkladom je zoznam článkov nájdených na najnižšej úrovni. Existuje nastavenie schémy pre články a blogové príspevky, všetky súvisiace s obsahom nájdeným online. Uvádzal som adresu URL článku a dátum publikácie, čo je viac ako dostatok informácií pre tieto prehľadávače vyhľadávačov.

Majte na pamäti, že mikrodata sa týkajú formátovania obsahu, ktorý organizujú počítače. Tento jednoprafový životopis je dokonalým príkladom na definovanie vlastností o konkrétnej osobe. Tieto stránky nebudú na každej webovej stránke užitočné, ale je to vzrušujúca metodika, ktorú je možné pochopiť.

Relatívne štýly CSS

V tejto poslednej časti sa pozrieme na to, ako navrhnúť celú webovú stránku. V hornej časti nášho štýlu schém definujem niektoré počiatočné opravy a základné vlastnosti prvkov. Patria sem hlavičky, položky zoznamu a efekty vznášania ukotvenia.

* margin: 0; polstrovanie: 0;  html výška: 101%;  body background: # f2f2f2 adresa URL ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); veľkosť písma: 62,5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; farba: # 454545; veľkosť písma: 3,6; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; farba: # 484848; veľkosť písma: 2.5m; margin-bottom: 10px; textová dekorácia: podčiarknutie;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; farba: # 777; veľkosť písma: normálna; veľkosť písma: 1,8; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; farba: # 656565; font-weight: tučné; veľkosť písma: 1,75; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; farba: # 565656; veľkosť písma: 1,8; line-height: 1,4m; margin-bottom: 15px; padding-left: 35px;  malý font-family: "Balthazar", serif; farba: # 656565; veľkosť písma: 1,6; zobrazenie: blok; margin-bottom: 6px;  ul zobrazenie: blok; štýl zoznamu: žiadne;  ul li padding-left: 45px; zoznam-typ-typ: žiadny; vertikálne zarovnanie: hore; pozadie: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; farba: # 666; veľkosť písma: 1,6; line-height: 2,3m;  img okraj: 0; maximálna šírka: 100%;  a farba: # 5582d6; textová výzdoba: žiadne;  a: vznáša sa text-decoration: underline;  

Nič nie je príliš zaujímavé okrem niektorých vlastných fontov. Taktiež som chytil jedinečnú ikonu odrážky namiesto použitia predvoleného nastavenia “kotúč”. Ak sa pokúsite nájsť podobný dizajn, môžete skúsiť vyhľadávanie v adresári ako ikonový náhľad.

/ ** @group layout jadra ** / #w margin: 0px 50px; polstrovanie: 20px 40px; polstrovanie top: 35px; pozadie: #fff; min-šírka: 260 pixlov; max-šírka: 900 pixlov; okraj spodného-pravého okraja: 8px; okraj-spodný-ľavý-polomer: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  hlavička šírka: 100%;  / ** @group osobné nastavenia ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #fotografia img -webkit-border-radius: 3px; -moz-okraj-polomer: 3px; polomer okrajov: 3px; -webkit-box-tieň: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-tieň: 0 2px 4px rgba (0, 0, 0, 0,2); box-tieň: 0 2px 4px rgba (0, 0, 0, 0,2); farba pozadia: #fff; hranica: 1px pevná # ccc; polstrovanie: 5px;  

Na stránke je len niekoľko dôležitých oblastí blokov, ktoré vyžadujú pozornosť. Samozrejme, obal div je nastavený s extra okrajmi a polstrovaním. Maximálna šírka je tiež obmedzená na 900 pixlov, pretože každá väčšia veľkosť má pocit, že stránka má príliš veľa medzery. Taktiež som použil zaoblené rohy v spodnej časti stránky pre hladší efekt na oči.

Realizujúci dizajn

Možno najdôležitejším aspektom tohto online životopisu je schopnosť reagovať. Mám päť rozdielnych nastavení prestávok na dosiahnutie rôznych efektov pri zmene veľkosti okna prehliadača.

@media len obrazovka a (max-šírka: 740px) h1 font-size: 4.5em;  h3 veľkosť písma: 2.2;  h2 zobrazenie: blok; text-align: center;  #info float: žiadne; zobrazenie: blok; text-align: center;  #fotografia float: none; zobrazenie: blok; text-align: center;  #w výplň: 20px 15px;  p padding: 0;  

Počiatočný 740px je pravá okolo miesta, kde sa obrázok bude nachádzať v rozpore s textom hlavičky. Namiesto toho, aby sme rozosielali fotku na pravej strane, vyčistime oba prvky a celé rozmiestnenie sústredíme. Taktiež som zvýšil veľkosť textu hlavičky, aby som získal väčší dopad.

Keď sa okienko zmenší, odstránil som niekoľko extra výplní z obálky div a odsekov. Ďalší problém, ku ktorému narazíme po hlavičke, je zo zoznamu zručností UL. Zrušil som prístup s dvomi stĺpcami a namiesto toho mali listové položky plávať vedľa seba.

@media iba obrazovka a (max-šírka: 570px) ul li display: inline-block; padding-left: 15px; šírka: 140px; poloha pozadia: -5px 0px; margin-right: 6px; line-height: 1,7;  # zručnosti-vľavo, zručnosti-právo margin-bottom: 15px;  

To tiež vyžaduje premiestnenie mnohých predvolených textových vlastností. Musíme aktualizovať výšku čiary a premiestniť ikonu odrážky každej položky zoznamu. Nastavil som pevnú šírku, takže mriežka sa zdá viac organizovaná až do ďalšieho bodu prerušenia.

Kódovanie pre smartfóny

Posledné tri mediálne otázky sú malé, ale veľmi dôležité. Pri prepínaní medzi režimom na šírku a na výšku iPhone zmení veľkosť ľubovoľného mobilného prehliadača. Je to tak aj v prípade väčšiny zariadení so systémom Android a telefónov so systémom Windows Mobile.

@media iba obrazovka a (max-šírka: 480px) ul li width: 120px;  #w margin: 0 20px;  iba obrazovka @media a (max-width: 320px) #w margin: 0 10px;  / ** Iba iPhone / ** a obrazovka @media (max-šírka zariadenia: 480px) ul li width: 150px;  

Keď prvýkrát zasiahne 480 pixelov alebo menej, odstránime z obalu ešte nejaké polstrovanie a opäť znova upravíme položky zoznamu. Potom v rozmedzí 320 pixel som odstránil niektorý okrajový priestor mimo dokumentu. Stále môžete vidieť textúrované pozadie, ale na takom štíhlej vertikálnej výrez nie je veľmi dôležité.

Nakoniec používam max-zariadenia šírky zacieliť na samotné zariadenie iPhone, a to na akúkoľvek inú mobilnú obrazovku s maximálnou šírkou 480 pixlov. V tomto prípade chcem aktualizovať položky zoznamu trochu širšie, aby vyplnili celú obrazovku. Bude to mať vplyv len na zoznamy zručností v zobrazení na šírku, pretože portrét je príliš chudý na to, aby všimol rozdiely.

• demonštrácie
• Stiahnite si zdrojový kód

Záverečné myšlienky

Práca cez internet často vyžaduje aspoň nejaký typ portfólia online. Keď budete môcť prepojiť na obnovenie jednej stránky so všetkými svojimi podrobnosťami, ktoré sú organizované spoločne, ukazuje, že máte na mysli podnikanie. Vážne zamestnávatelia a potenciálni klienti sa dostanú do popredia kvôli takémuto charizmatickému zobrazovaniu profesionality vo webovom dizajne.

Dúfam, že z tohto tutoriálu budete mať niekoľko kľúčových bodov. Zamestnanci na voľnom pracovnom mieste v ľubovoľnom mieste na celom svete sa môžu obchodovať s trochou technického úsilia. Neváhajte a stiahnite si zdrojový kód uvedený vyššie a zdieľajte svoje myšlienky na tento článok v našej oblasti komentárov.