สวัสดีครับ พี่ๆ น้องๆ ใน Full Course Private [ HTML + CSS + MySQL + PHP ] ทุกๆ ท่าน แบบฝึกหัดเขียนเว็บไซต์ด้วย HTML และ CSS ข้อที่ 3 นี้ หลังจากที่เราเริ่มใช้งาน Tag พื้นฐานต่างๆ และ การวาง Layout เริ่มคล่องแล้ว
ต่อไปเราก็จะนำพื้นฐานทั้งหมด มาใช้สร้างสรรค์งาน ตามโจทย์เพื่อฝึก การวิเคราะห์และสร้างสรรค์งาน ด้วยตัวเองกันครับ เพราะเวลารับงานจากลูกค้า หรือ เวลาสร้างโปรเจคของตัวเอง ต้องสามารถสร้างเว็บไซต์ จากข้อมูลที่ลูกค้าให้มา หรือ ข้อมูลที่เราต้องการได้ นั่นเอง
ในแบบฝึกหัดนี้ ก็จะมาลองทำเว็บไซต์ สำหรับ ติวเตอร์สอนเขียนโปรแกรม แห่งหนึ่งกันครับ เอาล่ะ ข้อมูลที่เค้าจะให้มา มีอะไรบ้างนะ มาดูกันดีกว่าครับ
โจทย์ออกแบบเว็บไซต์ด้วย HTML & CSS
จงออกแบบเว็บไซต์ด้วย HTML & CSS ให้กับ ติวเตอร์สอนเขียนโปรแกรม แห่งหนึ่ง โดยติวเตอร์แห่งนี้ มีข้อมูลต่างๆ ดังต่อไปนี้
หน้าแรก
ส่วนหัวเว็บเพจ
1) ชื่อเว็บไซต์
2) เบอร์โทรศัพท์
3) เมนูหลัก ประกอบด้วย หน้าแรก / คอร์สของเรา / ติดต่อเรา
ส่วนภาพ Cover เว็บไซต์
1) รูป Cover การเรียนการสอน (อนาคตปรับเป็น Slide)
ส่วนเนื้อหา
1) คอร์สที่กำลังเปิดรับสมัคร
2) คอร์สยอดนิยม
ส่วนท้าย
1) ที่อยู่
2) ติดต่อ
หน้าคอร์สของเรา
ส่วนหัวเว็บเพจ
1) ชื่อเว็บไซต์
2) เบอร์โทรศัพท์
3) เมนูหลัก ประกอบด้วย หน้าแรก / คอร์สของเรา / ติดต่อเรา
4) Breadcrumb
ส่วนเนื้อหา
1) คอร์สทั้งหมด ประกอบด้วย ชื่อคอร์ส / รูปตัวอย่าง / รายละเอียดย่อ / ราคา / จำนวนคนเข้าชม / จำนวนคนที่เคยเรียน / ระดับคอร์ส เริ่มต้น,ปานกลาง,สูง
ส่วนท้าย
1) ที่อยู่
2) ติดต่อ
หน้ารายละเอียดคอร์ส
ส่วนหัวเว็บเพจ
1) ชื่อเว็บไซต์
2) เบอร์โทรศัพท์
3) เมนูหลัก ประกอบด้วย หน้าแรก / คอร์สของเรา / ติดต่อเรา
4) Breadcrumb
ส่วนเนื้อหา
1) รายละเอียดคอร์ส ประกอบด้วย ชื่อคอร์ส / รูปตัวอย่าง / รายละเอียด / ราคา / จำนวนคนเข้าชม / จำนวนคนที่เคยเรียน / ระดับคอร์ส เริ่มต้น,ปานกลาง,สูง
2) ถ้าเปิดลงทะเบียน ระบุวันลงทะเบียน วิธีสมัครเรียน วันที่เรียน
ส่วนท้าย
1) ที่อยู่
2) ติดต่อ
หน้าติดต่อเรา
ส่วนหัวเว็บเพจ
1) ชื่อเว็บไซต์
2) เบอร์โทรศัพท์
3) เมนูหลัก ประกอบด้วย หน้าแรก / คอร์สของเรา / ติดต่อเรา
4) Breadcrumb
ส่วนเนื้อหา
1) ข้อมูลการติดต่อ
2) แผนที่
ส่วนท้าย
1) ที่อยู่
2) ติดต่อ
เรียบร้อยครับ เป็นยังไงกันบ้าง โจทย์ข้อนี้จะเป็นตัวอย่าง Requirement ปลายเปิด ที่เค้าจะให้มาแค่ว่าอยากได้อะไรหลักๆ บ้าง เราต้องมองภาพ ตีความ และก็สร้างสรรค์ออกมาเป็นเว็บไซต์ด้วยตัวเอง เหมือนได้ฝึกทำงานจริงกันเลยทีเดียว
เอาล่ะ ลุยกันเลยดีกว่า ! ใครติดปัญหาอะไร สามารถเข้ามาสอบถามได้ที่ Fanpage TUTORTONG สอนเขียนโปรแกรม ได้เลยนะครับ
