อาสา

การสรา้ งหนังสืออเิ ล็กทรอนิกส์

e-book

การสร้างเว็บเพจและหนังสืออเิ ล็กทรอนกิ ส์ | 2

"Ncesoft Flip Book Maker" เป็นซอฟตแ์ วรท์ ี่ใช้ในการสรา้ งหนงั สืออิเลก็ ทรอนกิ ส์ โดยสามารถนํา
ไฟล์เอกสารแบบ PDF ทม่ี ีอยมู่ าแปลงเปน็ หนงั สอื อเิ ลก็ ทรอนกิ สใ์ นรปู แบบที่พลิกไป-มาได้ ใชง้ านงา่ ยและไมจ่ าํ เปน็
ต้องมีทักษะการใชง้ านคอมพิวเตอรม์ ากนัก จึงนับว่าเป็นทางเลือกหนึ่งของผทู้ ่ีต้องการสร้างสอ่ื อเิ ลก็ ทรอนกิ ส์
ในรูปแบบใหม่ ให้มคี วามนา่ สนใจมากยง่ิ ขน้ึ

เริ่มตน้ ใชง้ าน
คลก้ิ ที่ Start > Program > Ncesoft > Ncesoft Flip Book Maker

หน้าจอโปรแกรม

ประกอบด้วย 4 ส่วน คอื

1. เมนหู ลกั คอื Setting ใชใ้ นการตง้ั ค่าต่างๆ ของโปรแกรม , File ใชใ้ นการสร้างไฟล์ใหม่ เปดิ ไฟล์ หรอื

บันทึกไฟล์ ทไ่ี ด้จดั ทํา และ Help ซึ่งจะแสดงวธิ กี ารใช้งาน และรุ่นของโปรแกรม

2. สว่ นทแ่ี สดงขัน้ ตอนการทํางาน ประกอบด้วย 1.Add File 2. Style 3. Publish

3. เคร่ืองมอื ท่ใี ช้ในการนํารูปภาพ ไฟล์เอกสาร หรอื เสียงดนตรี มาจดั ทาํ เปน็ หนงั สอื อิเล็กทรอนกิ ส์

ประกอบดว้ ย Add Photo , Edit Photo , Delete Photo และ Add music

4. พ้นื ทีใ่ นการทาํ งาน ที่จะแสดงรูปภาพ หรือ เอกสารต่างๆ ท่เี ลอื กมาเพอื่ ประกอบเป็นหนงั สือ

อิเลก็ ทรอนิกส์ 1
3
2

4

การสร้างเวบ็ เพจและหนังสอื อเิ ลก็ ทรอนิกส์ | 3

การสรา้ งหนังสอื อเิ ล็กทรอนกิ ส์จากไฟลร์ ูปภาพ
ข้ันตอนท่ี 1 : เลอื กรูปภาพที่ตอ้ งการรวมไว้ในโฟลเดอรเ์ ดยี วกัน เพื่อความสะดวกในการทํางาน
ขั้นตอนที่ 2 : คลิก้ ป่มุ Add Photo

ขนั้ ตอนท่ี 3 : เลอื กรูปภาพทต่ี อ้ งการ โดยสามารถเลือกครง้ั ละหลายๆไฟลไ์ ด้ โดยการกดปมุ่ Ctrlแลว้ คลิ้กเลอื กไฟล์

การสร้างเว็บเพจและหนังสืออิเลก็ ทรอนิกส์ | 4

ข้นั ตอนท่ี 4 : โปรแกรมจะแสดงรูปภาพที่เลือก ซ่งึ สามารถจัดการรูปภาพได้ ดงั น้ี
- จดั เรียงลาํ ดับของภาพ โดยการคลิ้กซา้ ยคา้ งไว้ท่ภี าพ แลว้ ลากเพื่อเรยี งลําดับตามทต่ี อ้ งการ
- เพม่ิ ภาพ โดยคลิก้ ที่ปุม่ Add Photo และเลอื กภาพเพม่ิ เตมิ
- ลบภาพ โดยคล้กิ ทภ่ี าพทตี่ อ้ งการลบแลว้ คล้กิ ปุ่ม Delete Photo

ขน้ั ตอนที่ 5 : หากต้องการใส่เสียงดนตรีเพ่อื ใหม้ ีเสียงเพลง เมื่อเปิดอา่ นหนังสอื ใหค้ ลก้ิ ทปี่ ุ่ม Add Music จากน้นั
เลือกเพลงที่ต้องการ (ไฟล์ .mp3) แลว้ คลกิ้ OK

การสร้างเว็บเพจและหนงั สืออเิ ลก็ ทรอนกิ ส์ | 5

ขัน้ ตอนที่ 6 : คล้ิกทป่ี มุ่ 2.Style เพ่ือเลือกรปู แบบของหนงั สืออเิ ลก็ ทรอนิกส์ โดยคลกิ้ ท่ี tab Style เพื่อเลอื ก
รปู แบบหนงั สอื และเลอื ก tab Effect เพือ่ ตกแตง่ หนังสือเพิม่ เตมิ ดว้ ยเอฟเฟคตส์ วยๆ

สามารถคลิ้กทป่ี มุ่ Customize เพอ่ื ปรับเปลย่ี นรปู แบบทต่ี อ้ งการได้ ดังน้ี
- Background Color : สีพ้ืนหลงั เลอื กแถบสี หรอื วงลอ้ สี แลว้ คล้กิ เลอื กสที ีต่ ้องการ

การสรา้ งเว็บเพจและหนังสืออิเลก็ ทรอนกิ ส์ | 6

- Background File : ภาพพ้ืนหลัง คลิ้กเครอ่ื งหมายถกู หนา้ คําว่า Background File เพือ่ ใหแ้ สดง
ภาพพืน้ หลงั (หากภาพทีเ่ ลือกมีขนาดใหญจ่ ะไมแ่ สดงสีพน้ื หลงั หรือ Background Color) และสามารถเลอื ก
รูปภาพทต่ี ้องการใหเ้ ปน็ พ้นื หลงั ได้ โดยคลิ้กปุ่มเลอื กไฟล์ (สญั ลกั ษณ์เป็นรูป ...) แลว้ เลอื กไฟลท์ ตี่ ้องการ

- Control Button : ปุ่มทใ่ี ชใ้ นการควบคมุ การแสดงผล

การสร้างเวบ็ เพจและหนังสืออเิ ลก็ ทรอนกิ ส์ | 7

- Navigation Bar : แถบแสดงช่อื เรอื่ ง/เลขหนา้ สามารถปรับแต่งได้ ดังรปู

- Book Page : ปรบั สีพ้นื หลังหรือรูปพ้นื หลงั ของหน้าปก/หนา้ หนังสือ โดยปรบั ในส่วนของ
Cover และ Page

การสร้างเวบ็ เพจและหนงั สืออิเล็กทรอนิกส์ | 8

สําหรับส่วนของ Use content page ใชใ้ นการแสดงหน้าสารบญั หากคลกิ้ เครื่องหมายถูก โปรแกรม
จะสรา้ งหน้าสารบญั รูปภาพให้เองโดยอตั โนมัติ ดังรูป

การสร้างเว็บเพจและหนงั สอื อิเล็กทรอนกิ ส์ | 9

ขน้ั ตอนที่ 7 : คลิก้ ทปี่ ุ่ม 3.Publish เพือ่ บันทกึ ไฟลท์ จ่ี ัดทําไว้ในรูปแบบทีต่ ้องการ ซึง่ มีใหเ้ ลือก 5 รปู แบบ คือ
SWF , EXE , HTML , EMAIL และ Screen Server โดยสามารถกดปมุ่ Play เพือ่ ดไู ฟลท์ ่ีจดั ทาํ กอ่ นสง่ ออกไฟล์ได้

ตัวอยา่ งการเลือกสง่ ออกไฟล์เป็น Html ใหเ้ ลอื กโฟลเดอรท์ ่ตี ้องการจะส่งออก และตั้งชอ่ื ไฟล์ ในช่อง
FileName โดยตั้งชือ่ เปน็ ภาษาองั กฤษ เทา่ น้นั

การสรา้ งเวบ็ เพจและหนงั สืออเิ ล็กทรอนิกส์ | 10

ข้ันตอนท่ี 8 : ปรบั ขนาดและความละเอียดของหนังสืออิเลก็ ทรอนิกสท์ จ่ี ดั ทาํ ขน้ึ โดยคลิ้กทเี่ มนู Setting จากน้นั
ปรับขนาดตามท่ีตอ้ งการ ดงั น้ี

- Output Options
ƒ Width/Height กําหนดความกวา้ ง ความสูงของหนงั สอื
ƒ Photo Quality กาํ หนดคณุ ภาพของรปู ภาพทแี่ สดง

- Play Options กําหนดการเปิดหนา้ หนงั สือ โดยสามารถเลือกใหเ้ ปิดหนา้ หนังสือเองอัตโนมัติ
(Auto Play) หรือ ต้องคลิ้กเพอื่ เปดิ หนา้ หนังสือ (Manually Play)

- Loop Options กําหนดการเปดิ หนา้ หนงั สือ ว่าเม่ือจบเลม่ แลว้ ให้วนมาหนา้ แรกหรือไม่

การสรา้ งเว็บเพจและหนังสอื อเิ ลก็ ทรอนิกส์ | 11

การนําเขา้ ขอ้ มูลจากเอกสารประเภท PDF เพื่อสรา้ งหนงั สืออเิ ลก็ ทรอนิกส์
ขั้นตอนท่ี 1 : คลกิ้ ปมุ่ Add Photo แลว้ เลอื กไฟล์ PDF ท่ตี อ้ งการ

ขัน้ ตอนท่ี 2 : โปรแกรมจะแสดงเอกสารทุกหนา้ ในไฟลท์ ที่ าํ การเลือกไว้ ผู้ใชง้ านสามารถจัดเรียง เพ่มิ /ลบหนา้
และปรบั รูปแบบของหนังสอื อิเลก็ ทรอนิกสไ์ ดต้ าม ขนั้ ตอนที่ 4-7 ในหวั ข้อ การสร้างหนังสืออเิ ลก็ ทรอนกิ ส์จาก
ไฟลร์ ปู ภาพ

การสรา้ งเวบ็ เพจและหนงั สืออิเล็กทรอนิกส์ | 12

เมนอู น่ื ๆ ในโปรแกรม
เมนู File : ใชใ้ นการสรา้ ง/เปดิ /บันทึกหนังสืออเิ ล็กทรอนิกส์ โดยไฟลท์ บ่ี นั ทกึ ไดจ้ ากโปรแกรม คือ ไฟล์ท่มี ี
นามสกลุ .fbm (Flip Book Maker Projects)

เมนู Help : แนะนําการใช้งานโปรแกรม และแสดงเวอร์ชั่นของโปรแกรม

การสรา้ งเวบ็ เพจและหนังสืออเิ ลก็ ทรอนิกส์ | 13

ตัวอย่างหนงั สอื อิเลก็ ทรอนกิ ส์

การสร้างเว็บเพจและหนังสอื อิเลก็ ทรอนกิ ส์ | 14

การสร้างเว็บเพจและหนังสอื อเิ ลก็ ทรอนกิ ส์ | 15

การสร้างเว็บเพจ

การสร้างเว็บเพจและหนงั สืออิเลก็ ทรอนิกส์ | 16

รู้จักกบั Dreamweaver
Dreamweaver ถือได้วา่ เป็นเครื่องมือสาํ หรับสร้างเว็บเพจ และ ดแู ลเว็บไซต์ท่มี ีประสิทธิภาพสงู

ซ่งึ เป็นโปรแกรมสาํ หรบั เขยี นภาษา HTML โดยเฉพาะ พรอ้ มทั้งสามารถแทรก Java Scripts และ ลกู เล่นตา่ งๆได้
มากมาย โดยทผ่ี ้ใู ช้ไม่จําเป็นต้องรู้หลักภาษา HTML มากนักซ่งึ ช่วยประหยดั เวลา และ ทํางานไดส้ ะดวกย่ิงข้ึน

ความสามารถของ Dreamweaver
1. สนับสนนุ การทํางานแบบ WYSIWYG (What You See Is What You Get) คอื ผใู้ ชง้ านออกแบบ

หนา้ เว็บไซต์ และโปรแกรมจะเขยี นโคด้ โปรแกรมให้เองโดยอัตโนมตั ิ
2. มีเครื่องมอื ในการช่วยสรา้ งเว็บเพจ ทม่ี ีความยืดหยุ่นสงู
3. สนับสนนุ ภาษาสคริปต์ต่างๆ ทง้ั ฝงั่ Client และ Server เชน่ Java, ASP, PHP, CGI, VBScript
4. มเี ครอื่ งมอื ในการ Upload หน้าเวบ็ เพจไปท่เี ครอื่ ง Server เพอ่ื ทาํ การเผยแพรง่ านทสี่ ร้างใน

อินเทอรเ์ นต็ โดยการส่งผา่ น FTP หรือ โดยการใชโ้ ปรแกรม FTP ภายนอกชว่ ย เช่น WS FTP
5. รองรับมลั ติมีเดยี เช่น การใส่เสียง, การแทรกไฟล์วดิ ีโอ

เร่มิ ตน้ ใช้งาน
คลก้ิ ท่ี Start > Program > Adobe Dreamweaver CS3

หน้าจอโปรแกรม
• แถบคาํ ส่งั (Menu Bar) เปน็ แถบที่ใชเ้ กบ็ คําส่ังทง้ั หมดของโปรแกรม
• แถบคาํ เครอ่ื งมอื (Toolbar) รวบรวมปุ่มคาํ ส่งั ทใี่ ชง้ านบอ่ ย
• แถบวตั ถุ (Object Palette) เป็นกล่มุ เครือ่ งมือตา่ งๆ ท่ีใชใ้ นการควบคุมวตั ถบุ นชนิ้ งาน เอกสารเว็บ เชน่

เสน้ กราฟิก (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร์ (Layer)
• แถบแสดงสถานะ (Status Bar)
• แถบควบคุมการทาํ งาน (Properties Palette) เปน็ รายการที่ปรบั เปลย่ี นไดต้ ามลักษณะการเลอื กข้อมลู

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

• สว่ นของ Panel Group เปน็ กลมุ่ ของแถบเครอื่ งมือท่ีสามารถเรียกใชง้ านไดอ้ ย่างรวดเร็ว เพือ่ ให้งา่ ย
ในการสรา้ ง Application บนอินเทอร์เน็ต เชน่ การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจ
ได้อยา่ งง่ายๆ โดยสามารถเรียกใชง้ านได้จาก Panel Group

การสร้างเว็บเพจและหนงั สอื อิเล็กทรอนกิ ส์ | 17

หนา้ จอแสดงผล (Document Windows)
หน้าตา่ งการทํางานของ Dreamweaver สามารถเลอื กหนา้ ตา่ งการทํางานได้ 3 รูปแบบ โดยการคลิก้

ไอคอนท่อี ยูใ่ นแถบเครื่องมือ Toolbar ดังน้ี
- Show Code View เป็นหนา้ ตา่ งทีใ่ ห้แสดงเฉพาะโค้ด HTML ของหนา้ เว็บเพจทกี่ ําลงั ทํางาน
- Show Code and Design View เป็นหนา้ ต่างทแ่ี สดงโค้ด HTML และหนา้ เวบ็ ท่ีกําลงั ทํางาน
- Show Design View แสดงหนา้ เวบ็ เพจไม่แสดงโคด้ HTML

การสรา้ งเว็บเพจและหนังสอื อิเล็กทรอนกิ ส์ | 18

การกําหนดรายละเอียดของหนา้ เว็บเพจ
กอ่ นเริ่มจัดทาํ หนา้ เวบ็ เพจ ควรกําหนดรายละเอียดของหนา้ เว็บ ดงั นี้
1. เลือกเมนู Modify > Page Properties
2. ปรับเปลีย่ นคา่ ตามทีต่ ้องการ

การสร้างตาราง (Table)
การใชต้ ารางเหมาะสําหรับการนาํ เสนอขอ้ มลู จํานวนมาก เพื่อความสะดวกในการจดั การข้อมลู

และความเป็นสัดส่วน ควรจัดระบบการนาํ เสนอข้อมูลของหน้าเวบ็ เพจโดยการใช้ตารางเป็นตัวจดั การในการจดั

วางขอ้ มลู ในแต่ละหน้าเวบ็ เพจ ขัน้ ตอนการสร้างตารางสามารถทําไดโ้ ดยเลอื ก ทแ่ี ทบ็ Object และ

กาํ หนดค่าตา่ ง ๆ ของ ตาราง แลว้ คลก้ิ ปุม่ OK

- Rows : จาํ นวนแถวท่ีตอ้ งการ - Column : จาํ นวนคอลัมนท์ ี่ต้องการ

- Width : ความกว้างของตาราง - Border : ความหนาของขอบตาราง

- Cell Padding : ระยะระหวา่ งขอ้ ความกบั ขอบตารางCell

- Cell Spacing : ระยะระหว่างแตล่ ะเซลลใ์ นตาราง

การสรา้ งเว็บเพจและหนงั สอื อเิ ล็กทรอนิกส์ | 19

หากตอ้ งการปรบั คา่ ตารางเพิ่มเตมิ ใหค้ ลกิ้ เลอื กตาราง แล้วปรับท่ีแถบ Properties

สพี น้ื หลัง ความหนาเสน้ ขอบ
สีเสน้ ขอบ

ภาพพื้นหลัง

การแทรกแถวและคอลัมน์
1. นาํ เคอรเ์ ซอรไ์ ปวางยังตาํ แหนง่ ที่ต้องการจะแทรกแถว
2. Click Mouse ปุ่มขวาจะปรากฎเมนูย่อย ใหเ้ ลอื ก Table > Insert Rows or Columns..
3. จะมี Dialog Box ใหก้ าํ หนดรูปแบบของการแทรกตารางวา่ จะเลอื กแทรก Rows หรอื Column
4. กาํ หนดการแทรก Rows ใหแ้ ทรกกอ่ น (Above the Selection)หรือหลัง(Before the Selection) ได้
5. ในกรณีท่ีต้องแทรก Column จะมใี หแ้ ทกกอ่ น (Before current Column) หรอื หลงั (After

current Column)

การสรา้ งเวบ็ เพจและหนงั สอื อิเล็กทรอนกิ ส์ | 20

การปรบั รปู แบบของเซลล์ (Cell)

เม่อื คลิก้ ทแี่ ต่ละช่องของตาราง หรือ ที่เรียกวา่ เซลล์ (Cell) จะสามารถปรบั คา่ ของแต่ละช่องไดท้ ่แี ถบ Properties

จดั ตาํ แหน่งตัวอักษรในเซลล์ จัดรปู แบบตัวอักษร

รวม/แยกเซลล์ ความกว้าง/สูงของเซลล์ ใส่สพี น้ื หลังและภาพพ้ืนหลงั

การแทรกรูปภาพ
คล้กิ ที่แทบ็ Object และเลือกรูปภาพทต่ี อ้ งการ จากน้ัน คลิก้ OK เพือ่ แทรกรูปภาพ

*ควรบันทึกรปู ภาพทจ่ี ะใช้ในการจัดทาํ เว็บไซตไ์ ว้ในโฟลเดอร์เดยี วกันกบั ขอ้ มลู ทจ่ี ดั ทาํ เว็บไซต์ กอ่ นแทรกรปู ภาพ*

การสร้างเว็บเพจและหนังสืออิเลก็ ทรอนกิ ส์ | 21

การพิมพ์ข้อความและการกาํ หนดตวั อักษร
การพมิ พ์ข้อความในเว็บเพจจะคล้ายกบั การพมิ พ์เอกสารใน Word โดยเราสามารถจัดรูปแบบข้อความให้

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

- Format เปน็ รูปแบบตัวอกั ษรสาํ เรจ็ ทเี่ รานาํ มากําหนดใหก้ ับข้อความได้
- Font รูปแบบตัวอักษร
- Size ขนาดของตวั อักษร
- Color กําหนดสใี หต้ วั อกั ษร

การเชอ่ื มโยง (Link)
การเชื่อมโยงบนเวบ็ เพจมดี ว้ ยกันหลายรปู แบบ ดงั นี้
1. การเช่ือมโยงภายในเว็บเพจเดยี วกนั
2. การเชื่อมโยงภายในเว็บไซต์เดียวกัน มขี ั้นตอนดงั นี้
2.1 ทําแถบสคี ลุมข้อความท่ีใช้เป็นจดุ ลงิ ค์
2.2 สงั เกตท่แี ถบ Properties จะเห็นรายการ Link พมิ พ์ชอื่ ไฟล์ทตี่ อ้ งการให้ลิงค์

ชอื่ ไฟล์อาจจะเป็นไฟล์ .html หรือ ไฟลใ์ ดๆ ก็ไดโ้ ดยจะตอ้ งระบุ "นามสกลุ " ของไฟล์ดว้ ยเสมอ สามารถใช้
ปมุ่ สญั ลกั ษณร์ ูปแฟ้มสเี หลือง เลือกไฟลไ์ ดเ้ มอื่ กาํ หนดช่อื ไฟลท์ ต่ี ้องการลิงค์จากรายการ Link เรียบร้อยแลว้
ให้นาํ เมาส์มาคลิกในพน้ื ทที่ ํางาน เพื่อยนื ยนั การกาํ หนดลิงค์

3. การเชื่อมโยงไปยงั เว็บไซต์อน่ื ใหใ้ ส่ URL ของเวบ็ ไซต์ เช่น http://www.doae.go.th ในชอ่ ง Link
4. การเชือ่ มโยงไปยัง e-Mail พิมพ์คาํ บังคับในการทาํ จดุ ลงิ ค์เพอ่ื สง่ เมล์คอื mailto: แลว้ ตามด้วย E-Mail
Address ในช่อง Link

การยกเลิกลิงค์
1. ใหค้ ลิกเมาสณ์ จุดลิงค์เดิม
2. ลบรายช่ือไฟล์ออกจากรายการ Link

*** คมู่ ือการจดั ทาํ เวบ็ เพจปรับปรุงจาก

http://aster.spu.ac.th/file/user/66/66/upload/doc_train/dreamweverCS3.pdf