nssc · web viewmicrosoft excel microsoft word dreamweaver 8 ใบงานท 5.3 หน...
Post on 24-Oct-2020
4 Views
Preview:
TRANSCRIPT
การสร้างตาราง
การสร้างตารางสามารถทำได้ง่าย ๆ เพราะมีเครื่องมือ ช่วยสร้างตารางบนเว็บเพจของเราได้ตามต้องการ วิธีการสร้างตารางนั้น มีขั้นตอนในการสร้างอยู่ 3 วิธีคือ
วิธีที่ 1 เลือกเมนูคำสั่ง Insert > Tableวิธีที่ 2 เลือกเครื่องมือ (Table) ที่แท็บ Common หรือแท็บ Layout
วิธีที่ 3 กดคีย์ ที่คีย์บอร์ด
ทั้ง 3 วิธีนี้จะแสดงหน้าต่าง Table สำหรับใช้กำหนดรายละเอียดเกี่ยวกับตารางดังนี้
กลุ่มของ Table Size กำหนดรายละเอียดดังนี้
Rows
จำนวนแถวที่ต้องการ
Colums
จำนวนคอลัมภ์ที่ต้องการ
Table Width
ความกว้างของตาราง หน่วยที่ใช้จะเป็นเปอร์เซ็น หรือพิกเซล
Border Thickness
ความหนาของขอบตาราง
Cell padding
ระยะห่างระหว่างข้อความภายในเซลล์กับขอบเซลล์
Cell spacing
ระยะห่างระหว่างแต่ละเซลล์ในตาราง
กลุ่ม Header เลือกตำแหน่งของหัวเรื่องภายในตารางดังนี้
Header
กำหนดให้เราสามารถพิมพ์หัวข้อของข้อมูลภายในเซลล์ และจัดวางตรงส่วนไหนของตาราง โดยกำหนดได้ดังนี้
ไม่มีการกำหนดหัวข้อของข้อมูลในตาราง
กำหนดให้คอลัมภ์แรกเป็นหัวข้อของเซลล์
กำหนดให้แถวแรกเป็นหัวข้อของเซลล์
กำหนดให้ทั้งแถวและคอลัมภ์แรกเป็นหัวข้อของเซลล์
กลุ่ม Accessibility กำหนดข้อมูลทั่วไปในตาราง ดังนี้
Caption
กำหนดหัวข้อของตาราง
Align caption
จัดวางหัวข้อของตารางไว้ในตำแหน่งที่ต้องการโดยที่
default
ไม่มีการกำหนดค่า ให้ใช้ค่าปกติ นั่นคือจัดวางห้วข้อของตารางไว้ข้างบนและจัดวางตรงกลางของตาราง
top
จัดวางหัวข้อของตารางไว้ข้างบน และจัดตำแหน่งตรงกลางของตาราง
bottom
จัดวางหัวข้อของตารางไว้ด้านล่าง และจัดตำแหน่งตรงกลางของตาราง
left
จัดวางหัวข้อของตารางไว้ข้างบน และจัดตำแหน่งไว้ชิดซ้ายของตาราง
right
จัดวางหัวข้อของตารางไว้ข้างบน และจัดตำแหน่งไว้ชิดขวาของตาราง
Summary
เขียนคำอธิบายเกี่ยวกับตาราง แต่จะไม่แสดงให้เห็นบนหน้าเว็บ จะถูกฝังไว้ในโค้ด HTML เท่านั้น
เมื่อกำหนดค่าตามที่เราต้องการในหน้าต่าง Table แล้ว ให้เราคลิกปุ่ม เราก็จะได้ตารางตามที่กำหนดไว้ เช่น สร้างตารางแบบ 3 แถว 3 คอลัมน์ เมื่อคลิกปุ่ม OK จะได้ตารางลักษณะนี้
การปรับแต่งตาราง
เมื่อเราทำการออกแบบตารางเรียบร้อยแล้ว ขั้นต่อไปก็คือการ กรอกข้อมูลลงไปในตารางที่สร้างไว้ หากคลิกเม้าส์ที่ตารางแล้วแถบ Properties จะมีคุณสมบัติต่างๆดังนี้
Horz
คือ จัดตำแหน่งเคอร์เซอร์ด้านยาว
Vert
คือ จัดตำแหน่งเคอร์เซอร์ด้านกว้าง
W
คือ กำหนดขนาดด้านยาว
H
คือ กำหนดขนาดด้านกว้าง
Bg
คือ ภาพพื้นหลัง หรือ สีพื้นหลัง
Brdr
คือ สีเส้นขอบ
เมื่อคลิกเลือกตาราง
ที่ Properties Inspector ปรากฏคุณสมบัติของตารางขึ้นมา สามารถปรับเปลี่ยนได้ตามต้องการ
คำสั่งเกี่ยวกับการปรับแต่งตาราง
นอกจากการใช้ Property Inspector เราสามารถเรียกคำสั่งเกี่ยวกับการปรับแต่งตารางได้ โดยการคลิกที่เซลล์ แล้วเลือกคำสั่ง Modify>Table หรือจะคลิกเมาส์ปุ่มขวาตรงตาราง ที่ต้องการปรับแต่ง และเลือกคำสั่ง Table ในเมนูย่อยก็ได้
การแทรกแถวและคอลัมน์
ในส่วนนี้จะมีประโยชน์เมื่อเราได้สร้างตารางขึ้นมาแล้ว เราต้องการเพิ่มข้อมูลภายในตาราง ดังนั้นเราต้องการแทรกแถว และคอลัมภ์เพิ่มภายในตารางได้
การแทรกแถว
1. คลิกเมาส์วางเคอร์เซอร์ตรงตำแหน่ง ของเซลล์ที่ต้องการจะแทรกแถว2. คลิกเมาส์ปุ่มขวาในเซลที่ต้องการแทรก จะปรากฎเมนูย่อยให้เลือก Table>Insert Row หรือ เลือกคำสั่ง Modify>Table>Insert Row หรือกดคีย์ ก็ได้3. จะปรากฎแถวขึ้นมาหนึ่งแถว ซึ่งมีขนาดของเซลล์เท่ากับขนาดของแถวเดิม
การแทรกคอลัมภ์
1. คลิกเมาส์เพื่อวางเคอร์เซอร์ตรงตำแหน่งเซลที่ต้องการจะแทรกคอลัมน์ 2. คลิกเมาส์ปุ่มขวาจะปรากฎเมนูย่อย ให้เลือก Table>Insert Column หรือเลือกคำสั่ง Modify>Table>Insert Column หรือกดคีย์ ก็ได้3. จะปรากฎคอลัมน์ใหม่แทรกขึ้นมาตรงตำแหน่งที่เคอร์เซอร์วางอยู่
การลบแถวและคอลัมน์
การลบแถว
1. เลือกแถวที่ต้องการจะลบแล้วกดปุ่ม ที่คีย์บอร์ด หรือคลิกเมาส์ปุ่มขวา เลือกเซลล์ใดก็ได้ ในแถวที่ต้องการจะลบแล้วเลือก Table>Delete Row หรือเลือกคำสั่ง Modify>Table>Delete Row หรือกดคีย์ลัด
2. แถวที่เลือกไว้ก็จะหายไป
การลบคอลัมน์
1. เลือกคอลัมน์ที่ต้องการจะลบแล้วกดปุ่ม ที่คีย์บอร์ด หรือคลิกเมาส์ปุ่มขวา เลือกเซลล์ใดก็ได้ ในแถวที่ต้องการจะลบแล้วเลือก Table>Delete Column หรือเลือกคำสั่ง Modify>Table>Delete Column หรือกดคีย์ลัด
2. คอลัมน์ที่เลือกไว้ก็จะหายไป
กำหนดสีพื้นของตาราง
คลิกเลือกตาราง แล้วใส่สีพื้นหลังโดยคลิกที่ ใน Property Inspector แล้วเลือกสีที่ต้องการ
กำหนดสีเส้นขอบตาราง
การกำหนดรูปภาพให้เป็นพื้นหลังของตาราง
ให้คลิกเลือกตาราง แล้วคลิกเมาส์ปุ่ม ในช่อง Bg Image เลือกไฟล์ภาพที่ต้องการทำเป็นพื้นหลังของตาราง
การใส่ข้อมูลลงในตาราง
ตารางที่สร้างเสร็จแล้วสามารถใส่ข้อมูลลงไปได้ 2 ประเภทหลัก ๆ คือ ข้อมูลข้อความ และข้อมูลรูปภาพหรือวัตถุ
ข้อมูลข้อความ ข้อมูลข้อความ หมายรวมถึงตัวอักษร ตัวเลข อักษรพิเศษ หรือสัญลักษณ์ต่าง ๆ มีวิธีการใส่ในตาราง ดังนี้
1. คลิกที่เซลล์ที่จะใส่ข้อความ2. เคอร์เซอร์จะปรากฏอยู่ในช่องเซลล์นั้น พิมพ์ข้อความลงไปเหมือนโปรแกรมเวิร์ด3. ถ้าข้อความยาวมาก ๆ ให้กดแป้น < Enter >4. ถ้าต้องการพิมพ์ข้อมูลเพิ่มเติมในเซลล์ใด ก็คลิกที่เซลล์นั้น ๆ และพิมพ์ข้อมูลได้ทุกเซลล์
ข้อมูลรูปภาพ การใส่รูปภาพในเซลล์มีวิธีการเหมือนกับการใส่ภาพในเว็บเพจ ซึ่งมีขั้นตอนดังนี้
1. คลิกที่ช่องเซลล์ที่ต้องการจะใส่รูปภาพ2. คลิกที่เครื่องมือรูปภาพ หรือคำสั่ง Insert >> Image3. จะได้หน้าต่าง Select Image Source เลือกรูปภาพที่ต้องการแล้วคลิก OK
4. ภาพจะแทรกในเซลล์นั้นทันที5. ปรับขนาดของภาพให้เหมาะสมกับตาราง
ใบงานที่ 5.1หน่วยที่ 5 ปรับแต่งเว็บเพจด้วยตาราง
จุดประสงค์
1. อธิบายวิธีการแทรกและตกแต่งตารางลงในเว็บเพจได้ (K)
2. แทรกและตกแต่งตาราง ลงในเว็บเพจได้ (P)
3. มีความขยัน อดทน และมีเจตคติที่ดีต่อการแทรกตารางในเว็บเพจ
คำสั่ง ให้นักเรียนแทรกตารางลงในโปรแกรม Macromedia Dreamweaver 8 แล้วจัดตกแต่งให้สวยงาม โดยปฏิบัติดังต่อไปนี้
1. นักเรียนเข้าศึกษาบทเรียนหน่วยที่ 5 เรื่อง ปรับแต่งเว็บเพจด้วยตาราง
2. ให้นักเรียนสร้างตารางตามรูปแบบที่กำหนดให้ ดังรูป
เลขที่
ชื่อ-นามสกุล
เพศ
อายุ
ที่อยู่
กำหนดให้บันทึกข้อมูลของเพื่อนๆในห้องเรียน จำนวน 5 คน ตามรูปแบบตารางข้างต้น
ใบงานที่ 5.2หน่วยที่ 5 ปรับแต่งเว็บเพจด้วยตาราง
จุดประสงค์
1. อธิบายวิธีการแทรกและตกแต่งตารางลงในเว็บเพจได้ (K)
2. แทรกและตกแต่งตาราง ลงในเว็บเพจได้ (P)
3. มีความขยัน อดทน และมีเจตคติที่ดีต่อการแทรกตารางในเว็บเพจ
คำสั่งให้นักเรียนแทรกตารางลงในโปรแกรม Macromedia Dreamweaver 8 แล้วจัดตกแต่งให้สวยงาม โดยปฏิบัติดังต่อไปนี้
1. นักเรียนเข้าศึกษาบทเรียนหน่วยที่ 5 เรื่อง ปรับแต่งเว็บเพจด้วยตาราง
2. ให้นักเรียนสร้างตารางตามรูปแบบที่กำหนดให้ ดังรูป
รายการหนังสือ
Photoshop
Microsoft Excel
Microsoft Word
Dreamweaver 8
ใบงานที่ 5.3หน่วยที่ 5 ปรับแต่งเว็บเพจด้วยตาราง
จุดประสงค์
1. อธิบายวิธีการแทรกและตกแต่งตารางลงในเว็บเพจได้ (K)
2. แทรกและตกแต่งตาราง ลงในเว็บเพจได้ (P)
3. มีความขยัน อดทน และมีเจตคติที่ดีต่อการแทรกตารางในเว็บเพจ
คำสั่ง
1. นักเรียนเข้าศึกษาบทเรียนหน่วยที่ 5 เรื่อง ปรับแต่งเว็บเพจด้วยตาราง
2. ให้นักเรียนสร้างตารางตามรูปแบบที่กำหนดให้ ดังรูป
3. ใช้ตารางใส่รูปภาพที่มีการแบ่งรูปภาพที่มีขนาดใหญ่ เพื่อลดเวลาในการเรียกรูปนั้นให้เร็วยิ่งขึ้น โดยมีขั้นตอนการปฏิบัติ ดังนี้
· สร้างตาราง ขนาด 7 แถว 1 คอลัมภ์ และกำหนด border = 0
· นำรูปภาพที่ผ่านการแบ่งรูปภาพ จำนวน 7 รูป นำมาใส่ตาราง
· ปรับขนาดของช่องตารางให้รูปชิดกันมากที่สุด ดังรูป
top related