การกำหนดหน้าต้นแบบ 'ไซต์ของฉัน' ของคุณเอง

สิ่งสำคัญ:  บทความนี้เป็นการแปลด้วยเครื่อง โปรดดู ข้อจำกัดความรับผิดชอบ โปรดดูบทความฉบับภาษาอังกฤษ ที่นี่ เพื่อใช้อ้างอิง

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

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

เรียนรู้เพิ่มเติมเกี่ยวกับหน้าต้นแบบในบทนำสู่หน้าต้นแบบ SharePoint

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

ในบทความนี้

ภาพรวม: ต้นแบบหน้ากำหนดเค้าโครงหน้ากระดาษ

ดูหน้าต้นแบบไซต์ของฉัน

กำหนดเอง หรือเริ่มใหม่ตั้งแต่ต้น

กำหนดหน้าต้นแบบไซต์ของฉัน

สร้างสำเนาของหน้าต้นแบบไซต์ของฉัน

ทำงานกับตัวควบคุมตัวแทนเนื้อหา

ค้นหาตำแหน่ง และปรับเปลี่ยนตัวควบคุมตัวแทนเนื้อหา

ทำงานกับสไตล์

แท็ก DIV ที่ทำงานกับ CSS อย่างมีประสิทธิภาพ

แก้ไขสไตล์ในหน้าต้นแบบ หรือสร้าง CSS แบบกำหนดเอง

ภาพรวม : หน้าต้นแบบกับการกำหนดเค้าโครงหน้า

หน้าต้นแบบจะกำหนดเค้าโครงและส่วนติดต่อผู้ใช้แบบทั่วไปสำหรับหน้า SharePoint

หน้าต้นแบบ ไซต์ของฉันแสดงองค์ประกอบแบบถาวรที่คุณเห็นเมื่อคุณนำทางจากหน้าบนไซต์ของฉัน เช่นตัวควบคุมที่ด้านบนของหน้าหรือชื่อเรื่องของไซต์

องค์ประกอบเหล่านี้จะถูกจัดเก็บไว้ทั้งหมดในหน้าต้นแบบ 'ไซต์ของฉัน'

หน้า 'ไซต์ของฉัน' และ 'โปรไฟล์ของฉัน' ใน SharePoint จะได้รับการจัดการในฐานะ หน้าเนื้อหา บนไซต์ เมื่อดูหน้าเหล่านี้ในเบราว์เซอร์ หน้าดังกล่าวจะถูกรวมเข้ากับหน้าต้นแบบ 'ไซต์ของฉัน' เพื่อสร้างเว็บเพจเดี่ยวแบบต่อเนื่อง

หน้าต้นแบบ 'ไซต์ของฉัน' จะแสดงองค์ประกอบและเค้าโครงแบบถาวร ในขณะที่หน้าเนื้อหาจะแสดงเนื้อหาที่เฉพาะเจาะจงของหน้านั้นแบบไม่ซ้ำกัน

การดูหน้าต้นแบบ 'ไซต์ของฉัน'

  1. เปิด 'ไซต์ของฉัน' ที่ราก เช่น https://YourDomainName-my.sharepoint.com ใน SharePoint Designer แล้วคลิก หน้าต้นแบบ ในบานหน้าต่างนำทาง

  2. คลิก mysite.master เพื่อดูข้อมูลสรุปในแกลเลอรีหน้าต้นแบบ

  3. คลิก แก้ไขไฟล์ ใน Ribbon เพื่อเปิดหน้าต้นแบบ

การทำเช่นนี้จะเปิดหน้าต้นแบบในตัวแก้ไขหน้าแบบเต็มหน้าจอของ SharePoint Designer 2010

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

เมื่อคุณเปิดหน้าต้นแบบ 'ไซต์ของฉัน' คุณสามารถแก้ไขไฟล์และคุณสมบัติของไฟล์นั้นได้ด้วย

Aฟีเจอร์ต่าง ๆ จำนวนมากได้ง่ายในการสร้าง และกำหนดหน้าต้นแบบใน SharePoint Designer 2010 กว่าแต่ในอดีต:

  • เมนูการนำทางจะมีประเภท หน้าต้นแบบ ที่จะนำคุณไปยังแกลเลอรีหน้าต้นแบบบนไซต์ของคุณได้โดยตรง

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

  • เมื่อคุณสร้างไซต์และหน้า Web Part ใหม่ หน้าและไซต์ดังกล่าวจะสัมพันธ์กับหน้าต้นแบบหลักโดยอัตโนมัติ ดังนั้นคุณไม่ต้องกำหนดความสัมพันธ์ด้วยตัวเองทุกครั้ง

การกำหนดเองหรือการเริ่มใหม่ตั้งแต่ต้น

เมื่อต้องการใช้หน้าต้นแบบ 'ไซต์ของฉัน' แบบกำหนดเองในไซต์ SharePoint 2010 คุณสามารถทำดังนี้

  • กำหนดสำเนาหน้าต้นแบบ 'ไซต์ของฉัน' เอง (mysite.master) หรือ

  • สร้างหน้าต้นแบบ 'ไซต์ของฉัน' แบบกำหนดเองใหม่ตั้งแต่ต้น และทำให้หน้านั้นเป็นหน้าต้นแบบ 'ไซต์ของฉัน' สำหรับไซต์ของคุณ

บทความนี้จะเน้นที่วิธีแรก คือ กำหนดสำเนาหน้าต้นแบบ 'ไซต์ของฉัน' เอง

ทั้งสองวิธีต่างมีข้อดีและข้อด้อย

เมื่อคุณกำหนดสำเนาของ mysite.master เอง    คุณก็จะได้ใช้ SharePoint ในลักษณะหน้าตาที่มีอยู่ พร้อมด้วยฟีเจอร์ รูปลักษณ์ และองค์ประกอบดีไซน์ และกำหนดให้ตรงกับความต้องการของคุณเองได้ แม้ว่าจะเป็นการท้าทายในการที่คุณพยายามทำความเข้าใจกับทุกวิธีการทำงานของในหน้า mysite.master แต่วิธีนี้จะเป็นประโยชน์สำหรับการกำหนดรูปลักษณ์และการกำหนดเองที่ไม่มากนัก เช่นการเปลี่ยนส่วนหัวของหน้า SharePoint ของคุณ

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

การกำหนดหน้าต้นแบบ 'ไซต์ของฉัน' เอง

เมื่อต้องการกำหนดหน้าต้นแบบใน SharePoint Designer 2010 เอง ก่อนอื่นคุณต้องเปิด SharePoint Designer 2010 จากตัวไซต์เองหรือจากเมนู เริ่มต้น ของคุณ ในขณะที่มีไซต์ของคุณเปิดอยู่ใน SharePoint Designer 2010 ให้คลิก หน้าต้นแบบ ในบานหน้าต่างนำทาง

สำหรับไซต์ส่วนใหญ่ใน SharePoint Online สำหรับองค์กร คุณจะเห็นหน้าต้นแบบสี่หน้า คือ v4.master, minimal.master และ default.master ในแกลเลอรีหน้าต้นแบบตามที่แสดงอยู่ที่นี่ ถ้า 'ไซต์ของฉัน' ถูกเปิดใช้งาน คุณควรจะเห็นหน้าต้นแบบ mysite.master ด้วย

รายการของหน้าต้นแบบของ SharePoint 2010

การสร้างสำเนาของหน้าต้นแบบ 'ไซต์ของฉัน'

  1. เปิดไซต์ของคุณใน SharePoint Designer จากนั้นคลิก หน้าต้นแบบ ในบานหน้าต่างนำทาง

  2. คลิกขวาที่ mysite.master แล้วกด Ctrl+P เพื่อวางสำเนาในแกลเลอรีหน้าต้นแบบ

  3. คลิก mysite_copy(1).master เพื่อดูข้อมูลสรุปในแกลเลอรีหน้าต้นแบบ

  4. คลิก แก้ไขไฟล์ ใน Ribbon เพื่อแสดงหน้าต้นแบบ

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

การทำงานกับตัวควบคุมตัวแทนเนื้อหา

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

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

คุณสามารถใช้ฟีเจอร์ จัดการขอบเขตเนื้อหา เพื่อค้นหาตำแหน่งแต่ละตัวควบคุมตัวแทนเนื้อหาบนหน้าได้ คุณสามารถดูตัวควบคุมได้ทั้งในมุมมองโค้ดและตัวแก้ไข WYSIWYG

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

ตัวควบคุม PlaceHolderMain จะถูกแทนที่ด้วยหน้าเนื้อหาแต่ละหน้า เมื่อหน้าต้นแบบ ไซต์ของฉัน ถูกดูในเบราว์เซอร์

คุณสามารถเปลี่ยนเค้าโครงของเนื้อหาบนไซต์ SharePoint ได้ด้วยการเปลี่ยนตำแหน่งที่ตั้งของตัวควบคุมตัวแทนเนื้อหา

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับตัวแทนเนื้อหา ดูการทำงานกับตัวควบคุมตัวแทนเนื้อหา

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

การค้นหาตำแหน่งและปรับเปลี่ยนตัวควบคุมตัวแทนเนื้อหา

ทำตามขั้นตอนเหล่านี้เพื่อค้นหาตำแหน่งตัวควบคุมตัวแทนเนื้อหา PlaceHolderSiteName บนหน้าต้นแบบ 'ไซต์ของฉัน' ของ SharePoint 2010

  1. เปิดไซต์ของคุณใน SharePoint Designer 2010 และในบานหน้าต่างนำทาง ให้คลิก หน้าต้นแบบ

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

  2. ในแกลเลอรีหน้าต้นแบบ ให้คลิก mysite.master

  3. บนหน้าสรุปของหน้าต้นแบบ ให้คลิก แก้ไขไฟล์

  4. ถ้าคุณได้รับพร้อมท์ให้เช็คเอาท์ไฟล์ ให้คลิก ใช่

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

  6. ในรายการของขอบเขตเนื้อหา ให้เลือก PlaceHolderSiteName แล้วคลิก ไปที่ จากนั้นคลิก ปิด ตัวควบคุมตัวแทนเนื้อหาถูกเลือกบนหน้าดังนี้

หมายเหตุ:  คุณสมบัติแท็กสำหรับพื้นที่ที่สำรองไว้นี้ถูกตั้งค่าเป็น Visible=False ตามค่าเริ่มต้น ในมุมมองแยกการแสดงผล ใน SharePoint Designer 2010 คุณสามารถเลือกแท็ก คลิกขวาที่แท็ก และเลือกคุณสมบัติแท็กในเมนูบริบทที่ปรากฏเพื่อดูค่า


นี่เป็นการแสดงคุณสมบัติแท็กสำหรับตัวควบคุม PlaceHolderSiteName

  1. คุณอาจเปลี่ยนการตั้งค่าตัวควบคุม เปลี่ยนตำแหน่งที่ตั้ง นำสไตล์อื่นไปใช้ และอื่นๆ ได้ที่นี่ เมื่อเสร็จแล้ว ให้บันทึกหน้าต้นแบบ

  2. ถ้าคุณได้รับการเตือนว่าการเปลี่ยนแปลงจะกำหนดหน้าเองไปจากข้อกำหนดของไซต์ ให้เลือก ใช่

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


การเปลี่ยนแปลงของคุณจะปรากฏบนทุกหน้าที่แนบกับหน้าต้นแบบนี้ นอกจากว่าหน้าเหล่านั้นได้ถูกกำหนดเองโดยตรง

การทำงานกับสไตล์

วิธีที่ง่ายและรวดเร็วที่สุดเพื่อเปลี่ยนสไตล์ในหน้าต้นแบบของคุณคือการนำธีมที่ดีไซน์ไว้ล่วงหน้าไปใช้กับหน้า คุณจะเห็นและนำธีมที่พร้อมใช้งานไปใช้ได้โดยการคลิกลิงก์ เปลี่ยนแปลงธีมของไซต์ ภายใต้ การกำหนดเอง บนแท็บ การตั้งค่าไซต์ ใน SharePoint Designer

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

แท็ก DIV ที่ทำงานกับ CSS อย่างมีประสิทธิภาพ

หน้าต้นแบบ ไซต์ของฉัน ใน SharePoint 2010 ใช้แท็ก DIV เพื่อกำหนดองค์ประกอบเส้นบล็อกและส่วนบนหน้า แท็ก DIV ให้ข้อดีหลายประการเหนือกว่าแท็กตาราง ซึ่งใช้ในเวอร์ชันก่อนหน้า ด้วยแท็ก DIV คุณจะมี

  • วิธีการกำหนดสไตล์ของหน้าด้วย CSS ที่ยืดหยุ่นมากขึ้น

  • มาร์กอัปน้อยลง

  • ดาวน์โหลดเร็วขึ้น

  • การปรับโปรแกรมการค้นหาให้เหมาะสมที่ดีขึ้น

  • การสนับสนุนการช่วยสำหรับการเข้าถึงที่ดีขึ้น

  • การสนับสนุนเบราว์เซอร์ที่ดีขึ้น

ตาราง HTML จะยังคงใช้อยู่ ตัวอย่างเช่น เมื่อคุณหรือผู้ใช้ของคุณแทรก Web Part และเนื้อหา SharePoint อื่นๆ บนหน้า แต่สำหรับการกำหนดหน้าต้นแบบเอง โดยส่วนใหญ่คุณสามารถทำงานกับแท็ก DIV เพื่อสร้างโครงสร้างเนื้อหาได้

การใช้แท็ก DIV เมื่อกำหนดหน้าต้นแบบ 'ไซต์ของฉัน' เอง

การแก้ไขสไตล์ในหน้าต้นแบบหรือสร้าง CSS แบบกำหนดเอง

เมื่อต้องการแก้ไขสไตล์ ให้คลิกเมนู สไตล์ แล้วเลือกจากตัวเลือกบน Ribbon เพื่อทำงานกับ CSS ในแบบที่คุณต้องการ

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

กล่องโต้ตอบ สไตล์ใหม่ สำหรับหน้าต้นแบบ 'ไซต์ของฉัน'

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

ขยายทักษะของคุณ
สำรวจการฝึกอบรม
รับฟีเจอร์ใหม่ก่อนใคร
เข้าร่วม Office Insider

ข้อมูลนี้เป็นประโยชน์หรือไม่

ขอบคุณสำหรับคำติชมของคุณ!

ขอขอบคุณสำหรับคำติชมของคุณ! เราคิดว่าอาจเป็นประโยชน์ที่จะให้คุณได้ติดต่อกับหนึ่งในตัวแทนฝ่ายสนับสนุน Office ของเรา

×