Sådan præsenterer du et Vcard på et websted

Et vCard er et digitalt visitkort designet til at blive fortolket af din mailklient eller andre programmer, der importerer kontaktdata, som f.eks. Outlook, Thunderbird eller Adressebog. Ved at medtage et vCard på din hjemmeside gør du det nemt for besøgende at downloade dine oplysninger og nemt kontakte dig i fremtiden. Et vCard har dog ikke en visuel komponent, så det er helt til din skøn at designe en side til det. Du kan gå så vildt eller så undervurderet som du vil. Hvis du bare vil have et grundlæggende udseende, der efterligner udseendet af et traditionelt visitkort, kan du gøre det med et div-element og en simpel CSS-styling.

1.

Upload din vCard-fil til dit websted. Sørg for, at vCard kun indeholder professionelle data, som du er komfortabel at distribuere online.

2.

Opret div-elementet, som du vil repræsentere dit visitkort. Giv det et unikt id, f.eks. "Vcard", og udfyld de detaljer, du vil vise på kortet. Et grundlæggende kort kunne kunne indeholde dit navn, websted og e-mail-adresse. Du kan også linke til din Facebook-side, din Twitter-konto eller andre sociale netværkswebsteder. Glem ikke at inkludere et link for at downloade dit vCard. Den grundlæggende div kunne se sådan ud:

Dit navn

[email protected]

(555) 555-5555

//www.yourwebsite.com

Download vCard

3.

Tilføj vcard ID til dit stylesheet for at ændre, hvordan div vises. Hvis du vil have en relativt stor kortpræsentation ved hjælp af en hvid baggrund og en sort ramme, kan ID'en se sådan ud:

div # vcard {width: 400px; højde: 200px; overløb: skjult; baggrund: #FFFFFF; grænse: 1px fast # 000000; }

"Overflow: hidden;" stopper kortet fra at udvide i bredde eller højde, hvis indholdet overskrider størrelsen. Du kan også definere skriftstørrelse og farve. For eksempel, hvis du ville have alt til at bruge en mørkegrå Times New Roman-skrifttype på 14 point, vil dit ID så se ud:

div # vcard {width: 400px; højde: 200px; overløb: skjult; baggrund: #FFFFFF; grænse: 1px fast # 000000; font-familie: 'Times New Roman'; skrifttypestørrelse: 14pt; farve: # 3B3131; }

4.

Gør dit navn større og mere fremtrædende ved at tilføje div # vcard h1 element; Dette ændrer kun H1-mærket i din vCard div. Hvis du ville bruge 22 punkt skrifttype og tilføje en lille grå skygge, vil din CSS se sådan ud:

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

Tekst-skyggeelementet er defineret af x-aksen forskydning, y-aksen forskydning og farven. Hvis du vil have en let sløret skygge, vil du tilføje en tredje værdi i pixels for at definere uskarpheden, f.eks

tekstskygge: 1px 1px 4px #CCCCCC;

5.

Tilføj andre visuelle eller dekorative elementer, du vil gøre dit vCard-element skille sig ud. Du kan tilføje billeder, ændre linjens højde og justering af dine afsnit, ændre farver - gå vildt! Jo mere visuelt tiltalende dit design, desto mere kommer det til at skille sig ud.

6.

Test dit vCard downloadlink på din hjemmeside for at sikre, at linket er korrekt.

Tip

  • Der er ingen grund til at holde fast i det traditionelle visitkort stil; Jacob Gube af webdesignwebstedet Six Revisions viste flere dynamiske, interessante vCard-hjemmesider i sin artikel "30 Impressive vCard Web Designs."