เทคนิคการสร้าง และออกแบบ website ด้วย adobe...

24
เเเเเเเเเเเเเเ เเเเเเเเเ Website เเเเ Adobe Dreamweaver CS3 เเเเเเเเเ Dreamweaver Dreamweaver ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถ ถถถ ถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถ ถถถถ ถถถถถถถถถถถถถ Web Master ถถถถถถถถถถถถถถ ถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถ HTML ถถถถถถถถ ถถถถถถถถถ ถถถถถถถถถถ Java Scripts ถถถ ถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ HTML ถถถถถถ ถถถถถถถถถถถถถถถถถถถ ถถถ ถถถถถถถถถถถถถถถถถถถถถถ เเเเเเเเเเเเเ Dreamweaver ถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถ Text Editor ถถถถถถ ถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถ ถถถถถถถถถถถถถ ถถถถ ถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถ ถถถถถ Table ถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถ HTML ถถถถถ ถถถถถถถถถถถถถถถถถถถ ถถถถถถถ Dreamweaver ถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถ ถถถถ HTML ถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถถ Webmaster ถถถ ถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถถถถถ Tag ถถถถ ถ ถถถ ถถถถถถถ ถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถ ถ ถถถถถถถถถถถถถถถถถถถถถถถถ Dreamweaver ถถถถถถถถถถถ ถถถถถถถถถถถถถ ถถถถถถถถถถถถถถถถถถถ ถถถถถถถถถถถถถ Code HTML ถถถ ถถถถถถถถถถถถถถถถ Dreamweaver ถถถถถถถ ถถถถถถ

Upload: bleach-kyo

Post on 03-Sep-2014

5.399 views

Category:

Technology


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

เทคนิ�คการสราง และออกแบบ Website ด้วย Adobe Dreamweaver CS3ร�จั�กก�บ Dreamweaver

Dreamweaver ถื�อได้�ว่�าเป็�นเครื่��องมื�อสำ�าหรื่�บสำรื่�างเว่�บเพจ และ ด้�แลเว่�บไซต์" ที่$�มื$ป็รื่ะสำ%ที่ธิ%ภาพสำ�ง เป็�นที่$�น%ยมืใช้�ของ Web Master อย�างกว่�างขว่าง ซ-�งเป็�นโป็รื่แกรื่มืสำ�าหรื่�บเข$ยนภาษา HTML โด้ยเฉพาะ พรื่�อมืที่�1งสำามืารื่ถืแที่รื่ก Java Scripts และ ล�กเล�นต์�างๆได้�มืากมืาย โด้ยที่$�ผู้��ใช้�ไมื�จ�าเป็�นต์�องรื่� �หล�กภาษา HTML มืากน�ก ซ-�งช้�ว่ยป็รื่ะหย�ด้เว่ลา และ ที่�างานได้�สำะด้ว่กย%�งข-1นความสามารถของ Dreamweaver

ในการื่เข$ยนเว่�บเพจ จะมื$ล�กษณะคล�ายก�บการื่พ%มืพ"งานในโป็รื่แกรื่มื Text

Editor ที่��ว่ไป็ ค�อว่�ามื�นจะเรื่$ยงช้%ด้ซ�ายบนต์ลอด้เว่ลา ไมื�สำามืารื่ถืย�าย หรื่�อ น�าไป็ว่างต์�าแหน�งที่$�ต์�องการื่ได้�ที่�นที่$�เหมื�อนโป็รื่แกรื่มืกรื่าฟิ6ก เพรื่าะฉะน�1นหากเรื่าต์�องการื่จ�ด้ว่างรื่�ป็แบบต์ามืที่$�เรื่าต์�องการื่ ก�ใช้�ต์ารื่าง Table เข�ามืาช้�ว่ยจ�ด้ต์�าแหน�ง ซ-�งเมื��อมื$การื่จ�ด้ว่างรื่�ป็แบบที่$�ซ�บซ�อนมืากข-1น การื่เข$ยนภาษา HTML ก�ซ�บซ�อนย%�งข-1นเช้�นก�น โป็รื่แกรื่มื Dreamweaver อาจจะไมื�สำามืารื่ถืเข$ยนเว่�บได้�ต์ามืที่$�เรื่าต์�องการื่ที่�1งหมืด้ ว่%ธิ$การื่แก�ไขป็7ญหาที่$�ด้$ที่$�สำ9ด้ค�อ คว่รื่จะเรื่$ยนรื่� �หล�กการื่ของภาษา HTML ไป็ด้�ว่ย ซ-�งถื�อว่�าเป็�นสำ%�งที่$�จ�าเป็�นมืากสำ�าหรื่�บผู้��ที่$�ต์�องการื่ป็รื่ะกอบอาช้$พ Webmaster แบบจรื่%งจ�ง อาจจะไมื�ต์�องถื-งก�บที่�องจ�า Tag ต์�าง ๆ ได้�ที่�1งหมืด้ แต์�ขอให�รื่� � เข�าใจหล�กการื่ก�พอแล�ว่ เพรื่าะหลาย ๆ ครื่�1งที่$�เรื่าจะเข$ยนเว่�บใน Dreamweaver แล�ว่กล�บได้�ผู้ลผู้%ด้เพ$1ยนไป็ ไมื�ต์รื่งต์ามืที่$�ต์�องการื่ ก�ต์�องมืาแก�ไข Code HTML เอง และคว่ามืสำามืารื่ถืของ Dreamweaver สำรื่9ป็ได้�ด้�งน$11. สำน�บสำน9นการื่ที่�างานแบบ WYSIWYG (What You See Is What You

Get) หมืายคว่ามืว่�า เว่�บที่$�เรื่าเข$ยนหน�าจอ Dreamweaver ก�จะแสำด้งแบบเด้$ยว่ก�บเว่�บเพจจรื่%งๆ ช้�ว่ยให�เรื่าเข$ยนเว่�บเพจง�ายข-1น ไมื�ต์�องเข$ยน Code HTML

เอง2. มื$เครื่��องมื�อในการื่ช้�ว่ยสำรื่�างเว่�บเพจ ที่$�มื$คว่ามืย�ด้หย9�นสำ�ง

Page 2: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

3. สำน�บสำน9นภาษาสำครื่%ป็ต์"ต์�างๆ ที่�1งฝั่7� ง Client และ Server เช้�น Java, ASP,

PHP, CGI, VBScript

4. มื$เครื่��องมื�อในการื่ Upload หน�าเว่�บเพจไป็ที่$�เครื่��อง Server เพ��อที่�าการื่เผู้ยแพรื่�งานที่$�เรื่าสำรื่�างในอ%นเที่อรื่"เน�ต์ โด้ยการื่สำ�งผู้�าน FTP หรื่�อ โด้ยการื่ใช้�โป็รื่แกรื่มื FTP ภายนอกช้�ว่ย เช้�น WS FTP

5. รื่องรื่�บมื�ลต์%มื$เด้$ย เช้�น การื่ใสำ�เสำ$ยง, การื่แที่รื่กไฟิล"ว่%ด้$โอ, การื่ใช้�งานรื่�ว่มืก�บโป็รื่แกรื่มื Flash , Fireworks

การใช้งานิพื้��นิฐานิ (ส�!งท"!ควรทราบเบ��องต้นิ)

1. ภาษา HTML เป็�นภาษาที่$�ออกแบบสำ�าหรื่�บการื่แสำด้งผู้ลเที่�าน�1น! ไมื�สำามืารื่ถืป็รื่ะมืว่ลผู้ล หรื่�อ ใช้�เข$ยนเว่�บแอพพล%เคช้��นได้�2. หากต์�องการื่เพ%�มืล�กเล�น หรื่�อ เที่คน%คพ%เศษ เช้�น Effect ต์�าง ๆ ต์�องน�าภาษา JavaScript มืาเสำรื่%มื HTML อ$กที่$ 3. การื่จ�ด้รื่�ป็แบบใน Code เช้�นการื่ข-1นบรื่รื่ที่�ด้ใหมื� การื่เว่�นว่รื่รื่ค ไมื�มื$ผู้ลต์�อการื่แสำด้งผู้ลที่าง Web Browser

4. การื่ข-1นบรื่รื่ที่�ด้ใหมื� ต์�องใช้� Tag <BR> หรื่�อ กด้ป็9<มื Shift+Enter

5. การื่ข-1นย�อหน�าใหมื� ต์�องใช้� Tag <P> หรื่�อ กด้ป็9<มื Enter

6. การื่เว่�นว่รื่รื่ค ต์�องใช้� Tag พ%เศษ ค�อ &nbsp; หรื่�อ กด้ป็9<มื Ctrl+ Shift +

Spacebar

7. หล�กการื่อ�าน Tag ของภาษา HTML จะอ�านค�าจาก Tag ที่$�อย��ด้�านในก�อน 8. ไฟิล" HTML และ Script ต์�างๆ สำามืารื่ถืเป็6ด้แก�ไขในโป็รื่แกรื่มื Text Editor

ที่��ว่ ๆ ไป็ ไมื�จ�าเป็�นต์�องแก�ไขใน Dreamweaver เพ$ยงอย�างเด้$ยว่9. การื่แที่รื่กข�อคว่ามื และ การื่ป็รื่�บแต์�งค�าต์�าง ๆ ให�คล%กต์�าแหน�งที่$�ต์�องการื่ แล�ว่พ%มืพ"ข�อคว่ามืต์ามืต์�องการื่ หรื่�อให�เล�อกข�อคว่ามืเมื��อต์�องการื่ก�าหนด้ค�าต์�าง ๆ เพ%�มืเต์%มื

การเร�!มต้นิใช้งานิ Dreamweaver

หล�งจากที่$�ที่�าการื่ต์%ด้ต์�1ง Dreamweaver เรื่$ยบรื่�อยแล�ว่ ก�สำามืารื่ถืเรื่$ยกใช้�งานโป็รื่แกรื่มืด้�ว่ยว่%ธิ$การื่ต์�อไป็น$1

Page 3: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

1. Click Mouse ที่$�ป็9<มื 2. เล�อกค�าสำ��ง All Program > เล�อกต์ามืรื่�ป็

Page 4: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

ส$วนิประกอบของ Dreamweaver

• แถืบค�าสำ��ง (Menu Bar) เป็�นแถืบที่$�ใช้�เก�บค�าสำ��งที่�1งหมืด้ของโป็รื่แกรื่มื

• แถืบค�าเครื่��องมื�อ (Toolbar) รื่ว่บรื่ว่มืป็9<มืค�าสำ��งที่$�ใช้�งานบ�อย • แถืบว่�ต์ถื9 (Object Palette) เป็�นกล9�มืเครื่��องมื�อต์�างๆ ที่$�ใช้�ในการื่

คว่บค9มืว่�ต์ถื9 บนช้%1นงาน เอกสำารื่เว่�บ เช้�น เสำ�นกรื่าฟิ6ก (Horizontal

Rule), ต์ารื่าง, รื่�ป็ภาพ, เลเยอรื่" (Layer)

• แถืบแสำด้งสำถืานะ (Status Bar)

• แถืบคว่บค9มืการื่ที่�างาน (Properties Palette) เป็�นรื่ายการื่ที่$�ป็รื่�บเป็ล$�ยนได้� ต์ามืล�กษณะการื่เล�อกข�อมื�ล เช้�น หากมื$การื่เล�อกที่$�จะพ%มืพ" หรื่�อแก�ไขเน�1อหา รื่ายการื่ก�จะเป็�น สำ�ว่นที่�างานที่$�เก$�ยว่ก�บอ�กษรื่, การื่จ�ด้พารื่ากรื่าฟิ ถื�าเล�อกที่$�รื่�ป็ภาพ รื่ายการื่ในแถืบน$1 ก�จะเป็�นค�าสำ��งต์�างๆ ที่$�เก$�ยว่ก�บ การื่คว่บค9มืเรื่��องรื่�ป็ภาพ

• สำ�ว่นของ Panel Group เป็�นกล9�มืของแถืบเครื่��องมื�อที่$�สำามืารื่ถืเรื่$ยกใช้�งานได้�อย�างรื่ว่ด้เรื่�ว่ เพ��อให�ง�ายในการื่สำรื่�าง Application บนอ%นเที่อรื่"เน�ต์ เช้�น การื่แที่รื่ก Code ของ JavaScript และ

Page 5: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

VBScript ลงในเว่�บเพจได้�อย�างง�ายๆ โด้ยสำามืารื่ถืเรื่$ยกใช้�งานได้�จาก Panel Group

ส$วนิประกอบต้$างๆ ของหนิาจัอ Dreamweaver

หนิาจัอแสด้งผล (Document Windows)

หน�าต์�างการื่ที่�างานของ Dreamweaver สำามืารื่ถืเล�อกหน�าต์�างการื่ที่�างานได้� 3 รื่�ป็แบบ โด้ยการื่คล%กไอคอนที่$�อย��ในแถืบเครื่��องมื�อ Toolbar ด้�งน$1

Show Code View เป็�นหน�าต์�างที่$�ให�แสำด้งเฉพาะโค�ด้ HTML ของหน�าเว่�บเพจที่$� ก�าล�งที่�างาน

Show Code and Design View เป็�นหน�าต์�างที่$�แสำด้งที่�1งโค�ด้ HTML และหน�าเว่�บเพจที่$�ก�าล�งที่�างาน

Show Design View ให�แสำด้งแต์�หน�าเว่�บเพจไมื�ต์�องแสำด้งโค�ด้

Page 6: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

HTML

เร�!มต้นิสรางเว)บไซต้, การื่สำรื่�างเว่�บไซต์" โด้ยการื่ก�าหนด้ Site Manager ให�ก�บเอกสำารื่ โด้ยมื$

หล�กการื่สำรื่�างด้�งน$1 เล�อก เมืน� Site > เล�อกค�าสำ��ง New Site

Page 7: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3
Page 8: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

การต้��งค$าใหใช้ภาษาไทยม"ข��นิต้อนิด้�งนิ"�1. เล�อกเมืน� Edit > เล�อกค�าสำ��ง Preferences

Page 9: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

2. เล�อก Fonts > Font Setting > เล�อก Thai

3. เล�อก ต์� 1งค�า New Document ด้�งน$1

การื่สำรื่�างหน�า template

Page 10: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

1.click ขว่า ที่$�ช้��อ site เล�อก New File

2.ต์�1งช้��อ ไฟิล" ต์�องต์�อที่�ายด้�ว่ย .html ด้�ว่ยเสำมือ

3. double click เข�าไป็เพ��อที่�างาน

ออกแบบหนิาเว)บไซต้, ด้วยโปรแกรม

adobe photoshop

Page 11: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

การแทรกต้ารางในิโปรแกรม adobe dreamweaver cs3

1. ไป็ที่$� insert เล�อก table

2.จะได้�หน�าต์�างด้�งน$1Rows > จ�านว่นแถืว่ที่$�ต์�องการื่Column > จ�านว่นคอล�มืน"ที่$�ต์�องการื่Table Width > คว่ามืกว่�างของต์ารื่างBorder > คว่ามืหนาของขอบต์ารื่างCell Padding >รื่ะยะรื่ะหว่�างข�อคว่ามืก�บขอบต์ารื่างCell Spacing > รื่ะยะรื่ะหว่�างแต์�ละเซลล"ในต์ารื่างเมื��อก�าหนด้ข�อมื�ลเสำรื่�จแล�ว่ Click ป็9<มื OK จะได้�ข�อมื�ลต์ารื่างต์ามืที่$�ก�าหนด้

Page 12: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

การก0าหนิด้ขนิาด้ของเซลล, 1.ให� Click เล�อกเซลล"ที่$�ต์�องการื่ หรื่�อ Click ที่$�แที่�ก <td> ที่$�มื9มืซ�ายของหน�าจอก�ได้� (ใช้�ได้�ในกรื่ณ$ที่$�เล�อกต์ารื่างไว่�ก�อนแล�ว่) ให� Click ที่$� Properties เพ��อก�าหนด้ขนาด้ของเซลล" ด้�งรื่�ป็

การเล�อกเซลล, และ การก0าหนิด้ส"พื้��นิ 1. ให� Click เล�อกเซลล"ที่$�ต์�องการื่ หรื่�อ Click ที่$�แที่�ก <td> ที่$�มื9มืซ�ายของหน�าจอก�ได้� (ใช้�ได้�ในกรื่ณ$ที่$�เล�อกต์ารื่างไว่�ก�อนแล�ว่)

2. ให� Click ที่$� Properties เพ��อก�าหนด้สำ$ โด้ยเล�อกที่$� BG แล�ว่ก�าหนด้เล�อกสำ$ (ให�เล�อกสำ$เข$ยว่) หรื่�อสำามืารื่ถืพ%มืพ"รื่ห�สำสำ$ได้�

การผสานิเซลล, (Marge Cell)

1. ให� Click เล�อกเซลล"ที่$�ต์�องการื่ ผู้สำาน2. Click Properties แล�ว่เล�อก เพ��อก�าหนด้การื่ผู้สำานเซลล" ด้�งรื่�ป็

Page 13: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

การแทรก ร�ปภาพื้ลงต้าราง1. ให� Click เล�อกเซลล"ที่$�ต์�องการื่แที่กรื่�ป็2. เล�อกเมืน� Insert > image ด้�งรื่�ป็เล�อกหาที่$�เก�บของรื่�ป็ แล�ว่เล�อกรื่�ป็ที่$�ต์�องการื่แที่รื่กลงต์ารื่าง ด้�งรื่�ป็

Page 14: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

การื่แที่รื่กแถืว่และคอล�มืน"การื่แที่รื่กแถืว่

1. น�าเคอรื่"เซอรื่"ไป็ว่างย�งต์�าแหน�งที่$�ต์�องการื่จะแที่รื่กแถืว่2. Click Mouse ป็9<มืขว่าจะป็รื่ากฎเมืน�ย�อย ให�เล�อก Table > Insert

Rows or Columns..3. จะมื$ Dialog Box ให�ก�าหนด้รื่�ป็แบบของการื่แที่รื่กต์ารื่างว่�า จะเล�อก

แที่รื่ก Rows หรื่�อ Column

(ให�แที่รื่ก Rows จ�านว่น 2 Rows)

4. ก�าหนด้การื่แที่รื่ก Rows ให�แที่รื่กก�อน (Above the Selection)

หรื่�อหล�ง (Before the Selection) ได้�5. ในกรื่ณ$ที่$�ต์�องแที่รื่ก Column จะมื$ให�แที่กก�อน (Before current

Column) หรื่�อหล�ง (After current Column)

Page 15: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

แสำด้งข�1นต์อนการื่แที่รื่กแถืว่และคอล�มืน"

แสำด้งการื่แที่รื่ก Column หล�งจากแที่รื่ก Rows จ�านว่น 6 Rows หน�าจอที่$�ได้�แสำด้งด้�งรื่�ป็

การ พื้�มพื้,ขอความและการก0าหนิด้ต้�วอ�กษร

การื่พ%มืพ"ข�อคว่ามืในเว่�บเพจจะคล�ายก�บการื่พ%มืพ"เอกสำารื่ใน Word โด้ยเรื่าสำามืารื่ถืจ�ด้รื่�ป็แบบข�อคว่ามืให�สำว่ยงามืได้�ด้�ว่ย โด้ยอาจใช้�ต์�ว่อ�กษรื่กรื่าฟิ6กที่$�สำ$ต์�ว่อ�กษรื่ต์�ด้ก�บสำ$พ�1นฉากหล�ง เพ��อให�สำามืารื่ถือ�านได้�ง�าย และเรื่าสำามืารื่ถืจ�ด้รื่�ป็แบบและขนาด้ต์�ว่อ�กษรื่ได้�โด้ยให�เล�อกข�อคว่ามืที่$�ต์�องการื่ป็รื่�บแต์�ง และแก�ไขค�าต์�าง ๆ ได้�ที่$�หน�าต์�าง Properties โด้ยมื$รื่ายละเอ$ยด้ด้�งน$1• Format เป็�นรื่�ป็แบบต์�ว่อ�กษรื่สำ�าเรื่�จที่$�เรื่าน�ามืาก�าหนด้ให�ก�บข�อคว่ามืได้�

Page 16: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

• Font รื่�ป็แบบต์�ว่อ�กษรื่ โด้ยใน Dreamweaver จะแสำด้งรื่�ป็แบบต์�ว่อ�กษรื่ที่$�มื$ในเครื่��อง PC และเครื่��อง MAC

• Size ขนาด้ของต์�ว่อ�กษรื่ ขนาด้มืาต์รื่ฐานที่$�ก�าหนด้ไว่�ค�อ 3• Color ก�าหนด้สำ$ให�ต์�ว่อ�กษรื่

การท0าจั1ด้ล�งค,มื$ข� 1นต์อนด้�งรื่�ป็

เมื��อเรื่าที่�าเสำรื่�จแล�ว่เรื่าจะที่�าให�หน�าน$1เป็�นหน�า template

เทมเพื้ลต้ค�ออะไรเที่มืเพลต์ใน Dreamweaver จะช้�ว่ยอ�านว่นคว่ามืสำะด้ว่กในการื่สำรื่�าง และ

การื่พ�ฒนาเว่�บเพจโด้ยจะก�าหนด้สำ�ว่นที่$�คงที่$�ในแต์�ละหน�าของเว่�บเพจ โด้ยที่$�เรื่าจะแก�ไขเฉพาะเน�1อหาของเพจที่$�มื$การื่เป็ล$�ยนแป็ลงเที่�าน�1นการสรางเทมเพื้ลต้จัากหนิาเว)บท"!ออกแบบไวแลว

Page 17: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

1. เล�อกค�าสำ��ง File > Save as Template เพ��อ save file หน�าเว่�บเพจที่$�เรื่าได้�ออกแบบไว่�เป็�นไฟิล"เที่มืเพลต์2. ต์�1งช้��อไฟิล"เที่มืเพลต์ในหน�าต์�าง Save as Template แล�ว่ click ป็9<มื Save

การ ก0าหนิด้พื้��นิท"!ท"!เปล"!ยนิแปลงได้ในิเทมเพื้ลต้

1. เป็6ด้หน�าเที่มืเพลต์เล�อกเมืน� Insert > Template Object > Edit Region2. ก�าหนด้ช้��อเรื่$ยกพ�1นที่$�ที่$�สำามืารื่ถืเป็ล$�ยนแป็ลงได้� แล�ว่ click mouse ป็9<มื ok

3. ช้��อที่$�ต์� 1งจะป็รื่ากฎในบรื่%เว่ณที่$�สำามืารื่ถืเป็ล$�ยนแป็ลงได้� ซ-�งในขณะที่$�เรื่าเป็6ด้เที่มืเพลต์เรื่าจะแก�ไขได้�ที่�1งพ�1นที่$�ที่$�ก�าหนด้ให�เป็ล$�ยนแป็ลงได้� และพ�1นที่$�ล�อคไว่� แต์�เมื��อใด้ที่$�เรื่าน�าเที่มืเพลต์น$1ไป็ใช้�ก�บหน�าเว่�บเพจ หน�าเว่�บเพจน�1นจะแก�ได้�เฉพาะพ�1นที่$�ที่$�ถื�กก�าหนด้ไว่�ให�เป็ล$�ยนแป็ลงได้�เที่�าน�1น

เป็6ด้หน�าเที่มืเพลต์เล�อกเมืน� Insert > Template Object > Edit Region

Page 18: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

ก�าหนด้ช้��อเรื่$ยกพ�1นที่$�ที่$�สำามืารื่ถืเป็ล$�ยนแป็ลงได้� แล�ว่ click

mouse ป็9<มื ok

ช้��อที่$�ต์� 1งจะป็รื่ากฎในบรื่%เว่ณที่$�สำามืารื่ถืเป็ล$�ยนแป็ลงได้� ซ-�งในขณะที่$�เรื่าเป็6ด้เที่มืเพลต์เรื่าจะแก�ไขได้�ที่�1งพ�1นที่$�ที่$�ก�าหนด้ให�เป็ล$�ยนแป็ลงได้� และพ�1นที่$�ล�อคไว่� แต์�เมื��อใด้ที่$�เรื่าน�าเที่มืเพลต์น$1ไป็ใช้�ก�บหน�าเว่�บเพจ หน�าเว่�บเพจน�1นจะแก�ได้�เฉพาะ

พ�1นที่$�ที่$�ถื�กก�าหนด้ไว่�ให�เป็ล$�ยนแป็ลงได้�เที่�าน�1น

การนิ0าเทมเพื้ลต้มาใช้งานิ1. เป็6ด้หน�าเว่�บเพจเป็ล�าข-1นมืา2. เล�อกแที่�บ Template

เล�อกช้��อเที่มืเพลต์ที่$�ต์�องการื่ และ click mouse ป็9<มื Select เน�1อหาที่$�มื$ในเที่มืเพลต์จะถื�กน�ามืาเพ%�มืเข�าไป็ในหน�าเว่�บใหมื� ในสำ�ว่นที่$�เป็�นเที่มืเพลต์เรื่าไมื�สำามืารื่ถืเข�าไป็แก�ไขได้� แต์�เรื่าสำามืารื่ถืออกแบบหน�าเว่�บเพจในสำ�ว่นที่$�แก�ไขได้�เที่�าน�1น

Page 19: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

จะป็รื่ากฏหน�า Template ที่$�ได้� สำรื่�างไว่�

การปร�บปร1งแกไขเทมเพื้ลต้

เมื��อใด้ที่$�ที่�าการื่แก�ไขเที่มืเพลต์ Dreamweaver จะถืามืว่�าเรื่าต์�องการื่ให�การื่เป็ล$�ยนแป็ลงน$1มื$ผู้ลก�บหน�าเว่�บเพจอ��นที่$�ใช้�เที่มืเพลต์น$1ด้�ว่ยหรื่�อไมื�1. เป็6ด้เที่มืเพลต์ที่$�สำรื่�างไว่�แล�ว่ข-1นมืาที่$�จะป็รื่�บป็รื่9ง

Page 20: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

2. ที่�าการื่แก�ไขเที่มืเพลต์ต์ามืคว่ามืต์�องการื่ เสำรื่�จแล�ว่ที่�าการื่ Save

3. Click Mouse ป็9<มื Yes เพ��อป็รื่�บป็รื่9งหน�าเว่�บเพจที่$�ใช้�เที่มืเพลต์น$1ที่�1งหมืด้ต์ามืการื่เป็ล$�ยนแป็ลงที่$�เก%ด้ข-1น โด้ยในช้�อง Lock in ให�เรื่ารื่ะบ9เพ%�มืเต์%มืว่�าจะก�าหนด้ให�ป็รื่�บป็รื่9งไฟิล"ที่$�ใช้�เที่มืเพลต์ในเว่�บไซต์"ที่$�เรื่าเล�อก หรื่�อให�ป็รื่�บป็รื่9งที่9กไฟิล"ที่$�ใช้�เที่มืเพลต์ในเว่�บไซต์"ที่$�เรื่าก�าล�งเป็6ด้อย��น$1ก�ได้�4. จากน�1นจะมื$รื่ายงานผู้ลการื่ Update ไฟิล" Click Mouse ป็9<มื Close เพ��อป็6ด้หน�าต์�างน$1หากในการื่แก�ไขเที่มืเพลต์เรื่าไมื�ได้�ก�าหนด้ให�การื่เป็ล$�ยนแป็ลงน$1มื$ผู้ลก�บหน�าเว่�บเพจอ��น แต์� ต์�อมืาภายหล�งต์�องการื่ให�มื$ผู้ล ก�ที่�าได้�โด้ยเล�อกค�าสำ��ง Modify > Templates > Update Pages

หร�อ การเร"ยกใช้ Template อ"กว�ธี"หนิ3!งม"ข��นิต้อนิด้�งนิ"�1.เล�อกหน�าที่$�ต์�องการื่ใสำ� Template

2.ไป็ที่$� Modify > Templates > Apply Template to Page…

1. Double click

Page 21: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

จะได้� หน�าต์�างด้�งรื่�ป็

Page 22: เทคนิคการสร้าง และออกแบบ Website ด้วย adobe dreamweaver cs3

พ�1นที่$�ที่$�สำามืารื่ถืแก�ไขได้�