استخدام السمات المخصصة لتمكين ميزات المصمم في رسائل البريد الإلكتروني والصفحات والنماذج

مقالة
10/09/2023

يوفر مصممو المحتوى كلاًّ من محرر رسومي ومحرر رموز HTML. وHTML الذي يقوم المصممون بإنشائه غير متوافق مع أي معالج لـ HTML، ولكنهم يدعمون أيضًا بعض السمات المخصصة التي تدعم عناصر تصميم السحب والإفلات وإعدادات النمط العام التي يوفرها المحرر الرسومي. تستفيد قوالب الصفحات وقوالب الرسائل الافتراضية المتوفرة مع Dynamics 365 Customer Insights - Journeys من هذه السمات المخصصة لتسهيل تخصيصها بطرق محددة. كما يمكنك الاستفادة من هذه السمات المخصصة عند تصميم قوالبك الخاصة.

تلميح

لا تقدم Microsoft دعمًا لملفات HTML المخصصة في رسائل البريد الإلكتروني.

ملخص العلامات والسمات

يوفر الجدول التالي مرجعًا سريعًا للسمات المخصصة وعلامات التعريف الموضحة في هذا الموضوع.

السمة المخصصة	الوصف
`<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">`	في حالة وجود هذه العلامة في `<head>` لمستندك، فستوفر علامة التبويب المصمم ميزات السحب والإفلات. أما في حالة عدم وجودها، توفر علامة التبويب المصمم محرر الصفحة الكاملة المبسط. المزيد من المعلومات: إظهار مربع الأدوات وتمكين التحرير بالسحب والإفلات
`<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">`	عند وجود هذه العلامة في `<head>` للمستند الخاص بك، سوف تتم إضافة الخطوط المدرجة في <القائمة الخط> (مفصولة بفاصلة منقوطة) إلى قائمة الخط في شريط أدوات التنسيق لعناصر النص. المزيد من المعلومات: إضافة خطوط جديدة إلى شريط أدوات عنصر النص
`<div data-container="true"> … </div>`	وضع علامات البدء والانتهاء لحاوية حيث يستطيع المستخدمون سحب عناصر التصميم وإفلاتها. المزيد من المعلومات: إنشاء حاوية حيث يستطيع المستخدمون إضافة عناصر التصميم
`<div data-editorblocktype="<element-type>"> … </div>`	وضع علامتي بدء وانتهاء عنصر التصميم. تحدد قيمة السمة نوع العنصر (النص، والصور، والزر، وما إلى ذلك). تدعم بعض عناصر التصميم سمات إضافية هنا. المزيد من المعلومات: تحديد عناصر التصميم وتأمين العناصر في طريقة عرض المصمم
`<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">`	تحدد هذه العلامة إعداد النمط على مستوى المستند الذي يستطيع المستخدمون تحريره باستخدام علامة التبويب مصمم>أنماط. المزيد من المعلومات: إضافة الإعدادات إلى علامة التبويب أنماط
`/* @<tag-name> / … / @<tag-name> */`	استخدم تعليقات ورقة الأنماط CSS مثل هذه للإحاطة بقيمة CSS المُراد التحكم فيها بواسطة إعداد نمط، حيث يكون <tag-name> هو قيمة سمة الاسم لعلامة التعريف التي أنشأت الإعداد. المزيد من المعلومات: إضافة تعليقات CSS لتنفيذ إعدادات الأنماط في الرأس
`property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"`	ضع هذه السمة في أي علامة HTML لوضع سمة بقيمة يتم التحكم فيها بواسطة إعداد نمط، حيث تكون <attr> هي اسم السمة المُراد إنشاؤها ويكون <tag-name> هو قيمة سمة `name` لعلامة التعريف التي أنشأت الإعداد. المزيد من المعلومات: إضافة سمات مرجع الخاصية لتنفيذ إعدادات الأنماط في النص

توفر الأقسام المتبقية في هذا الموضوع مزيدًا من المعلومات حول كيفية استخدام كل ميزة من الميزات الملخصة في الجدول.

إظهار مربع الأدوات وتمكين التحرير بالسحب والإفلات

يمكنك لصق HTML الذي تم تطويره في أي أداة جهة خارجية مباشرةً في علامة التبويب HTML بالمصمم لبدء إنشاء تصميم بسرعة كبيرة جدًا. ومع ذلك، عند قيامك بذلك، ستظهر علامة التبويب المصمم كمحرر نص منسق واحد يوفر شريط أدوات تنسيق النص، وتعرض جميع الصور والارتباطات والأنماط المضمنة في HTML لديك، ولكنها لا توفر بخلاف ذلك علامات التبويب مربع الأدوات أو الخصائص أو الأنماط أو أي وظيفة سحب وإفلات (تُسمى أحيانًا طريقة عرض المصمم المبسطة هذه باسم محرر الصفحة الكاملة). ومع ذلك، يمكنك تمكين وظيفة السحب والإفلات لأي تصميم تم لصقه عن طريق إضافة علامة التعريف التالية إلى قسم <head> بمستندك:

<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">

تعرض الصورة التالية نفس التصميم في وضع تحرير الصفحة الكاملة (على الجانب الأيسر) ووضع السحب والإفلات (على الجانب الأيمن). والفرق الوحيد هو أن التصميم الموجود على الجانب الأيمن يشتمل على علامة التعريف، لذا يتم تمكين السحب والإفلات، ويتم عرض اللوحة الجانبية.

محرر الصفحة الكاملة مقابل محرر السحب والإفلات.

‏‫ملاحظة‬

عند استخدام محرر الصفحة الكاملة، لا يزال بإمكانك تحديد النص وتحريره وتنميطه باستخدام شريط أدوات تنسيق النص (المعروض)، ويمكنك أيضًا النقر نقرًا مزدوجًا فوق الصور والارتباطات وعناصر أخرى لتعيين خصائصها باستخدام مربع حوار نافذة منبثقة. يتضمن أيضًا شريط الأدوات زر مساعدة التحرير لإضافة محتوى ديناميكي، مثل قيم الحقول المستمدة من سجل جهة اتصال كل مستلم.‬

إنشاء حاوية حيث يستطيع المستخدمون إضافة عناصر التصميم

في علامة التبويب المصمم، بإمكان المستخدمين تحرير محتوى مضمن في عنصر تصميم فقط، ويمكنهم فقط سحب عناصر تصميم جديدة إلى أجزاء المستند تلك التي تم إعدادها كـ حاويات بيانات. وبالتالي، يمكنك إنشاء قوالب حيث تكون بعض النواحي (خارج الحاويات) مؤمنة للتحرير على علامة التبويب تصميم، بينما ستقبل نواحٍ أخرى (خارج الحاويات المؤمنة) عمليات التحرير والمحتوى المسحوب.

استخدم العلامات <div> التي تتضمن السمة data-container="true" لإنشاء حاويات البيانات، مثل:

<table aria-role="presentation">
    <tbody><tr>
        <td>
            LOCKED
        </td>
        <td>
            <div data-container="true">
                <!-- DRAG HERE -->
            </div>
        </td>
    </tr>
</tbody></table>

أي نص أو علامات HTML متداخلة ضمن زوج علامات div لـ data-container، وليس جزءًا في عنصر تصميم، سيُنشئ منطقة غير قابلة للسحب وغير قابلة للتحرير بين منطقتين قابلتين للسحب. على سبيل المثال:

<div data-container="true">
    <!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>

‏‫ملاحظة‬

عند تمكين محرر الصفحة الكاملة، يتم تعطيل جميع ميزات السحب والإفلات، ويمكنك تحرير كل المحتوى الموجود في علامة تبويب المصمم، بما في ذلك المحتوى الموجود خارج علامات div لـ data-container (التي ليس لها أي تأثير في محرر الصفحة الكاملة).

تأمين حاوية في طريقة عرض المصمم

يمكنك تأمين حاوية لجعل كامل محتوياتها للقراءة فقط على علامة تبويب المصمم. إذا تضمنت حاوية مؤمنة عناصر تصميم، فستبقى جميع محتويات وإعدادات هذه العناصر مؤمنة، ولن تظهر لها علامة التبويب خصائص إطلاقًا، حتى لو حددتها.

يمكنك استخدام ميزة تأمين الحاوية لتأمين حاوية بعد أن تنتهي من إضافة وتكوين مكونات التصميم لها.

لتأمين حاوية، أضف السمة data-locked="hard" إلى علامة الحاوية، على الشكل التالي:

<div data-container="true" data-locked="hard">
    <!-- All elements and content here are locked, with no properties shown -->
</div>

‏‫ملاحظة‬

يمكنك أيضًا تأمين المحتوى على مستوى عنصر التصميم. إذا تم تأمين المحتوى على مستوى الحاوية، فسيبطل هذا الإعداد عندئذٍ حالة تأمين/إلغاء تأمين جميع عناصر التصميم داخل هذا الحاوية. المزيد من المعلومات: تأمين العناصر في طريقة عرض المصمم

لتنفيذ تأمين الحاوية بشكل أفضل، يمكنك تقييد الوصول إلى علامة التبويب HTML، مما يمنع مستخدمين معينين من الوصول إلى التعليمات البرمجية (حيث يمكنهم اختراق هذا الإعداد). المزيد من المعلومات: التحكم في الوصول إلى ميزات المصمم

تحديد عناصر التصميم

في كل مرة تقوم فيها بإضافة عنصر تصميم باستخدام علامة تبويب المصمم، يقوم المحرر بإدراج زوج من علامات <div> لوضع علامة على بدء العنصر وانتهائه، ويُنشئ أي علامات HTML مطلوبة لعرض العنصر كما هو محدد في إعداداته في علامة التبويب خصائص.

يتم تمييز عناصر التصميم بعلامات <div> التي تتضمن سمة النموذج data-editorblocktype="<element-type>"، حيث تحدد قيمة هذه السمة نوع العنصر. على سبيل المثال، تُنشئ علامة <div> التالية عنصر نص:

<div data-editorblocktype="Text">
    ...
    <!-- Don't edit the element content here -->
    ...
</div>

يسرد الجدول التالي القيم المتوفرة لسمة data-editorblocktype.

اسم عنصر التصميم	نوع العنصر	قيمة سمة `data-editorblocktype`
عنصر النص	عنصر التصميم الشائع	Text
عنصر الصورة	عنصر التصميم الشائع	Image
عنصر التقسيم	عنصر التصميم الشائع	Divider
عنصر الزر	عنصر التصميم الشائع	الزر
عنصر كتلة محتوى	عنصر التصميم الشائع	المحتوى (يتضمن أيضًا عنصر التصميم من هذا النوع سمة `data-block-datatype="<block-type>"`، التي تعرّف عن نوع كتلة المحتوى التي ينتسب إليها، حيث <block-type> له قيمة `text` أو `image`.)
عنصر صفحة التسويق	البريد الإلكتروني	صفحة التسويق
عنصر الحدث	البريد الإلكتروني	الحدث
عنصر الاستطلاع	البريد الإلكتروني	الاستطلاع
عنصر نموذج	النموذج	FormBlock
عنصر الحقل	محتوى النموذج	Field -<field-name>، على سبيل المثال: Field-email
عنصر قائمة الاشتراك	محتوى النموذج	SubscriptionListBlock
عنصر إعادة توجيه إلى صديق	محتوى النموذج	ForwardToFriendBlock
عنصر عدم السماح برسائل البريد الإلكتروني‬ وعنصر تذكرني	محتوى النموذج	Field-checkbox (يُنشئ كل عنصر من هذه العناصر خانات اختيار ويتم تمييزها بواسطة إعداداتها الداخلية بخلاف ذلك.)
عنصر الزر إرسال	محتوى النموذج	SubmitButtonBlock
عنصر الزر إعادة تعيين	محتوى النموذج	ResetButtonBlock
عنصر Captcha	محتوى النموذج	CaptchaBlock

للاطلاع على مزيد من المعلومات حول كل عنصر من عناصر التصميم هذه، راجع مرجع عناصر التصميم.

هام

عند العمل في علامة التبويب HTML، يجب عليك تجنب تحرير أي شيء من المحتوى بين علامات <div> لعناصر التصميم لأن نتائج القيام بذلك قد تكون غير متوقعة، ومن المحتمل أن تتم الكتابة فوق تحريراتك بواسطة المصمم على أي حال. وبدلاً من ذلك، استخدم علامة التبويب المصمم لإدارة محتوى عنصر التصميم وخصائصه.

تأمين العناصر في طريقة عرض المصمم

يمكنك تأمين محتوى وخصائص أي عنصر تصميم عن طريق إضافة السمة التالية إلى علامة <div> للفتح:

data-protected="true"

على سبيل المثال:

<div data-editorblocktype="Divider" data-protected="true">
    …
        <!-- Don't edit the element content here -->
    …
</div>

عندما توضع علامة على عنصر تصميم للإشارة إلى أنه محمي، سيتعذر على المستخدمين العاملين على علامة تبويب المصمم لصفحة أو رسالة بريد إلكتروني تحرير محتوى العنصر أو خصائصه. تكون هذه السمة مضمنة دومًا لعنصر كتلة المحتوى، ولكن يمكن إضافتها إلى أي نوع من عناصر التصميم لحمايته. ويظهر أي عنصر تصميم يتضمن هذه السمة على شكل مظلل على علامة تبويب HTML للإشارة إلى أنه محمي، ولكن يمكنك مع ذلك تحريره عند الإصرار على ذلك. عيّن هذه السمة إلى "false" (أو يمكنك إزالتها فقط) لإلغاء حماية عنصر التصميم.

‏‫ملاحظة‬

يمكنك أيضًا تأمين المحتوى على مستوى الحاوية، مما يؤدي إلى إبطال حالة تأمين/إلغاء تأمين جميع عناصر التصميم داخل هذا الحاوية. المزيد من المعلومات: تأمين حاوية في طريقة عرض المصمم

لتنفيذ تأمين المحتوى بشكل أفضل، يمكنك تقييد الوصول إلى علامة التبويب HTML، مما يمنع مستخدمين معينين من الوصول إلى التعليمات البرمجية (حيث يمكنهم اختراق هذا الإعداد). المزيد من المعلومات: التحكم في الوصول إلى ميزات المصمم

استيراد HTML التي تم إنشاؤها خارجيًا إلى المصمم

يمكنك استخدام اي أداه تريد إنشاء تخطيط HTML الاولي والمحتوي لبريد الكتروني تسويقي أوصفحة أو نموذج. عندما يكون HTML الخاص بك جاهزًا، الصقه فقط في المصمم ذي الصلة ثم أضف أي من ميزات Dynamics 365 Customer Insights - Journeys التي تحتاجها على النحو الموضح في الأقسام الفرعية التالية.

استيراد التعليمات البرمجية ل HTML الخاصة بك

لإحضار HTML التي تم إنشاؤها خارجيًا إلى المصمم، أبدا بالقيام بما يلي:

إنشاء بريد الكتروني تسويقي جديد أوصفحة أو نموذج في Dynamics 365 Customer Insights - Journeys.
انتقل إلى تصميم>تبويب HTML من المصمم.
امسح كافة المحتويات من علامة التبويب HTML وألصقها في HTML الذي قمت بإنشاءه خارجيًا.
انتقل إلى تصميم>تبويب مصمم من المصمم وافحص التصميم الخاص بك.
إذا كنت تعمل مع بريد الكتروني تسويقي، فتأكد من استخدام مساعدة التحرير لوضع جميع المحتويات والروابط المطلوبة (بما في ذلك رابط مركز الاشتراك وعنوان المرسل الفعلي الخاص بك).

تلميح

لأنك قمت بلصقها في HTML خارجي، ربما لا يتضمن التصميم الخاص بك اي تعليمات برمجيه خاصه بـ Dynamics 365 Customer Insights - Journeys، وبالتالي يعرض المصمم محرر الصفحة بالكامل، والذي يوفر ميزات لتنسيق النص الأساسي، وتنسيق الصورة، و (للبريد الكتروني) مساعده-التحرير لإضافه المحتوي الديناميكي. لمزيد من المعلومات حول كيفيه العمل مع محرر الصفحة الكاملة، راجع إظهار مربع الأدوات ووتمكين التحرير بالسحب والإفلات. إذا كان محرر الصفحة الكاملة يوفر جميع الوظائف التي تحتاج اليها، ثم استخدامها لصقل التصميم الخاص بك ومن ثم انتقل إلى وضع العرض المباشر معها كالمعتاد. إذا كنت تفضل استخدام محرر السحب والإفلات لضبط التصميم الخاص بك، راجع المقطع التالي للحصول على معلومات حول كيفيه تمكينه.

تمكين محرر السحب والإفلات بعد الاستيراد

إذا كنت ترغب في تمكين محرر السحب والإفلات كامل الميزات و/أو إضافة عناصر التصميم المتقدمة اثناء العمل في طريقه العرض المصمم ، يمكنك بسهوله القيام بذلك عن طريق مزيد من تحرير التعليمات البرمجية المستوردة HTML كما يلي:

العودة إلى تصميم>تبويب HTML من المصمم.
تمكين محرر السحب والإفلات بإضافة العلامة الوصفية المطلوبة إلى مقطع <رأس>من المستند الخاص بك كما هو موضح في إظهار مربع الأدوات وتمكين تحرير السحب والإفلات.
قم بما يلي حسب الحاجة اثناء العمل تصميم>تبويب HTML :
- في كل جزء من التصميم الخاص بك حيث كنت ترغب في ان تكون قادرا على سحب عنصر تصميم واحد أو أكثر ، إضافة تعليمات برمجيه لإنشاء حاويه بيانات كما هو موضح في إنشاء حاويهحيث يمكن للمستخدمين إضافة عناصر التصميم.
- إذا كنت تفضل وضع عناصر التصميم مباشره في التعليمات البرمجية الخاصة بك دون استخدام السحب والإفلات، يمكنك إدخالالتعليمات البرمجية المطلوبة مباشره في تصميم>تبويب HTML. العناصر التي تضيفها بهذه الطريقة لن تدعم السحب والإفلات، ولكنها توفير إعدادات في لوحه الخصائص من تصميم>تبويب مصمم . يمكنك فقط وضع عناصر النص والصورة والمقسم والأزرار باستخدام هذه التقنية (إنشاء حاويات واستخدام السحب والإفلات لأنواع أخرى من عناصر التصميم). راجع الجدول بعد هذا الاجراء لبنيه HTML المطلوبة لإنشاء كل من هذه العناصر؛ نسخ/لصق هذا الرمز مباشره من الجدول حسب الحاجة.
يمكنك الآن الانتقال إلى تصميم>تبويب مصمم وسحب عناصر التصميم إلى كل حاويه قمت بإعدادها ثم استخدم لوحة الخصائص لتكوين كل عنصر تصميم قمت بسحبه أو لصقه مباشره في التعليمات البرمجية الخاصة بك.

نوع عنصر التصميم	لصق هذه التعليمه البرمجية	ملاحظات
Text	`<div data-editorblocktype="Text"><p> Enter your text here</p></div>`	يمكنك إدخال محتوي HTML بين العلامات `<p>` مباشرةً هنا، أو الانتقال إلى المصمم لاستخدام محرر النص المنسق للقيام بذلك.
Image	`<div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div>`	ان أسهل طريقه لتغيير مصدر الصورة و/أو رابط الصورة هي الانتقال إلى المصمم واستخدام لوحة الخصائص . ولكن يمكنك أيضا تحرير السمات التالية مباشره في HTML: تعيين ارتباط الصورة و/أو العنوان عن طريق تحرير سمات href و/أو عنوان `<a>` العنصر. لإزالة الارتباط من الصورة، امسح محتوي `href` و `title` من عنصر `<a>` وسماته (ولكن احتفظ بالسمات وعلامات الاقتباس، مثل `href=""`). تعيين مصدر الصورة عن طريق تحرير سمه src لعنصر `<img>` . لا تقم بتحرير اي من التعليمات البرمجية الأخرى.
Divider	<div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span> </span></p></td></tr></tbody></table></div></div>	لا تقم بتحرير اي من هذه التعليمات البرمجية مباشره في محرر HTML. بدلاً من ذلك, انتقل إلى مصمم واستخدم لوحة الخصائص .
Button	`<div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"`	لا تقم بتحرير اي من هذه التعليمات البرمجية مباشره في محرر HTML. بدلاً من ذلك, انتقل إلى مصمم واستخدم لوحة الخصائص .

للاطلاع على المزيد من المعلومات حول كيفية ظهور عناصر التصميم في التعليمة البرمجية، راجع ‏‫تحديد عناصر التصميم‬.

توفر عناصر النص شريط أدوات تنسيق منبثق في المصمم يتضمن قائمة لتطبيق خط على النص المُحدد.

لإضافة خطوط جديدة لمُحدد الخط هذا، قم بإضافة علامة <meta>التي تستخدم النموذج التالي إلى <head> للمستند:

<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">

حيث تكون <font-list> هي قائمة مفصولة بفاصلة منقوطة لأسماء الخطوط.

إضافة الإعدادات إلى علامة التبويب أنماط

هناك ميزة واحدة مفيدة للقوالب الجاهزة ألا وهي أنها توفر إعدادات الأنماط العمومية في علامة التبويب أنماط، التي تتيح للمستخدمين إمكانية ضبط مجموعة الخطوط، ولوحة الألوان، والإعدادات العمومية الأخرى الممكَّنة للقالب بسرعة. لا يحتوي كل قالب إلا على إعدادات الأنماط تلك التي تتناسب مع هذا التصميم المحدد، ويمكنك كذلك تصميم القوالب التي توفر إعدادات الأنماط الصحيحة فقط لك وللمستخدمين لديك.

علامة التبويب المصمم > الأنماط.

لإضافة إعداد إلى علامة التبويب أنماط، يجب عليك القيام بما يلي:

أضف علامة <meta> إلى <head> لمستندك لإنشاء الإعداد.
قم بإعداد الأنماط و/أو علامات HTML التي تستخدم الإعدادات التي تم إنشاؤها بواسطة علامة التعريف.

توضح الأقسام الفرعية التالية كيفية القيام بكل أمر من هذه الأمور.

إضافة علامة تعريف لإنشاء الإعداد

تتخذ علامة <meta> المطلوبة الشكل التالي:

<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">

حيث:

<الاسم> يحدد علامة التعريف، التي يجب عليك أيضًا الإشارة إليها في الأنماط وعلامات HTML التي سيتم فيها تطبيق الإعداد.
<initial-value> عبارة عن قيمة افتراضية مناسبة للنمط.
<data-type> يحدد نوع القيمة التي سيوفرها المستخدمون. يؤثر هذا الإعداد على نوع عنصر التحكم الموجود في علامة التبويب أنماط. يجب عليك استخدام إحدى القيم المدرجة في الجدول التالي.
<label> تحدد النص المُراد عرضه في علامة التبويب أنماط للإعداد.

القيمة Datatype	الوصف
color	تعيين لون باستخدام قيم العلامات التجزئة مثل 000# أو 1a32bf#. إنشاء عنصر تحكم منتقي ألوان في علامة التبويب أنماط.
font	تعيين اسم مجموعة خطوط. يمكنك أيضًا تعيين مكدسات الخطوط عن طريق استخدام قائمة أسماء خطوط مفصولة بفاصلة حسب التفضيل. إنشاء حقل إدخال بسيط في علامة التبويب أنماط.
number	تعيين قيمة رقمية بلا وحدة (استخدم النص للسماح بوحدات مثل px أو em لكي يتم تحديدها مع القيمة). إنشاء حقل إدخال بزري السهمين لأعلى/لأسفل يمكن استخدامهما أيضًا لزيادة/إنقاص القيمة الحالية في علامة التبويب أنماط.
picture	تعيين مصدر صورة (كعنوان URL). إنشاء حقل إدخال بسيط في علامة التبويب أنماط.
text	تعيين قيمة يمكنها أن تتضمن كلاًّ من النص والأرقام. استخدم أيضًا نوع البيانات هذا للقيم الرقمية التي قد تتضمن وحدة (مثل px أو em). إنشاء حقل إدخال بسيط في علامة التبويب أنماط.

‏‫ملاحظة‬

قد تظهر التسمية المعروضة في علامة التبويب أنماط في أقواس مربعة، مثل "[النمط الخاص بي]". تشير الأقواس المربعة إلى أن النص الجاري عرضه لا يشتمل على ترجمة متوفرة. إذا اخترت قيمة مدعومة بواسطة أي قالب من القوالب الجاهزة (مثل "اللون 1")، فستتوفر ترجمة، وبالتالي لن تظهر الأقواس المربعة.

‏‫ملاحظة‬

لا يظهر إعداد النمط الذي تم إنشاؤه باستخدام علامة <meta>، كما هو موضح هنا، إلا في علامة التبويب أنماط عندما يُشار أيضًا إلى هذا الإعداد في علامة HTML أو نمط فعلي واحد على الأقل، كما هو موضح في الأقسام التالية.

إضافة تعليقات CSS لتنفيذ إعدادات الأنماط في الرأس

يمكن تطبيق الإعدادات التي تم إجراؤها في علامة التبويب أنماط على أنماط CSS التي تم إنشاؤها في <head> لمستند HTML عن طريق إحاطة قيمة CSS بتعليقين من تعليقات CSS يحتويان على قيمة سمة name لعلامة تعريف xrm/designer/setting المطابقة. يتخذ زوج تعليقات CSS الشكل التالي:

/* @<tag-name> */ <value> /* @<tag-name> */

حيث:

<tag-name> عبارة عن سمة الاسم لعلامة التعريف xrm/designer/setting التي أنشأت إعداد علامة التبويب أنماط الأنماط ذات الصلة.
<value> عبارة عن قيمة سيتم استبدالها عندما يحرر مستخدم إعداد علامة التبويب أنماط ذات الصلة.

هام

لا يمكنك استخدام هذه الأزواج من تعليقات CSS سوى في الأنماط والفئات المحددة في علامات <style> في قسم <head> . علاوةً على ذلك، يجب وجود مجموعة واحدة من علامات <style> ، مع إعداد جميع أنماط CSS هناك.

وإليك مثال يمكنك فيه مشاهدة علامة تعريف xrm/designer/setting تُنشئ عنصر تحكم منتقي ألوان يُسمى "اللون 1" في التبويب أنماط . ويستخدم نمط CSS هذا الإعداد بعد ذلك لإنشاء لون النص لعناصر <h1> .

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
    </style>
</head>

إضافة سمات مرجع الخاصية لتنفيذ إعدادات الأنماط في النص

يمكن استخدام الإعدادات التي تم إجراؤها في علامة التبويب أنماط كقيم سمات لأي علامة HTML في <body> لمستندك عن طريق إضافة سمة بالشكل التالي إلى كل علامة ذات صلة:

property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"

حيث:

<attr> عبارة عن اسم السمة المُراد إنشاؤها.
<tag-name> عبارة عن قيمة سمة name لعلامة التعريف التي أنشأت الإعداد.
يجب فصل السمات المتعددة، إذا لزم الأمر، بفاصلة منقوطة في سمة مرجع خاصية واحدة.

وإليك مثال يمكنك فيه مشاهدة علامات تعريف xrm/designer/setting التي تُنشئ إعدادين للتحكم في صورة (شعار) بطل في المستند، باستخدام عنصري تحكم يُسميان "صورة البطل" و"ارتفاع صورة البطل" في علامة التبويب أنماط. ويتم استخدام خاصية property-reference بعد ذلك في علامة <img> لتنفيذ تلك الإعدادات.

<head>
    <meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
    <meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
    <img property-reference="src:@hero-image;height:@hero-image-height;">
</body>

ولذلك، في هذا المثال، قد تحل علامة <img> شيئًا مثل:

<img src="picture.jpg" height="100px">

مشاركة عبر

استخدام السمات المخصصة لتمكين ميزات المصمم في رسائل البريد الإلكتروني والصفحات والنماذج

ملخص العلامات والسمات

إظهار مربع الأدوات وتمكين التحرير بالسحب والإفلات

إنشاء حاوية حيث يستطيع المستخدمون إضافة عناصر التصميم

تأمين حاوية في طريقة عرض المصمم

تحديد عناصر التصميم

تأمين العناصر في طريقة عرض المصمم

استيراد HTML التي تم إنشاؤها خارجيًا إلى المصمم

استيراد التعليمات البرمجية ل HTML الخاصة بك

تمكين محرر السحب والإفلات بعد الاستيراد

إضافة الإعدادات إلى علامة التبويب أنماط

إضافة علامة تعريف لإنشاء الإعداد

إضافة تعليقات CSS لتنفيذ إعدادات الأنماط في الرأس

إضافة سمات مرجع الخاصية لتنفيذ إعدادات الأنماط في النص

الموارد الإضافية

مشاركة عبر

استخدام السمات المخصصة لتمكين ميزات المصمم في رسائل البريد الإلكتروني والصفحات والنماذج

ملخص العلامات والسمات

إظهار مربع الأدوات وتمكين التحرير بالسحب والإفلات

إنشاء حاوية حيث يستطيع المستخدمون إضافة عناصر التصميم

تأمين حاوية في طريقة عرض المصمم

تحديد عناصر التصميم

تأمين العناصر في طريقة عرض المصمم

استيراد HTML التي تم إنشاؤها خارجيًا إلى المصمم

استيراد التعليمات البرمجية ل HTML الخاصة بك

تمكين محرر السحب والإفلات بعد الاستيراد

إضافة خطوط جديدة إلى شريط أدوات عنصر النص

إضافة الإعدادات إلى علامة التبويب أنماط

إضافة علامة تعريف لإنشاء الإعداد

إضافة تعليقات CSS لتنفيذ إعدادات الأنماط في الرأس

إضافة سمات مرجع الخاصية لتنفيذ إعدادات الأنماط في النص

الموارد الإضافية