| |
 |
ส่วนหัว และท้ายของเว็บเพจ (Header and Footer Webpage) |  |
| |
เว็บเพจสำรอง (Backup Webpages) : siamdhost.com | thaiabc.com | thaiall.korattown.com | perlphpasp.com | thaiall.com
ปรับปรุง : 2550-01-28 (เพิ่ม header.doc)
สารบัญ
- บทนำ
- blank.php :: แฟ้มเปล่า ที่นำมาแก้ไข แล้ว save as เป็นแฟ้มอื่นได้
- header.php :: แฟ้มส่วนหัว ใช้ควบคุม css และ body อย่างง่าย ๆ
- menu.php :: แฟ้มเก็บตัวเลือกหลัก ที่อยู่ทางด้านซ้าย
- footer.php :: แฟ้มส่วนล่างสุด สำหรับรายละเอียด เช่น ชื่อหน่วยงาน
- การใส่ counter ของ truehits.net ใน html
- การใส่ counter ของ truehits.net ใน perl
- การใส่ counter ของ truehits.net ใน asp
- การใส่ counter ของ truehits.net ใน php
- footer2.htm ใช้ระหว่างมกราคม 2547 - สิงหาคม 2547
- footer3.htm ใช้ตั้งแต่กันยายน 2547 - มีนาคม 2548
- footer6.htm เริ่มใช้มีนาคม 2548
- Google.com Search และมี Banner ของเราในผลสืบค้น
- Expert Script ที่น่าสนใจ ทำให้ดูเป็นมืออาชีพ
- แบบเสนอ หรือข้อแนะนำเกี่ยวกับรูปแบบโฮมเพจของหน่วยงาน
เว็บไซต์ที่ใช้ header footer และ menu
1. 101-idea.com
2. leasinglampang.com
3. lampangdisaster.com
4. aclalumni.com
ใน บทความไอทีในชีวิตประจำวัน ที่เขียนด้วย PHP
ผมได้เพิ่มตัวเลือกสั่ง export เป็น .doc ด้วย
header('Content-type: application/msword');
|
|
บทนำ
แนวคิด header อัตโนมัติ เคยทดสอบใช้ที่ thaiall.com แต่ไม่สำเร็จ เพราะมีปัญหาเรื่องปริมาณข้อมูลเข้าออก และความหลากหลายของเว็บ ทำให้การนำ header และ footer มาใช้ อยู่ในขอบเขตของ static มิใช่ dynamic อย่างที่ควรเป็น เพราะเว็บของ thaiall.com มากกว่าครึ่ง ถูกทำเป็น mirror site ไว้ภายนอก เช่น geocities.com, hypermart.net, thai.net, thcity.com, websamba.com หรือ brinkster.com เป็นต้น
แนวคิดนี้เคยคิดจะนำมาใช้ในสถาบันการศึกษาระดับอุดมศึกษา แต่มีปัญหาเรื่อง การเปลี่ยน version และนโยบายของการพัฒนา ความหลากหลายของหน่วยงาน จำนวน server ที่อยู่ในระบบ ปริมาณข้อมูลที่หลากหลาย และเวลาของนักพัฒนาในหน่วยงานต่าง ๆ ทำให้แนวคิดเกี่ยวกับ header และ footer ถูกพักไว้ก่อน เพื่อรอเวลาที่เหมาะสม และความลงตัวในทุกด้าน
แล้ววันหนึ่งผมก็มีโอกาสพัฒนา และวางระบบเว็บให้หน่วยงานของราชการระยะหนึ่ง เว็บไซต์หนึ่งคือ lampangcity.com ซึ่งมีคุณสมบัติที่เหมาะจะใช้ระบบ header footer อย่างมาก คือ มีเมนูหลักในทุกหน้า ไม่จำกัด datatransfer, ไม่จำกัดปริมาณการประมวลผลด้วย php และจ่ายเงินอย่างถูกต้องให้กับ web hosting ทำให้เว็บทุกหน้าของที่นี่ทำด้วย php เพราะสะดวกกว่าการใช้ ssi ใน perl มาก แฟ้มต่าง ๆ จะเริ่มพัฒนาด้วย blank.php แล้ว save as เป็นเว็บต่าง ๆ ส่วน blank.php จะไปเรียก header.php menu.php และ footer.php ทำให้มีอิสระในการแก้ไขส่วนต่าง ๆ รวมทั้งระบบ meta ที่มีความแตกต่างในแต่ละหน้า และเอื้อต่อ search engine ต่าง ๆ ที่จะเข้ามาดูด keywords และ description อย่างถูกต้อง แม้เมนูในแต่ละหน้าจะไม่เหมือนกัน ก็สามารถความคุมใน header.php ด้วย if สำหรับควบคุมได้
|
2. blank.php :: แฟ้มเปล่า ที่นำมาแก้ไข แล้ว save as เป็นแฟ้มอื่น ๆ ต่อไป
|
โปรแกรมนี้ทำหน้าที่เรียกโปรแกรม 3 โปรแกรมมาแสดงผล แต่มิได้แยกส่วน head จริง ๆ ออกไป เพราะเว็บแต่ละหน้าจำเป็นต้องมี meta เกี่ยวกับ keywords และ description ซึ่งแตกต่างในทุกหน้า ถูกเตรียมไว้ให้ robot จาก search engine ต่าง ๆ เข้ามาดูดไปทำฐานข้อมูล
|
<html><head><title>สำนักงานเทศบาลนครลำปาง (Lampang City Municipality)</title>
<meta name="Keywords" content="เทศบาล,ลำปาง">
<meta name="Description" content="สำนักงานเทศบาลนครลำปาง">
<? require("header.php"); ?>
<? require("menu.php"); ?>
<! ส่วนกลาง >
<td width=450 valign=top>
<! === >
abc abc
<! === >
<? require("footer.php"); ?>
</body></html>
|
|
3. header.php :: แฟ้มส่วนหัว ใช้ควบคุม css และ body อย่างง่าย ๆ
|
ส่วนนี้จะซ้ำ ๆ กันในทุกหน้า เพราะทำหน้าที่กำหนด style และ body หากนักพัฒนาต้องการทำให้เป็น dynamic คือเปลี่ยนสีทุกครั้งที่เปิดเว็บ ก็สามารถแก้ไขในส่วนนี้ได้โดยง่าย และเป็นการประหยัดเนื้อที่เก็บแฟ้ม ของหน้าเว็บต่าง ๆ ที่คัดลอกจาก blank.php ไป
|
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style type=text/css>
A:link {COLOR:#FF0000; TEXT-DECORATION:none;font-size:10px;font-family:MS Sans Serif;}
A:visited {COLOR:#0000FF; TEXT-DECORATION:none;font-size:10px;font-family:MS Sans Serif;}
A:hover {COLOR:#FF0000; TEXT-DECORATION:none;font-size:10px;font-family:MS Sans Serif;}
body {font-family:MS Sans Serif; font-size:10px;}
td {font-family:MS Sans Serif; font-size:10px}
</style>
</head>
<body text=blue vLink=purple aLink=red link=blue bgColor=white topmargin=0 leftmargin=0>
|
|
4. menu.php :: แฟ้มเก็บตัวเลือกหลัก ที่อยู่ทางด้านซ้าย
|
ใช้แสดงเมนูทางด้านซ้าย หากเจ้าของเว็บต้องการให้มีเมนูด้านซ้ายในทุกหน้าเว็บ การแก้ไขจะต้องถูกพิจารณาเป็นอันดับแรก หากไม่ใช้โปรแกรมช่วยจัดการอัตโนมัติ จะจัดการได้ยุ่งยาก การใช้ menu.php ใน case นี้จะช่วยให้การแก้ไขทำได้ง่ายอย่างมาก
|
<table bordercolordark=black width=780 bordercolorlight=black border=0>
<tr><td width=170 valign=top align=center>
<! start of left>
<table width=95% border=0 align=center cellpadding=0 cellspacing=1>
<tr bgcolor=#009999><font color=white><b>:: เทศบาลนครลำปาง ::</b></font></td></tr>
<tr bgcolor=#ffffdd><td>
<?
$x = str_replace("/", "_", $PHP_SELF);
$x = str_replace(".", "_", $x);
if ($x != "_main_php") {
echo "<img src=/img/bot1.gif> <a href=/ target=_top>หน้าแรก</a><br>";
}
?>
<img src=/img/bot1.gif> <a href=/localgov/localgov.php>การปกครองส่วนท้องถิ่น</a><br>
<img src=/img/bot1.gif> <a href=/gen/history.php>ประวัติการจัดตั้ง</a><br>
<img src=/img/bot1.gif> <a href=/gen/counciller.php>คณะเทศมนตรี</a><br>
<img src=/img/bot1.gif> <b><a href=/webboard>กระดานข่าว เทศบาลนคร</a></b><br>
</td></tr></table>
<? } ?>
<! end of left >
</td>
|
|
5. footer.php :: แฟ้มส่วนล่างสุด สำหรับรายละเอียดเช่น counter ชื่อหน่วยงาน เป็นต้น
|
เว็บเพจที่ดีส่วนใหญ่ควรมีส่วนปิดหน้าเว็บ ที่บอกรายละเอียดต่าง ๆ ของนักพัฒนา เช่น e-mail หรือ โทรศัพท์ นอกจากนี้ยังเป็นจุดที่เหมาะจะใส่ counter ที่ใช้นับจำนวนผู้เข้าใช้บริการ ทำให้ทราบความก้าวหน้าของเว็บไซต์ได้เป็นอย่างดี
|
</td></tr></table>
<! ==============================>
<table width=100% cellpadding=0 cellspacing=0 border=0 bgcolor=black>
<tr bgcolor=#cccccc><td height=2 colspan=2></td></tr>
<tr bgcolor=#808080><td height=4 colspan=2></td></tr>
<tr bgcolor=#404040><td height=5 colspan=2></td></tr>
<tr><td width=200 align=center><font color=yellow>
<?
$x = str_replace("/", "_", $PHP_SELF);
$x = str_replace(".", "_", $x);
?>
<SCRIPT LANGUAGE="javascript1.1">page="<?=$x; ?>";</SCRIPT>
<SCRIPT LANGUAGE="javascript1.1"
src="http://hits1.truehits.net/data/h0000001.js"></SCRIPT>
</td>
<td align=center><font color=white>
<b>สำนักงานเทศบาลนคร (City Municipality)</b><br>
<br> Copyright 2003. By...City Municipality
</td></tr></table>
|
|
6. การใส่ counter ของ truehits.net ใน html
<SCRIPT LANGUAGE="javascript1.1">page="lampang_go_th_webboard";</SCRIPT>
<SCRIPT LANGUAGE="javascript1.1" src="http://hits1.truehits.net/data/h0000001.js"></SCRIPT>
|
|
7. การใส่ counter ของ truehits.net ใน perl
#!/usr/bin/perl
# <!--#exec cgi="/cgi/bottom.pl"-->
print "Content-type:text/html\n\n";
$x = $ENV{'SCRIPT_URL'};
$x=~s/\//_/g;
print '<SCRIPT LANGUAGE="javascript1.1">page="lampang_go_th_';
print $x;
print '";</SCRIPT>';
print '<SCRIPT LANGUAGE="javascript1.1" src="http://hits1.truehits.net/data/h0000001.js"></SCRIPT>';
|
|
8. การใส่ counter ของ truehits.net ใน asp
<%
' <!--#include file="scripturl.asp"-->
s = replace(request.servervariables("SCRIPT_NAME"),"/","_")
s = replace(s,".","_")
response.write("<SCRIPT LANGUAGE=javascript1.1>page='lampang_go_th_" & s & "';</SCRIPT>")
response.write("<SCRIPT LANGUAGE=javascript1.1 src=http://hits1.truehits.net/data/h0000001.js></SCRIPT>")
%>
|
|
9. การใส่ counter ของ truehits.net ใน php
<?
# require("counter.php")
$s = $_ENV["SCRIPT_NAME"];
$s = str_replace("/","_",$s);
$s = str_replace(".","_",$s);
echo '<SCRIPT LANGUAGE="javascript1.1">page="lampang_go_th_' . $s . '";</SCRIPT>';
echo '<SCRIPT LANGUAGE="javascript1.1" src="http://hits1.truehits.net/data/h0000001.js"></SCRIPT>';
?>
|
|
13. Google.com Search
และมี Banner ของเราในผลสืบค้น
|
Expert Script ที่น่าสนใจ ทำให้ดูเป็นมืออาชีพ
หลายครั้งที่พัฒนาเว็บไซต์ให้บริษัท แล้วเขาไม่มีอะไรจะนำเสนอ ก็ได้ script เหล่านี้
ทำให้เว็บไซต์มีเนื้อหาน่าสนใจอย่างน่าประหลาด คนไม่รู้ก็นึกว่า เว็บไซต์นี้ขยัน .. เหลือเชื่อ ลองนำไปใช้ดูนะครับ
คนทำข่าวเขาจะได้ภูมิใจว่ามีคนใช้โปรแกรมที่เขาพัฒนา
|