ใบความรู้ หน่วยที่ 4

หน่วยท่ี 4 การสรา้ งเว็บไซต์ใหม่ด้วยโปรแกรมAdobe Dreamweaver CS5

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

1. คลิกท่ีเมนู Site>New Site…2. จะปรากฏกล่องขอ้ ความใหใ้ ส่รายละเอียดของเว็บไซตท์ แ่ี ถบ Site3. กาหนดช่อื เวบ็ ไซตท์ ีช่ ่อง Site Name ดงั รปู4. คลกิ เลือกโฟลเดอร์ทตี่ อ้ งการใชเ้ กบ็ ขอ้ มลู หลกั ของเวบ็ ไซต์ท่ชี ่องLocal Site Folder5. จะปรากฎโฟลเดอร์ทเี่ ลอื ก คลิกป่มุ Select เพือ่ เลอื กไซตท์ ่ีตอ้ งการ6. คลกิ ปมุ่ Save เพือ่ บนั ทกึ ข้อมูล

4.2 การเปลี่ยนแปลงแก้ไขไซตง์ านใหม่หากตอ้ งการทีจ่ ะปรับปรุงแก้ไขไซต์งานเพื่อบนั ทกึ ขอ้ มลู ไวท้ ี่ใหม่ สามารถทาได้ดงั น้ี 1. คลิกเลือก Site > Manage Sites 2. คลกิ เลือกเว็บไซต์ท่ีต้องการแก้ไข 3. คลกิ ปุ่ม Edit เพือ่ แก้ไข 4. แกไ้ ขขอ้ มลู เวบ็ ไซต์ตามท่ีต้องการ 5. คลกิ ปมุ่ Save

4.3 การสร้างไฟลเ์ ว็บเพจใหม่การสรา้ งเพจหน้าใหมข่ ึน้ มา สามารถทาได้ดังนี้ 1. คลกิ ทเี่ มนู File > New หรอื คลกิ ทค่ี ยี ล์ ดั ที่แป้นพิมพ์ Ctrl + N 2. คลิกเลือก blank Page สร้างเอกสารเว็บเปล่า 3. คลกิ เลือกประเภทของเวบ็ เพจเปน็ HTML 4. คลิกเลือกรูปแบบเป็น None 5. คลิกปมุ่ Create เพ่ือสร้างหน้าเวบ็ เปลา่ ใหม่ 6. หน้าเว็บใหม่จะแสดงขน้ึ มา

4.4 การสร้างโฟลเดอรใ์ หม่ การสร้างโฟลเดอร์ หลงั จากที่ไดส้ ร้างเวบ็ ไซต์ขึน้ มาใหมแ่ ล้วสารถสร้างโฟลเดอรใ์ หมข่ ้นึ มาเพ่ือจดั เกบ็ ไฟล์ข้อมูลตา่ ง ๆ ไดด้ ังน้ี1. คลิกท่ี Panel File2. คลิกเมาส์ขวาที่โฟลเดอรห์ ลักเลือก New Folder3. กาหนดช่ือโฟลเดอร์ทตี่ ้องการ กด Ender4. จะได้โฟลเดอร์เพ่ือจดั เก็บไฟลข์ ้อมลู ที่เกย่ี วขอ้ งกับเว็บไซต์

4.5 การกาหนดแถบหัวชอ่ื เรอื งของเวบ็ ไซต์การกาหนดช่ือหัวเรอื่ งใหแ้ สดงบนหนา้ ต่างบราวเซอร์ เพือ่ ใหท้ ราบว่าเว็บเพจทสี่ รา้ งข้ึนแต่ละหน้านัน้ เก่ียวข้องกบั เรอื่ งอะไร ซ่งึ หวั เรื่องน้ันจะปรากฏเมื่อแสดงผลข้อมูลผา่ นหนา้ ตอ่ งบราวเซอร์วธิ ีที่ 1 ใส่หัวเรือ่ งบนกลอ่ งเครอ่ื งมือ (Tools Bar)วิธที ่ี 2 ใสห่ ัวเรอ่ื งทเี่ มนูวิธที ่ี 3 ใสห่ ัวเรอ่ื งทมี่ มุ มอง code

4.6 การปรับแต่งคุณสมบัตใิ ห้กับเวบ็ ไซต์ การสรา้ งเว็บไซตด์ ้วยโปรแกรม Adobe Dreamweaver CS5 สามารถใชไ้ ดท้ ้งั คาสง่ั CSS Style และ HTML Code โดยสามารถตกแต่งไดใ้ นแต่ละสว่ นดังนี้ 4.6.1 การต้งั คา่ การแสดงผลใหก้ ับเวบ็ ไซต์ 4.6.2 การใสส่ พี ้ืนหลงั ให้กับเวบ็ ไซตโ์ ดยใช้ CSS 4.6.3 การใสร่ ูปภาพเปน็ พื้นหลงั ให้กับเวบ็ ไซต์ โดยใช้ CSS 4.6.4 การใส่สพี ้นื หลงั ให้กับเว็บไซต์ โดยใช้ HTML 4.6.5 การใส่รูปภาพเปน็ พื้นหลังใหก้ ับเว็บไซต์ โดยใช้ HTML

4.7 การบันทึกเอกสารเว็บเพจการบนั ทึกเอกสารเว็บเพจ สามารถทาได้ดังน้ี 1. คลกิ ท่เี มนู File > Save 2. ปรากฏกล่องข้อความการบันทึกขอ้ มูล 3. คลกิ ปุ่ม Save เพ่ือบนั ทึกข้อมูล 4. ท่ีหน้าตา่ ง Panel จะพบไฟล์ท่ีบันทกึ ดงั รูป