บทท 9 จ ดหน าเว บเพจด วยตาราง (Table) - PDF

Description
บทท 9 จ ดหน าเว บเพจด วยตาราง (Table) ตาราง (Table)เป นส งท ท กคนร จ กก นด ซ งส วนใหญ จะใช เพ อนาเสนอข อม ลท เป นรายช อ หร อรายการของส งต างๆแต บนเว บเพจตารางย งม ประโยชน สาค ญอ กอย าง ค อใช สาหร บจ ดวางเลย

Please download to get full document.

View again

of 17
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Marketing

Publish on:

Views: 45 | Pages: 17

Extension: PDF | Download: 0

Share
Transcript
บทท 9 จ ดหน าเว บเพจด วยตาราง (Table) ตาราง (Table)เป นส งท ท กคนร จ กก นด ซ งส วนใหญ จะใช เพ อนาเสนอข อม ลท เป นรายช อ หร อรายการของส งต างๆแต บนเว บเพจตารางย งม ประโยชน สาค ญอ กอย าง ค อใช สาหร บจ ดวางเลย เอาท ของหน าเอกสาร เพ อช วยในการแสดงข อม ลหร อองค ประกอบต างๆได ตรงตามตาแหน งท ต องการ ไม ว าจะเป นข อความ ภาพกราฟ ก ป มเมน แบบฟอร ม ม ลต ม เด ย รวมท งออบเจ คอ นๆ แม ว าป จจ ป นจะม เทคน คใหม ท สามารถใช จ ดเลย เอาท ของเว บเพจได สะดวกข น แต ตารางก ย งเป น เคร องม อยอดน ยม และสามารถแสดงผลบนบราวเซอร ต างๆได อย างถ กต องมากกว า ม มมองส าหร บการจ ดหน าเว บเพจด วยตาราง ใน Dreamweaver ค ณสามารถเล อกม มมองท ใช จ ดเลย เอาท ของเว บเพจได 2 แบบ ค อ ม มมองปกต และม มมองขยาย ว ธ สล บการทางานระหว างม มมองเหล าน ทาได โดยเล อกคาส ง view table mode เล อก ม มมอง หร อคล กป ม standard หร อป ม expanded บนแท บlayout ของพาเนลinsert ด งร ป เป ดม มมองเลย เอาท เป ดม มมองขยาย เป ดม มมองปกต เป ดม มมองขยาย เป ดม มมองปกต ร ปท ม มมองสาหร บการจ ดหน าเว บเพจด วยตาราง ม มมอง Standard ค อม มมองปกต ท ค ณพบเม อเร มใช โปรแกรมคร งแรก ม มมองน เหมาะสาหร บการสร างและ แก ไขเว บเพจโดยท วไป และจะแสดงผลได ใกล เค ยงก บบราวเซอร มากกว าม มมองอ นๆ ม มมอง Expanded เป นม มมองท ช วยให ค ณเห นโครงสร างและขอบเขตของตารางท งหมด โดยในม มมองน ตารางจะถ กแสดงแบบม เส นขอบและระยะระหว างเซลเสมอ ซ งจะทาให ปร บแต งตารางและแก ไข ข อม ลได ง ายข น สร างตาราง ร จ กก บโครงสร างของตาราง โครงสร างของตารางประกอบด วย คอล มน (column)ท อย ในแนวต ง และแถว (row) ใน แนวนอน โดยม จ ดต ดท เก ดจากแถวและคอล มน เร ยกว า เซล (cell)ตารางท ง ายท ส ดจะประกอบด วย 1 แถว 1 คอล มน และม เซลเพ ยงเซลเด ยว ข นตอนการสร างตาราง 1.คล กตรงตาแหน ง ท จะสร างตาราง 2.คล กป ม Table 3.กาหนดค ณสมบ ต ต าง 4.คล ก ร ปท แสดงข นตอนการสร างตาราง ค ณสมบ ต ของตาราง Tablee size เป นส วนท ใช กาหนดขนาด จานวนแถว/คอล มน และอ นๆ Rows/Clumnsจานวนแถว/จานวนคอล มน และอ นๆ Table width ความกว างท งหมดของตาราง โดยระบ ค าแล วเล อกหน วยเป นพ กเซล (pixels)หร อเปอร เซ นต (percent) Border thickness ความหนาของเส นขอบตาราง หน วยเป นพ กเซล Call padding ระยะห างระหว างเซลก บเน อหาภายในเซล Call spacing ระยะห างระหว างเซลแต ละเซล Haederกาหนดให คอล มน แรกหร อแถวแรกเป นห วเร องของตาราง None ไม กาหนด Accessibility กาหนดออปช นสาหร บเสร มการใช งานของตาราง Caption ข อความออปช นสาหร บเสร มการใช งานของตาราง Summary คาอธ บายตาราง ส วนประกอบของตาราง จากร ปจะเห นว า นอกจากต วตารางซ งม ค ณสมบ ต ตามท ค ณกาหนดแล ว Dreamweaver ย ง แสดงส วนประกอบอ นๆ สาหร บช วยในการปร บแต งและจ ดการตารางด วย เช น ต วเลขท บอกความ กว างของตารางและเซล และเมน คาส ง ซ งส วนประกอบเหล าน จะปรากฏเม อค ณคล กวางเคอร เซอร บนตาราง หร อเล อกออบเจ คช นใดช นหน งอย ในตาราง แต จะไม ปรากฏบนเว บเพจ ใส เน อหาในตาราง ภายในตารางค ณสามารถวางองค ประกอบต างๆของเว บเพจลงไปได เก อบท กชน ด ไม ว าจะ เป นข อความ, ภาพกราฟ ก, ม ลต ม เด ย, ฟอร ม หร อแม แต จะสร างตารางย อยซ อนไว ภายในเซลของ ตารางหล กเป นช นๆก ได ส าหร บว ธ ใส เน อหาเหล าน ก จะเหม อนก บการใส เน อหาลงบนเว บเพจ ตามปกต ด งน 1. คล กวางเคอร เซอร ในเซลท ต องการใส เน อหา 2. ใช คาส งเพ อใส เน อหาชน ดต างๆตามต องการ เล อกส วนต างๆของตาราง เม อจะจ ดการใดๆก บตาราง ส งแรกท ค ณต องทาค อการเล อกส วนของตารางท ต องการ จากน นจ งค อยเล อกคาส งของโปรแกรม เล อกท งตารางทาได หลายว ธ ตามความถน ดหร อความเหมาะสม ช เมาส ท ม ม หร อท ตาแหน งเหน อหร อได ตารางเล กน อย แล วคล กหร อช ท ขอบเซล คล กขวาบนตาราง แล วเล อกคาส ง Table Select Table คล กเซลในตาราง จากน นคล กเมน ห วตาราง แล วเล อกคาส ง Select Table เล อกแถว เล อกแถวเด ยว ช เมาส ท ขอบซ ายของแถว (เมาส เป นร ป ) แล วคล ก เล อกหลายแถว ช เมาส ท ขอบซ ายของแถวแรก (เมาส เป นร ป ) แล วคล กลากไปตาม แถวอ นๆ เล อกคอล มน เล อกคอล มน เด ยว คล กเซลในตาราง จากน นคล กเมน ห วคอล มน แล วเล อก Select Column เล อกคอล มน เด ยว (อ กว ธ ) ช เมาส ท ขอบบนของคอล มน (เมาส เป นร ป ) แล วคล ก เล อกหลายคอล มน ช เมาส ท ขอบบนของคอล มน แรก (เมาส เป นร ป ) แล วคล กลากไป ตามคอล มน อ นๆ เล อกเซล เล อกเซลเด ยว คล กวางเคอร เซอร ในเซลน น (หร อกดค ย Ctrl ค างไว แล วคล กบนเซลน น) เล อกหลายเซลท ต อเน องก น ช เมาส ท เซลแรก (เมาส เป นร ป ) จากน นคล กครอบคล มท ก เซลท ต องการ เล อกหลายเซลท ต อเน องก น (อ กว ธ ) คล กบนเซลแรก จากน นกดค ย Shift ค างไว แล วคล ก บนเซลส ดท าย เล อกหลายเซลท ไม ต อเน องก น กดค ย Ctrl ค างๆไว แล วคล กบนเซลแต ละเซล เล อกส วนประกอบของตารางด วย Tag Selector ถ าหากการเล อกด วยว ธ การต างๆข างต นไม สะดวกหร อไม สามารถทาได เช น เม อม ตาราง หลายตารางซ อนก นอย ค ณสามารถเล อกด วย Tag Selector ด งน แท ก HTML ของตาราง การเล อกส วนของตารางด วย Tag Selector สามารถใช ได ก บท กๆกรณ ไม ว าตารางจะม ความซ บซ อนเพ ยงใด แต การท จะใช ว ธ น ได อย างม ประส ทธ ภาพ ค ณจะต องพ จารณาลาด บของแท ก ให ด และควรม ความร พ นฐานเก ยวก บภาษา HTML บ างเล กน อย ต วอย างการพ จารณาแท กคาส ง ช ดคาส ง HTML ของตารางท ประกอบด วย 3 แถว และ 2 คอล มน โดยแถวบนส ดเป นห ว เร องของตาราง จะส งเกตว าแท กของตารางจะซ อนก นอย เป นช นๆในล กษณะ ตาราง แถว เซล ด งน นลาด บแท กท ปรากฏบน Tag Selector จ งเป น body table td ( body ค อแท กของส วนท เป นเน อหาเว บเพจท งหมด) ถ าหากม ตารางซ อนก นอย 2 ช น ตารางช นในจะอย ภายในเซลใดเซลหน ง (แท ก td ) ของตารางช นนอก ในล กษณะ ตาราง แถว เซล ตาราง แถว เซล ด งน นลาด บแท บบน Tag Selector จ งเป น body table td body table td การเล อกตาราง, แถว หร อเซล ทาได โดยคล กท แท ก table , tr หร อ td ซ งถ าม ตาราง ซ อนก นหลายช นก จะต องคล กให ถ กต ว โดยช นท อย ด านในน นแท กจะอย ทางขวาบน Tag Selector ค ณสมบ ต ของตารางบนพาเนลProperties เน องค ณเล อกตารางท งตาราง (แท ก table ) บนพาเนลProperties จะแสดค ณสมบ ต เฉพาะ ของตารางน นข นมาเพ อให ค ณปร บแต งได ด งร ป ระยะห างระหว างขอบเซลก บเน อหา ช อตาราง จานวนคอล มน จานวนแถว ความกว าง ระยะห างระหว างขอบเซลก บเน อหา ระยะห างระหว างเซลแต ละเซล เคร องม อปร บ ความกว าง เส นขอบตาราง เล อก จ ดร ปแบบ ด วย CSS เส นขอบตาราง ตาแหน งของ เคร องม อปร บความกว าง/ความส ง ตารางในหน าเว บ ร ปท ค ณสมบ ต ของตารางบนพาเนลProperties Table ช อตาราง Rows/Cols จานวนแถว/จานวนคอล มน (เปล ยนค าเพ อเพ ม-ลดแถวหร อคอล มน ได ) W ความกว างของตาราง ม หน วยเป นเปอร เซ นต (%) หร อพ กเซล (pixels) CellPadระยะห างระหว างขอบเซลก บเน อหาภายในเซล (cell padding) CellSpaceระยะห างระหว างเซลแต ละเซล (cell spacing) Align การจ ดตาแหน งตารางให ช ดซ าย ช ดขวา หร อก งกลางหน าเว บเพจ Border ความหนาของเส นขอบตาราง หน วยเป นพ กเซล (ตามปกต ค ณไม สามารถกาหนด ความหนาของเส นขอบเซล แต เม อค าน เป น 0 ตารางจะไม แสดงท งเส นขอบตารางและเส นขอบเซล) Class เล อกร ปแบบตารางด วย CSS ท กาหนดร ปแบบไว Clear Column Widths คล กเพ อยกเล กค าความกว างของตาราง และค าความกว างของท ก คอล มน (ผลก ค อจะทาให ท กคอล มน ม ความกว างพอด ก บเน อหา) Clear Row Heightsคล กเพ อยกเล กค าความส งของตาราง และค าความส งของท กแถว (ทา ให ท กแถวม ความส งพอด ก บเน อหา) Convert Table Widths to Pixels เปล ยนหน วยของความกว างเป นพ กเซล Convert Table Widths to Percent เปล ยนหน วยของความกว างเป นเปอร เซ นต ปร บความกว างและความส งของตาราง ปร บด วยว ธ คล กลาก เม อเล อกตารางแล วค ณจะสามารถปร บขนาดตารางได โดยคล กลากท จ ดแฮนเต ล หน วยของขนาดตาราง ในการกาหนดความกว างของตาราง ค ณสามารถระบ หน วยว ดได 2 แบบ ค อ แบบเปอร เซ นต (%) เป นการกาหนดโดยเท ยบก บองค ประกอบอ นท ตารางถ กบรรจ อย เช น สาหร บตารางช นนอกส ด จะค ดเท ยบก บขนาดว นโดว ของบราวเซอร ท ผ ใช เป ดอย ในขณะท ชมเว บเพจ เช น 100 % ค อเต มว นโดว พอด (ไม รวมระยะ margin ของเว บเพจ) สาหร บตารางท อย ภายในเซลของตารางอ น จะค ดเท ยบก บขนาดของเซลน น แบบพ กเซล (picels)เป นการกาหนดขนาดแบบแน นอนตามจานวนพ กเซลท ระบ เช น 300 pixleตารางก จะม ความกว าง 300 พ กเซล นอกจากน ขนาดตารางย งข นก บเน อหาภายในด วย เน องจากตารางจะเล กกว าเน อหาท บรรท ดจะไม ได ด งน นต วเลขท ระบ น จ งเป น ขนาดเล ท ส ดท เป นไปได เพราะถ าค ณใส ออบเจ ค ใหญ ๆ เช น ร ปภาพ (ข อความไม ค อยม ป ญหา เพราะถ กต ดคาได ) ตารางจะถ กขยายให พอบรรจ ภาพ น นและถ าไม ระบ ขนาดตาราง ความกว างและส งก จะเท าก บเน อหาท บรรจ อย พอด ว ธ จ ดตาแหน งตาราง เร มแรกตารางท ค ณสร างจะไม ระบ ว ธ จ ดตาแหน ง (ค าเป น Default) ซ งบราวเซอร ส วนใหญ จะจ ดช ดด านซ ายของเว บเพจแต หากค ณต องการจ ดตารางให อย ก งกลางหร อช ดด านขวาของเว บเพจ ก ทาได โดย 1.เล อกตาราง 2.คล กเล อกตาแหน งตาราง ร ปท ว ธ จ ดตาแหน งตาราง ใส เส นของตาราง ทาได โดยกาหนดความหนาของเส นขอบตาราง ซ งม หน วยเป นพ กเซล (ถ าจะไม ให ม เส น ขอบก ใส ค า 0) ส าหร บส ของเส น ถ าค ณไม กาหนดก จะเป นไปตามค าด ฟอลด ของบราวเซอร ซ ง ม กจะแสดงเป นส เท าหร อดา ใส ส พ นตาราง ตารางท ค ณสร างใหม จะม พ นโปร งใส ทาให มองผ านไปเห นส พ นหร อภาพพ นหล งของเว บ เพจต องการค ณก สามารถกาหนดส พ นตารางได ด งน 1.เล อกตาราง 2.เล อก Modify Edit Tag 3.คล กเล อกส พ น 4.คล ก ร ปท ใส เส นของตาราง ใส ภาพฉากหล งตาราง 1.เล อกตาราง 2.เล อก Modify Edit Tag 3.คล กเล อกไฟล ภาพ ร ปท ใส ภาพฉากหล งตาราง 4.คล ก ใส ส เส นขอบตาราง 1.เล อกตาราง 2.เล อก Modify Edit Tag 3.คล กเล อกส เส นขอบ 4.คล ก ร ปท ใส ส เส นขอบต
Related Search
Similar documents
View more...
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks