หลักการ สร้าง template และ การใช้ template

Posted: May 29, 2010 in Dreamweaver tutorial
Tags: , , , , , ,

การสร้างแล้วใช้ Template ในโปรแกรม dreamweaver ก็ทำง่ายๆๆ

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

ผมจะอธิบายขั้นตอนซักนิดนะครับ แล้วเดี๋ยวจะทำวีดีโอ ให้ดูคร่าวๆ เพื่อความเข้าใจก่อน ถ้าไม่เข้าใจมันก็จะงงมากครับ
ไฟล์ template เมื่อเราสร้างขึ้นแล้ว แล้วทำการ เซพมันซะ จะมี folder ชื่อ template ขึ้นมาอยู่ในโปรเจคของเราทันทีครับ เป็นไฟล์ dwt ที่กล่าวไว้ข้างต้น ในไฟล์ตัวนี้ มีอีกอย่างหนึ่งที่เราต้องทำการ setup ก่อนนั่นก็คือ editable region ครับ ซึ่งหมายความถึง ขอบเขต หรือ บริเวณที่เราสามารถแก้ไขได้ ขอยกตัวอย่างนะครับ โดยปรกติแล้วหน้าเว็บของเราแต่ละหน้า จะมีเนื้อหาไม่เหมือนกันใช่ไหมครับ เพราะทุกหน้าเว็บที่เราสร้างต้องมีข้อมุลที่ไม่เหมือนกันอยู่แล้วโดยปรกติ ดังนั้นเราจุงต้องสร้าง ขอบเขต หรือบริเวณที่ สามารถแก้ไขได้ใน แต่ละหน้าเว็บที่ถูกสร้างจาก template นะครับ เรียกว่า การ set editable region เมื่อเราทำการset editable region ใน หน้า template แล้ว แต่ละหน้าเว็บ ก็จะสามารถแก้ไข ในบริเวณที่เราได้กำหนดไว้ได้ ถ้าเราไม่ทำการ set editable region เราก็ไม่สามารถแก้ไขอะไรได้เลย
การ ใช้ editable regionสามารถใช้ได้ทุกที่ทุกตำแหน่งนะครับ

ต่อไปจะเป็น tutorial วีดีโอสาธิต การสร้างเว็บไซด์ โดยการใช้ template ครับ

เราจะมาลองตัด เว็บนี้ดุนะครับ แบบยากขึ้นกว่าอันเดิม😀

นี่เป็นวีดีโอสาทิตวิธีการตัดผมได้แนบไฟล์ที่ตัดเรียบร้อยแล้วไว้ให้ ที่พร้อมจะสร้าง template

หลังจากที่ได้ เรียนรู้วิทีการจัดรูปจาก photoshop เราจะเอารูปที่ได้มา ประกอบเป็น template(.dwt) เพื่อสร้างไฟล์ html นะครับ ลองชม ครับอาจจะเร้วนิสนึงเพราะไฟล์ใหญ่มากฮะ ไม่เข้าใจตรงไหน โพสถามได้เลย

Comments
  1. Mixer says:

    ได้ความรู้ไปเยอะเลยครับ ขอบคุณมากครับ

    แต่ผมมีคำถามอยากจะถามนิดหนึ่ง

    คือถ้าขอบwebsite เป็นเงาดรอปออกด้านข้างเนี่ยเราจะตัดยังไงหรอครับ

    • Jammycray says:

      รบกวนไปถามที่บล็อคใหม่นะครับ เพราะว่าบ้ายยล็อคแล้วเดี่ยวทำ เป้นวีดีโอให้ครับ
      http://www.designdeedee.blogspot.com

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

  2. dexjanghan says:

    นำไปปรับใช้กับ PHP ได้ไหมครับ

  3. Yu says:

    ขอบคุณมากๆจากใจเลยครับ..ได้ความรู้เพิ่มเติมดีเลยครับ..
    ขอชื่นชม ครับ…ขอบคุณครับ 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s