วิธีตั้งค่าพื้นหลังบนเว็บไซต์

สารบัญ:

วิธีตั้งค่าพื้นหลังบนเว็บไซต์
วิธีตั้งค่าพื้นหลังบนเว็บไซต์

วีดีโอ: วิธีตั้งค่าพื้นหลังบนเว็บไซต์

วีดีโอ: วิธีตั้งค่าพื้นหลังบนเว็บไซต์
วีดีโอ: ภาษา HTML คำสั่งใส่สีพื้นหลัง,ใส่ภาพพื้นหลังเว็บไซต์ 2024, อาจ
Anonim

การออกแบบของไซต์ใดๆ ขึ้นอยู่กับภาพพื้นหลังและสี เช่น บ้านบนฐานราก หากคุณมีความปรารถนาที่จะแทนที่พื้นฐานทั่วไปของทรัพยากรอินเทอร์เน็ตของคุณด้วยสิ่งที่เป็นส่วนตัวมากขึ้น คุณควรเริ่มด้วยการพัฒนาการออกแบบ และเมื่อพร้อม ส่วนทางเทคนิคทั้งหมดจะยังคงอยู่ กล่าวคือ แทนที่การออกแบบเก่าของพื้นหลังไซต์ที่ระบุในซอร์สโค้ดของหน้าด้วยอันใหม่ มีหลายวิธีในการดำเนินการนี้ในทางปฏิบัติ

วิธีตั้งค่าพื้นหลังบนเว็บไซต์
วิธีตั้งค่าพื้นหลังบนเว็บไซต์

คำแนะนำ

ขั้นตอนที่ 1

ก่อนอื่นคุณต้องค้นหาวิธีตั้งค่าพื้นหลังในเวอร์ชันปัจจุบันของเว็บไซต์ ในการดำเนินการนี้ ให้เปิดโค้ด HTML ของหน้า คุณสามารถทำได้ด้วยโปรแกรมแก้ไขข้อความอย่างง่ายโดยดาวน์โหลดไฟล์จากเซิร์ฟเวอร์ล่วงหน้า หรือคุณสามารถใช้ตัวแก้ไขหน้าของระบบจัดการเนื้อหาได้ หากคุณใช้ ตัวแก้ไขเพจไม่จำเป็นต้องดาวน์โหลดไฟล์แต่แก้ไขโดยตรงบนเซิร์ฟเวอร์โดยใช้เบราว์เซอร์เป็นอินเทอร์เฟซ รหัส HTML (HyperText Markup Language) ของหน้าที่คุณเปิดประกอบด้วยบรรทัดคำสั่งสำหรับเบราว์เซอร์ อธิบายประเภท ลักษณะที่ปรากฏ และตำแหน่งของแต่ละองค์ประกอบของหน้าเว็บ คำแนะนำเหล่านี้มักเรียกว่า "แท็ก" ลำดับของแท็กในโค้ดของหน้าก็เป็นไปตามกฎของภาษา HTML เช่นกัน โดยจะแบ่งออกเป็นบล็อก โดยส่วนแรกจะต้องเป็นบล็อกส่วนหัวที่ขึ้นต้นด้วยแท็กและสิ้นสุด ควรตามด้วยบล็อกที่คุณสนใจมากขึ้นในตอนนี้ - เนื้อหาของเอกสาร จำกัดเฉพาะแท็กและ. ในแท็กเปิดของบล็อกนี้ () คุณสามารถใส่ข้อมูลเกี่ยวกับพื้นหลังของหน้าได้ ข้อมูลดังกล่าวภายในแท็กเรียกว่า "แอตทริบิวต์" แอตทริบิวต์ของแท็ก body ที่กำหนดสีพื้นหลังจะแสดงเป็น bgcolor และในโค้ดอาจมีลักษณะดังนี้: ในที่นี้เราตั้งค่าสีพื้นหลังสำหรับหน้าเว็บเป็นสีเงิน เบราว์เซอร์สามารถจดจำสีบางสีตามชื่อได้ แต่เพื่อไม่ให้เข้าใจผิด จะเป็นการดีกว่าหากระบุรหัสเลขฐานสิบหก เวอร์ชันนี้ที่มีสีเงินในนิพจน์ฐานสิบหกจะมีลักษณะดังนี้: ดังนั้น คุณต้องค้นหาแท็กที่ขึ้นต้นด้วย <body ในโค้ดของหน้าและตรวจสอบว่ามีสีพื้นหลังหรือไม่ หากเป็นเช่นนั้น ให้แทนที่ตัวบ่งชี้สีด้วยเวอร์ชันใหม่ของคุณและบันทึกการเปลี่ยนแปลงลงในหน้า

ขั้นตอนที่ 2

พื้นหลังในการออกแบบปัจจุบันของไซต์ของคุณสามารถตั้งค่าไม่ได้ตามสี แต่กำหนดด้วยรูปภาพ แอตทริบิวต์ที่เกี่ยวข้องของแท็ก body เรียกว่า background และสามารถมีลักษณะดังนี้ในโค้ด: ที่นี่ พื้นหลังคือรูปภาพ bg.jpg

ขั้นตอนที่ 3

เมื่ออธิบายลักษณะที่ปรากฏของหน้าเว็บที่มีการออกแบบที่ค่อนข้างซับซ้อน ให้ใช้ "สไตล์ชีตแบบเรียงซ้อน" - CSS (สไตล์ชีตแบบเรียงซ้อน) สามารถรวมบล็อคของโค้ด CSS ได้โดยตรงในโค้ดของเพจหรืออยู่ในไฟล์ภายนอกที่มีนามสกุล "css" คุณต้องมองหาแท็กคำอธิบายสไตล์ที่ขึ้นต้นด้วย <style ในส่วนส่วนหัวของโค้ดเพจ (ระหว่างแท็กและแท็ก) หากมีลิงก์ไปยังไฟล์ภายนอก จะมีลักษณะดังนี้: @import "style.css"; นี่คือลิงก์ไปยังสไตล์ชีตที่ชื่อ style.css คุณต้องเปิดไฟล์ที่ระบุเพื่อทำการแก้ไข และหากไม่มีลิงก์ และหลังจากแท็กเปิด <สไตล์ มีคำแนะนำเกี่ยวกับสไตล์ คุณจะต้องแก้ไขที่นี่ ในทั้งสองตัวเลือก ท่ามกลางคำอธิบายของสไตล์ คุณต้องค้นหาสิ่งที่เกี่ยวข้องกับเนื้อหาของเอกสาร (เนื้อหา) บล็อกคำอธิบายนี้อาจมีลักษณะดังนี้: เนื้อหา {

พื้นหลังสี: เงิน;

สีดำ;

} ที่นี่ คุณต้องแทนที่ค่าของพารามิเตอร์ background-color ด้วยค่าของสีใหม่ของคุณและดีกว่าในค่าเลขฐานสิบหกเดียวกัน ตัวเลือกภาพพื้นหลังในคำสั่ง CSS ควรมีลักษณะดังนี้: body {

พื้นหลัง: # C0C0C0 url (img / bg.jpg) ทำซ้ำ-y;

สีดำ;

} ที่นี่ลิงก์ไปยังรูปภาพคล้ายกับที่กล่าวถึงข้างต้น และ # C0C0C0 ก่อนลิงก์หมายความว่าพื้นที่หน้าที่ไม่ได้ถูกครอบครองโดยภาพพื้นหลังจะมีพื้นหลังสีเงิน "ทำซ้ำ-y" ระบุว่ารูปภาพพื้นหลังควรคูณตามแกน Y (แนวตั้ง)"Repeat-y" สามารถแทนที่ด้วย "repeat-x" (การจำลองแบบแนวนอน) หรือ "no-repeat" (ห้ามทำซ้ำ) หากคุณไม่ระบุให้ทำซ้ำเลย ภาพพื้นหลังจะถูกเรียงต่อกันที่พื้นที่พื้นหลังของหน้าในทุกทิศทาง