Kun muutat sivun kokoa, nämä lohkoelementit putoavat toistensa alle kauniisti. Olen määrittänyt muutaman erilaisen mediakyselyjen esiintymän ulkoisessa tyylitaulussa. Tämä helpottaa tyylien seurantaa, kun palaat muokkaamaan jotain myöhemmin.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Massachusetts, Yhdysvallat  [email protected] Portfolioni • @jakerocheleau 
 
  
 
 

Ennen kuin siirrymme yksityiskohtaisiin CSS: iin, haluan kertoa lisää mikrotietojen käytöstä. Jos tarkastelet tarkasti, että olen täyttänyt attribuutteja monien eri elementtien sisällä nimien kanssa itemtype, itemscope, ja itemprop. Nämä kaikki liittyvät Schmea-hankkeeseen, joka toivoo tarjoavan verkolle tietorakennetta.

Hyödyllisten mikrotietojen alustaminen

Kaikki suuret hakukoneet, kuten Google, Yahoo! Ja Bing, ovat hyväksyneet kaavion parhaaksi syntaksi tietomerkinnöiksi. Merkitsemällä tiedot itsestäsi auttaa näitä hakukoneita näyttämään sisältöön liittyviä tuloksia verkossa. Hajota miten nämä asetetaan.

Itemcope-attribuuttia sovelletaan mihin tahansa säiliöön, jossa on tietoja skeema-kohdasta. Tätä seuraa aina itemtype-määrite, joka tässä tilanteessa kuvaa henkilöä. Tämän kääreen sisällä voi merkitä minkä tahansa sisällön käyttämällä esineitä ja mitä tahansa niiden dokumentointisivulla lueteltuja tietoja.

Suositeltava menetelmä on pakata sisältösi span-tunnisteeseen sen sijaan, että se liitettäisiin suoraan elementtiin. Kun olet merkinnyt jotakin valokuvaa vastaavaksi, sinun pitäisi liittää kohde prop img elementti suoraan. Mutta muuten sinulla on paljon puhtaampaa merkintää käärimällä tiedot span-tunnisteisiin.

Kuinka paljon on liian paljon?

Väitän, että ei ole mitään rajoitusta siihen, kuinka paljon yksityiskohtia voit mennä. Microdata on käytettävissä, jotta tietokoneet tunnistavat ihmisiä, organisaatioita, tuotteita ja muita kohteita online-yhteydessä. Mitä enemmän tietoa voit tarjota, sitä parempi.

Kannattaa pitää mielessä ja pitää mielessäsi, miten voit käyttää tätä mikrotietoa omassa verkkosivustossasi. Jos käytät 10-15 minuuttia Schema-dokumentaation läpi, se on paljon helpompaa kuin luulisi. Voimme tarkastella kahta vankkaa esimerkkiä jatko-demosta:

 
 
Taidot
 
 
kehitys
 
 
HTML5 / CSS3
 
JavaScript ja jQuery
 
PHP Backend
 
SQL-tietokannat
 
Wordpress
 
Pligg CMS
 
Jotkut tavoite-C
 
 
 
 
Ohjelmisto
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Kun luet eri taitojani, olen asentanut uuden kontin, joka määrittelee ItemList-skeeman. Ei ollut minkäänlaista taitotietoa tai kokemusta, jonka perusteella henkilö olisi voinut listata, joten tämä on turvallinen vaihtoehto. Tässä arvo on, että Google voi ymmärtää kukin itemListElement liittyy toisiinsa. Tässä tapauksessa meillä on luettelo kielistä ja ohjelmista, joita tiedän, miten voin työskennellä.

 
 
Viimeisimmät artikkelit
 
  10 Hyödyllisiä palautustapoja CSS: lle ja Javascriptille • Julkaistu Heinäkuu 2012
 
  URL-osoitteiden kirjoittaminen uudelleen WordPressissa: Vinkkejä ja laajennuksia • Julkaistu Heinäkuu 2012
 
  JPEG-optimointi Web - Ultimate-opas • Julkaistu Heinäkuu 2012
 
  9 temppua suunnittelemaan täydellinen HTML-uutiskirje • Julkaistu Toukokuu 2012
 
  Opas A / B-testaukseen Google-sivuston optimoijalla • Julkaistu Maaliskuu 2012
 
 

Toinen hyvä esimerkki on alhaalta löytyvät artikkelit. Artikkeleita ja blogiviestejä varten on olemassa skeema, jotka liittyvät verkkoon löydettyyn sisältöön. Olen ilmoittanut artikkelin URL-osoitteen ja julkaisupäivän, joka on enemmän kuin tarpeeksi tietoa näille hakukoneiden indeksoijille.

Muista vain, että mikrodatat käsittelevät sisällön muotoilemista tietokoneiden välillä. Tämä yhden sivun palautus on täydellinen esimerkki määrittelemään tietyn henkilön ominaisuuksia. Nämä eivät ole hyödyllisiä jokaisella verkkosivustolla, mutta se on jännittävä menetelmä ymmärtää.

Suhteelliset CSS-tyylit

Tässä viimeisessä osiossa tarkastellaan, miten tämä koko verkkosivu voidaan suunnitella. Tyylilevyn yläreunassa määritän joitakin alkuperäisiä nollauksia ja peruselementin ominaisuuksia. Näitä ovat otsikot, luettelokohdat ja ankkurilinkin hover-vaikutukset.

* marginaali: 0; pehmuste: 0;  html korkeus: 101%;  body tausta: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); kirjasinkoko: 62,5%; pehmustettu pohja: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; väri: # 454545; fontin koko: 3.6em; marginaalin pohja: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; väri: # 484848; fontin koko: 2.5em; marginaalipohja: 10px; teksti-koristelu: alleviivattu;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; väri: # 777; font-weight: normaali; fonttikoko: 1.8em; marginaalipohja: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; väri: # 656565; font-paino: lihavoitu; fonttikoko: 1.75em; marginaalipohja: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; väri: # 565656; fonttikoko: 1.8em; linjan korkeus: 1.4em; marginaalipohja: 15px; pehmuste-vasen: 35px;  pieni font-family: "Balthazar", serif; väri: # 656565; fonttikoko: 1.6em; näyttö: lohko; marginaalin pohja: 6px;  ul näyttö: lohko; list-style: ei;  ul li pehmustettu vasen: 45px; list-style-type: ei; pystysuuntainen: alkuun; tausta: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px ei-toista; marginaalipohja: 5px; font-perhe: "Balthazar", serif; väri: # 666; fonttikoko: 1.6em; linjan korkeus: 2.3em;  img border: 0; max-leveys: 100%;  a väri: # 5582d6; teksti-koristelu: ei;  a: hover text-decoration: alleviivattu;  

Mikään ei ole liian mielenkiintoinen lukuun ottamatta joitakin mukautettuja fonttipinoja. Olen myös tarttunut ainutlaatuiseen bullet-kuvakkeeseen oletusasetuksen sijasta “levy”. Voit yrittää etsiä hakemistosta, kuten Icon Finder, kun yrität löytää samanlaisen mallin.

/ ** @ ryhmäryhmän asettelu ** / #w marginaali: 0px 50px; pehmuste: 20px 40px; toppi: 35px; tausta: #fff; min-leveys: 260px; max-leveys: 900px; raja-ala-oikea-säde: 8px; reunan alareunan vasen-säde: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-säde: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  otsikko leveys: 100%;  / ** @ ryhmäryhmän asetukset ** / #info float: left; marginaalipohja: 12px;  #photo float: oikea;  #photo img -webkit-border-radius: 3px; -moz-border-säde: 3px; raja-säde: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-varjo: 0 2px 4px rgba (0, 0, 0, 0,2); laatikon varjo: 0 2px 4px rgba (0, 0, 0, 0,2); taustaväri: #fff; raja: 1px kiinteä #ccc; pehmuste: 5px;  

Sivulla on vain muutamia tärkeitä lohkoalueita, jotka vaativat huomiota. Kääre div on tietysti asennettuna ylimääräisillä marginaaleilla ja pehmusteilla. Myös maksimileveys on 900px, koska mikä tahansa suurempi koko tuntuu siltä, ​​että sivulla on liikaa välilyöntiä. Olen myös käyttänyt pyöristettyjä kulmia sivun alaosassa, jotta sileä vaikutus on silmissä.

Reagoiva muotoilu

Mahdollisesti tämän online-ansioluettelon tärkein näkökohta on reagoiva toiminta. Minulla on viisi erilaista katkaisupisteiden asetusta, jotta selainikkunan kokoa muutettaessa saavutetaan erilaisia ​​vaikutuksia.

@media only screen ja (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 näyttö: lohko; text-align: center;  #info float: ei; näyttö: lohko; text-align: center;  #photo float: ei; näyttö: lohko; text-align: center;  #w pehmuste: 20px 15px;  p pehmuste: 0;  

Alkukirjain 740px on oikeassa paikassa, jossa kuvan kuva on ristiriidassa otsikkotekstimme kanssa. Sen sijaan, että valokuvan pudotus alas oikealle puolelle, tyhjennämme molemmat elementit ja keskitä koko ulkoasu. Olen myös lisännyt otsikkotekstin kokoa, jotta voin jättää vahvemman vaikutuksen.

Kun ikkuna pienenee, olen poistanut joitakin ylimääräisiä pehmusteita kääreestä ja kappaleista. Seuraava ongelma, jonka päädytään otsikon jälkeen, on UL-listalla. Olen hajottanut kaksipylväisen lähestymistavan ja sen sijaan listan kohteet kelluvat vierekkäin.

@media only screen ja (max-width: 570px) ul li näyttö: inline-block; pehmuste-vasen: 15px; leveys: 140px; tausta-asema: -5px 0px; marginaali-oikea: 6px; linjan korkeus: 1.7em;  # taitoja vasemmalle, taidot-oikea marginaali-pohja: 15px;  

Tämä edellyttää myös useiden oletustekstin ominaisuuksien uudelleen sijoittamista. Meidän on päivitettävä linjan korkeus ja sijoitettava jokaisen luettelon kohteen kuvake. Olen asettanut kiinteän leveyden, joten ruudukko näkyy enemmän järjestyksessä seuraavaan katkaisupisteeseen saakka.

Älypuhelinten koodaus

Kolme viimeistä media-kyselyä ovat pieniä, mutta erittäin tärkeitä. Kun vaihdat vaaka- ja muotokuvaustilan välillä, iPhone muuttaa kokoa mobiilin selaimen. Tämä pätee myös useimpiin Android-laitteisiin ja Windows Mobile -puhelimiin.

@media only screen ja (max-width: 480px) ul li leveys: 120px;  #w marginaali: 0 20px;  @media vain näyttö ja (max-leveys: 320px) #w marginaali: 0 10px;  / ** iPhone vain ** / @media -näyttö ja (max-laite-leveys: 480px) ul li leveys: 150px;  

Kun ensin lyötään 480px tai pienempi, poistamme jonkin verran pehmustetta kääreestä ja myös uudelleen kokoiset kohteet uudelleen. Sitten 320px: ssä olen poistanut osan marginaalitilasta asiakirjan ulkopuolella. Voit silti nähdä kuvioidun taustan, mutta se ei ole kovin tärkeä tällaisessa ohuessa pystysuuntaisessa näkymäportissa.

Lopuksi käytän max-laite-leveys kohdistaa iPhone-laite itse tai mikä tahansa muu mobiilinäyttö, jonka leveys on enintään 480px. Tällöin haluan päivittää luettelon kohteet hieman leveämmiksi, jotta ne täyttävät koko näytön. Se vaikuttaa vain maisemanäkymiin, koska muotokuva on liian laiha havaitsemaan eroja.

• esittely
• Lataa lähdekoodia

Lopulliset ajatukset

Internetissä työskentely vaatii usein ainakin jonkinlaista salkua verkossa. Kun voit linkittää yhdelle sivulle uudelleen, kaikki tiedot, jotka on järjestetty yhdessä, osoittaa, että tarkoitat liiketoimintaa. Vakavat työnantajat ja potentiaaliset asiakkaat putoavat päähänsä niin hyvän karismaattisen näytön perusteella kuin web-suunnittelussa.

Toivon, että voit ottaa joitakin keskeisiä kohtia pois tästä opetusohjelmasta. Freelancerit missä tahansa paikassa ympäri maailmaa voivat markkinoida itseään vain vähän teknisesti. Voit ladata yllä olevan demon lähdekoodin ja jakaa ajatuksesi tästä artikkelista kommenttialueellamme.