VCard е цифрова визитна картичка, предназначена да бъде интерпретирана от вашия пощенски клиент или други програми, които импортират данни за контакти, като Outlook, Thunderbird или Address Book. Включвайки vCard на вашия уебсайт, вие улеснявате посетителите да изтеглят вашата информация и лесно да се свързват с вас в бъдеще. VCard обаче няма визуален компонент, така че създаването на страница за него е изцяло по ваша преценка. Можете да отидете толкова диви или толкова занижени, колкото искате. Ако просто искате основен външен вид, имитиращ облика на традиционната визитка, можете да направите това с div елемент и някакъв прост CSS стил.
1
Качете вашия vCard файл на вашия уебсайт. Уверете се, че vCard съдържа само професионални данни, които Ви е удобно да разпространявате онлайн.
2
Създайте елемента div, който искате да представлява вашата визитка. Дайте му уникален идентификационен номер, като „vcard“, и попълнете данните, които искате да покажете на картата. Основната карта може да включва вашето име, уебсайт и имейл адрес. Можете също да направите връзка към вашата страница във Facebook, вашия акаунт в Twitter или други уебсайтове за социални мрежи. Не забравяйте да включите линк за изтегляне на вашата vCard. Основният div може да изглежда по следния начин:
(555) 555-5555
//www.yourwebsite.com
Изтеглете vCard
3
Добавете идентификатора на vcard във вашата таблица със стилове, за да промените начина, по който се появява div. Ако искате сравнително голяма презентация на карта, използваща бял фон и черна граница, идентификаторът може да изглежда по следния начин:
div # vcard {ширина: 400px; височина: 200px; преливане: скрито; фон: #FFFFFF; граница: 1px плътен # 000000; }
„Преливане: скрито;“ спира картата да се разширява по ширина или височина, ако съдържанието надвишава размера. Можете също така да определите размера и цвета на шрифта. Например, ако искате всичко да използва тъмносив шрифт Times New Roman в 14 точка, вашият идентификатор ще изглежда така:
div # vcard {ширина: 400px; височина: 200px; преливане: скрито; фон: #FFFFFF; граница: 1px плътен # 000000; семейство шрифтове: 'Times New Roman'; размер на шрифта: 14pt; цвят: # 3B3131; }
4
Направете името си по-голямо и по-видно, като добавите елемента div # vcard h1; това променя само маркера H1 във вашия vCard div. Ако искате да използвате шрифт с 22 точки и да добавите малка сива сянка, вашият CSS ще изглежда така:
div # vcard h1 {размер на шрифта: 22pt; text-shadow: 1px 1px #CCCCCC; }
Елементът text-shadow се определя от изместването на оста x, оста на оста y и цвета. Ако искате леко размазана сянка, бихте добавили трета стойност в пиксели, за да определите размазването, напр.
text-shadow: 1px 1px 4px #CCCCCC;
5
Добавете всякакви други визуални или декоративни елементи, които искате да изпъкнат във вашия vCard елемент. Можете да добавяте изображения, да променяте височината на реда и подравняването на вашите параграфи, да променяте цветовете - да се развихрите! Колкото по-привлекателен е вашият дизайн, толкова повече той ще се откроява.
6
Тествайте връзката си за изтегляне на vCard на вашия уебсайт, за да сте сигурни, че връзката е точна.
