หลักสูตรนี้คุณจะได้เรียนเกี่ยวกับการสร้างเว็บไซต์พื้นฐานโดยใช้โปรแกรม Photoshop และโปรแกรม Text Editor (เช่น Dreamweaver, Komodo, Sublime) คุณจะสามารถแปลงดีไซน์จาก Photoshop ให้เป็นเว็บที่มีฟังก์ชันใช้งานได้ ด้วยภาษา HTML5 และ CSS3 เมื่อเรียนจบแล้ว คุณจะสามารถสร้างเว็บไซต์พื้นฐาน (Static Website) ที่ใช้งานได้จริงๆ
สำหรับบทเรียนชุดนี้ผมของ Assume ว่าคุณมีความรู้ “พื้นฐานมาบ้าง” เกี่ยวกับ HTML และ CSS นะครับ ซึ่งคุณก็ควรจะรู้ว่า Tag ในภาษา HTML มันคืออะไร ทำงานอย่างไร และรู้ถึงคุณสมบัติของ CSS ว่ามันมีไว้ทำอะไร ยกตัวอย่างเช่น ผมขอติต่างว่าผู้เรียนเข้าใจโค้ดต่อไปนี้นะครับ
HTML
CSS
#myDiv{
width:200px;
margin:auto;
background:#e3e3e3;
}
[colortext]ถ้าคุณอ่านโค้ดด้านบนแล้วไม่เข้าใจ อืม…หลักสูตรนี้อาจจะยังไม่เหมาะกับคุณ[/colortext] คุณต้องไปเรียนหลักสูตร HTML/CSS ก่อนนะครับ และประการสุดท้าย พื้นฐานที่คุณต้องมีสำหรับหลักสูตรนี้ก็คือ Photoshop ครับ
จริงๆแล้ว พื้นฐานที่ต้องการสำหรับหลักสูตรนี้หลักๆก็คือ เข้าใจในระดับพื้นฐานของ HTML/CSS ครับ ขอแค่นี้ก็สามารถเรียนหลักสูตรนี้ได้แล้วครับ
[thetext]รายละเอียด[/thetext]
- วางแผนก่อนตัด
- แบ่งสัดส่วนของดีไซน์ให้เป็นกลุ่มต่างๆ
- เริ่มต้นเขียน HTML
- สร้าง Basic Shell
- สร้าง Markup สำหรับเว็บ
- เข้าใจกระบวนการ Save for Web
- เข้าใจถึงชนิดของไฟล์ภาพแบบต่างๆว่าเหมาะกับงานประเภทไหน
- รู้จักกับ CSS Sprites
- ใช้งาน CSS Reset
- สร้าง General Style
- รู้จักวิเคราะห์ว่าในงานดีไซน์อะไรบ้างที่ควรตัดเป็นรูปภาพ และอะไรที่สามารถทำได้โดย CSS
- ตัดดีไซน์และประกอบส่วนของ Header
- ตัดดีไซน์และประกอบส่วนของ Container
- ตัดดีไซน์และประกอบส่วนของ Footer
- เรียนรู้และเข้าใจการทำเว็บแบบมีหลายคอลัมน์
- เข้าใจความสำคัญของ float
- เข้าใจความสำคัญและข้อแตกต่างของ ID กับ CLASS
- ปรับแต่ง Form ให้สวยงามด้วย CSS
- สร้าง Sticky footer
- เข้าใจความแตกต่างระหว่าง Absolute Position กับ Relative Position
- วิธีการสร้างเมนูในแถวเดียวกัน
- เทคนิคการใช้ Font จาก Google Font API
โดยบทเรียนนี้ผมจะมีไฟล์ PSD มาให้ แล้วจะสอนตัดเป็น Step By Step นะครับ
