<FRAMESET COLS or ROWS = "80%,*" > </FRAMESET> <FRAME SRC = "main.html" > </FRAMESET> <FRAME SRC = "main.html" > </FRAMESET> <FRAME SRC = "top.html" > <FRAMESET COLS = "20%,80%" >
<FRAME
SRC = "left.html" > </FRAMESET> </FRAMESET> <FRAMESET> �繤����������鹡����˹�Ҩ� ��лԴ���´��� </FRAMESET> <FRAME SRC > �繤�������¢ͧ FRAMESET ���͡�˹�����ʴ��Ţ�������� ���ʴ��� HTML �ա��� ���ͨ�����ʴ����ٻ�Ҿ���� �ҡ������ҧ��ҹ���� ��ҡ�˹���Ҵ�ͧ���Ҿ�������繵� 80%,*
(����ͧ���� * ���¶֧ ��Ҵ�ͨ��Ҿ��������) �͡�ҡ�������ѧ����ö��˹��� pixel ����� �� 500,100 �繵� ��˹����˹觢�ͤ�������ǵ�� �ٻẺ�����
<FRAME SRC = "URL" ���� ����ٻ�Ҿ >
<FRAME SRC = "URL" ���� ����ٻ�Ҿ >
<FRAMESET COLS = "80%,*" >
<FRAME
SRC = "menu.gif" >
��Ժ��
��˹�Ҩ��� 2 ��ǹ ��ǵ�� ��ǹ�ҧ�����վ�鹷�� 80% �ͧ˹�Ҩͷ����� ��ǹ�ҧ��Ҥ�;�鹷��������� (20%) �ͷҧ��Ҩ����ٻ�Ҿ���� menu.gif
�觨��Ҿ��ǹ <FRAMESET ROWS = "80%,*" >
<FRAME SRC = "menu.gif"
>
��Ժ��
��˹�Ҩ��� 2 ��ǹ ��ǹ ��ҹ����鹷�� 20% ��ǹ��ҹ��ҧ�վ�鹷�� 80% �觨��Ҿ��ǵ������ǹ <FRAMESET ROWS = "15%,*" >
<FRAME SRC = "right.html" >
��Ժ��
��˹�Ҩͷ������� 3 ��ǹ ��ҹ����鹷�� 15% ��ǹ��ҹ��ҧ�վ�鹷�� 85% 㹾�鹷���ҹ��ҧ���͡�� 2 ��ǹ��ҹ���� 20% ��ҹ��� 80% (�����Ѻ�ǻྨ����ҹ���������)
����觾�鹷����Ҿ ����ö�������ǵ�� ����ǹ ����ö�������������� ��鹡Ѻ�����¹ �����ҧ�á��� ����ա�á�˹��Ѵ��ǹ���ç�Ѻ������ �����ٻ�Ҿ������ŧ��ǻ����...
����觹�� ����᷹������� <BODY>
��˹����˹觢�ͤ�������ǹ
align = "left"
align = "center"
align = "right"
valign = "top"
valign = "middle"
valign = "bottom"
<TR ALIGN= "CENTER" >
���� <TR VALIGN= "TOP" >
��ѧ�ҡ�ա���觾�鹷����Ҿ���� �Ҩ���繷����ҵ�ͧ ��駪��;�鹷�� ���ͧ�ҡ������ҧ�ش�ԧ����������ʴ� 㹾�鹷�����ͧ��� �ѧ������ҧ���
<FRAME SRC = "right.html" name = "show" >
���ҧ�ԧ������ʴ�㹾�鹷�����ժ������ show
<a href = "page2.html" target = "show">
การกำหนดสีของตัวอักษร (เพิ่มเติม)
ตามปกติสีของตัวอักษรสามารถกำหนดโดยใช้คำสั่ง <FONT COLOR="ชื่อสี"> ได้อยู่แล้ว แต่ยังมีวิธีกำหนดสีของตัวอักษรในกรณีอื่น ๆ อีก ดังนี้
กรณีที่ 1 กำหนดสีของตัวอักษรให้เป็นสีเดียวกันทั้งหน้า ทำได้โดยการเพิ่มเติมคำสั่ง TEXT ใน <BODY> ดังนี้ <BODY TEXT="ชื่อสี"> เช่น <BODY TEXT=green> เป็นการกำหนดให้ตัวอักษรมีสีเขียวทั้งเอกสาร |
กรณีที่ 2 กำหนดสีให้กับตัวอักษรที่ใช้ในการเชื่อมโยง (Link) ตามปกติสีของตัวอักษรที่ถูกกำหนดให้เป็นจุดเชื่อมโยงจะมีสีดังนี้
เช่น <BODY LINK=green ALINK=blue VLINK=brown> เป็นการกำหนดสีของตัวอักษรก่อนคลิ๊กมีสีเขียว ขณะคลิ๊กมีสีน้ำเงิน และเมื่อคลิ๊กแล้วจะเปลี่ยนเป็นสีน้ำตาล |
เครดิต : www.yupparaj.ac.th
เว็บไซต์ประกอบด้วยไฟล์หลายไฟล์มารวมกัน ทั้งเว็บเพจ รูป วีดีโอ เสียง ในบทความนี้จะทำ link เพื่อเชื่อมโยงไปยังไฟล์ต่างๆที่อยู่ในเว็บไซตเดียวกัน
สร้างลิงค์ในเว็บไซต์เดียวกัน
เป็นการสร้างลิงค์หากันในเว็บไซต์เดียวกัน จากเว็บเพจหนึ่งไปอีกเว็บเพจหนี่ง ขั้นตอนการสร้างมีขั้นตอนดังนี้
วิธีที่1
1.เปิดหน้าเอกสารที่ต้องการสร้างลิงค์ ใน Dreaweaver
3.1 ช่อง Text คือคำที่เราเลือกไว้ให้เป็นลิงค์
3.2 ช่อง link คือ ไฟล์ที่เราต้องการลิงค์ไป โดยการคลิกที่รูป folder สีเหลืองด้านหลัง ไฟล์ที่ลิงค์ไปจะ
เป็นเว็บเพจ ไฟล์รูป หรือเป็นไฟล์อะไรก็ได้ที่อยู่ใน local root
folder
3.3 ช่อง Target มีรายละเอียดดังนี้
1.target='_blank' เป็นคำสั่งให้เปิด link ในหน้าใหม่
2.target='_parent' เป็นคำสั่งให้เปิด link ในหน้าเดิม (ถ้าไม่เลือกจะเป็นค่านี้อัตโนมัติ)
3.target='_self'
เป็นคำสั่งให้เปิด link ใน frame ปัจจุบัน (อ่านรายละเอียดในหัวข้อเรื่อง frame)
4.target='_top'เป็นคำสั่งให้เปิด link ทับหน้าเดิมทั้งหมด ซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน
(อ่านรายละเอียดในหัวข้อเรื่อง frame)
4.คลิกโอเคก็จะสร้างลิงค์เรียบร้อย
- เลือกตัวอักษร หรือรูปภาพ ที่ต้องการให้เป็นลิงค์
- คลิกตรงรูป โฟรเดอร์ ตามรูปหมายเลข2 แล้วเลือกไฟล์ที่ต้องการลิงค์
- กำหนดการเชื่อมโยง Target
วิธีที่ 3
1.เลือกตัวอักษร หรือรูปภาพ ที่ต้องการให้เป็นลิงค์
2. คลิกตรงรูปวงกลม
3. คลิกเมาส์ค้างไว้แล้วลากไปยังไฟล์ที่ต้องการลิงค์ ตรง Panel File
4. กำหนดการเชื่อมโยง Target
สร้างลิงค์ในหน้าเดียวกัน
เว็บเพจบางหน้าที่มีเนื้อหาเยอะมากๆ ทำให้ผู้อ่านหาข้อมูลที่ต้องการทราบได้ยาก ดังนั้นเราจึงทำ link ภายในหน้าเอาไว้ เพื่อให้สามารถหาเนื้อหาอ่านได้ง่ายขึ้น ถ้านึกภาพไม่ออกก็ให้เปิด เว็บ //www.pw.ac.th/kurmeechai จะเห็นว่า มีลิงค์แบบ
หน้าเดี่ยวกัน เยอะมาก
1.เลือกจุดที่ต้องการให้ลิงค์ไป ไม่จำเป็นต้องใช้ตัวหนังสือ หรือภาพ ใช้แค่จุดในเว็บเพจนั้น เช่นลิงค์ไปบรรทัดสุดท้ายของหน้า ก็ให้คลิกเมาส์บริเวณที่ต้องการจะลิงค์ไป
2.ไปที่ Insert > Named Anchor หรือคลิกตรงรูป เสมอเรือ จะมีหน้าต่างขึ้นมากให้ใส่ชื่อของจุดลิงค์ ชื่อที่ใส่จะต้องเป็นชื่อที่ไม่มีการเว้นวรรค เป็นภาษาอังกฤษ ห้ามมีจุดต่างๆ 3.เราจะสร้างจุดลิงค์ภายในหน้ากี่จุดก็ได้แต่ห้ามชื่อซ้ำกัน ในรูป ตั้งชื่อ ว่า a คลิก OK
4. จะมีสัญลักษณ์ แสดงในจุดที่เราเลือก ถ้าไปดู Code จะเห็นดังนี้ <A NAME=?ชื่อที่ตั้ง?></A>
5.เลือกตัวอักษร หรือรูปภาพ ที่ต้องการจะทำเป็นลิงค์
6.ที่ Property inspector จะเห็นว่ามีสัญลักษณ์ ให้ลากไปยังจุด ก็จะสร้างลิงค์ได้เรียบร้อย
สร้างลิงค์ไปยังเว็บไซต์อื่น
1.เลือกตัวอักษร หรือรูปภาพที่ต้องการสร้างลิงค์
2.เปิดหน้าเว็บที่ต้องการลิงค์ แล้วทำการ คัดลอก url หรือไปที่ Property inspector ให้ใส่ชื่อเว็บที่ต้องการลิงค์ไป ช่องลิงค์ใส่ //www.goofgle.com (ต้องใส่ // หน้าเว็บที่ต้องการลิงค์ไปด้วย)
3.นำลิงค์ที่คัดลอกไว้
วางในช่อง ลิงค์
เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink
เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนด้านล่าง
1.เปิดหน้าเว็บเพทที่ต้องการปรับแต่ง
2.ไปที่ Menu เลือก Modify > Page Properties
3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง
4.ที่ categoty ทางซ้ายมือเลือก link จะมีหน้าจอให้ปรับดังรูป
1. Link font เป็น font ที่จะใช้แสดงตัวอักษรที่เป็น hyperlink ด้านหลังจะมีสัญลักษณ์ B (ทำให้ตัวอักษรที่เป็น hyperlink เป็นตัวหนาทั้งหมด) และ I (ทำให้ตัวอักษรที่เป็น hyperlink เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้
2. Size ปรับขนาดของตัวอักษรที่เป็น hyperlink
3. การปรับสีของ
hyperlink เมื่ออยู่ในสถานะต่างๆ มีรายละเอียดดังนี้
1.Link Color เป็นสีที่ใช้แสดง Hyperlink ที่เรายังไม่เคยคลิกเปิดดู
2.Visited Links เป็นสีที่ใช้แสดง Hyperlink ที่เราเคยคลิกเปิดดูแล้ว
3.Rollover Links เป็นสีที่ใช้แสดง Hyperlink เมื่อมีเมาส์วางอยู่ด้านบน
4.Activ Links:
เป็นสีที่ใช้แสดง Hyperlink เมื่อเราคลิกที่ hyperlink
4.ปรับการขีดเส้นใต้ของ Hyperlink มีรายละเอียดดังนี้
1.Always underline ให้แสดงเส้นใต้ในทุกกรณี
2.Never underline ไม่แสดงเส้นใต้ในทุกกรณี
3.Show underline only on rollver แสดงเส้นใต้เฉพาะตอนที่มีเมาส์อยู่ด้านบนเท่านั้น
4.Hide
underline on rollver ปรกติจะแสดงเส้นใต้ แต่เมื่อเมาส์อยู่ด้านบนไม่ต้องแสดงเส้นใต้
คลิกโอเค Hyperlink ก็จะปรับหน้าตามที่เราได้ตั้งไว้ลิงค์แบบ Image map
การสร้างลิงค์แบบ Image map
เป็นการสร้างจุด (hot spot) บนรูปภาพ และให้จุดเหล่านั้นเป็นลิงค์ โดยเราจะสร้างกี่จุดในรูปก็ได้ ตัวอย่างการใช้งาน เช่น รูปการตูนที่มีหลายตัวละครในภาพเดียว เราจะทำ hot spot ให้กับรูปตัวละครแต่ละตัวแล้วให้ลิงค์ไปยังรายละเอียดของตัวละครนั้น
1.ใส่รูปของเราในเว็บเพจ
2.เลือกรูปที่ต้องการทำ Image map จากนั้นไปที่ Property inspector จะเป็นดังรูปด้านล่าง
3.คลิกเครื่องมือในการสร้าง Hot spot จะมีหน้าต่างขึ้นมาบอกว่าให้เราใส่ Alt text ให้เรา คลิก ok นำไปวาดที่รูปที่เราต้องการได้ทันที ดังรูปด้านบนใช้ Hot
spot แบบวงกลม วาดบนหน้าของโดเรมอน
4.เมื่อวาด hot spot เสร็จแล้ว Property inspector จะเปลี่ยนไปดังรูปด้านล่าง
การเขียน Alt text ให้กับ image map นั้นเป็นเรื่องจำเป็นเพราะผู้ชมจะทราบได้ว่าตรงนี้เป็น Hot spot สามารถลิงค์ไปได้ และรู้ข้อมูลคร่าวๆว่า Hot spot นี้จะลิงค์ไปที่ใด ดังตัวอย่างจะเขียน Alt text ว่า ข้อมูลของโดเรมอน
5.เครื่องมือที่ใช้สร้าง hot spot มี 3 แบบคือ
1.แบบสีเหลี่ยมใช้สร้างรูปสี่เหลี่ยม วิธีใช้คือให้คลิกที่รูปค้างไว้แล้วลากให้เป็นขนาดที่ต้องการ เราสามารถใช้ pointer แก้ไขขนาดของ hot spot ได้โดยคลิกที่มุมของ Hot spot ทีวาดไว้
2.แบบวงกลมใช้สร้างรูปวงกลม วิธีใช้คือให้คลิกที่รูปค้างไว้แล้วลากให้เป็นขนาดที่ต้องการ เราสามารถใช้ pointer แก้ไขขนาดของ hot spot ได้โดยคลิกที่จุด 4 จุดรอบ Hot spot ที่สร้างไว้
3.แบบโพลีกอน
ใช้สร้าง Hot spot แบบไม่มีรูปทรงแน่นอน วิธีใช้ให้เราคลิกไปตามจุดของรูปที่เราต้องการ การแก้ไขตำแหน่งของจุดก็ให้ใช้ pointer คลิกจุดที่ต้องการแก้ไข
6.เราสามารถสร้าง Hot spot กี่อันในรูปก็ได้โดยทำตามขั้นตอน 3 - 4
7.เราสามารถกลับมาแก้ไข Hot spot กี่ครั้งก็ได้โดยการ คลิกที่ pointer จากนั้นคลิกที่ hot spot ที่ต้องการแก้ไข
rollover image จะเป็นคำสั่งที่ทำให้รูปภาพเราเปลี่ยนไปเมื่อเราเอาเมาส์ไปอยู่เหนือรูปที่ใช้คำสั่งนี้ เช่น ในตอนแรกแสดงรูปสุนัข แต่เมื่อเอาเมาส์ไปวางบนรูปก็เปลี่ยนไปเป็นรูป สิงโตแทน มีวิธีทำดังนี้
1.เลือกตำแหน่งที่ต้องการสร้าง rollover image
2. ไปที่ Insert > Image Objects > Rollover Image จะมีหน้าต่างดังรูป
มีรายละเอียดดังนี้
1.image name ใส่ชื่อของรูป
2.original image ใส่ภาพที่ต้องการให้แสดงผล
3.rollover image ใส่ภาพที่ต้องการให้แสดงผลเมื่อเมาส์อยู่เหนือ
4.preload rollover image ถ้าเราเลือกช่องนี้ เมื่อผู้ใช้โหลดเว็บเพจครั้งแรกจะโหลดภาพ original , rollover ด้วย แต่ถ้าไม่เลือกช่องนี้ rollover image จะถูกโหลดเมื่อเมาส์อยู่เหนือ original image ทำให้การแสดงผล rollover imageช้าลง
5.alternate text คำที่แสดงเมื่อกำลังโหลดรูป หรือไม่สามารถโหลดรูปได้
6.Go to url ใส่ปลายทางที่ต้องการให้ลิงค์ไป
3.คลิก ok เท่านี้ก็สามารถทำ rollover image ได้แล้ว