Menggunakan atribut tersuai untuk mendayakan ciri pereka dalam e-mel, halaman dan borang

Artikel
09/11/2023

Pereka kandungan menyediakan editor grafik dan editor kod HTML. HTML yang mereka hasilkan serasi dengan mana-mana renderer HTML, tetapi mereka juga menyokong beberapa atribut tersuai yang menyokong elemen reka bentuk seret dan lepas dan tetapan gaya umum yang disediakan oleh editor grafik. Templat mesej lalai dan templat halaman yang disediakan dengan Dynamics 365 Customer Insights - Journeys menggunakan atribut tersuai ini untuk memudahkan anda menyesuaikannya dengan cara tertentu. Anda juga boleh menggunakan atribut tersuai ini semasa mereka bentuk templat anda sendiri.

Tip

Microsoft tidak menyediakan sokongan untuk HTML tersuai dalam e-mel.

Ringkasan tag dan atribut

Jadual berikut menyediakan rujukan pantas kepada atribut tersuai dan tag meta yang diterangkan dalam topik ini.

Atribut tersuai	Description
`<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">`	Apabila tag ini terdapat dalam `<head>` dokumen anda, tab Pereka Bentuk akan menyediakan ciri seret dan lepas. Jika tag ini tidak hadir, tab Pereka menyediakan editor halaman penuh yang dipermudahkan. Maklumat lanjut: Tunjukkan kotak alat dan dayakan pengeditan seret dan lepas
`<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">`	Apabila tag ini terdapat dalam `<head>` dokumen anda, fon yang disenaraikan dalam <senarai> fon (dipisahkan koma bertitik) akan ditambahkan pada menu fon dalam bar alat pemformatan untuk unsur teks. Maklumat lanjut: Tambah fon baru pada bar alat unsur teks
`<div data-container="true"> … </div>`	Menandakan permulaan dan penghujung bekas di mana pengguna boleh menyeret dan melepaskan elemen reka bentuk. Maklumat lanjut: Cipta bekas yang pengguna boleh menambah unsur reka bentuk
`<div data-editorblocktype="<element-type>"> … </div>`	Menandakan permulaan dan penghujung elemen reka bentuk. Nilai atribut mengenal pasti jenis elemen yang ada (teks, imej, butang, dan sebagainya). Sesetengah elemen reka bentuk menyokong atribut tambahan di sini. Maklumat lanjut: Kenal pasti unsur reka bentuk dan unsur Kunci dalam pandangan Pereka Bentuk
`<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">`	Tag ini mentakrifkan seting gaya seluruh dokumen yang boleh diedit oleh pengguna menggunakan tab Gaya>Reka Bentuk . Maklumat lanjut: Tambah seting pada tab Gaya
`/* @<tag-name> / … / @<tag-name> */`	Gunakan CSS komen seperti ini untuk mengelilingi nilai yang CSS akan dikawal oleh seting gaya, iaitu <nama> tag ialah nilai atribut nama untuk tag meta yang mewujudkan seting. Maklumat lanjut: Tambah CSS komen untuk melaksanakan seting gaya dalam kepala
`property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"`	Letakkan atribut ini dalam sebarang tag HTML untuk meletakkan atribut dengan nilai yang dikawal oleh seting gaya, di mana <attr> ialah nama atribut yang akan dicipta dan <nama> tag ialah nilai `name` atribut bagi tag meta yang mewujudkan seting. Maklumat lanjut: Tambah atribut rujukan sifat untuk melaksanakan seting gaya dalam isi

Bahagian selebihnya topik ini memberikan lebih banyak maklumat mengenai cara menggunakan setiap ciri yang diringkaskan dalam jadual.

Menunjukkan kotak alat dan mendayakan pengeditan seret dan lepas

Anda boleh menampal HTML yang dibangunkan dalam mana-mana alat pihak ketiga terus ke dalam tab HTML pereka bentuk untuk mula membina reka bentuk dengan cepat. Walau bagaimanapun, apabila anda melakukan ini, tab Pereka Bentuk akan dipaparkan sebagai editor teks kaya tunggal yang menyediakan bar alat pemformatan teks dan menunjukkan semua imej, pautan dan gaya yang disertakan dalam HTML anda, tetapi tidak menyediakan tab Kotak Alat, Sifat atau Gaya atau sebarang fungsi seret dan lepas (pandangan Pereka ringkas ini kadangkala dipanggil editor halaman penuh). Walau bagaimanapun, anda boleh mendayakan kefungsian seret dan lepas untuk sebarang reka bentuk yang ditampal dengan menambah meta tag berikut pada <head> seksyen dokumen anda:

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

Imej berikut menunjukkan reka bentuk yang sama dalam mod edit halaman penuh (kiri) dan mod seret dan lepas (kanan). Satu-satunya perbezaan ialah reka bentuk di sebelah kanan termasuk tag meta, jadi seret dan lepas didayakan, dan panel sisi ditunjukkan.

Editor halaman penuh vs editor drag-and-drop.

Nota

Apabila menggunakan editor halaman penuh, anda masih boleh memilih, mengedit dan menggayakan teks menggunakan bar alat pemformatan teks (ditunjukkan), dan juga boleh klik dua kali pada imej, pautan dan unsur lain untuk mengesetkan sifat mereka menggunakan dialog timbul. Bar alat juga termasuk butang Edit bantuan untuk menambah kandungan dinamik, seperti nilai medan yang diambil daripada rekod kenalan setiap penerima.

Mencipta bekas yang pengguna boleh menambah unsur reka bentuk

Pada tab Pereka Bentuk , pengguna hanya boleh mengedit kandungan yang terkandung dalam unsur reka bentuk dan hanya boleh menyeret unsur reka bentuk baru ke bahagian dokumen yang disediakan sebagai bekas data. Oleh itu, anda boleh mencipta templat di mana sesetengah kawasan (di luar bekas) dikunci untuk mengedit pada tab Reka Bentuk , manakala yang lain (di dalam bekas tidak berkunci) akan menerima pengeditan dan kandungan yang diseret.

Gunakan <div> tag yang termasuk atribut data-container="true" untuk mencipta bekas data, seperti:

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

Sebarang tag teks atau HTML yang disarangkan dalam pasangan div-tag bekas data dan bukan sebahagian daripada unsur reka bentuk, akan mencipta kawasan yang tidak boleh diseret, tidak boleh diedit, antara dua kawasan boleh diseret. Contohnya:

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

Nota

Apabila editor halaman penuh didayakan, semua ciri seret dan lepas dinyahdayakan dan anda boleh mengedit semua kandungan pada tab Pereka Bentuk , termasuk kandungan di luar data-container tag div (yang tidak mempunyai kesan dalam editor halaman penuh).

Mengunci bekas dalam pandangan Pereka Bentuk

Anda boleh mengunci bekas untuk menjadikan semua kandungannya baca sahaja pada tab Pereka Bentuk . Jika bekas yang dikunci mengandungi unsur reka bentuk, maka semua kandungan dan tetapan untuk unsur tersebut akan kekal terkunci dan tab Properties tidak akan ditunjukkan untuknya, walaupun anda memilihnya.

Anda mungkin menggunakan ciri mengunci bekas untuk mengunci bekas selepas anda selesai menambah dan mengkonfigurasi komponen reka bentuk untuknya.

Untuk mengunci bekas, tambahkan atribut pada data-locked="hard" tag bekas, seperti ini:

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

Nota

Anda juga boleh mengunci kandungan pada tahap elemen reka bentuk. Jika kandungan dikunci pada paras bekas, maka tetapan itu mengatasi status terkunci/tidak berkunci semua elemen reka bentuk di dalam bekas tersebut. Maklumat lanjut: Kunci unsur dalam pandangan Pereka Bentuk

Untuk menguatkuasakan penguncian kontena selanjutnya, anda boleh mengehadkan akses ke tab HTML , yang akan menghalang pengguna terpilih daripada mengakses kod (di mana mereka sebaliknya boleh mengalahkan tetapan ini). Maklumat lanjut: Kawal capaian kepada ciri pereka bentuk

Kenal pasti elemen reka bentuk

Setiap kali anda menambah elemen reka bentuk menggunakan tab Pereka Bentuk , editor menyelitkan sepasang <div> tag untuk menandakan permulaan dan akhir elemen dan mencipta apa sahaja HTML yang diperlukan untuk memaparkan unsur seperti yang ditentukan dalam setingnya pada tab Sifat .

Unsur reka bentuk ditandakan dengan <div> tag yang termasuk atribut bentuk data-editorblocktype="<element-type>", di mana nilai atribut ini mengenal pasti jenis unsur yang ada. Contohnya, tag berikut <div> mencipta unsur teks:

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

Jadual berikut menyenaraikan nilai yang tersedia untuk data-editorblocktype atribut.

Nama elemen reka bentuk	Jenis elemen	`data-editorblocktype` nilai atribut
Unsur teks	Elemen reka bentuk biasa	Teks
Unsur imej	Elemen reka bentuk biasa	Image
Unsur pembahagi	Elemen reka bentuk biasa	Pembahagi
Elemen butang	Elemen reka bentuk biasa	Button
Unsur blok kandungan	Elemen reka bentuk biasa	Kandungan (Elemen reka bentuk jenis ini juga termasuk `data-block-datatype="<block-type>"` atribut, yang mengenal pasti jenis kandungan yang menyekatnya, di mana <jenis> blok mempunyai nilai sama ada `text` atau `image`.)
Elemen pemasaran-halaman	E-mel	Halaman pemasaran
Unsur peristiwa	E-mel	Peristiwa
Unsur kaji selidik	E-mel	Tinjauan
Unsur borang	Borang	FormBlock
Unsur medan	Kandungan borang	Nama medan-medan<>, contohnya: Medan-e-mel
Unsur senarai langganan	Kandungan borang	SubscriptionListBlock
Elemen ke rakan ke hadapan	Daripada kandungan	ForwardToFriendBlock
Jangan - elemen e-mel dan elemen Remember-me	Kandungan borang	Kotak semak medan (Unsur-unsur ini masing-masing mencipta kotak semak dan sebaliknya dibezakan oleh tetapan dalaman mereka.)
Elemen butang Serah-hantar	Kandungan borang	SubmitButtonBlock
Elemen butang set semula	Kandungan borang	ResetButtonBlock
Unsur Captcha	Kandungan borang	CaptchaBlock

Untuk maklumat lanjut tentang setiap unsur reka bentuk ini, lihat Rujukan unsur Reka bentuk.

Penting

Apabila anda bekerja pada tab HTML , anda harus mengelak daripada mengedit mana-mana kandungan antara <div> tag elemen reka bentuk anda kerana hasil berbuat demikian tidak dapat diramalkan, dan suntingan anda mungkin ditulis ganti oleh pereka bentuk pula. Sebaliknya, gunakan tab Pereka Bentuk untuk menguruskan kandungan dan sifat elemen reka bentuk anda.

Kunci unsur dalam pandangan Pereka Bentuk

Anda boleh mengunci kandungan dan sifat sebarang unsur reka bentuk dengan menambah atribut berikut pada tag pembukaannya <div> :

data-protected="true"

Contohnya:

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

Apabila unsur reka bentuk ditandakan sebagai dilindungi, pengguna yang bekerja dalam tab Pereka Bentuk untuk halaman atau e-mel tidak akan dapat mengedit sifat atau kandungan elemen tersebut. Atribut ini sentiasa disertakan untuk elemen blok kandungan, tetapi anda boleh menambahkannya pada sebarang jenis elemen reka bentuk untuk melindunginya. Sebarang unsur reka bentuk yang termasuk atribut ini ditunjukkan sebagai berlorek pada tab HTML untuk menunjukkan bahawa ia dilindungi, tetapi anda masih boleh mengeditnya di sana jika anda berkeras. Tetapkan atribut ini kepada "palsu" (atau hanya keluarkannya) untuk mengalih keluar perlindungan daripada elemen reka bentuk.

Nota

Anda juga boleh mengunci kandungan di peringkat bekas, yang akan mengatasi status terkunci/tidak berkunci semua elemen reka bentuk di dalam bekas itu. Maklumat lanjut: Mengunci bekas dalam pandangan Pereka Bentuk

Untuk menguatkuasakan penguncian kandungan dengan lebih lanjut, anda boleh mengehadkan akses ke tab HTML , yang akan menghalang pengguna terpilih daripada mengakses kod (di mana mereka sebaliknya boleh mengalahkan tetapan ini). Maklumat lanjut: Kawal capaian kepada ciri pereka bentuk

Import HTML yang dibuat secara luaran ke dalam pereka bentuk

Anda boleh menggunakan mana-mana alat yang anda suka untuk mencipta tataletak dan kandungan HTML awal untuk e-mel pemasaran, halaman atau borang. Apabila HTML anda sudah siap, tampalkannya ke dalam pereka yang berkaitan dan kemudian tambahkan sebarang Dynamics 365 Customer Insights - Journeys ciri yang anda perlukan seperti yang diterangkan dalam subseksyen berikut.

Import kod HTML anda

Untuk membawa HTML yang dibuat secara luaran ke dalam pereka bentuk, mulakan dengan melakukan perkara berikut:

Mencipta e-mel pemasaran, halaman atau borang Dynamics 365 Customer Insights - Journeys baharu.
Pergi ke tab HTML>Reka Bentuk pereka bentuk.
Kosongkan semua kandungan daripada tab HTML dan tampal dalam HTML yang anda cipta secara luaran.
Pergi ke tab Pereka>Bentuk pereka bentuk dan periksa reka bentuk anda.
Jika anda bekerja dengan e-mel pemasaran, pastikan anda menggunakan edit bantuan untuk meletakkan semua kandungan dan pautan yang diperlukan (termasuk pautan pusat langganan dan alamat penghantar fizikal anda).

Tip

Kerana anda baru sahaja menampal dalam HTML luaran, reka bentuk anda mungkin tidak termasuk sebarang kod yang khusus untuk Dynamics 365 Customer Insights - Journeys, jadi Pereka bentuk menunjukkan editor halaman penuh, yang menyediakan ciri untuk pemformatan teks asas, pemformatan imej dan (untuk e-mel) membantu mengedit untuk menambah kandungan dinamik. Untuk maklumat lanjut tentang cara mengendalikan editor halaman penuh, lihat Menunjukkan kotak alat dan mendayakan pengeditan seret dan lepas. Jika editor halaman penuh menyediakan semua fungsi yang anda perlukan, kemudian gunakannya untuk memperhalusi reka bentuk anda dan kemudian hidup dengannya seperti biasa. Jika anda lebih suka menggunakan editor seret dan lepas untuk memperhalusi reka bentuk anda, lihat bahagian seterusnya untuk mendapatkan maklumat tentang cara mendayakannya.

Dayakan editor seret dan lepas selepas import

Jika anda ingin mendayakan editor seret dan lepas berciri penuh dan/atau menambah elemen reka bentuk lanjutan semasa bekerja dalam paparan Pereka , anda boleh melakukannya dengan mudah dengan mengedit kod HTML diimport anda seperti berikut:

Kembali ke tab Reka Bentuk>HTML pereka bentuk.
Dayakan editor seret dan lepas dengan menambah tag meta yang diperlukan pada dokumen anda seperti yang diterangkan dalam Tunjukkan kotak alat dan dayakan pengeditan seret dan lepas.
Lakukan perkara berikut mengikut keperluan semasa mengerjakan tab HTML>Reka Bentuk :
- Pada setiap bahagian reka bentuk anda di mana anda ingin menyeret satu atau lebih elemen reka bentuk, tambahkan kod untuk mencipta bekas data seperti yang diterangkan dalam Cipta bekas yang pengguna boleh menambah elemen reka bentuk.
- Jika anda lebih suka meletakkan elemen reka bentuk terus dalam kod anda tanpa menggunakan seret dan lepas, anda boleh memasukkan kod yang diperlukan terus ke dalam tab Reka Bentuk>HTML . Unsur yang anda tambah dengan cara ini tidak akan menyokong seret dan lepas, tetapi ia akan menyediakan seting dalam panel Sifat tab Pereka Bentuk Reka Bentuk> . Anda hanya boleh meletakkan elemen teks, imej, pembahagi dan butang menggunakan teknik ini (buat bekas dan gunakan seret dan lepas untuk jenis elemen reka bentuk lain). Lihat jadual selepas prosedur ini untuk struktur HTML yang diperlukan untuk mencipta setiap elemen ini; Salin/tampal kod ini terus dari jadual mengikut keperluan.
Anda kini boleh pergi ke tab Pereka>Bentuk dan menyeret elemen reka bentuk ke dalam setiap bekas yang anda sediakan dan kemudian menggunakan panel Properties untuk mengkonfigurasi setiap elemen reka bentuk yang anda seret masuk atau ditampal terus ke dalam kod anda.

Jenis elemen reka bentuk	Tampal kod ini	Nota
Teks	`<div data-editorblocktype="Text"><p> Enter your text here</p></div>`	Anda boleh memasukkan kandungan HTML antara tag terus `<p>` di sini, atau pergi ke Pereka Bentuk untuk menggunakan editor teks kaya untuk melakukannya.
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>`	Cara paling mudah untuk menukar sumber imej dan / atau pautan imej anda adalah pergi ke Pereka Bentuk dan menggunakan panel Properties . Tetapi anda juga boleh mengedit atribut berikut secara langsung dalam HTML: Tetapkan pautan dan/atau tajuk imej dengan mengedit atribut href dan/atau tajuk unsur `<a>` . Untuk mengalih keluar pautan daripada imej, kosongkan kandungan `href` dan atribut `title` unsur (tetapi simpan atribut dan petikan, seperti `<a>` `href=""`). Tetapkan sumber imej dengan mengedit atribut src unsur tersebut `<img>` . Jangan edit mana-mana kod lain.
Pembahagi	<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>	Jangan edit mana-mana kod ini secara langsung dalam editor HTML. Sebaliknya, lakukan Pereka bentuk dan gunakan panel Properties .
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"`	Jangan edit mana-mana kod ini secara langsung dalam editor HTML. Sebaliknya, lakukan Pereka bentuk dan gunakan panel Properties .

Untuk maklumat lanjut tentang cara unsur reka bentuk muncul dalam kod, lihat Mengenal pasti unsur reka bentuk.

Unsur teks menyediakan bar alat pemformatan timbul dalam pereka bentuk, yang termasuk menu untuk menggunakan fon pada teks terpilih.

Untuk menambah fon baru kepada pemilih fon ini, tambah tag yang <meta> menggunakan borang berikut pada <head> dokumen:

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

Di mana <senarai> fon ialah senarai nama fon yang dipisahkan secara koma separa.

Menambah seting pada tab Gaya

Satu ciri berguna templat di luar kotak ialah ia menyediakan seting gaya global pada tab Gaya , yang membolehkan pengguna melaraskan keluarga fon, palet warna dan seting global lain yang didayakan dengan cepat untuk templat. Setiap templat hanya termasuk seting gaya yang masuk akal untuk reka bentuk khusus itu dan anda juga boleh mereka bentuk templat yang menyediakan tetapan gaya yang betul untuk anda dan pengguna anda.

Tab Gaya Pereka Bentuk > .

Untuk menambah seting pada tab Gaya , anda mesti melakukan perkara berikut:

<meta> Tambah tag pada <head> dokumen anda untuk mencipta seting.
Sediakan gaya dan/atau tag HTML yang menggunakan seting yang dicipta oleh meta tag.

Subseksyen berikut menerangkan cara melakukan setiap perkara ini.

Menambah tag meta untuk mencipta seting

Tag yang diperlukan <meta> mengambil borang berikut:

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

Di mana:

<nama> mengenal pasti tag meta, yang anda juga mesti merujuk dalam gaya dan tag HTML di mana seting akan digunakan.
<Nilai> permulaan ialah nilai lalai yang sesuai untuk gaya.
<Jenis> data mengenal pasti jenis nilai yang pengguna akan sediakan. Seting ini mempengaruhi jenis kawalan yang dipersembahkan pada tab Gaya . Anda mesti menggunakan salah satu nilai yang disenaraikan dalam jadual berikut.
<label> menentukan teks yang akan ditunjukkan dalam tab Gaya untuk seting.

Nilai jenis data	Description
warna	Mengesetkan warna menggunakan nilai tag hash seperti #000 atau #1a32bf. Mencipta kawalan pemilih warna pada tab Gaya .
Fon	Mengesetkan nama keluarga fon. Anda juga boleh menyediakan tindanan fon menggunakan senarai nama fon dipisahkan koma mengikut urutan keutamaan. Mencipta medan input ringkas pada tab Gaya .
Nombor	Mengesetkan nilai berangka tanpa unit (gunakan teks untuk membenarkan unit seperti px atau em ditentukan bersama-sama dengan nilai). Mencipta medan input dengan butang atas / bawah yang juga boleh digunakan untuk menaikkan / mengurangkan nilai semasa pada tab Gaya .
Gambar	Mengesetkan sumber imej (sebagai URL). Mencipta medan input ringkas pada tab Gaya .
teks	Mengesetkan nilai yang boleh termasuk teks dan nombor. Gunakan juga jenis data ini untuk nilai berangka yang mungkin termasuk unit (seperti px atau em). Mencipta medan input ringkas pada tab Gaya .

Nota

Label yang ditunjukkan pada tab Gaya mungkin muncul dalam kurungan persegi, seperti "[Gaya Saya]". Tanda kurung persegi menunjukkan bahawa teks yang ditunjukkan tidak mempunyai terjemahan yang tersedia. Jika anda memilih nilai yang disokong oleh mana-mana templat di luar kotak (seperti "Warna 1"), maka terjemahan akan tersedia, jadi tanda kurung segi empat sama tidak akan muncul.

Nota

Seting gaya yang diwujudkan menggunakan tag, seperti yang <meta> diterangkan di sini, hanya ditunjukkan pada tab Gaya apabila seting itu juga dirujuk dalam sekurang-kurangnya satu gaya sebenar atau tag HTML, seperti yang diterangkan dalam seksyen berikut.

Menambah CSS komen untuk melaksanakan seting gaya dalam kepala

Seting yang dibuat pada tab Gaya boleh digunakan pada CSS gaya yang <head> diwujudkan dalam dokumen HTML anda dengan mengelilingi CSS nilai dengan dua CSS komen yang mengandungi nilai name atribut untuk tag meta yang sepadan xrm/designer/setting . Pasangan CSS komen mengambil borang berikut:

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

Di mana:

<tag-name> ialah atribut nama untuk xrm/pereka bentuk/tag meta seting yang mengesetkan seting tab Gaya yang berkaitan .
<nilai> ialah nilai yang akan digantikan apabila pengguna mengedit seting tab Gaya berkaitan .

Penting

Anda hanya boleh menggunakan pasangan CSS komen ini dalam gaya dan kelas yang ditakrifkan dalam <style> tag dalam <head> bahagian. Mesti ada lagi hanya satu set <style> tag yang hadir, dengan semua CSS gaya disediakan di sana.

Berikut ialah contoh di mana anda boleh melihat xrm/designer/setting tag meta yang mencipta kawalan pemilih warna yang dipanggil "Warna 1" pada tab Gaya . Gaya kemudian CSS menggunakan seting ini untuk mewujudkan warna teks untuk <h1> unsur.

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

Menambah atribut rujukan sifat untuk melaksanakan seting gaya dalam isi

Seting yang dibuat pada tab Gaya boleh digunakan sebagai nilai atribut pada sebarang tag HTML dalam <body> dokumen anda dengan menambah atribut borang berikut pada setiap tag berkaitan:

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

Di mana:

<attr> ialah nama atribut yang akan dibuat.
<Nama> tag ialah nilai name atribut untuk tag meta yang mewujudkan seting.
Berbilang atribut, jika perlu, mesti dipisahkan dengan koma bertitik dalam satu atribut rujukan sifat.

Berikut ialah contoh di mana anda boleh melihat xrm/designer/setting tag meta yang mencipta dua tetapan untuk mengawal imej wira (sepanduk) dalam dokumen, dengan kawalan yang dipanggil "Imej wira" dan "Ketinggian imej Hero" pada tab Gaya . Sifat itu property-reference kemudiannya digunakan dalam tag <img> untuk melaksanakan seting tersebut.

<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>

Jadi, dalam contoh ini, tag akan <img> menyelesaikan sesuatu seperti:

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

Kongsi melalui

Menggunakan atribut tersuai untuk mendayakan ciri pereka dalam e-mel, halaman dan borang

Ringkasan tag dan atribut

Menunjukkan kotak alat dan mendayakan pengeditan seret dan lepas

Mencipta bekas yang pengguna boleh menambah unsur reka bentuk

Mengunci bekas dalam pandangan Pereka Bentuk

Kenal pasti elemen reka bentuk

Kunci unsur dalam pandangan Pereka Bentuk

Import HTML yang dibuat secara luaran ke dalam pereka bentuk

Import kod HTML anda

Dayakan editor seret dan lepas selepas import

Menambah seting pada tab Gaya

Menambah tag meta untuk mencipta seting

Menambah CSS komen untuk melaksanakan seting gaya dalam kepala

Menambah atribut rujukan sifat untuk melaksanakan seting gaya dalam isi

Sumber tambahan

Kongsi melalui

Menggunakan atribut tersuai untuk mendayakan ciri pereka dalam e-mel, halaman dan borang

Ringkasan tag dan atribut

Menunjukkan kotak alat dan mendayakan pengeditan seret dan lepas

Mencipta bekas yang pengguna boleh menambah unsur reka bentuk

Mengunci bekas dalam pandangan Pereka Bentuk

Kenal pasti elemen reka bentuk

Kunci unsur dalam pandangan Pereka Bentuk

Import HTML yang dibuat secara luaran ke dalam pereka bentuk

Import kod HTML anda

Dayakan editor seret dan lepas selepas import

Menambah fon baru pada bar alat unsur teks

Menambah seting pada tab Gaya

Menambah tag meta untuk mencipta seting

Menambah CSS komen untuk melaksanakan seting gaya dalam kepala

Menambah atribut rujukan sifat untuk melaksanakan seting gaya dalam isi

Sumber tambahan