Attributes คือส่วนประกอบอะไร

Question

เมื่อ 13 กรกฎาคม 2013 เวลา 16 นาฬิกา 43 นาที
4,284 Read
0 Comment
0 Like
1 Follower

html
, attribute

Attributes ก็คือส่วนที่อยู่ภายใน elements แต่ละ elements ซึ่งมันจะช่วยให้เราสามารถกำหนดข้อมูลต่าง ๆ ให้กับ HTML elements ได้ ซึ่งกฏของ HTML Attributes มีดังนี้

สารบัญ Show

0 Comment
Comment Blog
รู้จักกับ Attribute (แอตทริบิวต์)
HTML Attributes
Attributes: title
Attributes: href
Attributes: width, height
ใช้ Attributes ตัวพิมพ์เล็ก
ใช้ Single หรือ Double Quotes ?
บทสรุป
HTML Attributes
ใช้แอตทริบิวต์แบบกำหนดเองเพื่อเปิดใช้งานคุณลักษณะของตัวออกแบบในอีเมล เพจ และฟอร์ม
ในบทความนี้
สรุปแท็กและแอตทริบิวต์
สร้างคอนเทนเนอร์ที่ผู้ใช้สามารถเพิ่มองค์ประกอบการออกแบบ
ล็อกคอนเทนเนอร์ในมุมมองตัวออกแบบ
ระบุองค์ประกอบการออกแบบ
ล็อกองค์ประกอบในมุมมองตัวออกแบบ
นำเข้า HTML ที่สร้างภายนอกไปยังนักออกแบบ
นำเข้ารหัส HTML ของคุณ
เปิดใช้งานเครื่องมือแก้ไขการลากและวาง หลังจากนำเข้า
เพิ่มแบบอักษรใหม่ลงในแถบเครื่องมือองค์ประกอบข้อความ
เพิ่มการตั้งค่าไปยังแท็บลักษณะ
เพิ่มแท็กเมตาเพื่อกำหนดการตั้งค่า
เพิ่มข้อคิดเห็น CSS เพื่อใช้การตั้งค่าลักษณะในส่วนหัว
เพิ่มแอตทริบิวต์การอ้างอิงคุณสมบัติเพื่อใช้การตั้งค่าลักษณะในเนื้อหา
ดูเพิ่มเติม
คำติชม

- HTML elements สามารถมี attribute ได้

- Attribute จะเป็นการกำหนดข้อมูลต่าง ๆ เกี่ยวกับ element

- Attribute จะต้องถูกกำหนดใน tag เปิดของ element เท่านั้น

- Attribute จะต้องมาคู่กันคือ name=value เช่น name="value"

การลิงค์ของ HTML จะต้องกำหนดด้วย <a> tag แต่เราจะสามารถใส่ URL ที่ต้องการลิงค์ได้นั้น จะต้องใส่ไว้ใน attributes ดังนี้

<a href="http://www.w3schools.com">This is a link</a>

(ผมจะอธิบายเกี่ยวกับการลิงค์ของ <a> ในบทความต่อ ๆ ไปครับ)

ค่าของ Attribute นั้นควรจะอยู่ในภาย quotes ("", '') ไม่เช่นนั้นอาจจะทำให้ browser ทำการแปลความหมายเอกสาร HTML ของเราผิดพลาดได้

ในบางกรณีเมื่อเราต้องการกำหนด เครื่องหมายคำพูดเข้าไปใน Attribute นั้นด้วย แต่ค่าของ attribute นั้น ๆ ก็ถูกครอบไว้ด้วย quotes("") เช่น เราต้องการกำหนดให้ค่าของ attribute "name" มีค่าเป็น John "ShotGun" Nelson แต่กฏของการกำหนดค่าให้กับ attribute นั้นจะต้องอยู่ภายใน quotes("") ซึ่งถ้าเราใช้ double quote เช่น

name="John "ShotGun" Nelson"

มันจะเกิดปัญหาเพราะมันจะมองว่าค่าของ attribute "name" คือ "John" เท่านั้นเพราะมันถูกครอบด้วย quotes("") ดังนั้นเราจะต้องแก้ด้วยการเปลี่ยนจากการใช้ double quotes("") มาเป็น single quotes('') แทน ดังนี้

name='John "ShotGun" Nelson'

เพียงเท่านี้ก็จะได้ค่าของมันที่ถูกต้องสมบูรณ์

0 Comment

Comment Blog

รู้จักกับ Attribute (แอตทริบิวต์)

เนื้อหาหัวข้อ Attributes นี้ จะมีเนื้อหาเกี่ยวกับ HTML Elements เพิ่มเติม

HTML Attributes

ทุกๆ HTML Elements สามารถมี Attributes ได้
Attributes แสดงถึงข้อมูลเพิ่มเติมเกี่ยวกับ Element นั้นๆ
Attributes จะถูกระบุอยู่ที่ Tag เปิดเท่านั้น
Attributes จะมาในรูปแบบชื่อและค่าเสมอ เช่น name="value"

Attributes: title

ถ้าเราใส่ Attribute title ลงใน Tag <p> ค่าของ title จะปรากฎเป็น tooltip เมื่อคุณเอาเมาส์วางบนย่อหน้านั้นค้างไว้

Attributes: href

ลิงก์ HTML จะระบุด้วย Tag <a> ส่วน url ของลิงก์จะระบุอยู่ใน Attribute href

Attributes: width, height

รูปภาพใน HTML จะระบุด้วย Tag <img>

ส่วนที่อยู่ของไฟล์จะระบุอยู่ใน Attribute src

ขนาดของไฟล์จะระบุอยู่ใน Attribute width, height

กรณีไม่สามารถอ่านรูปภาพได้ ต้องการให้ขึ้นข้อความอะไรแทน จะระบุอยู่ใน Attribute alt

ใช้ Attributes ตัวพิมพ์เล็ก

แม้ว่าใน HTML5 การใช้ Attributes ตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ไม่มีผลอะไรต่อการแสดงผล แต่คุณก็ควรจะใช้ตัวพิมพ์เล็กไว้ เพื่อการแสดงผลในประเภทเอกสารอื่นๆ เช่น XHTML

ใช้ Single หรือ Double Quotes ?

ปกติแล้ว Double Quotes จะเป็นที่นิยมใช้มากกว่า แต่ Single Quotes ก็สามารถใช้ได้เหมือนกัน

ในบางกรณี ถ้าค่าใน Attibute มี Double Quotes รวมอยู่ด้วย เราก็จำเป็นต้องใช้ Single Quotes

หรือ

บทสรุป

ทุกๆ HTML Elements สามารถมี Attributes ได้
title แสดงข้อมูล tool-tip เพิ่มเติม
href ใส่ url ของลิงก์

src

width และ height กำหนดขนาดของรูป
alt แสดงข้อความในกรณีโหลดรูปไม่ขึ้น
ใช้ตัวพิมพ์เล็ก
ปกติให้ใช้ Double Quotes

HTML Attributes

ตัวอย่าง Attributes ที่จะได้เจอบ่อยๆ

Attribute	อธิบาย
alt	แสดงข้อความในกรณีโหลดรูปไม่ขึ้น
disabled	ยกเลิกการทำงาน Input Element
href	ใส่ url ของลิงก์
id	กำหนด ID ของ Element ซึ่งในหนึ่งเอกสาร HTML จะต้องไม่ซ้ำกัน
src	ระบุที่อยู่ของไฟล์รูป
style	ใส่โค้ด CSS ลงไปเพื่อตกแต่ง Element
class	ระบุคลาสของ CSS
title	ข้อมูลเพิ่มเติม จะแสดงในรูปแบบของ Tool-tip

ข้ามไปยังเนื้อหาหลัก

เบราว์เซอร์นี้ไม่ได้รับการสนับสนุนอีกต่อไป

อัปเกรดเป็น Microsoft Edge เพื่อใช้ประโยชน์จากคุณลักษณะล่าสุด เช่น การอัปเดตความปลอดภัยและการสนับสนุนด้านเทคนิค

ใช้แอตทริบิวต์แบบกำหนดเองเพื่อเปิดใช้งานคุณลักษณะของตัวออกแบบในอีเมล เพจ และฟอร์ม

บทความ
05/19/2022
5 นาทีในการอ่าน

ในบทความนี้

ตัวออกแบบเนื้อหามีทั้งตัวแก้ไขกราฟิกและตัวแก้ไขรหัส HTML HTML ที่สร้างจะสามารถใช้งานร่วมกับตัวแสดง HTML ได้ ทั้งยังรองรับแอตทริบิวต์แบบกำหนดเองบางชนิดที่รองรับองค์ประกอบการออกแบบลากและวาง รวมถึงการตั้งค่าลักษณะทั่วไปที่ให้มาพร้อมกับตัวแก้ไขกราฟิกด้วย แม่แบบข้อความเริ่มต้นและแม่แบบเพจที่มาพร้อมกับ Dynamics 365 Marketing จะใช้ประโยชน์จากแอตทริบิวต์แบบกำหนดเองเหล่านี้เพื่อช่วยให้คุณสามารถปรับแต่งแม่แบบด้วยวิธีเฉพาะได้ง่ายขึ้น นอกจากนี้ คุณยังสามารถใช้ประโยชน์จากแอตทริบิวต์แบบกำหนดเองเหล่านี้ในขณะที่ออกแบบเทมเพลตของคุณเองอีกด้วย

สรุปแท็กและแอตทริบิวต์

ตารางต่อไปนี้แสดงข้อมูลอ้างอิงโดยย่อสำหรับแอตทริบิวต์แบบกำหนดเองและแท็กเมตาที่อธิบายไว้ในหัวข้อนี้

แอตทริบิวต์แบบกำหนดเอง	คำอธิบาย
`<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> เป็นค่าของแอตทริบิวต์ name สำหรับแท็กเมตาที่กำหนดการตั้งค่า ข้อมูลเพิ่มเติม: เพิ่มข้อคิดเห็น CSS เพื่อใช้การตั้งค่าลักษณะในส่วนหัว
`property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"`	วางแอตทริบิวต์นี้ในแท็ก HTML เพื่อวางแอตทริบิวต์ด้วยค่าที่มีการควบคุมด้วยการตั้งค่าลักษณะ โดยที่ <attr> เป็นชื่อของแอตทริบิวต์ที่ถูกสร้างขึ้นและ <tag-name> เป็นค่าของแอตทริบิวต์ `name` สำหรับแท็กเมตาที่กำหนดการตั้งค่า ข้อมูลเพิ่มเติม: เพิ่มแอตทริบิวต์การอ้างอิงคุณสมบัติเพื่อใช้การตั้งค่าลักษณะในเนื้อหา

ส่วนที่เหลือของหัวข้อนี้จะให้ข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้แต่ละคุณลักษณะที่สรุปในตารางนี้

คุณสามารถวาง HTML ที่พัฒนาขึ้นในเครื่องมือของบุคคลภายนอกได้โดยตรง ในแท็บ HTML ของตัวออกแบบ เพื่อเริ่มต้นออกแบบได้อย่างรวดเร็ว อย่างไรก็ตาม เมื่อทำเช่นนี้แล้ว แท็บ ตัวออกแบบ จะแสดงเป็นตัวแก้ไข Rich Text เดียว ซึ่งมีแถบเครื่องมือการจัดรูปแบบข้อความ และแสดงรูปภาพ ลิงก์ และลักษณะทั้งหมดที่รวมอยู่ใน HTML ของคุณ แต่ไม่มีแท็บ กล่องเครื่องมือ, คุณสมบัติ หรือ ลักษณะ หรือฟังก์ชันการทำงานลากและวาง (มุมมอง ตัวออกแบบ ที่เรียบง่ายนี้บางครั้งถูกเรียกว่า ตัวแก้ไขแบบเต็มหน้า) อย่างไรก็ตาม คุณสามารถเปิดใช้งานฟังก์ชันลากและวางสำหรับการออกแบบใดๆ ที่ถูกวางไว้ โดยการเพิ่มแท็กเมตาต่อไปนี้ไปยังส่วน <head> ในเอกสารของคุณ:

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

รูปภาพต่อไปนี้แสดงการออกแบบเดียวกันในโหมดแก้ไขแบบเต็มหน้า (ซ้าย) และโหมดลากและวาง (ขวา) สิ่งที่ต่างกันเพียงอย่างเดียวคือการออกแบบทางด้านขวาจะรวมแท็กเมตาไว้ด้วย ดังนั้นจะมีการเปิดใช้งานฟังก์ชันลากและวาง และแผงด้านข้างจะแสดงขึ้น

Hinweis

เมื่อใช้งานตัวแก้ไขแบบเต็มหน้า คุณยังคงสามารถเลือก แก้ไข และกำหนดลักษณะข้อความโดยใช้แถบเครื่องมือการจัดรูปแบบข้อความ (ที่แสดง) และยังสามารถคลิกสองครั้งที่ภาพ ลิงก์ และองค์ประกอบอื่นๆ เพื่อตั้งค่าคุณสมบัติโดยใช้กล่องโต้ตอบป็อปอัพ นอกจากนี้ แถบเครื่องมือยังรวมถึงปุ่ม ช่วยแก้ไข

สำหรับการเพิ่มเนื้อหาแบบไดนามิก เช่น ค่าฟิลด์ที่ดึงจากเรกคอร์ดผู้ติดต่อของผู้รับแต่ละราย

สร้างคอนเทนเนอร์ที่ผู้ใช้สามารถเพิ่มองค์ประกอบการออกแบบ

บนแท็บ ตัวออกแบบ ผู้ใช้สามารถแก้ไขเนื้อหาที่อยู่ภายในองค์ประกอบการออกแบบได้เท่านั้น และสามารถลากองค์ประกอบการออกแบบใหม่ไปยังส่วนเหล่านั้นของเอกสารที่ตั้งค่าเป็น คอนเทนเนอร์ข้อมูล ได้เท่านั้น ดังนั้น คุณสามารถสร้างเทมเพลตที่พื้นที่บางส่วน (ภายนอกของคอนเทนเนอร์) ถูกล็อกไว้สำหรับการแก้ไขบนแท็บ ออกแบบ ขณะที่พื้นที่อื่นๆ (ภายในคอนเทนเนอร์ที่ปลดล็อก) จะยอมรับการแก้ไขและเนื้อหาที่ลากมา

ใช้แท็ก <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-tag data-container และไม่ได้เป็นส่วนหนึ่งขององค์ประกอบการออกแบบ จะสร้างพื้นที่ที่ไม่สามารถลากและแก้ไขได้ระหว่างพื้นที่ที่สามารถลากได้สองแห่ง ตัวอย่างเช่น:

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

Hinweis

เมื่อเปิดใช้งานตัวแก้ไขแบบเต็มหน้า คุณลักษณะลากและวางทั้งหมดจะถูกปิดใช้งาน และคุณสามารถแก้ไขเนื้อหาทั้งหมดได้ในแท็บ ตัวออกแบบ รวมถึงเนื้อหานอกแท็ก data-container div (ซึ่งไม่มีผลในตัวแก้ไขแบบเต็มหน้า)

ล็อกคอนเทนเนอร์ในมุมมองตัวออกแบบ

คุณสามารถล็อก คอนเทนเนอร์ เพื่อทำให้เนื้อหาทั้งหมดเป็นแบบอ่านอย่างเดียวบนแท็บ ตัวออกแบบ หากคอนเทนเนอร์ที่ถูกล็อกมี องค์ประกอบการออกแบบ เนื้อหาและการตั้งค่าทั้งหมดสำหรับองค์ประกอบเหล่านั้นจะยังคงถูกล็อก และแท็บ คุณสมบัติ จะไม่แสดงสำหรับองค์ประกอบแม้คุณจะเลือกก็ตาม

คุณอาจใช้คุณลักษณะการล็อกคอนเทนเนอร์เพื่อล็อกคอนเทนเนอร์หลังจากคุณเพิ่มและกำหนดค่าส่วนประกอบการออกแบบสำหรับคอนเทนเนอร์เสร็จเรียบร้อยแล้ว

หากต้องการล็อกคอนเทนเนอร์ ให้เพิ่มแอตทริบิวต์ data-locked="hard" ลงในแท็กคอนเทนเนอร์ดังนี้:

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

Hinweis

คุณยังสามารถล็อกเนื้อหาในระดับองค์ประกอบการออกแบบได้เช่นกัน หากเนื้อหาถูกล็อกที่ระดับคอนเทนเนอร์ การตั้งค่านั้นจะยกเลิกสถานะล็อก/ปลดล็อกขององค์ประกอบการออกแบบทั้งหมดภายในคอนเทนเนอร์นั้น ข้อมูลเพิ่มเติม: ล็อกองค์ประกอบในมุมมองตัวออกแบบ

เพื่อบังคับให้มีการล็อกคอนเทนเนอร์ต่อไป คุณสามารถจำกัดการเข้าถึงแท็บ 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
องค์ประกอบเส้นคั่น	องค์ประกอบการออกแบบทั่วไป	เส้นคั่น
องค์ประกอบปุ่ม	องค์ประกอบการออกแบบทั่วไป	ปุ่ม
องค์ประกอบบล็อกเนื้อหา	องค์ประกอบการออกแบบทั่วไป	เนื้อหา (องค์ประกอบการออกแบบชนิดนี้ยังมีแอตทริบิวต์ `data-block-datatype="<block-type>"` ซึ่งจะระบุว่าบล็อกเนื้อหาเป็นชนิดใด โดยที่ <block-type> มีค่าของ `text` หรือ `image` อย่างใดอย่างหนึ่ง)
องค์ประกอบเพจทางการตลาด	อีเมล	เพจทางการตลาด
องค์ประกอบเหตุการณ์	อีเมล	Event
องค์ประกอบแบบสำรวจ	อีเมล	Survey
องค์ประกอบฟอร์ม	ฟอร์ม	FormBlock
องค์ประกอบฟิลด์	เนื้อหาฟอร์ม	Field-<field-name> ตัวอย่างเช่น: Field-email
องค์ประกอบรายการสมัครใช้งาน	เนื้อหาฟอร์ม	SubscriptionListBlock
องค์ประกอบการส่งต่อให้เพื่อน	เนื้อหาฟอร์ม	ForwardToFriendBlock
องค์ประกอบไม่อนุญาตอีเมลและองค์ประกอบจำข้อมูลของฉัน	เนื้อหาฟอร์ม	กล่องกาเครื่องหมายฟิลด์ (องค์ประกอบเหล่านี้แต่ละรายการจะสร้างกล่องกาเครื่องหมายและแยกความแตกต่างได้ด้วยการตั้งค่าภายใน)
องค์ประกอบของปุ่มส่ง	เนื้อหาฟอร์ม	SubmitButtonBlock
องค์ประกอบปุ่มรีเซ็ต	เนื้อหาฟอร์ม	ResetButtonBlock
องค์ประกอบ Captcha	เนื้อหาฟอร์ม	CaptchaBlock

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบการออกแบบเหล่านี้ ให้ดู การอ้างอิงองค์ประกอบการออกแบบ

Wichtig

ขณะที่คุณกำลังทำงานบนแท็บ HTML คุณควรหลีกเลี่ยงการแก้ไขเนื้อหาใดๆ ที่อยู่ระหว่างแท็ก <div> ขององค์ประกอบการออกแบบของคุณ เนื่องจากผลลัพธ์ของการดำเนินการดังกล่าวไม่สามารถคาดเดาได้ และมีแนวโน้มว่าการแก้ไขของคุณจะถูกเขียนทับด้วยตัวออกแบบอยู่ดี ควรใช้แท็บ ตัวออกแบบ ในการจัดการเนื้อหาและคุณสมบัติขององค์ประกอบการออกแบบแทน

ล็อกองค์ประกอบในมุมมองตัวออกแบบ

คุณสามารถล็อกเนื้อหาและคุณสมบัติขององค์ประกอบการออกแบบใดๆ โดยการเพิ่มแอตทริบิวต์ต่อไปนี้ลงในแท็ก <div> เปิด:

data-protected="true"

ตัวอย่างเช่น:

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

เมื่อองค์ประกอบการออกแบบถูกทำเครื่องหมายเป็นได้รับการป้องกัน ผู้ใช้ที่ทำงานในแท็บ ตัวออกแบบ สำหรับเพจหรืออีเมลจะไม่สามารถแก้ไขคุณสมบัติหรือเนื้อหาขององค์ประกอบ แอตทริบิวต์นี้มีการรวมไว้สำหรับองค์ประกอบบล็อกเนื้อหาเสมอ แต่คุณสามารถเพิ่มแอตทริบิวต์ลงในองค์ประกอบการออกแบบชนิดใดๆ เพื่อป้องกันได้ องค์ประกอบการออกแบบใดๆ ที่มีแอตทริบิวต์นี้จะแสดงเป็นการแรเงาในแท็บ HTML เพื่อแสดงว่าได้รับการป้องกัน แต่คุณยังคงสามารถแก้ไขที่นั่นได้หากคุณยืนยันที่จะทำ ตั้งค่าแอตทริบิวต์นี้เป็น "false" (หรือแค่เอาออก) เพื่อเอาการป้องกันออกจากองค์ประกอบการออกแบบ

Hinweis

คุณยังสามารถล็อกเนื้อหาที่ระดับคอนเทนเนอร์ ซึ่งจะยกเลิกสถานะล็อก/ปลดล็อกขององค์ประกอบการออกแบบทั้งหมดภายในคอนเทนเนอร์นั้นได้เช่นกัน ข้อมูลเพิ่มเติม: ล็อกคอนเทนเนอร์ในมุมมองตัวออกแบบ

เพื่อบังคับให้มีการล็อกเนื้อหาต่อไป คุณสามารถจำกัดการเข้าถึงแท็บ HTML ซึ่งจะป้องกันผู้ใช้ที่เลือกจากการเข้าถึงโค้ด (ซึ่งพวกเขาสามารถยกเลิกการตั้งค่านี้ได้) ข้อมูลเพิ่มเติม: ควบคุมการเข้าถึงคุณลักษณะของตัวออกแบบ

นำเข้า HTML ที่สร้างภายนอกไปยังนักออกแบบ

คุณสามารถใช้เครื่องมือใดๆ ที่คุณต้องการเพื่อสร้างเค้าโครง HTML และเนื้อหาเริ่มต้นสำหรับอีเมลทางการตลาด หน้า หรือฟอร์ม เมื่อ HTML ของคุณพร้อม เพียงวางลงในตัวออกแบบที่เกี่ยวข้อง แล้วจากนั้นเพิ่มคุณลักษณะ Dynamics 365 Marketing ที่คุณต้องการ ตามที่อธิบายไว้ในส่วนย่อยต่อไปนี้

นำเข้ารหัส HTML ของคุณ

หากต้องการนำ HTML ที่สร้างภายนอกมาสู่นักออกแบบ ให้เริ่มต้นด้วยการทำสิ่งต่อไปนี้:

สร้างอีเมลทางการตลาด หน้า หรือฟอร์มใหม่ใน Dynamics 365 Marketing
ไปยังแท็บ ออกแบบ > HTML ของนักออกแบบ
ล้างเนื้อหาทั้งหมดจากแท็บ HTML และวางใน HTML ที่คุณสร้างขึ้นภายนอก
ไปที่แท็บ ออกแบบ > นักออกแบบ ของนักออกแบบ และตรวจสอบการออกแบบของคุณ
หากคุณกำลังทำงานกับอีเมลทางการตลาด ต้องแน่ใจว่าใช้ การช่วยแก้ไข เพื่อ วางเนื้อหาและลิงก์ที่จำเป็นทั้งหมด (ซึ่งรวมถึงลิงก์ศูนย์การสมัครใช้งานและที่อยู่ผู้ส่งทางกายภาพของคุณ)

Tipp

เนื่องจากคุณเพิ่งวางใน HTML ภายนอก การออกแบบของคุณจึงอาจไม่มีรหัสที่เฉพาะเจาะจงสำหรับ Dynamics 365 Marketing ดังนั้น ตัวออกแบบ แสดงให้เห็นว่า เครื่องมือแก้ไขแบบเต็มหน้า ซึ่งมีคุณลักษณะสำหรับการจัดรูปแบบข้อความพื้นฐาน การจัดรูปแบบรูปภาพ และ (สำหรับอีเมล) การช่วยแก้ไข สำหรับการเพิ่มเนื้อหาแบบไดนามิก สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานกับเครื่องมือแก้ไขแบบเต็มหน้า ดู แสดงกล่องเครื่องมือ และเปิดใช้งานการแก้ไขการลากและวาง หากเครื่องมือแก้ไขแบบเต็มหน้ามีฟังก์ชั่นทั้งหมดที่คุณต้องการ จากนั้นให้ใช้เพื่อปรับแต่งการออกแบบของคุณ แล้วเริ่มใช้งานตามปกติ หากคุณต้องการใช้ ตัวแก้ไขลากและวาง เพื่อปรับแต่งการออกแบบของคุณ ดูส่วนถัดไปสำหรับข้อมูลเกี่ยวกับวิธีการเปิดใช้งาน

เปิดใช้งานเครื่องมือแก้ไขการลากและวาง หลังจากนำเข้า

หากคุณต้องการเปิดใช้งานเครื่องมือแก้ไขลากและวางแบบเต็มรูปแบบ และ/หรือเพิ่มองค์ประกอบการออกแบบขั้นสูง ในขณะที่ทำงานในมุมมอง นักออกแบบ คุณสามารถทำเช่นนั้นได้อย่างง่ายดายโดยการแก้ไขรหัส HTML ที่นำเข้าของคุณเพิ่มเติม ดังนี้:

กลับไปที่แท็บ ออกแบบ > HTML ของนักออกแบบ
เปิดใช้งานเครื่องมือแก้ไขการลากและวางโดยเพิ่มแท็กเมตาที่ต้องการลงในส่วน <head> ของเอกสารของคุณ ตามที่อธิบายไว้ใน แสดงกล่องเครื่องมือ และเปิดใช้งานการลากและวาง
ทำสิ่งต่อไปนี้ตามต้องการ ขณะทำงานบนแท็บ ออกแบบ > HTML :
- ในแต่ละส่วนของการออกแบบของคุณที่คุณต้องการที่จะสามารถลากองค์ประกอบการออกแบบอย่างน้อยหนึ่งองค์ประกอบได้ ให้เพิ่มรหัสเพื่อสร้างคอนเทนเนอร์ข้อมูลตามที่อธิบายไว้ใน สร้างคอนเทนเนอร์ที่ผู้ใช้สามารถเพิ่มองค์ประกอบการออกแบบ
- หากคุณต้องการวางตำแหน่งองค์ประกอบการออกแบบในรหัสของคุณโดยตรงโดยไม่ต้องใช้การลากแล้ววาง คุณสามารถป้อนรหัสที่ต้องการได้โดยตรงได้ในแท็บ ออกแบบ > HTML องค์ประกอบที่คุณเพิ่มด้วยวิธีนี้จะไม่รองรับการลากแล้วปล่อย แต่จะให้การตั้งค่าในแผง คุณสมบัติ ของแท็บ ออกแบบ > นักออกแบบ คุณสามารถวางได้เฉพาะองค์ประกอบข้อความ รูปภาพ ตัวแบ่ง และปุ่ม โดยใช้เทคนิคนี้ (สร้างคอนเทนเนอร์ และใช้การลากแล้วปล่อยสำหรับองค์ประกอบการออกแบบประเภทอื่นๆ) ดูตารางหลังจากกระบวนงานนี้สำหรับโครงสร้าง HTML ที่จำเป็นในการสร้างองค์ประกอบเหล่านี้แต่ละรายการ คัดลอก/วางรหัสนี้โดยตรงจากตารางตามต้องการ
ตอนนี้คุณสามารถไปที่แท็บ ออกแบบ > นักออกแบบ และลากองค์ประกอบการออกแบบลงในแต่ละคอนเทนเนอร์ที่คุณตั้งค่า แล้วจากนั้นใช้แผง คุณสมบัติ เพื่อตั้งค่าคอนฟิกองค์ประกอบการออกแบบแต่ละรายการที่คุณลากหรือวางลงในรหัสของคุณโดยตรง

การออกแบบ ชนิดองค์ประกอบ	วางรหัสนี้	หมายเหตุ
Text	`<div data-editorblocktype="Text"><p> Enter your text here</p></div>`	คุณสามารถป้อนเนื้อหา HTML ระหว่างแท็ก `<p>` โดยตรงที่นี่ หรือไปที่ นักออกแบบ เพื่อใช้เครื่องมือแก้ไข Rich Tex เพื่อทำเช่นนั้น
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>">

โดยที่ <รายการแบบอักษร> เป็นรายการของชื่อแบบอักษรที่คั่นด้วยเครื่องหมายจุลภาค

เพิ่มการตั้งค่าไปยังแท็บลักษณะ

คุณสมบัติหนึ่งที่ใช้งานง่ายของเทมเพลตแบบพร้อมใช้งานคือ มีการตั้งค่าลักษณะส่วนกลางบนแท็บ ลักษณะ ที่ให้ผู้ใช้สามารถปรับตระกูลแบบอักษร ชุดแบบสี และการตั้งค่าส่วนกลางอื่นๆ ที่เปิดใช้งานสำหรับเทมเพลตได้อย่างรวดเร็ว แต่ละเทมเพลตจะมีการตั้งค่าลักษณะที่เหมาะสำหรับการออกแบบที่เฉพาะเจาะจงของเทมเพลตดังกล่าวเท่านั้น ดังนั้นคุณจึงสามารถออกแบบเทมเพลตที่มีการตั้งค่าลักษณะที่เหมาะสมสำหรับคุณและผู้ใช้งานโดยเฉพาะได้เช่นกัน

เมื่อต้องการเพิ่มการตั้งค่าไปที่แท็บ ลักษณะ คุณต้องดำเนินการดังต่อไปนี้:

เพิ่มแท็ก <meta> ไปที่ <head> ของเอกสารเพื่อกำหนดการตั้งค่า
ตั้งค่าลักษณะและ/หรือแท็ก HTML ที่ใช้การตั้งค่าที่สร้างขึ้นโดยแท็กเมตา

ส่วนย่อยต่อไปนี้จะอธิบายวิธีดำเนินการต่างๆ เหล่านี้

เพิ่มแท็กเมตาเพื่อกำหนดการตั้งค่า

แท็ก <meta> ที่กำหนดมีฟอร์มต่อไปนี้:

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

โดยที่:

<ชื่อ> ระบุแท็กเมตา ซึ่งคุณต้องอ้างอิงในลักษณะและแท็ก HTML ที่จะมีการใช้การตั้งค่า
<ค่าเริ่มต้น> คือค่าเริ่มต้นที่เหมาะสมสำหรับลักษณะ
<ชนิดข้อมูล> ระบุชนิดของค่าที่ผู้ใช้จะระบุ การตั้งค่านี้จะมีผลต่อชนิดการควบคุมที่แสดงบนแท็บ ลักษณะ คุณต้องใช้ค่าใดค่าหนึ่งที่ระบุในตารางต่อไปนี้
<ป้ายกำกับ> ระบุข้อความที่จะแสดงในแท็บ ลักษณะ สำหรับการตั้งค่า

ค่า ชนิดข้อมูล	คำอธิบาย
color	ตั้งค่าสีโดยใช้ค่าแฮชแท็ก เช่น #000 หรือ #1a32bf สร้างการควบคุมตัวเลือกสีบนแท็บ ลักษณะ
font	ตั้งค่าชื่อตระกูลแบบอักษร คุณยังสามารถตั้งค่าสแตกแบบอักษรโดยใช้รายการที่คั่นด้วยเครื่องหมายจุลภาคของชื่อแบบอักษรตามลำดับความพึงพอใจ สร้างฟิลด์ป้อนข้อมูลแบบง่ายบนแท็บ ลักษณะ
number	ตั้งค่าที่เป็นตัวเลขโดยไม่ใส่หน่วย (ใช้ข้อความที่ให้อนุญาตให้ระบุหน่วย เช่น px หรือ em ร่วมกับค่า) สร้างฟิลด์ป้อนข้อมูลด้วยปุ่มขึ้น/ลงที่ยังสามารถใช้ในการเพิ่ม/ลดค่าปัจจุบันบนแท็บ ลักษณะ ได้
picture	ตั้งค่าแหล่งที่มาของรูปภาพ (เป็น URL) สร้างฟิลด์ป้อนข้อมูลแบบง่ายบนแท็บ ลักษณะ
text	ตั้งค่าข้อความที่สามารถมีทั้งข้อความและตัวเลข ใช้ชนิดข้อมูลนี้สำหรับค่าที่เป็นตัวเลขที่อาจมีหน่วย (เช่น px หรือ em) สร้างฟิลด์ป้อนข้อมูลแบบง่ายบนแท็บ ลักษณะ

Hinweis

ป้ายกำกับที่แสดงบนแท็บ ลักษณะ อาจปรากฏในวงเล็บเหลี่ยม เช่น "[ลักษณะของฉัน]" วงเล็บเหลี่ยมระบุว่าข้อความที่แสดงไม่มีคำแปล หากคุณเลือกค่าที่รองรับโดยเทมเพลตแบบพร้อมใช้งาน (เช่น "สี 1") การแปลจะพร้อมใช้งาน ดังนั้นวงเล็บเหลี่ยมจะไม่ปรากฏ

Hinweis

การตั้งค่าลักษณะที่สร้างขึ้นโดยใช้แท็ก <meta> ตามที่อธิบายไว้ที่นี้จะแสดงบนแท็บ ลักษณะ เท่านั้น เมื่อการตั้งค่าดังกล่าวถูกอ้างถึงในลักษณะจริงหรือในแท็ก HTML อย่างน้อยหนึ่งรายการ ตามที่อธิบายไว้ในส่วนถัดไป

เพิ่มข้อคิดเห็น CSS เพื่อใช้การตั้งค่าลักษณะในส่วนหัว

การตั้งค่าที่ทำบนแท็บ ลักษณะ สามารถนำไปใช้กับลักษณะ CSS ที่สร้างขึ้นใน <head> ของเอกสาร HTML ของคุณได้ โดยการล้อมรอบค่า CSS ด้วยข้อคิดเห็น CSS สองรายการที่มีค่าของแอตทริบิวต์ name สำหรับการจับคู่แท็กเมตา xrm/designer/setting คู่ข้อคิดเห็น CSS ใช้ฟอร์มต่อไปนี้:

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

โดยที่:

<tag-name> คือแอตทริบิวต์ชื่อสำหรับแท็กเมตา xrm/designer/setting ที่กำหนดการตั้งค่าแท็บ ลักษณะ ที่เกี่ยวข้อง
<ค่า> คือค่าที่จะได้รับการแทนที่เมื่อผู้ใช้แก้ไขการตั้งค่าแท็บ ลักษณะ ที่เกี่ยวข้อง

Wichtig

คุณสามารถใช้ได้เฉพาะคู่ของข้อคิดเห็น CSS นี้ในลักษณะและคลาสที่กำหนดไว้ภายในแท็ก <style> ในส่วน <head> ยิ่งไปกว่านั้น จะต้องมีแท็ก <style> เพียงชุดเดียว พร้อมกับมีการตั้งค่าลักษณะ CSS ทั้งหมดในนั้น

ต่อไปนี้เป็นตัวอย่างที่ซึ่งคุณจะสามารถเห็นแท็กเมตา xrm/designer/setting ที่สร้างตัวควบคุมตัวใช้เลือกสีที่มีชื่อว่า "สี 1" บนแท็บ ลักษณะ จากนั้น ลักษณะ CSS จะนำการตั้งค่านี้ไปใช้กำหนดสีของข้อความให้แก่องค์ประกอบ <h2>

<head>
    <meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
    <style>
        h2 {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> อาจช่วยแก้ปัญหาอย่างเช่น: