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 เมาสจะเปลยนเปนรปมอ