หลักในการออกแบบเบื้องต้น
1.ศึกษาข้อมูลเกี่ยวกับเว็บไวต์ของเราให้เข้าใจว่าต้องการนำเสนออะไร และเข้าใจระบบว่า
ส่วนใดเป็น static page และส่วนใดเป็นไดนามิก
2.ออกแบบLayout และcomponentต่างๆเช่น
โดยส่วนที่เป็นHeader ,logo ,nav-bar ,footer,site-map มักจะเหมือนกันทุกหน้าให้ทำแยกส่วนกับส่วนที่เป็น content ที่เปลี่ยนแปลงในทุกหน้า
หลักในการใช้สี
1.สีคู่ตรงข้าม(เพิ่มจุดเด่น)
2.การใช้กฏการเลือกสีให้อ่านและหาข้อมูลง่ายและใช้งานง่ายด้วย การวางองค์ประกอบให้สะดุดสายตา
3.การคุมโทนสีให้อยู่ในโทนเดียวกัน
4.เข้าใจเรื่องความสว่าง และความอิ่มตัวของสี และเลือกสีไม่ให้จมกับพื้นหลัง
5.การใช้สีนำสายตา
6.รู้จักการใช้สีให้สอดคล้องกับเนื้อหาว่า สีใดเหมาะกับเนื้อหาแบบใดเช่นสีใดเหมาะกับเว็บที่หรูหรา ,สีใดเหมาะกับเว็บผู้หญิง , สีที่เหมาะกับอาหาร
7.การใช้ภาพหลักภาพรอง
การใช้query media
@media (max-width:1199px) //เมื่อหน้าต่างของเรามีขนาดน้อยกว่าหรือเท่ากับ1199px
{
}
@media (min-width:768px) //เมื่อหน้าต่างของเรามีขนาดมากกว่าหรือเท่ากับ 768px
{
}
ข้อแตกต่างระหว่างการใช้ margin กับ paddingของตัวอักษร
margin คือระยะห่างระหว่าง border ของ text กับ ขอบภายนอก
padding คือระยะห่างระหว่าง border ของ text กับตัว text
สำหรับการเขียน CSS จุดประสงค์หลักของการสร้าง ID หรือ Class ก็คือเพื่อช่วยให้เราสามารถเขียนคำสั่งพิเศษให้สำหรับบางแท็กที่เราต้องการได้ เพื่อให้การแสดงผลมีความแตกต่างจากแท็กเดียวกันที่ไม่มี ID หรือ Class ได้ในกรณีนี้มีปัญหาคำสั่งซ้ำซ้อนกันในแท็ก <li> แต่เนื่องจาก ID มีระดับ Specificity ที่สูงกว่า Class จึงทำให้เว็บบราวเซอร์เลือกที่จะแสดงสีพื้นหลังของแท็ก <li>
เราควรเลือกใช้ ID หรือ Class ในกรณีใดบ้างเราควรเลือกใช้ ID เมื่อเราต้องการระบุถึงส่วนสำคัญของหน้าที่ในหน้าหนึ่งๆจะมีแค่หนึ่งเดียวเท่านั้น เช่น ส่วนหัวด้านบนของหน้า, ส่วนเมนูหลักของหน้า, ส่วนเนื้อหาของหน้า หรือส่วนท้ายสุดที่ประกอบในหน้า หรือเลือกใช้ ID ในส่วนที่เราต้องการใส่ JavaScript หรือ jQuery เพื่อเพิ่มลูกเล่นและความสวยงามให้กับหน้า
เราควรเลือกใช้ Class เมื่อเราต้องการใส่สไตล์การแสดงผลที่เป็นรายละเอียดปลีกย่อยที่เราอยากใช้ร่วมกันได้กับหลายๆแท็กในหน้าเดียวกัน เช่น สีตัวอักษรของพาดหัวหลักพาดหัวรอง, ลักษณะของลิ้งก์เพื่อไปอ่านต่อหน้าใน
Bootstrap มันก็คือ Front-end Framework ตัวหนึ่ง ที่จะช่วยให้การพัฒนาเว็บไซต์ของเราเร็วขึ้น ง่ายขึ้น และเป็นระบบมากขึ้น ซึ่งคำว่า Bootstrap นี้ในภาษาอังกฤษมันมักจะหมายถึง “สิ่งที่ช่วยทำให้ง่ายขึ้น” หรือ “สิ่งที่ทำได้ด้วยตัวของมันเอง” ซึ่งในที่นี้น่าจะหมายความว่า ถ้าเราใช้ Bootstrap แล้ว เราก็ไม่จำเป็นต้องไปหาอะไรมาเพิ่มอีก
ศึกษาได้จาก http://www.siamhtml.com/bootstrap-คืออะไร-สอนวิธีใช้/
ไม่มีความคิดเห็น:
แสดงความคิดเห็น