MeeWebFree.com v2 เพื่อคนอยากมีเว็บ

MeeWebFree.com >> บทความ การสร้าง และปรับแต่ง website >> การสร้างเว็บขั้นพื้นฐาน >> change-background-web.htm

เปลี่ยน รูป background ของหน้าเว็บ

ว่าด้วยเรื่อง รูป background ของเว็บ ถามหาวิธีกันเยอะมาก แต่เดี๋ยววันนี้จะทำให้ดู ว่ามันง่ายมากๆเลยครับ ทั้งเว็บ HTML และ PHP-Fusion ด้วยเลย

หลายคนถามมาว่าจะเปลี่ยน รูป หรือสี background ของเว็บอย่างไร วันนี้เลยเอามาทำเป็นบทความมันซะเลย จะได้แจ่มแจ้งกันทั่วหน้า

เริ่มต้นด้วยการต้องมีรูปซะก่อน โดยที่นี้ ผมใช้รูปนี้นะครับ ซึ่งมีชื่อว่า bg.gif ครับ

โดยปรกติการทำเว็บเนี่ย การอ้างอิงที่อยู่ของวัตถุต่างๆในเว็บถือเป็นเรื่องที่สำคัญมาก เพราะว่า หากแม้ว่าเราอ้างผิดเพียงแค่ตัวหนังสือเดียว มันก็จะไม่แสดงผล หรือแสดงผลอย่างผิดพลาดในทันที และอีกเรื่องนึงที่ต้องทำความเข้าใจคือระดับชั้นของ folder ต่างๆ ซึ่งในประเด็นที่สองนี้ เราก็จะสังเกตุได้จากเวลาที่เราใช้งานคอมพ์ ของเราเอง เพราะเมื่อเราเข้า ไปในเครื่อง เมื่อเราเข้าใน c:\ มันก็จะให้ผลที่แตกต่างกันกับ c:\windows ทั้งสองแฟ้มที่ยกตัวอย่างมานี้ มันคือความแตกต่างกันโดยสิ้นเชิง ไฟล์ใดๆที่เก็บใน c:\windows จะไม่สามารถเรียกดูได้ด้วยที่อยู่แค่ c:\ ได้ ดังนั้น เรื่องนี้ ผู้จะเป็นเว็บมาสเตอร์ต้องอาศัยการสังเกตุเอาให้มากๆเพราะว่าหลายครั้ง แทรกรูปแล้วรูปมักจะไม่ขึ้น ซึ่งส่วนใหญ่ก็จะผิดด้วยประเด็นนี้ล่ะ

นอกเรื่องอีกแล้ว หุๆๆ.... ก็พูดเอาไว้เพื่อปูพื้นฐานก่อน หลายคนอาจจะยังไม่เข้าใจ ที่นี้เข้าเรื่องนะครับ ผมจะเอารูปที่เห็นดังตัวอย่างนั้นใส่ในแฟ้มที่ชื่อ image ดังตัวอย่าง

ในที่นี้ เว็บผมคือแฟ้มที่ชื่อ meewebfree แล้วในแฟ้ม meewebfree ก็มีอีกแฟ้มภายในที่ชื่อ image ซึ่งภายในแฟ้ม image เก็บภาพที่ชื่อ bg.gif อยู่ และในขณะเดียวกัน ไฟลืที่ใช้เรียกหน้าเว็บของผมชื่อ test_page.htm นะครับ จะถูกเก็บอยู่ใน แฟ้ม meewebfree ซึ่งในกรณีที่ยกตัวอย่างนี้ ภายในแฟ้ม meewebfree เค้าจะถือว่าเป็นระดับ root ของเว็บครับ หรือระดับที่สูงสุดนั่นเอง

โดยที่ผมได้สร้างหน้าเว็บมาหน้านึงดังที่กล่าวคือ test_page.htm โดยที่เป็นหน้าที่ว่างเปล่า มีโค้ดดังนี้

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>Untitled Document</title>
</head>

โค้ดที่เห็นนี่คือ หน้าเว็บ html ที่มาตรฐานสากลเลยนะครับ ต้องมีองค์ประกอบพื้นฐานดังนี้ ซึ่งยังว่างเปล่า ต่อมาเราจะทำการใส่ รูป BG เข้าไป จะได้โค้ดดังนี้

ให้สังเกตุบรรทัดสีแดงๆนะครับ ว่ามีคำสั่ง background เพิ่มเข้ามา โดยที่ URL ที่อยู่ใน " " มันคือที่อยุ่ของรูปภาพอย่างไรครับ อย่างที่ได้อธิบายในรูปแรกแล้วว่า เราได้เอารูปไปใส่ในแฟ้มที่ชื่อ image แล้วหน้าเว็บ test_page.htm เราอยู่นอกแฟ้ม ดังนั้นเวลาที่เราทำการอ้างอิง เราจึงต้องอ้างอิง image/bg.gif เพื่อบอกให้รู้ว่า ต้องเข้าไปในแฟ้ม image ก่อน แล้วตามด้วย / แล้วตามด้วยชื่อรูป

เท่านี้ ก็หวังว่าคงจะเอาไปลองสร้างทดสอบกันดูได้แล้วน่ะครับ

ต่อมาก็จะมาพูดถึงเรื่องของ php-fusion บ้าง ...เนื่องจาก php-fusion เวลาเรารันเว็บ ไฟล์ทั้งหมดมันไม่ได้อยู่ที่ root เสมอ เช่น เมื่อเราเข้าไปในบอร์ด url เราจะตามด้วย /forum (ค่าเดิม) ซึ่งถ้าเราทำการอ้างอิงแบบ ที่ผ่านมา หรือที่เค้าเรียกว่าแบบ static จะทำให้ค่าต่างๆผิดไปทันที เพราะว่า เมื่อเราใช้งานบอร์ดไฟล์ที่เรากำลังใช้งานในปัจจุบันจะอยู่ในแฟ้ม forum หากว่าเราอ้างอิง เป็น image/bg.gif ก็จะเท่ากับว่าในแฟ้ม forum จะต้องมีแฟ้มที่ชื่อ image แล้วในแฟ้มก็จะต้องมีไฟล์ bg.gif อยู่ด้วย ซึ่งหากใครทำอย่างที่ว่าก็คงแก้ไขได้อยู่ แต่ว่าเมื่อเราทำการแก้ไขรูป หรือโค้ด เราก็ต้องแก้ไขทั้งสองที่ด้วย ซึ่งไปนานๆเราก็จะงงเอง...

แล้วข้อที่ทำให้ติดขัดอีกอย่างนึงก็คือ php-fusion ใช้ไฟล์เดียวกันซึ่งมันไม่ได้ เปลี่ยนไปตาม url ที่เราใช้งาน...คือ..... ถ้าใครที่ศึกษามาพอประมาณ จะรู้ว่า โค้ดส่วนนี้

<body>

จะอยู่ในไฟล์ที่ชื่อ subheader.php ซึ่งมันอยู่ที่ตำแหน่ง root ของเว็บ ผมลองเปิดดูจะได้ดังนี้

if ($settings['maintenance'] == "1" && !iADMIN) fallback(BASEDIR."maintenance.php");
if (iMEMBER) $result = dbquery("UPDATE ".$db_prefix."users SET user_lastvisit='".time()."', user_ip='".USER_IP."' WHERE user_id='".$userdata['user_id']."'");

echo "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<title>".$settings['sitename']."</title>
<meta http-equiv='Content-Type' content='text/html; charset=".$locale['charset']."'>
<meta name='description' content='".$settings['description']."'>
<meta name='keywords' content='".$settings['keywords']."'>
<link rel='stylesheet' href='".THEME."styles.css' type='text/css'>
<script type='text/javascript' src='".INCLUDES."jscript.js'></script>
</head>
<body bgcolor='$body_bg' text='$body_text'>\n";

render_header("<img src='".BASEDIR.$settings['sitebanner']."' alt='".$settings['sitename']."' title='".$settings['sitename']."'>");
?>

ที่เราต้องให้ความสนใจนั่นคือ บรรทัดสีแดงๆนั่นเองครับ เพราะมันก็เหมือนกับตัวอย่างที่ได้แสดงให้ดู แต่ทีนี้ ประเด็นของเราไม่ได้อยู่ตรงการใส่โค้ด แต่ประเด็นของเราคือการใส่โค้ดอย่างไรที่ทำให้มันแสดงภาพได้ตลอดไม่ว่าเราจะอยู่ใน folder ที่ลึกมากมายขนาดใหนก็ตาม ด้วยโค้ดเพียงชุดเดียว ...

ซึ่งข้อดีของระบบ php-fusion ก็คือเค้าได้เขียนเอาไว้ให้เราใช้งานและแก้ไขได้อย่างสะดวกแล้ว โดยที่ผมกล่าวมาก็คือ เค้าได้ทำการสร้างตัวแปรตัวนึงที่ชื่อ BASEDIR เอาไว้แล้ว ซึ่งตัวแปลตัวนี้จะเก็บค่า root ของเว็บตัวเองเอาไว้ ไม่ว่าเราจะอยู่ที่ใหนของเว็บหากเราอ้างอิงตัวแปรนี้ขึ้นหน้า มันก็จะกลับมาตั้งหลักที่ root ของเว็บเราอย่างถูกต้อง

ดังนั้น จากทั้งหมดที่กล่าวมาเราจึงแก้ใขบรรทัดที่เราต้องการได้ดังนี้

<body bgcolor='$body_bg' text='$body_text' background='".BASEDIR."'image/bg.gif">\n";

ซึ่งการแก้ไขนี้จะต้องเป็นไปตามไวยากรณ์ ภาษา PHP นะครับ จึงจะแสดงผลได้อย่างถูกต้อง หรือใครที่ขี้เกียจก็เอาของผมไปใช้ได้เลยครับ ไม่ต่างกัน แต่อย่าลืมนะครับ ชื่อแฟ้ม ชื่อไฟล์รูปต้องทำการแก้ไขให้ถูกต้องด้วย ง่ายๆเพียงเท่านี้แหล่ะคร้าบ

แล้วใหนๆก็นะ พูดเผื่อเลยแล้วกัน ว่า การใส่ Background ที่ดีเนี่ย เราต้องทำให้มันไม่รู้สึกเด่น หรือดูแล้วแสบตา แล้วอย่าพยายามเอารูปธรรมดามาทำเป็นรูป BG เพราะว่ามันจะสะดุด อันเนื่องมาจากการ render (ต่อภาพใหม่ไปเรื่อยๆ) ซึ่งอาจจะทำให้รู้สึกขัดๆกับเว็บที่เราทำได้ ยังไงก็ดูให้เหมาะสมแล้วกันนะคร้าบ

Keyword : change background web, php-fusion,background