Transcript Page 37 E-LEARNING เริ่มใช้งาน Macromedia Dreamweaver MX

แนะนำ
• ศึกษำควำมรูพ้ ้ ืนฐำนและส่วนประกอบต่ำง ๆ ของโปรแกรม กำร
่ ต้น
Macromedia Dreamweaver สร้ำงไซต์ กำรกำหนดค่ำเริม
ของโปรแกรมให้ใช้ภำษำไทยได้อย่ำงสมบูรณ์ กำรกำหนดตัวอักษร
กำรปรับเปลี่ยนสีพ้ ืนหลังของเว็บเพจ กำรใช้โปรแกรม webBrowser
กำรบันทึกเว็บเพจ
Free Powerpoint Templates
Page 1
MACROMEDIA DREAMWEAVER MX
ทำควำมรูจ้ กั กับ Macromedia Dreamweaver MX
Macromedia Dreamweaver Mx จัดเป็ นโปรแกรมสำเร็จรูป
อีกโปรแกรมหนึ่งทีเ่ ป็ นทีน่ ิยมของกลุม่ บุคคลทัว่ ไปเนื่องจำกมีกำรใช้
งำนทีค่ อ่ นข้ำงง่ำยและไม่ซบั ซ้อนมำกนัก
โปรแกรม Macromedia Dreamweaver เป็ นโปรแกรมสร้ำง
เอกสำรเว็บทีท่ ำงำนในลักษณะ HTML Generator คือ โปรแกรม
จะสร้ำงรหัสคำสัง่ HTML ให้อตั โนมัติ โดยผูใ้ ช้ไม่ตอ้ งศึกษำภำษำ
HTML หรือป้ อนรหัสคำสัง่ HTML มีลกั ษณะกำรทำงำนคล้ำยๆ
กับกำรพิมพ์เอกสำรด้วย Word Processor อำศัยปุ่ มเครือ่ งมือ
(Toolbars) หรือแถบคำสัง่ (Menu Bar) ควบคุมกำรทำงำน ช่วย
ให้ง่ำยต่อกำรใช้งำน สะดวก และรวดเร็ว
<< >>
 
Free Powerpoint Templates
Page 2
คำชี้แจงบทเรียน
• ทำแบบทดสอบก่อนเรียน
• ศึกษำเนื้อหำ บทเรียน ทัง้ หมดให้ครบ
• ทำแบบทดสอบหลังเรียน
Free Powerpoint Templates
Page 3
วัตถุประสงค์บทเรียน
• จุดประสงค์รายวิชา
1. เพื่อให้มีควำมรู ้ ควำมเข้ำใจเกี่ยวกับส่วนประกอบต่ำงๆ ของโปรแกรม
2. เพื่อให้มีทกั ษะในกำรและเข้ำใจกำรใช้งำนเครือ่ งต่ำง ๆ ของโปรแกรม
3. เพื่อให้มีทกั ษะและเข้ำในกำรสร้ำงเว็บไซต์เบื้องต้น
Free Powerpoint Templates
Page 4
รำยกำรเมนูหลัก(สำระกำรเรียนรู)้
•
•
•
•
•
•
•
•
•
•
กำรเข้ำใช้โปรแกรม Macromedia Dreamweaver
ส่วนต่ำงๆ ของโปรแกรม Macromedia Dreamweaver
ตัง้ ค่ำให้ Macromedia Dreamweaver ใช้ภำษำไทยได้
มุมมองกำรทำงำนใน Macromedia Dreamweaver
กำรกำหนดค่ำเว็บไซต์ใหม่
เริม่ ต้นสร้ำงเว็บไซต์
กำรสร้ำงเส้นคัน่ ระหว่ำงบรรทัด
กำรเปลี่ยนสีพ้ ืนหลังของเว็บ
กำรชมเว็บผ่ำนทำง web Browser
กำรบันทึกเว็บเพจ
Free Powerpoint Templates
Page 5
Pretest
• ทำแบบทดสอบก่อนเรียน
Free Powerpoint Templates
Page 6
เนื้อหำบทเรียน
•
•
•
•
•
•
•
•
•
•
กำรเข้ำใช้โปรแกรม Macromedia Dreamweaver
ส่วนต่ำงๆ ของโปรแกรม Macromedia Dreamweaver
ตัง้ ค่ำให้ Macromedia Dreamweaver ใช้ภำษำไทยได้
มุมมองกำรทำงำนใน Macromedia Dreamweaver
กำรกำหนดค่ำเว็บไซต์ใหม่
เริม่ ต้นสร้ำงเว็บไซต์
กำรสร้ำงเส้นคัน่ ระหว่ำงบรรทัด
กำรเปลี่ยนสีพ้ ืนหลังของเว็บ
กำรชมเว็บผ่ำนทำง web Browser
กำรบันทึกเว็บเพจ
Free Powerpoint Templates
Page 7
Free Powerpoint Templates
Page 8
MACROMEDIA DREAMWEAVER MX
 ขันตอนกำรเปิ
้
ดใช้งำนโปรแกรม Marcromedia Dreamweaver MX
ในกำรเข้ำไปใช้โปรแกรม Macromedia Dreamweaver MX นัน้ สำมำรถทำได้ 2 วิธกี ำรคือ
1. เข้าเปิดโปรแกรมจาก Shortcut Icon จาก Desktop โดยจากDouble Click ทีไ่ อคอนของโปรแกรม
Free Powerpoint Templates
Page 9
MACROMEDIA DREAMWEAVER MX
2. กำรเข้ำโปรแกรมผ่ำนทำง Taskbar โดยไปที่ Start  All Program  Marcromedia 
Macromedia Dreamweaver MX
<< >>
 
Free Powerpoint Templates
Page 10
MACROMEDIA DREAMWEAVER MX
ส่วนต่ำง ๆ ของโปรแกรม Macromedia Dreamweaver MX
1
2
3
4
6
7
5
<< >>
 
Free Powerpoint Templates
Page 11
MACROMEDIA DREAMWEAVER MX
ส่วนต่ำง ๆ ของโปรแกรม Macromedia Dreamweaver MX
หมายเลข 1 แถบ Title Bar ทาหน้าในการบอกชือ่ โปรแกรมทีก่ าลังใช้งานอยู่ ชือ่ ไฟล์เว็บเพจ
ทีก่ าลังทาออกแบบหรือแก้ไขอยู่ รวมถึงแถบรายการควบคุมหน้าต่างงานด้วย
<< >>
 
Free Powerpoint Templates
Page 12
MACROMEDIA DREAMWEAVER MX
ส่วนต่ำง ๆ ของโปรแกรม Macromedia Dreamweaver MX
หมายเลข 2 แถบเมนูบาร์ เป็ นแถบทีร่ วบคาสังที
่ ใ่ ช้ในการสร้างเว็บไซต์ทส่ี าคัญต่าง ๆ ต่อการ
ออกแบบเว็บไซต์ ประกอบด้วย File , Edit , View , Insert , Modify , Text , Commands , Site , Windows
และ Help
หมายเลข 3 แถบทูลบาร์แหล่งรวมเครือ่ งมือต่าง ๆ ทีจ่ าเป็ นในการสร้างเว็บไซต์ รวมถึงเป็ น
คาสังที
่ ม่ กี ารใช้งานทีบ่ อ่ ย ช่วยลดระยะเวลาในการเลือกใช้คาสังจากแถบเมนู
่
บาร์
<< >>
 
Free Powerpoint Templates
Page 13
MACROMEDIA DREAMWEAVER MX
ส่วนต่ำง ๆ ของโปรแกรม Macromedia Dreamweaver MX
หมายเลข 4 หน้าต่างเว็บเพจ (Document Window) เป็ นพืน้ ทีท่ ใ่ี ช้ในการออกแบบและสร้าง
เว็บเพจ รวมถึงการออกแบบและแก้ไขหน้าเว็บเพจ
<< >>
 
Free Powerpoint Templates
Page 14
MACROMEDIA DREAMWEAVER MX
 ส่วนต่ำง ๆ ของโปรแกรม Macromedia Dreamweaver MX
หมายเลข 5 แถบควบคุมค่าการทางาน (Properties Inspector) ทาหน้าทีใ่ นการตัง้ ค่ากาหนด
ต่าง ๆ ของข้อความ วัตถุ เป็ นต้น
หมายเลข 6 แถบสถานการทางาน (Status Bar) เป็ นส่วนทีบ่ อกถึงการทางานต่าง ๆ ทีเ่ รา
กาลังทางานอยูว่ า่ กาลังทางานอยูใ่ นส่วนใดบ้าง ๆ
<< >>
 
Free Powerpoint Templates
Page 15
MACROMEDIA DREAMWEAVER MX
 ส่วนต่ำง ๆ ของโปรแกรม Macromedia Dreamweaver MX
หมายเลข 7 แถบกลุม่ งานพาเนล (Panal Group) เป็ นส่วนทีช่ ว่ ยเพิม่ ความสามารถในการ
จัดการกับการออกแบบ แก้ไข และพัฒนาหน้าเว็บเพจ
<< >>
 
Free Powerpoint Templates
Page 16
MACROMEDIA DREAMWEAVER MX
 ตัง้ ค่ำให้ Dreamweaver ให้ใช้งำนภำษำไทยได้อย่ำงไม่มปี ญหั หำ
1. ไปทีเ่ มนูบำร์คลิกที่ Edit เลือก Preferences
หรือกดคียล์ ดั คือ Ctrl + U
<< >>
 
Free Powerpoint Templates
Page 17
MACROMEDIA DREAMWEAVER MX
 ตัง้ ค่ำให้ Dreamweaver ให้ใช้งำนภำษำไทยได้อย่ำงไม่มปี ญหั หำ
2. หลังจำกนัน้ จะเกิดหน้ำต่ำง Preferences ให้เลือกหัวข้อ Fonts ทำงด้ำนขวำมือจะปรำกฏ
กรอบ Fonts ขึน้ ในหัวข้อ Font Setting เลือก Thai Windows 874 แล้วตัง้ ค่ำแบบอักษรดังภำพ
ส่วนขนำดของอักษรเลือกได้ตำมใจชอบ
<< >>
 
Free Powerpoint Templates
Page 18
MACROMEDIA DREAMWEAVER MX
 ตัง้ ค่ำให้ Dreamweaver ให้ใช้งำนภำษำไทยได้อย่ำงไม่มปี ญหั หำ
3. หลังจำกนัน้ ให้ไปทีห่ วั ข้อ New Document ในกรอบทำงด้ำนซ้ำยมือในหัวข้อ Default Encoding
ให้เป็ นหัวข้อ Thai Windows-874 แล้วคลิกปุม่ OK เพียงเท่ำนี้เรำก็สำมำรถเปิดโปรแกรม Macromedia
Dreamweaver MX แล้วสำมำรถใช้งำนภำษำได้ตำมปกติ
<< >>
 
Free Powerpoint Templates
Page 19
MACROMEDIA DREAMWEAVER MX
 มุมมองกำรทำงำนใน Macromedia Dreamweaver MX
มุมสาหรับการทางานในการออกแบบเว็บไซต์นนั ้ ในโปรแกรม Macromedia Dreamweaver MX
นัน้ ผูใ้ ช้สามารถเลือกมุมการทางานได้ 3 รูปแบบการทางานได้ตามความใจชอบ
1. มุมมอง CODE VIEW เป็ นมุมมองแสดง CODE ภำษำของกำรสร้ำงเว็บไซต์
รวมถึงสริปต์ต่ำง ๆ ตำมทีเ่ รำได้ทำกำรออกแบบเว็บไซต์ไว้ เหมำะสำหรับผูท้ ม่ี คี วำมชำนำญหต่อกำร
เขียน CODE ภำษำต่ำง ๆ
วิธีการใช้งานมุมมอง CODW VIEW ทำได้โดยกำรคลิกทีไ่ อคอน
หรือ
ไปทีเ่ มนูบำร์เลือก View เลือก CODE หน้ำจอ Document View จะเปลีย่ นเป็ นผลลัพธ์ดงั ภำพ
<< >>
 
Free Powerpoint Templates
Page 20
MACROMEDIA DREAMWEAVER MX
 มุมมองกำรทำงำนใน Macromedia Dreamweaver MX
2. มุมมอง CODE AND Design เป็ นมุมมองทีแ่ สดง CODE ภำษำพร้อมกับหน้ำเว็บเพจ
ทีเ่ รำกำลังทำงำนอยู่ เหมำะสำหรับผูท้ ต่ี อ้ งกำรศึกษำกำรทำงำนของกำรเขียน CODE ภำษำ โดยผูใ้ ช้
สำมำรถเลือกทำงำนได้ทงั ้ สองส่วน
วิธกี ำรใช้งำนมุมมอง CODE AND VIEW โดยคลิกทีไ่ อคอน
บำร์แล้วเลือกหัวข้อ View เลือก CODE AND DESIGN จะได้ผลลัพธ์ดงั รูป
<< >>
หรือไปทีแ่ ทบเมนู
 
Free Powerpoint Templates
Page 21
MACROMEDIA DREAMWEAVER MX
 มุมมองกำรทำงำนใน Macromedia Dreamweaver MX
3. มุมมอง Design View เป็ นมุมมองทีเ่ หมาะแก่ผทู้ ไ่ี ม่มคี วามรูใ้ นเรือ่ งของการเขียน CODE
ภาษา เป็ นมุมมองทีใ่ ช้งานง่ายเพราะผูใ้ ช้งานแค่จดั ตกแต่ง ออกแบบ แก้ไข ในแต่ละหน้าหน้าเว็บเพจเท่านัน้
โปรแกรม Marcromedia Dreamweaver MX จะทาการเขียน CODE ภาษาให้เราอัตโนมัติ
วิธกี ารใช้มมุ มอง Design View เพียงแค่คลิกทีไ่ อคอน
แล้วเลือก Design View แล้วจะได้ผลลัพธ์ตามทีต่ อ้ งการ
<< >>
หรือไปทีแ่ ถบเมนูบาร์ View
 
Free Powerpoint Templates
Page 22
MACROMEDIA DREAMWEAVER MX
 กำรออกจำกโปรแกรม Macromedia Dreamweaver MX
กำรออกจำกโปรแกรม Marcromedia Dreamweaver MX นัน้ ทำได้โดยกำรไปทีเ่ มนูบำร์
เลือก File ตำมด้วย Exit โดยจะเป็ นกำรสิน้ สุดกำรใช้งำนโปรแกรม นอกจำกนัน้ ผูใ้ ช้งำนยังสำมำรถ
เลือกขัน้ ตอนกำรออกจำกโปรแกรมได้อกี 3 วิธกี ำรคือ
1. คลิกเม้าส์ทไ่ี อคอน
บริเวณมุมบนด้านขวาของโปรแกรม
2. คลิกเม้าส์ทไ่ี อคอน
บริเวณแถบ Title Bar แล้วเลือก Close
3. กดคียล์ ดั คือ CTRL+Q
<< >>
 
Free Powerpoint Templates
Page 23
เริ่มใช้งาน Macromedia Dreamweaver MX
เรำสำมำรถสร้ำงเว็บไซต์ดว้ ยโปรแกรม Macromedia Dreamweaver MX โดยเริม่
จำกกำรกำหนดโครงสร้ำงเว็บไซต์ โดยกำรกำหนดโครงร่ำงเว็บไซต์รเรำอำจทำกำรร่ำงลงใน
กระดำษก่อนอย่ำงง่ำย โดยเริม่ จำกหน้ำหลักของเว็บไซต์ตำมด้วยหน้ำต่ำง ๆ ทีเ่ กิดจำกจุด
เชือ่ มโยงภำยในหน้ำหลักเชือ่ มต่อออกไปอีกเรือ่ ย ๆ ตัวอย่ำงดังรูป
E.HTML
WWW.BYBYE.COM
INDEX.HTML
F.HTML
A.HTML
G.HTML
B.HTML
Y.HTML
V.HTML
D.HTML
<< >>
 
Free Powerpoint Templates
Page 24
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรกำหนดเว็บไซต์ใหม่ใน Dreamweaver MX
ในการสร้างเว็บไซต์นนั ้ จะเป็ นการกาหนดโฟลเดอร์ทใ่ี ช้ในการเก็บไฟล์เว็บเพจของเราทีจ่ ะทา
การสร้างขึน้ โดยมีขนั ้ ตอนการกาหนดเว็บไซต์ดงั ต่อไปนี้
1. คลิกทีเ่ มนูบาร์เลือก Site แล้วเลือก New Site เพือ่ เข้าสูก่ ารสร้างโฟลเดอร์ทใ่ี ช้ในการเก็บ
เว็บไซต์
<< >>
 
Free Powerpoint Templates
Page 25
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรกำหนดเว็บไซต์ใหม่ใน Dreamweaver MX
2. หลังจากปรากฏกรอบหน้าต่าง
Site Definition for Unnamed Site
ขึน้ ให้เราใส่ชอ่ื เว็บไซต์ของเราลง
ในช่อง
เป็ นภาษาอังกฤษ แล้วคลิก NEXT
<< >>
 
Free Powerpoint Templates
Page 26
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรกำหนดเว็บไซต์ใหม่ใน Dreamweaver MX
3. หลังจากนัน้ เลือกตอบหัวข้อ No, I do
not want to use a sever technology…..
แล้วคลิกที่ Next
<< >>
 
Free Powerpoint Templates
Page 27
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรกำหนดเว็บไซต์ใหม่ใน Dreamweaver MX
4. ในหัวข้อ How do you want to work
with your files during ….. ให้เลือกตอบใน
หัวข้อ Edit local coppies on my machine
5. หลังนัน้ ในเรากาหนดสถานทีท่ เ่ี รา
ต้องการเก็บเว็บไซต์ในหัวข้อ Where on
your computer do you want to store
your file? โดยคลิกทีไ่ อคอน
โดย
เมือ่ เลือกโฟลเดอร์ทจ่ี ะจัดเก็บเว็บไซต์ได้
แล้วให้เลือกหัวข้อ Select หลังจากนัน้ คลิก
Next
<< >>
 
Free Powerpoint Templates
Page 28
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรกำหนดเว็บไซต์ใหม่ใน Dreamweaver MX
6. จากนัน้ ในหัวข้อ How do you connect to
your remote sever? ให้เลือกตอบเป็ นรูปแบบ
None แล้วคลิก NEXT
<< >>
 
Free Powerpoint Templates
Page 29
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรกำหนดเว็บไซต์ใหม่ใน Dreamweaver MX
7. หลังจำกนัน้ จะเป็ นกำรแสดงรำยละเอียดต่ำง ๆ ของเว็บไซต์ของเรำตำมทีเ่ รำได้ทำกำรตัง้ ค่ำไว้ เมือ่
อ่ำนรำยละเอียดแล้วก็ให้คลิกที่ DONE
<< >>
 
Free Powerpoint Templates
Page 30
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรกำหนดเว็บไซต์ใหม่ใน Dreamweaver MX
8. หลังจำกนัน้ เรำก็สำมำรถทีจ่ ะสร้ำงเว็บไซต์ได้ตำมปกติแล้ว แต่ในครัง้ ต่อไปหำก
ต้องกำรเข้ำมำสร้ำงเว็บไซต์ในเว็บไซต์เดิมอีกต้องเลือกคำสัง่ Site ไปที่ Edit Site จะปรำกฏกรอบ
หน้ำต่ำง Edit Site ขึน้ ให้เรำเลือกชือ่ เว็บไซต์ของเรำแล้วทำกำรคลิกทีป่ มุ่ Done เพียงเท่ำนี้เรำก็
สำมำรถสร้ำงเว็บไซต์ของเรำบนเว็บไซต์เดิมได้แล้ว
<< >>
 
Free Powerpoint Templates
Page 31
เริ่มใช้งาน Macromedia Dreamweaver MX
 เริม่ ต้นสร้ำงเว็บไซต์ดว้ ยกำรจัดกำรกับตัวอักษรอย่ำงง่ำย ๆ
1. พิมพ์ขอ้ ความตามทีต่ อ้ งการบนพืน้ ทีก่ ารออกแบบ (Document View) หลังจาก
นัน้ ให้ทาการคลุมดาข้อความในบริเวณทีต่ อ้ งการปรับแต่งข้อความ
2. จำกนัน้ ให้เรำไปทีแ่ ถบเครือ่ งมือ Properties Pallete เพือ่ ทำกำรกำหนดค่ำ
ต่ำง ๆ ของตัวอักษรหรือข้อควำมของเรำทีต่ อ้ งกำรปรับแต่ง โดยแต่ละส่วนจะทำหน้ำทีต่ ่ำงกัน
ดังต่อไปนี้
<< >>
 
Free Powerpoint Templates
Page 32
เริ่มใช้งาน Macromedia Dreamweaver MX
 เริม่ ต้นสร้ำงเว็บไซต์ดว้ ยกำรจัดกำรกับตัวอักษรอย่ำงง่ำย ๆ
1. Format ใช้ในการกาหนดรูปแบบตัวอักษรสาเร็จให้กบั ข้อความ เช่น
None คือไม่กาหนดรูปแบบตัวอักษร , Paragraph คือ การกาหนดข้อความใน
ย่อหน้าใหม่ , Heading 1-6 โดย Heading 1 จะเป็ นขนาดอักษรตัวใหญ่สดุ
และลดลันลงมา
่
2. Font เป็ นการกาหนดรูปแบบตัวอักษรต่าง ๆ นอกจากนี้การ
กาหนดรูปแบบตัวอักษรนัน้ ยังช่วยในเรือ่ งการทดแบบอักษร หากคุณ
เลือกแบบอักษร Arial , Helvetica , Sans-serif หมายความว่า หากมีผู้
เปิดเว็บไซต์ชมแล้วไม่มแี บบอักษร Arial ก็สามารถใช้แบบอักษร
Helvetica หรือ Sans-serif ได้
<< >>
 
Free Powerpoint Templates
Page 33
เริ่มใช้งาน Macromedia Dreamweaver MX
 เริม่ ต้นสร้ำงเว็บไซต์ดว้ ยกำรจัดกำรกับตัวอักษรอย่ำงง่ำย ๆ
3. Size เป็ นส่วนทีใ่ ช้ในการกาหนดขนาดของตัวอักษร โดยผูใ้ ช้จะสามารถทีจ่ ะ
กาหนดขนาดตัวอักษรได้ตามความต้องการ
4. Color เป็ นการกาหนดสีตวั อักษร โดยผูใ้ ช้สามารถกาหนดสี
ตัวอักษรได้ตามความต้องการ โดยจะมีกรอบด้านขวามือเล็ก ๆ เพื่อ
บอกค่าของสีตามทีเ่ ราได้ทาการเลือกไว้
<< >>
 
Free Powerpoint Templates
Page 34
เริ่มใช้งาน Macromedia Dreamweaver MX
 เริม่ ต้นสร้ำงเว็บไซต์ดว้ ยกำรจัดกำรกับตัวอักษรอย่ำงง่ำย ๆ
5. ใช้สาหรับกาหนดลักษณะของตัวอักษรตามทีเ่ ราต้องการ
ตามรูป เช่น ตัวหนา ตัวเอียง จัดกึง่ กลาง ชิดซ้าย ชิดขวา จัดย่อ
หน้าตัวอักษร โดยแต่สว่ นมีหน้าทีด่ งั ต่อไปนี้
ใช้สาหรับกาหนดลักษณะตัวอักษรให้เป็ นตัวหนา
ใช้สาหรับกาหนดลักษณะตัวอักษรให้เป็ นตัวเอียง
ใช้สาหรับกาหนดการจัดวางตาแหน่งตัวอักษรให้ชดิ ขอบซ้าย
ใช้สาหรับกาหนดการจัดวางตาแหน่งตัวอักษรให้อยูก่ ง่ึ กลางหน้าเว็บเพจ
ใช้สาหรับพิมพ์ขอ้ ความชนิดเสมอกัน้ หน้าและกัน้ หลัง
<< >>
 
Free Powerpoint Templates
Page 35
เริ่มใช้งาน Macromedia Dreamweaver MX
 เริม่ ต้นสร้ำงเว็บไซต์ดว้ ยกำรจัดกำรกับตัวอักษรอย่ำงง่ำย ๆ
Bullet เพือ่ กาหนดตัวเลขกากับในแต่ละบรรทัดอักษรหรือใส่หวั ข้อให้กบั ข้อความ
ใช้สาหรับจัดย่อหน้าในแต่บรรทัดของตัวอักษรคล้ายกับการตัง้ ค่า TAB
<< >>
 
Free Powerpoint Templates
Page 36
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรสร้ำงเส้นคันระหว่
่
ำงบรรทัด (Horizontal Rule)
การใช้เส้นคันทางแนวนอนนั
่
น้ จะช่วยแบ่งเนื้อหาออกเป็ นส่วน ๆ ทาให้อ่านได้งา่ ย การสร้างเส้นคัน่
ในแนวนอนทาได้โดยการคลิกทีไ่ อคอน
จากแถบเมนูบาร์ หรือเลือกใช้คาสัง่ Insert จากแถบ
เมนูบาร์จากนัน้ เลือกไปที่ Horizontal Rule ผลลัพธ์ทไ่ี ด้คอื
<< >>
 
Free Powerpoint Templates
Page 37
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรสร้ำงเส้นคันระหว่
่
ำงบรรทัด (Horizontal Rule)
นอกจากนี้เรายังสามารถทีจ่ ะกาหนดค่าต่าง ๆ ของเส้นคันระหว่
่
างบรรทัดได้อกี ด้วย จากแถบเครือ่ งมือ
Property Inspector
1. โดยเริม่ แรกนัน้ ให้เราทาการคลิกทีเ่ ส้นคันระหว่
่
างบรรทัด ทีเ่ ส้นคันระหว่
่
างบรรทัดจะมีแถบสีดาเกิดขึน้
คล้ายการคลุมดา
2. หลังจากนัน้ ทีแ่ ถบเครือ่ งมือ Properties จะมีการเปลีย่ นเป็ นรูปแบบการตัง้ ค่าของเส้น Horizontal
Rule ดังภาพ
<< >>
 
Free Powerpoint Templates
Page 38
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรสร้ำงเส้นคันระหว่
่
ำงบรรทัด (Horizontal Rule)
3. โดยผูง้ านสามารถกาหนดและตัง้ ค่าต่าง ๆ ได้ดงั ต่อไปนี้
่ นแบบ % หรือ Pixels
ใช้สาหรับกาหนดความยาวของเส้นบรรทัด ความยาวของเส้นคันเป็
ใช้สาหรับกาหนดตาแหน่งเส้นคันหน้
่ าในเว็บเพจ
ใช้สาหรับกาหนดความสูงของเส้น
ใช้สาหรับกาหนดชือ่ ให้เส้นคันระหว่
่
างบรรทัด
ใช้สาหรับกาหนดเส้นคันเป็
่ นแบบธรรมดาหรือหนาทึบ
<< >>
 
Free Powerpoint Templates
Page 39
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรเปลีย่ นสีพน้ื หลังของเว็บเพจ
สาหรับขัน้ ตอนการเปลีย่ นสีพน้ื หลังของเว็บนัน้ มีขนั ้ ตอนดังต่อไปนี้
1. ไปทีแ่ ถบเครือ่ งเมนูบาร์ Modify เลือก Page Properties หรือคลิกขวาบนพืน้ ทีก่ ารออกแบบ
เลือก Properties นอกนี้ผใู้ ช้งานยังสามารถกดคียล์ ดั ได้คอื CTRL+J
R
<< >>
 
Free Powerpoint Templates
Page 40
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรเปลีย่ นสีพน้ื หลังของเว็บเพจ
2. หลังจากนัน้ จะปรากฏกรอบหน้าต่าง Page Properties หลังนัน้ ให้ผใู้ ช้งานไปทีห่ วั ข้อ
Background เพือ่ ทาการเลือกสีพน้ื หลังของเว็บเพจ เมือ่ ผูใ้ ช้งานเลือกสีทต่ี อ้ งการได้แล้วให้คลิกปุม่ OK
เพียงนี้สพี น้ื หลังของหน้าเว็บเพจก็จะเปลีย่ นเป็ นทีผ่ ใู้ ช้ได้เลือกใช้งานแล้ว
<< >>
 
Free Powerpoint Templates
Page 41
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรชมกำรออกแบบเว็บไซต์ผำ่ นทำง Web Browser
หากผูใ้ ช้งานได้ทาการออกแบบเว็บไซต์ไว้แล้วและต้องการทีจ่ ะชมผลงานผ่านทางหน้า Web
Browser เพียงแค่ผใู้ ช้ทาการกดปุม่ F12 บนคียบ์ อร์ดเพียงเท่านี้ผใู้ ช้งานก็สามารถชมผลงานทีไ่ ด้
ออกแบบไว้ผา่ นทางหน้าเว็บเพจได้แล้ว
F12
<< >>
 
Free Powerpoint Templates
Page 42
เริ่มใช้งาน Macromedia Dreamweaver MX
 กำรบันทึกเว็บเพจ ( SAVE WEBPAGE)
1. ในการบันทึกหน้าเว็บเพจนัน้ ผูใ้ ช้สามารถทีจ่ ะบันทึกหน้าเว็บเพจโดยการไปทีเ่ มนูบาร์ File แล้วเลือก
Save As หรือกดคียล์ ดั Ctrl + Shift + S หลังจากนัน้ จะปรากฏหน้าต่าง Save As ขึน้ มา
2. หลังนัน้ ให้ผใู้ ช้งานทาการตัง้ ชือ่ ในเว็บเพจในช่อง File Name หลังจากนัน้ คลิกทีป่ มุ่ Save อีก
ครัง้ เพียงเท่านี้ผใู้ ช้กส็ ามารถบันทึกหน้าเว็บเพจได้เรียบร้อยแล้ว
<< >>
 
Free Powerpoint Templates
Page 43
แบบฝึ กหัด
•
•
•
•
•
1. ภาษาใดเป็ นภาษาพืน
้ ฐานในการสรางและออกแบบเว็
บไซต ์
้
2.ขัน
้ ตอนแรกของการเปลีย
่ นสี ตวั อักษร จะตองท
าสิ่ งใดเป็ นสิ่ งแรก
้
3.แถบเครือ
่ งมือ Properties Inspecter มีประโยชนอย
์ างไร
่
4.ในการสรางเส
่ ระหวางบรรทั
ดแนวนอน มีขน
้ั ตอนการสร้างอยางไร
้
้ นคัน
่
่
5.โปรแกรม Macromedia Dreamweaver จัดเป็ นโปรแกรมประเภทใด
Free Powerpoint Templates
Page 44
Post-Test
• ทำแบบทดสอบหลังเรียน
Free Powerpoint Templates
Page 45
สรุปเนื้อหำบทเรียน
กำรกำหนดค่ำเริม่ ต้นในกำรใช้โปรแกรม Macromedia Dreamweaver
เพื่อทีจ่ ะสร้ำงเว็บไซต์ โดยต้องเรียนรูห้ น้ำทีแ่ ละหลักกำรทำงำน
ของเครือ่ งมือต่ำง ๆ ของโปรแกรม ก่อนทีจ่ ะสร้ำงหน้ำเว็บเพจ
อย่ำงเช่น กำรกำหนดให้ใช้ภำษำไทยได้ กำรสร้ำงไซต์ กำร
ทำงำนในมุมมองต่ำง ๆ กำรสร้ำงเส้นคัน่ ระหว่ำงบรรทัด
กำรปรับเปลี่ยนสีพ้ ืนหลัง กำรใช้โปรแกรม web Browser
Free Powerpoint Templates
Page 46
ข้อควรจำ
Free Powerpoint Templates
Page 47
- พันจันทร์ ธนวัฒนเสถียร.ออกแบบและสร้ำงเว็บสวย
ด้วย Dreamweaver 8.สำนักพิมพ์ซคั เซสมีเดีย.
กรุงเทพมหำนคร.2548
- เฉลิมพล ทัพซ้ำย,อำจำรย์.มือใหม่หดั สร้ำงเว็บไซต์.
บริษทั 3495 บุค๊ เซ็นเตอร์ จำกัด.2546


Free Powerpoint Templates
Page 48
คำขอบคุณ
ขอขอบพระคุณอาจารย์ท่านวิทยากร และผูท้ ่ีให้ความอนุเคราะห์ในการ
จัดทาสือ่ การเรียนการสอนวิชา พิมพ์ดดี อังกฤษ1 จงประสบ
ความสาเร็จเพือ่ เป็ นแนวทางในการเรียนการสอนของนักเรียนให้
น่าสนใจ และมีความเข้าใจเนื้อหาในบทเรียนนี้ได้ดยี ง่ิ ขึ้น
ผูจ้ ดั ทา
อาจารย์พชิ ิตชัย แสวงพิทยารัตน์
Free Powerpoint Templates
Page 49
ผูจ้ ดั ทำ- คำนิยม
สือ่ การเรียนการสอนที่จดั ทาขึ้นครัง้ นี้มีจุดประสงค์เพือ่
ใช้ในการเรียนการสอนไม่ได้ผลิตไว้เพือ่ จาหน่ายหากมี
ข้อสงสัยในสือ่ การเรียนการสอนนี้ให้ติดต่อผูจ้ ดั ทา
Email:[email protected]
Free Powerpoint Templates
Page 50