ไซต์ของคุณจะดูดีขึ้นหรือไม่หากโลโก้ถูกย้ายไปทางขวา 5 พิกเซลหรือมีพื้นหลังสีน้ำเงิน การเพิ่มเส้นขอบหรือเงาให้กับรูปภาพในโพสต์เด่นของคุณจะทำให้รูปภาพดูโดดเด่นขึ้นไหม เบราว์เซอร์สมัยใหม่ เช่น Firefox มาพร้อมกับเครื่องมือสำหรับนักพัฒนาเว็บที่ให้คุณตรวจสอบการทำงานภายในของเว็บไซต์และทำการแก้ไขแบบสด ดูผลลัพธ์แบบเรียลไทม์
ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Firefox เพื่อแก้ไขเว็บไซต์แบบสด
หมายเหตุ :บทช่วยสอนนี้ใช้ได้กับเบราว์เซอร์ส่วนใหญ่ รวมถึง Chrome, Opera และ Safari
พบกับเครื่องมือสำหรับนักพัฒนาเว็บ
เครื่องมือสำหรับนักพัฒนาเว็บของ Firefox เป็นชุดเครื่องมือที่ครอบคลุม ตั้งแต่การแสดงองค์ประกอบ DOM ทั้งหมด ไปจนถึงความสามารถในการวัดความเร็ว สำหรับบทแนะนำนี้ คุณจะต้องใช้เครื่องมือ “Inspector” และ “Style Editor” เท่านั้น
เปิดไฟ Firefox และเยี่ยมชมไซต์ใด ๆ ของคุณ จากเมนูแฮมเบอร์เกอร์ของ Firefox (ที่มุมขวาบนโดยค่าเริ่มต้น) ให้เลือก “นักพัฒนาเว็บ -> ตัวแก้ไขสไตล์” หรือกด Shift + F7 รวมกันบนแป้นพิมพ์ของคุณ
แผง Web Developer ของ Firefox จะปรากฏที่ด้านใดด้านหนึ่งของหน้าต่าง โดยปกติอยู่ที่ส่วนล่าง คุณสามารถเปลี่ยนตำแหน่งได้โดยคลิกที่ปุ่มสามจุดที่ด้านบนขวาของแผงและเลือก "Dock to Right/Left" หรือ "Separate Window"
หมายเหตุ :บทช่วยสอนนี้ไม่ได้แสดงวิธีเขียนโค้ด HTML และ CSS คุณสามารถเรียนรู้พื้นฐานได้ที่นี่
การตรวจสอบองค์ประกอบ
เพื่อให้สามารถส่งผลต่อรูปลักษณ์ขององค์ประกอบได้ คุณต้องสามารถระบุได้ คลิกที่ปุ่มแรกบนแถบเครื่องมือหรือกด Ctrl + กะ + C บนแป้นพิมพ์ของคุณเพื่อเปิดใช้งานโหมดตัวเลือกองค์ประกอบ
เลื่อนเมาส์ไปรอบๆ ไซต์เพื่อดูองค์ประกอบต่างๆ ของหน้าเว็บที่ไฮไลต์ ถัดจากพวกเขา คุณจะเห็นตัวระบุหลักของพวกเขาลอยอยู่ในป๊อปอัป
เมื่อคุณคลิกที่องค์ประกอบ องค์ประกอบนั้นจะถูกเลือกในแท็บตัวตรวจสอบของเครื่องมือสำหรับนักพัฒนา
เมื่อคุณพบองค์ประกอบที่คุณต้องการปรับแต่ง ให้คลิกขวาที่รายการใน Developer Tools Inspector และเลือกจากหน้าต่างป๊อปอัปที่ปรากฏขึ้น – “Copy -> CSS Selector”
เริ่มแก้ไขสดของคุณ
เมื่อคัดลอก CSS Selector ขององค์ประกอบไปยังคลิปบอร์ดแล้ว ให้ย้ายกลับไปที่แท็บ Style Editor ในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ คลิกที่ปุ่ม "+" ที่ด้านบนซ้ายเพื่อ "สร้างและผนวกสไตล์ชีตใหม่ลงในเอกสาร"
วางตัวเลือก CSS ของคุณลงในสไตล์ชีตใหม่ที่ว่างเปล่า เว้นวรรค ตามด้วยชุดวงเล็บปีกกาเปิดและปิด
ใน CSS รูปลักษณ์ขององค์ประกอบถูกกำหนดโดย "กำหนดเป้าหมาย" ก่อนโดยใช้ตัวระบุเช่นตัวเลือก CSS จากนั้นเพิ่มกฎบางอย่างที่ส่งผลต่อลักษณะที่ปรากฏ โดยจัดกลุ่มไว้ในวงเล็บปีกกา ทุกอย่างที่วางอยู่ระหว่างวงเล็บปีกกาเปิดและปิดมีผลกับ “องค์ประกอบเป้าหมาย”
ตัวอย่างเช่น หากคุณเพิ่มกฎด้านล่าง:
display: none;
การดำเนินการนี้จะซ่อนไม่ให้มองเห็นองค์ประกอบที่ใช้ อาจเป็นวิธีที่ง่ายที่สุดที่จะทราบว่าคุณกำลังกำหนดเป้าหมายองค์ประกอบที่ถูกต้องบนหน้าเว็บของคุณ ถ้ามันหายไป มันเป็นสิ่งที่คุณต้องการจริงๆ และคุณสามารถลบกฎนี้เพื่อลองใช้กฎอื่น ถ้ามันไม่หายไป ก็ถึงเวลากลับไปหาสารวัตรและเลือกอย่างอื่น
เราจะไม่แสดงวิธีเขียนโค้ด CSS ที่นี่ แต่คุณสามารถลองใช้กฎยอดนิยมบางอย่างได้ เช่น:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
คุณจะสังเกตเห็นว่าองค์ประกอบของเว็บไซต์เปลี่ยนไปเมื่อคุณเพิ่มกฎในสไตล์ชีต CSS
เป็นบันทึกปิดท้าย จำไว้ว่าไม่มีอะไรถูกบันทึกไว้ ถ้าคุณชอบรูปลักษณ์ที่ปรับแต่งของคุณ ให้คัดลอกโค้ดของคุณไปที่ใดที่หนึ่ง ในไฟล์ TXT หรือแอปพลิเคชั่นจดบันทึกที่คุณโปรดปราน เพื่อให้คุณหรือนักออกแบบ/นักพัฒนาสามารถเพิ่มโค้ดนั้นลงในสไตล์ชีตของเว็บไซต์ของคุณเพื่อทำการเปลี่ยนแปลงอย่างถาวร หากคุณต้องการเรียนรู้เกี่ยวกับ CSS ให้ลองดูเกมออนไลน์บางเกมที่จะช่วยให้คุณเชี่ยวชาญทักษะนี้
