การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver

การพัฒนาเว็บเบื้องต้นด้วยMacromedia Dreamweaver โดย อาจารย์กฤติเมธ โอพั่ง

ทำความรู้จักเว็บไซต์ • ขั้นตอนในการพัฒนา website • การจัดการเกี่ยวกับเว็บเพจ • การใส่ตัวอักษร

การใส่ภาพ • การใส่ flash • การสร้างลิ้งก์

มาทำความรู้จักกับเว็บไซต์มาทำความรู้จักกับเว็บไซต์ • 1 เว็บไซต์ประกอบด้วย หลายเว็บเพจ • 1 เว็บเพจคือ ไฟล์เอกสาร HTML 1 ไฟล์ HTML (Hypertext Markup Language)

ใน 1 เว็บไซต์ จะมี หน้าหลัก 1 หน้าเรียกว่า โฮมเพจ (Homepage) • 1ไฟล์ html มีการใส่รูปภาพ ภาพเคลื่อนไหว และอื่นๆ อีกมากมาย

webpage (index.htm) ……. ……. webpage (king.htm) ……. ……. webpage (map.htm) ……. ……. ........ website

งานเว็บไซต์ของนักศึกษางานเว็บไซต์ของนักศึกษา งานกลุ่ม :พัฒนาเว็บไซต์เนื่องในวโรกาสที่ในหลวงของเราครองราชย์ ครบ 60 ปี งานเดี่ยว :หน้าจอเกี่ยวกับการใช้ IT ของนักศึกษาในมหาวิทยาลัยราชภัฏสวนดุสิต

ลักษณะของเว็บที่ต้องพัฒนาลักษณะของเว็บที่ต้องพัฒนา • ในงานกลุ่มต้องพัฒนาหน้าหลัก (Homepage) ในวโรกาสครองราชย์ 60 ปี และลิงก์ไปยังเว็บเพจเกี่ยวกับการทรงงานของในหลวงด้านต่างๆ จำนวน 10 เว็บเพจ (ตามจำนวนสมาชิก)

จากหน้าหลักให้สร้างลิ้งก์ไปยังหน้า สมาชิกกลุ่ม ซึ่งประกอบด้วยรูปภาพของสมาชิกกลุ่ม • จากหน้าสมาชิกกลุ่ม ให้สร้างลิ้งก์จากรูปภาพของแต่ละคนไปยัง เว็บไซต์เดี่ยวของสมาชิกแต่ละคน

หน้าการทรงงาน ของในหลวง ด้านต่างๆ 10 หน้า หน้าหลัก Homepage ...... หน้าสมาชิกกลุ่ม 10 หน้า ......

ข้อควรรู้ในการทำเว็บไซต์ข้อควรรู้ในการทำเว็บไซต์ ข้อมูลและรูปภาพที่นำมาประกอบการทำเว็บไซต์ต้องบอกแหล่งอ้างอิงด้วย

ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์ • เตรียมข้อมูล • ออกแบบเว็บเพจ • พัฒนา • อัพโหลด file ไปยัง remotesite

เริ่มต้นการใช้งาน Macromedia Dreamweaver

ความรู้เกี่ยวกับไซต์ • Local site คือ การสร้าง folder เพื่อเก็บไฟล์งานต่างๆ ไว้ในเครื่องของเรา • Remote site คือ การเก็บไฟล์งานไว้ที่เครื่อง web server

Remote site เช่น web server ของ มสด. อัพโหลด Local site เช่น C:\MyDocument\king_website

การสร้าง local site

Local Site

เริ่มต้นการสร้างเว็บเพจเริ่มต้นการสร้างเว็บเพจ

เริ่มต้นด้วยการ save file ก่อนเลย หลักการตั้งชื่อไฟล์ • หน้าแรก หรือ homepage ควรตั้งชื่อเป็น • home.htm • index.htm • default.htm

หลักการตั้งชื่อไฟล์ (ต่อ) • ชื่อไฟล์ต้องเป็นตัวอักษรภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น ใช้เลข 0-9 ประกอบได้ • ชื่อไฟล์ห้ามมีเว้นว่างระหว่างชื่อ (space) ควรใช้ขีดล่าง (_) หรือขีดกลาง (-) ถ้าต้องการแบ่งชื่อไฟล์ เช่น king_work.htm

หลักการตั้งชื่อไฟล์ (ต่อ) • ห้ามใช้ตัวอักขระพิเศษ เช่น % * > < / , ในการตั้งชื่อไฟล์ • หลีกเลี่ยงการขึ้นชื่อไฟล์ด้วยตัวเลข • ตั้งชื่อไฟล์สั้นแต่ได้ใจความ

แถบเครื่องมือ แบบการทำงาน หน้าต่างออกแบบ คุณสมบัติของเครื่องมือที่เลือกใช้

แทรกสื่ออื่นๆ สร้าง link แทรกตาราง สร้าง link ไปจดหมาย แทรกรูปภาพ สร้าง link ในหน้าเดียวกัน

√ มุมมองออกแบบ

มุมมองภาษา HTML

ภาษา HTML มุมมองออกแบบ

หัวข้อในวันนี้ • การจัดการเกี่ยวกับหน้าเอกสาร (webpage) • การจัดการเกี่ยวกับตัวอักษร • การใส่ตาราง • การใส่สื่อต่างๆ

การสร้างลิ้งก์ • การสร้าง layer • การทำให้ search engine ค้นหาเว็บไซต์เราเจอ

กำหนดส่งเว็บไซต์ วัน ....... เดือน .......... พ.ศ. ........ ส่งเป็น URL ให้กับอาจารย์ผู้คุมตอนเรียน

การจัดการกับหน้า (webpage) คลิ๊กเม๊าส์ขวาที่หน้าออกแบบ เลือก Page Properties

การเปลี่ยนขนาดตัวอักษรการเปลี่ยนขนาดตัวอักษร

การเปลี่ยนสีตัวอักษร

การเปลี่ยนสีพื้นหลัง

การเปลี่ยนพื้นหลังให้เป็นรูปภาพการเปลี่ยนพื้นหลังให้เป็นรูปภาพ

การใส่ชื่อให้กับเว็บเพจ (webpage)

Background color • Background image

การจัดการเกี่ยวกับ อักษรภาษาไทย

การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver