كيفية تقديم Vcard في موقع ويب
تعد vCard بطاقة عمل رقمية مصممة ليتم تفسيرها بواسطة عميل البريد الخاص بك أو برامج أخرى تستورد بيانات جهات الاتصال ، مثل Outlook أو Thunderbird أو دفتر العناوين. من خلال تضمين 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 {width: 400px؛ الارتفاع: 200 بكسل ؛ إخفاء الفائض؛ الخلفية: #FFFFFF ؛ الحدود: 1px صلب # 000000 ؛ }
"إخفاء الفائض؛" توقف البطاقة عن التوسع في العرض أو الارتفاع إذا تجاوز المحتوى الحجم. يمكنك أيضًا تحديد حجم الخط ولونه. على سبيل المثال ، إذا كنت تريد أن يستخدم كل شيء خط Times New Roman الرمادي الداكن عند 14 نقطة ، فسيبدو المعرف الخاص بك كما يلي:
div # vcard {width: 400px؛ الارتفاع: 200 بكسل ؛ إخفاء الفائض؛ الخلفية: #FFFFFF ؛ الحدود: 1px صلب # 000000 ؛ عائلة الخطوط: 'Times New Roman'؛ حجم الخط: 14 نقطة ؛ اللون: # 3B3131 ؛ }
4
اجعل اسمك أكبر وأكثر بروزًا بإضافة عنصر div # vcard h1 ؛ هذا يغير فقط علامة H1 داخل قسم vCard الخاص بك. إذا كنت ترغب في استخدام خط 22 نقطة وإضافة ظل رمادي صغير ، سيبدو CSS الخاص بك كما يلي:
div # vcard h1 {font-size: 22pt؛ ظل النص: 1px 1px #CCCCCC ؛ }
يتم تعريف عنصر ظل النص بإزاحة المحور السيني وإزاحة المحور الصادي واللون. إذا كنت تريد ظلًا ضبابيًا قليلاً ، فيمكنك إضافة قيمة ثالثة بالبكسل لتحديد التمويه ، على سبيل المثال
ظل النص: 1px 1px 4px #CCCCCC ؛
5
أضف أي عناصر مرئية أو زخرفية أخرى تريدها لإبراز عنصر vCard الخاص بك. يمكنك إضافة صور وتغيير ارتفاع السطر ومحاذاة فقراتك وتعديل الألوان - انطلق! كلما كان التصميم الخاص بك أكثر جاذبية من الناحية المرئية ، سيبرز أكثر.
6
اختبر رابط تنزيل vCard الخاص بك على موقع الويب الخاص بك للتأكد من دقة الرابط.
