ใบงานเรื่องการสร้างตารางในหน้าเว็บเพจ

ให้นักเรียนปฏิบัติดังนี้

ใบงาน

เรื่อง การสร้างตารางบนเว็บเพจ

ให้นักเรียนสร้างเว็บเพจด้วยโปรแกรม Dreamweaver MX ในหัวข้อเรื่อง “ดาราในดวงใจ” โดยมีองค์ประกอบดังต่อไปนี้

“ ดาราในดวงใจ ”

ชื่อจริง

ชื่อเล่น

วัน/เดือน/ปี เกิด

รูปภาพ

น.ส.พัชราภา ไชยเชื้อ

อั้ม

5 ธ.ค. 2521

น.ส.อารยา เอฮาร์เก็ต

ชมพู่

28 มิ.ย. 2524

น.ส.กาญจน์เกล้า ด้วยเศียรเกล้า

เกรซ

10 ธ.ค. 2531

น.ส.ธันย์ชนก ฤทธินาคา

เบเบ้

21 ธ.ค. 2530

นายนวพล ภูวดล

อู๋

4 ต.ค. 2525

2. บันทึกเว็บเพจลงในโฟลเดอร์ของนักเรียนเอง ตั้งชื่อว่า “Table1.html”

ใบงาน

เรื่อง จัดข้อมูลให้สวยด้วยตาราง

ให้นักเรียนเลือกหัวข้อมา 1 หัวข้อ เพื่อสร้างเว็บเพจด้วยโปรแกรม Dreamweaver  โดยนำตารางเข้ามาช่วยในการจัดรูปแบบ ดังตัวอย่างต่อไปนี้

  1. เรื่อง  ปรัชญาเศรษฐกิจพอเพียง
  2. บันทึกเว็บเพจลงในโฟลเดอร์ของนักเรียนเอง ตั้งชื่อว่า “Table2.html”

ปรัชญาเศรษฐกิจพอเพียง

“เศรษฐกิจพอเพียง”   คืออะไรเป็นปรัชญาที่พระบาทสมเด็จพระเจ้าอยู่หัวฯ ทรงมีพระราชดำรัสชี้แนะแนวทางการดำเนินชีวิตแก่พสกนิกรชาวไทย มาโดยตลอดนานกว่า ๒๕ ปี  ตั้งแต่ก่อนเกิดวิกฤติการณ์ทางเศรษฐกิจ และเมื่อภายหลังได้ทรงเน้นย้ำแนวทางการแก้ไข เพื่อให้รอดพ้นและสามารถดำรงอยู่ได้อย่างมั่นคง และยั่งยืนภายใต้กระแสโลกาภิวัตน์ และความเปลี่ยนแปลงต่างๆ                             (ใส่รูปภาพ)
(ใส่รูปภาพ)

ปรัชญาของเศรษฐกิจพอเพียง

เศรษฐกิจพอเพียง  เป็นปรัชญาชี้ถึงการดำรงอยู่และปฏิบัติตนของประชาชนในทุกระดับ ตั้งแต่ระดับครอบครัวระดับชุมชน จนถึงระดับรัฐ ทั้งในการพัฒนาและบริหารประเทศให้ดำเนินไปในทางสายกลางโดยเฉพาะการพัฒนาเศรษฐกิจเพื่อให้ก้าวทันต่อโลก

หลักแนวคิดของเศรษฐกิจพอเพียง

การพัฒนาตามหลักเศรษฐกิจพอเพียง คือ การพัฒนาที่ตั้งอยู่บนพื้นฐานของทางสายกลาง และความไม่ประมาท โดยคำนึงถึงความพอประมาณ ความมีเหตุผล การสร้างภูมิคุ้มกันที่ดีในตัว ตลอดจนใช้ความรู้ความรอบคอบและคุณธรรม ประกอบการวางแผน การตัดสินใจและการ

(ใส่รูปภาพ)

 

 (ใส่รูปภาพ)


ปรัชญาของเศรษฐกิจพอเพียง

ตัวอย่างเว็บเพจ

การสร้างตารางในหน้าเว็บเำำพจ

ให้นักเรียนชั้น ม.3/14 ศึกษาความรู้เรื่อง การสร้างตารางในหน้าเว็บเพจ

1. วิธีสร้างตารางบนเว็บเพจ
การสร้างตารางบนเว็บเพจ  มีขั้นตอน  ดังนี้

  1. เปิดเอกสารที่ต้องการจะสร้างตาราง
  2. เลือกเมนู  Insert >> Table
  3. หรือเลือกเครื่องมือ    (Table)  ที่กลุ่มเครื่องมือ  Common

หรือกลุ่มเครื่องมือ  Layout

              4.  หรือใช้แป้นพิมพ์  < Ctrl > + < T >  จะได้หน้าต่าง  Table  ดังรูป

               5.   เลือกลักษณะของตาราง  ดังนี้

กลุ่มของ  Table Size  กำหนดรายละเอียดดังนี้
Rows                                      จำนวนแถว (แกนนอน)
Columns                               จำนวนคอลัมน์  (แกนตั้ง)
Table Width                        ความกว้างของตารางทั้งหมด  และหน่วยวัดที่ใช้
Border Thickness               ขนาดเส้นกรอบตาราง (มีหน่วยเป็นพิกเซล)
Cell Padding                        ระยะห่างระหว่างขอบเซลกับเนื้อหาภายในเซล
Cell Spacing                        ระยะห่างระหว่างเซลแต่ละเซล

กลุ่ม  Header  เลือกตำแหน่งของหัวเรื่องภายในตารางดังนี้
None                                      ไม่ใช้หัวเรื่องตาราง
Left                                        กำหนดให้มีหัวเรื่องทางด้านซ้าย
Top                                        กำหนดให้มีหัวเรื่องทางด้านบน
Both                                       กำหนดให้มีหัวเรื่องทั้งด้านซ้ายและด้านบน

กลุ่ม  Accessibility  กำหนดข้อมูลทั่วไปในตาราง  ดังนี้
Caption                                 คำอธิบายกำกับตาราง
Align caption                      ตำแหน่งของข้อความ  caption
Summary                              ข้อความสรุปของตาราง

              6.   กำหนดค่าต่าง ๆ ตามที่ต้องการ  เช่น  สร้างตารางแบบ 3 แถว  4  คอลัมน์  เมื่อคลิกปุ่ม  OK  จะได้ตารางลักษณะนี้

2.  การใส่ข้อมูลในตาราง
ตารางที่สร้างเสร็จแล้วสามารถใส่ข้อมูลลงไปได้ 2 ประเภทหลัก ๆ  คือ  ข้อมูลข้อความและข้อมูลรูปภาพหรือวัตถุ

ข้อมูลข้อความ
ข้อมูลข้อความ  หมายรวมถึงตัวอักษา ตัวเลข  อักษรพิเศษ  หรือสัญลักษณ์ต่าง ๆ  มีวิธีการใส่ในตาราง  ดังนี้

  1. คลิกที่เซลล์ที่จะใส่ข้อความ
  2. เคอร์เซอร์จะปรากฏอยู่ในช่องเซลล์นั้น  พิมพ์ข้อความลงไปเหมือนโปรแกรมเวิร์ด
  3. ถ้าข้อความยาวมาก ๆ  ให้กดแป้น  < Enter >
  4. ถ้าต้องการพิมพ์ข้อมูลเพิ่มเติมในเซลล์ใด ก็คลิกที่เซลล์นั้น ๆ  และพิมพ์ข้อมูลได้ทุกเซลล์

ข้อมูลรูปภาพ
การใส่รูปภาพในเซลล์มีวิธีการเหมือนกับการใส่ภาพในเว็บเพจ ซึ่งมีขั้นตอนดังนี้

  1. คลิกที่ช่องเซลล์ที่ต้องการจะใส่รูปภาพ
  2. คลิกที่เครื่องมือรูปภาพ  หรือคำสั่ง  Insert >> Image
  3. จะได้หน้าต่าง  Select Image Source  เลือกรูปภาพที่ต้องการแล้วคลิก  OK
  4. ภาพจะแทรกในเซลล์นั้นทันที
  5. ปรับขนาดของภาพให้เหมาะสมกับตาราง

3.  การปรับขนาดของตาราง
ถ้าตารางหรือเซลล์มีขนาดใหญ่หรือเล็กเกินไปจนทำให้ข้อความ  หรือรูปภาพไม่ได้สัดส่วนตามที่ต้องการ  ควรปรับขนาดของตารางให้เหมาะสม  ดังนี้

  1. ปรับขนาดแถว  เลื่อนเมาส์มาตรงเส้นแนวนอน  เมาส์จะเปลี่ยนรูปเป็นรูป   คลิกเมาส์ค้างไว้แล้วลากย่อหรือขยายแถว

               2.  ปรับขนาดคอลัมน์  เลื่อนเมาส์มาตรงเส้นแนวนอน  เมาส์จะเปลี่ยนเป็นรูป   คลิกค้างไว้แล้วลากย่อหรือขยายคอลัมน์

               3.  การขยายทั้งตารางให้เลื่อนเมาส์มาที่ปุ่มจับด้านขวามือล่างสุดของตาราง  เมาส์จะเปลี่ยนเป็นรูปลูกศรสองหัวเฉียง ๆ คลิกและลากเพื่อย่อหรือขยายตารางทั้งหมด

4.  การปรับแต่งรายละเอียดของตาราง
การปรับแต่งรายละเอียดหรือคุณสมบัติของตราง  เพื่อให้เหมาะสมกับการใช้งานนั้นทำได้โดยใช้  Properties Inspector

การปรับตารางด้วย  Properties Inspector
เมื่อคลิกเลือกตารางที่  Properties Inspector  ขึ้นมาจะปรากฏคุณสมบัติของตารางขึ้นมา  สามารถปรับเปลี่ยนได้ตามต้องการ

การปรับตารางด้วยเมนูคำสั่ง
การใช้เมนูคำสั่งในการปรับตาราง  มีวิธีการทำ  ดังนี้

  1. คลิกที่เมนู  Modify  แล้วเลือกคำสั่งย่อย Table
  2. หรือคลิกขวาที่ตาราง  จะได้เมนูลัด  เลือกคำสั่งย่อย Table

5.  การจัดเรียงข้อมูลในตาราง
ข้อมูลในตารางโดยเฉพาะข้อมูลตัวอักษรที่พิมพ์เข้าไป  ในครั้งแรกอาจจะพิมพ์ลงไปในค่าเซลล์โดยไม่ได้เรียงลำดับ  แต่ถ้าต้องการเรียงลำดับข้อมูล  เช่น  เรียงลำดับตัวอักษร  เรียงค่าจากน้อยไปมาก  หรือจากมากไปน้อย  ก็สามารถทำได้  ดังนี้

  1. คลิกเลือกตารางที่ต้องการจัดเรียงข้อความ
  2. เลือกคำสั่ง  Commands >> Sort Table …

               3.  จะได้หน้าต่าง  Sort Table  เพื่อกำหนดรายละเอียด  ดังนี้

Sort by                  เรียงลำดับโดย  ให้เลือกคอลัมน์แรกที่จะนำมาเรียงลำดับ
Order                     ลักษณะการเรียง  เช่น  เรียงตามตัวอักษร จากน้อยไปหามาก
Then by                                แล้วเรียงลำดับตาม  เลือกคอลัมน์ที่จะนำมาเรียงลำดับอื่น ๆ
Options                 ตัวเลือกเพิ่มเติมการเรียง

                4.  เลือกรูปแบบการเรียงตามที่ต้องการ  เช่น  เรียงจากน้อยไปหามาก  ตามลำดับตัวอักษร

6. การจัดการกับแถว  คอลัมน์  และเซลล์

การแทรกแถว

  1. คลิกขวาที่ตแหน่งที่ต้องการจะแทรกแถว
  2. จะได้เมนูลัด  เลือกคำสั่ง  Table  >>  Insert Row
  3. จะมีแถวเพิ่มมาให้ 1 แถว

การแทรกคอลัมน์

  1. คลิกขวาที่ตำแหน่งที่ต้องการจะแทรกคอลัมน์
  2. จะได้เมนูลัด  เลือกคำสั่ง  Table >>  Insert Column

การแทรกหลายแถวและคอลัมน์
ถ้าต้องการแทรกแถวและคอมลัมน์จำนวนมากในคราวเดียวกัน  มีวิธีการทำ  ดังนี้

  1. คลิกขวาที่ตำแหน่งที่ต้องการแทรกแถวหรือคอลัมน์
  2. เ ลือกคำสั่ง  Table >>  Insert Rows or Columns
  3. จะได้หน้าต่าง   Insert Rows or Columns

               4.  ระบุจำนวนแถวหรือคอลัมน์ที่ต้องการ  แล้วคลิกปุ่ม  OK

การลบแถวและคอลัมน์

  1. คลิกเลือกแถวหรือคอลัมน์ที่ต้องการจะลบ
  2. กดแป้น  < Delete>  หรือ  แป้น  < Backspace >
  3. หรือคลิกขวาเลือกเมนูลัด  แล้วเลือกคำสั่ง  Table  >> Delete Row  หรือ  Delete Column

การรวมเซลล์  (Merge Cell)
เซลที่อยู่ในตาราง  สามารถรวมกันได้  เรียกว่า  Merge Cells  มีวิธีดังต่อไปนี้
1.  เลือกเซลที่จะรวมเข้าด้วยกัน
2.  คลิกขวาในตาราง  แล้วเลือกคำสั่ง  Table >> Merge Cells
3.  เซลล์ที่เลือกไว้จะรวมกันเป็นเซลเดียว

การแบ่งเซลล์  (Split Cell)
1.  คลิกเลือกเซลล์ที่ต้องการ
2.  คลิกขวาแล้วเลือกคำสั่ง  Table >> Split Cells
3.  จะปรากฏหน้าต่าง  Split Cell ซึ่งกำหนดรายละเอียดดังนี้
Split cell into Rows
Split cell into Columns

7.  การตกแต่งตาราง

การใส่สีพื้นและเส้นขอบตาราง

  1. คลิกเลือกตารางหรือช่องเซลล์ที่ต้องการจะใส่สีพื้นหลังและเส้นขอบ
  2. คลิกเลือก  จะแสดงถาดสีจำนวนมาก
  3. คลิกเลือกสีที่ต้องการ

               4.  การสีของเส้นขอบให้คลิกที่   จะได้ถาดสีขึ้นมา  คลิกเลือกสีที่ต้องการ  (ควรกำหนดขนาดของเส้นขอบที่ช่อง   ถ้าเป็น 0  จะไม่แสดงสีเส้นขอบ)

 

การใส่ภาพพื้นตาราง

  1. คลิกเลือกตารางทั้งตาราง  หรือเลือกบางเซลล์ก็ได้
  2. คลิกที่ปุ่ม    ของช่อง  Bg Image 
  3. จะได้หน้าต่าง  Select Image Source  คลิกเลือกภาพที่ต้องการจะนำไปสร้างพื้นหลังเสร็จแล้วคลิกปุ่ม  OK

               4.  ภาพที่นำไปสร้างจะถูกนำไปสร้างเป็นพื้นหลังทันที

การเปลี่ยนขนาดเส้นตาราง
เส้นตารางที่สร้างไว้นั้น  หากไม่ต้องการแสดงผลบน  Browser  ก็สามารถสั่งให้ซ่อนเส้นตาราง  หรือจะเปลี่ยนขนาดของเส้นให้มีขนาดใหญ่ขึ้นหรือเล็กลงก็ได้

  1. คลิกเลือกตารางหรือเส้นตารางที่ต้องการจะเปลี่ยนขนาดเส้นขอบ
  2. ถ้าต้องการซ่อนเส้นขอบให้เปลี่ยนเป็นเลข  0

                3.  แล้วคลิกพื้นที่ใด ๆ ของตาราง  เส้นตารางจะถูกซ่อนไว้  แต่ยังคงมีตารางอยู่   โดยจะแสดงเป็นเส้นประ  และจัดการกับตารางได้ตามปกติ

                4.  ถ้าต้องการเปลี่ยนขนาดของตารางให้แก้ไขตัวเลขในช่อง Border  เช่น 1 2 3

 

การจัดและตกแต่งข้อความ

                การใช้ข้อความใน Dreamweaver 8  สามารถเหมือนโปรแกรมที่เกี่ยวกับงานเอกสาร  เช่น  Microsoft Office

8. การตั้งค่าภาษาไทย
การใช้งานภาษาไทยบนเว็บเพจสามารภทำได้ 2 วิธี  คือ  การกำหนดแต่ละเว็บเพจทุกครั้งที่สร้างใหม่  หรือกำหนดภาษาให้เป็นค่าเริ่มต้นของโปรแกรมไปเลย  โดยมีวิธีการดังนี้

การกำหนดภาษาทีละเว็บเพจ

  • เลือกคำสั่ง  Modify >> Page Properties  จากแถบเมนู

  • ใน Category  ให้เลือก  Title/Encoding
  • เลือกภาษาไทยจากช่อง  Encoding >> Thai (Windows)

  • คลิกปุ่ม OK  เพื่อจบการตั้งค่าภาษาของเว็บเพจปัจจุบัน

การกำหนดภาษาให้เป็นค่าเริ่มต้นกับทุกเว็บเพจ

  • เลือกคำสั่ง  Edit >> Preferences  จากแถบเมนู

  • ใน  Category  เลือกคำสั่ง  New Document
  • เลือกภาษาไทยโดยคลิกปุ่ม  จากช่อง  Default encoding  >>  Thai (Windows)

  • คลิกปุ่ม  OK

การเพิ่มแบบอักษร
การเพิ่มแบบอักษรเพื่อใช้งาน  ในกรณีที่แบบอักษรที่โปรแกรมกำหนดมาใช้ไม่เพียงพอต่อการใช้งาน  ซึ่งมีขั้นตอนการทำดังนี้

  • คลิกที่คำสั่ง  Text >> Font >> Edit Font List …

  • จะได้หน้าต่าง  Edit Font List

    

    

  • ดับเบิ้ลคลิกเลือกแบบอักษรที่ต้องการจากช่อง  Available fonts :  แบบอักษร
  • การเพิ่ม / ลบ  แบบอักษร  ใช้ปุ่ม << และปุ่ม >> เลื่อนหาแบบอักษร
  • คลิกปุ่ม  OK

9. การพิมพ์ข้อความในเว็บเพจ

การพิมพ์ข้อความสามารถพิมพ์ลงไปในหน้าเอกสารเหมือนกับพิมพ์ในเวิร์ดปกติ
เมื่อพิมพ์เสร็จก็กด < Enter >  เพื่อขึ้นบรรทัดใหม่


การขึ้นบรรทัดใหม่

การขึ้นบรรทัดใหม่  ใช้วิธีกดแป้น  < Enter >  ซึ่ง  Dreamweaver 8  จะเว้นบรรทัดที่ว่างก่อนและหลังให้ 1 บรรทัด

การขึ้นบรรทัดใหม่ไม่ต้องเว้นที่ว่าง
ถ้าต้องการให้การขึ้นบรรทัดใหม่โดยไม่ต้องเว้นที่ว่าง  ให้คลิกหน้าข้อความหรือบรรทัดที่ต้องการจะขึ้นบรรทัดใหม่แล้วกดแป้น  < Shift >  พร้อมกับกด  < Enter >  หรือคลิก  ก็ได้

10.  การเลือกข้อความ
การเลือกข้อความเป็นการระบายแถบทึบบนข้อความ  เพื่อจัดการกับข้อความนั้น ๆ  เช่น  ลบ  คัดลอก  ย้าย  ฯลฯ  การเลือกข้อความมีหลายลักษณะ  ดังนี้

การเลือกเฉพาะคำหรือข้อความ
1.  วางเมาส์หน้าคำหรือข้อความ  คลิกแล้วลากเมาส์ทับบริเวณที่ต้องการ  แล้วปล่อยเมาส์
2.  บริเวณเมาส์ลากผ่านจะมีแถบสีดำขึ้นมา

การเลือกข้อความขนาดยาว
การเลือกข้อความขนาดยาว  ถ้าใช้การลากเมาส์เหมือนวิธีแรกอาจไม่สะดวก
1.  คลิกเมาส์ตรงตัวอักษรแรกของข้อความที่จะลือก
2.  กดแป้น  < Shift >  ค้างไว้  พร้อมกับคลิกเมาส์ที่ข้อความสุดท้าย

การเลือกข้อความทั้งเอกสาร
1.  คลิกที่ตำแหน่งใดก็ได้บนเว็บเพจ  เลือกคำสั่ง  Edit >> Select All  หรือกดแป้น  < Ctrl > + < A >  หรือคลิกแท็ก  < P >  บนแถบสถานะ (Status Bar)  ข้อความทั้งหมดจะเป็นแถบทึบ
2.  การยกเลิกการเลือกเอกสารทำได้โดยคลิกพื้นที่ว่างบนเว็บเพจ

  • การเปลี่ยนรูปแบบตัวอักษร

 การใช้  Properties Inspector

  • คลิกเลือกข้อความ หรือ  คำที่ต้องการจะเปลี่ยนรูปแบบ
  • เลือกแบบอักษรที่ช่อง  Font  เช่น MS San Serif
  • เลือกขนาดตัวอักษรที่ช่อง  Size
  • เลือกสไตล์ที่กำหนดไว้แล้วในช่อง Style

  • เลือกสีแบบอักษร

การใช้เมนูคำสั่ง

  • คลิกเลือกข้อความที่ต้องการจะเปลี่ยนรูปแบบ
  • เลือกเมนู  Text
  • เลือกคำสั่งย่อย  เช่น  Font  แล้วเลือกแบบอักษรที่ต้องการ  เช่น MS San Serif

  • เลือกขนาดตัวอักษร (Size)  สไตล์  (Style)  และสีแบบอักษร  (Color)

การใช้ทูลบาร์

  • คลิกที่ปุ่ม  แล้วเลือกกลุ่มเครื่องมือ  Text
  • จะได้แถบเครื่องมือสำหรับแก้ไขลักษณะอักษร  ดังนี้

  • การกำหนดตัวอักษรแบบพิเศษเพิ่มเติม  คลิกที่ปุ่มด้านซ้ายสุดของทูลบาร์

  • ถ้าต้องการเลือกตัวอักษรชนิดพิเศษเพิ่มเติม ให้คลิกที่คำสั่ง  Other Character  จะได้หน้าต่าง  Insert other character

  • คลิกเลือกแบบอักษรที่ต้องการ แล้วคลิกปุ่ม  OK

11.  การจัดรูปแบบข้อความ

การจัดตำแหน่งของข้อความ

  • คลิกเลือกข้อความที่ต้องการจัดรูปแบบ
  • คลิกเลือกรูปแบบการจัดข้อความ  มีรายละเอียดดังนี้
  • สำหรับจัดข้อความชิดซ้าย (Align Left)

  • สำหรับจัดข้อความไว้ตรงกลาง (Align Center)

  • สำหรับจัดข้อความชิดขวา (Align Right)

  • สำหรับให้ข้อความทั้งด้านหน้าและด้านหลังเท่ากัน (Justify)

12. การจัดระยะเยื้องของย่อหน้า
การเยื้องของย่อหน้าเป็นการเว้นระยะห่างของข้อความกับขอบหน้าเว็บเพจเข้าไป  โดยกำหนดได้ทั้งด้านซ้ายและด้านขวาของหน้าเว็บ    ซึ่งมีขั้นตอนดังนี้
1.  คลิกตำแหน่งข้อความที่ต้องการจะเยื้อง
2.  คลิกที่แถบเครื่องมือเยื้องเข้า   (Text Indent)  เพื่อเยื้องระยะเข้าไปหนึ่งระยะ  ถ้าต้องการเพิ่มระยะให้คลิกอีกครั้งหนึ่ง

                3.  ถ้าต้องการยกเลิกการเยื้องให้คลิกปุ่มเยื้องออก  (Text Outdent)

การใช้สัญลักษณ์และตัวเลขแสดงหัวข้อย่อย
การใส่สัญลักษณ์   (Bullet)  และตัวเลข (Numbering)  เพื่อแสดงหัวข้อย่อยหรือลำดับข้อความแต่ละบรรทัด  เพื่อให้อ่านได้สะดวกและสวยงาน  มีขั้นตอนดังนี้

  • คลิกเลือกข้อควาที่ต้องการจะทำสัญลักษณ์หรือลำดับเลข
  • คลิกที่ปุ่ม   เพื่อใช้สัญลักษณ์  ปุ่ม  เพื่อใช้ตัวเลข

  • ถ้าใช้ทูลบาร์ให้คลิกที่ปุ่ม  เพื่อใช้บุลเล็ต  และปุ่ม  เพื่อใช้ตัวเลข

  • ถ้าใช้เมนูคำสั่งให้คลิกที่  Text >> List  แล้วเลือกคำสั่งย่อย

  • การนำเข้าข้อความจากโปรแกรมอื่น

 การนำเข้าเอกสาร  Word

เลือกคำสั่ง  File >> Import >> Word Document

จะได้หน้าต่าง  Import Word Document

 

คลิกเลือกไฟล์เวิร์ด  แล้วคลิกปุ่ม  Open

เอกสารเวิร์ดจะถูกนำไปแทรกในเว็บเพจทันที

 การนำเข้าเอกสาร  Excel

  • เลือกคำสั่ง  File >> Import >> Excel Document
  • จะได้หน้าต่าง  Import Excel Document

  • คลิกเลือกไฟล์เอ็กเซล  แล้วคลิกปุ่ม  Open

  • เอกสารเอ็กเซลล์จะถูกนำไปแทรกในเว็บเพจทันที

ที่มา http://www.ozonejung.com/krudeer/lesson/lesson4.html#1

การสร้าง Top Menu
1.  Menus> Menus Manager>New
2.  กำหนดรายละเอียด
Title : Topmenu
Menu Type : Topmenu
3.  คลิก Save & Close

สร้างเมนู Webmaster
1.  Menus> Topmenu >New
2.  กำหนดรายละเอียดที่สำคัญ
Detalis
Menu Item Type  คลิกปุ่ม Select เลือก Single Article
Menu Item  พิมพ์ Webmaster
Alias            พิมพ์ Webmaster
Requrired Settings
Select Alias  คลิกปุ่ม Select/Change เลือกเนื้อหา Webmaster
3.  คลิก Save & Close

 

ทำภาพ Gallery ใน wordpress

เห็นเพื่อนครูถามมาหลายท่านว่า อยากจะทำภาพเป็นแกลเลอรี่ หรือภาพเล็กๆ เรียงต่อกันจะทำอย่างไร วันนี้ผมมีคำตอบครับ :) ซึ่งอันที่จริงแล้วก็ไม่ได้ใช้เครื่องมือช่วยพิเศษแต่อย่างใดเลย ขั้นตอนแรกก็คือ เลือกว่าเราจะเพิ่มภาพเข้าไปที่ เรื่อง หรือที่ หน้า โดยคลิกเข้าไปที่ปุ่มแทรกรูปภาพ (ตามตัวอย่าง)

1. คลิกปุ่มแทรกภาพ

1. คลิกปุ่มแทรกรูปภาพ

2. คลิกเลือกไฟล์ ตามโฟลเดอร์ภาพที่เตรียมไว้

3. คลิกเลือกภาพพร้อมกันหลายๆ ภาพ 4. คลิก Open

5. เมืออับโหลดหมดทุกภาพให้คลิก x หรือปุ่ม close เพื่อปิดหน้าต่างนี้ออกไปเลย

6. คลิกปุ่มแทรกรูปภาพอีกครั้ง

7. ให้สังเกตแท็บข้างบนจะมีแท็บ คลังภาพ (จำนวนภาพ) เพิ่มขึ้นมา

8. คลิกใส่คลังภาพ หรือ ทำสไลด์จากภาพที่อับโหลดขึ้นนี้ก็คลิกที่ insert slideshow ตรงนี้สามารถปรับแต่งการแสดงภาพได้ว่า ต้องการให้แต่ละแถวของ gallery แสดงกี่ภาพ และเมื่อผู้ชมคลิกที่ภาพแล้วจะให้ไปที่ไฟล์ภาพนั้นๆ เลย หรือแสดงภาพแนบอีกสองภาพด้านข้างก็ได้

9. คลิกเผยแพร่ หรือ อับเดทครับ

ข้อมูลจาก  http://smedupic.wordpress.com/2010/07/27/%E0%B9%80%E0%B8%97%E0%B8%84%E0%B8%99%E0%B8%B4%E0%B8%84%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3%E0%B8%A0%E0%B8%B2%E0%B8%9E-gallery/

วิธีปรับแต่งหน้าแรก Joomla!

วิธีปรับแต่งหน้าแรก Joomla!

ปกติแล้วเมื่อเราได้ติดตั้งJoomla!ครั้งแรกเลย หน้าแรก หรือหน้า Home ของเรานั้น รูปแบบของบทความจะจัดเรียงมาให้เป็นแบบนี้ครับ:

Adjusting Joomla Frontpage 01

 

ถ้าใครไม่ชอบ หรือ ไม่ถูกใจรูปแบบหน้าแรกแบบเดิมๆที่ Joomla! จัดมาให้ตอนแรก สามารถเปลี่ยนได้นะครับ ลองมาดูวิธีกันเลย
ขั้นตอนที่ 1: ไปที่หน้า Admin=>เลือก Menus=>เลือก Main Menus

Adjusting Joomla Frontpage 02

 

ขั้นตอนที่ 2:ลองดูที่ไอเทมแรกครับ ถ้ายังไม่ได้แก้อะไรมักจะอยู่อันแรก และชื่อว่าhome คลิกเข้าไปเลยครับ

 

Adjusting Joomla Frontpage 03

 

ขั้นตอนที่ 3:พอคลิกเข้าไปลองดูด้านขวามือ, จะเห็นคำว่าParameters (Basic) ซึ่งตรงนี้แหละครับที่จะเป็นที่ๆเราจะปรับแต่งหน้าแรกของ Joomla!

 

Adjusting Joomla Frontpage 04

ขั้นตอนที่ 4:หลายคนอาจจะสงสัยว่า อะไรคือ Leading, Intros, Columns และ Links ไม่ต้องห่วงครับ ผมทำรูปอธิบายมาให้แล้วครับ ลองดูที่รูปด้านล่างเลย

การตั้งค่า:
     # Leading= 1
     # Intros= 4
       Columns= 2
     # Links= 4

 

Adjusting Joomla Frontpage 05

ขั้นตอนที่ 5:โอเค, คิดว่าคุณคงพอเข้าใจแล้วนะครับ ทีนี้ผมจะลองใส่ค่าต่างๆ ให้ดูว่าจะได้ผลลัพธ์ยังไง ลองมาดูกัน

การตั้งค่า:
     # Leading= 1
     # Intros= 4
       Columns= 1
     # Links= 0

ผลลัพธ์ก็จะได้ตามนี้:

Adjusting Joomla Frontpage 06

แค่นี้คุณก็ปรับแต่ง หน้าแรกของ Joomla ได้ตามต้องการแล้ว ไม่ยากเลยใช่มั้ยครับ

ข้อมูลจาก http://joomla-webmaster.blogspot.com/2009/04/joomla.html

ง30204 การพัฒนาเว็บไซต์

คำอธิบายรายวิชา  ง30204  การพัฒนาเว็บไซต์  

ศึกษาหลักการ  ขั้นตอนและคุณสมบัติของคอมพิวเตอร์  และโครงสร้างระบบคอมพิวเตอร์สำหรับงานประมวลผลแบบสื่อประสม  พร้อมทั้งองค์ประกอบของเว็บไซต์  องค์ประกอบของโปรแกรม และหลักการทำงานของโปรแกรม การใช้คำสั่งเบื้องต้นในการสร้างเว็บไซต์ การใช้โปรแกรมสำเร็จในการสร้างเว็บไซต์ การใช้โปรแกรมประมวลคำ การสร้างเว็บไซต์ที่มีตัวอักษรลักษณะต่าง ๆ อุปกรณ์แสดงผลกราฟิก  ภาพเคลื่อนไหว ภาพกราฟิกต่าง ๆ การเชื่อมโยงในรูปแบบต่าง ๆ รูปลักษณะของเว็บเพจ

ปฏิบัติการสร้างเว็บไซต์  โดยใช้โปรแกรมสำเร็จ และคำสั่งพื้นฐานโดยใช้โปรแกรมประมวลคำ โดยมีการเชื่อมโยง อุปกรณ์แสดงผลกราฟิก รูปแบบพื้นฐานต่าง ๆ ของเว็บเพจ สร้างงานแบบสื่อผสมเพื่อนำไปประยุกต์ในการศึกษา

เพื่อให้มีความรู้ ความเข้าใจ สามารถใช้เทคโนโลยีแบบสื่อผสมและทักษะเบื้องต้นในการสร้างเว็บไซต์โดยใช้โปรแกรมสำเร็จ และคำสั่งพื้นฐานของการสร้างเว็บไซต์ โดยมีความคิดริเริ่มสร้างสรรค์  มีเจตคติที่ดีต่องาน  ทำงานอย่างเป็นระบบ  มีระเบียบวินัย  และมีความรับผิดชอบในการปฏิบัติงาน สามารถนำเอาความรู้มาใช้และประยุกต์ในการทำงานได้อย่างมีคุณภาพ  ตามวิถีไทย  และถูกต้องตามหลักกฎหมายลิขสิทธิ์และทรัพย์สินทางปัญญา เกิดประสิทธิภาพในการศึกษา

 

ผลการเรียนรู้ที่คาดหวัง

1. นักเรียนสามารถบอกความหมาย และความสำคัญของการสร้างเว็บไซต์ได้

2. นักเรียนสามารถบอกชื่อโปรแกรมที่สามารถสร้างเว็บไซต์ได้

3. นักเรียนสามารถเลือกใช้โปรแกรมกราฟิก ที่ใช้ประกอบในการเขียนเว็บไซต์ได้

4. นักเรียนสามารถเลือกและกำหนดสีสรรค์ในการสร้างเว็บไซต์ได้

5. นักเรียนสามารถออกแบบเว็บไซต์ได้

6. นักเรียนสามารถบอกและใช้เครื่องมือต่าง ๆ ในโปรแกรมที่ใช้เขียนเว็บไซต์ได้

7. นักเรียนสามารถเขียนเว็บไซต์ได้ด้วยตนเอง และนำไปประยุกต์ในการศึกษาได้

8. นักเรียนสามารถสร้างงานแบบสื่อผสมได้