При изменении размера страницы эти блочные элементы грациозно падают друг на друга. Я настроил несколько разных экземпляров медиа-запросов во внешней таблице стилей. Это облегчает отслеживание стилей при возвращении, чтобы редактировать что-то позже.

 
 
 
Джейк Рошло
 
Внештатный писатель и веб-разработчик
  Гудзон, Массачусетс, Соединенные Штаты Америки  [email protected] Мое Портфолио • @jakerocheleau 
 
  
 
 

Прежде чем мы перейдем к подробному CSS, я хочу подробнее рассказать об использовании микроданных. Если вы посмотрите внимательно, я замусорил атрибуты внутри множества различных элементов с именами тип элемента, itemscope, а также itemprop. Все это относится к проекту Schmea, который надеется предложить структуру данных для Интернета..

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

Все основные поисковые системы, включая Google, Yahoo !, и Bing, приняли Schema как лучший синтаксис для разметки данных. Помечая информацию о себе, эти поисковые системы помогают отображать связанные результаты для вашего контента в Интернете. Давайте разберемся, как их настроить.

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

Рекомендуемый метод - заключать содержимое в тег span, а не добавлять его непосредственно к элементу. Когда вы маркируете что-то вроде фотографии, вы должны прикрепить itemprop к IMG элемент напрямую. Но в противном случае вы получите намного более чистую разметку, обернув свои данные в теги span.

Сколько это слишком много?

Я бы сказал, что нет предела количеству деталей, которые вы можете использовать. Микроданные доступны, чтобы помочь компьютерам распознавать людей, организации, продукты и другие элементы в онлайн-контексте. Чем больше информации вы можете предложить, тем лучше.

Стоит сохранить и открыть разум и посмотреть, как вы можете использовать эти микроданные в аспектах вашего собственного сайта. Если вы потратите 10-15 минут на просмотр документации схемы, это будет намного проще, чем вы думаете. Мы можем взглянуть на два убедительных примера из демонстрации резюме:

 
 
Набор навыков
 
 
развитие
 
 
HTML5 / CSS3
 
JavaScript и JQuery
 
PHP Backend
 
Базы данных SQL
 
Wordpress
 
Pligg CMS
 
Некоторая Цель-C
 
 
 
 
Программного обеспечения
 
 
Adobe Photoshop
 
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

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

* поле: 0; отступы: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); размер шрифта: 62,5%; нижний слой: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, без засечек; цвет: # 454545; размер шрифта: 3,6em; нижнее поле: 6 пикселей;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, без засечек; цвет: # 484848; размер шрифта: 2,5em; нижнее поле: 10 пикселей; текстовое оформление: подчеркивание;  h3 font-family: "Trebuchet MS", Verdana, Arial, без засечек; цвет: # 777; Вес шрифта: нормальный; размер шрифта: 1,8em; нижнее поле: 10 пикселей;  h4 font-family: "Trebuchet MS", Verdana, Arial, без засечек; цвет: # 656565; вес шрифта: полужирный; размер шрифта: 1,75em; нижнее поле: 4 пикселя;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; цвет: # 565656; размер шрифта: 1,8em; высота линии: 1.4em; нижнее поле: 15 пикселей; отступ слева: 35 пикселей;  small font-family: "Balthazar", serif; цвет: # 656565; размер шрифта: 1.6em; дисплей: блок; нижнее поле: 6 пикселей;  ul display: block; стиль списка: нет;  ul li padding-left: 45px; list-style-type: нет; выравнивание по вертикали: верх; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px без повторов; нижнее поле: 5 пикселей; семейство шрифтов: "Balthazar", засечек; цвет: # 666; размер шрифта: 1.6em; высота линии: 2.3em;  img border: 0; максимальная ширина: 100%;  color: # 5582d6; текстовое оформление: нет;  a: hover text-художественное оформление: подчеркивание;  

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

/ ** @ макет основной группы ** / #w margin: 0px 50px; отступы: 20px 40px; padding-top: 35px; фон: #fff; минимальная ширина: 260 пикселей; максимальная ширина: 900 пикселей; граница нижний правый радиус: 8 пикселей; 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;  заголовок ширина: 100%;  / ** @ личные настройки группы ** / #info float: left; нижнее поле: 12 пикселей;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; радиус границы: 3 пикселя; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); тень от рамки: 0 2px 4px rgba (0, 0, 0, 0.2); цвет фона: #fff; граница: 1px solid #ccc; обивка: 5px;  

На странице есть только несколько важных областей, требующих внимания. Конечно, div-обертка настроен с дополнительными полями и отступами. Также максимальная ширина ограничена 900px, потому что любой больший размер кажется, что на странице слишком много пустого пространства. Я также использовал закругленные углы внизу страницы для более плавного эффекта на глазах..

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

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

@media только экран и (максимальная ширина: 740 пикселей) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; выравнивание текста: по центру;  #info float: none; дисплей: блок; выравнивание текста: по центру;  #photo float: none; дисплей: блок; выравнивание текста: по центру;  #w padding: 20px 15px;  p padding: 0;  

Начальный 740px прямо там, где фотоизображение будет конфликтовать с текстом нашего заголовка. Вместо того, чтобы фотография выпадала на правой стороне, мы очищаем оба элемента и центрируем весь макет. Я также увеличил размер текста заголовка, чтобы придать более твердый эффект.

Поскольку окно становится меньше, я удалил некоторые дополнительные отступы из div-оболочки и абзацев. Следующая проблема, с которой мы сталкиваемся после заголовка, связана со списком навыков UL. Я отказываюсь от подхода с двумя столбцами, и вместо этого элементы списка плавают рядом друг с другом.

экран @media only и (max-width: 570px) ul li display: inline-block; отступ слева: 15 пикселей; ширина: 140 пикселей; background-position: -5px 0px; поле справа: 6 пикселей; высота строки: 1.7em;  # навыки-слева, навыки-справа margin-bottom: 15px;  

Это также требует изменения положения многих свойств текста по умолчанию. Мы должны обновить высоту строки и переместить значок маркера каждого элемента списка. Я установил фиксированную ширину, чтобы сетка выглядела более организованной до следующей точки останова.

Кодирование для смартфонов

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

экран @media only и (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  @media только экран и (max-width: 320px) #w margin: 0 10px;  / ** Только для iPhone ** / экран @media и (max-device-width: 480px) ul li width: 150px;  

При первом достижении 480px или меньше мы удаляем еще несколько отступов из оболочки, а также снова изменяем размеры элементов списка. Затем в 320px я удалил часть поля за пределами документа. Вы все еще можете видеть текстурированный фон, но это не очень важно в таком тонком вертикальном окне.

Наконец я использую макс-устройство, ширина нацеливаться на само устройство iPhone, а именно на любой другой мобильный экран с максимальной шириной 480 пикселей. В этом случае я хочу обновить элементы списка немного шире, чтобы они заполняли весь экран. Это повлияет только на списки навыков в альбомной ориентации, так как портрет слишком худой, чтобы заметить какие-либо различия.

• демонстрация
• Скачать исходный код

Последние мысли

Работа через Интернет часто требует, по крайней мере, некоторого вида портфолио онлайн. Когда вы можете сослаться на резюме на одной странице со всеми вашими данными, организованными вместе, это показывает, что вы имеете в виду бизнес. Серьезные работодатели и потенциальные клиенты обанкротятся из-за такого харизматического проявления профессионализма в веб-дизайне.

Я надеюсь, что вы можете взять некоторые ключевые моменты из этого урока. Фрилансеры в любой точке мира могут продвигать себя с небольшими техническими усилиями. Не стесняйтесь загружать мой демонстрационный исходный код выше и поделиться своими мыслями об этой статье в нашей области комментариев.