* การสร้างเว็บเพจด้วย Dreamweaver MX

โปรแกรม Macromedia Dreamweaver MX เป็นโปรแกรมประเภท Web Design สร้างเอกสารเว็บที่ทำงานในลักษณะ HTML Generator คือ โปรแกรมจะสร้างรหัสคำสั่ง HTML ให้อัตโนมัติโดยผู้ใช้ไม่ต้องเรียนรู้ภาษา HTML หรือป้อนคำสั่ง HTML มีลักษณะการทำงาน คล้าย ๆ กับการพิมพ์เอกสารด้วย Word Processor โดยใช้ปุ่มเครื่องมือ (Toolbars) หรือแถบคำสั่ง (Menubar) ควบคุมการทำงาน ช่วยให้การใช้งานง่าย สะดวกและรวดเร็ว

 

จุดเด่นของโปรแกรม Macromedia Dreamweaver MX

1. ผู้ใช้ไม่ต้องศึกษาภาษา HTML ก็สามารถสร้างเว็บเพจได้เพราะด้วยตัวโปรแกรมมีฟังก์ชั่นการทำงาน แบบ HTML Generator

2. สร้างภาพเคลื่อนไหว(Animation) โดยใช้รูปแบบของ Macromedia Director ด้วยคุณสมบัติ Animate Netscape และ CSS-P Layers ทำให้ได้ภาพเคลื่อนไหวบนเบราเซอร์ โดยไม่ต้องอาศัย Plugin ใด ๆ

3. ความสามารถในการสร้างโดยการอิมพอร์ทจาก Text File

4. สนับสนุน CSS (Cascading Style Sheet)

5. ความสามารถในการตรวจสอบเบราเซอร์

6. ความสามารถในการปรับปรุง ดูแลรักษาเว็บไซต์เช่น การตรวจสอบลิงก์ สร้างรายงานแสดงผลการทดสอบการทำงาน มีฟังก์ชั่นในการโอนถ่ายข้อมูล (FTP) ขึ้นเครื่องแม่ข่าย

7. ความสามารถในการทำ Image Roller หรือรูปภาพที่สามารถเปลี่ยนแปลง เมื่อนำเมาส์มาวาง

8. ปุ่มควบคุมการทำงาน ได้จัดแบ่งเป็นหมวดหมู่ ช่วยให้การสั่งงานกระทำได้สะดวก รวดเร็ว

9. สามารถใช้งานภาษาไทยได้

10.กรณีที่ต้องการควบคุมคำสั่ง HTML มีฟังก์ชั่นให้ป้อน หรือแก้ไขรหัสคำสั่ง HTML ด้วย HTML Inspector รวมทั้งแก้ไขเอกสารเว็บอื่น ๆ ได้ เช่น HomeSite for Windows  

 

ส่วนประกอบของหน้าต่างโปรแกรม Dreamweaver MX

โปรแกรม Dreamweaver MX มีลักษณะหน้าต่างการทำงานเป็นแบบลอยตัว (Floating) ประกอบด้วยส่วนการทำงานต่าง ๆคือ

 

1. แถบไตเติ้ลบาร์ (Title Bar) ส่วนที่แสดงชื่อโปรแกรมที่เปิดใช้งาน

2.แถบเมนูคำสั่ง (Menu Bar) ส่วนที่รวมคำสั่งการทำงานและคำสั่งคีย์ด่วนหรือคีย์ลัด

3. แถบเครื่องมือเอกสาร (Document Bar) กลุ่มหน้าต่างแสดงการใช้งานด้าน HTML

4. แถบกลุ่มเครื่องมือ Inser t เป็นแถบเครื่องมือที่รวบรวมหลายกลุ่มแถบเครื่องมือไว้ด้วยกัน

5.หน้าต่างจอภาพหลัก เรียกว่า Document หรือ Stage เป็นพื้นที่หลักสีขาว สำหรับการทำงานใช้ในการป้อนข้อมูล และคำสั่งต่าง ๆ

6. แถบเครื่องมือแสดงชื่อเว็บที่เปิดใช้งาน

7.แถบเครื่องมือ Properties เป็นเครื่องมือที่ใช้กำหนดค่าของเครื่องมือ ขึ้นอยู่กับเครื่องมือที่เลือกใช้ เช่น ใช้ในการกำหนดชื่อไฟล์ภายในเว็บเพจ ตัวอักษร รูปภาพ ใช้ในการกำหนดลิงค์ ตาราง ฟอร์ม

8.แถบเครื่องมือ Panal เป็นส่วนของหน้าต่างเมื่องต้องการเพิ่มเติมความสามารถบางอย่างลงในเว็บเพจ เช่น เพิ่ม CSS เพื่อใช้ในการจัดแต่งส่วนต่าง ๆ ของเว็บเพจ การทำ Layer เป็นต้น

9. ส่วนของ Window Size กำหนดขนาดพื้นที่ใช้งานตามที่ต้องการโดยคลิกที่บริเวณ 803 × 445

 

ขั้นตอนการสร้างเว็บเพจ

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

1.คลิกเมนู File > คลิก NEW (Ctrl + N)

2. ในช่อง Category เลือก Basic Page และในช่อง Basic Page เลือก HTML

จากนั้นคลิกที่ Create

 

 

การพิมพ์ข้อความบนเว็บเพจ
การพิมพ์ข้อความบนเว็บเพจด้วยโปรแกรม Dreamweaver MX มีอยู่ด้วยกัน 3 วิธี คือ

3. พิมพ์ข้อความเป็นเอกสาร HTML ข้อนี้สำหรับผู้ใช้ที่ถนัดภาษา HTML คลิกปุ่ม

Code แล้วพิมพ์ข้อความลงในเอกสาร < bady > หรือ < head >

 

การแทรกรูปภาพบนเว็บเพจ

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

 

วิธีนำรูปภาพมาใส่ในหน้าเว็บเพจ

1.คลิกวางเคอร์เซอร์ตำแหน่งที่ต้องการ

2.คลิกปุ่ม บนแถบเครื่องมือ Insert หรือคลิกปุ่ม Insert เลือกรายการ Image

3. จะปรากฎหน้าต่าง Select Image Source

 

4. คลิกเลือกรูปภาพที่ต้องการ

5. คลิกปุ่ม OK จะปรากฎรูปภาพบนหน้าจอ

 

วิธีปรับขนาดรูปภาพ

1.คลิกที่รูปภาพให้มีจุด Handle สีดำ

2.เลื่อนเมาส์บริเวณ จุด Handle สีดำ จะปรากฎลูกศร 2 หัว

3.คลิกเมาส์ตรงจุด Handle ค้างไว้ แล้วย่อ หรือขยายภาพตามขนาดที่ต้องการ

วิธีการใส่คำอธิบายแสดงข้อความบนรูปภาพ

1. คลิกรูปภาพให้มีจุด Handle สีดำ

2. คลิกวางเคอร์เซอร์ช่อง AIT พิมพ์คำว่า Bugs life

3. คลิกเมนู File เลือกรายการ Preview in Browse คลิกรายการ ixplore หรือ กดปุ่ม F12

เพื่อทดลองผลงานบนเบราเซอร์ (Internet Explorer)

 

 

การสร้างจุดเชื่อมโยง Link

ลิงก์ (Link) หรือจุดเชื่อมโยง มีหลายรูปแบบ ดังนี้

การสร้างลิงก์แบบข้อความ

การสร้างลิงก์แบบรูปภาพ

การสร้างลิงก์โดยใช้ Named Anchor

การสร้างลิงก์แบบ Image Map

การสร้างลิงก์ไปยัง E – mail

การสร้างลิงก์ไปยังเว็ปไซต์อื่น

การสร้างลิงก์แบบ Rollover Image

การสร้างลิงก์ใน Dreamweaver MX ส่วนสำคัญจะอยู่ที่แถบเครื่องมือ Properties ซึ่งจะมีอยู่ 2 ส่วนด้วยกัน คือ

1. Link คือ แถบสำหรับเลือกไฟล์ที่ต้องการจะลิงก์ไปถึ’

2. Target คือ แถบสำหรับเลือกรูปแบบของปลายทาง ซึ่งได้แก่

_blank คือการแสดงเว็บเพจปลายทางเป็นหน้าต่างใหม่

_Parent คือการแสดงเว็บเพจที่หน้าต่างเดี่ยว แต่อยู่ในเฟรมหลัก

_self คือการแสดงเว็บเพจในเฟรมเดียวกันต้นทาง

_top คือการแสดงเว็บเพจ โดยไม่มีเฟรม

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

 

Ex : ขั้นตอนการสร้างลิงก์จากข้อความ

1.พิมพ์ข้อความบนหน้าต่างทำงาน

2.ลากเมาส์คลุมข้อความให้มีแถบสี

3.คลิกปุ่ม ในแถบ Properties

4. เพื่อเลือกไฟล์ที่จะทำการลิงก์

5.คลิกปุ่ม OK

6.ข้อความจะเปลี่ยนเป็นสีฟ้ามีเส้นใต้

ขีดอยู่

(การลิงก์รูปแบบอื่นก็ทำเช่นเดียวกัน)

 

 

การสร้างเลเยอร์ Layer

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


ส่วนประกอบของเลเยอร์
1.หูเลเยอร์ มีไว้เพื่อดึง หรือลากเลเยอร์
2.จุดปรับขนาดจุดสีดำ 8 จุดใช้ในการปรับขนาด หรือย่อ-ขยายเลเยอร์

 

วิธีการสร้างเลเยอร์

1. คลิกป้ายคำสั่ง Layer บนแถบเครื่องมือ Insert

2. คลิกปุ่ม Draw Layer

3. ลากเมาส์สร้างเลเยอร์ให้ได้รอบสี่เหลี่ยมขนาดตามต้องการ

4.คลิกเมาส์วางเคอร์เซอร์ในพื้นที่ของเลเยอร์ พิมพ์ข้อความ หรือ นำรูปภาพมาวางภายในเลเยอร์

5.คลิกป้ายคำสั่ง Common

6. คลิกปุ่ม

7.คลิกเลือกรูปภาพที่ต้องการ แล้วคลิกปุ่ม OK

8. จะปรากฎรูปภาพในเลเยอร์

9.ทดลองเลื่อนเลเยอร์ โดยเลื่อนเมาส์วางที่หูเลเยอร์ ให้มีลูกศร 4 หัวแล้วเลื่อนไปมา

 

ประโยชน์ของ Layer Palette

1. ใช้ในการบอกตำแหน่งของเลเยอร์ ทำให้ทราบได้ว่าเลเยอร์ใดอยู่บริเวณตำแหน่งใด

2. สามารถเปลี่ยนตัวเลขที่อยู่ทางช่อง Z ด้านขวาเพื่อจัดลำดับเลเยอร์(ใช้สำหรับการมีเลเยอร์มาก)

3. เมื่อต้องการจะเรียกใช้เลเยอร์ใด สามารถคลิกที่ชื่อเลเยอร์ภายในช่อง Layer Palette นั้น จะทำให้เลเยอร์ที่อยู่ในหน้าต่างทำงานก็จะถูกเรียกไปด้วย โดยสังเกตจะปรากฎจุด Handle

4. คลิกเมาส์ที่เลเยอร์ 1 แล้วกดปุ่ม Ctrl ค้างไว้ ลากไปไว้ในเลเยอร์ 2 จำให้เลเยอร์ซ้อนกัน

5. ถ้าคลิกสัญลักษณ์รูปดวงตา ใช้ในการกำหนดว่าจะแสดงหรือไม่แสดงเลเยอร์

6. สามารถป้อนกันการซ้อนทับของเลเยอร์ โดยคลิกเครื่องหมาย √ หน้าคำว่า Prevent Overlaps

 

การ UpLoad ไฟล์ขึ้นสู่เว็บไซต์

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

ตัวอย่าง รายชื่อเว็บไซต์ที่ให้บริการพื้นที่ฟรี (ของไทย)

- www.thai.net

-www.thaitopsites.com

-www.thai4free.com

-www.se-ed.net

-www.thcity.com

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

**เราต้องทำการสมัครขอใช้บริการพื้นที่ฟรี จากเว็บที่ยกตัวอย่าง หรือจากเว็บอื่น ๆ **

 

ขั้นตอนการอัพโหลด แบบ Browser

1. พิมพ์ชื่อเว็ปไซต์ที่เราสมัครขอพื้นที่เรียบร้อยแล้ว

2.พิมพ์ชื่อที่ตั้งไว้

3.พิมพ์รหัสผ่านช่อง Password

4. เข้าสู่ระบบ คลิกปุ่ม Sign in

6. เลือกคลิกที่รายการ ที่จะ Upload

7. เมื่อปรากฎหน้าต่างเริ่มการอัพโหลดแบบไฟล์ Browser

8. คลิกปุ่ม Browser เพื่อหาไฟล์เว็บเพจที่ต้องการอัพโหลดให้เลือกไฟล์แรกคือ Index.html ก่อนเป็นหน้าแรกสุด เลือกไฟล์ช่องละ 1 ไฟล์ จนครบหมด

9.ให้คลิกปุ่ม Upload files

10. เมื่อทำการอัพโหลดเรียบร้อย พิมพ์เว็บไซต์ที่ตั้งไว้ ทดสอบผลลัพธ์บนอินเตอร์เน็ต

 

การบันทึกงานเว็บเพจ

การบันทึกงานเว็บเพจมี 3 แบบคือ

1.วิธีการบันทึกในรูปบบปกติ

2.วิธีการบันทึกเพิ่มเติม หรือบันทึกทับงานเดิม

3.วิธีการบันทึกเว็บเพจในรูปบบต้นฉบับ (Template)

การบันทึกไฟล์เว็บเพจ คือการจัดเก็บข้อมูลเว็บเพจ ให้อยู่ในรูปแบบของภาษา HTML เพื่อให้พร้อมสำหรับการใช้งานบน Browser ในกรณีนี้ใช้โปรแกรม Dreamweaver MX 2004

วิธีการบันทึกในรูปแบบปกติ

1.คลิกเมนู File

2. เลือกรายการ Save As… หรือ กดปุ่ม Ctrl+Shift+S

3. คลิกเลือกโฟลเดอร์ที่ต้องการจัดเก็บข้อมูลช่อง Save in

4. ตั้งชื่อไฟล์ของเว็บเพจ File name

5. เลือกช่อง Save as Type.. เป็น All Documents

6. คลิกปุ่ม Save

 

วิธีบันทึกเว็บเพจเพิ่มเติม

1.คลิกเมนู File

2. เลือกรายการ Save

3.จะเป็นการบันทึกไฟล์ข้อมูลล่าสุด โดยยังใช้ไฟล์ชื่อเดิม

วิธีนี้เป็นการบันทึกไฟล์ใหม่ทับไฟล์เดิมลงไปเรื่อย ๆ เมื่อมีการเปลี่ยนแปลง สามารถบันทึกใหม่ได้ โดยยังใช้ชื่อเดิมอยู่ แต่ถ้าต้องการจะบันทึกเป็นชื่อใหม่ ให้กดปุ่ม Ctrl+Shift+S แล้วเพิ่มชื่อ

ที่ต้องการแทน

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

เทมเพลตช่วยลดเวลาในการออกแบบหน้าเว็บเพจได้ เพราะสามารถกำหนดเทมเพลตได้ว่าส่วนใดที่ปลี่ยนแปลงได้และส่วนใดที่เปลี่ยนแปลงไม่ได้

 

 

.................................................................................................................