ข้อสอบกลางภาครายวิชา CIT3206 เว็บเบสโปรแกรมมิ่ง

1.              สร้าง Folder Website เป็น รหัสนักศึกษา จากนั้น นำไฟล์ที่ Download จาก facebook เก็บไว้ใน folder

2.              Download file template html5 css3 free จากนั้น นำไปเก็บไว้ใน Folder ในข้อ 1

3.              กำหนดให้สร้างเว็บไซต์ หอมหัวใหญ่สมุนไพรในบ้าน (เนื้อหา ดัง File doc1.docx) โดยมีรายละเอียดดังนี้

3.1) เนื้อหาแรกเมื่อแสดงเว็บไซต์ ดังรูป

- กำหนดให้แก้ไขจาก Template ที่ Download ตกแต่งให้ใกล้เคียง

- เมื่อคลิกปุ่มข้อมูลเพิ่มเติมแสดงข้อมูลดังข้อ 3.3

- สร้างเมนูวางไว้ด้านบนสุดชิดขวา รายละเอียดดังข้อ 3.2

 

3.2) สร้างเมนูให้เลือกใช้งาน ดังนี้

- HOME เมื่อคลิก แสดงหน้าแรก

- INFORMATION เมี่อคลิกแสดงดังข้อ 3.3)

- FOODS เมี่อคลิกแสดงดังข้อ 3.4)

- HISTORY เมี่อคลิกแสดงดังข้อ 3.5)

- CONTACT เมี่อคลิกแสดงดังข้อ 3.6)

3.3) สร้างเนื้อหาเกี่ยวกับหอมหัวใหญ่ INFORMATION ดังรูป

-                   กำหนดให้จัดรูปแบบการแสดงผลเป็นดังตัวอย่าง

-                   การแสดงส่วนรูปภาพให้ใช้ไฟล์รูปที่กำหนดให้ (feature-icons.png) หรือตกแต่งให้ใกล้เคียงมากที่สุด

-                   กำหนดให้สามารถแสดงข้อมูลแบบ Responsive

3.4) สร้างเนื้อหาอาหารจากหอมหัวใหญ่ FOODS ดังรูป

-                   กำหนดให้แสดงรูปภาพอาหารดังตัวอย่าง

-                   กำหนดให้สามารถแสดงข้อมูลแบบ Responsive


 

3.5) สร้างเนื้อหาเกี่ยวกับประวัติหอมหัวใหญ่ HISTORY ดังรูป

3.6) สร้างฟอร์มกรอกข้อมูล Contact Us ดังรูป

 

-                   กำหนดให้บังคับป้อนข้อมูลครบทุกช่อง

 

4.             นักศึกษาสามารถตกแต่งเว็บไซต์ให้สวยงามตามความสามารถของตน โดยกำหนดให้เว็บไซต์สามารถแสดงผล Responsive ได้

5.              บีดอัด FILE ทั้ง Folder ส่งมาที่ E-mail : WEBBASECRU@GMAIL.COM

 

 

ตัวอย่างหน้าจอ Responsive

1.หน้าแรก

-                   เมื่อปรับขนาดหน้าจอให้เล็กลง เมนูจะถูกปรับให้เป็นกล่องแสดงรายการ

-                   เมื่อคลิกเลือก จากแสดง ดังนี้

2. ตัวอย่างหน้าจอ Responsive information

-                   เมื่อปรับขนาดหน้าจอให้เล็กลงกำหนดให้ปรับการแสดงผล ดังตัวอย่าง

-                    

 

 

3. ตัวอย่างหน้าจอ Responsive FOODS

4. ตัวอย่างหน้าจอ Responsive HISTORY

5. ตัวอย่างหน้าจอ Responsive Contact Us

-                  กำหนดบังคับให้ป้อนทุกช่อง