สร้างพื้นที่เก็บข้อมูล
1. สร้างโฟลเดอร์ขึ้นมา 1 โฟลเดอร์ (ในที่นี่ให้ตั้งชื่อว่า Mysite)
2. ดับเบิลคลิกเข้าไปในโฟลเดอร์ Mysite แล้วสร้างโฟลเดอร์ย่อยอีก 2 โฟลเดอร์ ให้ชื่อว่า page และ images
3. เปิดโปรแกรม Dreamweaver ขึ้นมา
4. เลือก HTML
5. เมื่อสร้างไฟล์ html แล้ว ให้ปรับโหมดมาเป็นแบบ Split และเปิดพาเลต CSS Styles
6. สร้าง Div Tag ขึ้นมาเพื่อคุมหน้าเว็บไซต์ ให้ใส่ชื่อในช่อง ID: (ในที่นี้ใส่ชื่อเป็น mysite)
7. จะได้ Div Tag ขึ้นมาดังรูป
8. สร้าง CSS ขึ้นมาควบคุมองค์ประกอบของเว็บไซต์ ด้วยการคลิกที่ปุ่ม New CSS Rule
9. เลือก Selector ให้ควบคุม Div Tag ที่เราต้องการ (ในตัวอย่างใช้ชื่อ mysite) คลิกปุ่ม OK
10. โปรแกรมจะให้เราบันทึกรูปแบบของ CSS ตั้งชื่อตามใจชอบ (ในตัวอย่างจะใช้ชื่อว่า main) กดปุ่ม Save แล้วโปรแกรมจะขึ้นกล่องให้ตั้งค่า Div Tag ให้ไปที่แท็บ Box ปรับค่า Width(ความกว้าง) ตามต้องการ (ในตัวอย่างปรับให้มีขนาด 1024) หลังจากนั้นปรับค่า Top เป็น auto เราก็จะได้กรอบหลักของเว็บไซต์แล้ว
11. ลบข้อความที่ขึ้นว่า “Content for id “mysite” Goes Here” ที่อยู่ใน Div Tag ออกเพราะเราไม่ต้องการใช้งาน
12. สร้างพื้นที่สำหรับใส่ Banner ของเว็บไซต์ โดยเริ่มจากคลิกที่ Div Tag ที่ชื่อ mysite แล้วคลิกที่ปุ่ม Insert Div Tag ตั้งชื่อใน ID: ว่า banner
13. สร้าง CSS ขึ้นมาควบคุมกล่องสำหรับใส่ Banner ของเว็บไซต์ ด้วยการคลิกที่ปุ่ม New CSS Rule ดังภาพ คลิกที่ปุ่ม OK
14. โปรแกรมจะขึ้นกล่องขึ้นมาให้ตั้งค่า เลือกที่แท็บ Box ปรับค่า Width เป็น 1024 ปรับค่า Height เป็น 250 (ขนาดขึ้นอยู่กับ Banner ที่เราสร้าง)
15. ต่อไปเป็นการสร้างกล่องเพื่อใส่เมนู (Menu) เนื้อหา (Content) และส่วนท้ายของเว็บ (Footer) โดยการคัดลอกคำสั่ง <div id=”banner”>Content for id “banner” Goes Here</div> แล้ววางไว้บรรทัดถัดไปอีก 3 บรรทัด แล้วเปลี่ยนชื่อเป็น menu , content และ footer ดังภาพด้านล่าง
16. ต่อไปเป็นการกำหนดค่าขนาด และตำแหน่งให้กับกล่องต่างๆ ที่เราสร้างในขั้นตอนที่ 15.
17. ใช้เมาส์คลิกที่แถบคำสั่ง <div id=”menu”>Content for id “menu” Goes Here</div> แล้วสร้าง CSS ขึ้นมาควบคุมโดยกดปุ่ม New CSS Rule (ขนาดขึ้นอยู่กับปุ่มที่เราสร้าง ในตัวอย่างสร้างปุ่มที่มีขนาด 235×55 จำนวน 4 ปุ่ม ดังนั้น จึงต้องสร้างกล่องสำหรับใส่เมนูที่มีขนาด 235×220)
17. สร้างกล่องย่อยใน Div Tag menu อีก 4 กล่อง โดยใช้วิธีเดียวกับข้อ 16. แต่เปลี่ยนขนาดเป็นเท่ากับปุ่มเมนูที่สร้างขึ้น (ในตัวอย่างมีขนาด 235×55) 18. ต่อไปสร้างส่วนควบคุมกล่องใส่เนื้อหา โดยคลิกที่ Div Tag ที่มีโค้ดเป็น <div id=”content”>Content for id “content” Goes Here</div> แล้วสร้าง CSS ขึ้นมาควบคุมโดยกไหนดค่าคือ Width มีขนาด 770 (ขนาดขึ้นอยู่กับผู้จัดทำ) ค่า Float ปรับเป็น right คลิกเครื่องหมายถูกที่ช่อง Same for all ออก แล้วปรับค่า Right เป็น 10
19. ในส่วนของ Footer ก็ทำเช่นเดียวกัน แต่ปรับค่าดังภาพด้านล่าง
20. เปลี่ยนชื่อเว็บไซต์ในช่อง Title:
การสร้าง Banner เว็บไซต์
1. เปิดโปรแกรม Adobe Photoshop ขึ้นมา
2. ไปที่เมนู File > New จะได้หน้าต่างจัดการไฟล์ใหม่ขึ้นมา ปรับค่า Width: เป็น 1024 pixels และค่า Height: เป็น 250 pixels เสร็จแล้วคลิกปุ่ม OK
3. จัดการตกแต่ง Banner ตามความต้องการ (สามารถศึกษาวิธีการใช้งานโปรแกรม Adobe Photoshop ได้ที่ https://kru-it.com/computer/adobe-photoshop/ )
4. หลังจากตกแต่ง Banner เสร็จเรียบร้อยแล้ว ไปที่เมนู File > Save จะปรากฏหน้าต่างตั้งค่าการบันทึกขึ้นมา ให้เปลี่ยนข้อมูลในช่อง
– Save in: เป็นโฟลเดอร์ Mysite > images
– File name: เป็น banner
– Format: เป็น JPEG (*.JPG;*JPEG;*.JPE)
5. ตั้งค่าข้อมูลแล้วคลิกที่ปุ่ม Save
6. ทำตามตั้งแต่ขั้นตอนที่ 2 ถึงขั้นตอนที่ 5 แต่เปลี่ยนขนาดเป็น 1024 x 65 และตั้งชื่อตอนบันทึกว่า footer
การแทรกภาพในโปรแกรม Dreamweaver
1. กลับไปที่โปรแกรม Dreamweaver
2. ใช้เมาส์คลิกที่ชองที่เตรียมไว้ใส่ Banner
3. คลิกที่แท็บ Common
4. คลิกที่ปุ่ม Images
5. จะปรากฏหน้าต่างขึ้นมาให้เลือกไฟล์ (ไฟล์อยู่ที่โฟลเดอร์ Mysite > images > banner.jpg) เสร็จแล้วคลิกปุ่ม OK
6. เลือกชองที่เตรียมไว้ใส่ Footer แล้วทำตามขั้นตอนที่ 3 ถึงขั้นตอนที่ 5
การบันทึกและทดลองแสดงผลบนเว็บเบราเซอร์
1. ในโปรแกรม Dreamweaver ไปที่เมนู File > Save As… แล้วบันทึกงานไว้ในโฟลเดอร์ Mysite ในชื่อ index.html
2. กดปุ่ม F12 โปรแกรมจะเปิดเว็บเบราเซอร์ขึ้นมาเพื่อแสดงผลเว็บไซต์ที่เราสร้างขึ้น
Comments are closed.