Transcript Name of presentation

บทที่ 13
เทคนิคประกอบ
บทนา
ในการเขียนเว็บไซต์ นอกจากจะมีขอ้ มูลและรูปภาพแล้ว ผู เ้ ขียนเว็บควรทีจ่ ะหาเทคนิคต่างๆ มา
ประกอบ เพือ่ ให้เว็บไซต์นา่ สนใจมากยิง่ ขึน้ เช่น เทคนิคต่างๆ ในโปรแกรม Adobe
Dreamweaver ภาษา HTML ภาษา JAVA เป็ นต้น
กิจกรรมที่ 13.1
1. สร้างโฟลเดอร์ชอื่ List
2. สร้าง Site ชือ่ Showlist ไว้ในโฟลเดอร์ List
3. สร้างไฟล์
- list.html
- rollover.html
- showhide.html
- timeline.html
การใช้ปุ่ม Unordered list
กิจกรรมที่ 13.2
1. ให้เปิ ดไฟล์ทชี่ อื่ list.html
2. สร้างตาราง R=2, C=1, W=60% , B=1, P=0, S=0 , align = Center
3. ให้พมิ พ์ขอ้ ความ “การใช้ปุ่ม Unordered list” ไว้ในแถวแรก
4. คลิกแถวทีส่ อง
5. คลิกทีป่ ุ่ม Unordered list
6. พิมพ์ขอ้ ความทีต่ ้องการ
การใช้ปุ่ม Unordered list หากต้องการขึน้ บรรทัดใหม่ ให้กดแป้ น Enter อย่าง
เดียว เครือ่ งมือจะจัดบรรทัดเอง โดยไม่ต้องกดแป้ น Shift + Enter
การใช้ปุ่ม ordered list
กิจกรรมที่ 13.3
1. เว้นระยะบรรทัดตาราง 2 บรรทัด
2. สร้างตาราง R=2, C=1, W=60% , B=1, P=0, S=0 , align = Center
3. ให้พมิ พ์ขอ้ ความ “การใช้ปุ่ม ordered list” ไว้ในแถวแรก
4. คลิกแถวทีส่ อง
5. คลิกทีป่ ุ่ม ordered list
6. พิมพ์ขอ้ ความทีต่ ้องการ
การใช้ปุ่ม ordered list เป็ นปุ่มที่ ใช้ในการกาหนดลาดับหมายเลขหน้าข้อความ
อัตโนมัตเิ มือ่ กดแป้ น Enter
การกาหนดเส้นตารางให้เป็ นเส้นเล็ก
กิจกรรมที่ 13.4
1. คลิกตารางให้ขน้ ึ จุด
2. กาหนด B=0, P=1, S=1
3. ใส่ส ี Bg color ทีต่ ้องการให้เป็ นสีเส้น
4. ให้เคอร์เซอร์อยู่ในช่องแรก แล้วลากให้ครบทุกช่อง
5. กาหนดสี bg เป็ นสีเดียวกับสี Background
การสร้าง Rollover Image
กิจกรรมที่ 13.5
1. เปิ ดไฟล์ชอื่ rollover.html แล้วสร้างตาราง R=2, C=1, W=60% , B=1 , P=0, S=0 ,
align = Center
2. คลิกตาแหน่งทีต่ ้องการ
3. คลิกรูปเครือ่ งมือ Rollover Image
4. ให้คลิกปุ่ม Browse ของช่อง Original Image
5. ให้เลือกโฟลเดอร์ทเี่ ก็บรูปภาพไว้ในช่อง Look in
6. คลิกชือ่ รูปภาพทีต่ ้องการ
7. คลิก OK
8. คลิก OK
9. คลิก OK
การสร้าง Rollover Image
กิจกรรมที่ 13.5(ต่อ)
7. คลิก OK
8. คลิก Yes
9. คลิก Save
10. จะกลับมายังหน้าต่างของเครือ่ งมือ Rollover Image
11. คลิกทีป่ ุ่ม Browse ของช่อง Rollover Image
12. คลิกชือ่ รูปภาพทีต่ ้องการ
13. คลิก OK
การสร้าง Rollover Image
กิจกรรมที่ 13.5(ต่อ)
14. คลิก Save (หากเลือกรูปภาพทีม่ อี ยู่ใน Site เดิมอยู่แล้ว จะมีกรอบถามว่าต้องการให้
Save ทับหรือไม่ ให้ตอบ Yes
15. คลิก OK
- หากต้องการใส่คาอธิบายรูปภาพ Rollover Image ให้ใส่ในช่อง Alternate Text
- หากต้องการให้ภาพ Rollover Image สามารถ Link ไปยังไฟล์อนื่ ให้คลิกปุ่ม
Browse ในช่อง When Clicked , GO TO URL :
Browse
แล้วเลือกไฟล์ทเี่ ราต้องการ จากนัน้ คลิก OK
การสร้าง Show-Hide Layer
การสร้าง Show-Hide Layer ทาให้รูปภาพแสดงข้อความหรือรูปอีกภาพหนึง่ แต่จะทาให้ขอ้ ความแสดงข้อความหรือ
รูปไม่ได้ ถ้าต้องการทาให้ขอ้ ความแสดงผลดังกล่าวต้องใช้ขอ้ ความทีจ่ ดั เก็บเป็ นไฟล์ภาพ ซึง่ สร้างจากโปรแกรมอืน่
เช่น Adobe Photoshop
กิจกรรมที่ 13.6
1. เปิ ดไฟล์ชอื่ showhide.html แล้วสร้างตาราง R=2, C=1, W=40% , B=1, P=0
S=0 Align = Center แล้วนารูปภาพมาวางไว้
2. คลิกทีร่ ูปเครือ่ งมือ Draw Layer
3. ลากกรอบสีเ่ หลีย่ มพอประมาณ
4. พิมพ์ขอ้ ความในกรอบสีเหลีย่ ม หรือใส่รูปภาพโดยการคลิกปุ่มเครือ่ งมือ Image(สามารถ
ตกแต่งสีพน้ ื และสีตวั อักษรได้)
5. คลิกทีเ่ มนู Window
6. เลือก Others
การสร้าง Show-Hide Layer
7. เลือก Layer
8. จะปรากฎ Layer มาให้
9. กดเลือกกรอบทีส่ ร้างขึน้ แล้วจัดตาแหน่งให้เหมาะสม
10. ปิ ดดวงตา Layer นัน้
11. เมือ่ ปิ ดกรอบแล้วโดยการคลิกทีเ่ มนู Window  Others Layer หรือกด F
12. เมือ่ ปิ ดกรอบ Layer แล้ว คิลกทีเ่ มนู Window
13. เลือก Behaviors
14. คลิกทีร่ ูปภาพ
15. คลิกทีเ่ ครือ่ งหมายบวก มุมบนซ้ายของกรอบ Design
16. คลิก Show hide layer
17. เลือก Layer ทีต่ ้องการให้แสดง
18. คลิก Show
การสร้าง Show-Hide Layer
19. คลิก OK
20. คลิกปุ่มลูกศรทีช่ ่อง Event
21. หากไม่มคี าว่า (OnMouseOver) ให้เลือก Show even for แล้วเลือก 4.0 and
later browser ก่อน
22. คลิกปุ่มลูกสรทีช่ ่อง Event
23. เลือก OnMouseOver
24. คลิกเครือ่ งหมายบวก
25. เลือก Layer เดิม
26. คลิก Hide แล้ว OK
27. คลิกปุ่มลูกศรทีช่ ่อง Event เลือก OnMouseOut
28. ทาการ Preview
29. เลือ่ นเมาส์ไปวางไว้ทรี่ ูป จะแสดงข้อความหรือรูปภาพทีส่ ร้างไว้ เมือ่ นาเมาส์ออก ข้อความ
หรือรูปภาพจะหายไป
การสร้าง Timeline
กิจกรรมที่ 13.7
1. เปิ ดไฟล์ชอื่ timeline.html
2. คลิกทีร่ ูปเครือ่ งมือ Layer
3. ลากกรอบสีเ่ หลีย่ มให้มขี นาดพอทีจ่ ะใส่รูปทีต่ ้องการได้ไว้ขวามือสุดด้านบน
4. คลิกทีเ่ มนู Window
5. เลือก Others
6. เลือก Time line จะประกฏกรอบ Timeline ขึน้ มา
7. คลิกกรอบ Layer ให้ขน้ ึ จุด (ถ้าคลิกทีร่ ูปจะไม่ขน้ ึ จุด)
8. คลิกขวา Frame 1 ของแถวที่ 1
9. คลิกคาว่า Add object
10. จะมีคาว่า Layer 1 บนแถวที่ 1 ตัง้ แต่ Frame 1 ถึง Frame 15 (หากต้องการให้รูป
เคลือ่ นไหวช้า ให้ลากไปทางขวาเพิม่ จานวนเฟรม หากต้องการให้เคลือ่ นไหวเร็ว ให้ลากไป
ทางซ้ายเพือ่ ลดจานวนเฟรม)
การสร้าง Hot Spot (Map)
กิจกรรมที่ 13.8
1. คลิกรูปภาพให้ขน้ ึ จุด
2. เลือกรูปแบบ Hot spot ทีต่ ้องการ
3. ลาก Hot spot คลุมในบริเวณส่วนตาแหน่งของรูปต้องการให้ Link ได้
4. พิมพ์คาอธิบายภายในช่อง alt
5. กาหนดไฟล์ทตี่ ้องการให้ภาพนัน้ เชือ่ มโยงไปสู่ช่อง Link
6. กาหนด Target
7. คลิก Save
8. ทาการ Preview ดู
เทคนิคภาษา HTML
กิจกรรมที่ 13.9
การแทรกภาษา HTML
1. ทาแถบสีคลุมข้อความทีต่ ้องการ (เพือ่ จะได้มองเห็นได้ง่าย)
2. คลิกทีร่ ูปเครือ่ งมือ Show code view
3. จะสังเกตข้อความทีจ่ ะแทรกภาษา HTML
4. แทรกภาษา HTML ทีต่ ้องการ
5. คลิกทีร่ ูปเครือ่ งมือ Show design view
6. ทาการบันทึก
7. กด F12
การแทรกภาษา HTML เมือ่ พิมพ์ Tag เปิ ดเสร็จจะปรากฏ Tag ปิ ดให้ แล้วย้ายไป
วางตาแหน่งทีถ่ ูกต้องเอง
เทคนิคภาษา HTML
การทาตัวอักษรวิง่
<marquee><font color="#0000FF" size="4">ยินดีตอ้ นรับ</font></marquee>
การทาตัวอักษรวิง่ ไปกลับ
<marquee behavior= "alternate"><font color="#0000FF" size="4">ยินดีตอ้ นรับ</font></marquee>
เทคนิคภาษา HTML
การทาตัววิง่ แบบช้าๆ และสามารถทาให้หยุดได้เมือ่ เคลือ่ นเมาส์ไปวาง
ทีต่ วั อักษร
<marquee behavior= "scroll" scrollamount=2 scrolldelay=10 height=10 onmouseover="stop()"
onmouseout="start();" width=100%> <font color="#0000FF" size="4">ยินดีตอ้ นรับเข้าสู่ เว็บไซต์
</font></marquee>
การทาให้ Backgroun ทีเ่ ป็ นรุปภาพ อยูกบั ทีเ่ มือ่ เลือ่ นหน้าจอ
1. คลิกที่รูปเครื่ องมือ Show code view
2. ค้นหาข้อความนี้
<body bgcolor>”#FFFFFF” background=“../bg-smilex.gif”
3. ให้พิพม์คนั สัง่ นี้ต่อท้ายชื่อรู ปภาพ คือ bgpropertiles=“fixed” ดังนี้
<body #FFFFFF bgcolor>”#FFFFFF” BACKGROUND=“..BG-SMILE.GIF”>”
BGPROPERTIES=“FIXED”>
เทคนิคภาษา JAVA
<SCRIPT language=JavaScript1.2>
var marqueewidth=150
var marqueeheight=50
var speed=2
var marqueecontents='<font size =“4” color=“blue”>การพัฒนาเว็บไซต์ <br> เพื่อให้ผชู ้ มเข้ามาดู เป็ นสิ่ งที่ดี <br> และควรที่จะต้องมีการพัฒนา<br>ให้มากยิ่งๆ ขึ้นไป</font>'
if (document.all)
document.write('<marquee direction="up" scrolldelay=100 scrollAmount='+speed+'
style="width:'+mwidth+';height:'+mheight+'">'+mcontents+'</marquee>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write(marqueecontents)
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.height
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.top-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.top=marqueeheight
scrollit()
}
}
window.onload=regenerate2
</SCRIPT>
เทคนิคภาษา JAVA
5. คลิกทีเ่ มนู Edit  COPY
6. คลิกตาแหน่งทีต่ ้องการในหน้าเว็บ
7. คลิกทีร่ ูปเครือ่ งมือ Show code view
8. คลิกทีเ่ มนู Edit  Paste (ไม่ควรใช้วธิ กี ารคลิกเมาส์ขา้ งขวาเพราะอาจจะทาให้ตาแหน่งที่
วางเปลีย่ นไปได้)
9. คลิกทีร่ ูปเครือ่ งมือ Show design view
10. ทากาบันทึก
11. กด F12
ทัง้ นี้ สามารถแก้ไขข้อความและรูปแบบตัวอักษรได้ พร้อมทัง้ แก้ไขความกว้าง ความ
สูง และความเร็วในการเลือ่ นได้ ซึง่ อาจทาก่อนการคัดลอก (copy) หรือหลังจากทีว่ าง
(Paste) แล้วก็ได้
การใส่วนั เดือนปี ให้เป็ นปัจจุบนั (ไฟล์ชอื่ thaidate.txt)
ทาเช่นเดียวกับการทาตัวอักษรเลือ่ นขึน้
<SCRIPT language=JavaScript> now = new Date(); var thday = new Array ("
อาทิตย์","จันทร์ ","อังคาร","พุ ธ","พฤหัสบดี","ศุกร์ ","เสาร์ "); var thmonth = new Array
("มกราคม","กุมภาพันธ์ ","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน", "กรกฎาคม","
สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม"); document.write(" วัน" +
thday[now.getDay()]+ "ที่ "+ now.getDate()+ " " + thmonth[now.getMonth()]+ " "
+ (0+now.getYear()+543)); </SCRIPT>
หรือ Copy ตัง้ แต่บรรทัดที่ 2 จนถึงบรรทัดสุดท้าย ยกเว้น </script> เปิ ดเครือ่ งมือ
script ใน HTML
การใส่วนั เดือนปี ให้เป็ นปัจจุบนั (ไฟล์ชอื่ thaidate.txt)
แล้วนา Code ที่ Copy ไปวางในช่อง Content แล้วคลิก OK
การใส่วนั เดือนปี ให้เป็ นปัจจุบนั (ไฟล์ชอื่ thaidate.txt) age.txt)
การใส่ effect ตอนเปลีย่ นหน้า (ไฟล์ชอื่ effectpage.txt)
1. ทาการคัดลอก source code
2. นาไปวางไว้ต่อจากคาสัง่ Meta ทีอ่ ยู่ในส่วน Head ทีม่ อี ยู่เดิม 1 บรรทัด
<META http-equiv="Page-Enter" content="RevealTrans (Duration=3, Transition=23)">
<META http-equiv="Page-Exit" content="RevealTrans (Duration=2, Transition=23)">
การกาหนด Keyword เพือ่ ช่วยในการค้นหา
<META content=“=ชื่อที่ตอ้ งการค้นหา“ Name = Description>
The End