หน่วยที่ 6 ฐานข้อมูลและระบบ ... · 2015-10-20 · หน่วยที่ 6 ฐานข้อมูลและระบบสารสนเทศ
หน่วยที่ 4 ควบคมใหุ้เว็บเพจสวยด...
Transcript of หน่วยที่ 4 ควบคมใหุ้เว็บเพจสวยด...
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
หนวยท 4 ควบคมใหเวบเพจสวยดวยตาราง
ผลการเรยนรทคาดหวง 1. อธบายโครงสรางและคาสงของตารางได 2. สามารถเขยนคาสง (Tag) สรางตารางทซบซอนไดถกตอง
สาระสาคญ เวบเพจทเราพบเหนจานวนมากในปจจบนมความสวยงาม จดเนอหาทงตวอกษรและ
รปภาพอยอยาง เปนหมวดหม ในตาแหนงทเหมาะสม เกดจากการใชตารางควบคมการแสดงผล ตารางทใชในการจดหนาตาเวบเพจนน มการใชคาสงสวนขยายใหแสดงผลตามท
ผออกแบบตองการ กาหนดความกวาง /สงใหเหมาะสมกบขนาดของรปภาพ หรอขอความ กาหนด การแสดงเสนขอบใหมความหนา และสสนสวยงาม
คดแลวตอบ ถานกเรยนมขอมลจานวนมากทแสดงจานวน ปรมาณ ปรมาตร ของวตถ สงของ พช
สตว การสรางเวบไซตเพอแสดงผลใหผชมเขาใจไดงาย นกเรยนควรจดการเวบไซตหนาน อยางไร ....
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
60
ในบทท 3 เราไดศกษารายละเอยดเกยวกบการจดข อความในเอกสารรวมกบรปภาพใน รปแบบตางๆ ไปแลว จะเหนไดวา เวบเพจของเรามเรองราวทดนาสนใจมากขนแลว แมจะยงไม ตรงกบความตองการของเรามากนก เชน การกาหนดตาแหนงของรปภาพและขอความใหอยใน ตาแหนงทตองการตายตว จดหมวดหมไดงายขน ขอมลบางอย างจาเปนตองมการเปรยบเทยบหรอแสดงใหเปนหมวดหม การแสดงผลในรปแบบตารางดจะเหมาะสมกบการนาเสนอแบบน
โครงสรางของตาราง ขอความแสดงคาอธบายของตาราง
หวตารางคอลมน 1 หวตารางคอลมน 2 หวตารางคอลมน 3 ขอมล 1 แถวท 1 ขอมล 2 แถวท 1 ขอมล 3 แถวท 1 ขอมล 4 แถวท 2 ขอมล 5 แถวท 2 ขอมล 6 แถวท 2
ตารางในเวบเพจมความสาคญและความจาเปนในการจดการการแสดงผลของตวอกษรและรปภาพใหเหมาะสม จากตารางตวอยางขางบน สามารถเขยน คาสงทใช และเขาใจไดงาย ซงมโครงสรางของคาสงตารางดงน
รปแบบ คาสง
<TABLE> <CAPTION> ขอความแสดงคาอธบายของตาราง </CAPTION> <TR><TH> หวตารางคอลมน 1 </TH><TH> หวตารางคอลมน 2 </TH> .... </TR> <TR><TD> ขอมล 1 แถวท 1 </TD><TD> ขอมล 2 แถวท 1 </TD> .... </TR> <TR><TD> ขอมล 3 แถวท 2 </TD><TD> ขอมล 4 แถวท 2 </TD> .... </TR> <TR><TD> ขอมล 5 แถวท 3 </TD><TD> ขอมล 6 แถวท 3 </TD> .... </TR> ....... </TABLE>
สาหรบโครงสรางของตารางจะประกอบไปดวยคาสงเปด คอ <TABLE> และคาสงปด คอ </TABLE> และมคาสงยอยภายในอก 4 คาสงคอ
1. คาสง <CAPTION> ... </CAPTION> เปนคาสงทกาหนดคาหรอขอความอธบาย ตารางวา เกยวของกบเรองอะไร นนเอง
2. คาสง <TR> ... </TR> (Table Row) เปนคาสงทกาหนดแถวในตาราง จะมคาสงยอย ภายในอก 2 คาสงคอ <TH> ... </TH> และ <TD> ... </TD>
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
61
3. คาสง <TH> ... </TH> (Table Head) เปนคาสงทกาหนดหวเรองในแตละคอลมน ขอความภายในคาสงนจะเปนอกษรตวหนาและอยกงกลางของคอลมนในตาราง
4. คาสง <TD> ... </TD> (Table Data) เปนคาสงทแสดงขอมลในตารางแตละคอลมน ลกษณะของขอมลอาจเปนตวเลขหรอตวอกษร จะแสดงผลชดขอบซายของแตละคอลมน
สรางไฟลตวอยางสาหรบการแสดงผลรปแบบตารางดงภาพบนแลวจดเกบไฟลในชอ table_01.html ทดลองแสดงผลในบราวเซอร
การแสดงผลของคาสงตารางผานบราวเซอร
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
62
จากภาพจะเหนไดวาตารางท แสดงผลผานบราวเซอร ไมนาสนใจนก เราสามาร ถปรบแตงได โดยเพมสวนขยายเขาไปเชนเดยวกบแทกอนๆ เชน กาหนดการแสดงเสนตารางดวย คาสงแสดงเสนขอบ BORDER เขาไปใน <TABLE> และยงสามารถเพมคาความหนาของเสนตารางไดดวย คาสง BORDER=“n” เมอ n คอ คาความหนาของเสนขอบนอก มหนวยเปนพกเซล
กาหนดความ กวางของตารางดวยคาสง WIDTH การกาหนดสสนและขนาดของตวอกษรในสวน <CAPTION> และในตารางสามารถกาหนดไดตาม ปกตเหมอนตวอกษรทวไป เราสามารถกาหนดใหตารางอยกงกลางของหนาไดดวยการใชคาสง <DIV ALIGN=“CENTER”> ... </DIV> เปนตน ดงตวอยาง
คาสงสวนขยายเพมเตมในตาราง 1. จากไฟลตวอยางจะพบวา มคาสง WIDTH=“75%” ซงมผลตอตารางคอจะแสดงขนาด
ของตารางดวยความกวางเทากบจานวนเปอรเซนตทระบเมอเทยบกบขนาดของ หนาตางบราวเซอร เราสามารถระบขนาดตารางดวยคาคงทเปนตวเลขจานวนพกเซลไ ด เชน width= “600”
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
63
2. การปรบขนาดความสงของตาราง โดยกาหนดแอตทรบวต HEIGHT=“X%” ซงในการแสดงผลของเวบบราวเซอรจะเปรยบเทยบกบเปอรเซนตความสงของจอ
3. การวางหวตารางไวตามแนวนอนหรอแนวตง ทาไดโดยการวางคาสง <TH> ... </TH> ไวในสวน แถวหรอคอลมน
Table Heading Cellpadding Cellspacing
4. การกาหนดขนาดพนทของการแสดงผลขอมลใน ชอง ตาราง โดยใชแอตทรบวต
CELLPADDING เพอกาหนดพนทวางภายในเซลขอมลแตละเซล เปนการกาหนดระยะหาง ระหวางเสนและตวอกษร หรอเสนกบ ขอบรปภาพมหนวยเปนพกเซล โดยใสคาตวเลขจานวน พกเซลทตองการเวนระยะ เชน CELLPADDING=“10”
5. การกาหนด ระยะหาง ของชองวางระหวางชองตาราง ทาไดโดยการใชแอตทรบวต CELLSPACING=“n” เมอ n คอจานวนพกเซลระบคาของระยะหางของเซล (คาปกตคอ 1)
6. การจดตาแหนงของคาอธบายตาราง คาปกตจะอยเห นอตาราง แตเราสามารถสงใหไป แสดงอยใตตารางได โดยเพมแอตทรบวต ALIGN=“BOTTOM” ในคาสง <CAPTION> ดงตวอยาง
<CAPTION ALIGN=“BOTTOM”> กาหนดใหคาอธบายตารางอยลาง </CAPTION>
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
64
7. การกาหนดตาแหนงขอความแนวนอนในตาราง โดยใชแอตทรบวต ALIGN ซงมลกษณะของคาสงอย 3 ลกษณะ คอ LEFT/CENTER/RIGHT ซงมขอยกเวนดงน
<TH> คาปกตคอ CENTER จงไมตองใช ALIGN=“CENTER” ใชเฉพาะ LEFT หรอ RIGHT
<TD> คาปกตคอ LEFT จงไมตองใช ALIGN=“LEFT” ใชเฉพาะ CENTER หรอ RIGHT
8. การกาหนดตาแหนงขอความในแนวตงของตาราง โดยใชแอตทรบวต VALIGN ซงมลกษณะของคาสงอย 3 ลกษณะ คอ TOP/MIDDLE/BOTTOM
คาสง VALIGN ถาใชกบคาสง <TR> หรอ Table Row การแสดงผลในโปรแกรมเวบบราวเซอรจะแสดงผลแบบกาหนดตาแหนงของขอมลทงแถวให เปนไปตามแอตทรบวตไมวาจะอยใน <TH> หรอ <TD>
ถากาหนดตาแหนงขอมลดวยคาสง VALIGN ในคาสง <TH> หรอ <TD> จะมผลเฉพาะในเซลทกาหนดเทานน
ไมจาเปนตองใช VALIGN=“MIDDLE” เพราะเปนคาปกตทงใน <TR>, <TH> และ <TD>
9. การกาหนดสใหกบตาราง สามารถทาไดโดยใชแอตทรบวต BGCOLOR ลงในคาสงตาราง
<TABLE BGCOLOR=“ส”> จะทาใหพนสมผลกบทกชองในตาราง <TR BGCOLOR=“ส”> จะมผลเฉพาะแถวนนแถวเดยว <TD BGCOLOR=“ส”> หรอ <TH BGCOLOR=“ส”> จะมผลเฉพาะเซลนน สามารถใชรปภาพแทนสไดโดยใชสวนขยายเปน Background=“ชอภาพ” ใน
คาสง <table> <th> และ <td> 10. การกาหนดความกวางของคอลมนแตละคอลมนในตาราง โดยใชแอตทรบวต
WIDTH=“n” คา n จะมหนวยเปนพกเซล การกาหนดความกวางของคอลมนในแถวใดกตามจะม ผลกบคอลมนนนๆ ในทกๆ แถวโดยอตโนมต สวนแถวทไมกาหนดความกวางจะมความกวาง เทากบจานวนตวอกษรทมมากท สดในคอลมนนน คาสงนใชกบ <TH> และ <TD>
11. การกาหนดชองวางในตาราง ในกรณทชองตารางนนเปนชองวางไมมขอมล เรา สามารถใชอกษรเคาะวาง (Invisible Character) หรอ (Non breaking space) แทนได โดยการปอนขอมลรหสแอสกดงน ลงไป อกษรเคาะวา งนจะใชแทนชองวาง 1 ตวอกษรในประโยคใดๆ กได (ถาเราไมใสอกษรเคาะวางลงไป ตารางในชองทไมมขอมลจะไมแสดงผลเสนตาราง )
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
65
เราจะทดลองในการแกไขปรบปรงตารางโดยการใชไฟล table_02.html เปนตนแบบและจดเกบเปนไฟลชอ table_03.html ดงตวอยาง
แกไขเพมเตมสวนขยายคาสงในชองตารางและการแสดงผลในบราวเซอร
สงทไดแกไขเพมเตมจากไฟลเดมคอ กาหนดระยะหางของเซล เพมการวางตาแหนงของคาอธบายตารางจากขางบนมายงสวนลางของตาราง กาหนดสของแถวในหวตาราง กาหนดสของชองขอมลใหคอมลมนชอ ผเขาสอบมสตางจากชองคะแนนทได กาหนดการวางตาแหนงของคะแนนทได เสรจแลวใหจดเกบไฟลและแสดงผลในบราวเซอรวามผลอยางไร ทดลองแกไขในสวน
อนๆ ดวาเกดผลอะไรขนบาง อยาลมวาในการแกไขทกครงจะตองมการจดเกบขอมลลงไฟล กอนเสมอจงจะมการเปลยนแปลงการแสดงผลในบราวเซอรเมอมการคลกทปมรเฟรช
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
66
12. การกาหนดขนาดความสงของแถวในตาราง โดยใชแอตทรบวต ROWSPAN จะเปนการรวมเอาชองในแถวหลายแถวเขาเปนชองเดยว คลายกบการรวมเซลตารางในโปรแกรม ไมโครซอฟทเวรด คาสงนใชกบ <TH> และ <TD> ดงตวอยาง
<TD ROWSPAN=“2”> ขยายชองตารางออกไปในแถว </TD> <TH ROWSPAN=“2”> ขยายชองตารางออกไปในแถว </TH>
13. การกาหนดความกวางของตาราง (รวมชองตารางคอลมนหลายชองเขาดวยกน ) โดยกาหนดแอตทรบวต COLSPAN=“จานวนคอลมน” คาสงนใชกบ <TH> และ <TD> ดงตวอยาง
<TH COLSPAN=“2”> ... </TH> และ <TD COLSPAN=“2”> ... </TD> 14. ในบางกรณอาจจาเปนตองใชการแสดงผลแบบตารางซอนตาราง เพอใหสามารถ
กาหนดรปแบบพเศษได และมผลทสวยงาม เชนเดยวกบการสง LIST ซอน LIST นนเอง ขอสาคญ คอ อยาลมปดทายคาสงทกคาสง ไมเชนนนการแสดงผลจะไม ถกตอง
15. การกาหนดรปภาพในตาราง เราสามารถบรรจภาพใด ๆ ลงในตารางกไดโดยใชคาสง <IMG SRC=“รปภาพ”> แทนขอความในตาราง ถารปมขนาดใหญจะทาใหชองตารางขยายตาม ไปดวย ถาตองการใหขนาดของรปภาพพอดกบตารางจะตองกาหนดแอตทรบวต WIDTH และ HEIGHT ใหกบรปภาพน นดวย
16. การใชภาพหรอขอความในตารางเปนจดเชอมโยงสามารถทาไดเหมอนปกต โดยการใชคาสง <A HREF> จะกลาวถงในบทตอไป
ตอไปเราจะทดลองการผสมผสานเซลใหมรปแบบตางๆ ตามทตองการ โจทยขางลางนคอ ลกษณะการแสดงผลในบราวเซอรทตองการ
การจดการภาพและขอความในตาราง
การจดวางขอมลลงในตาราง แบบจดกงกลาง
จดขอความชดขวาลาง เดกเอยเดกนอย แสดงการรวมแถว 1,2 ในตาราง แสดงการรวมคอลมนแถวบน
การวเคราะหกอนการสรางตาราง 1. ตารางในชองคอลมนท 1 แถวท 1 และ 2 ตองรวมกนดวยแทก ROWSPAN จดกงกลาง
ทงแนวต งและแนวนอนในตารางน 2. ตารางในแถวท 1 ชองท 2 และ 3 ตองรวมกนดวยแทก COLSPAN จดกงกลางใน
แนวนอนเพอบรรจขอความ
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
67
3. รปภาพการตนตองใชแทก <IMG SRC=”ชอรป”> ในชองตาราง 1 กาหนดระยะหาง จากเสนขอบถงรปทงสดาน
4. ชองตารางทเหลอไมมการรวมชอง ใหบรร จขอความและสงจดการตาแหนงของ ขอความในแตละชองตามตองการ
เราสามารถสรางตารางและกาหนดสวนขยายของตารางตามทไดวเคราะหไว และเมอใช บราวเซอรเปดไฟลแสดงผลลพธจะไดดงภาพขางลาง
การแสดงผลของตารางเปนไปตามทโจทยตองการ
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
68
จะเหนไดวา ตารางมความสาคญอยางยงตอการแสดงผลของหนาเว บเพจ จากภาพตวอยางขางลางน http://www.cnn.com จะเหนถงแนวทางการใชตารางในการควบคมการแสดงผลใหไดตามทผออกแบบไดกาหนดไว
ภาพลางเปนการแสดงแนวเสนตารางทสรางตารางซอนตารางในการแสดงผล
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
69
เวบไซตของสานกงานคณะกรรมการการศกษาขนพนฐานกใชตารางควบคมการแสดงผล เราจะเหนไดวา เวบไซตทสวยงามนนขาดการจดการดวยตารางไมได จงควรฝกฝน จดจา
คาสงในการจดการกบตาราง และนาไปประยกตใชตอไป เราไดทดลองสรางเวบเพจมาไดจานวนหลายหนาแลว ในแตละหนาตางกแยกกนอยอยาง
อสระไมมความสมพนธกน ในบทตอไปเราจะไดศกษาการเชอมโยงเนอหาเขาหากนอยางเปน ระบบ รวมทงเชอมโยงไปยงเวบไซตอนๆ
ควบคมเวบเพจใหสวยดวยตาราง
มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช
70
กจกรรมเสนอแนะ หลงจากการศกษาบทเรยนหนวยท 4 เสรจสนแลว ใหนกเรยนแตละ คน ทากจกรรมดงน 1. ศกษาหาความรเพมเตมในการสราง ตารางควบคมการแสดงผลจากเวบไซตตางๆ 2. ใหนกเรยนทดลองใชคาสง จดตารางรปแบบตางๆ แทรกตวอกษรและรปภาพ ใน
ตาแหนง ตางๆ ของชองตาราง และกาหนดสวนขยายเพมเตมนอกเหนอจากในตวอยาง แลวทดสอบการแสดงผลผานบราวเซอร
คาถามทายบท 1. อธบายถงผลเมอใชคาสง BGCOLOR ในสวนตางๆ ของตาราง
<TABLE> ………………………………………………………………………………….. <TR> ……………………………………………………………………………………….. <TD> ……………………………………………………………………………………….
2. จงใหความหมายของคาสงตอไปน CAPTION ………………………………………………………………………………….. ROWSPAN …………………………………………………………………………………. COLSPAN ………………………………………………………………………………….. CELLPADDING …………………………………………………………………………… CELLSPACING ……………………………………………………………………………. ALIGN ……………………………………………………………………………………….