ใช้แบบอักษรเส้นขอบและรูปภาพเพื่อตกแต่งบรรทัดแรก
พาดหัวมีอยู่ทั่วไปในหน้าเว็บส่วนใหญ่ ในความเป็นจริงเอกสารข้อความใด ๆ ที่มีแนวโน้มว่าจะมีบรรทัดแรกอย่างน้อยหนึ่งหัวข้อเพื่อให้คุณทราบชื่อของสิ่งที่คุณกำลังอ่านอยู่ หัวเรื่องเหล่านี้จะถูกเข้ารหัสโดยใช้องค์ประกอบหัวเรื่อง HTML - h1, h2, h3, h4, h5 และ h6
ในบางไซต์คุณอาจพบว่าพาดหัวข่าวได้รับการเข้ารหัสโดยไม่ใช้องค์ประกอบเหล่านี้ แทนพาดหัวข่าวอาจใช้ย่อหน้าที่มีแอตทริบิวต์คลาสที่เฉพาะเจาะจงที่เพิ่มเข้าไปหรือแบ่งเป็นองค์ประกอบคลาส เหตุผลที่ฉันมักจะได้ยินเกี่ยวกับการปฏิบัติที่ไม่ถูกต้องนี้คือผู้ออกแบบ "ไม่ชอบส่วนหัวของหัวเรื่อง" ส่วนหัวจะแสดงเป็นตัวหนาและมีขนาดใหญ่โดยเฉพาะองค์ประกอบ h1 และ h2 ที่มีขนาดตัวอักษรใหญ่กว่าส่วนที่เหลือของข้อความของหน้า โปรดจำไว้ว่านี่เป็นลักษณะเฉพาะขององค์ประกอบเหล่านี้เท่านั้น! ด้วย CSS คุณสามารถดูหัวเรื่องตามที่คุณต้องการได้! คุณสามารถเปลี่ยนขนาดตัวอักษรลบตัวหนาและอื่น ๆ อีกมากมาย หัวเรื่องเป็นวิธีที่เหมาะสมในการกำหนดหัวเรื่องของหน้าเว็บ นี่คือเหตุผลบางประการ
ทำไมต้องใช้หัวเรื่องมากกว่า DIV และ Styling
เครื่องมือค้นหาเช่นหัวเรื่อง Tags
นี่คือเหตุผลที่ดีที่สุดในการใช้หัวเรื่องและใช้ตามลำดับที่ถูกต้อง (เช่น h1 แล้ว h2 แล้ว h3 เป็นต้น) เครื่องมือค้นหาให้น้ำหนักถ่วงน้ำหนักสูงสุดสำหรับข้อความที่รวมอยู่ในแท็กหัวเรื่องเนื่องจากมีค่าความหมายสำหรับข้อความนั้น กล่าวอีกนัยหนึ่งโดยการติดป้ายชื่อหัวเรื่องของหน้า H1 คุณจะบอกแมงมุมเครื่องมือค้นหาว่านั่นคือจุดโฟกัสที่ 1 ของหน้า หัวข้อ H2 มีการเน้นอันดับ 2 และอื่น ๆ
คุณไม่ต้องจำสิ่งที่เรียนที่คุณใช้เพื่อกำหนดหัวข้อข่าวของคุณ
เมื่อคุณรู้ว่าเว็บเพจทั้งหมดของคุณจะมี H1 ที่เป็นตัวหนา 2EM และสีเหลืองคุณสามารถกำหนดได้ว่าครั้งหนึ่งในสไตล์ชีตของคุณและทำเสร็จแล้ว 6 เดือนต่อมาเมื่อคุณเพิ่มหน้าอื่นคุณเพียงแค่เพิ่มแท็ก H1 ลงไปที่ด้านบนสุดของหน้าเว็บคุณไม่ต้องย้อนกลับไปยังหน้าอื่น ๆ เพื่อดูว่า ID รูปแบบหรือระดับใดที่คุณใช้เพื่อกำหนดหลัก พาดหัวและหัวย่อย
มีเค้าโครงหน้าเว็บที่แข็งแกร่ง
เค้าร่างทำให้ข้อความอ่านง่ายขึ้น นั่นเป็นเหตุผลที่โรงเรียนของสหรัฐฯส่วนใหญ่สอนให้นักเรียนเขียนโครงร่างก่อนที่จะเขียนบทความ เมื่อคุณใช้แท็กหัวเรื่องในรูปแบบเค้าร่างข้อความของคุณมีโครงสร้างชัดเจนชัดเจนมาก นอกจากนี้ยังมีเครื่องมือที่สามารถตรวจสอบเค้าร่างหน้าเพื่อให้บทสรุปและสิ่งเหล่านี้พึ่งพาแท็กหัวเรื่องสำหรับโครงสร้างเค้าร่าง
หน้าของคุณจะทำให้รู้สึกถึงแม้จะมีสไตล์ปิดอยู่
ไม่ใช่ทุกคนที่สามารถดูหรือใช้สไตล์ชีตได้ (และนี่กลับมาที่ # 1 - เครื่องมือค้นหาจะดูเนื้อหา (ข้อความ) ของหน้าไม่ใช่สไตล์ชีต) หากคุณใช้แท็กหัวเรื่องคุณจะสามารถเข้าถึงหน้าเว็บได้เนื่องจากพาดหัวข่าวให้ข้อมูลที่แท็ก DIV ไม่ได้
เป็นประโยชน์สำหรับผู้อ่านหน้าจอและการเข้าถึงเว็บไซต์
การใช้หัวเรื่องที่เหมาะสมจะสร้างโครงสร้างลอจิคัลกับเอกสาร นี่คือสิ่งที่ผู้อ่านหน้าจอจะใช้ในการ "อ่าน" ไซต์ให้กับผู้ใช้ที่มีปัญหาด้านวิสัยทัศน์ทำให้ไซต์ของคุณสามารถเข้าถึงคนพิการได้
จัดรูปแบบข้อความและแบบอักษรของหัวข้อข่าวของคุณ
วิธีที่ง่ายที่สุดในการย้ายจากปัญหา "ใหญ่, หนาและน่าเกลียด" ของแท็กหัวเรื่องคือการจัดรูปแบบข้อความตามที่คุณต้องการให้ดู ในความเป็นจริงเมื่อฉันทำงานในเว็บไซต์ใหม่ฉันมักเขียนวรรค h1, h2 และ h3 สิ่งแรก ฉันมักจะติดกับครอบครัวตัวอักษรเพียงและขนาด / น้ำหนัก ตัวอย่างเช่นนี่อาจเป็นสไตล์ชีตเบื้องต้นสำหรับไซต์ใหม่ (นี่เป็นเพียงตัวอย่างบางรูปแบบที่สามารถใช้งานได้):
body, html {margin: 0; padding: 0; } p (แบบอักษร: Arem 1em, เจนีวา, Helvetica, sans-serif; } h1 {แบบอักษร: ตัวหนา 2 "Times New Roman", Times, serif; } h2 {font: หนา 1.5em "Times New Roman", Times, serif; } h3 {แบบอักษร: ตัวหนา 1.2em Arial, Geneva, Helvetica, sans-serif; }คุณสามารถแก้ไขแบบอักษรของบรรทัดแรกหรือเปลี่ยนรูปแบบข้อความหรือแม้แต่ สีข้อความ ได้ สิ่งเหล่านี้จะทำให้หัวข้อ "น่าเกลียด" ของคุณกลายเป็นหัวข้อที่สดใสและสอดคล้องกับการออกแบบของคุณมากขึ้น
h1 {font: ตัวหนาตัวเอียง 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; สี: # e7ce00; }เส้นขอบสามารถแต่งตัวพาดหัว
เส้นขอบเป็นวิธีที่ดีในการปรับปรุงพาดหัวข่าวของคุณ และสามารถเพิ่มเส้นขอบได้ง่าย แต่อย่าลืมทดลองใช้เส้นขอบด้วยซึ่งคุณไม่จำเป็นต้องมีเส้นขอบด้านข้างของบรรทัดแรก และคุณสามารถใช้มากกว่าเส้นขอบที่น่าเบื่อธรรมดา
h1 {font: ตัวหนาตัวเอียง 2em / 1em "Times New Roman", "MS Serif", "New York", serif; margin: 0; padding: 0; สี: # e7ce00; border-top: solid # e7ce00 medium; ด้านล่าง: ด่างดวง # e7ce00 บาง; ความกว้าง: 600px; }ฉันเพิ่มเส้นขอบด้านบนและด้านล่างลงในบรรทัดแรกของตัวอย่างเพื่อแนะนำรูปแบบภาพที่น่าสนใจบางอย่าง คุณสามารถเพิ่มเส้นขอบในแบบที่คุณต้องการเพื่อให้ได้รูปแบบการออกแบบที่คุณต้องการ
เพิ่มรูปภาพพื้นหลังให้กับหัวข้อของคุณสำหรับ Pizazz มากยิ่งขึ้น
เว็บไซต์จำนวนมากมีส่วนหัวที่ด้านบนของหน้าซึ่งมีหัวเรื่อง - โดยปกติจะเป็นชื่อไซต์และกราฟิก นักออกแบบส่วนใหญ่คิดว่านี่เป็นองค์ประกอบสองส่วน แต่คุณไม่จำเป็นต้องทำ หากกราฟิกมีเพียงเพื่อตกแต่งหัวเรื่องแล้วทำไมไม่เพิ่มรูปแบบหัวเรื่อง?
h1 {font: ตัวหนาตัวเอียง 3em / 1em "Times New Roman", "MS Serif", "New York", serif; พื้นหลัง: #fff url ("fancyheadline.jpg") ซ้ำด้านล่าง x; padding: 0.5em 0 90px 0; text-align: center; margin: 0; border-bottom: ของแข็ง # e7ce00 0.25em; สี: # e7ce00; }เคล็ดลับในหัวข้อนี้คือฉันรู้ว่าภาพของฉันสูง 90 พิกเซล ดังนั้นฉันจึงเพิ่มช่องว่างลงไปที่ด้านล่างของบรรทัดแรก 90px (padding: 0.5 0 90px 0p;) คุณสามารถเล่นได้โดยใช้ระยะขอบความสูงเส้นและการขยายเพื่อให้ข้อความของบรรทัดหัวเรื่องแสดงตรงตำแหน่งที่คุณต้องการ
สิ่งหนึ่งที่ควรจดจำเมื่อใช้ภาพก็คือถ้าคุณมี เว็บไซต์ที่ตอบสนอง (ซึ่งคุณควร) ด้วยโครงร่างที่มีการเปลี่ยนแปลงตามขนาดและอุปกรณ์ของหน้าจอพาดหัวของคุณจะไม่ได้ขนาดเท่ากัน หากคุณต้องการให้พาดหัวมีขนาดที่แน่นอนซึ่งอาจทำให้เกิดปัญหาได้ นี่เป็นเหตุผลหนึ่งที่ฉันมักหลีกเลี่ยงภาพพื้นหลังในบรรทัดแรกซึ่งดูน่าสนใจเนื่องจากบางครั้งก็ดู
การแทนที่ภาพในบรรทัดแรก
นี่เป็นอีกหนึ่งเทคนิคยอดนิยมสำหรับนักออกแบบเว็บไซต์เพราะช่วยให้คุณสามารถสร้างบรรทัดแรกแบบกราฟิกและแทนที่ข้อความของแท็กหัวเรื่องกับภาพนั้น นี่เป็นความจริงในการปฏิบัติงานแบบโบราณจากนักออกแบบเว็บมีการเข้าถึงแบบอักษรน้อยมากและต้องการใช้แบบอักษรที่แปลกใหม่กว่าในงานของพวกเขา การเพิ่มขึ้นของ แบบอักษรบนเว็บ มีการเปลี่ยนแปลงวิธีการออกแบบไซต์อย่างแท้จริง ขณะนี้คุณสามารถตั้งค่าพาดหัวในแบบอักษรและภาพที่หลากหลายพร้อมกับแบบอักษรที่ฝังอยู่ไม่จำเป็นต้องใช้อีกต่อไป ดังนั้นคุณจะพบการแทนที่รูปภาพ CSS ในหัวข้อเก่า ๆ ที่ยังไม่ได้รับการอัปเดตเป็นแนวทางที่ทันสมัยมากขึ้น
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 9/6/17