Naudokite pasirinktinius atributus, kad el. laiškuose, puslapiuose ir formose įgalintumėte dizaino įrankių funkcijas.
Turinio dizaino įrankiai apima grafikos rengyklę ir HTML kodo rengyklę. Jų sukuriama HTML suderinama su bet kuriuo HTML vaizdo generatoriumi, tačiau jie taip pat palaiko keletą pasirinktinių atributų, palaikančių nuvilkimo funkcija paremtus dizaino elementus ir grafikos rengyklės pateiktus bendrus stiliaus parametrus. Numatytieji pranešimų šablonai ir puslapių šablonai, pateikiami kartu su Dynamics 365 Customer Insights - Journeys šiais pasirinktiniais atributais, leidžia lengviau juos tinkinti konkrečiais būdais. Be to, šiuos pasirinktinius atributus galite naudoti savo šablonams kurti.
Arbatpinigiai
"Microsoft" neteikia pasirinktinio HTML palaikymo el. laiškuose.
Žymių ir atributų suvestinė
Toliau esančioje lentelėje pateikiama trumpa informacija apie pasirinktinius atributus ir metažymes, aprašytas šioje temoje.
| Pasirinktinis atributas | Aprašas |
|---|---|
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> |
Kai ši žyma yra jūsų dokumente <head> , skirtuke Dizaino įrankis bus pateiktos nuvilkimo funkcijos. Jei šios žymės nėra, skirtuke Dizaino įrankis pateikiama supaprastinta viso puslapio rengyklė. Daugiau informacijos: Įrankių rinkinio rodymas ir redagavimo nuvilkimu įgalinimas |
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> |
Kai ši žymė yra <head> jūsų dokumente, šriftai, išvardyti <šriftų sąraše> (atskirti kabliataškiais), bus įtraukti į šriftų meniu teksto elementų formatavimo įrankių juostoje. Daugiau informacijos: Naujų šriftų įtraukimas į teksto elemento įrankių juostą |
<div data-container="true"> … </div> |
Pažymi konteinerio pradžios ir pabaigos vietas, į kurias vartotojai gali nuvilkti dizaino elementus. Daugiau informacijos: Konteinerio, į kurį vartotojai gali įtraukti dizaino elementų, kūrimas |
<div data-editorblocktype="<element-type>"> … </div> |
Pažymi dizaino elemento pradžią ir pabaigą. Atributo reikšmė nustato, kokio tai tipo elementas (tekstas, vaizdas, mygtukas ir t. t.). Kai kurie dizaino elementai čia palaiko papildomus atributus. Daugiau informacijos: Dizaino elementų identifikavimas ir Elementų užrakinimas dizaino įrankio rodinyje |
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> |
Ši žymė apibrėžia viso dokumento stiliaus parametrą, kurį vartotojai gali redaguoti naudodami skirtuką Dizaino įrankio >stiliai . Daugiau informacijos: Parametrų įtraukimas į skirtuką Stiliai |
/* @<tag-name> */ … /* @<tag-name> */ |
Naudokite CSS tokius komentarus kaip šie, jei norite apsupti CSS reikšmę, kurią norite valdyti stiliaus parametru, kur <žymės pavadinimas> yra metažymės, kuri nustatė parametrą, pavadinimo atributo reikšmė . Daugiau informacijos: Komentarų įtraukimas CSS norint įdiegti stiliaus parametrus galvoje |
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" |
Įdėkite šį atributą į bet kurią HTML žymę, kad įdėtumėte atributą, kurio reikšmę valdo stiliaus parametras, kur <attr> yra kuriamo atributo pavadinimas, o <žymos pavadinimas> yra metažymos, kuri nustatė parametrą, atributo reikšmė name . Daugiau informacijos: Ypatybių nuorodos atributų įtraukimas norint įdiegti stiliaus parametrus tekste |
Likusiuose šios temos skyriuose pateikiama daugiau informacijos apie tai, kaip naudoti kiekvieną funkciją, apibendrintą lentelėje.
Įrankių juostos rodymasą ir nuvilkimo funkcija paremto redagavimo įgalinimas
Galite įklijuoti HTML, sukurtą bet kuriame trečiosios šalies įrankyje, tiesiai į dizainerio HTML skirtuką, kad labai greitai pradėtumėte kurti dizainą. Tačiau kai tai padarysite, skirtukas Dizaino įrankis bus rodomas kaip viena raiškiojo teksto rengyklė, kurioje pateikiama teksto formatavimo įrankių juosta ir rodomi visi vaizdai, saitai ir stiliai, įtraukti į jūsų HTML, bet kitaip nepateikiami skirtukai Įrankių dėžė, Ypatybės arba Stiliai arba jokios nuvilkimo funkcijos (šis supaprastintas dizaino įrankio rodinys kartais vadinamas viso puslapio rengykle). Tačiau galite įjungti nuvilkimo funkciją bet kokiam įklijuotam dizainui, pridėdami šią metažymę prie <head> dokumento skyriaus:
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">
Tolesniame vaizde rodomas tas pats dizainas, veikiant viso puslapio redagavimo režimui (kairėje) ir nuvilkimo funkcija paremtam režimui (dešinėje). Vienintelis skirtumas yra tas, kad dešinėje pusėje esančiame dizaine yra metažymė (įgalinta nuvilkimo funkcija) ir rodomas šoninis skydas.
Pastaba.
Kai naudojate viso puslapio rengyklę, vis tiek galite pažymėti, redaguoti tekstą ir taisyti jo stilių naudodami teksto formatavimo įrankių juostą (parodyta), taip pat galite dukart spustelėti vaizdus, saitus ir kitus elementus, kad nustatytumėte jų ypatybes naudodami iššokantįjį dialogo langą. Įrankių juostoje taip pat yra mygtukas Pagalbinė redagavimo priemonė 
, skirtas dinaminiam turiniui įtraukti, pvz., laukų reikšmėms, paimtoms iš kiekvieno gavėjo kontakto įrašo.
Konteinerio, į kurį vartotojai gali įtraukti dizaino elementų, kūrimas
Skirtuke Dizaino įrankis vartotojai gali redaguoti tik dizaino elemente esantį turinį ir vilkti naujus dizaino elementus tik į tas dokumento dalis, kurios nustatytos kaip duomenų konteineriai. Todėl galite kurti šablonus, kuriuose kai kurios sritys (ne konteineriuose) yra užrakintos redaguoti skirtuke Dizainas , o kitos aros (atrakintuose konteineriuose) priims pakeitimus ir nuvilktą turinį.
Naudokite <div> žymes, kuriose yra atributas data-container="true" , kad sukurtumėte duomenų konteinerius, pvz.:
<table aria-role="presentation">
<tbody><tr>
<td>
LOCKED
</td>
<td>
<div data-container="true">
<!-- DRAG HERE -->
</div>
</td>
</tr>
</tbody></table>
Bet kokios teksto arba HTML žymės, įdėtos į duomenų konteinerio div žymių porą ir nėra dizaino elemento dalis, sukurs nevelkamą, neredaguojamą sritį tarp dviejų velkamų sričių. Pavyzdys.
<div data-container="true">
<!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>
Pastaba.
Kai įjungta viso puslapio rengyklė, visos nuvilkimo funkcijos yra išjungtos ir galite redaguoti visą turinį skirtuke Dizaino įrankis , įskaitant turinį, esantį už data-container div žymių ribų (kurios neturi įtakos viso puslapio rengyklėje).
Konteinerio užrakinimas dizaino įrankio rodinyje
Galite užrakinti sudėtinį rodinį , kad visas jo turinys būtų skirtas tik skaityti skirtuke Dizaino įrankis . Jei užrakintame konteineryje yra dizaino elementų, visas tų elementų turinys ir parametrai liks užrakinti, o skirtukas Ypatybės jiems niekada nebus rodomas, net jei juos pasirinksite.
Galite naudoti konteinerio užrakinimo funkciją, norėdami užrakinti konteinerį, baigę įtraukti ir konfigūruoti jo dizaino komponentus.
Norėdami užrakinti sudėtinį rodinį, pridėkite data-locked="hard" atributą prie sudėtinio rodinio žymos, pvz.:
<div data-container="true" data-locked="hard">
<!-- All elements and content here are locked, with no properties shown -->
</div>
Pastaba.
Taip pat galite užrakinti turinį dizaino elemento lygiu. Jei turinys yra užrakintas konteinerio lygiu, tada šis parametras panaikina visų dizaino elementų tame konteineryje užrakinimo / atrakinimo būseną. Daugiau informacijos: Elementų užrakinimas dizaino įrankio rodinyje
Norėdami dar labiau įgalinti konteinerio užrakinimą, galite apriboti prieigą prie HTML skirtuko, kuris neleis pasirinktiems vartotojams pasiekti kodo (kur kitu atveju jie galėtų nugalėti šį nustatymą). Daugiau informacijos: Prieigos prie dizaino įrankio funkcijų valdymas
Dizaino elementų identifikavimas
Kiekvieną kartą, kai pridedate dizaino elementą naudodami skirtuką Dizaino įrankis , redaktorius įterpia porą žymų <div> , kad pažymėtų elemento pradžią ir pabaigą, ir sukuria bet kokį HTML, kurio reikia, kad elementas būtų rodomas, kaip nurodyta jo nustatymuose skirtuke Ypatybės .
Dizaino elementai žymimi <div> žymėmis, kuriose yra formos data-editorblocktype="<element-type>" atributas, kai šio atributo reikšmė nurodo elemento tipą, kuris jis yra. Pavyzdžiui, ši <div> žymė sukuria teksto elementą:
<div data-editorblocktype="Text">
...
<!-- Don't edit the element content here -->
...
</div>
Šioje lentelėje išvardytos galimos atributo reikšmės data-editorblocktype .
| Dizaino elemento pavadinimas | Elemento tipas | data-editorblocktype atributo reikšmė |
|---|---|---|
| Teksto elementas | Bendrasis dizaino elementas | Text |
| Vaizdo elementas | Bendrasis dizaino elementas | Image |
| Skyriklio elementas | Bendrasis dizaino elementas | Skyriklis |
| Mygtuko elementas | Bendrasis dizaino elementas | Mygtukas |
| Turinio bloko elementas | Bendrasis dizaino elementas | Turinys (Šio tipo dizaino elementui taip pat priskiriamas atributas data-block-datatype="<block-type>" , kuris nurodo, kokio tipo turinio blokas yra, kur <bloko tipo> reikšmė yra viena iš arba textimage.) |
| Rinkodaros puslapio elementas | El. paštas | Rinkodaros puslapis |
| Įvykio elementas | El. paštas | Event |
| Apklausos elementas | El. paštas | Survey |
| Formos elementas | Forma | FormBlock |
| Lauko elementas | Formos turinys | Laukas-laukas-pavadinimas<>, pvz.: Laukas-el. paštas |
| Prenumeratų sąrašo elementas | Formos turinys | SubscriptionListBlock |
| Elementas Persiųsti draugui | Formos turinys | ForwardToFriendBlock |
| Nesiuntimo el. paštu elementas ir vartotojo įsiminimo elementas | Formos turinys | Lauko žymės langelis (Kiekvienas toks elementas sukuria žymės langelį, kuris taip pat skiriasi savo vidiniais parametrais.) |
| Pateikimo mygtuko elementas | Formos turinys | Pateikimo mygtuko blokas |
| Nustatymo iš naujo mygtuko elementas | Formos turinys | ResetButtonBlock |
| „Captcha“ elementas | Formos turinys | CaptchaBlock |
Daugiau informacijos apie kiekvieną iš šių dizaino elementų rasite Dizaino elementų nuorodoje.
Svarbu
Kai dirbate su HTML skirtuku, turėtumėte vengti redaguoti bet kokį turinį tarp <div> dizaino elementų žymų, nes to rezultatai gali būti nenuspėjami, o dizaineris vis tiek gali perrašyti jūsų pakeitimus. Vietoj to naudokite skirtuką Dizaino įrankis , kad galėtumėte tvarkyti savo dizaino elemento turinį ir ypatybes.
Elementų užrakinimas dizaino įrankio rodinyje
Galite užrakinti bet kurio dizaino elemento turinį ir ypatybes, prie jo atidarymo <div> žymos pridėdami šį atributą:
data-protected="true"
Pavyzdys.
<div data-editorblocktype="Divider" data-protected="true">
…
<!-- Don't edit the element content here -->
…
</div>
Kai dizaino elementas pažymimas kaip apsaugotas, vartotojai, dirbantys puslapio arba el. laiško skirtuke Dizaino įrankis , negalės redaguoti elemento ypatybių arba turinio. Šis atributas yra visada įtrauktas į turinio bloko elementą, tačiau galite jį įtraukti į bet kokio tipo dizaino elementą, kad jį apsaugotumėte. Bet koks dizaino elementas, kuriame yra šis atributas, HTML skirtuke rodomas kaip užtamsintas , nurodant, kad jis apsaugotas, bet vis tiek galite jį ten redaguoti, jei to reikalaujate. Nustatykite šio atributo reikšmę „neteisinga“ (arba tiesiog pašalinkite jį), kad pašalintumėte dizaino elemento apsaugą.
Pastaba.
Taip pat galite užrakinti turinį konteinerio lygiu, taip bus panaikinta visų dizaino elementų tame konteineryje užrakinimo / atrakinimo būsena. Daugiau informacijos: Konteinerio užrakinimas dizaino įrankio rodinyje
Norėdami dar labiau įgalinti turinio užrakinimą, galite apriboti prieigą prie HTML skirtuko, kuris neleis pasirinktiems vartotojams pasiekti kodo (kur jie kitu atveju galėtų nugalėti šį nustatymą). Daugiau informacijos: Prieigos prie dizaino įrankio funkcijų valdymas
Išorėje sukurto HTML importavimas į dizaino įrankį
Pradiniam HTML maketui ir rinkodaros el. laiškams, puslapio ar formos turiniui sukurti galite naudoti bet kokį įrankį. Kai jūsų HTML bus paruoštas, tiesiog įklijuokite jį į atitinkamą dizaino įrankį ir pridėkite visas Dynamics 365 Customer Insights - Journeys reikalingas funkcijas, kaip aprašyta tolesniuose poskyriuose.
HTML kodo importavimas
Norėdami išorėje sukurtą HTML perkelti į dizaino įrankio priemonę, pirmiausia atlikite toliau nurodytus veiksmus.
- Sukurkite naują rinkodaros el. laiškai, puslapį arba formą Dynamics 365 Customer Insights - Journeys.
- Eikite į dizaino įrankio skirtuką Dizaino>HTML .
- Išvalykite visą HTML skirtuke esantį turinį ir įklijuokite į išorėje sukurtą HTML.
- Eikite į dizaino įrankio skirtuką Dizaino>dizaino įrankis ir patikrinkite savo dizainą.
- Jei dirbate su rinkodaros el. laiškai, būtinai naudokite redagavimo pagalbinę priemonę , kad įdėtumėte visą reikiamą turinį ir saitus (įskaitant prenumeratų centro saitą ir fizinį siuntėjo adresą).
Arbatpinigiai
Kadangi ką tik įklijavote išorinį HTML, jūsų dizaine tikriausiai nėra jokio konkretaus Dynamics 365 Customer Insights - Journeys kodo, todėl dizaino įrankis rodo viso puslapio rengyklę, kurioje pateikiamos pagrindinio teksto formatavimo, vaizdo formatavimo ir (el. laiškų) pagalbinės redagavimo funkcijos, skirtos dinaminiam turiniui pridėti. Daugiau informacijos apie tai, kaip dirbti su viso puslapio rengykle, rasite Įrankių dėžės rodymas ir nuvilkimo redagavimo įgalinimas. Jei viso puslapio rengyklėje pateikiamos visos reikiamos funkcijos, tada rengyklę naudokite tam, kad suderintumėte savo dizainą, tada paleiskite, kaip įprasta. Jei norite naudoti nuvilkimo rengyklę , kad tiksliai sureguliuotumėte savo dizainą, informacijos apie tai, kaip jį įjungti, ieškokite kitame skyriuje.
Nuvilkimo funkcija paremtos rengyklės įjungimas importavus
Jei norite įjungti visų funkcijų nuvilkimo rengyklę ir (arba) pridėti išplėstinių dizaino elementų dirbdami dizaino įrankio rodinyje, galite lengvai tai padaryti toliau redaguodami importuotą HTML kodą, kaip nurodyta toliau:
Grįžkite į dizaino įrankio skirtuką Dizaino>HTML .
Įjunkite nuvilkimo rengyklę pridėdami reikiamą metažymę prie pagrindinės
kaip aprašyta Rodyti įrankių dėžę ir įgalinkite redagavimą nuvilkimo metu. Jei reikia, dirbdami su skirtuku Dizaino>HTML atlikite šiuos veiksmus:
- Kiekvienoje dizaino dalyje, kurioje norite vilkti vieną ar daugiau dizaino elementų, pridėkite kodą, kad sukurtumėte duomenų konteinerį, kaip aprašyta skyriuje Konteinerio, į kurį vartotojai gali įtraukti dizaino elementų, kūrimas.
- Jei norite, kad dizaino elementai būtų išdėstyti tiesiai kode, nenaudodami vilkimo, reikiamą kodą galite įvesti tiesiai į skirtuką Dizaino>HTML . Tokiu būdu įtraukti elementai nepalaikys nuvilkimo, tačiau jie pateiks nustatymus skirtuko Dizaino dizaino įrankis ypatybių>skydelyje . Naudodami šią techniką galite įdėti tik teksto, vaizdo, skirstytuvo ir mygtukų elementus (sukurkite konteinerius ir naudokite nuvilkimą kitų tipų dizaino elementams). Žr. po šios procedūros pateiktą lentelę, kurioje pateiktos HTML struktūros, reikalingos kiekvienam iš šių elementų sukurti; jei reikia, nukopijuokite / įklijuokite šį kodą tiesiai iš lentelės.
Dabar galite eiti į skirtuką Dizaino>dizaino įrankis ir vilkti dizaino elementus į kiekvieną nustatytą konteinerį, tada naudodami ypatybių skydelį sukonfigūruoti kiekvieną dizaino elementą, kurį nuvilkote arba įklijavote tiesiai į kodą.
| Dizaino elemento tipas | Įklijuoti šį kodą | Pastabos |
|---|---|---|
| Text | <div data-editorblocktype="Text"><p> Enter your text here</p></div> |
Čia galite įvesti HTML turinį tarp <p> žymių tiesiogiai čia arba eiti į dizaino įrankį ir naudoti raiškiojo teksto rengyklę. |
| 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> |
Paprasčiausias būdas norint pakeisti vaizdo šaltinio ir (arba) vaizdo saitą – eiti į dizaino įrankį ir pasinaudoti skydu Ypatybės. Tačiau toliau nurodytus atributus taip pat galite redaguoti tiesiai HTML.
|
| 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> |
Jokių šio kodo vietų neredaguokite tiesiai HTML rengyklėje. Vietoj to eikite į dizaino įrankį ir naudokite ypatybių skydelį. |
| 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" |
Jokių šio kodo vietų neredaguokite tiesiai HTML rengyklėje. Vietoj to eikite į dizaino įrankį ir naudokite ypatybių skydelį. |
Daugiau informacijos apie tai, kaip dizaino elementai rodomi kode, ieškokite Dizaino elementų identifikavimas.
Naujų šriftų įtraukimas į teksto elemento įrankių juostą
Teksto elementai dizaino įrankyje turi iškylančiąją formatavimo įrankių juostą, kurioje įtrauktas šrifto pritaikymo pasirinktam tekstui meniu.
Norėdami į šį šriftų parinkiklį įtraukti naujų šriftų, į dokumentą įtraukite <meta> žymę, kuri naudoja šią formą <head> :
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">
Kur <šriftų sąrašas> yra kabliataškiu atskirtas šriftų pavadinimų sąrašas.
Parametrų įtraukimas į skirtuką Stiliai
Viena patogi paruoštų naudoti šablonų savybė yra ta, kad skirtuke Stiliai jie pateikia visuotinius stiliaus nustatymus , kurie leidžia vartotojams greitai koreguoti šriftų šeimą, spalvų paletę ir kitus šablone įgalintus visuotinius nustatymus. Kiekviename šablone yra tik tie stiliaus parametrai, kurie tinka konkrečiam dizainui; taip pat galite kurti šablonus, jums ir jūsų vartotojams suteikiančius tinkamiausius stiliaus parametrus.
Norėdami įtraukti parametrą į skirtuką Stiliai , turite atlikti šiuos veiksmus:
<meta>Pridėkite žymę prie dokumento,<head>kad sukurtumėte parametrą.- Nustatykite stilius ir (arba) HTML žymes, kurios taiko metažymių sukurtus parametrus.
Tolesniuose poskyriuose paaiškinta, kaip atlikti kiekvieną iš šių veiksmų.
Metažymės įtraukimas parametrui sukurti
Reikalinga <meta> žyma yra tokios formos:
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">
Čia:
- <pavadinimas> identifikuoja metažymę, kurią taip pat turite nurodyti stiliuose ir HTML žymose, kuriose bus taikomas nustatymas.
- <pradinė reikšmė> yra tinkama numatytoji stiliaus reikšmė.
- <Duomenų tipas> identifikuoja vertės, kurią pateiks vartotojai, tipą. Šis parametras turi įtakos valdiklio tipui, kuris pateikiamas skirtuke Stiliai . Turite naudoti vieną iš šioje lentelėje išvardytų reikšmių.
- <etiketė> nurodo tekstą, kuris turi būti rodomas parametro skirtuke Stiliai .
| Duomenų tipo reikšmė | Aprašas |
|---|---|
| color | Nustato spalvą naudojant maišos žymių reikšmes, pvz., #000 arba #1a32bf. Sukuria spalvų parinkiklio valdiklį skirtuke Stiliai . |
| font | Nustato šriftų grupės pavadinimą. Taip pat galite nustatyti šriftų šūsnis naudodami kableliais atskirtų šrifto pavadinimų sąrašą pirmumo tvarka. Sukuria paprastą įvesties lauką skirtuke Stiliai . |
| number | Nustato skaitinę reikšmę be vieneto (naudokite tekstą, kad kartu su reikšme būtų galima nurodyti tokius vienetus kaip px arba em ). Sukuria įvesties lauką su mygtukais aukštyn / žemyn, kuriuos taip pat galima naudoti norint padidinti / sumažinti dabartinę reikšmę skirtuke Stiliai . |
| picture | Nustato vaizdo šaltinį (kaip URL). Sukuria paprastą įvesties lauką skirtuke Stiliai . |
| text | Nustato reikšmę, kuri gali apimti ir tekstą, ir skaičius. Taip pat naudokite šį duomenų tipą skaitinėms reikšmėms, kuriose gali būti vienetas (pvz., px arba em). Sukuria paprastą įvesties lauką skirtuke Stiliai . |
Pastaba.
Skirtuke Stiliai rodoma etiketė gali būti laužtiniuose skliaustuose, pvz., "[Mano stilius]". Laužtiniai skliaustai reiškia, kad nėra rodomo teksto vertimo. Jei pasirinksite bet kurio paruošto naudoti šablono palaikomą reikšmę (pvz., „1 spalva“), tuomet vertimas bus prieinamas ir laužtiniai skliaustai nebus rodomi.
Pastaba.
Stiliaus parametras, nustatytas naudojant žymę <meta> , kaip aprašyta čia, skirtuke Stiliai rodomas tik tada, kai tas parametras taip pat nurodomas bent vienoje faktinėje stiliaus arba HTML žymėje, kaip aprašyta kituose skyriuose.
CSS komentarų įtraukimas, kad antraštėje būtų pritaikyti stiliaus parametrai
Skirtuke Stiliai nustatyti parametrai gali būti taikomi jūsų HTML dokumente nustatytiems CSS stiliams, sujungiant <head> reikšmę dviem CSS komentarais, kuriuose yra atitinkančios CSS metažymės atributo reikšmė name . xrm/designer/setting CSS komentarų pora yra tokia, kaip nurodyta toliau.
/* @<tag-name> */ <value> /* @<tag-name> */
Čia:
- <žymos pavadinimas> yra metažymos xrm/designer/setting pavadinimo atributas , kuris nustato atitinkamą skirtuko Stiliai nustatymą.
- <reikšmė> yra reikšmė, kuri bus pakeista, kai vartotojas redaguos atitinkamą skirtuko Stiliai nustatymą.
Svarbu
Šias komentarų poras CSS galite naudoti tik tuose stiliuose ir klasėse, <style> kurios apibrėžtos <head> sekcijos žymėse. Be to, turi būti tik vienas žymų <style> rinkinys, kuriame turi būti nustatyti visi CSS stiliai.
Štai pavyzdys, kuriame galite pamatyti metažymę xrm/designer/setting , kuri skirtuke Stiliai sukuria spalvų parinkiklio valdiklį, pavadintą "1 spalva". Tada stilius taiko šį parametrą CSS , kad nustatytų elementų teksto spalvą <h1> .
<head>
<meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
<style>
h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
</style>
</head>
Ypatybių nuorodų atributų įtraukimas, kad stiliaus parametrai būtų pritaikyti pagrindinėje dalyje
Skirtuke Stiliai atlikti parametrai gali būti taikomi kaip atributų reikšmės bet kuriai dokumento HTML <body> žymei, prie kiekvienos atitinkamos žymės pridedant šios formos atributą:
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"
Čia:
- <attr> yra atributo, kurį reikia sukurti, pavadinimas.
- <žymos pavadinimas> yra metažymos, kuri nustatė nustatymą, atributo reikšmė
name. - Vienos ypatybės nuorodos atributo atveju keli atributai, jei reikia, turi būti atskirti kabliataškiu.
Štai pavyzdys, kuriame galite pamatyti xrm/designer/setting metažymes, kurios sukuria du nustatymus herojaus atvaizdui (reklamjuostei) valdyti dokumente, o skirtuke Stiliai valdikliai vadinami "Hero image" ir "Hero image height". Tada property-reference nuosavybė naudojama žymoje <img> , kad būtų įdiegti šie nustatymai.
<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>
Taigi, šiame pavyzdyje <img> žyma būtų panaši į:
<img src="picture.jpg" height="100px">