คมอประกอบการสรางเวบไซต

โดยโปรแกรม Microsoft Word

จดท าโดย

นาย กตกร แสวงหา 53010516033

นาย เนตรฐ ธรรมประชา 53010516042

นาย นพพร ภศรพงษ 53010516039

นาย คร เสมอภาค 53010516006

นาง สาวจราพร พรหมล 53010520007

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

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

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

สตว

ปา

สงวน

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

ดวยโปรแกรม Microsoft Word ซงเปนการเรยนรการใชโปรแกรมในดาน

อนๆ ทนอกเหนอจากการพมพงานปกต นอกจากนนคณะผจดท ายงไดท าการ

สรางเวบไซตทใหความรเกยวกบสภาวะโลกรอน ดงนนคณะผจดท าจงได

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

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

การวางโครงสราง

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 เกงหมอ

2.2.8 นกแตวแลวทองด า

2.2.9 นกกระเรยน

2.2.10 เนอสมน

2.2.11 แมวลายหนออน

2.2.12 พะยน

2.2.13 สมเสรจ

2.2.14 ละมง

2.2.15 เลยงผา

2.3 สวนของเนอหา

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

การสรางเวบเพจดวยโปรแกรม Microsoft Word

การสรางเวบเพจกคอ การสรางเอกสารส าหรบแสดงผลบนอนเทอรเนตหรอ

เวบบราวเซอรโดยใชมาตรฐาน HTML ซงผสรางจะตองมความรและเขาใจโครงสราง

ภาษา HTML พอสมควรจงจะสรางได

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

Dreamweaver และ

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

ไมตองพมค าสงภาษา HTML หากแตใชกราฟฟกเขามาชวยออกแบบ

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

ไมโครซอฟตเวรด

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

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

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

3. เลอกรปแบบส าเรจท Word สรางเตรยมไวใหดวยค าสง Page Layout >

Themes

4. จะไดตวเลอกชดรปแบบ เลอกชดรปแบบแลวคลกตกลง

5. พมพขอความ ตกแตงสสน แทรกภาพประกอบ และสรางตารางไดเหมอนกบ

การสรางเอกสาร Word ปกต

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

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

เดยวกนมวธการท า ดงน

1. ตกแตงไฟลงานใหสวยงาม เชน ตกแตงพนหลง โดยคลกทค าสง Page

Layout > Page Color > Fill Effects

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

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

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

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

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

5. เลอกพนผว คลกเลอกค าสง Fill Effects > texture

6. เลอกลวดลายของพนหลงของเวบเพจ คลกเลอกค าสง Fill Effects > Pattern

7. น าภาพมาสรางเปนพนหลง คลกเลอกค าสง Fill Effects > Picture

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

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

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

ตลอดจนสสนให

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

สรางอกษรประดษฐตางๆ กสามารถน ามาประกอบเอกสารไดเชนกน

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

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

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

ใหเหมาะสมกบขอความได ดงรป

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

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

ลงค ( links )

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

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

น าเสนอในเวบเพจมจ านวนมากไมสามารถน าเสนอใหครบไดในหนาเดยว จงตอง

เชอมโยงเอกสารจากหนาหนงไปยงหนาอนๆ

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

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

ทนท

การลงคประกอบดวย

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

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

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

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

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

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

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

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

3. คลกค าสง แทรก > การเชอมโยงหลายมต ( Insert > Hyperlinks ) หรอ

ใชแปน < Ctrl > + < K >

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

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

อย ( Existing File or Web Page )

6. ค าสง มองหาใน ( Look in ) : คลกเลอก โฟลเดอรปจจบน ( Current

Folder )

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

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

HTML ดงน

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

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

Page โดย Word จะแยกภาพหรอกราฟฟกไปไวเปนไฟลตางหาก ถาเลอ

เปนแบบ Single File Web Page จะเปนการบนทกเวบทงหมดไวในไฟล

เดยวกน

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

หนาตางส าหรบพมพชอเรองใหม แลวคลก ตกลง

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