การติดตั้ง WordPress Thai การเริ่มตนใชงาน WordPress Thai การปรับปรุงแฟมขอมูล-ประวัติ การเลือกใช Theme การปรับแตงรูปแบบ การเพิ่มเนื้อหา หองสมุดสื่อ เรียนรูการจัดเก็บไฟลตางๆ การปรับแตงรูปแบบโดย HTML
คูมือนี้เปนสวนหนึ่งของรายวิชา
เทคโนโลยีเพื่อการออกแบบนิเทศศิลป รหัสวิชา ARTI3319 Technology and Visual Communication Design สาขาวิชาศิลปกรรม แขนงออกแบบนิเทศศิลป คณะมนุษยศาสตรและสังคมศาสตร มหาวิทยาลัยราชภัฏจันทรเกษม ปการศึกษา 1/2556 ออกแบบ / เรียบเรียงโดย น.ส.ภรูรอง กตัญญตานุรักษ
รายงานสรุปคู่มือการเรียนรู้การออกแบบเว็บไซด์ด้วย WordPress Thai ซึ่ง เป็น open source web software ที่เราสามารถติดตั้งบนเว็บ server ของเราได้ เล่มนี้ นั้น จัดทาขึ้นมาจากการเรียนรู้ด้วยตนเอง เพื่อนาไปใช้ประโยชน์ในการทางาน เพื่อนาไปใช้สาหรับการนาเสนอโปรเจคหรือผลงานอื่น ๆ ทางผู้จัดทาได้นามาสรุป เป็นคู่มือการใช้งานเพื่อให้เป็นประโยชน์แก่ผู้อื่นที่สนใจศึ กษาเรียนรู้ตนเอง หวัง เป็นอย่างยิ่งว่า รายงานสรุปคู่มือการเรียนรู้เล่มนี้จะเป็นประโยชน์แก่ผู้คน และ สามารถเป็ น แนวทางเพื่ อ น าไปพั ฒ นาความรู้ เกี่ ย วกั บ เทคโนโลยี อื่ น ๆ หากมี ข้อผิดพลาดประการใดทางผู้จัดทาเรียนขออภัยไว้ ณ ที่นี้ด้วย ผู้จัดทำ น.ส.ภรูรอง กตัญญตานุรักษ์
กำรติดตั้ง WordPress Thai กำรเริ่มต้นใช้งำน WordPress Thai กำรปรับปรุงแฟ้มข้อมูล-ประวัติ กำรเลือกใช้ Theme กำรปรับแต่งรูปแบบ กำรเพิ่มเนื้อหำ ห้องสมุดสื่อ เรียนรู้กำรจัดเก็บไฟล์ต่ำงๆ กำรปรับแต่งรูปแบบโดย HTML รูปแบบ HTML บน Notepad++ รูปแบบ CSS
1 5 7 9 11 14 15 16 17 18 19
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 1
WordPress เป็น open source web software ที่เราสามารถติดตั้งบนเว็บ server ของเรา เพื่อสร้างเว็บไซต์, blog หรือ community ตอนเริ่มแรก WordPress เป็นเครื่องมือไว้สาหรับสร้าง blog แต่ได้รับการพัฒนามาเรื่อย ๆ จนสามารถสร้างเป็นเว็บไซต์ หรือ เว็บ community ได้แล้ว โดย มีระบบจัดการบทความ หรือ Content Management System (CMS) ทาให้ง่ายต่อการใช้งาน ซึ่ง WordPress สร้างขึ้นโดย Matt Mullenweg และ Mike Little ในปี 2003 นับว่ามีการพัฒนามาถึง 9 ปีแล้ว
การติดตั้ง WordPress Thai
1
2
3
ภาพที่ 1 แสดงหน้า URL ของ http://wordpress.com/ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 2
4
4
ภาพที่ 2 แสดงหน้าการค้นหา wordpressthai edition ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
5
ภาพที่ 3 แสดงหน้ารายการ wordpressthai edition แต่ละเวอร์ชั่น ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 3
1. ดาวโหลด WordPress เวอร์ชั่นล่าสุด 3.6 ได้ที่ URL http://wordpress.com/ (หมายเลย 1) 2. ค้นหา wordpressthai edition ได้ที่ (หมายเลย 2) เลือก (หมายเลย 3) เลือก Browse All Files (หมายเลย 4) 3. ในที่นี้ให้เลือกดาวโหลดเวอร์ชั่นไทยล่าสุดคือ 3.6 (หมายเลย 5) 4. Extract โฟนเดอร์ wordpressThai 3.6 Portable-Academy… 5. เปิดโปรแกรมชื่อ usbwebsever ขึ้นมา ( หมายเลข6 ) เราจะใช้ usbwebsever 8.0 ในการเปิด Wordpress
6 12
11
10
9 8 7 ภาพที่ 4 แสดง wordpressthai edition ที่โหลดมา ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์ 6. ก่อนเปิด
usbwebserver 8.0 อาจจะต้องปิดการทางานของแสกนไวรัสก่อน เพราะ ตัวแสกนไวรัส อาจจะมองว่าเป็นสิ่งแปลกปลอมสาหรับ เครื่องคอมพิวเตอร์ของเรา สาหรับโปรแกรมแสกนไวรัสบางตัวอาจจะถามก่อนว่าจะให้เราบล็อก usbwebserver 8.0 หรือไม่ ให้เราตอบปฏิเสธการบล็อกนั้น เมื่อเปิด usbwebsever 8.0 ขึ้นมาแล้ว ต้องให้ Apache และ Mysql เปิดทางานอยู่ดังรูป (หมายเลข9,10) ถ้าไม่ได้เปิด ทางานอยู่ (สีเขียว) ให้เข้าไปเปิดทางาน หรือเข้าไปตั้งค่าต่างๆ ได้ (หมายเลข 8) การ ออกแบบเว็บจาก WordPress จะใช้เมณู General (หมายเลข 11) 7. เริ่มออกแบบเลือกที่ Localhost (หมายเลข12)
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 4
11
9
8
7
ภาพที่ 5 แสดง usbwebserver 8.0 ที่โหลดมากับ WordPress ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 5
การเริ่มต้นใช้งาน WordPress Thai ในหน้าแรก WordPress Thai แนะนาการติดตั้ง (หมายเลข1) มีคุณลักษณะเวอร์ชั่นใหม่นี้ที่ (หมายเลข2) การเรียกใช้งานโปรแกรมการจัดการเนื้อหาสาเร็จรูปใดๆทีต่ ิดตั้งในเซิร์ฟเวอร์จาลองแบบ เคลื่อนที่นี้ ให้พิมพ์ชื่อโฟลเดอร์หรือชื่อโปรแกรมนั้นๆต่อท้ายที่อยู่ URL ใน Addressbar เช่นที่ได้ ติดตั้งไว้ให้สาเร็จแล้ว พร้อมใช้งานคือ โปรแกรมเวิร์ดเพรสบล็อก ฉบับภาษาไทย โดยคลิ กเข้าใช้ได้ที่ http://localhost:8080/wordpressthaiedition (หมายเลข3)
1
3
2 ภาพที่ 6 แสดงหน้า usbwebserver 8.0 ที URL http://localhost:8080/ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
4 ภาพที่ 7 แสดงหน้าแรกของ wordpressthai edition บน usbwebserver 8.0 ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 6
5
ภาพที่ 8 แสดงหน้าการเข้าสู่ระบบ ในสถานะผู้ดูแลระบบ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
1. เลือกเข้าสูร่ ะบบ (หมายเลข4) เพื่อเข้าสู่ระบบการออกแบบเว็บในสถาณะ admin 2. สาหรับการเข้าสู่ระบบครั้งแรงทางระบบจะมีชื่อและรหัสมาให้เรียบร้อยแล้ว
เริ่มเข้าสูร่ ะบบด้วยชื่อบัญชีและใส่รหัสผ่านด้วย admin (หมายเลข5)
ภาพที่ 9 แสดงหน้าการจัดการระบบและการออกแบบ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
ให้เรา
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 7
การปรับปรุงแฟ้มข้อมูล-ประวัติ 1
2
ภาพที่ 10 แสดงหน้าการจัดการระบบและการออกแบบ 2 ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
3
4
1.
5
6
7
8 ภาพที่ 11 แสดงหน้าการปรับปรุงแฟ้มข้อมูล-ประวัติ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 8
1. เลือกเปลี่ยนชื่อของเราได้ที่ “สวัสดีคุณ admin” (หมายเลข1) 2. เลือก “ปรับปรุงแฟ้มข้อมูล-แฟ้มประวัต”ิ (หมายเลข2) 3. เลือกใช้ชุดโครงสีสาหรับหน้าศูนย์จัดการระบบนี้ (หมายเลข3) 4. ใส่ขอ้ มูลเกี่ยวกับชื่อเชื่อมโยง (หมายเลข4) 5. ใส่ข้อมูลติดต่อ (หมายเลข5) 6. ใส่ข้อมูลเกี่ยวกับตัวคุณ (หมายเลข6) 7. เปลี่ยนรหัสผ่านใหม่ (หมายเลข7) 8. บันทึกการเปลี่ยนแปลง การปรับปรุงแฟ้มข้อมูล-แฟ้มประวัติ (หมายเลข8)
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 9
การเลือกใช้ Theme การจัดการชุดกราฟิกบล็อก
2
4.1
4.2
4
3
1
4.3
4.4
4.1
4.2
ภาพที่ 12 แสดงหน้าการจัดการชุดกราฟิกบล็อก ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
4.3
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 10
1. เลือกที่ “รูปลักษณ์หน้าเว็บ” (หมายเลข1) 2. เลือกที่ “การจัดการชุดกราฟิกบล็อก” (หมายเลข2) - แสดงหน้าการจัดการ web Theme ต่างๆ ที่มีอยู่แล้ว (หมายเลข3) - แสดงตัวอย่างของหน้า web Theme (หมายเลข4) 3. เลือก web Theme ที่ต้องการ - เลือกเพื่อเริ่มใช้งาน (หมายเลข4.1) สามารถปรับแต่งรูปแบบของ Theme , เพิ่มเมณูข้าง , สร้างหัวข้อใหม่ , ปรับแต่งสีพื้นได้ - ดูตัวอย่างแบบเสมือนจริง (หมายเลข4.2) - ดูรายละเอียดของ web Theme ที่เลือก (หมายเลข4.3) - ลบ web Theme (หมายเลข4.4)
ติดตั้งชุดกราฟิกเพิ่มบล็อก เพิ่ม 5.1
5.2
5
5.1
ภาพที่ 13 แสดงหน้าการเลือก-ค้นชุดกราฟิก ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
5.2
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 11
1. เลือกที่ “รูปลักษณ์หน้าเว็บ” (หมายเลข1) 2. เลือกที่ “ติดตั้งชุดกราฟิก เพิ่ม” (หมายเลข5) - ค้ น หาจากชื่ อ Theme ที่ เ รารู้ ชื่ อ อยู่ แ ล้ ว เราสามามารถเข้ า ไปดู ไ ด้ ที่ WordPress.com (หมายเลข5.1) - เลือกจาก WordPress ที่เรากาลังทางานอยู่ จาก “ใหม่ล่าสุด” (หมายเลข5.2)
การปรับแต่งรูปแบบ เราสามารถปรับแต่งค่าเริ่มต้นของหน้าเว็บเราจาก web Theme ที่เลือกไว้เรียบร้อยแล้ว แต่ ละ Theme ที่เลือกจะมีรายละเอียดดังนี้ - ชื่อของ Theme (หมายเลข1) - ชื่อของผู้ออกแบบ Theme (หมายเลข2)
1
3
4
2
5
ภาพที่ 14 แสดงหน้าThemeที่เลือกใช้ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
3.1 3.2 3.3
ภาพที่ 15 แสดงหน้าปรับแต่ง Themeจาก Customize ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
6
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 12
เริ่มต้นปรับแต่ง Title และพื้นหลัง 1. เลือกปรับแต่งชื่อและสีพื้นหลังที่ “Customize” (หมายเลข3) หรือเลือกเข้าจาก เมนูด้านข้างซ้ายมือดังรูป 2. ปรับแต่งขนาดและชื่อของ Title (หมายเลข3.1) 3. ปรับแต่งสีพื้นหลัง (หมายเลข3.2) 4. ปรับแต่งภาพพื้นหลัง (หมายเลข3.3)
เริ่มต้นปรับแต่ง บล็อกเมนูข้าง:Widgets 1. เลือก “บล็อกเมนูข้าง:Widgets” (หมายเลข4) หรือเลือกเข้าจากเมนูด้านข้างซ้ายมือดังรูป 2. เลือก บล็อกเมนูข้างบล็อกเมนูข้าง : Widgets ที่เราต้องการอย่างเช่น - ป้ายกากับคาค้น (หมายเลข4.1) - ปฎิทิน (หมายเลข4.2) 3. เลือกเมนูข้าง : Widgets ลากมาใส่ Sidebar ด้านข้างตามลูกศร
4.1
4.2
ภาพที่ 16 แสดงหน้าปรับแต่งบล็อกเมนูข้าง:Widgets ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 13
เริ่มต้นปรับแต่ง สร้างรายการเมนู 1. เลือก “สร้างรายการเมนู” (หมายเลข5) หรือ เลือกเข้าจากเมนูด้านข้างซ้ายมือดังรูป 2. สร้างเมนูใหม่ (หมายเลข5.1) 3. กาหนดการเชื่อมโยง (หมายเลข5.2) 4. เมนูทสี่ ร้างแล้ว (หมายเลข5.3) 5.1
5.2
5.3
ภาพที่ 17 แสดงหน้าการสร้างรายการเมนู ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
เริ่มต้นปรับแต่ง พื้นหลัง 1. เลือก “สีพื้นหลัง” (หมายเลข6) หรือเลือกเข้า จากเมนูด้านข้างซ้ายมือดังรูป 2. เลือกสีพื้นหลัง (หมายเลข6.1) 3. เลือกรูปพื้นหลัง (หมายเลข6.2)
6.2
ภาพที่ 18 แสดงหน้าการปรับแต่งพื้นหลัง ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
6.1
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 14
การเพิ่มเนื้อหา 2 1
ภาพที่ 19 แสดงหน้า เมนู-เพิ่มเนื้อหา ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
3 4 4.2 4.1
ภาพที่ 19 แสดงหน้าการเพิ่มเนื้อหาใหม่ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
1. เลือก “เมนู-เพิ่มเนือ้ หา” (หมายเลข1) 2. เพิม่ เนือ้ หาใหม่โดยเลือก “สร้างหน้าหัวข้อ:เมนู:หมวดรายการหลักใหม่” (หมายเลข2) 3. ตั้งชื่อเรื่อง (หมายเลข3) และใส่เนื้อหา (หมายเลข4) - เพิ่มสื่อต่างๆ ให้กับเนื้อหา (หมายเลข4.1) - จัดแต่งรูปแบบเนื้อหา และข้อความ (หมายเลข4.2) เราสามารถเข้ามาแก้ไข เนื้อหาเมนูทสี่ ร้างไว้แล้วได้
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 15
ห้องสมุดสื่อ ห้องสมุดสื่อคือ ที่ เก็บ ไฟล์ที่เรานามาใช้กับ การสร้างเว็บ เราสามารถ upload ไฟล์เ สียง รูปภาพ วีดีโอ เข้ามาไว้ได้ที่นี่ โดยระบบจะมีการจัดเก็บข้อมูลให้เราในรูปแบบของ root หรือ root directory คือการเก็บข้อมูบเป็นอัตรภาคชั้น เนื่องจากปัญหาของการตั้งชื่อไฟล์ตรงกัน และไฟล์ของ ผู้ใช้ทุกคนอยู่ปะปนกัน จึงพัฒนาโครงสร้างของระบบไดเร็กทอรี่เสียใหม่ คือให้ผู้ใช้แต่ละคนสามารถ สร้างไดเร็กทอรี่ของตนเองได้ 1 ไดเร็กทอรี่เรียกว่าเป็นไดเร็กทอรี่ย่อย (sub-directory) ไดเร็กทอรี่ ย่อยนี้จะอยู่ภายใต้ไดเร็กทอรี่เดียวกั น เรียกว่าเป็น ไดเร็กทอรี่ราก (root directory) หรือเรียก สั้นๆ รูทจะมีไดเร็กทอรี่ย่อยได้หลายไดเร็กทอรี่ ภายในไดเร็กทอรี่ย่อยนี้มีได้หลายๆ ไฟล์ ผู้ใช้สามารถ ตั้งชื่อไฟล์และชนิดให้ตรงกับไฟล์ของผู้ใช้คนอื่นได้ถ้าไฟล์ทั้ง 2 นี้อยู่ต่างไดเร็กทอรี่กัน ไฟล์ที่เรา upload เข้ามาจะถูกนาไปเก็บไว้ที่ : โฟนเดอร์WordPress ที่เราโหลดมา >> root >> wordpressthaiedition >> wp-content >> uploads >> และสร้างโฟนเดอร์ให้ เราใหม่ชื่อ 2013
1
3
ภาพที่ 20 แสดงหน้าห้องสมุดสื่อ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
- เพิ่มไฟล์เข้าใหม่ (หมายเลข1) - ค้นหาไฟล์ที่ upload มาแล้ว (หมายเลข2) - ไฟล์ที่ Upload มาแล้ว (หมายเลข3)
2
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 16
เรียนรู้การจัดเก็บไฟล์ตา่ งๆ การจัดเก็บข้อมูลให้เราในรูปแบบของ root หรือ root directory ข้ อมูลและชุดคำสัง่ ที่เกี่ยวกับ Amin
ข้ อมูล รูปแบบตัวอักษร (ฟอนต์ ) และชุดคำสัง่ ที่เกี่ยวกับภำษำ
ข้ อมูลและชุดคำสัง่ ที่เกี่ยว themes
ข้ อมูลและชุดคำสัง่ ที่เกี่ยว ไฟล์ที่อพั โหลดมำแล้ ว
Themes ต่ำงๆ ที่ดำวโหลดมำ
ภาพที่ 21 แสดงผังโฟนเดอร์การจัดเก็บข้อมูลในรูปแบบของ root ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 17
การปรับแต่งรูปแบบโดย HTML โปรแกรมที่นามาใช้ปรับแต่งเว็บแบบ HTML ได้ ในที่นี่จะใช้โปรแกรม Notepad++ สาหรับการปรับแต่งที่ ละเอี ย ดมากขึ้ น ในที่ นี้ เ ราจะปรั บ แต่ ง ไฟล์ ชื่ อ style ในโฟนเดอร์ Themes ของเรา โดยการแก้ไฟล์ชื่อ style จะต้องเข้าไปที่ โฟนเดอร์ WordPress ที่ เ ราโหลดมา >>root>> wordpressthaiedition>>wp-content >> themes >> gridster-lite
ภาพที่ 22 แสดงโปรแกรม Notepad++ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
ตั ้งค่ำภำษำให้ เป็ น Encode in UTF-8
ภาพที่ 23 แสดงการเปิดไฟล์ ชื่อ style ด้วย Notepad++ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
2 ภาพที่ 24 แสดงรายละเอียดภาษา HTML ใน Notepad++ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
- แสดงรายละเอียดของ Themes (หมายเลข 1) - แสดงรหัสสี (หมายเลข 2)
1
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 18
รูปแบบ HTML บน Notepad++
ภาพที่ 24 แสดงรายละเอียดภาษา HTML ใน Notepad++ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
< meta............. > คือ เป็นชุดคาสั่งการใส่รายละเอียดให้แก่เว็บใส่ เป็นเหมือน คาอธิบายหน้าเว็บของเรา ส่วนใหญ่แล้วจะเป็นคาที่อธิบายถึงเรื่องราวที่เกี่ยวข้องกับเว็บไซต์ของเรา แบบสั้นๆ แบบคาต่อคา มีแยกย่อยหลายคาสั่ง เช่น บอกว่าหน้านี้เป็นภาษาอะไร บอก search engines ว่าเป็นลิขสิทธิ์ของใคร
< charset=UTF-8> คือ รหัสของการแสดงตัวอักษร (แสดงผลได้ทุกภาษา) หรือ เรียกว่า N coding ภาษาไทยจะใช้รหัส ISO 8...........
<head> คือ ต้องใช้คาสั่งนี้ในการเขียน HTML ทุกครัง้ เสมอ ไม่งั้นจะได้หน้าเว็บที่ทางาน ได้ไม่ถูกต้อง บรรจุข้อมูลทีเ่ กี่ยวข้องกับเนือ้ หาของเอกสาร ใช้แยกหน้าเว็บออกเป็นสองส่วน ทุกอย่าง ในคาสั่ง HEAD จะถูกโหลดและแสดงผลโดย Browser ก่อนโหลดสิ่งต่างๆในคาสัง่ BODY
<TITLE></TITLE>ทาหน้าที่วางตัวหนังสือลงบนแถบน้าเงินด้านบนสุดของหน้าต่าง <Link href='.............................'> คือ คาสั่งให้เชื่อโยงไปยังลิ้ง ช่วยไม่ให้คุณไม่ ต้องพิมพ์ที่อยู่เต็มในทุกๆ link
border คือ เส้นขอบของตาราง ซึง่ ในบทนีจ้ ะพูดถึงการกาหนดเส้นขอบของตาราง โดย ขอบของตารางเราจะใช้ Attibute คาสั่ง border ในการควบคุม
INDEX ชื่อไฟล์แรกของเว็บไซด์ทเี่ ราสร้าง นามสกุล HTML (index.html) Sidebar = เนื้อหาทีอ่ ยู่ด้านข้าง Mine = เนื้อหาหลัก
คู่ มื อ ก า ร เ รี ย น รู้ เ กี่ ย ว กั บ W o r d P r e s s T h a i | 19
รูปแบบ CSS รูปแบบ CSS คือ ภาษาของสัญลักษณ์ของกราฟิกที่ถูกดึงขึ้นมาใช้งาน เช่น stylesheet (ทาให้ตัวหนังสื่อมีสสี ัน) #111111 คือ สี เกือบดา , #000000 คือ สีดา , #FFFFFF คือ สีขาว
color-hex คือ เว็บฟรี ใช้ในการดูรหัสสีรปู แบบ CSS เราสามารถเข้าไปเทียบสีได้ที่ URL http://www.color-hex.com/
1 2 3
ภาพที่ 25 แสดงเว็บฟรีใช้ในการเทียบรหัสสีที่ URL http://www.color-hex.com/ ที่มา : น.ส.ภรูรอง กตัญญตานุรักษ์
- แสดง URL ของ color-hex ที่ http://www.color-hex.com/ (หมายเลข 1) - การนารหัสสีในรูปแบบ CSS มาเทียบแสดงผลว่าเป็นสีอะไร (หมายเลข 2) -
แดงตัวอย่างสีทเี่ ราจะนาไปใช้ (หมายเลข 3)
Design by Proorong proorong.k@gmail.com