E book4
- 2. มารู้จักโปรแกรม
ที่ใช้สร้างเว็บเพจ
เว็บเพจนั้นมีความจาเป็นมากใน
ระบบ WWW เนื่องจากเป็นหน้าที่ต้องแสดงข้อมูล
เมื่อมีผู้เรียกใช้งาน ซึ่งการออกแบบขึ้นอยู่กับระดับ
ความสามารถของผู้จัดทา แต่ก็มีโปรแกรมที่ช่วยในการ
สร้างเพื่อให้สามารถใช้งานได้มากยิ่งขึ้นบนพื้นฐาน
ภาษา HTML ดังตัวอย่างต่อไปนี้
1. โปรแกรม Notepad เป็นโปรแกรมที่มีมา
พร้อมกับวินโดว์ สามารถนามาสร้างเป็นข้อมูลเว็บ
เพจได้ แต่ผู้ใช้ต้องมีความรู้ด้านการเขียนโปรแกรม
เป็นอย่างดี เพราะต้องเขียนด้วยคาสั่งทุกบรรทัด
2. โปรแกรม FrontPage เป็นโปรแกรมที่ออกแบบมา
เพื่อให้สามารถใช้งานได้ง่ายซึ่งแยกจากชุด
ของ Microsoft Office แต่มีการพัฒนาพร้อม ๆ กัน
ตามรุ่น
3. โปรแกรม Dreamweaver เป็นโปรแกรมที่ได้รับ
ความนิยมมากในปัจจุบัน ซึ่งใช้งานง่าย ต้องการทาอะไร
ก็สามารถใช้เครื่องมือช่วยในการสร้างเกือบจะทั้งหมด
4. โปรแกรม Flash เป็นโปรแกรมที่ทางานเน้น
ภาพเคลื่อนไหว แต่ก็สามารถสร้างเว็บเพจได้ เขียนคาสั่ง
ต่าง ๆ ได้ เหมือนกับโปรแกรมอื่น ๆ เหมาะสาหรับผู้ที่
ต้องการเน้นกราฟิก
5. โปรแกรม Microsoft Word เป็นโปรแกรมที่คุ้นเคย
สามารถใช้งานได้ง่าย เหมาะสาหรับผู้ที่ไม่มีพื้นฐานใน
การสร้างเว็บมาก่อน เพราะโปรแกรมจะออกแบบให้มีทั้ง
ปรับแต่งเอง หรือใช้แบบอัตโนมัติที่มีให้มาพร้อมกับ
โปรแกรม
- 3. การสร้างเว็บเพจ
ด้วยโปรแกรม Word
การสร้างเว็บไซต์ โดยโปรแกรม Microsoft Word
จะได้หน้าต่างแทรกลิงค์ ดังนี้
ไฮเปอร์ลิงค์ หมายถึง การเชื่อมโยงเอกสารจากจุดหนึ่ง
ไปยังอีกจุดหนึ่ง
เรียกสั้นว่า ลิงค์ ( links ) ซึ่งมีหลายลักษณะ ทั้งการ
ลิงค์ภายในเว็บเพจหน้าเดียวกัน ลิงค์ระหว่างหน้าใน
เว็บไซต์เดียวกัน และลิงค์ไปยังเว็บไซต์อื่น เหตุผลที่
ต้องสร้างลิงค์
ก็คือ ข้อมูลที่จะนาเสนอในเว็บเพจมีจานวนมากไม่
สามารถนาเสนอให้ครบได้ในหน้าเดียว จึงต้อง
เชื่อมโยงเอกสารจากหน้าหนึ่งไปยังหน้าอื่นๆ
- 5. ส่วนของเนื้อหา
กาหนดรูปแบบของการเชื่อมโยง
การใส่พื้นหลัง ( Background) และลักษณะพิเศษใน
เว็บเพจ
พิมพ์ข้อความ ตกแต่งสีสัน แทรกภาพประกอบ
และสร้างตารางได้เหมือนกับการสร้างเอกสาร Word
ปกติ
การเพิ่มเติมลักษณะพิเศษ และไล่ระดับสี ให้คลิกเลือก
คาสั่ง Fill Effects
คลิกที่แท็บ ไล่ระดับสี เลือกคาำาสั่งย่อย เช่น สองสี และ
ลักษณะแรเงา
ที่คาสั่ง เชื่อมโยงไปยัง ( Link to ) : ให้คลิกเลือก แฟ้ม
หรือเว็บเพจที่มีอยู่
( Existing File or Web Page )
จะได้หน้าต่างสาหรับบันทึกเอกสาร ให้เลือกชนิดของ
ไฟล์เป็นแบบ
Web Page โดย Word จะแยกภาพหรือกราฟฟิก
ไปไว้เป็นไฟล์ต่างหาก
ถ้าเลือกเป็นแบบ Single File Web Page
จะเป็นการบันทึกเว็บทั้งหมดไว้ในไฟล์เดียวกัน
การบันทึกเว็บเพจ
การลิงค์ไปยังเว็บเพจอื่น
การเปลี่ยนข้อความไตเติ้ลของเว็บเพจให้คลิกที่คาสั่ง
เปลี่ยนชื่อเรื่อง จะได้หน้าต่างสาหรับพิมพ์ชื่อเรื่องใหม่
แล้วคลิก ตกลง
- 6. การแทรกภาพประกอบข้อความ เราสามารถนาภาพมา
ใส่ไว้ในเว็บเพจด้วยคาสั่ง แทรก > รูปภาพ ( Insert >
Picture ) แล้วเลือกภาพ เช่น ภาพตัดปะ ภาพจาก
แฟ้ม
เป็นต้น เมื่อได้ภาพแล้วสามารถปรับขนาด วางตาแหน่ง
หมุนและปรับลักษณะภาพให้เหมาะสม
กับข้อความได้
การสร้างไฮเปอร์ลิงค์ ( Hyperlink )
เลือกพื้นผิว คลิกเลือกคาำาสั่ง Fill Effects >
texture
นาภาพมาสร้างเป็นพื้นหลัง คลิกเลือกคาำาสั่ง Fill
Effects > Picture
ที่บานหน้าต่างให้เลือกคาสั่งเว็บเพจ(Webpage )
วางโครงสร้าง
เลือกลวดลายของพื้นหลังของเว็บเพจ คลิกเลือกคาสั่ง
Fill Effects > Pattern
หากต้องการเลือกสีพื้น ให้เลือกได้ทันที
ถ้าสีพื้นที่มีในถาดสีไม่ตรงกับที่ต้องการ ให้คลิกที่คาสั่ง
More Colors
จะได้ถาดสีเพื่อกาหนดสีผสมใช้เอง เลือกสีที่ต้องการ
เสร็จแล้วคลิกตกลง
เลือกรูปแบบสาเร็จที่ Word สร้างเตรียมไว้ให้ด้วย
คาสั่ง
Page Layout > Themes
ทดลองเปิดไฟล์ด้วยเบราว์เซอร์ IE จะได้เว็บเพจ ดังนี้
การตกแต่งตัวอักษร (Font) ใน Word
สามารถสร้างตัวอักษรได้หลากหลาย
ตลอดจนสีสันให้ สวยงามได้ง่าย
- 7. คาสั่ง มองหาใน ( Look in ) : คลิกเลือก โฟลเดอร์
ปัจจุบัน ( Current Folder )
เปิดไฟล์ใหม่ คลิกคาสั่ง แฟ้ม>สร้าง ( File > New )
การสร้างเว็บไซต์ก็คือการสร้างเอกสารสาหรับแสดงผล
บนอินเทอร์เน็ตหรือเว็บราว์เซอร์โดยใช้มาตรฐาน
HTML ซึ่งผู้สร้างจะต้องมีความรู้และเข้าใจโครงสร้าง
ภาษา HTML พอสมควรจึงจะสร้างได้ปัจจุบันได้มีการ
พัฒนาโปรแกรมสาเร็จรูปช่วยในการสร้างเว็บเพจ เช่น
Dreamweaver
และ FrontPage เป็นต้น
เพื่อช่วยให้ผู้พัฒนาเว็บออกแบบได้อย่างสวยงามและ
รวดเร็ว โดยไม่ต้องพิมพ์คาำาสั่งภาษา HTML
หากแต่ใช้กราฟิกเข้ามาช่วยออกแบบ
อย่างไรก็ตาม การสร้างเว็บเพจที่ง่ายอีกวิธีหนึ่ง คือ
การสร้างด้วยโปรแกรมไมโครซอฟต์เวิร์ด
ซึ่งมีวิธีการสร้าง ดังนี้
การตกแต่งเนื้อหา ( Content) ในเว็บเพจ
1. คลิกที่คาำาสั่ง แฟ้ม > บันทึกเป็นเว็บเพจ ( File
> Save as Web Page
4. จะได้ตัวเลือกชุดรูปแบบ เลือกชุดรูปแบบแล้วคลิก
ตกลง
- 17. 3. ถ้าคุณต้องการให้ไฟล์ที่แทรกปรากฏเป็นไอคอนที่
คลิกได้แทนที่จะเป็นหน้าแรกของไฟล์ให้เลือกแสดงเป็น
ไอคอน ถ้าเลือกกล่องกาเครื่องหมายนี้คุณสามารถ
เลือกไอคอนอื่นได้โดยการคลิกเปลี่ยนไอคอน
เคล็ดลับ: ข้อมูลในส่วนผลลัพธ์จะเปลี่ยนแปลงโดยยึด
ตามว่ามีการเลือกลิงก์ไปยังไฟล์และแสดงเป็นไอคอน
หรือไม่ ใช้ข้อมูลนี้เพื่อช่วยให้คุณระบุสิ่งที่คุณต้องการ
แทรกและวิธีที่คุณต้องการให้ปรากฏ
วัตถุฝังตัวเปรียบเทียบกับวัตถุที่เชื่อมโยง
วัตถุฝังตัวจะกลายเป็นส่วนหนึ่งของข้อความอีเมลหรือ
ข้อความอีเมลและหลังจากที่ถูกแทรกจะไม่มีการ
เชื่อมต่อกับไฟล์ต้นฉบับใดๆอีกต่อไป
วัตถุที่เชื่อมโยงสามารถอัปเดตได้ถ้าไฟล์ต้นฉบับถูก
ปรับเปลี่ยน ข้อมูลที่มีการเชื่อมโยงจะถูกเก็บไว้ในไฟล์
ต้นฉบับ ไฟล์ Word หรือข้อความอีเมล (ไฟล์
ปลายทาง) จะเก็บเฉพาะตาแหน่งที่ตั้งของไฟล์ต้นฉบับ
เท่านั้นและจะแสดงการแสดงของข้อมูลที่เชื่อมโยง ใช้
วัตถุที่ลิงก์ถ้ามีการพิจารณาขนาดไฟล์
วัตถุฝังตัวเปรียบเทียบกับวัตถุที่เชื่อมโยง
วัตถุฝังตัวจะกลายเป็นส่วนหนึ่งของข้อความอีเมลหรือ
ข้อความอีเมลและหลังจากที่ถูกแทรกจะไม่มีการ
เชื่อมต่อกับไฟล์ต้นฉบับใดๆอีกต่อไป
- 18. การเชื่อมโยงข้อมูล
การสร้างจุดเชื่อมโยง (Hyperlink) เป็นการเชื่อมโยง
กันจากจุดหนึ่งของเอกสารไปยังอีกตาแหน่งหนึ่ง
ของเอกสารเดียวกันหรือต่างเอกสารกันบนอินเตอร์เน็ต
โดยใช้ ข้อความ ภาพ หรือเมนูแบบดร็อปดาวน์ อย่างใน
อย่างหนึ่ง เพื่อเป็นต้นทางในการเชื่อมโยงไปสู่เอกสาร
ปลายทาง ซึ่งอาจเป็นจุดใดจุดหนึ่งในเอกสารเดียวกัน
(Named Anchor), เว็บเพจอื่น ๆ ,เว็บไซต์, อีเมล์ ,
หรือแม้แต่ไฟล์ข้อมูลสาหรับดาวน์โหลดและการรันไฟล์
โปรแกรม
เป็นต้น
การกาหนดเป้าหมายการเชื่อมโยง
ในกรณีที่เว็บเพจมีเนื้อหายาว ๆ แสดงผลไม่พอกับ
จอภาพ ผู้อ่านจะต้องเลื่อนหน้าจอเพื่อดูข้อมูลด้านล่าง
ผู้ออกแบบเว็บเพจควรกาหนดการเชื่อมโยงโดยสร้าง
เป็นหัวเรื่องแยกไว้ต่างหาก เมื่อผู้อ่านต้องการทราบ
ข้อมูลเรื่องนั้นสามารถคลิกที่ชื่อเรื่องแล้วเชื่อมโยงไปยัง
เนื้อเรื่องนั้นทันที การเชื่อมโยงในหน้าเว็บเดียวกัน มี
ขั้นตอนดังนี้
1. คลิกที่รูปภาพ ข้อความหรือตารางที่เราต้องการกา
หนดจุดเป้าหมาย 2. เลือกคาสั่ง Insert > Name
Anchor หรือใช้แป้น Ctrl + Alt + A จะได้
หน้าต่าง 3. ตั้งชื่อจุดเป้าหมาย 4. คลิก OK จะ
ปรากฏรูปสมอเรือกากับอยู่ที่จุดเป้าหมาย
- 20. 2. การเชื่อมโยงภายในเว็บไซต์เดียวกัน การสร้างจุด
เชื่อมโยง (Hyperlink) เป็นการเชื่อมโยงกันจากจุด
หนึ่งของเอกสารไปยังอีกตาแหน่งหนึ่ง
ของเอกสารเดียวกันหรือต่างเอกสารกันบน
อินเทอร์เน็ต โดยใช้ข้อความภาพหรือเมนูแบบดร็อป
ดาวน์ อย่างใดอย่างหนึ่งเพื่อเป็นต้นทางในการ
เชื่อมโยงไปสู่เอกสารปลายทาง
การกาหนดเป้าหมายการเชื่อมโยง
เป็นการเชื่อมโยงในเว็บเพจเดียวกัน หรือลิงค์ไปยังไฟล์
อีกไฟล์ที่อยู่ในเว็บไซต์เดียวกันโดยให้เปิดไฟล์นั้น ขึ้นมา
ทั้งไฟล์ การเชื่อมโยงในเว็บไซต์เดียวกัน มีวิธีการดังนี้
1. คลิกที่รูปภาพ ข้อความหรือตารางที่เราต้องการใช้
เป็นจุดเชื่อมโยง
2. ไปที่ช่อง Link เพื่อเลือกไฟล์
3. จะได้หน้าต่าง Select File เลือกไฟล์ที่ต้องการ
แล้วกด OK
4. บันทึกไฟล์ กดแป้น F12 เพื่อดูผลบนเว็บเบราว์เซอร์
- 21. 3. การเชื่อมโยงไปยังเว็บอื่น การกาหนดการเชื่อมโยง
ไปยังเว็บไซต์อื่น ๆ ที่เกี่ยวข้อง เพื่อต้องการให้ผู้ชม
ศึกษาข้อมูลเพิ่มเติม มีขั้นตอนดังนี้
1. เลือกองค์ประกอบที่จะสร้างไฮเปอร์ลิงค์ เช่น
ข้อความ , ภาพ 2. พิมพ์ URL ของเว็บไซต์ปลายทาง
4. การเชื่อมโยงไปยังอีเมล์ การเชื่อมโยงไปยังอีเมล์
คือ การสร้างอีเมล์แอดเดรสของเราไว้สาหรับ ให้ผู้
ต้องการจะติดต่อได้พิมพ์จดหมายส่งมา
ได้ทันทีโดยไม่ต้องเสียเวลาพิมพ์อีเมล์แอดเดรสอีก โดย
ปกติจะอยู่ในเว็บเพจหน้า ”ติดต่อบริษัท”
1. เลือกข้อความ หรือภาพที่สร้างไฮเปอร์ลิงค์เพื่อส่ง
อีเมล์ 2. พิมพ์ mailto: ตามด้วยอีเมล์แอดเดรส
5. การเชื่อมโยงโดย Map Link Map Link คือ การ
แบ่งรูปภาพออกเป็นบริเวณย่อยเฉพาะบางส่วนของ
รูปภาพเพื่อกาหนดให้เป็นลิงค์
ไปยังปลายทางที่แตกต่างกัน เนื่องจากในภาพสามารถมี
ได้หลายลิงค์ด้วยกัน
การเชื่อมโยงแบบแมพลิงค์ มีวิธีดังนี้
1.คลิกเลือกรูปที่ต้องการสร้างลิงค์ 2. เลือกเครื่องมือใน
Properties Inspector
สาหรับวาดพื้นทีลิงค์เป็นสี่เหลี่ยม
สาหรับวาดพื้นทีลิงค์เป็นหลายเหลี่ยม
- 22. 3. วาดบริเวณที่ต้องการลิงค์
6. การแก้ไขการเชื่อมโยงเว็บเพจ การแก้ไขการเปิด
หน้าเว็บเพจเป็นการกาหนดให้แสดงเว็บเพจที่ลิงค์
ตรงที่ใด ๆ แบ่งเว็บเพจ
โดยแบ่งออกเป็น 4 ลักษณะดังน
_blank เป็นการเปิดเว็บเพจปลายทาง
_parent เป็นการแสดงเว็บเพจในเฟรมที่ครอบอยู่ในเฟรม
ปัจจุบัน
_self เป็นการแสดงเว็บเพจในเฟรมเดิมของลิงค์
_top เป็นการแสดงเว็บเพจในหน้าวินโดวส์เดิม โดยยกเลิก
เฟรมที่ครอบอยู่ทั้งหมด
7. การกาหนดคุณสมบัติการเชื่อมโยง การเชื่อมโยงที่
กาหนดไว้ใน Properties เป็นคุณสมบัติที่ตั้งค่าไว้ใน
Page Properties
ซึ่งสามารถกาหนดคุณสมบัติการเชื่อมโยงดังนี้
1. คลิกขวาที่หน้าเว็บเพจ แล้วเลือกคาสั่ง Page
Properties