Когато преоразмерявате страницата, тези блокови елементи елегантно попадат една в друга. Направих няколко различни копия на медийни заявки във външна таблица със стилове. Това улеснява проследяването на стиловете, когато се връщате назад, за да редактирате нещо по-късно.

 
 
 
Джейк Роше
 
Свободен писател и уеб разработчик
  Хъдсън, Масачузетс, САЩ  [email protected] Моето портфолио • @jakerocheleau 
 
  
 
 

Преди да скочим в подробни CSS искам да обясня повече за използването на микроданни. Ако погледнете отблизо атрибутите в много различни елементи с имената itemtype, itemscope, и itemprop. Всички те са свързани с проекта Schmea, който се надява да предложи структура от данни за мрежата.

Форматиране на полезни микроданни

Всички големи търсачки, включително Google, Yahoo! и Bing, са приели Schema като най-добър синтаксис за маркиране на данни. Чрез етикетиране на информация за себе си това помага на тези търсачки да показват свързани резултати за съдържанието ви онлайн. Нека да разберем как да ги настроим.

Атрибутът itemscope се прилага към всеки контейнер, който съдържа информация за елемент от схемата. Това винаги е последвано от атрибута itemtype, който в този сценарий описва човек. Вътре в тази опаковка div мога да маркирам всяко съдържание, като използвам itemprop заедно с някоя от подробностите, изброени на страницата им в документацията.

Препоръчителният метод е да обгърнете съдържанието си в таг за участъка вместо вместо директно към елемента. Когато маркирате нещо като снимка, трябва да прикачите IMG елемент. Но в противен случай ще имате много по-чиста маркировка, като опаковате данните си в тагове.

Колко е твърде много?

Бих казал, че няма ограничение за количеството детайли, в които можете да влезете. Микроданни са на разположение, за да помогнат на компютрите да разпознават хора, организации, продукти и други елементи в онлайн контекст. Колкото повече информация може да предложите, толкова по-добре.

Струва си да запазите и отворите съзнанието си и да видите как можете да използвате тези микроданни в аспектите на вашия собствен уебсайт. Ако прекарате 10-15 минути през документацията на схемата, това е много по-лесно, отколкото бихте си помислили. Можем да разгледаме два твърди примера от демото на автобиографията:

 
 
Skillset
 
 
развитие
 
 
HTML5 / CSS3
 
JavaScript и jQuery
 
PHP Backend
 
SQL бази данни
 
Wordpress
 
Pligg CMS
 
Някои цели-C
 
 
 
 
Софтуер
 
 
Адобе Фотошоп
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

При изброяването на различните ми умения съм настроил нов контейнер, определящ схемата ItemList. Нямаше никакъв набор от умения или опит, които да се изброяват под Лице, така че това е безопасна алтернатива. Ценността тук е, че Google може да разбере всеки itemListElement е свързано един с друг. В този случай имаме списък с езици и софтуер, с които знам как да работя.

 
 
Последни статии
 
  10 полезни резервни методи за CSS и Javascript • Публикувано в Юли 2012 г.
 
  Пренаписване на URL адреси в WordPress: Съвети и приставки • Публикувано в Юли 2012 г.
 
  JPEG оптимизация за уеб - най-доброто ръководство • Публикувано в Юли 2012 г.
 
  9 трикове за проектиране на идеалния бюлетин за HTML • Публикувано в Май 2012 г.
 
  Ръководство за A / B тестване с Google Оптимизатор на уебсайтове • Публикувано в Март 2012 г.
 
 

Друг добър пример е изброяването на статии, намиращо се в най-долната част. Има настройка на схема за статии и публикации в блогове, всички свързани със съдържание, намерено онлайн. Посочих URL адреса на статията и датата на публикуване, която е повече от достатъчно информация за тези роботи.

Просто имайте предвид, че микроданни са за форматиране на съдържанието, което да бъде организирано от компютри. Това резюме на една страница е идеалният пример за определяне на черти за конкретен човек. Те няма да бъдат полезни за всеки уебсайт, но това е една вълнуваща методология за разбиране.

Относителни CSS стилове

В този последен раздел нека да разгледаме как да оформяме цялата тази уеб страница. Към върха на нашата стилова листа аз дефинирам някои първоначални нули и основни свойства на елементите. Те включват заглавията, елементите от списъка и ефектите на привързаното свързване на връзката.

* margin: 0; пълнеж: 0;  html височина: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); размер на шрифта: 62.5%; подложка-дъно: 65 пиксела;  h1 семейство на шрифтовете: "Simonetta", "Trebuchet MS", Arial, sans-serif; цвят: # 454545; размер на шрифта: 3.6em; margin-bottom: 6px;  h2 семейство на шрифта: "Simonetta", "Trebuchet MS", Arial, sans-serif; цвят: # 484848; размер на шрифта: 2.5em; margin-bottom: 10px; текст-декорация: подчертаване;  h3 семейство на шрифта: "Trebuchet MS", Verdana, Arial, sans-serif; цвят: # 777; тегло на шрифта: нормално; размер на шрифта: 1.8em; margin-bottom: 10px;  h4 семейство на шрифта: "Trebuchet MS", Verdana, Arial, sans-serif; цвят: # 656565; тегло на шрифта: удебелен; размер на шрифта: 1.75em; margin-bottom: 4px;  p семейство на шрифта: "Балтазар", "Droid Serif", Times New Roman, сериф; цвят: # 565656; размер на шрифта: 1.8em; линия-височина: 1.4em; margin-bottom: 15px; подложка-ляво: 35 пиксела;  малко семейство на шрифта: "Балтазар", сериф; цвят: # 656565; размер на шрифта: 1.6em; дисплей: блок; margin-bottom: 6px;  ul display: block; стил в списъка: няма;  ul li padding-left: 45px; list-style-type: няма; вертикално подравняване: отгоре; background: url ("https://assets.hongkiat.com/uploads/responsive-resume/bullet.png") 25px 5px без повторение; margin-bottom: 5px; семейство шрифт: "Балтазар", сериф; цвят: # 666; размер на шрифта: 1.6em; line-height: 2.3em;  img border: 0; максимална ширина: 100%;  a цвят: # 5582d6; текст-декорация: няма;  a: hover text-decoration: underline;  

Нищо твърде интересно, с изключение на някои от потребителските шрифтове. Аз също взех уникална икона на куршум, вместо да използвам подразбиращото се “диск”. Можете да опитате да търсите в директория като Icon Finder, когато се опитвате да намерите подобен дизайн.

/ ** Разположение на ядрото на @group ** / #w margin: 0px 50px; пълнеж: 20px 40px; пълнеж: 35px; фон: #fff; min-width: 260px; max-width: 900px; радиус: 8px; радиус на границата отдолу-ляво: 8px; -webkit-border-bottom-left-радиус: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header ширина: 100%;  / ** @ лични настройки ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; граничен радиус: 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); фонов цвят: #fff; граница: 1px твърдо #ccc; пълнеж: 5px;  

Има само няколко важни блокови области на страницата, които изискват внимание. Разбира се, опаковката div се настройва с допълнителни маржове и подложки. Също така максималната ширина е ограничена при 900 пиксела, защото всеки по-голям размер изглежда, че страницата има твърде много празно пространство. Използвал съм също заоблени ъгли в долната част на страницата за по-гладък ефект върху очите.

Адаптивен дизайн

Вероятно най-важният аспект на това онлайн резюме е отзивчивата функционалност. Имам пет различни настройки за прекъсване, за да постигам различни ефекти при преоразмеряване на прозореца на браузъра.

@media само екран и (макс-ширина: 740px) h1 размер на шрифта: 4.5em;  h3 размер на шрифта: 2.2em;  h2 display: block; text-align: center;  #info float: none; дисплей: блок; text-align: center;  #photo float: none; дисплей: блок; text-align: center;  #w padding: 20px 15px;  p пълнеж: 0;  

Първоначалната 740px е точно там, където фотоизображението ще се сблъска с нашия заглавен текст. Вместо да оставим снимката да пада от дясната страна, ще изчистим двата елемента и ще центрираме цялото оформление. Също така увеличих размера на заглавния текст, за да оставя по-солидно въздействие.

Тъй като прозорецът става по-малък, аз премахнах някои допълнителни подложки от опаковката div и параграфите. Следващият проблем, с който се сблъскваме след заглавието е от списъка с уменията на UL. Разбивам подхода с две колони и вместо това имам елементи от списъка, които се намират един до друг.

@media only screen и (max-width: 570px) ul li display: inline-block; padding-left: 15px; ширина: 140 пиксела; фонова позиция: -5px 0px; margin-right: 6px; височина на линията: 1.7em;  # умения-ляво, умения-дясно margin-bottom: 15px;  

Това също изисква препозициониране на много от свойствата на текста по подразбиране. Трябва да актуализираме височината на линията и да преместваме иконата на куршума на всеки елемент от списъка. Зададох фиксирана ширина, така че решетката да е по-организирана до следващата точка на прекъсване.

Кодиране за смартфони

Последните три медийни запитвания са малки, но много важни. Когато превключвате между ландшафтен и портретен режим, iPhone ще преоразмерява всеки мобилен браузър. Такъв е и случаят с повечето устройства с Android и Windows Mobile телефони.

@media само екран и (макс-ширина: 480px) ul li ширина: 120px;  #w margin: 0 20px;  @media само екран и (max-width: 320px) #w margin: 0 10px;  / ** Само iPhone ** / @media екран и (max-device-width: 480px) ul li ширина: 150px;  

При първоначално натискане на 480px или по-малък, ние премахваме някои допълнителни подложки от обвивката и също така преоразмеряваме елементите от списъка отново. След това на 320px премахнах част от пространството за полета извън документа. Все още можете да видите текстурирания фон, но не е много важен за такъв тънък вертикален изглед.

Накрая използвам макс устройство ширина да се насочите към самото устройство на iPhone, а именно всеки друг мобилен екран с максимална ширина от 480px. В този случай искам да актуализирам елементите в списъка малко по-широко, така че да попълнят целия екран. Това ще засегне само уменията в пейзажния изглед, тъй като портретът е твърде слаб, за да забележите някакви различия.

• Демонстрация
• Изтегляне на изходния код

Заключителни мисли

Работата в интернет често изисква поне някакво онлайн портфолио. Когато можете да свържете автобиография с една страница с всичките си подробности, организирани заедно, това показва, че имате предвид бизнес. Сериозните работодатели и потенциални клиенти ще се сблъскат с такъв харизматичен проява на професионализъм в уеб дизайна.

Надявам се, че можете да вземете някои ключови точки от този урок. Свободни специалисти на всяко място по света могат да се търгуват само с малко технически усилия. Чувствайте се свободни да изтеглите моя демо изходен код по-горе и да споделите вашите мисли по тази статия в нашата област за коментари.