1 / 25

XHTML Navigation, Table & Form

XHTML Navigation, Table & Form. โดยสว่าง ศรีสม องค์การคนพิการสากลประจำภูมิภาคเอเชีย-แปซิฟิก. Navigation (การท่องเว็บ-เมนู). Navigation System (ระบบท่องเว็บ). Global Navigation (เมนูหลัก). Global Navigation (เมนูหลัก). <!-- ส่วนเมนูหลัก ( global navigation) --> <div id="globalnav">

jennifer-rollins
Download Presentation

XHTML Navigation, Table & Form

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTMLNavigation, Table & Form โดยสว่าง ศรีสม องค์การคนพิการสากลประจำภูมิภาคเอเชีย-แปซิฟิก

  2. Navigation (การท่องเว็บ-เมนู)

  3. Navigation System (ระบบท่องเว็บ)

  4. Global Navigation (เมนูหลัก)

  5. Global Navigation (เมนูหลัก) <!-- ส่วนเมนูหลัก (global navigation) --> <div id="globalnav"> <ul> <li><a href="/tddf/ " title="ยินดีต้อนรับสู่มูลนิธิพัฒนาคนพิการไทย (access key: 2)" accesskey="2">ห้องรับแขก</a></li> <li><a href="/tddf/newsroom/" title="ข่าวคนพิการ...สดทุกวัน (access key: 3)" accesskey="3">ห้องข่าว ม.พ.พ.ท.</a></li> <li><a href="/tddf/political/" title="ห้องการเมือง...เกาะติดการเมือง...เรื่องของคนพิการ (access key: r)" accesskey="r">ห้องการเมือง</a></li> … … … <li><a href="/tddf/map.php" title="แผนผังเว็บไซต์...มีทุกเรื่องที่คุณต้องการ ..... อ่านง่าย เข้าใจง่าย ค้นง่าย หลากหลายข้อมูล (access key: w)" accesskey="w">แผนผังเว็บไซต์</a></li> </ul> </div>

  6. Local Navigation (เมนูย่อย)

  7. Global Navigation (เมนูย่อย) <!-- เมนูย่อยของรายการหลัก --> <div id="localnav"> <dl> <!– ข้ามเมนูย่อย (skip navigation)--> <dt class="skipnav"><a href="#start">ข้ามเมนูย่อย</a></dt> <!-- เริ่มรายการเมนูย่อย --> <dt><a href="index.php" class="current">กระทู้หลักคิดของต่อพงษ์</a></dt> <dt>กระทู้ที่คนอ่านมากที่สุด <br/> 5 อันดับแรก ในเดือนนี้</dt> <dd><a href="readart.php?id=00228">ม.ราชภัฏร้อยเอ็ดจัดโครงการ "ธนาคารเสียงเพื่อผู้พิการทางสายตา" (อ่าน 196)</a></dd> <dd><a href="readart.php?id=00229">Plasma-Z …..พัฒนาหุ่นยนต์ช่วยคนพิการ (อ่าน 120)</a></dd> … … … </dl> </div>

  8. Breadcrumb (เราอยู่ที่ไหน)

  9. Breadcrumb (เราอยู่ที่ไหน) <!– เราอยู่ที่ไหน (breadcrumb)--> <div id=“breadcrumb"> <p> <a href="/">Home</a> / <a href=“/tutorials/">Tutorials</a> / <a href=“/tutorials/beginners/">HTML Beginner Tutorial</a> </p> </div>

  10. Internal Navigation (การท่องในหน้าเว็บเดียวกัน) <div> <ul> <li><a href=“#part1”>Go to Content 1</a></li> <li><a href=“#start”>Go to Heading 1</a></li> <li><a href=“#news1”> News headline 1</a></li> </ul> </div> <div id=“part1”>Content 1</div> <div id=“part2> <h1 id=“start”>Heading 1</h1> … … … <h2 id=“news1”>News headline 1</h2> </div> หมายเหตุ: อย่าใช้ <a name=“…”> เพราะเป็นวิธีที่ถูกยกเลิกแล้ว

  11. Skip Navigation (การข้ามเมนู) แนวคิด ต้องการข้ามส่วนของเมนูหลัก เมนูย่อย หรือเมนูอื่น ๆ เพื่อให้สามารถอ่านเนื้อหาได้ทันที

  12. Skip Navigation - ต่อ <a href=“#content”>Skip to Content</a> <div id=“content”>… … … </div>

  13. โครงสร้างระบบท่องเว็บโดยรวมโครงสร้างระบบท่องเว็บโดยรวม <!-- global navigation --> <div id=“globalnav”> <a href=“#content”>Skip to Content</a> LINK (MENU) </div> … … … <!-- content--> <div id=“content”> <h1>Start content</h1> … … … </div>

  14. โครงสร้างระบบท่องเว็บโดยรวมโครงสร้างระบบท่องเว็บโดยรวม <!-- global navigation --> <div id=“globalnav”> SKIP NAVIGATION LINK (MENU) </div> <!-- global navigation --> <div id=“localnav”> SKIP NAVIGATION LINK (MENU) </div> <!-- breadcrumb --> <div id=“breadcrumb”> LINK (MENU) </div>

  15. TABLE (ตาราง)

  16. รู้จักส่วนต่าง ๆ ของตาราง ส่วนหัว(<caption>, <tr>, <th>, <td>, <thead>, <col>, <colgroup>) ส่วนเนื้อหา (<tbody>, <tr>, <td>) ส่วนท้าย (<tfooter>, <tr>, <td>)

  17. ส่วนหัวของตาราง (Table Head) <table summary=“ตารางสรุปยอดการส่งออกผลิตภัณฑ์ของบริษัท ก. ไก่ ปี 2550”> <caption>ยอดการส่งออกผลิตภัณฑ์ปี 2550</caption> <thead> <tr> <th>ลำดับที่</th> <th>ชื่อผลิตภัณฑ์</th> </th>ยอดการส่งออก (บาท)</th> </tr> </thead> … … … </table>

  18. ส่วนเนื้อหาของตาราง (Table Body) <table summary=“ตารางสรุปยอดการส่งออกผลิตภัณฑ์ของบริษัท ก. ไก่ ปี 2550”> … … … <tbody> <tr> <td>1</td> <td>อาหารแปรรูป</td> <td>3,000,560</td> </tr> <tr> <td>2</td> <td>อาหารสัตว์</td> <td>2,480,450</td> </tr> </tbody> … … … </table>

  19. ส่วนท้ายของตาราง (Table Footer) <table summary=“ตารางสรุปยอดการส่งออกผลิตภัณฑ์ของบริษัท ก. ไก่ ปี 2550”> … … … <tfooter> <tr> <td>3</td> <td>ยอดรวม</td> <td>5,481,010</td> <tr> </tfooter> </table>

  20. ตารางแบบซับซ้อน (Complex Table) ยอดการส่งออกสินค้าปี 2550

  21. SERVER-SIDE SCRIPTING (ภาษาโปรแกรมมิ่งฝั่งเซิร์ฟเวอร์)

  22. ตัวอย่างการใช้ภาษา PHP <?php // ป้องกันไม่ให้ PHP ประมวลผลผิดพลาด echo “<?xml version=\"1.0\" encoding=\"tis-620\"?>”; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="th"> <head> … … … </head> <body> … … …

  23. ตัวอย่างการใช้ภาษา PHP - ต่อ <?php echo “<h1>”.$getrec->title.”</h1>\n”; echo “<ul>\n”; for($i=0; $i <= 5; $i++){ echo “<li>”.$i.”</li>\n”; } echo “</ul>”; ?>

  24. ตัวอย่างการใช้ภาษา PHP - ต่อ <div> <h1><?=$heading?></h1> <p> <?php $query = “SELECT * FROM mytable”; $result = $sql->query($query); while($getrec = $sql->fetObject($result)){ echo “ฉันมีเงิน ”.$getrec->price.” บาท<br />\n”; } ?> </p> </div>

  25. END

More Related