วิชา HTML และ DreamWeaver (13)
ในบทเรียนนี้ จะแบ่งเป็น 2 หัวข้อด้วยกัน คือภาษา HTML และ การใช้โปรแกรม DreamWeaver ในการทำเว็บไซต์
Serial Number : WPD800-54232-80332-94711
ครูผู้สอน
กฤติยา พลหาญ (ครูกิ๊ก)
E-mail :
อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน
// Tel : ครูกิ๊ก 084-953-3738
..
..:: วิธีการสร้างลิงค์จากข้อความ ::
VDO :: การสร้าง Link เพื่อเชื่อมโยงหน้าเว็บไซต์
เรามาดูวิธีทำกันดีกว่า ง่ายมากๆค่ะ 
ลิงค์ (Link) หรือจุดเชื่อมโยงเว็บเพจ มีหลายรูปแบบดังนี้
การทำลิงค์แบบข้อความ
การทำลิงค์ไปยัง E-mail
การทำลิงคืไปยัง Named Anchor
การทำลิงค์แบบ Rollover Image
การทำลิงค์ใน Dreamweaver 8 ส่วนสำคัญจะอยุ่ตรงที่แถบ Properties ซึ่งจะมีอยู่ 2 ส่วนด้วยกัน ได้แก่
2.Target คือ แถบสำหรับเลือกรูปแบบของปลายทาง ซึ่งได้แก่
_parent คือ การแสดงเว็บเพจที่หน้าต่างเดี่ยว แต่อยู่ในเฟรมหลัก
_self คือ การแสดงเว็บเพจในเฟรมเดียวกับต้นทาง
_top คือการแสดงผลเว็บเพจ โดยจะไม่มีเฟรม
วิธีสร้างลิงค์จากข้อความ
1.พิมพ์ข้อความลงไป
2.ลากเม้าส์ทีบข้อความที่ต้องการ
3.คลิกที่ 
ในแถบ properties เพื่อเลือกไฟล์ที่จะลิงค์
4.เมื่อเลือกได้แล้ว ให้คลิกปุ่ม 
5.ข้อความกลายเป็นลิงค์เรียบร้อยแล้ว
วิธีปรับแต่งลิงค์เพิ่มเติม
- การสร้างลิงค์จากรูปภาพ
- การทำลิงค์โดยใช้ Name Anchor
- การทำลิงค์ไปยัง E-mail
- การทำลิงค์ไปยังเว็บไซต์อื่น
- การทำลิงค์แบบ Rollover Image
- การเปลี่ยนสีของตัวอักษรที่เป็นลิงค์
อ้างอิงจาก : http://school.obec.go.th/buabanwit/
..
..
..
..
2.พิมพ์ข้อความจากโปรแกรมอื่น แล้วก๊อปปี้มาใส่ที่หน้าจอการทำงาน เป็นอีกความสามารถหนึ่งของ Dreamweaver 8 ที่สนับสนุนการโอนย้ายข้อมูลจากโปรแกรมอื่น เช่น Word , Excel และ Notepad โดยสามารถนำมาใส่ที่หน้าจอารทำงานได้เลย และยังแสดงผมได้เหมือนต้นฉบับอีกด้วย
3.พิมพ์ในรูปแบบการทำงานแบบ HTML อันนี้สำหรับคนที่ถนัดถาษา HTML สักหน่อย ก็อาจจะคลิก
แล้วพิมพ์ข้อความลงในส่วน <body>หรือ <head>
+--ข้อควรจำ--+
ในเรื่องของการพิมพ์ข้อความ ก็้เลือกเอาตามความถนัดเลย แต่ควรตรวจเรื่องของ Font ให้ดี เพราะบาง Font อ่านไทยไม่ได้ โดนสามรถตั้งค่าได้โดยการกด Ctrl + U แล้วก็จะได้หน้าต่าง Preferences ดังรูป
การสร้าง Site :: VDO
กิจกรรมในคาบเรียน (กลุ่มละ 5 คะแนน)
1. ให้นักเรียนศึกษาวิธีการสร้าง Site จาก VDO และเว็บไซต์บทเรียน HTML & Dreamweaver บทที่ 7
2. ให้นักเรียนทำการสร้าง Site ตามใน VDO โดยครูสาธิตให้ดู 1 รอบ
2. เมื่อสร้าง Site เสร็จแล้วให้สร้างไฟล์หน้าแรกชื่อ index.html และทำการออกแบบหน้าแรก โดยทำตามครูสอน
3. ออกแบบหน้าแรกให้เสร็จภายใน 1 คาบ (ครูเดินตรวจภายในชั้นเรียน และมอบหมายให้ไปทำหน้าอื่นๆไว้ให้ครบ)
วิธีการสร้าง Site
การสร้าง Site ก็เพื่อที่เวลาสร้างเว็บไซต์ ข้อมูลจะได้ถูกจัดอย่างเป็นระเบียบ ไม่กระจัดกระจาย ง่ายต่อการตรวจสอบ วิธีการสร้างก็ง่ายๆ ตามรูปเลยค่ะ
,
บทที่ 5 : โปรแกรม Dreamweaver 8
Written by Administratorโปรแกรม Macromedia Dreamweaver 8
เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกต่อการใช้งาน มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน ด้วยความสามารถและคุณสมบัติของโปรแกรม จึงเหมาะสำหรับนักเรียน
คุณสมบัติและข้อดีของโปรแกรม Dreamweaver
1) ช่วยให้คุณทำงานได้เร็วขึ้น
นี่คือข้อดีอันดับต้นๆของ Dreamweaver เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเรา ได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง
2) เป็น Editor ที่มีประสิทธิภาพตัวหนึ่ง
ในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น
3) เป็นโปรแกรมจัดการเว็บไซต์ที่ดี
Dreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น
1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ dreamwerver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสำรองไว้ในเครื่องเราตลอด ด้วย
2. Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็น รูปร่างขึ้นมา โดยจะแสดงให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเราตลอด
4) ช่วยให้เราทำเว็บได้ง่ายขึ้น
สำหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการ เขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop,Illustrator,Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ ,หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย
ในบทความนี้คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวนความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก
การเปิดใช้งานโปรแกรม สามารถเรียกใช้งานโปรแกรม ดังนี้ เรียกผ่านปุ่ม Start มีวิธีทำ คือ
บนทาสก์บาร์ แล้วเลือกคำสั่งย่อย
จากภาพด้านบน อธิบายตามหมายเลขดังนี้
2.เลือกประเภทงานที่ต้องการสร้างใหม่ ได้แก่ HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ
3.เลือกงานตามฟอร์มที่โปรแกรมจัดไว้ให้โดยมีรุปแบบให้เลือกหลายประเภท
บทที่ 6 : ส่วนประกอบต่างๆในหน้าจอหลักของ DreamWeaver
Written by Administrator
2. Menu Bar คือ ส่วนที่รวมคำสั่งการทำงานทั้งหมด แล้วแบ่งย่อยตามประเภทและในคำสั่งหลักมักจะมีเมนูลัดให้กดด้วย
3.Object Palette คือ แถบแสดงปุ่มต่างๆของโปแกรม
4.Toolbar คือ แถบเครื่องมือสำหรับการใช้งานด้าน HTML และอินเตอร์เน็ท ประกอบด้วย
Show Code View แสดงการทำงานในรูปแบบ HTML
Show Code and Design Views แสดงการทำงานแบบ HTML ควบคู่กับแสดงพื้นที่ออกแบบ
Show Design View แสดงการทำงานแบบแสดงพื้นที่ออกแบบ
Document Title ตั้งชื่อของเว็บเพจ
Check Errors ตรวจสอบข้อผิดพลาดจาก Browser
File Management จัดการกับไฟล์ๆ ที่อยู่ในเว็บเพจ
Preview / Debug in Browser ทดลอง ดูเว็บเพจทาง Browser หรือกด F12
View Options มุมมองในการทำงานเพิ่มเติม5.หน้าต่างออกแบบเว็บเพจ ใช้พิมพ์ข้อความและจัดเรียงรูปภาพ
6.Tag Selector ใช้ควบคุมการทำงานในรูปแบบ HTML
7.Window Size กำหนดพื้นที่ใช้งานตามต้องการ
8.Estimate Download Time แสดงเวลา ที่ใช้ในการดาวน์โหลด
9.Properties ใช้กำหนดรูปแบบต่างๆ ของตัวอักษร และรูปภาพ รวมถึงการสร้างลิงค์
เพื่อขยายหน้าต่างการทำงานให้มากขึ้นหรือคลิกที่ Window > properties ก็ได้เช่นกัน
10. Dockable Window เปิดหน้าต่างที่รวบรวมเครื่องมืออำนวยความสะดวกเอาไว้ โดยคลิกที่
เพื่อเปิด-ปิดได้ เช่นเดียวกับ Properties
