You are now being logged in using your Facebook credentials

www.krukikz.com

 

Font Size

Profile

Layout

Direction

Menu Style

Cpanel
วิชา HTML และ DreamWeaver

วิชา HTML และ DreamWeaver (13)

การพัฒนาเว็บไซต์ด้วยภาษา HTML และ DreamWeaver

ในบทเรียนนี้ จะแบ่งเป็น 2 หัวข้อด้วยกัน คือภาษา HTML และ การใช้โปรแกรม DreamWeaver ในการทำเว็บไซต์
 
HTML ย่อมาจากคำว่า "HyperText Markup Language"
 
เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์ ที่แสดงผลในลักษณะของเว็บเพจ ซึ่งสามารถแสดงผลได้ในรูปแบบต่างๆ ไม่ว่าเป็นภาพกราฟิก ภาพนิ่ง ภาพเคลื่อนไหว เสียง หรือการเชื่อมโยงไปยังเว็บไซต์อื่นๆ
 
 
โปรแกรม  Macromedia Dreamweaver 8
 
เป็นโปรแกรมที่ใช้สำหรับสร้างเว็บเพจ และบริหารเว็บไซต์ที่ได้รับความนิยมสูงสุด ในกลุ่มโปรแกรมประเภทเดียวกัน ในปัจจุบัน  เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกต่อการใช้งาน มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ  ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน ด้วยความสามารถและคุณสมบัติของโปรแกรม จึงเหมาะสำหรับนักเรียน
 
 
เว็บไซต์ตัวอย่างโครงงาน
โตโน่แฟนคลับ :: www.krukikz.com/tono
Macromedia Dreamwaver 8
Serial Number : WPD800-54232-80332-94711
 

ครูผู้สอน
กฤติยา พลหาญ (ครูกิ๊ก)

E-mail : อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน     //  Tel : ครูกิ๊ก 084-953-3738
 
 
นักเรียนสามารถศึกษาบทเรียนออนไลน์ตามหัวข้อด้านล่างได้เลยค่ะ  smiley

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 12 : การสร้างเฟรม

Written by Administrator

..

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 11 : การสร้างลิงค์

Written by Administrator

..::   วิธีการสร้างลิงค์จากข้อความ  ::

VDO :: การสร้าง Link เพื่อเชื่อมโยงหน้าเว็บไซต์

เรามาดูวิธีทำกันดีกว่า ง่ายมากๆค่ะ wink

ลิงค์ (Link) หรือจุดเชื่อมโยงเว็บเพจ มีหลายรูปแบบดังนี้
การทำลิงค์แบบข้อความ
การทำลิงค์ไปยัง E-mail
 การทำลิงคืไปยัง Named Anchor
 การทำลิงค์แบบ Rollover Image


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

1.Link คือ แถบสำหรับเลือกไฟล?ที่ต้องการจะลิงค์ไปถึง
2.Target คือ แถบสำหรับเลือกรูปแบบของปลายทาง ซึ่งได้แก่
  _blank คือ การแสดงเว็บเพจปลายทางในหน้าต่างใหม่
  _parent คือ การแสดงเว็บเพจที่หน้าต่างเดี่ยว แต่อยู่ในเฟรมหลัก
  _self คือ การแสดงเว็บเพจในเฟรมเดียวกับต้นทาง
  _top คือการแสดงผลเว็บเพจ โดยจะไม่มีเฟรม

วิธีสร้างลิงค์จากข้อความ

1.พิมพ์ข้อความลงไป
2.ลากเม้าส์ทีบข้อความที่ต้องการ
3.คลิกที่  ในแถบ properties เพื่อเลือกไฟล์ที่จะลิงค์
4.เมื่อเลือกได้แล้ว ให้คลิกปุ่ม  
5.ข้อความกลายเป็นลิงค์เรียบร้อยแล้ว







วิธีปรับแต่งลิงค์เพิ่มเติม

อ้างอิงจาก : http://school.obec.go.th/buabanwit/

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 4 : การสร้างตาราง

Written by Administrator

..

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 1 : โครงสร้าง HTML

Written by Administrator

..

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 3 : Bg และใส่ภาพ

Written by Administrator

..

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 2 : คำสั่ง HTML

Written by Administrator

..

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 8 : ตกแต่งข้อความ

Written by Administrator
การสร้างข้อความบน Dreamweaver 8 มีอยู่ด้วยกัน 3 วิธี ดังนี้
1.พิมพ์ข้อความลงในส่วนของหน้าจอการทำงานเลย เป้นวิธีที่ง่ายที่สุด เราแค่เตรียมเนื้อหาให้พร้อม จากนั้นก็ลุยพิมพ์ได้เลย



2.พิมพ์ข้อความจากโปรแกรมอื่น แล้วก๊อปปี้มาใส่ที่หน้าจอการทำงาน เป็นอีกความสามารถหนึ่งของ Dreamweaver 8 ที่สนับสนุนการโอนย้ายข้อมูลจากโปรแกรมอื่น เช่น Word , Excel และ Notepad โดยสามารถนำมาใส่ที่หน้าจอารทำงานได้เลย และยังแสดงผมได้เหมือนต้นฉบับอีกด้วย

3.พิมพ์ในรูปแบบการทำงานแบบ HTML อันนี้สำหรับคนที่ถนัดถาษา HTML สักหน่อย ก็อาจจะคลิก แล้วพิมพ์ข้อความลงในส่วน <body>หรือ <head>



+--ข้อควรจำ--+
ในเรื่องของการพิมพ์ข้อความ ก็้เลือกเอาตามความถนัดเลย แต่ควรตรวจเรื่องของ Font ให้ดี เพราะบาง Font อ่านไทยไม่ได้ โดนสามรถตั้งค่าได้โดยการกด Ctrl + U แล้วก็จะได้หน้าต่าง Preferences ดังรูป

 

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 7 : เริ่มต้นใช้งาน

Written by Administrator

การสร้าง Site :: VDO


กิจกรรมในคาบเรียน  (กลุ่มละ 5 คะแนน)

1. ให้นักเรียนศึกษาวิธีการสร้าง Site จาก VDO และเว็บไซต์บทเรียน HTML & Dreamweaver  บทที่ 7

2.  ให้นักเรียนทำการสร้าง Site ตามใน VDO โดยครูสาธิตให้ดู 1 รอบ

2.  เมื่อสร้าง Site เสร็จแล้วให้สร้างไฟล์หน้าแรกชื่อ index.html และทำการออกแบบหน้าแรก โดยทำตามครูสอน

3.  ออกแบบหน้าแรกให้เสร็จภายใน 1 คาบ (ครูเดินตรวจภายในชั้นเรียน และมอบหมายให้ไปทำหน้าอื่นๆไว้ให้ครบ)


วิธีการสร้าง Site

การสร้าง Site ก็เพื่อที่เวลาสร้างเว็บไซต์ ข้อมูลจะได้ถูกจัดอย่างเป็นระเบียบ ไม่กระจัดกระจาย ง่ายต่อการตรวจสอบ วิธีการสร้างก็ง่ายๆ ตามรูปเลยค่ะ


















,

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 5 : โปรแกรม Dreamweaver 8

Written by Administrator

โปรแกรม Macromedia Dreamweaver 8

             Macromedia Dreamweaver 8 เป็นโปรแกรมที่ใช้สำหรับสร้างเว็บเพจ และบริหารเว็บไซต์ที่ได้รับความนิยมสูงสุด ในกลุ่มโปรแกรมประเภทเดียวกัน ในปัจจุบัน
             เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกต่อการใช้งาน มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน ด้วยความสามารถและคุณสมบัติของโปรแกรม จึงเหมาะสำหรับนักเรียน
             เราจะมาดกันว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย 

คุณสมบัติและข้อดีของโปรแกรม 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  มีวิธีทำ คือ

1.  คลิกที่ปุ่ม  Start    บนทาสก์บาร์  แล้วเลือกคำสั่งย่อย 
     Programs >> Macromedia >> Macromedia Dreamweaver 8

2.  กรณีที่ได้สร้างไอคอน  Dreamweaver 8  ไว้บนเดสก์ทอป  สามารถดับเบิลคลิกที่ไอคอนได้  >>
     คลิกไอคอน  http://www.tinarobertsstudios.com/thelotusvale/links/img/dreamweaver%208%20logo.jpg
     เมื่อเปิดโปรอกรมแล้วจะเข้าสู่หน้าต่างที่เรียกว่า  หน้าเริ่มต้น (Start Page)  เพื่อให้ผู้ใช้เรียกใช้งานได้อย่างรวดเร็ว  
     ซึ่งประกอบด้วยส่วนต่าง   ดังรูป


จากภาพด้านบน  อธิบายตามหมายเลขดังนี้
 
1.เปิดงานที่เรากำลังทำค้างอยู่ ดปรแกรมจะแสดงงานที่เราเปิดใช้บ่อยๆ ไว้ด้านบน
2.เลือกประเภทงานที่ต้องการสร้างใหม่ ได้แก่ HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ
3.เลือกงานตามฟอร์มที่โปรแกรมจัดไว้ให้โดยมีรุปแบบให้เลือกหลายประเภท


 

 

 

 

 

วันอาทิตย์ที่ 21 พฤศจิกายน 2010 เวลา 19:19 น.

บทที่ 6 : ส่วนประกอบต่างๆในหน้าจอหลักของ DreamWeaver

Written by Administrator
ส่วนประกอบต่างๆในหน้าจอหลักของ DreamWeaver
 
หลังจากที่เลือกโปรแกรมเสร็จแล้ว เราจะพบกับหน้าต่างการทำงาน ซึ่งประกอบด้วย
 

 
1.Title Bar คือ ส่วนที่แสดงชื่อโปรแกรม และชื่อไฟล์ที่กำลังทำงานอยู่


2. Menu Bar คือ ส่วนที่รวมคำสั่งการทำงานทั้งหมด แล้วแบ่งย่อยตามประเภทและในคำสั่งหลักมักจะมีเมนูลัดให้กดด้วย


3.Object Palette คือ แถบแสดงปุ่มต่างๆของโปแกรม

 
เราสามารถเลือกประเภทคำสั่งได้ด้วยการคลิกที่ Common จะปรากฏเมนูขึ้นมา

 
หากเราคลิกปุ่ม Show as Tabs ก็จะเป็นการแสดงเครื่องมือดังนี้


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 ใช้กำหนดรูปแบบต่างๆ ของตัวอักษร และรูปภาพ รวมถึงการสร้างลิงค์

หน้าต่าง Properties สามารถจะเปิดปิดได้ตามต้องการด้วยการคลิกที่   เพื่อขยายหน้าต่างการทำงานให้มากขึ้น
หรือคลิกที่ Window > properties ก็ได้เช่นกัน



10. Dockable Window เปิดหน้าต่างที่รวบรวมเครื่องมืออำนวยความสะดวกเอาไว้  โดยคลิกที่ เพื่อเปิด-ปิดได้ เช่นเดียวกับ Properties

Follow us on

  • Grab our RSS feed
  • Joomla Fan Club

About US

เว็บไซต์บทเรียนออนไลน์ วิชาคอมพิวเตอร์  krukikz.com จัดทำโดย นางสาวกฤติยา พลหาญ  ตำแหน่ง ครูชำนาญการ  โรงเรียนเสลภูมิพิทยาคม อำเภอเสลภูมิ จังหวัดร้อยเอ็ด  สำนักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 27

You are here