รายชื่อในส่วนบนของหน้า HTML ตั้งใจจะใช้เป็นเมนู navigation เวบไซด์หลายเวบมีการใช้เมนูวางเรียงไว้ด้านบนหรือไว้ด้านข้างของ หน้าและหน้านี้ก็ควรมีเช่นกันซึ่งเราจะวางไว้ด้านซ้ายเนื่องจากดูแล้วน่าแล้วน่าสนใจกว่าวางไว้ด้านบน
เมนูดังกล่าวนี้มีอยู่ในหน้า HTML แล้วโดยใช้
- แสดงรายการไว้ด้านบนลิงค์ยังไม่สามารถใช้ได้เนื่องเวบไซด์ของเราในขณะนี้มี เพียงหน้าเดียวแต่ในขณะนี้เรื่องนั้นไม่สำคัญ แต่แน่นอนว่าสำหรับเวบไซด์จริงๆแล้วไม่ควรจะมีลิงค์ที่ใช้งานไม่ได้
ดังนั้นเราจะต้องย้ายรายชื่อลงมาอยู่ด้านซ้ายและย้ายข้อความที่เหลือทั้งหมดมาทางด้านขวาเล็กน้อยเพื่อให้มีพื้นที่ CSS property ที่เราใช้คือ 'padding-left' (สำหรับย้ายข้อความในส่วน body) และ 'position' 'left' และ 'top' (เพื่อย้ายเมนู)
ยังมีวิธีอื่นๆที่สามารถทำได้หากคุณดูในส่วน “column” หรือ “layout” ในหน้า Learning CSS (เรียนรู้ CSS)คุณจะเจอเทมเพลตที่ใช้ได้เลยหลายอันแต่ อันนี้ก็ใช้ได้เหมาะสมกับจุดประสงค์ของเรา
ในหน้าโปรแกรมแก้ไข ให้เพิ่มบรรทัดต่อไปนี้เขาไปในไฟล์ HTML (lines 7 and 12-16)
[etc.]
หากคุณเซฟไฟล์อีกครั้งและ reload ในบราวเซอร์ทีนี้คุณก็จะได้รายชื่อลิงค์ที่อยู่ทางด้านซ้ายของข้อความหลัก ซึ่งตอนนี้หน้าเวบนี้ก็ ดูน่าสนใจขึ้น
ข้อความหลักย้ายไปอยู่ที่ด้านขวาและตอนนี้รายชื่อลิงค์ย้ายไปอยู่ที่ด้านซ้ายแล้วแทนที่จะอยู่ด้านบน
การใส่ 'position: absolute' เป็นการบอกว่า element ul ถูกวางไว้แยกออกจากข้อความที่มาก่อนหรือหลังภายในเอกสารและการใช้ 'left' และ 'top' ก็เพื่อแสดงให้รู้ว่าอยู่ในตำแหน่งใด ในกรณีนี้ คือ 2em จากด้านบนและ 1em จากด้านซ้ายของหน้าต่าง
'2em' หมายถึง 2 เท่าของขนาดฟอนท์ปัจจุบันเช่น ถ้าเมนูใช้ฟอนท์ขนาด 12 point ดังนั้น '2em' จะเท่ากับ 24 point 'em' เป็นหน่วย การวัดประเภทหนึ่งที่มีประโยชน์ในการใช้ CSS เนื่องจากสามารถนำมาใช้กับฟอนท์ที่ผู่อ่านมักจะใช้ได้โดยอัตโนมัติ บราวเซอร์ส่วนใหญ่ มีเมนูที่ไว้เพิ่มหรือลดขนาดของฟอนท์คุณจะเห็นได้ว่าขนาดของเมนูจะเพิ่มเมื่อขนาดของฟอนท์เพิ่มซึ่งจะไม่เป็นไปตามนั้นหากในกรณี ที่เราใช้หน่วยเป็นพิกเซลแทน
ขั้นที่ 5: การใส่สไตล์ให้กับลิงค์
navigation เมนูนั้นยังดูหน้าตาเหมือนรายการมากกว่าเมนู ดังนั้นเราจะใส่สไตล์เพิ่มเข้าไป เราจะเอาจุด(bullet)ที่ใช้แสดงรายการออกไปก่อน และย้ายรายการแต่ละรายการออกไปทางด้านซ้ายในตำแหน่งเดิมที่ใช้แสดงจุดในแต่ละรายการ นอกจากนั้นเราก็จะใส่พื้นหลังสีขาวและสี่เหลี่ยมสีดำ ให้แต่ละรายการ (ทำไมน่ะหรือ ไม่มีเหตุผลเฉพาะหรอกเพียงแต่ว่าเราสามารถทำได้)
นอกจากนี้เรายังไม่ได้ระบุวว่าสีที่ใช้ลิงค์เป็นสีอะไร ดังนั้นให้เพิ่มลงไปด้วยสีฟ้าใช้สำหรับลิงค์ที่ผู้อ่านยังมองไม่เห็นส่วนสีม่วงใช้สำหรับลิงค์ ที่ผู้อ่านคลิกเข้าไปดูแล้ว (lines 13-15 and 23-33)
[etc.]
โดยทั่วไปแล้ว บราวเซอร์จะแสดงลิงค์ด้วยการขีดเส้นใต้และใส่สี โดยปกติสีที่ใช้จะเหมือนกับสีที่ระบุไว้ในที่นี้ คือ สีฟ้าไว้สำหรับลิงค์ไปยังหน้า ที่คุณยังไม่ได้เข้าไปดู (หรือที่เคยเข้าไปดูเมื่อนานมาแล้ว) สีม่วงไว้ใช้สำหรับหน้าที่เข้าไปดูมาแล้ว
ใน HTML การสร้างลิงค์ทำได้โดยใช้ element ดังนั้นเวลาที่เรระบุสีเราจะต้องใส่สไตล์ให้กับ “a” เพื่อแยกความแตกต่างระหว่างลิงค์ที่เยี่ยม ชมแล้วกับลิงค์ที่ยังไม่ได้เยี่ยมชม CSS ได้กำหนดให้มี “pseudo-classes” (:link และ :visited) ที่เรียกว่า “pseudo-classes” เพื่อแยกแยะความ แตกต่างระหว่าง class attributes, ที่แสดงบน HTML โดยตรงตัวอย่างเช่น class="navbar" ที่แสดงไว้ในตัวอย่างข้างต้น
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
ดีคราบ