การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง

วิธีการตกแต่ง Background ในเว็บไซต์ สามารถปรับแต่งรูปแบบด้วยการใช้สีหรือรูปภาพเป็น Background (พื้นหลัง) ของเว็บไซต์ได้ ซึ่งเจ้าของเว็บไซต์สามารถเลือกรูปแบบพื้นหลังที่ต้องการได้ มีขั้นตอนการปรับแต่งดังนี้

บางครั้งของการออกแบบ Web Page เราต้องการใส่รูปภาพเป็น Background หรือเป็นฉากด้านหลังของ Web Page แต่บางครั้งก็อีกที่เราต้องการ Background เพียงแค่รูปเดียวโดด ๆ ในการเป็นภาพพื้นหลัง แต่ก็จะมีปัญหาตามมา คือ เมื่อเรานำรูปที่จะนำมาเป็นพื้นหลังของเพจ รูปภาพมักจะกระทำซ้ำให้อัตโนมัติ หลายรูปจนเต็มพื้นของเว็บ เราจะมีวิธีใดในการเซ็ทให้รูปภาพแสดงแค่ภาพเดียวเป็นภาพพื้นหลังได้ อยากรู้ก็เชิญอ่านกันได้เลยครับ...

แสดงเว็บเพจที่มีรูปพื้นหลังแสดงซ้ำๆ

การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง

เทคนิคการทำให้ภาพพื้นหลังไม่แสดงซ้ำ

เปิดไฟล์เว็บเพจของเราขึ้นมา จากนั้นให้ปฏิบัติตาม ดังนี้

1. ที่ Page Properties ให้เราเลือกที่ Appearence (CSS)
(Menu -> Modify -> Page Properties)
2. ในส่วนของ Option ด้านขวามือเลือกที่ Background Image: ทำการ Browse.. เลือกรูปภาพที่ต้องการนำมาใช้เป็นพื้นหลัง
3. จากนั้นให้ทำการกำหนดค่าที่ Repeat: ดังรูป

การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง
*เลือกที่ no-repeat
4. ทำการคลิกที่ปุ่ม OK ของหน้าต่าง Page Properties จะพบว่ารูปภาพ Background จะไม่แสดงซ้ำเป็นหลาย ๆ รูปแล้ว
การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง

สาเหตที่รูปภาพพื้นหลังไม่แสดงซ้ำ

จากข้างต้นเมื่อเรากำหนด Option ในส่วนของ Background Image ให้เป็น no-repeat แล้ว รูปภาพจึงไม่แสดงซ้ำ นั่นเพราะว่า CSS มีความสามารถในการกำหนดการแสดงผลของพื้นหลังได้หลากหลาย และจากตรงนี้นี่เอง เราสามารถนำไปใช้ในส่วนอื่นของเว็บเพจ เช่น ที่ตาราง หากเราต้องการใช้รูปภาพนำมาเป็นพื้นหลังแล้ว ไม่ให้มีการแสดงซ้ำ ก็สามารถกระทำได้เช่นเดียวกัน โดยให้ทำการกำหนดค่า CSS ของ Background เป็น no-repeat ดังรูป

การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง
*อ่านเรื่องการใช้งาน CSS เพิ่มเติม

สำหรับในส่วนของการกำหนดคุณสมบัติของภาพพื้นหลังโดยใช้ CSS เรายังสามารถกำหนดการแสดงผลในรูปแบบอื่น ๆ ได้อีก เช่น ต้องการให้แสดงซ้ำตามแนวนอน (แกน x) หรือตามแนวตั้ง (แกน y) หรือต้องการกำหนดที่มีระยะแน่นอนก็สามารถกระทำได้ครับ ซึ่งฝากให้ผู้อ่านได้ทำการทดลองกำหนดค่า ศึกษากันดูด้วยตนเองต่อไป...สวัสดีครับ.


บทความอื่นที่คุณอาจสนใจ

การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง
การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง
การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง
การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง

การจัดรูปแบบหรือหน้าตาของเว็บเพจเพื่อให้ดึงดูดความสนใจแก่ผู้เข้าชมนั้น เป็นเรื่องสำคัญในการทำโฮมเพจ นอกจากการตกแต่งตัวอักษร ข้อความและการใส่รูปภาพสิ่งที่จะบ่งบอกถึงหน้าตาของเว็บเพจเรา คือ การกำหนดพื้นหลัง (Background)  ให้กับเว็บเพจ ซึ่งการกำหนดพื้นหลัง สามารถกำหนดโดยใช้สี หรือรูปภาพก็ได้  

ในการกำหนดพื้นหลัง สิ่งที่ต้องคำนึงอย่างยิ่ง คือ การเลือกสีพื้นหลัง กับสีของตัวอักษรหรือข้อความ ควรเป็นคู่สีที่ตัดกัน เช่น พื้นหลังกำหนดเป็นสีเข้ม สีของข้อความควรเป็นสีอ่อน หรือสีของพื้นหลังเป็นสีอ่อน สีของข้อความควรเป็นสีเข้ม ไม่ควรกำหนดให้สีกลืนกัน เพราะจะทำให้มองข้อความไม่ชัดเจน

การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง

�������Ҿ�����ѧ���Ѻ���ྨ



 ��ù��Ҿ�ҵ������Ҿ�����ѧ�˹�����ྨ��������������§�����˹�����ྨ ���Ҿ�����ҷ����Ҿ�����ѧ������͡�Ҿ����������������´�ҡ���Թ�����������Ѻ��͹���Թ� ���ͨ�����������ͤ����Ѻ�Ҿ�����ѧ��׹�ѹ���������ö��ҹ�����Һ�˹�����ྨ��

Attribute

�����ͷ��Ժ�Ƿ�background���˹�����������Դ <body>
�ٻẺ�������<body background="url">...</body>valueurl  ���˹觢ͧ�ٻ�Ҿ - ���˹觷��������������䫵�
(background="image.gif") - ���˹��ٻ�Ҿ����������䫵����
(background="http://www.example.com/image.gif")

 

������ҧ�����ҹ

<body background="bg.gif">

<h2><p align="center">�������Ҿ�����ѧ���Ѻ���ྨ</p></h2>

</body>


����ʴ���

การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง


�մ���


 


การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง

�������Ҿ�����ѧ���Ѻ���ྨ����� (Fixed)



��������١������Ѻ�Ҿ�����ѧ�¡���ʴ��Ҿ�����ѧ㹵��˹������ʹ �����Ҩ�����͹ᶺ����͹  (Scrollbar) �������ŧ�Ҿ�����ѧ�������������ʹ�������͹�������ŧ��������Һ�˹�����

Attribute

�����ͷ��Ժ�Ƿ�background���˹�����������Դ <body>
�ٻẺ�������<body background="url" background="fixed">...</body>value�դ������ ��� fixed ��˹����ҡ��ѧ����Ѻ���


������ҧ�����ҹ

<body background="bg.gif" background="fixed">

<h2><p align="center">�������Ҿ�����ѧ���Ѻ���ྨ�����</p></h2>

</body>


����ʴ���

การทําพื้นหลังของ webpage มีกี่แบบ อะไรบ้าง

 

การทําพื้นหลังของ Webpage มีกี่แบบ

การกำหนดสีให้กับพื้นหลังและตัวอักษรนั้นสามารถกำหนดได้ 2 รูปแบบดังนี้ แบบที่ 1 แบบระบุชื่อสี เช่น red, green, blue, yellow เป็นต้น แบบที่ 2 แบบระบุด้วยเลขฐาน 16 หรือ หลักการผสมสีแบบ RGB เช่น เช่นการกำหนดสีพื้นหลังของเว็บเพจเป็นสีเขียวและกำหนดให้สีอักษรเป็นสีแดง

การกําหนดสีของตัวอักษร มีกี่แบบ อะไรบ้าง

การกำหนดสีของตัวอักษรหรือข้อความ นั้นจะสามารถกำหนดได้ 2 แบบ ดังนี้ 1. กำหนดโดยใช้ชื่อสี เช่น red, yellow, blue หรือ pink เป็นต้น

การใส่รูปภาพ พื้นหลังใช้คำสั่งใด

สำหรับในการแทรกรูปภาพบนหน้าเว็บเพจนั้นสามารถทำได้ง่ายๆ ด้วยการระบุคำสั่ง <IMG SRC="ชื่อรูปภาพ"> ดังตัวอย่างนี้จะเป็นการแทรกรูปภาพทั้งเป้นพื้นหลังและในหน้าเว็บเพจ

HTML ที่ถูกต้องในการเพิ่มสีพื้นหลังคืออะไร?

การใส่สีให้กับพื้นหลังมีคำสั่งดังต่อไปนี้ <body bgcolor ="#FFCCFF"> <-- ใส่คำว่า bgcolor="ค่าสี" ต่อจาก การเปิดแท็ก <body> ทดสอบสีของพื้นหลัง ... .
ผลลัพท์ที่ได้ ทดสอบสีของพื้นหลัง ... .
ผลลัพท์ที่ได้ ทดสอบค่าสีโดยใช้ชื่อสีโดยตรง ... .
ตัวอย่างการกำหนดค่าสีแบบตัวเลข "#000000"= สีดำ.