Az oldal átméretezésekor ezek a blokkelemek kecsesen aláesnek egymás alá. A média lekérdezések néhány különböző példányát egy külső stíluslapon állítom be. Ez megkönnyíti a stílusok nyomon követését, ha később visszajön, hogy szerkesszen valamit.

 
 
 
Jake Rocheleau
 
Szabadúszó író és webfejlesztő
  Hudson, Massachusetts, USA  [email protected] Portfólióm • @jakerocheleau 
 
  
 
 

Mielőtt továbblépnénk a részletes CSS-be, többet szeretnék elmagyarázni a mikroadatok használatáról. Ha közelebbről megnéztem, az almozott attribútumok sok különböző elemen belül vannak a nevekkel tárgy típus, itemscope, és itemprop. Ezek mindegyike a Schmea projekthez kapcsolódik, amely reméli, hogy adatstruktúrát kínál a web számára.

Hasznos mikrodatok formázása

Az összes nagyobb keresőprogram, köztük a Google, a Yahoo! És a Bing, elfogadta a sémát az adatjelzés legjobb szintaxisaként. Az önmagával kapcsolatos adatok címkézésével segíthet ezeknek a keresőmotoroknak az online tartalmakhoz kapcsolódó eredményeinek megjelenítéséhez. Lássuk le, hogyan állítsuk be ezeket.

A itemcope attribútum minden olyan tartályra vonatkozik, amely a sémaelemre vonatkozó információkat tartalmaz. Ezt mindig az itemtype attribútum követi, amely ebben a forgatókönyvben egy személyt ír le. Ezen a csomagoláson belül a tartalomelemeket az itemprop és a dokumentációs oldalon felsorolt ​​adatok bármelyikével jelölhetem meg.

Az ajánlott módszer az, hogy a tartalmat egy span-címkére helyezze, nem pedig közvetlenül az elemhez. Ha valami fotót jelöl, mint például egy fotót, az elemhez csatolni kell az elemet img elemet közvetlenül. Máskülönben sokkal tisztább jelölést kapsz, ha az adatokat span címkékbe csomagoljuk.

Mennyibe kerül túl sok?

Azt állítanám, hogy nincs korlátozás arra, hogy mennyi részletet tudsz bejutni. A mikroadatok rendelkezésre állnak, hogy segítsék a számítógépeket az emberek, szervezetek, termékek és egyéb elemek online környezetben történő felismerésében. Minél több információt kínál, annál jobb.

Érdemes megtartani és nyíltan szem előtt tartani és megnézni, hogy miként használhatja ezt a mikroadatokat saját webhelyén. Ha 10-15 percet tölt el a séma dokumentációjában, sokkal könnyebb, mint gondolná. Két folytonos példát tekinthetünk meg az újraindítási demóból:

 
 
Szakmai tudáskészlet
 
 
Fejlesztés
 
 
HTML5 / CSS3
 
JavaScript és jQuery
 
PHP Backend
 
SQL adatbázisok
 
Wordpress
 
Pligg CMS
 
Néhány C-célkitűzés
 
 
 
 
Szoftver
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

A különböző készségek felsorolásakor egy új tartályt állítok be, amely meghatározza az ItemList sémát. A személy alatt nem volt semmilyen készség vagy tapasztalat, így ez biztonságos alternatíva. Itt az az érték, hogy a Google mindegyikét meg tudja érteni itemListElement egymáshoz kapcsolódik. Ebben az esetben van egy lista a nyelvekről és a szoftverekről, amelyekkel tudok dolgozni.

 
 
friss cikkek
 
  10 Hasznos Fallback módszerek CSS és Javascript számára • Kiadva 2012. július
 
  URL-ek újraírása a WordPressben: Tippek és bővítmények • Kiadva 2012. július
 
  JPEG-optimalizálás a webhez - Ultimate Guide • Kiadva 2012. július
 
  9 trükkök a tökéletes HTML hírlevél megtervezéséhez • Kiadva 2012. május
 
  Útmutató az A / B teszteléshez A Google Webhely-optimalizáló • Kiadva 2012. március
 
 

Egy másik jó példa erre az alján található cikkek. A cikkek és a blogbejegyzések séma-beállításai vannak, amelyek az interneten talált tartalomhoz kapcsolódnak. Megadtam a cikk URL-jét és a közzététel dátumát, amely több, mint elegendő információ a keresőmotor-bejárók számára.

Ne feledje, hogy a mikrodata a számítógép által szervezett tartalom formázásáról szól. Ez az egyoldalas folytatás tökéletes példa arra, hogy egy adott személyre vonatkozó jellemzőket határozzon meg. Ezek nem lesznek hasznosak minden weboldalon, de ez egy izgalmas módszertan megérteni.

Relatív CSS-stílusok

Ebben az utolsó részben nézzük meg, hogyan kell ezt az egész weblapot stílusosítani. A stíluslap teteje felé néhány kezdeti visszaállítást és alapelem tulajdonságokat definiálok. Ezek közé tartoznak a fejlécek, a listaelemek és a horgonycsatolás hatásai.

* margó: 0; párnázás: 0;  html magasság: 101%;  test háttér: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); betűméret: 62,5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; szín: # 454545; betűméret: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; szín: # 484848; betűméret: 2.5em; margin-bottom: 10px; szöveg-díszítés: aláhúzás;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; szín: # 777; font-súly: normál; betűméret: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; szín: # 656565; font-súly: félkövér; betűméret: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, szerif; szín: # 565656; betűméret: 1.8em; vonalmagasság: 1.4em; margin-bottom: 15px; párnázott-bal: 35px;  kis font-family: "Balthazar", szerif; szín: # 656565; betűméret: 1.6em; kijelző: blokk; margin-bottom: 6px;  ul kijelző: blokk; list-style: nincs;  ul li padding-left: 45px; list-style-type: nincs; függőleges illesztés: felső; háttér: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px nem ismételhető; margin-bottom: 5px; font-család: "Balthazar", szerif; szín: # 666; betűméret: 1.6em; vonalmagasság: 2.3em;  img border: 0; max. szélesség: 100%;  a szín: # 5582d6; szöveg-dekoráció: nincs;  a: lebeg text-decoration: aláhúzás;  

Semmi sem érdekes, kivéve néhány egyedi betűkészletet. Az alapértelmezett beállítás helyett megragadtam egy egyedi golyó ikonját is “lemez”. Megpróbálhat egy olyan könyvtáron keresztül keresni, mint például az Icon Finder, amikor megpróbál keresni egy hasonló designt.

/ ** @ csoportcsoport elrendezés ** / #w margó: 0px 50px; párnázás: 20px 40px; padding-top: 35px; háttér: #fff; min-szélesség: 260px; max. szélesség: 900px; határ-alsó-jobb sugár: 8px; határ-alsó-bal-sugár: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-sugár: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  fejléc szélesség: 100%;  / ** @group személyes beállítások ** / #info float: balra; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-határ-sugár: 3px; határ-sugár: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-árnyék: 0 2px 4px rgba (0, 0, 0, 0,2); doboz-árnyék: 0 2px 4px rgba (0, 0, 0, 0,2); háttérszín: #fff; határ: 1px szilárd #ccc; párnázás: 5px;  

Csak néhány fontos blokk terület van az oldalon, amelyek figyelmet igényelnek. Természetesen a csomagoló div extra margókkal és párnázással van beállítva. A maximális szélesség 900px-on is korlátozott, mert bármilyen nagyobb méret úgy érzi, mintha az oldal túl sok helyet tartalmaz. Az oldal alján is lekerekített sarkokat használtam, hogy simább hatást gyakoroljak a szemre.

Reszponzív dizájn

Lehetséges, hogy ennek az online önéletrajznak a legfontosabb eleme az érzékeny funkcionalitás. A böngészőablak átméretezése során öt különböző megszakítási pont beállítása van a különböző hatások eléréséhez.

@media only screen és (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 kijelző: blokk; szöveg-igazítás: központ;  #info float: nincs; kijelző: blokk; szöveg-igazítás: központ;  #photo float: nincs; kijelző: blokk; szöveg-igazítás: központ;  #w párnázás: 20px 15px;  p padding: 0;  

A kezdeti 740px az a hely, ahol a fotó kép összeütközik a fejléc szövegével. Ahelyett, hogy a fotót legördül a jobb oldalra, mindkét elemet töröljük, és az egész elrendezést középre állítjuk. A fejléc szövegméretét is megnöveltem, hogy szilárdabb hatást lehessen hagyni.

Ahogy az ablak kisebb lesz, eltávolítottam néhány extra párnázatot a burkoló divból és a bekezdésekből. A következő probléma, amellyel a fejléc után lépünk, az UL készséglistából származik. Bontom a kétoszlopos megközelítést, és ehelyett egymás mellett lebegő listaelemek vannak.

@media only screen és (max-width: 570px) ul li display: inline-block; párnázott-bal: 15px; szélesség: 140px; háttér-pozíció: -5px 0px; margin-right: 6px; vonalmagasság: 1.7em;  # készségek balra, készségek-jobb margin-bottom: 15px;  

Ehhez sok alapértelmezett szövegtulajdonság áthelyezését is meg kell adni. Frissítenünk kell a vonal magasságát és át kell helyezni az egyes listaelemek golyóikonját. Meghatároztam egy fix szélességet, így a rács jobban szerveződik a következő töréspontig.

Az okostelefonok kódolása

Az utolsó három média lekérdezés kicsi, de nagyon fontos. A tájkép és a portré mód közötti váltáskor az iPhone átméretezi a mobilböngészőt. Ez a helyzet az Android-eszközök és a Windows Mobile telefonok esetében is.

@media csak képernyő és (max-width: 480px) ul li szélesség: 120px;  #w margó: 0 20px;  @ media only screen és (max-width: 320px) #w margó: 0 10px;  / ** iPhone csak ** / @ media képernyő és (max-device-width: 480px) ul li szélesség: 150px;  

Amikor 480px-ot vagy kisebbet ütöttünk el, eltávolítunk néhány párnát a burkolatból, és újra méretezzük a listaelemeket. Ezután 320px-en eltávolítottam a dokumentumon kívüli margóteret. Még mindig láthatja a textúrázott hátteret, de ez nem túl fontos egy ilyen vékony függőleges nézetablakban.

Végül használom max-eszköz-szélesség az iPhone eszközre, vagyis minden más mobil képernyőre, amelynek maximális szélessége 480px. Ebben az esetben egy kicsit szélesebbre szeretném frissíteni a listaelemeket, hogy azok teljesítsék a teljes képernyőt. Ez csak a tájkép nézetét érinti, mivel a portré túl sovány, hogy észrevegye a különbségeket.

• Demó
• Forráskód letöltése

Végső gondolatok

Az interneten való munkavégzéshez gyakran szükség van legalább egyfajta portfólióra. Ha egyetlen oldalra linkelhet, folytathatja az összes szervezett részletet, és azt mutatja, hogy üzletet jelent. A komoly munkaadók és a potenciális ügyfelek a webdesign professzionalizmusának ilyen karizmatikus megjelenése felé nyúlnak.

Remélem, néhány kulcsfontosságú pontot el lehet távolítani a bemutatótól. A világ bármely pontján lévő szabadúszók csak egy kis technikai erőfeszítéssel tudják értékesíteni magukat. Nyugodtan töltse le a fenti demo forráskódot, és ossza meg gondolatait ezen a cikken a megjegyzések területén.