Podczas zmiany rozmiaru strony te elementy blokowe spadają z wdziękiem. Skonfigurowałem kilka różnych wystąpień zapytań o media w zewnętrznym arkuszu stylów. Ułatwia to śledzenie stylów podczas powrotu do edycji później.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Massachusetts, USA  [email protected] Moje portfolio • @jakerocheleau 
 
  
 
 

Zanim przejdziemy do szczegółowego CSS, chcę wyjaśnić więcej na temat użycia mikrodanych. Jeśli przyjrzysz się uważnie, zaśmieciłem atrybuty w wielu różnych elementach nazwami typ przedmiotu, itemscope, i itemprop. Wszystkie one dotyczą projektu Schmea, który ma nadzieję zaoferować strukturę danych dla sieci.

Formatowanie Przydatne mikrodane

Wszystkie główne wyszukiwarki, w tym Google, Yahoo! I Bing, zaakceptowały schemat jako najlepszą składnię znaczników danych. Etykietowanie informacji o sobie pomaga tym wyszukiwarkom wyświetlać powiązane wyniki dla treści online. Podzielmy się tym, jak je ustawić.

Atrybut itemscope jest stosowany do dowolnego kontenera zawierającego informacje o elemencie schematu. Po tym zawsze następuje atrybut itemtype, który w tym scenariuszu opisuje osobę. Wewnątrz tego wrappera div mogę oznaczyć dowolną zawartość, używając itemprop wraz z dowolnymi szczegółami wymienionymi na ich stronie dokumentacji.

Zalecaną metodą jest zawijanie zawartości wewnątrz znacznika span zamiast dołączania bezpośrednio do elementu. Kiedy etykietujesz coś takiego jak zdjęcie, powinieneś dołączyć itemprop do img element bezpośrednio. Ale poza tym będziesz miał znacznie czystsze znaczniki, zawijając swoje dane w znaczniki zakresu.

Jak dużo jest za dużo?

Twierdziłbym, że nie ma ograniczeń co do ilości szczegółów, do których można się udać. Mikrodane są dostępne, aby pomóc komputerom rozpoznawać ludzi, organizacje, produkty i inne przedmioty w kontekście online. Im więcej informacji możesz zaoferować, tym lepiej.

Warto zachować otwarty umysł i zobaczyć, jak można wykorzystać te mikrodane w aspektach własnej strony internetowej. Jeśli spędzasz 10-15 minut w dokumentacji Schema, jest to o wiele łatwiejsze niż myślisz. Możemy spojrzeć na dwa solidne przykłady z demonstracji wznowienia:

 
 
Zestaw umiejętności
 
 
Rozwój
 
 
HTML5 / CSS3
 
JavaScript i jQuery
 
Backend PHP
 
Bazy danych SQL
 
Wordpress
 
Pligg CMS
 
Niektóre Cel-C
 
 
 
 
Oprogramowanie
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Kod X 4
 
 
 
 

Wymieniając moje różne umiejętności, ustawiłem nowy kontener definiujący schemat ItemList. Nie było żadnego zestawu umiejętności ani doświadczenia, które można by wymienić pod postacią Osoby, więc jest to bezpieczna alternatywa. Wartość jest tutaj taka, że ​​Google może zrozumieć każdy itemListElement jest ze sobą powiązany. W tym przypadku mamy listę języków i oprogramowania, z którymi wiem, jak pracować.

 
 
Ostatnie Artykuły
 
  10 przydatnych metod Fallback dla CSS i Javascript • Opublikowane w Lipiec 2012 r
 
  Przepisywanie adresów URL w WordPress: Tips and Plugins • Opublikowane w Lipiec 2012 r
 
  Optymalizacja JPEG dla Internetu - Ultimate Guide • Opublikowane w Lipiec 2012 r
 
  9 sztuczek do zaprojektowania doskonałego biuletynu HTML • Opublikowane w Maj 2012 r
 
  Przewodnik po testowaniu A / B za pomocą Optymalizatora witryny Google • Opublikowane w Marzec 2012
 
 

Innym dobrym przykładem jest lista artykułów na samym dole. Istnieje konfiguracja schematu artykułów i wpisów na blogu, wszystkie związane z treściami znalezionymi w Internecie. Podałem adres URL artykułu i datę publikacji, która jest więcej niż wystarczająca dla tych robotów indeksujących wyszukiwarki.

Pamiętaj tylko, że mikrodane dotyczą formatowania treści, które mają być organizowane przez komputery. To jednostronicowe CV jest doskonałym przykładem na określenie cech konkretnej osoby. Nie będą one przydatne na każdej stronie, ale jest to ekscytująca metodologia do zrozumienia.

Względne style CSS

W tej ostatniej sekcji przyjrzyjmy się, jak stylizować całą tę stronę. W górnej części naszego arkusza stylów definiuję niektóre początkowe resetowania i podstawowe właściwości elementu. Obejmują one nagłówki, elementy listy i efekty najechania linkiem kotwicy.

* margin: 0; dopełnienie: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); rozmiar czcionki: 62,5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; kolor: # 454545; rozmiar czcionki: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; kolor: # 484848; rozmiar czcionki: 2,5em; margin-bottom: 10px; dekoracja tekstowa: podkreślenie;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; kolor: # 777; waga czcionki: normalna; rozmiar czcionki: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; kolor: # 656565; waga czcionki: pogrubiona; rozmiar czcionki: 1,75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, szeryf; kolor: # 565656; rozmiar czcionki: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px;  small font-family: "Balthazar", szeryf; kolor: # 656565; rozmiar czcionki: 1.6em; Blok wyświetlacza; margin-bottom: 6px;  ul display: block; styl listy: brak;  ul li padding-left: 45px; typ-listy-stylu: brak; vertical-align: top; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: „Balthazar”, szeryf; kolor: # 666; rozmiar czcionki: 1.6em; line-height: 2.3em;  img border: 0; maksymalna szerokość: 100%;  a kolor: # 5582d6; dekoracja tekstowa: brak;  a: hover text-decoration: podkreślenie;  

Nic ciekawego poza niektórymi niestandardowymi stosami czcionek. Chwyciłem także unikalną ikonę punktora zamiast używać domyślnej “dysk”. Możesz spróbować przeszukać katalog taki jak Icon Finder, próbując zlokalizować podobny projekt.

/ ** @group core layout ** / #w margin: 0px 50px; dopełnienie: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 900px; border-bottom-right-radius: 8px; border-bottom-left-radius: 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 personal settings ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-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); background-color: #fff; border: 1px solid #ccc; padding: 5px;  

Na stronie jest tylko kilka ważnych obszarów blokowych, które wymagają uwagi. Oczywiście wrapper div jest skonfigurowany z dodatkowymi marginesami i dopełnieniem. Również maksymalna szerokość jest ograniczona do 900px, ponieważ każdy większy rozmiar ma wrażenie, że strona ma zbyt dużo białych znaków. Użyłem również zaokrąglonych rogów u dołu strony, aby uzyskać gładszy efekt na oczach.

Elastyczny projekt

Prawdopodobnie najważniejszym aspektem tego internetowego życiorysu jest responsywna funkcjonalność. Mam pięć różnych ustawień punktów przerwań, aby uzyskać różne efekty podczas zmiany rozmiaru okna przeglądarki.

Ekran @media only i (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; wyrównywanie tekstu: środek;  #info float: none; Blok wyświetlacza; wyrównywanie tekstu: środek;  #photo float: none; Blok wyświetlacza; wyrównywanie tekstu: środek;  #w padding: 20px 15px;  p padding: 0;  

Początek 740px jest dokładnie tam, gdzie obraz będzie kolidował z naszym tekstem nagłówka. Zamiast pozwalać na rozwijanie zdjęcia po prawej stronie, usuwamy oba elementy i wyśrodkowujemy cały układ. Zwiększyłem również rozmiar tekstu nagłówka, aby uzyskać bardziej solidny wpływ.

W miarę zmniejszania się okna usunąłem dodatkowe dopełnienie z div i akapitów opakowania. Następny problem, na który natrafiamy po nagłówku, to lista umiejętności UL. Rozbijam podejście dwukolumnowe i zamiast tego mam pozycje pływające obok siebie.

Ekran @media only i (max-width: 570px) ul li display: inline-block; padding-left: 15px; szerokość: 140px; pozycja tła: -5px 0px; margin-right: 6px; line-height: 1.7em;  # skills-left, skills-right margin-bottom: 15px;  

Wymaga to również zmiany położenia wielu domyślnych właściwości tekstu. Musimy zaktualizować wysokość linii i zmienić położenie ikony punktora każdego elementu listy. Ustawiłem stałą szerokość, więc siatka wydaje się bardziej zorganizowana do następnego punktu przerwania.

Kodowanie dla smartfonów

Ostatnie trzy zapytania o media są małe, ale bardzo ważne. Podczas przełączania między trybem krajobrazowym a portretowym iPhone zmieni rozmiar dowolnej przeglądarki mobilnej. Dotyczy to również większości urządzeń z systemem Android i telefonów z systemem Windows Mobile.

Ekran @media only i (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  Ekran tylko @media i (max-width: 320px) #w margin: 0 10px;  / ** Tylko iPhone ** / ekran @media i (max-device-width: 480px) ul li width: 150px;  

Przy pierwszym uderzeniu 480 pikseli lub mniejszym usuwamy więcej wypełnienia z opakowania, a także ponownie zmieniamy elementy listy. Następnie przy 320px usunąłem część marginesu poza dokumentem. Nadal można zobaczyć teksturowane tło, ale nie jest to bardzo ważne w tak wąskiej pionowej rzutni.

Wreszcie używam max-device-width kierować na samo urządzenie iPhone'a, a mianowicie dowolny inny ekran mobilny o maksymalnej szerokości 480px. W tym przypadku chcę zaktualizować elementy listy nieco szerzej, aby wypełniały cały ekran. Wpłynie to tylko na listę umiejętności w widoku krajobrazu, ponieważ portret jest zbyt chudy, by zauważyć jakiekolwiek różnice.

• Próbny
• Pobierz kod źródłowy

Końcowe przemyślenia

Praca w Internecie często wymaga przynajmniej pewnego rodzaju portfolio online. Kiedy możesz połączyć się z pojedynczą stroną, wznowić wszystkie zorganizowane dane, co oznacza, że ​​masz na myśli biznes. Poważni pracodawcy i potencjalni klienci spadną na łeb na szyję za tak charyzmatyczny pokaz profesjonalizmu w tworzeniu stron internetowych.

Mam nadzieję, że możesz zabrać kilka kluczowych punktów z tego samouczka. Freelancerów w dowolnym miejscu na świecie mogą sprzedawać się z niewielkim wysiłkiem technicznym. Pobierz powyższy kod źródłowy wersji demo i podziel się swoimi przemyśleniami na temat tego artykułu w naszym obszarze komentarzy.