วิธีการนำเสนอ Vcard ในเว็บไซต์
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 ปรากฏ หากคุณต้องการนำเสนอการ์ดที่ค่อนข้างใหญ่โดยใช้พื้นหลังสีขาวและขอบสีดำ ID อาจมีลักษณะดังนี้:
div # vcard {ความกว้าง: 400px; ความสูง: 200px; ล้น: ซ่อน; พื้นหลัง: #FFFFFF; เส้นขอบ: 1px solid # 000000; }
"ล้น: ซ่อน;" หยุดการ์ดไม่ให้ขยายความกว้างหรือความสูงหากเนื้อหาเกินขนาด คุณยังสามารถกำหนดขนาดตัวอักษรและสี ตัวอย่างเช่นหากคุณต้องการให้ทุกอย่างใช้แบบอักษร Times New Roman สีเทาเข้มที่จุด 14 ID ของคุณจะมีลักษณะดังนี้:
div # vcard {ความกว้าง: 400px; ความสูง: 200px; ล้น: ซ่อน; พื้นหลัง: #FFFFFF; เส้นขอบ: 1px solid # 000000; แบบอักษรครอบครัว: 'Times New Roman'; ขนาดตัวอักษร: 14pt; สี: # 3B3131; }
4
ทำให้ชื่อของคุณใหญ่ขึ้นและโดดเด่นยิ่งขึ้นโดยการเพิ่มองค์ประกอบ div # vcard h1 สิ่งนี้จะเปลี่ยนเฉพาะแท็ก H1 ภายใน vCard div ของคุณ หากคุณต้องการใช้แบบอักษร 22 จุดและเพิ่มเงาสีเทาขนาดเล็ก CSS ของคุณจะมีลักษณะดังนี้:
div # vcard h1 {ขนาดตัวอักษร: 22pt; ข้อความเงา: 1px 1px #CCCCCC; }
องค์ประกอบข้อความเงาถูกกำหนดโดยออฟเซ็ตแกน x ออฟเซ็ตแกน y และสี หากคุณต้องการเงาที่เบลอเล็กน้อยคุณต้องเพิ่มค่าที่สามเป็นพิกเซลเพื่อกำหนดความเบลอเช่น
ข้อความเงา: 1px 1px 4px #CCCCCC;
5
เพิ่มองค์ประกอบภาพหรือการตกแต่งอื่น ๆ ที่คุณต้องการทำให้องค์ประกอบ vCard ของคุณโดดเด่น คุณสามารถเพิ่มรูปภาพเปลี่ยนความสูงของเส้นและการจัดตำแหน่งย่อหน้าของคุณปรับเปลี่ยนสีได้! ยิ่งการออกแบบของคุณดึงดูดสายตามากเท่าไหร่การออกแบบก็จะยิ่งโดดเด่นมากขึ้นเท่านั้น
6
ทดสอบลิงค์ดาวน์โหลด vCard บนเว็บไซต์ของคุณเพื่อให้แน่ใจว่าลิงค์นั้นถูกต้อง
