SlideShare a Scribd company logo
1 of 14
Download to read offline
คู่มือประกอบการสร้างเว็บไซต์
    โดยโปรแกรม Microsoft Word


               จัดทาโดย


    1. นายพิสิทธ์          สุวรรณา
    2. นายจอมพล            รัตนา
    3. นางสาวประกายมาศ รอดทะพร
    4. นางสาวธิดารัตน์     ศรีสะเทียน
    5. นางสาววรรณิษา       ชื่อมี


    ชั้นปีที่ 1 คณะศึกษาศาสตร์
สาขา เทคโนโลยีและสื่อสารการศึกษา
     มหาวิทยาลัยมหาสารคาม
ก


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


                                  สารบัญ
เรื่อง                                                             หน้า
วางโครงสร้าง……………………………………………………………………………………1

การสร้างเว็บไซต์ด้วยโปรแกรม Microsoft Word……………………………………………….2

การใส่พื้นหลัง ( Background) และลักษณะพิเศษในเว็บเพจ…………………………………..4

การตกแต่งเนื้อหา ( Content) ในเว็บเพจ……………………………………………………….7

การสร้างไฮเปอร์ลิงค์ ( Hyperlink) …………………………………………………………….8

การลิงค์ไปยังเว็บเพจอื่น…………………………………………………………………………9

การบันทึกเว็บเพจ………………………………………………………………………………10
1
                                       วางโครงสร้าง

1. กาหนดเรื่องของเว็บไซต์

2. กาหนดส่วนประกอบหลักของเว็บ ประกอบไปด้วย
           2.1 ส่วนของ Title
           2.2 ส่วนเมนู ประกอบไปด้วย
                   2.2.1 ประวัติความเป็นมา
                   2.2.2 อุปกรณ์ในการเล่น
                   2.2.3 สนามแบดบินตัน
                   2.2.4 ทักษะในการเล่น
                   2.2.5 อ้างอิง
                   2.2.6 คณะผู้จัดทา
                   2.2.7 Google
                   2.2.8 Multiply
           2.3 ส่วนของเนื้อหา

3. กาหนดรูปแบบของการเชื่อมโยง
2


                             การสร้างเว็บไซต์ด้วยโปรแกรม Microsoft Word

         การสร้างเว็บไซต์ก็คือ การสร้างเอกสารสาหรับแสดงผลบนอินเทอร์เน็ตหรือเว็บราว์เซอร์โดยใช้
มาตรฐาน HTML ซึ่งผู้สร้างจะต้องมีความรู้และเข้าใจโครงสร้างภาษา HTML พอสมควรจึงจะสร้างได้
         ปัจจุบันได้มีการพัฒนาโปรแกรมสาเร็จรูปช่วยในการสร้างเว็บเพจ เช่น Dreamweaver และ
FrontPage เป็นต้น เพื่อช่วยให้ผู้พัฒนาเว็บออกแบบได้อย่างสวยงามและรวดเร็ว โดยไม่ต้องพิมพ์คาสั่งภาษา
HTML หากแต่ใช้กราฟิกเข้ามาช่วยออกแบบ
         อย่างไรก็ตาม การสร้างเว็บเพจที่ง่ายอีกวิธีหนึ่ง คือ การสร้างด้วยโปรแกรมไมโครซอฟต์เวิร์ด
ซึ่งมีวิธีการสร้าง ดังนี้
         1. เปิดไฟล์ใหม่ คลิกคาสั่ง แฟ้ม > สร้าง ( File > New )




    2. ที่บานหน้าต่างให้เลืกคาสั่ง เว็บเพจ ( Webpage )
3
3. เลือกรูปแบบสาเร็จที่ Word สร้างเตรียมไว้ให้ด้วยคาสั่ง Page Layout > Themes




4. จะได้ตัวเลือกชุดรูปแบบ เลือกชุดรูปแบบแล้วคลิกตกลง




5. พิมพ์ข้อความ ตกแต่งสีสัน แทรกภาพประกอบ และสร้างตารางได้เหมือนกับการสร้างเอกสาร
   Word ปกติ
4

การใส่พื้นหลัง ( Background) และลักษณะพิเศษในเว็บเพจ

         การปรับแต่งเอกสารให้เหมาะสมและสอดคล้องกับเว็บเพจอื่นๆ ในเว็บไซต์เดียวกันมีวิธีการทา
ดังนี้
         1. ตกแต่งไฟล์งานให้สวยงาม เช่น ตกแต่งพื้นหลัง โดยคลิกที่คาสั่ง Page Layout > Page Color >
Fill Effects




         2. หากต้องการเลือกสีพื้น ให้เลือกได้ทันที
         3. ถ้าสีพื้นที่มีในถาดสีไม่ตรงกับที่ต้องการ ให้คลิกที่คาสั่ง More Colors จะได้ถาดสีเพื่อกาหนดสี
ผสมใช้เอง เลือกสีที่ต้องการ เสร็จแล้วคลิกตกลง
5

4. การเพิ่มเติมลักษณะพิเศษ และไล่ระดับสี ให้คลิกเลือกคาสั่ง Fill Effects คลิกที่แท็ป ไล่ระดับสี
    เลือกคาสั่งย่อย เช่น สองสี และลักษณะแรเงา




5. เลือกพื้นผิว คลิกเลือกคาสั่ง Fill Effects > texture
6

6. เลือกลวดลายของพื้นหลังของเว็บเพจ คลิกเลือกคาสั่ง Fill Effects > Pattern




7. นาภาพมาสร้างเป็นพื้นหลัง คลิกเลือกคาสั่ง Fill Effects > Picture
7
                              การตกแต่งเนื้อหา ( Content) ในเว็บเพจ

       ข้อความ ภาพ เป็นส่วนประกอบสาคัญของเว็บเพจ ซึ่งมีวิธีการทาดังนี้




1. การตกแต่งตัวอักษร (Font) ใน Word สามารถสร้างตัวอักษรได้หลากหลาย ตลอดจนสีสันให้
สวยงามได้ง่าย โดยที่เมื่อนาไปแสดงบนบราว์เซอร์ก็จะมีลักษณะเหมือนต้นแบบที่สร้างอักษรประดิษฐ์ต่างๆ
ก็สามารถนามาประกอบเอกสารได้เช่นกัน
       2. การแทรกภาพประกอบข้อความ เราสามารถนาภาพมาใส่ไว้ในเว็บเพจด้วยคาสั่ง แทรก >
รูปภาพ ( Insert > Picture ) แล้วเลือกภาพ เช่น ภาพตัดปะ ภาพจากแฟ้ม เป็นต้น เมื่อได้ภาพแล้ว
สามารถปรับขนาด วางตาแหน่ง หมุน และปรับลักษณะภาพให้เหมาะสมกับข้อความได้ ดัง




รูป
8




                                การสร้างไฮเปอร์ลิงค์ ( Hyperlink )

        ไฮเปอร์ลิงค์ หมายถึง การเชื่อมโยงเอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่ง เรียกสั้นว่า ลิงค์ ( links )
ซึ่งมีหลายลักษณะ ทั้งการลิงค์ภายในเว็บเพจหน้าเดียวกัน ลิงค์ระหว่างหน้าในเว็บไซต์เดียวกัน และลิงค์
ไปยังเว็บไซต์อื่น เหตุผลที่ต้องสร้างลิงค์ ก็คือ ข้อมูลที่จะนาเสนอในเว็บเพจมีจานวนมากไม่สามารถ
นาเสนอให้ครบได้ในหน้าเดียว จึงต้องเชื่อมโยงเอกสารจากหน้าหนึ่งไปยังหน้าอื่นๆ
        ลิงค์อาจเป็นตัวอักษร คา ข้อความ ภาพ หรืออื่นๆ โดยจะใช้สีแตกต่างจากข้อความปกติหรือมีขีด
เส้นใต้ไว้ สามารถคลิกเพื่อลิงค์ไปยังตาแหน่งที่เชื่อมโยงไว้ทันที
        การลิงค์ประกอบด้วย 1. ข้อมูลต้นทาง สาหรับผู้ใช้คลิกเพื่อเชื่อมโยงไปยังข้อมูลอื่นๆ
2. ข้อมูลปลายทาง เป็นหน้าเว็บเพจ หรือแหล่งข้อมูลที่สร้างไว้สาหรับแสดงผล
9
                                         การลิงค์ไปยังเว็บเพจอื่น

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

             1. สร้างเว็บเพจต้นทางและปลายทาง

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

             3. คลิกคาสั่ง แทรก > การเชื่อมโยงหลายมิติ ( Insert > Hyperlinks ) หรือใช้แป้น
                 < Ctrl > + < K >




             4. จะได้หน้าต่างแทรกลิงค์ ดังนี้
10
    5. ที่คาสั่ง เชื่อมโยงไปยัง ( Link to ) : ให้คลิกเลือก แฟ้มหรือเว็บเพจที่มีอยู่ ( Existing File
        or Web Page )

    6. คาสั่ง มองหาใน ( Look in ) : คลิกเลือก โฟลเดอร์ปัจจุบัน ( Current Folder )




                                            การบันทึกเว็บเพจ

เมื่อสร้างและตกแต่งเว็บเพจเสร็จแล้ว จะต้องบันทึกไฟล์ให้เป็นเอกสาร HTML ดังนี้

1. คลิกที่คาสั่ง แฟ้ม > บันทึกเป็นเว็บเพจ ( File > Save as Web Page




    )
11
2. จะได้หน้าต่างสาหรับบันทึกเอกสาร ให้เลือกชนิดของไฟล์เป็นแบบ Web Page โดย Word
    จะแยกภาพหรือกราฟฟิกไปไว้เป็นไฟล์ต่างหาก ถ้าเลือเป็นแบบ Single File Web Page จะ
    เป็นการบันทึกเว็บทั้งหมดไว้ในไฟล์เดียวกัน




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




4. ทดลองเปิดไฟล์ด้วยเบราว์เซอร์ IE จะได้เว็บเพจ ดังนี้

More Related Content

What's hot

ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบSamorn Tara
 
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlSmo Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dreamsommat
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwSamorn Tara
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบJiJee Pj
 
การสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพ
การสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพการสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพ
การสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพSriprapai Inchaithep
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2beauten
 
การใช้ Google docs เพื่อการเรียนการสอน
การใช้ Google docs เพื่อการเรียนการสอนการใช้ Google docs เพื่อการเรียนการสอน
การใช้ Google docs เพื่อการเรียนการสอนChanunya Tammapattalakur
 
หน่วยที่ 03
หน่วยที่ 03หน่วยที่ 03
หน่วยที่ 03Nuytoo Naruk
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2pom_2555
 
สร้างเว็บไซต์ด้วยWordpress
สร้างเว็บไซต์ด้วยWordpressสร้างเว็บไซต์ด้วยWordpress
สร้างเว็บไซต์ด้วยWordpresskruburapha2012
 
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8คู่มือ Dreamwever 8
คู่มือ Dreamwever 8duangnapa27
 
โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์Pongpitak Toey
 
PHP & Dreamweaver ch04 basic_html
PHP & Dreamweaver  ch04 basic_htmlPHP & Dreamweaver  ch04 basic_html
PHP & Dreamweaver ch04 basic_htmlWebidea Petchtharat
 
การจัดการงานพิมพ์และการบันทึกเวบ
การจัดการงานพิมพ์และการบันทึกเวบการจัดการงานพิมพ์และการบันทึกเวบ
การจัดการงานพิมพ์และการบันทึกเวบFon Edu Com-sci
 

What's hot (20)

ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
 
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
 
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-wwwใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบ
 
การสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพ
การสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพการสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพ
การสร้างแบบสอบถามออนไลน์ ด้วย Google doc ศรีประไพ
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
การใช้ Google docs เพื่อการเรียนการสอน
การใช้ Google docs เพื่อการเรียนการสอนการใช้ Google docs เพื่อการเรียนการสอน
การใช้ Google docs เพื่อการเรียนการสอน
 
หน่วยที่ 03
หน่วยที่ 03หน่วยที่ 03
หน่วยที่ 03
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 
สร้างเว็บไซต์ด้วยWordpress
สร้างเว็บไซต์ด้วยWordpressสร้างเว็บไซต์ด้วยWordpress
สร้างเว็บไซต์ด้วยWordpress
 
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
Website
WebsiteWebsite
Website
 
โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์
 
Websitebasic
WebsitebasicWebsitebasic
Websitebasic
 
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บกระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
 
PHP & Dreamweaver ch04 basic_html
PHP & Dreamweaver  ch04 basic_htmlPHP & Dreamweaver  ch04 basic_html
PHP & Dreamweaver ch04 basic_html
 
การจัดการงานพิมพ์และการบันทึกเวบ
การจัดการงานพิมพ์และการบันทึกเวบการจัดการงานพิมพ์และการบันทึกเวบ
การจัดการงานพิมพ์และการบันทึกเวบ
 

Similar to คู่มือประกอบการสร้างเว็บไซต์ด้วย Word

Similar to คู่มือประกอบการสร้างเว็บไซต์ด้วย Word (20)

Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8
 
E book4
E book4E book4
E book4
 
Flasheffect[1]
Flasheffect[1]Flasheffect[1]
Flasheffect[1]
 
Unit2
Unit2Unit2
Unit2
 
Web dreamcs5
Web dreamcs5Web dreamcs5
Web dreamcs5
 
หน่วยที่ 02
หน่วยที่ 02หน่วยที่ 02
หน่วยที่ 02
 
Google site
Google siteGoogle site
Google site
 
บทที่ 3
บทที่ 3บทที่ 3
บทที่ 3
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
MediaWiki
MediaWikiMediaWiki
MediaWiki
 
บทที่ 3
บทที่ 3บทที่ 3
บทที่ 3
 
03 บทที่ 3-วิธีดำเนินงานโครงงาน
03 บทที่ 3-วิธีดำเนินงานโครงงาน03 บทที่ 3-วิธีดำเนินงานโครงงาน
03 บทที่ 3-วิธีดำเนินงานโครงงาน
 
บทที่ 3
บทที่ 3บทที่ 3
บทที่ 3
 
(บทที่ 3)
(บทที่ 3)(บทที่ 3)
(บทที่ 3)
 
22222222222
2222222222222222222222
22222222222
 
Common
CommonCommon
Common
 
แบบโครงร่างโครงงาน
แบบโครงร่างโครงงานแบบโครงร่างโครงงาน
แบบโครงร่างโครงงาน
 
Chapter4
Chapter4Chapter4
Chapter4
 
2010012 Wordpress Com Boonkiat
2010012 Wordpress Com Boonkiat2010012 Wordpress Com Boonkiat
2010012 Wordpress Com Boonkiat
 

คู่มือประกอบการสร้างเว็บไซต์ด้วย Word

  • 1. คู่มือประกอบการสร้างเว็บไซต์ โดยโปรแกรม Microsoft Word จัดทาโดย 1. นายพิสิทธ์ สุวรรณา 2. นายจอมพล รัตนา 3. นางสาวประกายมาศ รอดทะพร 4. นางสาวธิดารัตน์ ศรีสะเทียน 5. นางสาววรรณิษา ชื่อมี ชั้นปีที่ 1 คณะศึกษาศาสตร์ สาขา เทคโนโลยีและสื่อสารการศึกษา มหาวิทยาลัยมหาสารคาม
  • 2. คานา คู่มือนี้จัดทาขึ้นเพื่อประกอบการเรียนการสอนเกี่ยวกับการสร้างเว็บไซต์ ด้วยโปรแกรม Microsoft Word ซึ่งเป็นการเรียนรู้การใช้โปรแกรมในด้านอื่นๆ ที่นอกเหนือจากการพิมพ์ งานปกติ นอกจากนั้นคณะผู้จัดทายังได้ทาการสร้างเว็บไซต์ได้มีความรู้เกี่ยวกับกีฬาแบดมินตัน ดังนั้นคณะ ผู้จัดทาจึงได้จัดทาคู่มือเกี่ยวกับการสร้างเว็บไซต์นี้เพื่อให้ผู้ศึกษาเข้าใจวิธีการสร้างเว็บไซต์ได้ง่ายขึ้น หาก ผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วย
  • 3. สารบัญ เรื่อง หน้า วางโครงสร้าง……………………………………………………………………………………1 การสร้างเว็บไซต์ด้วยโปรแกรม Microsoft Word……………………………………………….2 การใส่พื้นหลัง ( Background) และลักษณะพิเศษในเว็บเพจ…………………………………..4 การตกแต่งเนื้อหา ( Content) ในเว็บเพจ……………………………………………………….7 การสร้างไฮเปอร์ลิงค์ ( Hyperlink) …………………………………………………………….8 การลิงค์ไปยังเว็บเพจอื่น…………………………………………………………………………9 การบันทึกเว็บเพจ………………………………………………………………………………10
  • 4. 1 วางโครงสร้าง 1. กาหนดเรื่องของเว็บไซต์ 2. กาหนดส่วนประกอบหลักของเว็บ ประกอบไปด้วย 2.1 ส่วนของ Title 2.2 ส่วนเมนู ประกอบไปด้วย 2.2.1 ประวัติความเป็นมา 2.2.2 อุปกรณ์ในการเล่น 2.2.3 สนามแบดบินตัน 2.2.4 ทักษะในการเล่น 2.2.5 อ้างอิง 2.2.6 คณะผู้จัดทา 2.2.7 Google 2.2.8 Multiply 2.3 ส่วนของเนื้อหา 3. กาหนดรูปแบบของการเชื่อมโยง
  • 5. 2 การสร้างเว็บไซต์ด้วยโปรแกรม Microsoft Word การสร้างเว็บไซต์ก็คือ การสร้างเอกสารสาหรับแสดงผลบนอินเทอร์เน็ตหรือเว็บราว์เซอร์โดยใช้ มาตรฐาน HTML ซึ่งผู้สร้างจะต้องมีความรู้และเข้าใจโครงสร้างภาษา HTML พอสมควรจึงจะสร้างได้ ปัจจุบันได้มีการพัฒนาโปรแกรมสาเร็จรูปช่วยในการสร้างเว็บเพจ เช่น Dreamweaver และ FrontPage เป็นต้น เพื่อช่วยให้ผู้พัฒนาเว็บออกแบบได้อย่างสวยงามและรวดเร็ว โดยไม่ต้องพิมพ์คาสั่งภาษา HTML หากแต่ใช้กราฟิกเข้ามาช่วยออกแบบ อย่างไรก็ตาม การสร้างเว็บเพจที่ง่ายอีกวิธีหนึ่ง คือ การสร้างด้วยโปรแกรมไมโครซอฟต์เวิร์ด ซึ่งมีวิธีการสร้าง ดังนี้ 1. เปิดไฟล์ใหม่ คลิกคาสั่ง แฟ้ม > สร้าง ( File > New ) 2. ที่บานหน้าต่างให้เลืกคาสั่ง เว็บเพจ ( Webpage )
  • 6. 3 3. เลือกรูปแบบสาเร็จที่ Word สร้างเตรียมไว้ให้ด้วยคาสั่ง Page Layout > Themes 4. จะได้ตัวเลือกชุดรูปแบบ เลือกชุดรูปแบบแล้วคลิกตกลง 5. พิมพ์ข้อความ ตกแต่งสีสัน แทรกภาพประกอบ และสร้างตารางได้เหมือนกับการสร้างเอกสาร Word ปกติ
  • 7. 4 การใส่พื้นหลัง ( Background) และลักษณะพิเศษในเว็บเพจ การปรับแต่งเอกสารให้เหมาะสมและสอดคล้องกับเว็บเพจอื่นๆ ในเว็บไซต์เดียวกันมีวิธีการทา ดังนี้ 1. ตกแต่งไฟล์งานให้สวยงาม เช่น ตกแต่งพื้นหลัง โดยคลิกที่คาสั่ง Page Layout > Page Color > Fill Effects 2. หากต้องการเลือกสีพื้น ให้เลือกได้ทันที 3. ถ้าสีพื้นที่มีในถาดสีไม่ตรงกับที่ต้องการ ให้คลิกที่คาสั่ง More Colors จะได้ถาดสีเพื่อกาหนดสี ผสมใช้เอง เลือกสีที่ต้องการ เสร็จแล้วคลิกตกลง
  • 8. 5 4. การเพิ่มเติมลักษณะพิเศษ และไล่ระดับสี ให้คลิกเลือกคาสั่ง Fill Effects คลิกที่แท็ป ไล่ระดับสี เลือกคาสั่งย่อย เช่น สองสี และลักษณะแรเงา 5. เลือกพื้นผิว คลิกเลือกคาสั่ง Fill Effects > texture
  • 9. 6 6. เลือกลวดลายของพื้นหลังของเว็บเพจ คลิกเลือกคาสั่ง Fill Effects > Pattern 7. นาภาพมาสร้างเป็นพื้นหลัง คลิกเลือกคาสั่ง Fill Effects > Picture
  • 10. 7 การตกแต่งเนื้อหา ( Content) ในเว็บเพจ ข้อความ ภาพ เป็นส่วนประกอบสาคัญของเว็บเพจ ซึ่งมีวิธีการทาดังนี้ 1. การตกแต่งตัวอักษร (Font) ใน Word สามารถสร้างตัวอักษรได้หลากหลาย ตลอดจนสีสันให้ สวยงามได้ง่าย โดยที่เมื่อนาไปแสดงบนบราว์เซอร์ก็จะมีลักษณะเหมือนต้นแบบที่สร้างอักษรประดิษฐ์ต่างๆ ก็สามารถนามาประกอบเอกสารได้เช่นกัน 2. การแทรกภาพประกอบข้อความ เราสามารถนาภาพมาใส่ไว้ในเว็บเพจด้วยคาสั่ง แทรก > รูปภาพ ( Insert > Picture ) แล้วเลือกภาพ เช่น ภาพตัดปะ ภาพจากแฟ้ม เป็นต้น เมื่อได้ภาพแล้ว สามารถปรับขนาด วางตาแหน่ง หมุน และปรับลักษณะภาพให้เหมาะสมกับข้อความได้ ดัง รูป
  • 11. 8 การสร้างไฮเปอร์ลิงค์ ( Hyperlink ) ไฮเปอร์ลิงค์ หมายถึง การเชื่อมโยงเอกสารจากจุดหนึ่งไปยังอีกจุดหนึ่ง เรียกสั้นว่า ลิงค์ ( links ) ซึ่งมีหลายลักษณะ ทั้งการลิงค์ภายในเว็บเพจหน้าเดียวกัน ลิงค์ระหว่างหน้าในเว็บไซต์เดียวกัน และลิงค์ ไปยังเว็บไซต์อื่น เหตุผลที่ต้องสร้างลิงค์ ก็คือ ข้อมูลที่จะนาเสนอในเว็บเพจมีจานวนมากไม่สามารถ นาเสนอให้ครบได้ในหน้าเดียว จึงต้องเชื่อมโยงเอกสารจากหน้าหนึ่งไปยังหน้าอื่นๆ ลิงค์อาจเป็นตัวอักษร คา ข้อความ ภาพ หรืออื่นๆ โดยจะใช้สีแตกต่างจากข้อความปกติหรือมีขีด เส้นใต้ไว้ สามารถคลิกเพื่อลิงค์ไปยังตาแหน่งที่เชื่อมโยงไว้ทันที การลิงค์ประกอบด้วย 1. ข้อมูลต้นทาง สาหรับผู้ใช้คลิกเพื่อเชื่อมโยงไปยังข้อมูลอื่นๆ 2. ข้อมูลปลายทาง เป็นหน้าเว็บเพจ หรือแหล่งข้อมูลที่สร้างไว้สาหรับแสดงผล
  • 12. 9 การลิงค์ไปยังเว็บเพจอื่น ในกรณีที่เราสร้างเว็บเพจไว้หลายหน้าและกาหนดให้มีการเชื่อมโยงกันไปตามหัวข้อเรื่อง เมื่อ ผู้อ่านคลิกก็จะไปยังเรื่องที่ต้องการนั้นทันที การสร้างลิงค์ไปยังเว็บเพจอื่น มีวิธีการทาดังนี้ 1. สร้างเว็บเพจต้นทางและปลายทาง 2. เปิดไฟล์ข้อมูลต้นทาง แล้วคลิกระบายข้อความที่ต้องการจะสร้างลิงค์ 3. คลิกคาสั่ง แทรก > การเชื่อมโยงหลายมิติ ( Insert > Hyperlinks ) หรือใช้แป้น < Ctrl > + < K > 4. จะได้หน้าต่างแทรกลิงค์ ดังนี้
  • 13. 10 5. ที่คาสั่ง เชื่อมโยงไปยัง ( Link to ) : ให้คลิกเลือก แฟ้มหรือเว็บเพจที่มีอยู่ ( Existing File or Web Page ) 6. คาสั่ง มองหาใน ( Look in ) : คลิกเลือก โฟลเดอร์ปัจจุบัน ( Current Folder ) การบันทึกเว็บเพจ เมื่อสร้างและตกแต่งเว็บเพจเสร็จแล้ว จะต้องบันทึกไฟล์ให้เป็นเอกสาร HTML ดังนี้ 1. คลิกที่คาสั่ง แฟ้ม > บันทึกเป็นเว็บเพจ ( File > Save as Web Page )
  • 14. 11 2. จะได้หน้าต่างสาหรับบันทึกเอกสาร ให้เลือกชนิดของไฟล์เป็นแบบ Web Page โดย Word จะแยกภาพหรือกราฟฟิกไปไว้เป็นไฟล์ต่างหาก ถ้าเลือเป็นแบบ Single File Web Page จะ เป็นการบันทึกเว็บทั้งหมดไว้ในไฟล์เดียวกัน 3. การเปลี่ยนข้อความไตเติลของเว็บเพจให้คลิกที่คาสั่ง เปลี่ยนชื่อเรื่อง จะได้หน้าต่างสาหรับ พิมพ์ชื่อเรื่องใหม่ แล้วคลิก ตกลง 4. ทดลองเปิดไฟล์ด้วยเบราว์เซอร์ IE จะได้เว็บเพจ ดังนี้