Download - 07 ใบเนื้อหา หน่วยที่ 7
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท :
หนวยท 7 การเชอมโยงบนเวบเพจ
สาระการเรยนร 7.1 การเชอมโยงในเวบเพจเดยวกน 7.2 การเชอมโยงไปยงเวบไซตอน 7.3 การเชอมโยงไปยงอเมล 7.4 การเชอมโยงไปยงไฟลดาวนโหลด 7.5 การเชอมโยงดวย Map Link
วตถประสงคเชงพฤตกรรม 7.1 อธบายการเชอมโยงในเวบเพจเดยวกนได 7.2 อธบายการเชอมโยงไปยงเวบไซตอนได 7.3 อธบายเชอมโยงไปยงอเมลได 7.4 อธบายการเชอมโยงไปยงไฟลดาวนโหลดได 7.5 อธบายการเชอมโยงดวย Map Link ได
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท : การเชอมโยงในหนาเวบเพจหนาเดยวกน เพอลดปญหาการเลอนหนาจอเพอดขอมลทมปรมาณมากซงจะสงผลใหผใชงาน เกดความสบสน ทงนผออกแบบควรมการก าหนดโครงสรางของการเชอมโยงทชดเจนและงายตอการใชงาน 7.1.1 ก าหนดเปาหมายการเชอมโยง 1. น าเคอรเซอรไปวางหลงขอความทตองการจะก าหนดใหเปนจดหมาย 2. เลอกค าสง Insert > Named Anchor
จะแสดงหนาตาง Named Anchor ตงชอเปาหมายทตองการเชอมโยง คลก OK
จะปรากฏจดรปสมอเรอก ากบอยทจดเปาหมาย
7.1 การเชอมโยงในหนาเวบเพจเดยวกน
สญลกษณแสดงเปาหมาย
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท : 7.1.2 การเชอมโยงไปยงปลายทาง 1. ท าแถบด าบนขอความทตองการเชอมโยง
2. ไปท Properties ในชอง Link ใหพมพเครองหมาย # ตามดวยชอ Anchor ทไดตงไว เสรจแลวกดปม Enter
3. ตรงจดเชอมโยงจะปรากฏตวอกษรสน าเงนและขดเลนใต กด F12 เพอดผลดวยเวบบราวเซอร
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท : การเชอมโยงไปยงเวบอนๆทเกยวของเพอตองการใหผชมศกษาขอมลเพมเตม โดยการเชอมโยงเวบไซตตนทางอาจจะใชขอความ รปภาพ หรอวตถใดๆ เปนตวเชอมกได มวธการดงน 1. เลอกรปภาพหรอขอความทตองการจะเปนจดเชอม ในทนใหคลกภาพโลโกทตองการสรางจดเชอม
2. คลกทชอง URL ของเวบไซตปลายทางจากนน copy URL มาวางในชอง Link แลวกดแปน <Enter>
3. บนทกไฟล แลวกดแปน F12 เพอแสดงผลการเชอมโยงดวยบราวเซอร
7.2 การเชอมโยงไปยงเวบไซตอน
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท : การเชอมโยงไปยงอเมล คอ การสรางอเมลแอดเดรสของเราไวส าหรบใหผตองการจะตดตอไดพมพจดหมายสงมาไดทนทโดยไมเสยเวลาพมพอเมลแอดเดรสอก โดยปกตจะอยในหนาเวบเพจแรก หรอ “contact” มวธการเชอมโยงไปยงอเมล ดงน 1. คลกเลอกต าแหนงทจะเชอมโยง เลอกค าสง Insert > Email Link
2. จะปรากฏหนาตาง Email Link พมพขอความทเปนจดเชอมโยง และอเมลแอดเดรส คลก OK
3. ไปท Properties ใหคลกทชองลงก แลวพมพ Mailto: ตามดวย อเมลแอดเดรส จากนนกดแปน <Enter>
4. บนทกเวบเพจ แลวกดแปน F12 เพอแสดงผลการเชอมโยงดวยบราวเซอร
7.3 การเชอมโยงไปยงอเมล
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท : ไฟลดาวโหลดเปนไฟลทสรางไวดวยโปรแกรมตางๆ เพอใหสามารถดาวโหลดไปใชงานได เชน ภาพ แบบฟอรม เปนตน ในขนแรกจะตองเตรยมไฟลงานนนใหเรยบรอยและบนทกเกบไวในไซตงานกอน จงท าการสรางการเชอมโยง ดงน 1. เลอกขอความหรอรปภาพทจะท าเปนจดเชอมโยง
2. คลกทไอคอน Browse for file ดานขวามอของชอง Link
3. จะปรากฏหนาตาง Select file เลอกไฟลทตองการ แลวคลก OK
7.4 การเชอมโยงไปยงไฟลดาวโหลด
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท : 4. บนทกเวบเพจ แลวกดแปน F12 เพอแสดงผลการเชอมโยงดวยบราวเซอร เมอคลกบรเวณลงกจะปรากฏหนาตาง file Downlond ขนมาใหเลอก สามารถดาวนโหลดไปใชงานได
การเชอมโยงแบบ Map Link เปนการก าหนดจดเชอมโดยท หรอบางจดใหกบรปภาพ กรณทไมตองการใหทงภาพเปนจดลงก มวธการดงน 1. คลกเลอกภาพทตองการสราง Map link ในทนเลอกน าผงขวดลาง (Honny II)
2. ท Properties จะปรากฏเครองมอส าหรบสราง Map Link
7.5 การเชอมโยงดวย Map Link
กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 7 การเชอมโยงบนเวบเพจ
ใบเนอหา หนาท
แผนท : 3. น าเครองมอรปทตองการไปวาดตรงต าแหนงทตองการบนภาพ
4. ท Properties ชอง Link ใหเลอกไฟลหรอเวบเพจทจะลงกไป
5. บนทกเวบเพจ แลวกดแปน F12 เพอแสดงผลการเชอมโยงดวยบราวเซอร ถาเลอนเมาสไปยงต าแหนงทท า Map Link เมาสจะเปลยนเปนรปมอ