คมอประกอบการสรางเวบไซต โดยโปรแกรม Microsoft Word

จดท าโดย

1. นายพสทธ สวรรณา 53010516021

2. นายจอมพล รตนา 53010516034

3. นางสาวประกายมาศ รอดทะพร 53010516018

4. นางสาวธดารตน ศรสะเทยน 53010516013

5. นางสาววรรณษา ชอม 53010516050

ชนปท 1 คณะศกษาศาสตร

สาขา เทคโนโลยและสอสารการศกษา

มหาวทยาลยมหาสารคาม

ค าน า

คมอนจดท าขนเพอประกอบการเรยนการสอนเกยวกบการสรางเวบไซต

ดวยโปรแกรม Microsoft Word ซงเปนการเรยนรการใชโปรแกรมในดานอนๆ ทนอกเหนอจากการพมพ

งานปกต นอกจากนนคณะผจดท ายงไดท าการสรางเวบไซตไดมความรเกยวกบกฬาแบดมนตน ดงนนคณะ

ผจดท าจงไดจดท าคมอเกยวกบการสรางเวบไซตนเพอใหผศกษาเขาใจวธการสรางเวบไซตไดงายขน หาก

ผดพลาดประการใดขออภยมา ณ ทนดวย

ก

สารบญ

เรอง หนา

วางโครงสราง……………………………………………………………………………………1

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

การใสพนหลง ( Background) และลกษณะพเศษในเวบเพจ…………………………………..3

การตกแตงเนอหา ( Content) ในเวบเพจ……………………………………………………….6

การสรางไฮเปอรลงค ( Hyperlink) …………………………………………………………….7

การลงคไปยงเวบเพจอน…………………………………………………………………………8

การบนทกเวบเพจ……………………………………………………………………………….9

ข

วางโครงสราง

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. ก าหนดรปแบบของการเชอมโยง

1

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

การสรางเวบไซตกคอ การสรางเอกสารส าหรบแสดงผลบนอนเทอรเนตหรอเวบราวเซอรโดยใช

มาตรฐาน HTML ซงผสรางจะตองมความรและเขาใจโครงสรางภาษา HTML พอสมควรจงจะสรางได

ปจจบนไดมการพฒนาโปรแกรมส าเรจรปชวยในการสรางเวบเพจ เชน Dreamweaver และ

FrontPage เปนตน เพอชวยใหผพฒนาเวบออกแบบไดอยางสวยงามและรวดเรว โดยไมตองพมพค าสงภาษา

HTML หากแตใชกราฟกเขามาชวยออกแบบ

อยางไรกตาม การสรางเวบเพจทงายอกวธหนง คอ การสรางดวยโปรแกรมไมโครซอฟตเวรด

ซงมวธการสราง ดงน

1. เปดไฟลใหม คลกค าสง แฟม > สราง

2. ทบานหนาตางใหเลอกค าสง เวบเพจ

2

การใสพนหลง ( Background) และลกษณะพเศษในเวบเพจ

การปรบแตงเอกสารใหเหมาะสมและสอดคลองกบเวบเพจอนๆ ในเวบไซตเดยวกนมวธการท า

ดงน

1. ตกแตงไฟลงานใหสวยงาม เชน ตกแตงพนหลง โดยคลกทค าสง เคาโรงหนากระดาษ => สของ

หนา

2. หากตองการเลอกสพน ใหเลอกไดทนท

3. ถาสพนทมในถาดสไมตรงกบทตองการ ใหคลกทค าสง สเพมเตม จะไดถาดสเพอก าหนดส

ผสมใชเอง เลอกสทตองการ เสรจแลวคลกตกลง

3

4. การเพมเตมลกษณะพเศษ และไลระดบส ใหคลกเลอกค าสง เตมลกษณะพเศษ คลกทแทป ไล

ระดบส เลอกค าสงยอย เชน สองส และลกษณะแรเงา

5. เลอกพนผว คลกเลอกค าสง เตมลกษณะพเศษ => พนผว

4

6. เลอกลวดลายของพนหลงของเวบเพจ คลกเลอกค าสง เตมลกษณะพเศษ => ลวดลาย

7. น าภาพมาสรางเปนพนหลง คลกเลอกค าสง เตมลกษณะพเศษ => รปภาพ

5

การตกแตงเนอหา ( Content) ในเวบเพจ

ขอความ ภาพ เปนสวนประกอบส าคญของเวบเพจ ซงมวธการท าดงน

1. การตกแตงตวอกษร (Font) ใน Word สามารถสรางตวอกษรไดหลากหลาย ตลอดจนสสนให

สวยงามไดงาย โดยทเมอน าไปแสดงบนบราวเซอรกจะมลกษณะเหมอนตนแบบทสรางอกษรประดษฐตางๆ

กสามารถน ามาประกอบเอกสารไดเชนกน

2. การแทรกภาพประกอบขอความ เราสามารถน าภาพมาใสไวในเวบเพจดวยค าสง แทรก >

รปภาพ ( Insert > Picture ) แลวเลอกภาพ เชน ภาพตดปะ ภาพจากแฟม เปนตน เมอไดภาพแลว

สามารถปรบขนาด วางต าแหนง หมน และปรบลกษณะภาพใหเหมาะสมกบขอความได ดง

รป

6

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

ไฮเปอรลงค หมายถง การเชอมโยงเอกสารจากจดหนงไปยงอกจดหนง เรยกสนวา ลงค ( links )

ซงมหลายลกษณะ ทงการลงคภายในเวบเพจหนาเดยวกน ลงคระหวางหนาในเวบไซตเดยวกน และลงค

ไปยงเวบไซตอน เหตผลทตองสรางลงค กคอ ขอมลทจะน าเสนอในเวบเพจมจ านวนมากไมสามารถ

น าเสนอใหครบไดในหนาเดยว จงตองเชอมโยงเอกสารจากหนาหนงไปยงหนาอนๆ

ลงคอาจเปนตวอกษร ค า ขอความ ภาพ หรออนๆ โดยจะใชสแตกตางจากขอความปกตหรอมขด

เสนใตไว สามารถคลกเพอลงคไปยงต าแหนงทเชอมโยงไวทนท

การลงคประกอบดวย 1. ขอมลตนทาง ส าหรบผใชคลกเพอเชอมโยงไปยงขอมลอนๆ

2. ขอมลปลายทาง เปนหนาเวบเพจ หรอแหลงขอมลทสรางไวส าหรบแสดงผล

7

การลงคไปยงเวบเพจอน

ในกรณทเราสรางเวบเพจไวหลายหนาและก าหนดใหมการเชอมโยงกนไปตามหวขอเรอง เมอ

ผอานคลกกจะไปยงเรองทตองการนนทนท

การสรางลงคไปยงเวบเพจอน มวธการท าดงน

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

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

3. คลกค าสง แทรก => การเชอมโยงหลายมต หรอใชแปน < Ctrl > + < K >

4. จะไดหนาตางแทรกลงค ดงน

8

5. ทค าสง เชอมโยงไปยง : ใหคลกเลอก แฟมหรอเวบเพจทมอย ค าสง มองหาใน : คลก

เลอก โฟลเดอรปจจบน

การบนทกเวบเพจ

เมอสรางและตกแตงเวบเพจเสรจแลว จะตองบนทกไฟลใหเปนเอกสาร HTML ดงน

1. คลกทค าสง แฟม => บนทกเปนเวบเพจ

)

9

2. จะไดหนาตางส าหรบบนทกเอกสาร ใหเลอกชนดของไฟลเปนแบบ Web Page โดย Word

จะแยกภาพหรอกราฟกไปไวเปนไฟลตางหาก ถาเลอกเปนแบบ Single File Web Page จะ

เปนการบนทกเวบทงหมดไวในไฟลเดยวกน

3. การเปลยนขอความไตเตลของเวบเพจใหคลกทค าสง เปลยนชอเรอง จะไดหนาตางส าหรบ

พมพชอเรองใหม แลวคลก ตกลง

4. ทดลองเปดไฟลดวยเบราวเซอร IE จะไดเวบเพจ ดงน

10