Dreamweaver 8

1. Dreamweaver 8

2. เนื้อหา บทที่ 1 ความรู้จักกับ Macromedia Dreamweaver 8 บทที่ 2 กำหนดคุณสมบัติและการจัดข้อมูลของเว็บไซต์ บทที่ 3 การใส่ข้อความบนเว็บเพจ บทที่ 4 การใส่รูปภาพบนเว็บเพจ บทที่ 5 การจัดหน้าเว็บเพจด้วยตาราง บทที่ 6 การสร้างไฮเปอร์ลิงก์เชื่อโยงระหว่างเว็บ บทที่ 7 การเพิ่มลูกเล่นให้หน้าเว็บเพจ

3. ศัพท์ที่ผู้ใช้ INTERNET ควรทราบ

4. Web Page เอกสารแต่ละหน้าถูกเขียนด้วยภาษา HTML ข้อมูล ที่แสดงในหน้าเว็บเพจแต่ละหน้าอาจจะประกอบไปด้วยข้อความต่างๆ รูปภาพ กราฟฟิกต่างๆ และเสียง เป็นต้น

5. Home page เป็นเว็บเพจหน้าแรกสุดของข้อมูลแต่ละเรื่อง เปรียบเสมือนปกหนังสือ เป็นส่วนที่บอกให้ทราบว่าข้อมูลนี้เป็นข้อมูลเรื่องใด พร้อมทั้งมีหัวข้อย่อยต่างๆ แยกออกไปตามแต่ผู้ใช้ต้องการเข้าไปค้นคว้า

6. Web Site เป็นที่ใช้ในการจัดเก็บเว็บเพจแต่ละองค์กรที่จะนำเสนอข้อมูลของตน มักใช้ชื่อองค์กรของตนเป็นชื่อเว็บไซต์ เพื่อสามารถจดจำได้ง่าย

7. Web Browser เป็นโปรแกรมที่ใช้สำหรับอ่านและแสดงข้อมูลที่เป็นภาษา HTML เพื่อให้ผู้ใช้คอมพิวเตอร์สามารถเห็นผลลัพธ์ของเว็บเพจนั้นๆ เช่น Internet Explorer , Netscape Navigator

8. Tcp/IP (Transmission Control Protocol / Internet Protocol) เป็นภาษามาตรฐานที่ใช้ในการสื่อสาร (โปรโตคอล) เชื่อมต่อเข้าด้วยกัน

9. IP address เป็นเลขหมายประจำเครื่อง โดยแต่ละเครื่องจะมีเลขหมายนี้ไม่ซ้ำกัน ประกอบด้วยข้อมูลจำนวน 32 บิต แยกออกเป็น 4 ส่วนๆ ละ 8 บิต แต่ละส่วนจะคั่นด้วยเครื่องหมายจุด เช่น 205.86.265.65

10. HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML จะเริ่มมีผลที่บริเวณ Tag เปิด และจะสิ้นสุดผลของคำสั่งนั้นเมื่อถึง Tag ปิด เมื่อเว็บเพจถูกเรียก ให้แสดงผล Browser จะอ่านภาษา HTML และแปลความหมายของคำสั่งแล้วนำมาแสดงผล

11. M acromedia Dreamweaver เป็นโปรแกรมสำหรับการสร้างเว็บเพจ บริหาร จัดการเว็บไซต์ และการพัฒนาเว็บแอปพลิเคชัน เนื่องจาก Dreamweaver มีความสามารถที่โดดเด่น ดังนี้ สามารถเขียนโปรแกรมสำหรับเว็บได้ทุกรูปแบบ เช่น ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนูคำสั่งและเครื่องมือต่าง ๆ เรียกใช้งานได้ง่ายและสะดวก มีการปรับปรุงกลไกภายในให้มีประสิทธิภาพสูงขึ้น สามารถสร้างแอปพลิเคชันง่าย ๆ โดยไม่เป็นต้องเขียน โปรแกรม สร้างเว็บเพจภาษาไทยได้ทันที โดยไม่ต้องติดต้องโปรแกรมเสริมเพราะ Dreamweaverรองรับตัวอักษรแบบ Unicode

12. ****สร้างโฟลเดอร์ สำหรับเก็บงาน ไว้ที่ไดร์วที่ต้องการ D:Mysite\

13. 2. ทำความรู้จักกับ Macromedia Dreamweaver 8

14. วิธีการเข้าสู่โปรแกรมมีขั้นตอนดังนี้ 1.คลิก                       ที่ Taskbar ด้านล่าง 2. เลือกที่ Program > Macromedia > Macromedia Dreamweaver 8 3. เข้าสู่โปรแกรม Dreamweaver 8

15. ส่วนประกอบของโปรแกรม

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

17. ดับเบิ้ลคลิก หรือ

18. ไปที่เมนู Site เลือก New Site

19. พิมพ์ชื่อ Site ลงไป คลิก Next

25. คลิก Next

26. คลิก No คลิก Next

29. ส่วนประกอบที่สำคัญใน Dreamweaver 8 Menu bar Insert bar Toolbar Window Size (กำหนดขนาดพื้นที่ใช้งาน) Panel Group HTML Code Inspector Properties Inspector

30. Dreamweaverเป็นโปรแกรมออกแบบ Web page ที่ใช้เทคนิค WYSIWYG (วิสสิวิก What You See Is What You Get) ทำให้สามารถออกแบบและสร้าง Web page ได้อย่างดาย 1. Menu bar เป็นที่เก็บคำสั่ง 2. Insert Palette ใช้แทรก Tag ต่างๆ ลงใน Web page ซึ่ง Tag ต่างๆจะถูกแบ่งเป็นกลุ่มสามารถเลือกกลุ่มได้ทั้งแบบ Menu หรือแบบ Tabs

31. Toolbar คือ แถบเครื่องมือสำหรับการใช้งานด้าน HTML และอินเตอร์เน็ท ประกอบด้วย View Options มุมมองในการทำงานเพิ่มเติม Preview / Debug in Browser ทดลอง ดูเว็บเพจทาง Browser หรือกด F12 File Management จัดการกับไฟล์ๆ ที่อยู่ในเว็บเพจ Check Errors ตรวจสอบข้อผิดพลาดจาก Browser Document Title ตั้งชื่อของเว็บเพจ Show Design View แสดงการทำงานแบบแสดงพื้นที่ออกแบบ Show Code and Design Views แสดงการทำงานแบบ HTML ควบคู่กับแสดงพื้นที่ออกแบบ Show Code View แสดงการทำงานในรูปแบบ HTML

32. Tag Selector ใช้ควบคุมการทำงานในรูปแบบ HTML Window Size กำหนดพื้นที่ใช้งานตามต้องการ Estimate Download Time แสดงเวลา ที่ใช้ในการดาวน์โหลด Properties ใช้กำหนดรูปแบบต่างๆ ของตัวอักษร และรูปภาพ รวมถึงการสร้างลิงค์

33. การเลือกรูปแบบตัวอักษร (Font) ในการเลือกรูปแบบตัวอักษรที่ไม่มีมาตรฐานนั้น อาจจะเกิดปัญหาได้ในกรณีที่มีผู้เข้าชมเว็บไซต์แล้วอ่านยาก ไม่สวย หรือเป็นภาษาที่อ่านไม่ออก ดังนั้นจึงควรใช้รูปแบบตัวอักษร ที่เป็นมาตรฐาน เช่น MS Sans Serif เนื่องจากสามารถแสดงผลบนเบราเซอร์ทุกชนิด

34. Font ภาษาไทย การตั้งค่าภาษาไทยโดยการกด Ctrl + U แล้วก็จะได้หน้าต่าง Preferences ดังรูป

35. กำหนดให้สามารถแสดงตัวอักษรภาษาไทยได้กำหนดให้สามารถแสดงตัวอักษรภาษาไทยได้ เลือก Page Properties ใน Properties Inspector หรือ เลือก Modify – Page Properties

36. การใส่รูปภาพบนเว็บเพจการใส่รูปภาพบนเว็บเพจ ชนิดของรูปภาพที่ใช้ในเว็บเพจมีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมีรายละเอียดและลักษณะที่แตกต่างกันดังนี้ 1.GIF (Graphic Interchange Format) เป็นไฟล์ภาพที่สามารถแสดงผลกับ เบราเซอร์ได้ทุกชนิด โดยส่วนมากมักจะใช้รูปภาพไฟล์ .gif กำหนดฉากหลังหรือพื้นที่โปร่งใส การใช้ทำภาพเคลื่อนไหว (Animation) ภาพโลโก้ ตัวการ์ตูน ภาพตัวอักษรลายเส้นต่างๆ 2. JPG (Joint Photographic Expert Group) เป็นไฟล์ภาพที่แสดงสีได้ถึง 16.7 ล้านสี เหมาะสำหรับภาพที่ใช้สีจำนวนมาก ภาพที่มีการไล่ระดับสีอย่างต่อเนื่องหรือภาพถ่ายทั่วไป 3. PNG (Portable Network Graphic) เป็นไฟล์ภาพที่ไม่ได้รับความนิยมมากนักเมื่อเทียบกับ GIF, JPG เนื่องจากเป็นรูปแบบใหม่ จึงไม่สามารถแสดงผลได้ทุกเบราเซอร์

37. การสร้างไฮเปอร์ลิงก์เชื่อโยงระหว่างเว็บการสร้างไฮเปอร์ลิงก์เชื่อโยงระหว่างเว็บ ไฮเปอร์ลิงก์ (Hyperlink) หรือที่เรียกว่า “ลิงก์” เป็นการเชื่อมโยงเว็บไซต์บนอินเตอร์เน็ตจากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง หรือเชื่อมต่อเข้าสู่อีเมลล์ของ Webmaster เพื่อติดต่อสื่อสารกัน การเชื่อมโยงในลักษณะนี้นับว่า มีประโยชน์อย่างมาก เนื่องจากทำให้ผู้เข้าชมสามารถเข้าถึงข้อมูลและเนื้อหาทุกหน้าเว็บเพจภายในเว็บไซต์ของเราได้

38. ส่วนประกอบของไฮเปอร์ลิงก์ส่วนประกอบของไฮเปอร์ลิงก์ ในการทำงานของไฮเปอร์ลิงก์มีส่วนประกอบดังนี้ 1. ต้นทาง (Source Anchor) หมายถึง ส่วนประกอบบนเว็บที่เป็นจะลิงก์ ซึ่งเมื่อเลื่อเมาส์ไปชี้พอยเตอร์จะเปลี่ยนเป็นรูปมือ และเมื่อคลิกเลือกหน้าเว็บหรือข้อมูลปลายทางจะปรากฏขึ้นมา ซึ่งอาจเป็นข้อความหรือรูปภาพก็ได้

39. 2. ปลายทาง (Destination Anchor) หมายถึง เนื้อหาข้อมูลต่างๆ ไม่ว่าจะเป็นข้อความหรือรูปภาพ ซึ่งถูกเรียกให้ปรากฏขึ้นมาเมื่อมีผู้ชมคลิกที่ลิงก์ต้นทาง ซึ่งลิงก์ปลายทางแบ่งได้เป็นหลายรูปแบบ ดังนี้ 􀂾 ตำแหน่งเฉพาะบนเว็บเพจ คือการสั่งให้เบราเซอร์เปิดเว็บเพจพร้อมทั้งเลื่อนไป ยังตำแหน่งที่ระบุไว้โดยทันที 􀂾 เว็บเพจหรือเว็บไซต์ โดยส่วนมากลิงก์บนเว็บเพจจะใช้สำหรับเปิดไปยัง หน้าเว็บเพจอื่นภายในเว็บไซต์เดียวกัน หรือเปิดไปยังหน้าเว็บไซต์อื่น 􀂾 ไฟล์เอกสารอื่นๆ สามารถลิงก์ไปยังเนื้อหาหรือข้อมูลต่างๆ บน อินเตอร์เน็ตได้ หากรู้ตำแหน่งที่อยู่ โดยวิธีการทำงานของเบราเซอร์ จะขึ้นอยู่กับประเภทของไฟล์เหล่านั้น 􀂾 คำสั่งส่งอีเมลล์ คือการสั่งให้เปิดโปรแกรมอีเมลล์บนเครื่อง คอมพิวเตอร์ของผู้ชม เพื่อเตรียมเขียนข้อความส่งอีเมลล์ 􀂾 การรันโปรกแกรมจาวาสคริปต์ สำหรับใช้ในการโต้ตอบบนเว็บเพจ การปิดวินโดร์วเบราเซอร์ การเปิดลิงก็เป็นวินโดว์ใหม่ แบบป๊อบอัพ

40. ส่วนประกอบที่สำคัญ Document Toolbar แถบเครื่องมือเอกสารเป็นที่เก็บของ Tool ที่ใช้บ่อยๆ ใส่ TITLEของ Web pag Preview ใน Browser หรือ กด F12 Show Design View แสดเฉพาะหน้าออกแบบ(เหมือนจริง) Show Code and Design แสดงคำสั่งทั้ง HTML และ PHP และ หน้าออกแบบ Show Code View แสดงคำสั่งทั้ง HTML และ PHP

41. ส่วนประกอบที่สำคัญ Properties Inspectorใช้กำหนดคุณสมบัติของ object หรือ tag ที่กำลังเลือกขณะนั้น การซ่อน/แสดง Window เลือกใน เมนู Window

42. เลือก มุมมอง Code เลือก มุมมอง Spilt

43. ขณะ Design สามารถกำหนดคุณสมบัติของอักษร เช่น สี , ขนาด ฯลฯ ผ่าน Properties Inspector กำหนดคุณสมบัติของทั้ง Page

44. กำหนดให้สามารถเคาะ Spacebar ได้มากกว่า 1 ช่องว่าง

45. การขึ้นย่อหน้าใหม่ การขึ้นย่อหน้าใหม่ทำได้ 2 วิธี คือ 1.Enter  จะมีการแทรกบรรทัดว่างก่อนและหลังข้อความ ทำให้เกิดระยะห่างระหว่างบรรทัดมาก เหมาะสำหรับทำหัวข้อหลัก 2.Shift+Enter จะไม่แทรกบรรทัดว่าง วิธีนี้ใช้สำหรับขึ้นบรรทัดใหม่แบบเนื้อหาต่อเนื่องกัน

46. การสร้าง Frame

47. การสร้าง Frame

48. กำหนดคุณสมบัติ Frameset เลือก Frameset

49. กำหนดรายละเอียดแต่ะละ Frame ใน Frameset เนื้อหาที่จะนำมาแสดงใน Frame นี้ เลือกเฉพาะ Frame

50. สร้างเนื้อหาของ Web page ที่จะถูกนำมาแสดงใน Frame