วันอาทิตย์ที่ 26 พฤษภาคม พ.ศ. 2556

ตัวอย่างการแบ่งจอภาพเป็นส่วน ๆ

<HTML>
<HEAD> 
<TITLE> โปรแกรมแรกของดิฉัน </TITLE> 
<frameset cols = "20%,*"> 
<frame src ="left.html">
<frame src ="right.html">
</frameset>

</HTML> 

หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML


ผลการรันด้วย Internet Explorer 



รายละเอียดความหมายของแต่ละคำสั่ง
  1. <frameset cols = "20%,*">
    ความหมาย : - คำสั่งเริ่มต้นของคำสั่ง Frameset การแบ่งด้วยคำสั่งนี้จะแบ่งในแนว Column เราสามารถเปลี่ยนการแบ่งจอภาพในลักษณะของแนวนอน หรือ Row ได้ โดยใช้คำสั่ง Rows ="25%,75%" (กำหนดขนาดเท่าใดก็ได้)
  2. <frame src "left.html">
    ความหมาย : - คำสั่งในการกำหนดชื่อไฟล์ที่ถูกแบ่งในลำดับที่ 1 คือ 20%
  3. <frame src "right.html">
    ความหมาย : - คำสั่งในการกำหนดชื่อไฟล์ที่ถูกแบ่งในลำดับที่ 2 ดอกจันทน์ " * " คือคำสั่งในการกำหนดส่วนที่เหลือ นั่นคือ 80%
  4. </frameset>
    ความหมาย : - คำสั่งปิดของคำสั่ง frameset
ตัวอย่างการสั่งกดเมนู ด้านซ้ายมือ แต่แสดง web page หน้าขวามือ 
  1. ให้เพิ่มคำสั่งเมนู ด้านซ้าย ดังนี้ <frame src "left.html" name = 'show'>
  2. สำหรับเมนูที่สร้างขึ้น (ทางซ้าย) เวลาสร้างลิงค์ให้เพิ่มคำสั่งดังนี้ <a href ="page01.html" name = 'show'>

ชื่อ Style - รูปแบบของเคอร์เซอร์สัญลักษณ์ที่ปรากฏ
Default - ลูกศณ
Hand - มือ
Crosshair - กากบาท
Move - ย้าย
Text - ตัวอักษร
Wait - รอ
Help - ช่วยเหลือ

บทเรียนที่ 11 : การโอนย้ายข้อมูลเข้าสู่ Hosting

เริ่มต้นแสดงเว็บของคุณให้แก่ชาวโลก..

หลังจากสร้างเว็บเสร็จแล้ว (ไม่จำเป็นต้องสมบูรณ์แบบ 100% ก็ได้) ขั้นตอนต่อไปก็คือการนำเว็บไปแสดงให้คนอื่นๆ โดยจำเป็นจะต้องมีการโอนข้อมูลในเว็บไปฝากไว้กับ Hosting (คือบริษัทที่ให้บริการเช่าพื้นที่เว็บ) หรือหลายๆ คนอาจทดสอบโดยการขอพื้นที่ฟรีจากเว็บต่างๆ ก็ได้

หลังจากเลือกได้แล้วว่าจะเสียเงินค่าเว็บ Hosting หรือจะทดลองใช้ฟรีก่อน ขั้นตอนที่จะกล่าวถึงต่อไปก็คือการโอนข้อมูลไปยัง Hosting ที่เราใช้บริการ ซึ่งโดยปกติ Hosting ที่ให้บริการจะมีเครื่องมือในการโอนข้อมูลของเรา และการทำงานอาจไม่สะดวกและรวดเร็วเท่ากับการใช้โปรแกรมประเภท FTP (File Transfer Protocal) ที่สามารถ download โปรแกรมฟรีมาใช้งานได้.. ตัวอย่างเช่น โปรแกรม WS_FTP, CoffeeCup Free FTP เป็นต้น หรือถ้าต้องการความสะดวกจะใช้โปรแกรม FTP ของ Microsoft Internet Explorer เลยก็ได้เช่นกัน

ณ ที่นี้ขอยกตัวอย่างการใช้โปรแกรม FTP ของ Microsoft Internet Explorer
  1. เริ่มต้นด้วยการเปิดโปรแกรม Microsoft Internet Explorer
  2. พิมพ์ข้อความที่อยู่เว็บของคุณช่อง Address ตัวอย่างผมใส่เว็บไซต์ของ www.it-guides.com 

  3. กดปุ่ม Go หรือ Enter บนแป้นพิมพ์ รอสักครู่จะมีหน้าต่างปรากฏดังภาพ



    ใส่ User Name และ Password ที่ได้รับมาจาก Hosting
  4. ถ้าไม่ผิดพลาดอะไรโปรแกรมจะเปิดหน้าต่างให้ดังนี้ 


    จะมีหน้าตาเหมือนกัน Windows Explorer
  5. ถ้าต้องการโอนย้ายไฟล์ ก็สามารถไปยัง โฟลเดอร์ของงานของคุณ จากนั้นก็ใช้คำสั่ง copy ไฟล์มาวางไว้ในหน้าต่างของเว็บที่เห็นอยู่นี้
กรณีใช้โปรแกรม FTP ตัวอื่น อาจใช้งานสะดวกมากขึ้น เนื่องจากหน้าต่างของโปรแกรมจะแบ่งออกให้เป็น 2 ส่วน คือด้านซ้าย กับด้านขวา เพียงเราคลิกเลือกจากด้านซ้ายและลากมาวางยังด้านขวาก็เป็นอันใช้ได้.. 
บทเรียนที่ 12 : การโปรโมท web

ทำอย่างไรให้คนรู้จักเว็บไซท์ของเรา

เรื่องที่ดูจะเป็นเรื่องยาก และต้องใช้เวลาอย่างมากก็คือ จะทำอย่างไรให้คนทั่วโลกรู้จักเว็บของเรา เราลองมาดูปัจจัยที่เป็นสิ่งสำคัญในการที่ใครๆ จะเข้าถึงเว็บของเราและสนใจจะเข้ามาดูเว็บของเราทุกๆ วัน ดังนี้
  1. ภาษาที่ใช้ - ถ้าเราใช้ภาษาไทย แน่นอนต่างชาติคือไม่สามารถเข้าใจได้
  2. ข้อมูล - สำคัญมาก ควรเป็นข้อมูลที่คนส่วนใหญ่สนใจ เช่น ข่าวสาร เกมส์ ของฟรี เป็นต้น
  3. การตกแต่ง - ควรมีการ design บ้างไม่ใช่ว่าจะมีแต่ข้อมูลเพียงอย่างเดียว อาจทำให้ความสนใจลดลงไปบ้าง
  4. ชื่อเว็บ - ถ้ายาวมากเกินไปก็อาจเข้าจะจำยาก และชื่อเว็บที่ดีควรบ่งบอกได้ว่าเป็นเว็บเกี่ยวกับอะไร
  5. ขนาดของแต่ละหน้า - ขนาดไฟล์ของเว็บแต่ละหน้า สำคัญมากเหมือนกัน ถ้าหน้าเว็บของคุณมีภาพมากๆ animation ใหญ่ จะทำให้เวลาเปิดต้องใช้เวลามาก อาจทำให้ผู้เยี่ยมชมบางคน เปลี่ยนไปดูเว็บอื่นเลยทีเดียว
  6. โปรโมทเว็บ - ถึงแม้จะเป็นเว็บที่ดีเลิศ ถ้าไม่มีการโปรโมทเว็บแล้ว จะทำให้คนรู้จักเว็บเราได้อย่างไร
การโปรโมทเว็บในวิธีต่างๆ
  1. แลกลิงค์
    เป็นวิธีที่ง่าย ไม่เสียค่าใช้จ่าย เพียงแต่คุณส่ง ลิงค์ของคุณไปยังเว็บไซต์ต่างๆ และขอแลกลิงค์กับเว็บเหล่านั้น
  2. banner exchange
    เป็นการแลกเปลี่ยน banner กับเว็บที่ให้บริการโดยเฉพาะ ปัจจุบันไม่ค่อยมีเว็บที่ให้บริการนี้มากนัก และควรระวังกับเว็บที่ให้บริการที่อาจมีเว็บต้องห้ามเข้ามาร่วมด้วย อาจทำให้เสียภาพพจน์เว็บของคุณได้
  3. ลงทะเบียน
    กับเว็บที่ให้ลงทะเบียนประเภท web directory ต่างๆ เช่น sanook.com, siamguru.com, thaihotelsdirecrtory.com เป็นต้น เรียกได้ว่า ถ้ามีที่ไหนให้ลงทะเบียนได้ ก็รีบเข้าไปลงทะเบียนโดยด่วน
  4. web award
    ถ้ามีการประกวด ก็อย่าพลาดเลยทีเดียว ถึงแม้ว่าจะไม่ได้รับรางวัล แต่ก็เป็นช่องทางหนึ่งในการโปรโมทเว็บที่ดีมาก
  5. โฆษณา
    ทางเว็บดังๆ หรือทางนิตยสาร หนังสือพิมพ์ วิทยุ ถ้าคุณมีงบประมาณมากพอ ซึ่งวิธีนี้ได้ผลค่อนข้างเด่นชัด แต่ต้องทุ่มทุนมากหน่อย
 jv0022 : Fade-in Slideshow : ใส่ effect ภาพใน Slideshow

สร้างความน่าสนใจให้กับภาพของคุณ โดยการทำเป็น Slideshow แต่เพิ่มเติม effect ระหว่างรูปภาพด้วย Fade-in และที่สำคัญสามารถเพิ่มลิงค์ลงไปแต่ละภาพได้ด้วย สนใจสามารถ copy ไปใช้งานได้เลย..
ตัวอย่าง

Author: Savio



แทรกคำสั่งเหล่านี้ในระหว่าง แท็ก Body




ส่วนที่ต้องแก้ไข ก่อนเริ่มใช้งาน
  • ขนาดของภาพ กว้าง (var slideshow_width) และ ยาว (var slideshow_height)
  • ความเร็วในการเปลี่ยนภาพ 1000= 1 วินาที (var pause)
  • รูปภาพและลิงค์ที่ต้องการของภาพ (fadeimages)

jv0021 : Random Image : สุ่มแสดงภาพอัตโนมัติ

สิ่งหนึ่งที่ช่วยให้ web มีความน่าสนใจมากขึ้นก็คือ การเปลี่ยนแปลงข้อมูลใน web สำหรับ webmaster คนใดที่ไม่ค่อยมีเวลา แต่ต้องการให้เว็บของคุณน่าสนใจ ดูเหมือนว่ามีการ update บ่อย ๆ อาจใช้วิธีนี้ก็ได้ โดยใช้ JavaScript สุ่มแสดงภาพ หรือเปลี่ยนภาพอัตโนมัติทุก ๆ ครั้งที่มีการเข้ามาแวะชม สนใจแล้วใช่ไหมครับ ลองศึกษาคำสั่งต่าง ๆ ดูได้เลยครับ 


ต้องใส่คำสั่งเหล่านี้ในระหว่าง แท็ก Body

<SCRIPT LANGUAGE="Javascript"><!--

function image() {
};

image = new image();
number = 0;
// imageArray
image[number++] = "<img src='images/online.gif' border='1'>"
image[number++] = "<img src='images/saver.gif' border='1'>"
image[number++] = "<img src='images/icqskin.gif' border='1'>"

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>


ภาพตัวอย่าง ถ้าต้องการดูผล ให้กด F5 หรือปุ่ม Refresh



jv0020 : Popup Windows : Popup windows เปิดอัตโนมัติตอนเข้า web

อีกหลาย ๆ web site ที่มีโฆษณาเป็น popup window หรือบาง web ต้องการแสดง promotions ของตัวเอง ถ้าสนใจจะนำไปใช้ก็สามารถศึกษาจาก code ด้านล่างนี้ไปใช้งานได้เลยครับ.. โดยคุณสามารถเปลี่ยนข้อความที่ต้องการให้แสดง ในส่วนของแท็ก body


ต้องใส่คำสั่ง onload นี้ใน แท็ก Body

<BODY onLoad="openindex()">


<SCRIPT LANGUAGE="JavaScript">
function openindex()
{
OpenWindow=window.open("", "newwin", "height=200,width=200,toolbar=no,scrollbars="+scroll+",menubar=no");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>ไอที-ไกด์ popup windows</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=white>")
OpenWindow.document.write("<H1>สวัสดีค่ะ!</H1>")
OpenWindow.document.write("ข้อความที่จะถูกแสดงในหน้าต่างที่ popup window")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")

OpenWindow.document.close()v self.name="main"
}
</SCRIPT>



jv0019 : Add Bookmark : บันทึก Bookmark ใน browser

คำสั่งในกาช่วยในการบันทึก Bookmark หรือ Add to Favorite เพื่อให้สะดวกในการเข้าไปเยี่ยมชมในครั้งต่อไป คำสั่งนี้ถือว่าเป็นคำสั่งยอดฮิตหนึ่งที่ webmaster ทุกท่านไม่ควรพลาด... สนใจ copy และ paste ไปใช้ได้เลยครับ 


<script language="JavaScript1.2">
var url="http://www.it-guides.com"
var title="it-guides.com - Free online Training"

function favorites(){
if (document.all)
window.external.AddFavorite(url,title)
}
</script>


<script> if (document.all) document.write('<A HREF="javascript:favorites()">Add to Favorites!</A>') </script>


ตัวอย่าง Add to Favorite

Add to Favorites!



วางคำสั่ง JavaScript นี้ระหว่าง tag Head 

<script language="JavaScript">
<!--
function doTheClock() {
window.setTimeout( "doTheClock()", 1000 );
var t = new Date();
document.forms(0).elements(0).value=t.toString();
}
//-->
</script>

เพิ่มคำสั่ง onload ในส่วนของ tag Body 

<body onload ="doTheClock()">
<form>
<input type = 'text' size = '40'>
</form>
</body>



ผลของการรัน


jv0017 : Time on Title bar : แสดงเวลาบน Title bar

คำสั่งนี้สำหรับแสดงเวลาบน Title bar ครับ สนใจนำไปใช้ได้เลยครับ อ้อ! อย่าลืมใส่ในตำแหน่งระหว่าง tag Head น่ะครับ สำหรับตัวอย่าง ให้ดู Title bar ด้านบนซิครับ.. ถูกใจไหม


<script language="JavaScript">
<!--
function doTheClock() {
window.setTimeout( "doTheClock()", 1000 );
t = new Date();
if(document.all || document.getElementById){
document.title = t.toString();
}else{
self.status = t.toString();
}
}
doTheClock()
//-->
</script>

jv0016 : Show Date : แสดงวันที่บน web page
คำสั่งนี้สำหรับแสดงวันที่บน web page สนใจก็นำไปใช้งานได้ เพียง copy code เหล่านี้ไปใช้


<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()+1
if (month<10)
month="0"+month
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
document.write("<small><font color='000000' face='Arial'><b>"+daym+"/"+month+"/"+year+"</b></font></small>")
</script >


ผลของการรัน

27/06/2008 

jv0014 : Last Updated : แสดงวันที่ update ครั้งล่าสุด

เพื่อแสดงให้เห็นว่า web page ของคุณมีการ updated อยู่ตลอดเวลา เราสามารถใช้คำสั่ง JavaScript ในการใส่ วันที่อัตโนมัติ ใน เอกสาร HTML ของเราได้ การใส่ให้ใส่ระหว่าง tag ชื่อ Body โดยเพิ่มคำสังดังนี้


<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<font color=#ff0000>" + "Last updated: "
+ "</font>" + document.lastModified);
//-->
</SCRIPT>



jv0013 : Print Method : สร้างปุ่ม Print บน Web page ของคุณ

จะเก๋แค่ไหน ถ้ามีปุ่ม Print บน Web Page ของคุณ สนใจเพียงเพิ่มคำสั่ง ต่าง ๆ ด้านล่างนี้เข้าไป


<a href="javascript:print();">Click to Print This Page</a>




<script language="javascript">
alert("Put your message here, between the quotes");
</script>

หมายเหตุ :
1. ตัวหนังสือสีแดง คือข้อความที่ต้องการให้แสดงในหน้าต่าง
2. ต้องใส่คำสั่งด้านบนนี้ระหว่าง Tag ที่ชื่อว่า Head



<script language="javascript">
onError=null
</script>

หมายเหตุ : คำสั่งนี้จะต้องใส่ในระหว่าง Tag ของ HEAD เท่านั้น



<a href="javascript: history.back()">ข้อความหรือรูปภาพที่ต้องการ</a>



แบบที่ 1 สร้างเป็น ข้อความหรือรูปภาพ
<a href="javascript:window.close()">ข้อความหรือรูปภาพที่ต้องการ</a>


แบบที่ 2 สร้างเป็น Form
<form>
<input type="submit" value="Close Window" onClick="window.close()">
</form> 

เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)