แผนกวิชาช างอิเล็กทรอน ิกส ใบเนื้อหา หน าที่ 1 วิทยาลัยเท ... · (Multivibrator Circuit)
07 ใบเนื้อหา หน่วยที่ 6
-
Upload
natchanon-srinuan -
Category
Documents
-
view
193 -
download
3
Transcript of 07 ใบเนื้อหา หน่วยที่ 6
![Page 1: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/1.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท :
หนวยท 6 การสรางตารางบนเวบเพจ
สาระการเรยนร 6.1 การสรางตารางบนเวบเพจ 6.2 การใสขอมลลงในตาราง 6.3 การจดการกบแถว คอลมน และเซลล 6.4 การตกแตงตาราง 6.5 การน าเขาตารางจากโปรแกรมอน
วตถประสงคเชงพฤตกรรม 6.1 อธบายการสรางตารางบนเวบเพจได 6.2 อธบายการใสขอมลในตารางได 6.3 อธบายการปรบแปรงจ านวนแถว คอลมน และเซลลได 6.4 อธบายการตกแตงตารางได 6.5 อธบายการน าเขาตารางจากโปรแกรมอนได
![Page 2: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/2.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : วธการสรางตารางบนเวบเพจ มขนตอน ดงน 1. คลกต าแหนงทตองการสรางตาราง เลอกเมน Insert > Table
จะปรากฏหนาตาง Table ดงรป
ก าหนดคาตางๆตามความตองการ เสรจแลวคลก OK จะไดตารางดงน
6.1 การสรางตารางบนเวบเพจ
จ านวนแถว
ความกวางของตาราง
ความหนาของเสนตาราง
ระยะหางระหวางขอความกบขอบเซลล ระยะหางระหวางแตละเซลลในตาราง
ก าหนดหวขอตาราง ค าอธบายตารางโดยสรป
จ านวนคอลมน
การก าหนดหวขอหลกของตาราง
![Page 3: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/3.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท :
6.2.1 การใสขอความในตาราง มวธการใสขอความในตาราง ดงน 1. คลกทเซลลทจะท าการใสขอความ 2. เคอรเซอรจะปรากฏอยในชองเซลลนน พมพขอความลงในไปในตาราง 3. ถาตองการพมพขอมลลงเซลลใดใหน าเมาสไปคลกทเซลลนนๆ
6.2.2 การใสรปภาพในตาราง มวธการใสรปภาพในตาราง ดงน 1. คลกทเซลลทตองการจะใสรปภาพ
6.2 การใสขอมลในตาราง
![Page 4: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/4.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : จากนนจะปรากฏหนาตาง Select Image Source เลอกรปแบบทตองการแลวคลก OK
ภาพแทรกในเซลล ท าการปรบขนาดของภาพใหเหมาะสมกบตาราง
![Page 5: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/5.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท :
6.3.1 การแทรกแถว 1. คลกบรเวณแถวทตองการแทรกตาราง แลวคลกค าสง Modifly > Table > Insert Row
จะมแถวเพมขนมา 1 แถว
6.3 การจดการกบแถว คอลมน และเซลล
![Page 6: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/6.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : 6.3.2 การแทรกคอลมน 1. คลกบรเวณคอลมนทตองการแทรก แลวคลกค าสง Modifly > Table > Insert Column
จะมคอลมนเพมขนมา 1 คอลมน
![Page 7: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/7.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : 6.3.3 การแทรกหลายแถวหลายคอลมน 1. คลกบรเวณแถวหรอคอลมนทตองการแทรก แลวคลกค าสง Modifly > Table > Insert Row or Column
จะปรากฏหนาตาง Insert Rows or Columns ระบจ านวนแถวและคอลมนทตองการ แลวคลกปม OK
เลอกแถวหรอคอลมน
ระบจ านวนแถว หรอคอลมน
![Page 8: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/8.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : 6.3.4 การลบแถวและคอลมน 1. คลกบรเวณแถวหรอคอลมนทตองการจะลบ จากนนคลกขวา เลอกค าสง Table > Delete Row หรอ Delete Colomn
6.3.5 การรวมเซล 1. คลกบรเวณเซลลทตองการจะรวมโดยการท าแถบด าทบรเวณทตองการรวม คลกขวาเลอกค าสง Table > Merge Cells
เซลลจะถกรวมเขาดวยกนทนท
![Page 9: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/9.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : 6.3.6 การแบงเซล 1. คลกบรเวณเซลลทตองการจะแบงโดยการท าแถบด าทบรเวณทตองการแบงเซลล คลกขวาเลอกค าสง Table > Split Cell
จะปรากฏหนาตาง Split Cell ระบจ านวนแถวและคอลมนทตองการ แลวคลกปม OK
6.4.1 การใสสพนตาราง 1. คลกเลอกบรเวณตารางทตองการใสสพนหลงและเสนขอบ 2. คลกเลอกส BG จะแสดงถาดส ดงภาพ
6.4 การตกแตงตาราง
ระบจ านวนคอลมน
คลกเลอกส
![Page 10: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/10.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : จะปรากฏสบนตาราง ดงภาพ
6.4.2 การใสภาพพนหลงในตาราง 1. คลกเลอกบรเวณตารางทตองการใสภาพพนหลง ไปท Properties คลก CSS เลอก Targeted Rule และเลอกค าสง <New Inline Style>
2. คลก Edit Rule จะปรากฏหนาตาง CSS Rule definition for <Inline style>
![Page 11: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/11.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : 3. คลกเลอก Background แลวเลอกปม Browse แลวท าการเลอกภาพทตองการ คลกปม OK ภาพจะถกน าไปสราง เปนพนหลง ดงภาพ
1. คลกเลอกต าแหนงทจะน าไฟลจากโปรแกรมอนเขามา 2. คลกเลอกค าสง Insert > Table Object > Import Tabular Data โดยไฟลทจะน าเขามาตองถกบนทกดวยนามสกล .txt
6.5 การน าเขาตารางจากโปรแกรมอน
![Page 12: 07 ใบเนื้อหา หน่วยที่ 6](https://reader034.fdocument.pub/reader034/viewer/2022052311/5584204cd8b42aa81e8b4920/html5/thumbnails/12.jpg)
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 6 การสรางตารางบนเวบเพจ
ใบเนอหา หนาท
แผนท : 3. จะปรากฏหนาตาง Import Tabular Data คลกเลอกไฟลทปม Browse ก าหนดรายละเอยดแลวคลกปม OK
ขอมลจะถกแทรกเขามา ดงภาพ