หน่วยที่ 6 เทคนิคพิเศษในการสร ... ·...

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

หนวยท 6 เทคนคพเศษในการสรางความนาสนใจใหเวบเพจ

ผลการเรยนรทคาดหวง 1. สามารถเลอกคาสงทเหมาะสมในการใสเทคนคใหนาสนใจกบเวบไซต ได 2. สามารถเขยนคาสง (Tag) กาหนดรปแบบการ การแสดงผลของตวอกษร ขอความใหม

ความนาสนใจ ได

สาระสาคญ เวบไซตมความแตกตางจากเอกสารสงพมพในแงของเทคนคการนาเสนอ ทมความ

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

เทคนคทนามาใชจะตองเลอกใหเหมาะสมกบยคสมย เพราะเทคโนโลยเปลยนแปลงเรวมาก การเรงศกษาในเรองทคาดหวงไมไดวาจะไดรบความนยมเพยงใด จะเปนการสญเปลาถาความ นยมนนหดหายไป เทคนคบางอยางอาจจะเหมาะสมกบผชมทมการเชอมตออนเทอรเนตความเรว สง จงควรระมดระวงหรอมทางเลอกใหกบผใชงานความเรวตาดวย

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

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


หนวยท 7 การเผยแพรเวบไซตบนเครอขาย

ผลการเรยนรทคาดหวง 1. นกเรยนสามารถสงไฟลเวบเพจจากเครองนกเรยนสเครองแมขายได 2. บอกความแตกตางของชอโดเมนทปรากฏบนเครอขายได

สาระสาคญ หลงจากการสรางเอกสารเวบเพจแลว สงสาคญอกประการหนงคอ การนา เอกสารเวบเพจ

เหลานนออกเผยแพรสเครอขายอนเทอรเนต ดวยการสมครใชบรการจากผใหบรการพนทฟร (Free Hosting) หรอการเชาพนทจากผใหบรการ

การนาไฟลเอกสารจากเครองคอมพวเตอรของเราไปยงผใหบรการ เราจะใชซอฟทแวรประเภท FTP (File Transfer Protocol) ทาการสงไฟล (Upload) ขนไปยงเครองแมขาย (Server) ซงมทงทเปนระบบปฏบตการวนโดวและลนกส

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

คดแลวตอบ เมอนกเรยนเขาชมเวบไซตตางๆ จะพบวาเวบไซตแตละแหงมชอเฉพาะทไมซากบ

ผใด และสามารถเขาดไดตลอดเวลา เราจะทาใหเวบไซตของเราแสดงผลไดอยางเวบอนๆ นน ดวยวธการใด...

การเผยแพรเวบไซตบนเครอขาย


98

การนาเสนอเวบไซตสเครอขายอนเทอรเนต เมอเวบเพจของเราสรางสรรคอยาง สวยงาม มขอมลครบถวนพรอมทนาเสนอสชาวโลก

แลว สงทตองดาเนนการในขนตอไปคอ หาพนทบนเครองแมขายในเครอขายอนเทอรเนต ทเรา เรยกกนวา Web Server ทมผใหบรการทงประเภทฟรจรงๆ ฟรโดยมขอแลกเปลยน (เชน ขอ มโฆษณาแฝงในหนาเวบของเรา หรอมหนาตางโฆษณาแบบเปดเองตามระยะเวลาทเรยกกนวา Popup) หรอใชบรการดวยการเชาพนทจากผใหบรการซงมอยมากมายบนเครอขายอนเทอรเนต ใน ทนขอแนะนาใหส มครใชพนทฟรกอน เมอมความพรอมหรอตองการสรางเวบไซตอยางจรงจง จงคอยใชวธการเชาพนทซงจะมรายจายคงทเปนรายป

การสมครใชพนทฟร (Free Web Hosting) บนเครอขายอนเทอรเนตมผใหบรการ ฟรโฮสทจะมทงในประเทศและตางประเทศ ซงจะม

ทงทใหบรการพนทสาหรบเวบไซตทวไปทใชภาษา HTML ไมมเทคนคพเศษอะไรมากมายนกจะมใหบรการมากมายหลายท สามารถคนหาไดจาก search engine ทวไปดวยคาวา Free web hosting

แตในกรณทเวบไซตของเราตองมการใชเทคนคพเศษ เพมเตม เชน ใชฐานขอมลสาหรบ การแสดงผลรปแบบตางๆ จาเปนจะตองคานงถงการใหบรการของผใหบรการโฮสทเหลานนดวย วาสนบสนนเทคนคพเศษอยางไร เชน สนบสนนฐานขอมล CGI, MySQL และ PHP หรอ Access กบ ASP เนอทในการจดเกบ เวบใหมากนอยเพยงใด ปรมาณขอมลเขาออกตอเดอนของเวบไซต (อาจเกดปญหาไดถาเวบไซตเราดง มคนเขาชมมากตอวน ปรมาณขอมลในการเรยกชมกจะมากตาม ผใหบรการอาจงดใหบรการเปนชวงๆ ถาปรมาณขอมลมากเกนกวาทกาหนด )



99

การสมครใชพนทฟรนนสวนใหญจะไดชอเวบไซตเปนแบบ Sub Domain คอ ใชชอเรานาหนาชอผใหบรการ เปน http://yourname.freehost.com หรอไดชอโดเมนตอทายดวยชอเรา เชน http://www.freehost.com/yourname และในบางแหงจะใหใ ชชอโดเมนของเราเองได แตทงน จะตองทาการจดทะเบยนโดเมนนนไวกอน จะตองมการเตรยมขอมลการสมครใหพรอมดงตอไปน

ชอเวบไซตเปนภาษาองกฤษ (อยาใหยาวมาก ผชมจดจามาก ) หรอชอโดเมน ชอผใชงาน (User name) และรหสผาน (Password) ทตองการ (ผใหบรการบางรายจะ

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

การยนยนการขอใชพนท ขอมลสวนตวของผขอใช เชน ชอ -นามสกล ทอย รหสไปรษณย หมายเลขโทรศพท จดประสงคในการทาเวบไซต (เวบสวนตว /การศกษา/ธรกจ ฯลฯ ) หลงจากการสมครเสรจสน ทาการยนยนการขอพนทตามขนตอนแลว จะไดรบรายละเอยด

ในการใชบรการจากผใหบรการ เชน ทอย (URL) ของเวบไซต วธการอพโหลดไฟล การตงคาตางๆ ทเกยวของ เชน การจดการฐานขอมล การกาหนดบญชอเมล หรอบญชผจดการอพโหลดไฟล ไฟลแรกทใชในการเขาถงเวบไซต สวนใหญจะเปนไฟล index.html สาหรบเวบไซตแบบ html ธรรมดา และเปนไฟล index.php หรอ index.asp สาหรบเวบไซตทเชอมโยงกบฐานขอมล

การสงไฟลไปยงเครองแมขาย เมอไดพนท สาหรบใชงานแลว การสงไฟลขนไปยง เครองแมขายของ ผใหบรการเหลาน

กจะมวธการหลายแบบ แตทเปนทนยมกนนนจะมอย 2 แบบ คอ แบบจดสงผานหนาเวบเพจ (เรยกกนวา ระบบ Files Manager) วธสงดวยการใชโปรแกรม FTP (File Transfer Protocol) สวนใหญแลวผใหบรการจะมคาอธบายในการจดสงไฟลเขาสเซรฟเวอรไวแลว สามารถ

ศกษาไดจากหนาเวบไซตผใหบรการแตละราย โดยตรง

การสงไฟลดวยระบบ File Manager ตวอยางน เปนการใชงานระบบ File Manager จากเวบไซตใหบรการในตางประเทศ คอ

www.741.com ทใหบรการพนทฟร การสมครใชบรการทาไดงายโดยมขอแลกเปลยนการใหบรการ ดวยการตดแบนเนอรโฆษณาในเวบไซต (สามารถปลดโฆษณาออกไดแตตองจายคาบรการราย เดอนใหกบทางผใหบรการเลกนอย ) เมอการสมครเสรจสนแลวกจะไดรบชอบญชใชงาน (เปนชอเดยวกบเวบไซตทเราจะสราง ) และรหสผานทเรากาหนดเอง ตวอยางสมครดวยชอ htmlweb



100

วธการอพโหลดไฟลไปยงเวบไซตทสมครไวแลวคอ http://htmlweb.741.com จะทาตามขนตอนดงน

1. เปดหนาเวบไซต www.741.com เพอทาการลอกอนเขาสระบบ โดยใชชอบญชผใชงานและรหสผานตามทกาหนด

2. จะพบกบหนาจดการไฟลซงมใหเลอกหลายหวขอ ในทนแนะนา ใหเลอก HTML File

Manager เพราะมความสามารถครอบคลมทกหนาทการทางาน เชน การอพโหลดไฟล การแกไข ไฟล การเปลยนชอไฟล สรางโฟลเดอรเกบไฟลและยายไฟลจากโฟลเดอรหนงไปยงอกโฟลเดอรหนงกได รวมทงเราสามารถเขยนไฟลดวยคาสงภาษา HTML ไดโดยตรงจากทน

3. ในหนาตาง HTML File Manager ดงภาพ สามารถสรางไฟลหรอโฟลเดอรไดใน

กรอบสแดง (1) หรอจะอพโหลดไฟลทเตรยมไวแลวจากเครองเราขนไปยงเซรฟเวอรกใชงานจาก ในกรอบสเขยว (2) ถาตองการลบหรอเปลยนชอโฟลเดอรกทาไดในกรอบสมวง (3) ดานลาง

4. ในการจดการไฟล เชน เปลยนชอไฟล แกไขไฟล ยายไฟลหรอ ลบไฟลกสามารถทา

ไดเชนเดยวกบการจดการกบโฟลเดอรดงภาพถดไป



101

5. ตวอยางจากภาพขางลางนคอการแกไขไฟล index.html ดวยการคลกเลอกทชองหนา

ชอไฟลแลวคลกทปม edit เพอทาการแกไข

จะพบกบกรอบหนาตางสาหรบการแกไขไฟล สามารถทาการเขยนคาสงภาษา html ลงไป

ไดโดยตรง รวมทงขอความภาษาไทยดงภาพ



102

เมอคลกทปม Save Change ดานลางกสามารถดผลจากการแกไขไดเลยดงภาพ (จะเหนวามแบนเนอรโฆษณาอยสวนบนของหนาเวบ )

6. การอพโหลดไฟลดวย File Manager นน เมอเราคลกเลอก Upload File from Your

Computer จะพบกบหนาตางดงภาพ ใหเลอกโฟลเดอรทจะเกบไฟลตามทไดสรางเตรยมไว จากนน คลกทปม Browse เพอเลอกไฟล สามารถเลอกสงไดครงละ 10 ไฟล มขนาดรวมไมเกน 1 MB

จากนนคลกทปม Upload Files ดานลาง

กทดลองสมครใชบรการจากผใหบรการพนทฟรๆ กนได ซงมอยมากมายลองคนหาไดจาก

Search engine ทวไป



103

การสงไฟลดวย FTP นอกจากการอพโหลดไฟลผานหนาเวบไซตแลว บางแหงยงเปดใหบรการอพโหลดไฟล

ดวย FTP (File Transfer Protocol) ซงสามารถใชโปรแกรม FileZilla, CuteFTP, WS_FTP หรอโปรแกรมอนๆ ได ซงจะมความสะดวกรวดเรวกวาการใชระบบจดการไฟล เพราะสงไดครงละ หลายๆ ไฟลและโฟลเดอรไดพรอมกน ตวอยางตอไปนใชโปรแกรม FileZilla ในการสงไฟล สามารถดาวนโหลดมาใชไดฟรจาก http://www.filehippo.com/download_filezilla/

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

ชอโฮสททจะอพโหลดไฟล อาจเปนชอหรอหมายเลขไอพ เชน www.741.com หรอ 209.63.57.10

ชอบญชผใชงาน และรหสผาน พอรตการเชอมตอ (ปกตใชคามาตรฐาน Port 21) คลกทปม Quickconnect ไดเลย เมอเชอมตอสาเรจดานซายมอคอรายการไฟลในเครองของ

เราเอง ทางฝงขวามอคอเครองแมขาย เพยงคลกเลอกไฟลทตองการรบ -สง แลวลากไปยงฝงตรงขาม กเปนอนเรยบรอย



104

การสงไฟลดวยบราวเซอร ในกรณฉกเฉนไมมโปรแกรมรบสงไฟลในเครองคอมพวเตอร เรา ยงสามารถสงไฟลดวย

วธการ FTP แบบไมตองใชโปรแกรมพเศษชวย เหมาะสาหรบการใชงานในเครองคอมพวเตอร ทวๆ ไปทไมไดตดตงโปรแกรมเพอการจดสงไฟลเปนการเฉพาะ ซงสามารถทาไดงายๆ ดงน

1. เปดหนาตาง บราวเซอร Internet Explorer, Firefox หรอหนาตาง Windows Explorer ขนมา ทชอง Address ใหพมพคาสงสาหรบการรบสงไฟลลงไป รปแบบคาสง

ftp://[email protected] หรอ ftp://username@ip address ตวอยาง เชน ftp://[email protected] หรอ ip address กดปม Enter

2. จะมกรอบหนาตางใหใสรหสผานตามทไดลงทะเบยนไวกบผใหบรการ เมอใสลงไป ถกตองกดปม Log On



105

3. กจะเหนไฟลทเราเคยสงไวกอนหนาดงภาพ จากนนเปดหนาตาง Windows Explorer ในเครองของเราเลอกไฟลทตองการ นาไปวางในบราวเซอร FTP ของเราไดทนท

วธการนใชไดในกรณฉกเฉนกบเครองคอมพวเตอรทไมไดตดตงโปรแกรมประเภท FTP

ไว สะดวกทกทขอใหเครองคอมพวเตอรนน เชอมตออนเทอรเนตไ ดกพอ

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

การโฆษณาประชาสมพนธเวบไซตจนเปนทรจก มจานวนผเขาชมเวบไซตมากพอสมควร การทเราใชบรการพนทฟรของผใหบรการตางๆ เราจะไดชอเวบไซตเปน Sub Domain ของผใหบรการ เชน http://htmlweb.741.com ซงไมเปนเอกลกษณตามทเราตองการ อยากจะมโดเมนเนมในชอทตนเองตองการ กสามารถทาไดเพอประกาศใหผชมทราบวา เวบไซตของเรานไมไดคดจะทาเลนๆ แตทา อยางจรงจงตอเน องตลอดไป

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



106

ชอโดเมนของเวบไซตตางๆ จะมรายละเอยดดงภาพบน คอ ระบชอบรษท/บคคล/

หนวยงาน /องคกรทเปนเจาของ ระบกจการดาเนนงานของเวบไซต และระบประเทศททาการจดทะเบยนโดเมน (ยกเวนเฉพาะทจดทะเบยนในสหรฐอเมรกาทไมมชอประเทศตอทาย ) จากตวอยางคอเวบไซตของบรษทไมโครเทคทากจการคาขาย จดทะเบยนในไตหวน นามสกลตอทายโดเมนมความหมายดงน

สกลโดเมน ความหมายของสกลโดเมน

.com Company กจการการคาขาย หางรานหรอบรษท .net Network กจการบรการดานเครอขาย .org Organization องคกรอสระทไมหวงผลกาไร .edu Education สถาบนการศกษา โรงเรยน มหาวทยาลย .gov Government องคกรภาครฐ หนวยงานราชการ .mil Military องคกรทางทหาร กองทพ

และในปจจบนยงมชอนามสกลใหมๆ เพมมากขน เนองจากสกลเดมทเปนทนยม (.com, .net) มผใชชอดๆ สวยๆ ไปหมดแลว จงมสกลใหมเชน .tv, .info และอนๆ

เราสามารถขอจดทะเบยนโดเมนเนมไดจากตวแทนผใหบรการในประเทศไทย ซงจะมทงบรการจดโดเมนอยางเดยวหรอจดโดเมนพรอมเชาพนทสาหรบวางเวบไซตดวย คาบรการจด ทะเบยนโดเมนปละ 350-600 บาท บางแหงเชาพนท โฮสท 1 ปจะใหจดชอโดเมนฟร ลองคนหารายละเอยดจาก Google ดได

ชอโดเมนเปนชอทมหนงเดยวไมสาม ารถซากบผอนได ชอทสน สอความหมายด และจดจา ไดงายมกจะมผขอจดทะเบยนไว เพอขายตอใหกบผทสนใจอยากได ดงนนหากเราจดชอโดเมนทด ผเขาชมกจะสามารถเขาชมเวบไซตเราไดงาย ถามยอดผเขาชมสงตดอนดบในเวบไซต Search engine กควรจะรกษาไวอยาใหหมดอาย ไป เพราะอาจถกยดครองไปขายตอใหกบผอนได



107

สาหรบในประเทศไทยจะมโดเมนทบงบอกวา เปนบรษท/เจาของมทตงในประเทศไทย (.th) สามารถจดโดเมนกบ บรษท ท .เอช.นค จากด (http://www.thnic.net) ได ซงมนามสกลของโดเมนลงทายดงน

สกลโดเมน ความหมายของสกลโดเมน

.co.th Company กจการการคาขาย หางรานหรอบรษท

.or.th Organization องคกรอสระทไมหวงผลกาไร หรอองคกรในกากบ ของรฐ

.ac.th Academic สถาบนการศกษา โรงเรยน มหาวทยาลย

.go.th Government องคกรภาครฐ หนวยงานราชการ

.mi.th Military องคกรทางทหาร กองทพทง 3 เหลา .in.th Individual เวบไซตสวนบคคล

คาใชจายในการจดโดเมนป ละ 800 บาท (ไมรวมภาษมลคาเพม ) สามารถดรายละเอยดเพมเตมไดจา กเวบไซตของบรษท



108

กจกรรมเสนอแนะ หลงจากการศกษาบทเรยนหนวยท 7 เสรจสนแลว ใหนกเรยน แตละ คน ทากจกรรมดงน 1. ใหนกเรยนคนหาเวบไซตทใหบรการพนทฟร และเลอกสมครใชบรการเพออพโหลด

เวบไซตทจดทาขนของกลมหรอของตนเอง 2. ใหนกเรยนทดสอบการอพโหลดเวบไซต ตามวธการททางผใหบรการกาหนดไว

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

บรการไว ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. ………………………………………………………………………………………………….. …………………………………………………………………………………………………..

2. จงใหความหมายของชอโดเมนตอไปน www.siam.edu ……………………………………….……………………………………….. ………………………………………………………………………………………………….. www.moe.go.th…………………………………………………………………………………. ………………………………………………………………………………………………….. www.easyhome.in.th……………………………………….………………………………….. ………………………………………………………………………………………………….. www.krumontree.com………………………………………………….……………………… …………………………………………………………………………………………………..

เทคนคพเศษในการสรางความนาสนใจในเวบเพจ


86

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

การโตตอบกบผชมดวยลกเลนตางๆ การเพมเสยงประกอบ การใชภาพเคลอนไหว เชน ภาพยนต คลปสนๆ เขาชวย ในการเลาเรองหรอสอควา มหมาย สงเหลานเราตองคอยๆ ศกษาเพมเตมไปทละ นด เพราะเทคโนโลยเปลยนแปลงไปอยางรวด เรวมาก การเรงศกษาในเรองทคาดหวงไมไดวาจะ ไดรบความนยมเพยงใด จะเปนการสญเปลาถาความนยมนนหดหายไป ในบทนจะเปนการรวบรวม เทคนคตางๆ ทได รบความนยม และสรางความนาสนใจใหเวบไซตได

สรางความเดนดวยสไตลชท Style Sheet

เทคนคการควบคมการแสดงผลแบบ (Style Sheet) มใชมานานแลว ตงแตไมโครซอฟทเรม พฒนาบราวเซอร Internet Explorer จนกระทงไดรบการยอมรบ และนามาใชกนมาก เพราะชวยใน การปรบเปลยนรปแบบเวบเพจทกหนาไดงายๆ ทงเวบไซต เพยงแกไขทตว ไฟลควบคมรปแบบ (Style Sheet) ทเดยวจะมผลตอเวบเพจทกหนา ทาใหสะดวกมากยงขนไมตองไปตามแก ไขในทกๆ ไฟลนบรอยหนาในเวบไซตนน

สไตลชทจะมอย 3 แบบ คอ 1. แบบฝงตวในไฟล HTML Embedding จะกาหนดไว ในสวนหวของไฟลภายในแทก

<Style> … </Style> เพอกาหนดการแสดงผลเปนพเศษสาหรบไฟลนนไฟลเดยว มกจะพบในการ ใชงานซอฟทแวรสรางเวบแบบ WYSIWYG เชน Dreamweaver, Front Page

2. แบบเชอมโยงจากไฟลภายนอก (Linking) คอการกาหนดไฟลสไตลชทแยกไวตางหาก แลวใชคาสง <link> จากสวนหวของไฟลเรยกเอาไฟลสไตลชทมาทางานเมอเรมตนการโหลด ไฟล เปนรปแบบทนยมนามาใชงานกนมากทสด เนองจากมความงายในการควบคมการแสดงผลของหนาเวบเพจทงหมดในเวบไซต เมอมการแกไขคาในคาสงของสไตลชท ใหเปลยนแปลงไปจะมผลกระทบตอการแสดงผลของหนาเวบไซตทงหมดในทนท จงทาใหเกดความสะดวกในการจดการ แสดงผลของเวบไซตขนาดใหญ ทมจานวนหนาเวบเพจจานวนหลายรอยหนา ใหแสดงผลไปในทศทางเดยวกนดวยการแกไขเพยงไฟลเดยว

ในการจดการเวบไซตขนาดใหญดวยระบบบรหารจดการเนอหา (CMS : Content

Management System) จงมการใช Style Sheet ในการควบคมการแสดงผลนเปนหลก 3. แบบกาหนดไวในแทกทตองการ (Inline) จะใชเมอตองการความแตกตางเฉพาะไฟล

เฉพาะทเทานน

เทคนคพเศษในการสรางความนาสนใจในเว บเพจ


87

ตวอยางแบบ Embedding

คอการใชแทก <style> และ </style> ครอบขอกาหนดสไตลชทท งหมดไว และใหสวนสไตลชทนอยระหวางแทก <head> และ </head> ตามตวอยาง

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

1. การกาหนดการแสดงผลในสวน BODY ใหชดขอบจอทกดาน ดวยการกาหนด Margin (จดเรมตนในการแสดงผล ) เปนคาศนยทกดาน และ Padding (ระยะหางจากขอบบราวเซอร ) เปนคาศนยทกดาน ซงเราสามารถเพมเตมเรองสของพนหลง ตวอกษรไดในสวนนดวย แตละคาสงจะ คนดวยเครองหมายเซมโคลอน (;) เชน

body {margin: 0px 0px; padding: 0px 0px; bgcolor: #ffffff; color: #0000cc;}

2. การควบคมการแสดงผลของจดเชอมโยงทงสแบบใหมสอะไร (Color คอสตวอกษร)ใหมขดเสนใตหรอไม (Text-decoration คอลกษณะของตวอกษร ถาเปน none คอไมแตกตางจากขอความ ปกต underline คอมขดเสนใต bold คอเปนตวหนา) เมอเกดการกระทา ประกอบดวย

2.1 จดเชอมโยง A:link 2.2 จดทเคยคลกไปแลว A:Visited 2.3 จดทกาลงจะคลก A:Active 2.4 จดทเมาสเคลอนผาน A:Hover



88

3. การกาหนดลกษณะของตวอกษรในบรเวณปอนขอความ (TextArea) ใหใชตวอกษรขนาดเทาใด (Size) รปแบบตวอกษร (font-family) ลกษณะของตวอกษรปกต/หนา/เอยง (font-

style) และระยะหางระหวางบรรทด (line-height) 4. การกาหนดการแสดผลของขอความในชองตาราง (td) เหมอนขอ 3

ตวอยางแบบ Linking

การกาหนดสไตลชทแบบนจะตองกาหนดในสองสวนดวยกนคอ ไฟลสไตลช ททมสวนขยายของไฟลเปน *.CSS และในไฟล HTML ทมการใชแทก <LINK> เพออางถงขอกาหนดตางๆ ในไฟลสไตลชท

สาหรบในสวนแรกนน เราจะตองสรางไฟลสไตลชทเชนเดยวกบแบบ Embedding แตแยกออกมาจดเกบเปนไฟลตางหากและใหมสวนขยายของไฟลเปน *.CSS เพอบอกใหทราบวาเปนไฟลสไตลชทนนเอง ใช Notepad หรอโปรแกรมเทกซเอดเตอรตวใดสรางกได ดงตวอยางนเปนไฟล สไตลชทของเวบไซต www.benchama.ac.th



89

โครงสรางของการเขยนไฟลสไตลชทคอ HTML Tag {Property : Value; Property : Value; ...}

HTML Tag คาสงในภาษา HTML เครองหมาย {….} ทาหนาทเหมอนกบเครองหมาย <...> ในภาษา HTML

Property ชอของคณสมบตทเปนสวนขยายของคาสงภาษา HTML หากมหลายคาแตละคาจะคนดวยเครองหมายเซมโคลอน (;)

Value คาของ Property ทกาหนดไว

รปแบบคลายๆ กนกบสไตลชทแบบแรก แตมรายละเอยดมากกวา เพราะมทงการกาหนด รปแบบของหวเรอง ฟอนตพเศษทถกเรยกใชในบางตาแหนง การแสดงผลของพนหลง ตวอกษรใน สวนตางๆ การแสดงสของสครอลบารดานขาง เสรจแลวจดเกบในชอไฟล bmstyle1.css

ในสวนทสองซงเปนการใ ชแทกคาสงในไฟล HTML เพอเรยกใชสไตลชท จะใชแทก <LINK> อยภายในสวน <HEAD> และ </HEAD> ซงมรปแบบดงน

<html> <head>

<link href="bmstyle1.css" rel="stylesheet" type="text/css"> <title>Test Style Sheet</title>

</head> <body>……………..</body>

</html>

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

ตวอยางแบบ Inline

ในเวบเพจบางหนาเราอาจมความตองการพเศษในการแสดงผลของฟอนต เชน รปแบบตวอกษร ส ขนาด เราจะใชวธการเขยนคาสงสไตลชทลงไปในจดนนๆ โดยตรงไดเลยเชน

<font style=“font-family:Tahoma; color:#ff0000; size:14px;”>Test Font</font>

มความหมายวา ขอความ Test Font ใหแสดงผลดวยฟอนต Tahoma ใชสแดง และขนาดตวอกษร 14 พกเซล



90

เทคนคนาสนใจสาหรบนาไปใชในเวบเพจ

1. การทาใหหนาเวบเพจเปลยนไปโดยอตโนมต คาสง HTML ททาใหมการเปลยนหนาเวบเพจจากหนาหนงไปยงอกหนาหนงโดยอตโนมต

ในเวลาทกาหนด (ไมตองมการคลกทจดเชอมโยง ) ใหใสบรรทดตอไปน ไวท Tag <HEAD>

คา x = จานวนวนาท ทเราตองการใหเปลยนไปยงหนาทกาหนดใน URL=? ควรเผอเวลาทบราวเซอรจะโหลดหนาเวบเพจนไวดวย เชน ใชเวลาโหลดจนแสดงผ ลไดครบถวนไป 10 วนาท เรากควรกาหนดคา x=15 เปนตน ควรจะทดลองดจนไดผลเปนทนาพอใจ ในกรณทตองการใหเปลยนหนาไปในทนทใหใสคา x=0

2. การทาใหหนาเวบเพจบนทกวนเวลาทแกไขใหอตโนมต เราอาจจะเบอทจะแกไขวน เวลาทแสดงการแกไข /อพเดทครงสดท ายของเวบเพจ เพอให

ผชมไดทราบวาเวบเพจของเรามการปรบปรงแกไขบอยๆ และแกไขครงสดทายเมอใด สวนใหญเรา มกจจะลมระบ บางทแกไขปรบปรงไปแลวตง 2-3 ครง แตวนท ของการแกไขครงสดทายก ยงเหมอนเดม ใหลองใชชดสครปตสนๆ นไปวางไวในตาแหน งทเราตองการใหแสดงผลการปรบปรงครงสดทาย อาจเปนสวนบนสดของหนาหรอทายสดกไดตามชอบ (สครปตนจะ ไดผลด ถกตองหากวน/เวลาของเครองใหบรการตงคาเปนปจจบน เพราะตวสครปตจะอานเวลาจากภายในเครองเซรฟเวอรมาเทยบกบวนเวลาทเราบนทกไฟล ครบ)

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



91

3. การใสเสยงเพลงใหหนาเวบเพจ ใสเสยงใหกบ เวบเพจของเราดวยไฟลมด (*.mid) ตองแยกเปน 2 คาสง เพราะวาบราวเซอร

ของแตละ คาย รบคาสงในการแสดงผลแตกตางกน (ระวง! การใสเสยงจะ ทาใหเวบเพจของเราโหลดชาลงมาก อาจทาใหผชมเบอและไมรอดการแสดงผลของเวบไซต

1. บราวเซอร Internet Explorer ของ Microsoft ใหใชคาสง BGSOUND วางไวในสวนทตองการภายใตคาสง <BODY> <bgsound src=“xxx.mid” autostart=“true” loop=“true” controls=“smallconsole”

width=“50” height=“15” volume=“75”>

2. บราวเซอรอนๆ ใหใชคาสง EMBED SRC แทน <embed src=“xxx.mid” autostart=“true” loop=“true” controls=“smallconsole”

width=“50” height=“15” volume=“100”>

ใหเลอกใชตามความตองการจะใสไปทงสองตวเลย กได แตใหเปนเพลงเดยวกน สาหรบไฟล xxx.mid นนคอมดไฟลชนดสแตนดารด ทใชเลนกบเครองดนตร ถาเปนไฟลทใชในโปรแกรมคาราโอเกะจะตองนามาแปลงใหเปนมาตรฐานกอน สวนขยายในแทกทนาสนใจมดงน

AUTOSTART คอการกาหนดใหเพลงเลนทนทหรอไม คาคอ True/Fault LOOP คอการกาหนดใหเลนวนเวยนกนไปไมมจบ คาทใชไดทง True/Fault และ

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

สามารถปด/เปดเพลงได ถาเขาไมอยากฟง WIDTH-HEIGHT คอขนาดของหนาตาง ควบคมการเลนเสยง VOLUME คอระดบความดงของเสยงเพลง สามารถกาหนดไดตงแต 0-100 คาปกต

คอ 50 การนาไปใชควรพจารณาดวยวา เสยงเพลงสรางความนาสนใจใหกบเวบเพจของคณ

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

ถานาคาสงนไปไวท สวน หวของไฟล ถาการโหลดเพลงยงไมเสรจสนการแสดงผลในสวน อนๆ จะหยดนงไมแสดงผล ไปดวย จนกวาการโหลดเพลงจะแลวเสรจ จงควรนาคาสงน ไปไวในสวน ทายๆ ไฟล



92

4. การสรางเวบเพจใหมการแสดงผลแบบเฟรม FRAME

เปนการแบงพนทจอภาพออกเปนสวน ๆ เพอใหแสดงผลดวยไฟลทแตกตางกน ดงภาพ

เมอเราคลกทเมนในหวขอทางดานซายมอ (1) เนอหาในสวน แสดงผลฝงขวามอ (3) เทานน

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

ไฟลท 1 เปนไฟลควบคมการแสดงผลของเฟรมซายและขวา ไฟลท 2 เปนไฟลเมนสาหรบการกาหนดหวขอใหเลอกในเฟรมซาย ไฟลท 3 เปนไฟลแสดงสวนหวของเวบ ไฟลท 4 เปนไฟลเนอหาทจะแส ดงสมพนธกบหวขอในไฟลเมน ซงจานวนไฟลท 3 น

จะมจานวนเทากบหวขอในไฟลท 2 เปนอยางนอย (ตวอยางในภาพจะมไฟลท 4 จานวนถง 8 ไฟลตามหวขอ)

ตวอยางคาสงในการแบงเฟรม ในไฟลควบคมหรอไฟลแรก index.html จะมคาสง เฉพาะสวนทเปนแทก <HTML> และ

<HEAD> ไมมสวน <BODY> แตจะมสวนควบคมการแสดงผลแบบเฟรมแทน ตวอยางตอไปนเปนการแบงเฟรมออกเปนสามสวน คอ เฟรมบนสาหรบการใสหวเรอง

หรอชอเวบไซต เฟรมซายสาหรบเมน และเฟรมขวาสาหรบสวนเนอหา ดงนนไฟลเรมตนจงม 4 เฟรม (สามารถดาวนโหลดไฟลตวอยางไดท http://www.krumontree.com/html/tools/frame.zip)

1

2

3



93

เรมตนสรางไฟลควบคม ไฟลท 1 ดวยโปรแกรมแกไขขอความ (Text Editor) และบนทกชอ

เปน index.html ประกอบดวยคาสงดงน <html> <head> <title>Frame Control</title> <meta name="description" content="EasyHome is a complete webpage to learn about building homepage by using the basic tool & HTML."> <meta name="Keywords" content="easyhome, homepage, webpage, design, html, tool, shareware, freeware."> <meta name="Author" content="Montree Kotkanta - [email protected]"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <frameset rows="15%,*" frameborder=yes border="1"> <frame name="top" src="top.htm" noresize>

<frameset cols="20%,*" frameborder=yes border="1"> <frame name="left" src="menu.htm" noresize> <frame name="right" src="news.htm" noresize>

</frameset> </frameset> <noframes><br><br> <div align="center"> <font size="4"><b>I'm sorry if you can't view my webpage. You must have a browser capable of displaying frames, and frames must be enabled in the browser's preferences.</b></font> </div> </noframes> </html>

ในกรอบคอ คาสงการสรางเฟรมแสดงผลโดยแบงเฟรมในแนวนอนออกเปนสองสวน สวนท 1 สาหรบไฟลแสดงหวเวบ (top.htm) สวนทสองเปนสวนทแสด งเมนและเนอหา ดวยคาสง

<frameset rows="15%,*" frameborder=yes border="1">

94

จากคาสงมความหมายวา เปนการแบงเฟรมออกเปนสองแถว โดยกาหนดใหแถวแรกม ขนาดความสงเทากบ 15% ของจอภาพ และแถวทสองคอสวนทเหลอ และมเสนขอบของเฟรมขนาด 1 พกเซล

<frame name="top" src="top.htm" noresize>

กาหนดใหแถวบนมชอเฟรมวา top และแสดงไฟลชอ top.htm ไมสามารถเปลยนขนาดได (noresize) คอมขนาดความสงเปน 15% เสมอ

จากนนเราจะทาการแบงพนทเฟรมทสองตามแนวตงเปน 2 เฟรมใหมสดสวนเปน 20% สาหรบการแสดงผลเมน และอกสวนทเหลอ 80% แสดงเนอหา ดวยคาสง

<frameset cols="20%,*" frameborder=yes border="1">

จากนนใชคาสงใหเฟรมซายมอเรยกไฟล menu.htm มาแสดงผลและตงชอเฟรมนวา left และกาหนดใหเฟรมขวามอมชอวา right และแสดงผลไฟลแรกดวยชอ news.htm

<frame name="left" src="menu.htm" noresize>

<frame name="right" src="news.htm" noresize>

มคาสงเพมเตมคอ noframe ใชเพอใหขอความทอยภายใตคาสงนแสดงผล บอกใหผชม ทราบในกรณทบราวเซอรบางรนทไมมความสามารถแสดงผลในแบบเฟรมได

ไฟลทสอง top.htm เปนไฟลแสดงสวนหวของเวบ อาจใชตวอกษรขนาดใหญ หรอไฟล ภาพแสดงผลกได ตวอยางคาสงในไฟลมดงน <html>

<head> <title>Top Frame</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">  </style>

</head> <body bgcolor="#ffff99" text="#ff0000">

<center><font size="+3"><b>TOP FRAME</b></font> <font color="#0000FF"> (ใชภาพแทนขอความนได)</font></center> </body> </html>



95

ไฟลทสาม menu.htm เปนไฟลสาหรบแสดงผลรายการเมนของเวบไซต ซงเมอผชมคลกทจดเชอมโยงในเมน เฟรมทางดานขวามอจะถกแทนทดวยไฟลทกาหนดไว เปนไฟลทจะตองทาการสรางจดเชอมโยงเพอใหแสดงผลตางจากการทาจดเชอมโยงแบบอนๆ ตวอยางคาส งมดงน <html> <head> <title>Left frame</title>

สามารถกาหนดสไตลชท เมตาแทก เหมอนไฟล index.html และ top.htm

</head> <body>

<div align=“center”><font size="+3"><b>เมนตวเลอก</b></font></div> <hr size="3">

<a href="news.htm" target="right"><b>NEWS</b></a><br> <a href="myfav.htm" target="right"><b>MY FAVORITE</b></a><br> <a href="mysong.htm" target="right"><b>MY SONGS</b></a>

<hr size="3">

เมอคณคลกท link<br>ขางบนใหสงเกต<br>การเปลยนแปลง<br>ทเฟรมดานขวาครบ

<hr size="3"> </body> </html>

จะสงเกตไดวา ในการเชอมโยงของเมนจะกาหนดเปาหมายใหแสดงในเฟรมขวามอ (right) จงตองใช target=“ชอเฟรม” หากตงชอเฟรมเปนอยางอนตองระบใหถกตอง หากไมระบ target จะเปนการเรยกไฟลนนๆ มาแสดงผลในเฟรมเมน ซงเราไมตองการใหเปนเชนนน

สวน ไฟลท 4 news.htm และไฟลเนอหาอนๆ กสรางเหมอนไฟล HTML ปกตทวไป สาหรบไฟลตวอยางทงหมด มใหดาวนโหลดท http://www.krumontree.com/html/tools/frame.zip

นอกจากนเรายงสามารถเรยกไฟลเนอหาจากเวบไซตอนๆ มาแสดงผลภายในหนาเวบเพจ ของเราได ดวยการใชคาสง iframe สามารถกาหนดขนาดหนาจอแสดงผล (ความกวาง/สงของเฟรมได) เชน

<iframe src=“http://www.isangate.com/word.html” width=“600” height=“400” border=“0”></iframe>

จากคาสงขางบนน เปนการเรยกไฟลเวบเพจชอ word.html ของเวบไซตชอ อสานเกต มาแสดงในหนาเวบเรา โดยกาหนดความกวางไวท 600 พกเซล สง 400 พกเซล หากเวบเพจนมความกวางหรอสงมากกวาคาทเรากาหนด จะเกดแถบเลอน (Scroll bar) ขนทดานลางและดานขวามอ ตามลาดบ



96

กจกรรมเสนอแนะ หลงจากการศกษาบทเรยนหนวยท 6 เสรจสนแลว ใหน กเรยนแตละ คน ทากจกรรมดงน 1. ใหนกเรยนเขยนคาสง Style Sheet เพอควบคมการแสดงผลเวบเพจในรปแบบตางๆ 2. ใหนกเรยนทดสอบการใชคาสงสครปต บนทกวนเวลาทแกไขครงสดทายลงในหนา

เวบเพจ 3. สรางเวบไซตแบบเฟรมตามความคดของนกเรยนเอง เกยวกบชวประวตส วนตวของ

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

คาถามทายบท 1. อธบายความหมายของสไตลชทแบบตางๆ

Embedding ..……………………………………………………………………………….... ………………………………………………………………………………………………….. Link ……………………………………………………………………………………………. ………………………………………………………………………………………………….. Inline ………………………………………………………………………………………… …………………………………………………………………………………………………..

2. จงใหความหมายของคาสงคณสมบตเพมเตมใน Frameset ตอไปน rows ………………………………………………….……………………………………….. cols ……………………………………………………………………………………………. noresize …………………………………………………….………………………………….. name …………………………………………………………………….………………………

การออกแบบและเขยนเวบไซต

นายมนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

109

ตารางแสดงคาสและเลขฐานสบหก

การออกแบบและเขยนเวบไซต

นายมนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

110

บรรณานกรม

ทรงศกด บรรจงมณ . คมภรออกแบบเวบเพจอยางมออาชพ. กรงเทพฯ : ซเอดยเคชน, 2542. นพรตน วนจวรรณกมล และพรเทพ เซยวโหล. สรางสรรค Web Page ใหมเสนหวนละอยาง.

กรงเทพฯ : ซเอดยเคชน, 2541.

เยาวภา สงวนวรรณ และวทยา สงวนวรรณ. Design Web Graphics with HTML. กรงเทพฯ : ดอกหญา, 2540.

วทยา เรองพรวสทธ. เรยนรภาษา HTML กบการเขยนโฮมเพจ สาหรบผเรมตน . กรงเทพฯ : ซเอดยเคชน, 2540.

สปราณ ธรไกรศร. HTML 4 Visual Guide. กรงเทพฯ : โปรวชน, 2542

Laura Lemay. Teach yourself Web Publishing with HTML 3.2 in 14 days. (n.p.) : Sans.net Publishing, 1996.

Siamak Sarmady. Web Design in 7 Days!.e-book : Learn’em Educational (Learnem.com), 2000.

W3Schools.com. HTML Tutorial. Online course : http://www.w3schools.com/html/, 2000.

หน่วยที่ 6 เทคนิคพิเศษในการสร ... ·...

Documents