Slik presenterer du et Vcard på et nettsted

Et vCard er et digitalt visittkort designet for å bli tolket av e-postklienten eller andre programmer som importerer kontaktdata, for eksempel Outlook, Thunderbird eller Adressebok. Ved å inkludere et vCard på nettstedet ditt, gjør du det enkelt for besøkende å laste ned informasjonen din og kontakte deg i fremtiden. Imidlertid har et vCard ikke en visuell komponent, så utforming av en side for det er helt etter eget skjønn. Du kan gå så vill eller så undervurdert som du vil. Hvis du bare vil ha et grunnleggende utseende som etterligner utseendet til et tradisjonelt visittkort, kan du gjøre dette med et div-element og en enkel CSS-styling.

1.

Last opp vCard-filen til nettstedet ditt. Pass på at vCard inneholder kun profesjonelle data som du er komfortabel med å distribuere på nettet.

2.

Opprett div-elementet du vil representere visittkortet ditt. Gi den en unik ID, for eksempel "vcard", og fyll ut detaljene du vil vise på kortet. Et grunnleggende kort kan kunne inneholde navn, nettside og e-postadresse. Du kan også koble til Facebook-siden din, Twitter-kontoen din eller andre nettsider for sosiale nettverk. Ikke glem å inkludere en lenke for å laste ned ditt vCard. Den grunnleggende diven kan se slik ut:

Navnet ditt

[email protected]

(555) 555-5555

//www.yourwebsite.com

Last ned vCard

3.

Legg vcard-ID-en til stilarket for å endre hvordan div vises. Hvis du vil ha en relativt stor kortpresentasjon, ved hjelp av en hvit bakgrunn og en svart ramme, kan ID-en se slik ut:

div # vcard {width: 400px; høyde: 200px; overløp: skjult; bakgrunn: #FFFFFF; border: 1px solid # 000000; }

"Overflow: hidden;" stopper kortet fra å utvide i bredde eller høyde hvis innholdet overskrider størrelsen. Du kan også definere skriftstørrelse og farge. Hvis du for eksempel vil ha alt til å bruke en mørk grå Times New Roman-skrift på 14 poeng, vil din ID da se ut som:

div # vcard {width: 400px; høyde: 200px; overløp: skjult; bakgrunn: #FFFFFF; border: 1px solid # 000000; font-familie: 'Times New Roman'; fontstørrelse: 14pt; farge: # 3B3131; }

4.

Gjør navnet ditt større og mer fremtredende ved å legge til div # vcard h1 elementet; Dette endrer bare H1-taggen i vCard div. Hvis du vil bruke 22 punkt skrifttype og legge til en liten grå skygge, ser CSS ut slik:

div # vcard h1 {font-size: 22pt; tekstskygge: 1px 1px #CCCCCC; }

Tekstskyggeelementet er definert av x-aksens forskyvning, y-aksens forskyvning og fargen. Hvis du vil ha en litt sløret skygge, vil du legge til en tredje verdi i piksler for å definere uskarphet, f.eks

tekstskygge: 1px 1px 4px #CCCCCC;

5.

Legg til andre visuelle eller dekorative elementer du vil gjøre vCard-elementet ditt skille ut. Du kan legge til bilder, endre linjens høyde og justering av avsnittene dine, endre farger - gå vill! Jo mer visuelt tiltalende design, desto mer kommer det til å skille seg ut.

6.

Test vCard-nedlastingskoblingen på nettstedet ditt for å sikre at koblingen er nøyaktig.

Tips

  • Det er ingen grunn til at du må holde fast ved det tradisjonelle visittkortet stilen; Jacob Gube av webdesignwebsiden Six Revisions viste flere dynamiske, interessante vCard-nettsider i sin artikkel "30 Imponerende vCard Web Designs."