การออกแบบและพัฒนาเว็บไซต์

งานนำเสนอเรื่อง: "การออกแบบและพัฒนาเว็บไซต์"— ใบสำเนางานนำเสนอ:

1 การออกแบบและพัฒนาเว็บไซต์

2 Macromedia Dreamweaver
11 ตุลาคม 2562

3 การสร้าง Web Page เขียน Code เอง CODE HTML ใช้โปรแกรม สำเร็จรูป
(WYSIWYG*) *What you see is what you get. 11 ตุลาคม 2562

4 ขั้นตอนการพัฒนาเว็บ วางแผนการสร้างเว็บไซต์ กำหนดหัวข้อและเนื้อหาที่จะนำเสนอ ทำเว็บอะไรดีนะเรา? ทำเว็บส่วนตัวดีกว่า 11 ตุลาคม 2562

5 กำหนดชื่อไฟล์ของเอกสารเว็บ 1 หน้า/1 ไฟล์
11 ตุลาคม 2562

6 การออกแบบเว็บในประเภทต่างๆ
แบบเชิงเส้น แบบรากต้นไม้ แบบผสม 11 ตุลาคม 2562

7 คำแนะนำในการตั้งชื่อ File และ Folder
11 ตุลาคม 2562

8 แผนผังการดูแลเว็บเพจ
สร้างเว็บเพจ ปรับปรุง Upload 11 ตุลาคม 2562

9 ทำความรู้จักกับ Dreamweaver
Dreamweaver เป็นโปรแกรมประเภท Web Design Dreamweaver ถือได้ว่าเป็นเครื่องมือสำหรับสร้างเว็บเพจ และ ดูแลเว็บไซต์ ที่มีประสิทธิภาพสูง เป็นที่นิยมใช้ อย่างกว้างขวาง ซึ่งเป็นโปรแกรมสำหรับเขียนเว็บไซต์โดยเฉพาะ พร้อมทั้งสามารถแทรก Java Scripts และ ลูกเล่นต่างๆได้มากมาย 11 ตุลาคม 2562

10 What version? โปรแกรม Dreamweaver ออกมาได้หลากหลาย version แล้ว จนถึงวันนี้ Version CS6 11 ตุลาคม 2562

11 ความสามารถของ Dreamweaver
1. สนับสนุนการทำงานแบบ WYSIWYG (What You See Is What You Get) หมายความว่า เว็บที่เราเขียนหน้าจอ Dreamweaver ก็จะแสดงแบบเดียวกับเว็บเพจจริงๆ ช่วยให้เราเขียนเว็บเพจง่ายขึ้น ไม่ต้องเขียน Code HTML เอง 2. มีเครื่องมือในการช่วยสร้างเว็บเพจ ที่มีความยืดหยุ่นสูง 3. สนับสนุนภาษาสคริปต์ต่างๆ ทั้งฝั่ง Client และ Server เช่น Java, ASP, PHP, CGI, VBScript 4. มีเครื่องมือในการ Upload หน้าเว็บเพจไปที่เครื่อง Server เพื่อทำการเผยแพร่งานที่เราสร้างในอินเทอร์เน็ต โดยการส่งผ่าน FTP หรือ โดยการใช้โปรแกรม FTP ภายนอกช่วย เช่น WS FTP 5. รองรับมัลติมีเดีย เช่น การใส่เสียง, การแทรกไฟล์วิดีโอ, การใช้งานร่วมกับโปรแกรม Flash , Fireworks 11 ตุลาคม 2562

12 การใช้งานพื้นฐาน (สิ่งที่ควรทราบเบื้องต้น)
1. ภาษา HTML เป็นภาษาที่ออกแบบสำหรับการแสดงผลเท่านั้น! ไม่สามารถประมวลผล หรือ ใช้เขียนเว็บแอพพลิเคชั่นได้ 2. หากต้องการเพิ่มลูกเล่น หรือ เทคนิคพิเศษ เช่น Effect ต่าง ๆ ต้องนำภาษา JavaScript มาเสริม HTML อีกที 3. การจัดรูปแบบใน Code เช่นการขึ้นบรรทัดใหม่ การเว้นวรรค ไม่มีผลต่อการแสดงผลทาง Web Browser 4. การขึ้นบรรทัดใหม่ ต้องใช้ Tag <BR> หรือ กดปุ่ม Shift+Enter 11 ตุลาคม 2562

13 การใช้งานพื้นฐาน (สิ่งที่ควรทราบเบื้องต้น) (ต่อ)
5. การขึ้นย่อหน้าใหม่ ต้องใช้ Tag <P> หรือ กดปุ่ม Enter 6. การเว้นวรรค ต้องใช้ Tag พิเศษ คือ   หรือ กดปุ่ม Ctrl+ Shift + Spacebar 7. หลักการอ่าน Tag ของภาษา HTML จะอ่านค่าจาก Tag ที่อยู่ด้านในก่อน 8. ไฟล์ HTML และ Script ต่างๆ สามารถเปิดแก้ไขในโปรแกรม Text Editor ทั่ว ๆ ไป ไม่จำเป็นต้องแก้ไขใน Dreamweaver เพียงอย่างเดียว 9. การแทรกข้อความ และ การปรับแต่งค่าต่าง ๆ ให้คลิกตำแหน่งที่ต้องการ แล้วพิมพ์ข้อความตามต้องการ หรือให้เลือกข้อความเมื่อต้องการกำหนดค่าต่าง ๆ เพิ่มเติม 11 ตุลาคม 2562

14 ทำความรู้จักกับส่วนประกอบที่สำคัญของโปรแกรม
11 ตุลาคม 2562

15 ตั้งค่าภาษาไทยใน Dreamweaver ก่อนสร้างเว็บเสมอนะ
Edit/Preferences... Ctrl+U Step 1 Step 2 ++เราจะสร้างเว็บภาษาไทย+++ 11 ตุลาคม 2562

16 เริ่มต้นสร้างเว็บแล้วนะ
ก่อนอื่นจะเริ่มต้นสร้างเว็บต้องรู้จัก การสร้าง Site งานกันก่อนนะ 11 ตุลาคม 2562

17 การสร้าง Site งาน Menu Site/New Site ตั้งชื่อไซต์
สร้าง Folder เก็บ File เว็บ เสร็จแล้วก็ OK เลยนะคะ 11 ตุลาคม 2562

18 อย่าลืมพิมพ์ Title ด้วยนะ
มีประโยชน์ต่อการ Search Engine นะจะบอกให้ F12 ดูเลย RUN 11 ตุลาคม 2562