Macromedia Dreamweaver MX
Macromedia Dreamweaver MX เป็นโปรแกรมสร้างเว็บเพจแบบมืออาชีพที่มีประสิทธิภาพสูง เป็นผลิตภัณฑ์ของบริษัท Macromedia ซึ่งเป็นบริษัทที่ออกแบบและพัฒนาโปรแกรมทางด้านกราฟิค รวมไปถึงโปรแกรมในการสร้างเว็บเพจมากมาย โปรแกรม Macromedia Dreamweaver นี้เริ่มเป็นที่รู้จักกันตั้งแต่เวอร์ชั่น 3.0 และเป็นที่นิยมกันอย่างแพร่หลายในเวอร์ชั่น 4.0 ปัจจุบันได้ถูกพัฒนาต่อเนื่องมาเป็นเวอร์ชั่น 6.0 โดยมาในชื่อใหม่ Dreamweaver MX
ชุดโปรแกรม Macromedia Dreamweaver MX จะมีทั้งในรูปแบบที่เป็นชุดแยกต่างหาก กับชุดที่รวมอยู่ในชุดโปรแกรม Macromedia STUDIO MX ที่ประกอบด้วยโปรแกรม Dreamweaver MX, Flash MX, Fireworks MX, ColdFusion MX และFreehand 10
Macromedia Dreamweaver MX เป็นโปรแกรมที่ใช้งานได้ง่าย คล้ายกับโปรแกรมจำพวก FrontPage, NetObjects Fusion, HomeSite, HotDog ... ซึ่งลักษณะการใช้งานคล้ายโปรแกรมคอมพิวเตอร์ทั่วไป โดยการลากองค์ประกอบ (Object) ของหน้าเว็บเพจที่ต้องการ ไปวางบนหน้าเอกสารดัดแปลงรูปแบบต่างๆ ดังวิธีการที่จะกล่าวภายหลัง
ความสามารถของ Macromedia Dreamweaver
เนื่องจากในปัจจุบันมีโปรแกรมที่ใช้ในการสร้างเว็บเพจอยู่หลากหลาย เช่น Macromedia Dreamweaver, Microsoft FrontPage, Adobe GoLive เป็นต้น ในการตัดสินใจเลือกใช้โปรแกรมใดนั้น ต้องพิจารณาถึงความสามารถของโปรแกรมนั้นๆ เพื่อตอบสนองความต้องการในการใช้งานของเราได้อย่างเหมาะสม ซึ่งความสามารถโดยรวมของ Macromedia Dreamweaver MX นั้น เราสามารถจำแนกได้ดังนี้
· สนับสนุนการทำงานแบบ WYSIWYG (What You See Is What You Get) หมายความว่า สิ่งใดที่เราทำบนหน้าจอ Deamweaver นั้นก็จะแสดงผลแบบเดียวกันบนเว็บเพจ ซึ่งช่วยให้สามารถปรับปรุง แก้ไขเว็บเพจได้อย่างง่ายดาย โดยไม่จำเป็นต้องมีความรู้ในภาษา HTML (HyperText Markup Language)
· มีเครื่องมือในการช่วยสร้างรูปแบบหน้าจอเว็บเพจ และมีความยืดหยุ่นในการใช้งานสูง
· สนับสนุนการใช้ Script Language ต่างๆ ทั้งฝั่ง Client และ Server เช่น JavaScript, ASP, PHP, CGI, VBSdript เป็นต้น
· มีเครื่องมือในการ Upload หน้าเว็บเพจไปที่ Server เพื่อเผยแพร่บน Internet โดยการส่งผ่าน FTP หรือการใช้โปรแกรมภายนอกช่วย
· รองรับมัลติมีเดียต่างๆ เช่น เสียง กราฟิค และแอนิเมชั่นที่สร้างโดยโปรแกรม Flash, Shockwave, Firework เป็นต้น
· มีความสามารถในการติดต่อกับฐานข้อมูล เพื่อความสะดวกในการเขียน Application ต่างๆบนเว็บไซต์
ความต้องการระบบของโปรแกรม Macromedia Dreamweaver
เมื่อพิจารณาถึงความสามารถของโปรแกรม Macromedia Dreamweaver MX และตกลงเลือกใช้แล้วนั้น ขั้นตอนต่อไปเราต้องพิจารณาเครื่องคอมพิวเตอร์ที่เหมาะสำหรับการใช้งาน Macromedia Dreamweaver MX ถึงแม้ว่า Macromedia Dreamweaver เป็นโปรแกรมที่ไม่ต้องใช้เครื่องที่มีประสิทธิภาพสูงมากนัก แต่เราอาจจำเป็นต้องใช้โปรแกรมอื่นๆร่วมในการทำงานด้วย เช่น โปรแกรมตกแต่งภาพ ดังนั้นระบบที่เหมาะสมกับการใช้งานควรมีลักษณะดังนี้
ระบบที่ต้องการสำหรับ Microsoft Windows :
· หน่วยประมวลผลกลาง (CPU) รุ่น Intel Pentium II Processor 300 MHz ขึ้นไป
· ระบบปฏิบัติการเป็น Windows 98, Windows 2000, Windows NT version 4.0, Windows ME หรือ Windows XP
· Web Browser ที่ใช้ ควรเป็น Netscape Navigator หรือ Microsoft Internet Explorer version4.0 ขึ้นไป
· RAM 96 MB (ควรเป็น 128 MB)
- เนื้อที่ว่างในฮาร์ดดิสก์อย่างน้อย 275 MB สำหรับบรรจุโปรแกรม Dreamweaver MX
- จอภาพแบบ 256 สีที่ความละเอียด 800 x 600 จุด
- ไดร์ฟ CD-ROM
ระบบที่ต้องการสำหรับ Appler Macintosh :
- Power Macintosh G3 ขึ้นไป
- Mac OS 9.1, Mac OS 9..2.1, หรือ Mac OS X 10.1 หรือใหม่กว่า
- Mac OS Runtime for Java (MRJ) 2.2 หรือสูงกว่า
· Web Browser ที่ใช้ ควรเป็น Netscape Navigator หรือ Microsoft Internet Explorer version4.0 ขึ้นไป
· RAM 96 MB (ควรเป็น 128 MB)
- เนื้อที่ว่างในฮาร์ดดิสก์อย่างน้อย 275 MB สำหรับบรรจุโปรแกรม Dreamweaver MX
- จอภาพแบบ 256 สีที่ความละเอียด 800 x 600 จุด
- ไดร์ฟ CD-ROM
เริ่มต้นการใช้งานโปรแกรม Dreamweaver MX
การเลือกหน้าต่างการทำงานของโปรแกรม Dreamweaver MX
ในการเรียกใช้โปรแกรม Dreamweaver MX เป็นครั้งแรก โปรแกรมจะให้เลือกแบบหน้าต่างของการทำงาน ซึ่งมีอยู่ดังนี้
Dreamweaver MX
เป็นหน้าต่างทำงานแบบรวม ที่ติดต่อกับผู้ใช้ในแบบ MDI (Multiple Document Inference) ซึ่งรวมเอาหน้าต่างเอกสารและแผงควบคุมการทำงานไว้ในหน้าต่างขนาดใหญ่ โดยมีกลุ่มของแผงควบคุมอยู่ทางขวามือ ซึ่งเหมาะสำหรับผู้ใช้ทั่วไป
ในกรณีที่ผู้ใช้ต้องการเขียนแท็ก HTML ด้วยตัวเอง ให้เลือก HomeSite/Coder-Style ซึ่งหน้าต่างการทำงานเป็นแบบรวมเช่นเดี่ยวกัน แต่มีการวางแผงควบคุมอยู่ทางซ้าย คล้ายกับที่ใช้ในโปรแกรม Macromedia Homesite และ ColdFusionStudio
Dreamweaver 4 Workspace
เป็นหน้าต่างทำงานแบบเดียวกับที่ใช้ในโปรแกรม Dreramweaver 4 ที่แต่ละเอกสารจะแยกแสดงอยู่ในหน้าต่างของตัวเอง ส่วนแผงควบคุมต่างๆ จะถูกจัดรวมอยู่เป็นกลุ่ม แต่ไม่ได้แสดงในหน้าต่างเดียวกัน
องค์ประกอบของหน้าต่างการทำงาน
ในที่นี้จะเลือกหน้าต่างทำงานแบบ Dreamweaver MX Workspace ซึ่งองค์ประกอบต่างๆของหน้าต่างการทำงานมีดังนี้
Status Bar (แถบแสดงสถานะ)
แถบแสดงสถานะของ Dreamweaver จะแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่เรากำลังทำ โดยมีส่วนประกอบต่างๆ ดังนี้
· Tag Selector
เป็นส่วนที่แสดงแท็ก HTML เช่น <body>, <table>, <img> ของส่วนที่เรากำลังเลือกอยู่ โดยแสดงเป็นลำดับชั้นของแท็ก
· Window Size
จะแสดงขนาดของหน้าต่างเว็บเพจที่เรากำหนดไว้
· ขนาดของเอกสารและเวลาที่ใช้ในการโหลด
จะแสดงเวลาโดยประมาณ ที่ใช้ในการโหลดหน้าต่างเว็บเพจที่เราสร้าง โดยเริ่มแรก Dreamweaver จะแสดงเวลาโดยอ้างอิงกับ Modem
Insert Bar
เป็นกลุ่มเครื่องมือที่ใช้ในการสร้างออบเจกต์ต่างๆ ที่จะนำมาสร้างเป็นหน้าของเว็บเพจ โดยมีเครื่องมือต่างๆ อยู่ 12 กลุ่ม (Category) ที่สามารถเลือกได้จากรายการดังนี้
· Common Category
เป็นส่วนที่รวบรวมออบเจกต์ต่างๆ ที่เราเรียกใช้งานบ่อย ได้แก่ การแทรกภาพ การแทรกตาราง เป็นต้น
· Layout Category
เป็นส่วนที่รวบรวมออบเจกต์ที่ช่วยในการจัดองค์ประกอบของหน้าเว็บให้ง่ายกว่าเดิม
· Text Category
รวมออบเจกต์การใช้งานตัวอักษรที่อยู่ภายในเว็บเพจ
· Table Category
เป็นออบเจกต์ที่ใช้ในการสร้างตารางให้กับเว็บเพจ
· Frame Category
ใช้สำหรับแบ่งพื้นที่ในการแสดงผลของเว็บเพจให้ออกเป็นส่วนย่อย
· Forms Category
แทรกออบเจกต์ใช้ในการสร้างแบบสอบถาม และตัวเลือกต่างๆ
· Templates Category
กำหนดรูปแบบ หรือ Template ให้กับเว็บเพจ
· Characters Category
เป็นกลุ่มออบเจกต์ที่ใช้สำหรับแทรกตัวอักษร สัญลักษณ์พิเศษต่างๆ เช่น เงินดอลล่าร์ เงินเยน
· Media Category
ใช้สำหรับแทรกไฟล์ที่เป็นวีดีโอ ภาพเคลื่อนไหว Flash Java applet ActiveX หรือ Plugin ในหน้าเว็บ
· Head Category
เป็นการแทรกคำสั่ง HTML เสริมในหน้าเว็บเพจที่สร้าง อาทิ คำบรรยายเว็บไซต์ คีย์เวิร์ด
· Script Category
แทรกภาษา Script เช่น JavaScript หรือ VBScript เข้าไปในเว็บเพจ
· Application Category
เป็นที่รวมออบเจกต์สร้าง Application ติดต่อกับฐานข้อมูล
Properties Inspector
เป็นส่วนที่ใช้ในการปรับตั้งค่าคุณสมบัติต่างๆ ของแต่ละออบเจกต์ เช่นออบเจกต์ที่แสดงรูปภาพจะปรับแต่งกำหนดค่าต่างๆ ที่เกี่ยวกับรูปภาพได้ คือ ชื่อภาพ ขนาดภาพ เส้นขอบภาพ เป็นต้น
หากในขณะนั้นไม่ปรากฏ Properties Inspector ให้เลือกคำสั่ง Window > Properties
Panel Group
ใน Dreamweaver MX นั้นมีความสามารถใหม่ที่เพิ่มขึ้นมา คือ ความสามารถในการติดต่อกับฐานข้อมูลฝั่งเว็บเซิร์ฟเวอร์ เพื่อให้ง่ายต่อการสร้าง Application บน Internet นอกจากนี้ยังสามารถสอดแทรก JavaScript และ VBScript ลงไปในเว็บเพจได้ ซึ่งรายละเอียดของ Panel Group มีดังนี้
· Design เป็นส่วนที่ใช้ในการกำหนดรูปแบบตัวอักษร และการเพิ่มลูกเล่นให้กับเว็บเพจ ซึ่งจำแนกได้เป็น
o CSS Style สามารถกำหนดรูปแบบตัวอักษรที่ใช้งานบ่อยๆ ไว้ใช้กับเว็บเพจแต่ละหน้า
o HTML Style สามารถกำหนดรูปแบบตัวอักษรเพื่อนำมาใช้บนเว็บเพจ
o Behaviors สามารถกำหนด Behaviors ต่างๆ ที่เป็นลูกเล่นพิเศษบนเว็บได้ เช่น การทำภาพเคลื่อนไหว
· Code เป็นส่วนที่ใช้ในการแก้ไข Code HTML และแทรกภาษา Script ต่างๆ เช่น JavaScript หรือ VBScript ลงไปในเว็บไซด์ ซึ่งจำแนกได้เป็น
o Tag Inspector เป็นส่วนที่ใช้แทรก Code ของ JavaScript หรือ VBScript ลงไปในส่วนต่างๆของเว็บเพจได้
o Snippets เป็นส่วนที่เพิ่มใหม่ใน Dreamweaver MX ซึ่งมีประโยชน์ในการแยกเก็บ Code ไว้ตามโฟลเดอร์ที่แยกไปตามส่วนประกอบต่างๆของเว็บเพจ เพื่อความสะดวกในการนำส่วนนั้นมาใช้ทีหลัง
o Reference เป็นส่วนที่ใช้อธิบายความหมายของ Tag แต่ละ Tag หรือ Code ของ JavaScript หรือ VBScript ที่ใส่ในเว็บเพจ
· Application เป็นส่วนที่เสริมเข้ามาใน Dreamweaver MX เพื่อให้เว็บไซด์สามารถติดต่อกับฐานข้อมูลบนเว็บเซิร์ฟเวอร์ เหมาะกับการเขียนเว็บไซด์ที่เก็บข้อมูลบนฐานข้อมูล และสามารถใช้งานบน Internet ได้ ซึ่งจำแนกได้เป็น
o Database เดิมส่วนนี้จะปรากฏอยู่ใน Macromedia Ultradev ส่วนนี้เอาไว้ติดต่อกับฐานข้อมูล เพื่อนำมาใช้เขียน Application บนเว็บ
o Binding เป็นส่วนที่ใช้ในการรวบรวมข้อมูลต่างๆที่อยู่ภายในฐานข้อมูล เพื่อให้ง่ายต่อการเขียนคำสั่งควบคุมการแสดงผลข้อมูล
o Server Behaviors เป็นส่วนที่กำหนดการกระทำบนเว็บเซิร์ฟเวอร์ เมื่อมีการทำงานกับเว็บ Application
o Components เป็นส่วนสร้าง Components ต่างๆที่ใช้ในเว็บ Application
· Files เป็นส่วนที่บอกว่าภายในเว็บไซด์นั้นมีเว็บเพจ และโฟลเดอร์อะไรเก็บอยู่บ้าง ซึ่งเป็นประโยชน์มากในการตรวจสอบและดูแผนผังโดยรวมของเว็บไซด์ ซึ่งจำแนกได้เป็น
o Site ช่วยในการจัดการไฟล์กับโฟลเดอร์ในเว็บไซด์ที่สร้างขึ้น หรือจัดการกับไฟล์ทั้งหมดที่อยู่ในฮาร์ดดิสก์เช่นเดียวกับ Windows Explorer ในกรณีที่ต้องการสร้างเว็บ Application จำเป็นต้องกำหนดเว็บไซด์ให้โปรแกรมรู้จักกับ Site ด้วย
o Assets เป็นการกำหนดคุณสมบัติ ให้กับส่วนต่างๆของเว็บเพจ เช่น Template Library หรือ Script
· Answer เป็นส่วนช่วยเหลือของโปรแกรม
หมายเหตุ สามารถแยกส่วนต่างๆใน Panel Group ออกจากกลุ่มได้ โดยการวางเมาส์ชี้ที่ Gripper ซึ่งอยู่ด้านซ้ายสุดของแต่ละส่วนใน Panel Group แล้วลากไปยังตำแหน่งที่ต้องการ
Document Window
สำหรับหน้าต่างการทำงานของ Dreamweaver MX ผู้ใช้สามารถเลือกหน้าต่างการทำงานได้ 3 รูปแบบ โดยการเลือกไอคอนที่อยู่ใน Toolbar แถบเครื่องมือมาตรฐานดังนี้
การสร้างเว็บไซด์
ในโปรแกรม Dreamweaver MX นั้น Site จะหมายถึง สิ่งต่อไปนี้
· Website เป็นชุดของหน้าเว็บเพจ (Webpage) ที่เก็บอยู่ในเครื่องเซิร์ฟเวอร์ของระบบหรือ Internet
· Remote site เป็นชุดของไฟล์ที่ใช้ในการจัดสร้างเว็บไซด์นั้น ซึ่งถูกจัดเก็บไว้บนเครื่องเซิร์ฟเวอร์ และดูแลโดยผู้จัดสร้างเว็บไซด์
· Local site เป็นไฟล์ที่จัดเก็บอยู่ในฮาร์ดดิสก์ที่เครื่องของเรา ซึ่งจะถูกส่งขึ้นไปไว้ยัง Remote site เพื่อเผยแพร่ต่อไป โดย Local site นี้จะประกอบด้วย 3 ส่วนประกอบหลักขึ้นอยู่กับชนิดเว็บไซด์ที่สร้าง ได้แก่
1. Local Folder เป็นโฟลเดอร์ในฮาร์ดดิสก์ของเราที่เราใช้ทำงาน
2. Remote Folder เป็นโฟลเดอร์ในเครื่องเซิร์ฟเวอร์ที่จะใช้เก็บไฟล์เว็บเพจ เพื่อเผยแพร่
3. Folder for dynamic pages เป็นโฟลเดอร์ที่ Dreamweaver ใช้ในการจัดการหน้าเว็บเพจแบบ ไดนามิก
การสร้างเว็บไซด์ใน Dreramweaver MX นั้น สามารถสร้างได้ 2 แบบ คือ
1. การจัดสร้างเว็บไซด์โดยใช้วิซาร์ดสร้าง (Site Definition Wizard) ซึ่ง Dreamweaver จะกำหนดรูปแบบการใช้งานแบบต่างๆไว้แล้ว โดยมีขั้นตอนการทำงานดังนี้
· เลือกคำสั่ง Site > New Site – Site Definition > Basic > ใส่ชื่อเว็บไซด์ที่ต้องการ > Next
· ต้องการใช้ Server Technology ในการสร้างเว็บหรือไม่ และเลือกวิธีการทำงานร่วมกับเซิร์ฟเวอร์ ซึ่งเซิร์ฟเวอร์ต่างๆที่มีให้เลือกนั้นมีดังนี้
§ None ไม่ต้องการเลือกเซิร์ฟเวอร์แบบใด (ผู้ใช้เป็นผู้กำหนดการทำงานกับเซิร์ฟเวอร์เอง)
§ ASP JavaScript ทำงานร่วมกับเซิร์ฟเวอร์ที่รองรับ ASP และ JavaScript
§ ASP VBScript ทำงานร่วมกับเซิร์ฟเวอร์ที่รองรับ ASP และ VBScript
§ ASP.NET C# ทำงานร่วมกับเซิร์ฟเวอร์ที่รองรับเทคโนโลยีใหม่ (.NET) ของ Microsoft ได้แก่ ASP.NET และภาษาใหม่คือ VB (เวอร์ชั่นใหม่ที่รองรับเทคโนโลยีใหม่ .NET)
§ ASP.NET C# ทำงานร่วมกับเซิร์ฟเวอร์ที่รองรับเทคโนโลยีใหม่ (.NET) ของ Microsoft ได้แก่ ASP.NET และภาษาใหม่คือ C#
§ ASP.NET C# ทำงานร่วมกับเซิร์ฟเวอร์ที่รองรับเทคโนโลยีใหม่ (.NET) ของ Microsoft ได้แก่ ASP.NET และภาษาใหม่คือ VB (เวอร์ชั่นใหม่ที่รองรับเทคโนโลยีใหม่ .NET)
§ ColdFusion ทำงานร่วมกับเซิร์ฟเวอร์ที่ได้รับการพัฒนาของบริษัท Macromedia
§ JSP MySQL ทำงานร่วมกับเซิร์ฟเวอร์ที่รองรับ JSP และ MySQL
> Next
· เลือกรูปแบบการทำงานระหว่างไฟล์และเซิร์ฟเวอร์ (วิธีการสร้างและแก้ไขไฟล์เว็บเพจระหว่างเซิร์ฟเวอร์ หรือที่เครื่องเราเอง) และเลือกโฟลเดอร์ที่จะใช้ในการจัดเก็บไฟล์ > Next
· ทดสอบการส่งผ่านระหว่างไฟล์และเซิร์ฟเวอร์ > Next
· กำหนดให้แชร์ไฟล์เพื่อสร้างและแก้ไขไฟล์พร้อมกับผู้อื่น > Next
· แสดงรายการต่างๆ ที่ได้ตั้งค่าไว้ > Done > OK
2. การจัดสร้างเว็บไซด์โดยการกำหนดค่าเอง ซึ่งผู้ใช้เป็นผู้ออกแบบและสร้างโฟลเดอร์ที่ต้องการใช้จัดเก็บไฟล์ต่างๆ ในไซต์
· เลือก Site > New Site – Site Definition > Advanced – Category > Local Info > ระบุชื่อไซต์ นอกจากนี้กำหนดโฟลเดอร์ที่ใช้เก็บไฟล์ และโฟลเดอร์ที่ใช้เก็บรูปภาพ > OK
· Dreamweaver จะถามว่าต้องการสร้างไฟล์ Cache สำหรับเว็บไซด์ หรือไม่ (ไฟล์ Cache ใช้ในการปรับไฟล์ต่างๆในเว็บไซด์ ให้เชื่อมโยงกันอย่างถูกต้องเสมอ แม้ว่าจะมีการเคลื่อนย้ายไฟล์ข้ามโฟลเดอร์ย่อยก็ตาม
· ในส่วน Panel Group > Site จะแสดงไซด์ตามที่กำหนด
หลังจากสร้างไซด์เรียบร้อยแล้ว เราจะสร้างหน้าเว็บเพจใหม่ของไซด์นั้น โดยสามารถทำได้ดังนี้
· เลือกไซด์ที่จะสร้างหน้าเว็บเพจจาก Panel Group > Site
· เลือกคำสั่ง File(Main Menu) > New > General
ในส่วนของ General นั้น จะประกอบด้วยหน้าเว็บเพจหลายชนิดให้เลือกใช้ในการสร้างเว็บเพจเปล่า โดยจัดแบ่งออกเป็นกลุ่มๆ ในส่วนของ Category เช่น
- กลุ่ม Basic Page, Dynamic Page และ Frameset
ใช้ในการสร้างหน้าเว็บเพจเปล่าตามชนิดที่เลือก ตัวอย่างเช่น เลือก Baisc Page เพื่อสร้างเอกสาร HTML หรือเลือก Dynamic Page เพื่อสร้างหน้าเว็บเพจแบบ ColdFusion หรือ ASP เป็นต้น
- กลุ่ม Other
จะใช้ในการสร้างหน้าเว็บเพจที่ใช้เทคนิคพิเศษ เช่น CSS, JavaScript, VBScript
หรือ Text files
- กลุ่ม Template Page
จะใช้ในการสร้างหน้าเว็บเพจเพื่อนำไปสร้างเป็นแม่แบบต่อไป
- กลุ่ม CSS Style Sheets, Page Designs และ Page Designs (Accessible)
จะใช้ในการสร้างเว็บเพจจากแบบสำเร็จที่ได้เตรียมไว้ให้แล้ว
· เลือกกลุ่มที่ต้องการ > เลือกแบบของหน้าเว็บเพจ > Create
หรือเราจะสร้างเว็บเพจใหม่ในโฟลเดอร์โดย
Site > File (Site Panel) > New File
การเพิ่มFont ภาษาไทยให้กับ Dreamweaver
เนื่องจาก Dreamweaver ไม่สนับสนุนภาษาไทย เราต้องทำให้ Dreamweaver สามารถใช้ Font ภาษาไทยได้ โดยโหลดได้ที่ http://www.thaiware.com/software/develop/DV00250.htm
หลังจากที่เราติดตั้ง Font ภาษาไทยเรียบร้อยแล้ว เมื่อเปิดโปรแกรมขึ้นมา ให้เลือกคำสั่ง Edit > Preferences > Fonts/Encoding – Default Encoding > Thai Windows-874 > OK
นอกจากนี้เรายังสามารถเพิ่ม Font ภาษาไทยจาก Windows เพื่อใช้งานในเว็บเพจได้มากขึ้น โดยเลือกคำสั่ง Text > Font > Edit Font List และทำการเพิ่มFont ดังนี้
§ เลือก Font จาก Avilable Fonts
§ คลิก << Font ที่เลือกจะปรากฏใน Chosen Fonts
§ OK
หมายเหตุ แม้ว่าจะเพิ่ม Font ภาษาไทยเข้าไปใน Dreamweaver แล้ว ทุกครั้งที่เปิดหน้าเว็บเพจขึ้นมาใหม่ ต้องทำการตั้งค่าการใช้ภาษาไทยก่อน เพื่อให้เว็บเพจสามารถแสดงภาษาได้อย่างถูกต้อง
การกำหนดรายละเอียดของเว็บเพจ
เราสามารถกำหนดรายละเอียดต่างๆของหน้าเว็บเพจได้โดยใช้คำสั่งดังนี้
Modify > Page Properties >
§ Title กำหนดหัวเรื่องของหน้าเว็บ
§ Background Image กำหนดภาพที่ใช้เป็นฉากหลังของหน้าเว็บ
§ Background กำหนดสีที่ต้องการให้เป็นพื้นหลังของหน้าเว็บ
§ Text, Links, Visited Links, Active Links กำหนดสีให้กับ Link ในแบบต่างๆ
§ Left Margin / Margin Width กำหนดระยะขอบซ้ายของหน้าเว็บ (Explorer / Netscape)
§ Top Margin / Margin Height กำหนดระยะขอบซ้ายของหน้าเว็บ (Explorer / Netscape)
§ Document Encoding กำหนดชุดตัวอักษรที่ต้องการใช้
§ Tracing Image และ Image Transparency ใช้กำหนดภาพที่จะใช้อ้างอิง หรือใช้เป็น Template
เราสามารถกำหนด Title ได้จากช่อง Title ซึ่งอยู่บน Toolbar ได้
ในเรื่องของการใช้ Dreamweaver พื้นฐานซึ่งมีเนื้อหาเช่นเดียวกับเนื้อหาของวิชา AS 503 ในส่วนของ XHTML นั้น จะไม่กล่าวถึงในรายงานฉบับนี้
เทคนิคการใช้ Dreamweaver
เนื่องจากเทคนิคการใช้ Dreamweaver นั้นมีเป็นจำนวนมาก ดังนั้นในรายงานฉบับนี้จะขอนำเสนอเทคนิคการใช้ Dreamweaver ที่น่าสนใจดังนี้
I. การใช้ Multimedia
II. การแทรกและแก้ไข Code
I. การใช้ Multimedia (Flash, Shockwave, Fireworks, Java Applet, Plugin และ ActiveX)
ในโปรแกรม Dreamweaver นั้น เราสามารถนำ Multimedia File ต่างๆ เข้ามาใส่เพื่อแสดงผลร่วมกันในเว็บเพจได้อีก เช่นให้เว็บเพจแสดงภาพเคลื่อนไหว หรือกราฟิคแอนิเมชั่นต่างๆ ทั้ง 2 มิติ และ 3 มิติ โดยการนำเทคโนโลยี ได้แก่ Flash, Shockwave, Fireworks, Java Applet, Plugin และ ActiveX control มาใช้ ซึ่งในโปรแกรม Dreamweaver ที่ Common Category และ Media Category จะแสดงไอคอนของ Multimedia file ต่างๆ ที่เรานำมาแทรกบนหน้าเว็บเพจได้ โดยมีขั้นตอนพื้นฐานเหมือนกันคือ
แถบ Insert > Media > เลือกไอคอนประเภท Multimedia file ที่เราต้องการแทรก ซึ่งแต่ละไอคอน Multimedia คือ
> Flash Movie 
> Flash Button 
> Flash Text
> Shockwave 
> Applet 
> param
> ActiveX control 
> Plugin
หรือ คำสั่ง Insert > Media > เลือกประเภท Multimedia file ที่เราต้องการแทรก
หรือ คำสั่ง Insert > Interactive Images > เลือกประเภท Multimedia file ที่เราต้องการแทรก
การใส่ Flash movie
Macromedia Flash เป็นโปรแกรมที่ใช้สร้างและแสดงผลภาพกราฟิคและภาพเคลื่อนไหว ที่นิยมใช้ในเว็บเพจ เนื่องจากเป็นโปรแกรมแบบ Vector-based ที่ใช้ลายเส้นเป็นหลัก ทำให้ไฟล์ที่ได้มีขนาดเล็ก เมื่อนำมาแสดงผลบนเว็บจึงใช้เวลาโหลดไฟล์น้อยมาก ซึ่งโปรแกรม Dreamweaver สามารถแสดงผลไฟล์ที่สร้างมาจากโปรแกรม Flash ได้ทันที โดยไม่ต้องมีโปรแกรม Flash ติดตั้งอยู่ในเครื่อง
ไฟล์ที่เกิดจากโปรแกรม Flash นั้น มีอยู่ 3 ชนิด คือ
1. ไฟล์ Flash (.fla)
เป็นไฟล์ที่ถูกสร้างขึ้นในโปรแกรม Flash ต้องเปิดใช้ และแก้ไขโดยโปรแกรม Flash เท่านั้น ไม่สามารถเปิดใน Dreamweaver หรือที่ Web Browser
2. ไฟล์ Flash (.swf)
เป็นไฟล์ Flash (.fla) ที่บีบอัดเพื่อนำไปแสดงผลบน Web Browser ซึ่งสามารถแสดงผลใน Dreamweaver ได้ แต่ไม่สามารถนำมาแก้ไขในโปรแกรม Flash ได้อีก
3. ไฟล์ Flash (.swt)
เป็นไฟล์ Flash movie ที่แก้ไขได้ มักใช้เป็นไฟล์แม่แบบ แต่ไฟล์ชนิดนี้ไม่สามารถใช้ใน Dreamweaverได้
ดังนั้น Multimedia file ที่ได้จากโปรแกรม Flash นั้น จะมีนามสกุลเป็น .swf ซึ่งเราสามารถเปิดได้บนเว็บโดยผู้ใช้ต้องติดตั้งโปรแกรม Flash Player ซี่งBrowser รุ่นใหม่มีการติดตั้งไว้แล้วเป็นมาตรฐาน
การใส่ Flash Movie สามารถทำได้ดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง
2. Insert > Media > Flash
3. เลือกไฟล์ Flash movie (.swf) ที่ต้องการ ในกรณีที่ไฟล์นั้นไม่อยู่ในโฟลเดอร์ของเว็บไซด์ ให้เลือกปุ่ม Yes เพื่อ Copy แล้วตั้งชื่อไฟล์
4. ในส่วน Propertiies คลิกที่ปุ่ม Play เพื่อแสดงผล Flash Movie หรือ กด F12 เพื่อดูในWeb Browser
เมื่อเราคลิกที่ไอคอน Flash ส่วน Properties จะแสดงค่าต่างๆที่ใช้กำหนดการแสดง Flash Movie ซึ่งมีรายละเอียดดังนี้
Name กำหนดชื่อที่ใช้ในการอ้างอิงถึงไฟล์ Flash movie (.swf) นี้
W และ H กำหนดความกว้างและความสูงของการแสดงไฟล์นี้ โดยระบุหน่วยเป็นพิกเซล หรือจะระบุหน่วยเป็นอย่างอื่น เช่น pc (pica), pt (point), in (inches), mm (millimeters), cm (centimeters) หรือจะใช้เป็นเปอร์เซ็นต์เทียบกับนาดหน้าต่างก็ได้ โดยพิมพ์หน่วยย่อที่ใช้ในช่องว่างด้วย
File ระบุชื่อและตำแหน่งไฟล์ที่เรานำมาแทรก
Align กำหนดการจัดวางไฟล์นี้บนหน้าเว็บ
Bg กำหนดสีพื้นหลัง ที่ใช้ระบุพื้นที่ที่แสดงไฟล์นี้บนหน้าเว็บ ซึ่งเราจะเห็นสีนี้เมื่อไฟล์ไม่ได้ถูกแสดง เช่น ขณะที่กำลังโหลดไฟล์ เป็นต้น
V space และ H space กำหนดช่องว่างระหว่างขอบของไฟล์ที่แสดง
Parameters เปิดหน้าต่างรับค่าพารามิเตอร์สำหรับส่งไฟล์ Flash ซึ่งจะใช้ได้เมื่อ ไฟล์ Flash ถูกเขียนมาให้เข้าใจค่าพารามิเตอร์เท่านั้น
Srs ระบุชื่อและตำแหน่งไฟล์ที่เรานำมาแทรกในกรณีที่เรา Embed
Quality กำหนดความละเอียดในการแสดงไฟล์ภาพเคลื่อนไหว
Scale กำหนดค่าพารามิเตอร์ SCALE
Autoplay เมื่อมีการโหลดหน้าเพจขึ้นมาให้เปิดไฟล์นี้โดยอัตโนมัติ
Loop กำหนดให้เล่นภาพเคลื่อนไหววนรอบไปเรื่อยๆ
การสร้างปุ่มกดด้วย Flash Botton
ในการสร้างเว็บเพจโดยทั่วไป จะมี button ซึ่งมีลักษณะเป็นปุ่มกด เพื่อให้ผู้ชมคลิกเลือกการกระทำต่างๆ เช่น คลิกเพื่อไปยังเว็บเพจถัดไป เป็นต้น ซึ่งทำให้เว็บเพจของเรามีความน่าสนใจยิ่งขึ้น โดยปกติเราต้องออกแบบปุ่มกดเหล่านี้ในโปรแกรมกราฟิคอื่นๆ แต่ในโปรแกรม Dreamweaver นั้น เราสามารถสร้าง button ขึ้นมาใช้งานในเว็บเพจของเราได้เลย โดย Dreamweaver จะสร้างไฟล์ Button เป็นไฟล์ Flash ให้โดยอัตโนมัติ ซึ่งเราเรียกกันว่า Flash Button และการสร้าง Flash Button มีขั้นตอนดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง
2. Insert > Media > Flash button หรือ
Insert > Interactive Images > Flash button
3. กำหนดรูปแบบของข้อความ Link ที่เราต้องการในหน้าต่าง Insert Flash Button
ซึ่งมีรายละเอียดดังนี้
Sample แสดงตัวอย่างปุ่มกดตามรูปแบบที่เราเลือกใน Style
Style เลือกลักษณะปุ่มกดที่ต้องการ
Button Text พิมพ์ข้อความที่จะให้ปรากฏในปุ่มกด
Font & Size รูปแบบและขนาดตัวอักษรที่ใช้แสดงข้อความบนปุ่มกด
Link ระบุที่อยู่ของไฟล์ หรือ URL ที่เราต้องการให้ปุ่มกดนั้น link ไป
Target กำหนดลักษณะหน้าต่างเว็บเพจ หรือBrowser ที่เราต้องการเปิดขึ้นมา เมื่อได้ link ไปแล้ว
Bg Color เลือกสีพื้นหลังให้ปุ่มกด
Save as กำหนดชื่อไฟล์ที่จะบันทึก Flash button นี้
คลิกปุ่ม OK
4. ในส่วน Propertiies คลิกที่ปุ่ม Play เพื่อดูรูปปุ่มที่ได้
หรือ กด F12 เพื่อดูผลใน Web Browser
การสร้างข้อความที่เป็น Link ด้วย Flash Text
Flash Text เป็นส่วนที่ใช้ในการสร้างข้อความที่เป็น Link เมื่อผู้ชมคลิกที่ข้อความนี้ จะเชื่อมโยงไปยังเป้าหมายที่เรากำหนดไว้ โดยข้อความที่เป็น Link นี้จะถูกสร้างเป็นไฟล์ Flash movie ซึ่งดูสวยงาม แต่มีขนาดเล็กทำให้โหลดได้เร็ว
ขั้นตอนการสร้าง Flash Text มีดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง
2. Insert > Media > Flash Text หรือ
Insert > Interactive Images > Flash Text
3. กำหนดรูปแบบของข้อความ Link ที่เราต้องการในหน้าต่าง Insert Flash Text
ซึ่งมีรายละเอียดดังนี้
Font & Size รูปแบบและขนาดตัวอักษรที่ใช้แสดงข้อความ Color กำหนดสีของตัวอักษร
Rollover Color กำหนดสีของตัวอักษรเมื่อผู้ใช้นำเมาส์ไปวางเหนือข้อความนี้
Text พิมพ์ข้อความที่เราต้องการ
Link ระบุที่อยู่ของไฟล์ หรือ URL ที่เราต้องการให้ข้อความนั้น link ไป
Target กำหนดลักษณะหน้าต่างเว็บเพจ หรือBrowser ที่เราต้องการเปิดขึ้นมา เมื่อได้ link ไปแล้ว
Bg Color เลือกสีพื้นหลังให้ข้อความ
Save as กำหนดชื่อไฟล์ที่จะบันทึก Flash Text นี้
คลิก OK
4. ดูผลใน Web Browser
หมายเหตุ เมื่อเราได้แทรก Flash button และ Flash Text ในหน้าเว็บเพจของเราแล้ว Dreamweaver จะสร้างไฟล์ Flash Movie เก็บไว้ในโฟลเดอร์ที่เป็นเว็บไซด์ของเราให้โดยอัตโนมัติ
การใส่ Shockwave
นอกจาก Macromedia Flash MX แล้วนั้น บริษัท Macromedia มีโปรแกรมสำหรับสร้างงาน Multimedia ที่ได้รับความนิยมอย่างสูงอีก 2 โปรแกรม คือ Director และ Authorware โดย Director จะใช้สร้างงาน Multimedia ที่ใช้ภาพเคลื่อนไหวและมีการโต้ตอบกับผู้ใช้ เช่น เกมส์ ภาพยนตร์ ส่วน Authorware นั้น จะเน้นในงาน Multimedia ช่วยสอน CAI (Computer Aided Instruction) แต่เนื่องจาก Multimedia file ที่ได้จากโปรแกรมทั้ง 2 นั้น มีขนาดใหญ่ ไม่เหมาะกับการนำเสนอบนเว็บ ดังนั้นจึงต้องใช้ไฟล์ควบคุม Shockwave ในการแสดงผล ไฟล์ชนิดนี้สามารถแสดงผลได้อย่างรวดเร็ว เนื่องจากโปรแกรมจะทำการแบ่งไฟล์ออกเป็นส่วนๆ แล้วอ่านไปแสดงผลไป โดยไม่รอให้อ่านจนจบทั้งไฟล์ โปรแกรม Shockwave นี้สามารถใช้ได้ทั้งใน Netscape Navigator plug-in และ ActiveX control
การใส่ไฟล์ Shockwave สามารถทำได้ดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง
2. Insert > Media > Shockwave หรือ <Ctrl+Alt+D>
3. เลือกไฟล์ Shockwave ที่ต้องการ ในกรณีที่ไฟล์นั้นไม่อยู่ในโฟลเดอร์ของเว็บไซด์ ให้เลือกปุ่ม Yes เพื่อ Copy แล้วตั้งชื่อไฟล์
4. ในส่วน Propertiies คลิกที่ปุ่ม Play เพื่อแสดงผล Shockwave หรือ กด F12 เพื่อดูในWeb Browser
หมายเหตุ รายละเอียดการกำหนดค่าต่างๆ ในส่วน Properties ของ Shockwave นั้น จะมีคุณสมบัติเช่นเดียวกับการกำหนดค่าต่างๆ ใน Flash movie
การแทรก Code ที่สร้างจาก Fireworks
Fireworks เป็นโปรแกรม Multimedia ใช้สำหรับสร้างกราฟิคบนเว็บ ซึ่งสามารถตกแต่งภาพและลดขนาดภาพเพื่อการแสดงบนหน้าเว็บ นอกจากนี้ยังสามารถสร้างปุ่มกด ภาพเคลื่อนไหวแบบง่ายๆได้ด้วย ซึ่ง Dreamweaver และ Fireworks จะทำงานประสานกันได้เป็นอย่างดี โดย Multimedia ต่างๆทีเราสร้างใน Fireworks นั้น จะแปลงเป็น HTML code ที่สามรถนำไปแทรกในหน้าเว็บเพจที่ต้องการได้ด้วย Dreamweaver ซึ่งมีวิธีการแทรกดังนี้
1. Insert > Interactive Image > Fireworks HTML
2.
 |
คลิก Browse เพื่อเลือกไฟล์ HTML ที่โปรแกรม Fireworks สร้างขึ้นมา
3. เลือกไฟล์ > Open > OK
Multimedia ที่เราสร้างจาก Fireworks จะแสดงขึ้นในหน้าเว็บเพจ
4. Save as ตั้งชื่อไฟล์ใหม่ เพื่อใช้ในการเรียกไฟล์นี้จาก Dreamweaver
การใช้ Java Applet, ActiveX control
Java Applet เป็นโปรแกรมที่สร้างจากภาษา Java ที่มีหน้าที่บางด้าน เช่น ใช้สร้างเกมส์ ภาพเคลื่อนไหว Java Applet มีขนาดเล็ก และจะถูกโหลดจาก Web Server พร้อมกับเนื้อหาของเว็บเพจ และทำงานที่เครื่องเราได้โดยอัตโนมัติ จุดเด่นของJava Applet สามารถโต้ตอบกับผู้ใช้ได้แบบเฉพาะเจาะจง เช่น เว็บเพจที่เล่นเกมส์กับผู้ใช้
ActiveX control หรือ OLE control เป็นโปรแกรมเล็กๆที่เรียกว่า Control ไม่ใช่โปรแกรมภาษาคอมพิวเตอร์ และเป็นเทคโนโลยีที่ใช้สร้างเว็บไซด์ที่สามารถโต้ตอบกับผู้ใช้ได้ ลักษณะการทำงานของ ActiveX control คล้ายกับ Java Applet แต่สามารถทำงานได้กับ Internet Explorer ในระบบ Windows เท่านั้น
การใช้ Java Applet , ActiveX control ใน Dreamweaver นั้น มีขั้นตอนดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง
2. Insert > Media > Java Applet หรือ ActiveX Control
3. เลือกไฟล์ Java Applet หรือ ActiveX Control ที่ต้องการ
หมายเหตุ การกำหนดค่ารายละเอียดต่างๆ ของ Java Applet หรือ ActiveX control ให้แก้ไข เปลี่ยนแปลงในส่วน Properties
การใส่ไฟล์เสียง
ไฟล์เสียงที่สามารถนำมาใช้บนเว็บเพจมีอยู่หลายชนิด ซึ่งแต่ละชนิดมีข้อดีข้อเสียในการใช้งานบนเว็บเพจแตกต่างกัน อีกทั้งยังต้องการโปรแกรมเสริม (plug-in) ในการแสดงผลที่ต่างกัน โดยไฟล์เสียงที่ต้องมีโปรแกรมเสริมนั้น ส่วนมากเป็นไฟล์ที่ถูกบีบอัดให้มีขนาดเล็ก เช่น .mp3, .ra, .ram, .rpm หรือ Real Audio, .midi หรือ .mid โดยมีขั้นตอนในการใส่ไฟล์เสียงลงในเว็บดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง
2. Insert > Media > Plugin
3. เลือกไฟล์เสียงที่ต้องการ
4. Save ไฟล์แล้วตรวจผลการทำงานทาง Browser หรือคลิก Play ที่ส่วน Properties
II การแทรกและแก้ไข CODE
ถึงแม้ว่า Dreamweaver MX จะช่วยให้เราสามารถสร้างเว็บเพจได้โดยไม่ต้องยุ่งเกี่ยวกับภาษา HTML แต่สำหรับผู้ใช้บางท่านที่ต้องการแก้ไข และเพิ่มเติมรายละเอียดโดยการแทรก Script Language หรือ Script ASP หรือต้องการเพิ่มเติมแก้ไขด้วยภาษา HTML ซึ่งโปรแกรม Dreamweaver MX นี้มีส่วนที่รองรับการทำงานไว้ให้พร้อมแล้ว
การแทรก Script Language
การแทรก Script Language ลงใน Dreamweaver นั้น สามารถทำได้โดยมิวิธีการดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง
2. Insert > Script – Language เลือกชนิด Script Language ที่เราต้องการแทรก
3. ในช่อง Content ให้เราพิมพ์ Script ที่ต้องการแทรก > OK
4. Save และตรวจสอบผลทาง Browser ซึ่งจะแสดงผลการทำงานของ Script
เราสามารถแก้ไข Script language ที่แทรกไว้ได้ โดยเลือก Insert > Script > คลิก Edit ที่ส่วน Properties
การแทรก Script ASP
ASP หรือ Active Server Page เป็นรูปแบบการสร้างเว็บแบบหนึ่งที่นิยมมาก ซึ่งความสามารถของ ASP นั้นมีมากมายขึ้นกับความคิดสร้างสรรค์ของเรา เช่น การคำนวณค่าใช้จ่ายในการซื้อขายผ่านInternet เป็นต้น เราสามารถแทรก Script ASP ในหน้าเว็บเพจ ในโปรแกรม Dreamweaver ได้ดังนี้
1. วางเคอร์เซอร์ ในตำแหน่งที่ต้องการแสดง Script ASP ในหน้าเว็บเพจ
2. เลือกปุ่ม <> ในส่วน Mini Launcher เพื่อเปิดหน้าต่าง HTML Source ขึ้นมา
3. เขียน หรือแทรก Script Asp ในตำแหน่งที่เรากำหนดไว้โดยใช้คำสั่ง
<% ….. ภาษา ASP….. %>
เมื่อปิดหน้าต่าง HTML SOURCE จะปรากฏไอคอน ASP ในหน้าเว็บเพจ แสดงตำแหน่งที่แทรก
Script ASP
4. Save file ที่แทรกด้วย ASP Script เป็นนามสกุล *.asp
ในการตรวจสอบการทำงานของ ASP ผ่านทาง Browser เราต้องติดตั้งโปรแกรม Personal Web Server ลงในเครื่องก่อน จึงจะแสดงผลการทำงาน และเมื่อเราต้องการแก้ไข ASP Script เราสามารถคลิกที่ปุ่ม ASP ที่ปรากฏบนหน้าเว็บเพจ และคลิกEdit ในส่วน Properties แล้วทำการแก้ไข
การแทรกและแก้ไข HTML Code
เราสามารถดู HTML Code ของหน้าเว็บเพจขณะนั้นได้ดังนี้
§ การดู HTML Code ในหน้าต่าง Document
View > Code
§ การดู HTML Code ในหน้าต่างแยกต่างหาก
Window > Others > Code Inspector
§ การดู HTML Code และผลที่ได้ในหน้าต่าง Document
View > Code and Design
การแทรกและแก้ไข HTML Code สามารถทำได้หลายวิธีดังนี้
วิธีที่ 1 : การแทรกและแก้ไข HTML Code ในมุมมอง Code View
· การแทรก Code โดยเลือกจาก Insert bar
การแทรก Code ที่ง่ายที่สุด ได้แก่ การแทรก Code โดยเลือกจาก Insert bar โดยกระทำดังนี้
1. วางเคอร์เซอร์ที่บริเวณจะแทรก Code
2. คลิกที่ปุ่มบนแถบ Insert
โปรแกรมจะแทรก Code ของสิ่งที่เราเลือกให้ทันที หรืออาจแสดงกรอบโต้ตอบเพื่อให้ใส่ค่าตามสิ่งที่เราเลือกนั้นต้องการ
· การแทรก Code สำเร็จรูป (Code Snippets)
Code Snippets เป็น HTML Code เล็กๆ ที่ให้ผลเฉพาะอย่างตามที่ถูกเขียนไว้ ซึ่งเราสามารถเรียกใช้ได้ทันที โดยมีวิธีการดังนี้
1. วางเคอร์เซอร์ที่บริเวณจะแทรก Code
2. Panel group > Code > Snippets
3. ดับเบิ้ลคลิกที่ snippets ที่ต้องการ
· การแทรกและแก้ไข Code ด้วย Code Hints
เมื่อเราวางเคอร์เซอร์และพิมพ์ ‘ < ‘ ในส่วนที่ต้องการแทรก HTML Code ในหน้าต่าง Code view จะปรากฏ Tag ให้เลือกใช้ ซึ่งเมื่อเราเลือกและกำหนดค่าเรียบร้อยแล้วนั้น กด Enter
· การแทรก Tag ด้วย Tag Chooser
เมื่อเราวางเคอร์เซอร์และพิมพ์ ‘ < ‘ ในส่วนที่ต้องการแทรก HTML Code ในหน้าต่าง Code view คลิกขวา เลือก Insert Tag จะปรากฏ Tag Chooser แล้วเลือก Tag ที่ต้องการ
จากนั้นกด Insert > Close
· การแก้ไขด้วย Tag Editor
เมื่อเราวางเคอร์เซอร์และพิมพ์ ‘ < ‘ ในส่วนที่ต้องการแทรก HTML Code ในหน้าต่าง Code view คลิกขวา เลือก Edit Tag จะปรากฏ Tag Editor แล้วทำการแก้ไขตามต้องการ จากนั้นคลิก OK
· การแก้ไขด้วย Tag Inspector
คลิกที่ Windows > Tag Inspector หรือไปที่ Panel Groups คลิก Code > Tag Inspector จากนั้นมาที่ Code view คลิกเลือก Tag ที่ต้องการแก้ไข เมื่อทำการแก้ไขคลิกที่อื่นใน Panel เพื่อให้การแก้ไขมีผล
วิธีที่ 2 : การแทรกและแก้ไข HTML Code ในมุมมอง Design View
· การแก้ไขด้วย Tag Selector
1. คลิกเลือก Tag ที่จะแก้ไขใน Code View ซึ่งจะปรากฏ Tag ของส่วนนั้นที่ Tag Selector
2. ใน Tag Selector คลิกขวาที่ Tag นั้น แล้วเลือก Edit Tag เพื่อแก้ไข หรือเลือก Remove Tag เพื่อลบออก
· การแทรกและแก้ไขโดยใช้ Quick Tag Editor
การแทรก Tag
ในส่วน Design View วางเคอร์เซอร์ในตำแหน่งที่ต้องการแทรก Tag จากนั้นกด Ctrl+T เพื่อเปิดใช้ Quick Tag Editor จะเข้าสู่สภาวะ Insert HTML
พิมพ์ข้อความที่ต้องการแล้วกด Enter
การแก้ไข Tag
ในส่วน Design View เลือกออบเจกต์ที่จะแก้ไข Tag จากนั้นกด Ctrl+T เพื่อเปิดใช้ Quick Tag Editor จะเข้าสู่สภาวะ Edit Tag
พิมพ์แก้ไขตามที่ต้องการแล้วกด Enter
ไม่มีความคิดเห็น:
แสดงความคิดเห็น