VCard - это цифровая визитная карточка, предназначенная для интерпретации вашим почтовым клиентом или другими программами, импортирующими контактные данные, такими как Outlook, Thunderbird или адресная книга. Включив vCard на свой веб-сайт, вы упростите загрузку вашей информации посетителями и сможете легко связаться с вами в будущем. Однако vCard не имеет визуального компонента, поэтому создание страницы для него полностью на ваше усмотрение. Вы можете пойти настолько безумно или сдержанно, насколько захотите. Если вам просто нужен базовый вид, имитирующий внешний вид традиционной визитной карточки, вы можете сделать это с помощью элемента div и некоторых простых стилей CSS.
1
Загрузите файл vCard на свой веб-сайт. Убедитесь, что vCard содержит только профессиональные данные, которые вам удобно распространять в Интернете.
2
Создайте элемент div, который вы хотите представить своей визитной карточкой. Дайте ему уникальный идентификатор, например vcard, и введите данные, которые вы хотите отобразить на карточке. Базовая карта может включать ваше имя, веб-сайт и адрес электронной почты. Вы также можете сделать ссылку на свою страницу Facebook, свою учетную запись Twitter или другие сайты социальных сетей. Не забудьте указать ссылку для загрузки вашей визитной карточки. Базовый div может выглядеть примерно так:
(555) 555-5555
//www.yourwebsite.com
Скачать vCard
3
Добавьте идентификатор vcard в свою таблицу стилей, чтобы изменить способ отображения div. Если вам нужна относительно большая презентация карточки с белым фоном и черной рамкой, идентификатор может выглядеть примерно так:
div # vcard {ширина: 400 пикселей; высота: 200 пикселей; переполнение: скрыто; фон: #FFFFFF; граница: 1px solid # 000000; }
"Переполнение: скрыто;" останавливает расширение карты по ширине или высоте, если содержимое превышает размер. Вы также можете определить размер и цвет шрифта. Например, если вы хотите, чтобы во всем использовался темно-серый шрифт Times New Roman размером 14 пунктов, ваш идентификатор будет выглядеть так:
div # vcard {ширина: 400 пикселей; высота: 200 пикселей; переполнение: скрыто; фон: #FFFFFF; граница: 1px solid # 000000; семейство шрифтов: «Times New Roman»; размер шрифта: 14pt; цвет: # 3B3131; }
4
Сделайте свое имя больше и заметнее, добавив элемент div # vcard h1; это изменяет только тег H1 в вашем div vCard. Если вы хотите использовать шрифт размером 22 пункта и добавить небольшую серую тень, ваш CSS будет выглядеть так:
div # vcard h1 {размер шрифта: 22pt; тень текста: 1px 1px #CCCCCC; }
Элемент text-shadow определяется смещением по оси X, смещением по оси Y и цветом. Если вам нужна слегка размытая тень, вы должны добавить третье значение в пикселях, чтобы определить размытие, например
тень текста: 1px 1px 4px #CCCCCC;
5
Добавьте любые другие визуальные или декоративные элементы, чтобы выделить свой элемент vCard. Вы можете добавлять изображения, изменять высоту строки и выравнивание абзацев, изменять цвета - не бойтесь! Чем более привлекательным будет ваш дизайн, тем больше он будет выделяться.
6
Проверьте ссылку для скачивания vCard на своем веб-сайте, чтобы убедиться, что ссылка верна.
