ขั้นตอนการพัฒนาเว็บไซต์ กาหนดเป้ าหมาย และวางแผน
วิเคราะห์ และจัดโครงสร้างข้อมูล ออกแบบเว็บ และเตรี ยมข้อมูล ลงมือสร้าง และทดสอบ เผยแพร่ และส่ งเสริ มให้เป็ นที่รู้จกั
ดูแล และพัฒนา
ข้ อควรทราบ
• เว็บไซต์ (Website) • โฮมเพจ (Homepage) • เว็บเพจ (Webpage)
รูปแบบของโครงสร้ างเว็บไซต์ แบบเรี ยงลาดับ
แบบระดับชั้น
แบบผสม
โครงสร้ างพืน้ ฐาน <html> <head> <title>หัวข้ อเว็บเพจ</title> </head> <body> ส่ วนทีม่ เี นือ้ หา และข้ อมูลเกีย่ วกับ ภาพ Link ทีป่ รากฎในเว็บเพจ </body> </html>
HTML
HTML
ส่ วนประกอบ Macrmedia Dreamweaver
การ SET UP Macromedia Dreamweaver ให้ รองรับภาษาไทย วิธีที่ 1 กาหนดทีละเว็บเพจ
การ SET UP Macromedia Dreamweaver ให้ รองรับภาษาไทย
การ SET UP Macromedia Dreamweaver ให้ รองรับภาษาไทย วิธีที่ 2 การกาหนดภาษาเป็ นค่ าเริ่มต้ นให้ กบั ทุกเว็บเพจ
การ SET UP Macromedia Dreamweaver ให้ รองรับภาษาไทย
การ SET UP Macromedia Dreamweaver ให้ รองรับภาษาไทย
การสร้ าง Site
การสร้ าง Site
การสร้ าง Site
เปิ ดเว็บไซต์ Personal Home Page เพือ่ ใช้ งาน
การสร้ างเว็บเพจใหม่
การสร้ างเว็บเพจใหม่
การเปิ ดเว็บเพจเดิม
การบันทึกเว็บเพจ ข้ อควรระวังเรื่องชื่อและนามสกุลไฟล์ • ชื่อไฟล์ควรเป็ นภาษาอังกฤษเท่านั้น • ไม่มีอกั ขระพิเศษใดๆ • หากต้องการวรรคใช้_ • นามสกุล .htm หรื อ .html เหมือนกัน
การกาหนดคุณสมบัตพิ นื้ ฐานของเว็บเพจ
การกาหนดคุณสมบัตพิ นื้ ฐานของเว็บเพจ
การกาหนดคุณสมบัตพิ นื้ ฐานของเว็บเพจ
การกาหนดคุณสมบัตพิ นื้ ฐานของเว็บเพจ
การกาหนดคุณสมบัตพิ นื้ ฐานของเว็บเพจ
ข้ อความ
จัดตาแหน่ง วรรค ขึ้นบรรทัดใหม่
แทรกเส้ นคัน่
การ Copy จากโปแกรมอืน่ /ตาราง Excel
การใส่ ภาพ
.Gif .JPG/.JPEG .PNG
การใส่ ภาพ
การใส่ ภาพ
การใส่ ภาพ
การใส่ ภาพ
การใส่ ภาพ
ปรับแต่ งคุณสมบัตขิ องภาพกราฟฟิ ก
สร้ างเอฟเฟ็ คต์ สลับภาพเมื่อชี้เม้ าส์ (Rollover Image)
ใส่ ภาพฉากหลัง
no-repeat
repeat
repeat-x
repeat-y
การสร้ างไฮเปอร์ ลงิ้ ค์ (Hyperlink)
โปรโตคอล
ชื่อโดเมน
พาธและชื่อไฟล์
http://www.elephantstale.com/trainting/course.htm
1. การสร้ างลิงค์ ภายในเว็บเพจเดียวกัน
<a name="elephant"></a>
1. การสร้ างลิงค์ ภายในเว็บเพจเดียวกัน
<a href="#elephant">Elephant</a>
2. การสร้ างลิงค์ไปยังเว็บเพจหรือไฟล์ภายในเว็บไซต์ เดียวกัน
<a href="index.html">หน้าหลัก</a>
Target
3. สร้ างลิงค์ไปยังเว็บไซต์ อนื่
4. สร้ างลิง้ ค์เพือ่ ส่ งอีเมลล์
4. สร้ างลิง้ ค์เพือ่ ส่ งอีเมลล์
5. สร้ าง Image Map
6.การสร้ าง Navigation Bar
6.การสร้ าง Navigation Bar
7. การสร้ าง Jump Menu
จัดหน้ าเว็บเพจด้ วยตาราง โครงสร้ างของตาราง
การสร้ างตาราง
ปรับแต่ งคุณสมบัตขิ องตาราง
Cell
ภาพกราฟิ ก Photoshop
สร้ างตารางรวมภาพกราฟิ กจาก Photoshop
สร้ าง Banner ด้ วย Photoshop
การสร้ างฟอร์ ม (Form) องค์ประกอบของการสร้ างฟอร์ ม • • • •
ตัวฟอร์ม ฟอร์มออบเจ็ค ปุ่ ม Submit และ Reset องค์ประกอบอื่นๆ
การเล่นมัลติมีเดียบนเว็บเพจ (Web Multimedia)
การเล่นมัลติมีเดียบนเว็บเพจ (Web Multimedia)
สร้ างปุ่ ม Flash
ปรับแต่ งคุณสมบัตขิ องปุ่ม Flash
สร้ างข้ อความ Flash
การแสดงมัลติมีเดียของ Flash และ Shockwave
การแสดงมัลติมีเดียของ Flash และ Shockwave
การแสดงมัลติมีเดียของ Flash และ Shockwave
การแสดงมัลติมีเดียของ Flash และ Shockwave
เล่นมัลติมีเดียอืน่ บนเว็บ .midi / .mid .wav .aif .mp3 .rm .mov .avi .wmv, asf
เล่นเสี ยงโน๊ตดนตรี เสี ยง เสี ยง เสี ยง บันทึกเพลง เสี ยงและวีดีโอ เสี ยงและวีดีโอ เสี ยงและวีดีโอ
เล่นมัลติมีเดียโดยใช้ ปลัก๊ อิน (Plugin)
เล่นมัลติมีเดียโดยใช้ ปลัก๊ อิน (Plugin)
เล่นมัลติมีเดียโดยใช้ ปลัก๊ อิน (Plugin)
สร้ างเว็บเพจให้ โต้ ตอบกับผ้ชู ม (JavaScript Behavior)
ตัวอย่ างการนา Behavior มาใช้ งาน
เปิ ดวินโดว์แบบป๊ อปอัพ
เปิ ดวินโดว์แบบป๊ อปอัพ
เล่นเสียง
เล่นเสียง
เล่นเสียง
แสดงกล่องข้ อความ
แสดงกล่องข้ อความ
แสดงกล่องข้ อความ แสดงข้ อความบนแถบสถานะ
แสดงกล่องข้ อความ
แสดงกล่องข้ อความ
การบริหารจัดการเว็บไซต์
การบริหารจัดการเว็บไซต์
การเผยแพร่ เว็บไซต์
การเผยแพร่ เว็บไซต์