การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

บทที่ 11 HTML images

   HTML images คือ การใส่รูปภาพในเอกสาร html

 1.ใส่รูปภาพแบบปกติ ไม่มีการกำหนดอะไร

<img src="/ใส่ URL ของภาพ" />

2.ในกรณีที่ต้องการใส่ชื่อภาพ ซึ่งอาจใช้เป็นข้อความสำรองในกรณีที่รูปภาพเกิดข้อผิดพลาดไม่สามารถแสดงผลบนหน้าเว็บเพจได้

<img src="/url" alt="ข้อความอธิบายภาพสำรอง"/>

3.ใส่ขนาดของภาพ

<img src="/URL ของภาพ" alt="ข้อความอธิบายภาพสำรอง" width="กรอกตัวเลขที่ต้องการ" height="กรอกตัวเลขที่ต้องการ"/>

โดยค่าตัวเลขที่กรอกมีหน่วยเป็น pixels
ตัวอย่าง

<html>
<body>

<img border="0" src="http://images.temppic.com/20-10-2012
/images_vertis/1350706157_0.24874200.jpg"
alt="coala" width="304" height="228">

</body>
</html>

ผลัพธ์ที่ได้คือ

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

***ในการใส่รูปภาพในเอกสาร html นี้การใส่ที่อยู่ URL สำคัญมาก เพราะถ้าที่อยู่ผิดรูปจะไม่แสดง
วิธีการหาที่อยู่ URL ของรูปภาพมี 2 วิธี ดังนี้
1.การเอารูปจากเว็บไซต์
- เปิดเว็บไซต์นั้นขึ้นมา หารูปที่ต้องการ
- คลิกขวาที่รูป เลือก view image info แล้ว copy ตัว URL ในส่วน location ให้หมด
- เมื่อได้ URL ก็เอาไปใส่ในโค็ด html ได้เลย
จะสังเกตุได้ว่า จะขึ้นด้วย http และจบด้วย นามสกุล .jpg หรือ .gif

2.การเอารูปภาพจากคอมของเราเอง
- หาเวปที่ให้บริการอัพโหลดรูป เช่น http://www.temppic.com
- ทำการอัพโหลดรูป พอเสร็จแล้วเราจะได้ URL

Tag ที่เกี่ยวข้อง

<img /> กำหนดรูปภาพ
<mapt> กำหนดแผนที่รูปภาพ
<area /> กำหนดพื้นที่ที่สามารถคลิ๊กได้ภายในแผนที่รูปภาพ

4.1 การใส่รูปภาพ

จากข้อมูลเบื้องต้นเกี่ยวกับรูปภาพที่จะใส่ในเอกสาร HTML ในขั้นตอนต่อไป จะนำรูปภาพมาใส่ในเอกสาร โดยจะใช้คำสั่งในการใส่รูปภาพ คือ

<img src="ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์"

หรือ "image URL">

        การใส่รูปภาพ นั้น การระบุตำแหน่งที่เก็บรูปภาพ (folder)นี้ เป็นจุดสำคัญมาก ถ้าระบุที่เก็บ (path)ผิด รูปภาพจำไม่ปรากฎขึ้น จะแสดงผลเป็นกรอบรูปภาพเล็ก ๆ  แล้วมีเครื่องหมายกากบาท (x)หรือ ? กำกับ (ดูตัวอย่าง)

        สังเกตที่ path จะใช้เครื่องหมาย สแลช (/)  ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง ดังตัวอย่าง

        ถ้าต้องการใส่รูปภาพชื่อไฟล์ flowers.gif" ซึ่งเก็บอยู่ใน folderimages จะกำหนดได้ ดังนี้

      ทดสอบการใส่รูปภาพ      

      ข้อควรระวังคือ เรื่องของที่เก็บภาพ (path)  ตรวจสอบได้ดังนี้

  1. ถ้าที่เก็บรูปภาพอยู่ใน folder เดียวกับไฟล์ HTML ที่ต้องการใส่รูปภาพนั้น ไม่ต้องระบุ path ก็ได้

  2. ถ้าไฟล์ HTML อยู่ใน folder ชื่อ homepage ที่มีภาพอยู่ใน folder ชื่อ image เมื่อจะใช้คำสั่งใส่ภาพออกมา ต้องใส่ path ให้ถูกต้อง คือ <img src="image/ชื่อภาพ"> 


����Ѻ�ٻ�Ҿ���й����ʴ��ź�˹�����䫵���  �����Ҩ����Ҿ���¨ҡ���ͧ�����ٻ ���ͧ���Ѿ����Ͷ�������⿹ ����᡹�ҡ�ٻ���·���繡�д�� ���͡�����ҧ�ٻ�Ҿ�ҡ����������Ҿ��ҧ � ���к��ͧ�Ѻ�ٻ�Ҿ����س���ѵԵ��仹����

     - ������Ҿ���ʡ�� (Type) ��  .jpeg/ .gif/ .png 

     - ��駪����Ҿ�������ѧ�����е���Ţ ��ա����§���������������ѭ�ѡɳ��ѡâ�о����

     - �������Ҿ����բ�Ҵ����Թ (File Size) 500 KB �������Ҿ�բ�Ҵ�������� ��Ъ������˹�����䫵��ʴ��������Ǣ����ҹ�鹤��

�Ը�����ٻ�Ҿ����䫵���١��ͧ
�������ٻ�Ҿ��Сͺ����������䫵��ҹ����Ѿ��Ŵ��������ͧ��� 

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
(Easy Upload Image) ���� 
การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
(Upload Image) ��ҹ�� �����繡���Ѿ��Ŵ�ٻ�Ҿ�ҡ����ͧ����������ͧ�س��������Կ�����ͧ���䫵��µç �з�������ʴ��Ŷ١��ͧ ��ʹ�������Ǵ���Ǥ��

1. Log in �����ǹ��Ҫԡ ������� "�к���鹰ҹ"  ��ԡ "�Ѵ��á���������� / ������" (����������� � ���������ͧ��� Text Editor ����ͧ��������ٻ�Ҿ���ͼ١�ԧ��ҡ�Ҿ�����ѧ�Ҿ�˭���)

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

2. ������˹�� "�Ѵ��á���������� / ������" ��ԡ�����͡����������  �ҡ��鹤�ԡ 

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
 ������������������ ���ͤ�ԡ 
การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
 ������䢺��������������ҧ������ǵ����ͧ���

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

3. ��ԡ�� "�����Ңͧ������" ��ԡ���͡�����

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
 (Upload Image) ���� 
การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
 Easy Upload Image ���������ٻ�Ҿ

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
  Easy Upload Image (�á/��� �ٻ�ҾẺ����)

����ͧ��͹��Ъ������س����ö�Ѿ��Ŵ�ٻ�Ҿ���������������䫵������ҧ����  ��§��ԡ�������ͧ��� Easy Upload Image �������͡�ٻ�Ҿ����ͧ��èҡ����ͧ���������� ��Ф�ԡ Open  �ҡ����ٻ�Ҿ�ж١�Ѿ��Ŵ ������ʴ���������Ңͧ���䫵���ѹ�դ��

�س���ѵԢͧ�ٻ�Ҿ����������㹡���ʴ��ź�˹�����䫵� ����Ҿ�չ��ʡ�� (Type) �� .gif / .jpeg / .png  ��駪�������������ѧ������͵���Ţ  ��Ф������Ҿ����բ�Ҵ����Թ (Size) 500 KB ��������Ҿ�բ�Ҵ������СѺ����ʴ��ź�˹�����䫵�  �������˹�����䫵���Ŵ�����Ū�Ҥ��
 

     ��鹵͹�������ٻ�Ҿ��������ͧ��� Easy Upload Image

1. ��ԡ����ͧ��� Easy Upload Image �ҡ��鹤�ԡ���� "Choose File"  

2. ��ҡ�˹�ҵ�ҧ "Open" ����ԡ���͡�ٻ����ͧ����Ѿ��Ŵ �ҡ����ͧ����������ͧ�س

3. ��ԡ���� "Open"

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง


 

4. �к����Ѿ��Ŵ�ٻ������ҧ������˹�ҵ�ҧ Easy Upload Image �س����ö��Ѻ��駤�ҡ���ʴ����ٻ�Ҿ�� �ѧ���

  • Width ��˹���Ҵ�������ҧ�ͧ�ٻ�Ҿ

  • Height ��˹���Ҵ�����٧�ͧ�ٻ�Ҿ

  • Border �����鹡�ͺ����ٻ�Ҿ �����������Ţ�ҡ��� ��鹡�ͺ����ʴ���˹Ң�鹤��

  • HSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǹ͹ �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��

  • VSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǵ�� �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��

  • Align ���͡����ʴ��������ҧ�ٻ�Ҿ��Т�ͤ�����Сͺ ������ö�ٵ�����ҧ��èѴ�ҧ��ҡ��ͺ Preview ���

  • Short Description ����͸Ժ���ٻ�Ҿ��� �

  • �� OK �����׹�ѹ��õ�駤���������ٻ�Ҿŧ���ǹ������
      

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

 

5.�ٻ�Ҿ����Ѿ��Ŵ���ʴ������ǹ������ �س����ö������������´��� � ������ͧ��� ��������º�������� ��ԡ "��ŧ" ���ͺѹ�֡

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
 Upload Image (�á/��� �ٻ�Ҿ)

������Ѻ�������ٻ�Ҿ���ǹ���������䫵��������ǡѹ�Ѻ����ͧ��� Easy Upload Image ������ͧ��� Upload Image ���繵����ѡ㹡�èѴ����ٻ�Ҿ�������㹺�������������ͧ �� �������ź�ٻ�Ҿ�������ͧ�����ҹ  ��û�Ѻ��Ҵ�ٻ�Ҿ�����ѧ�������ٻ�������к����� �繵�  

     �Ըա����ҹ����ͧ��� Upload Image

1. ��ԡ����ͧ���  

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
 (Upload Image) 

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

2. �л�ҡ�˹�ҵ�ҧ "Image Properties" ��ԡ������ "Browse Server"

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง


3. ��ҡ�˹�ҵ�ҧ FCKeditor ����ԡ���� Choose File 

4. ��ҡ�˹�ҵ�ҧ "Open" ��ԡ���͡�ٻ�Ҿ����ͧ��èҡ����ͧ����������ͧ�س

5.��ԡ���� "Open"

6. ��ԡ���� Upload

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง


��ѧ�ҡ��ԡ Upload �л�ҡ��ٻ�Ҿ���س���͡ �����ԡ����ٻ�Ҿ  (��Фس����ö��ԡ�ٻ�ҡ�ҷ��ᴧ�������ҧ��Ңͧ�ٻ�Ҿ ����ź�ٻ�Ҿ�������ͧ�����ҹ�͡�ҡ�Կ����� ���ͻ����Ѵ��鹷������ҹ����)

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง


7. �ٻ�Ҿ��� Upload �Ҩл�ҡ�㹪�ͧ Preview �س����ö��˹��س���ѵԢͧ�ٻ�Ҿ�� �� 

  • Width ��˹���Ҵ�������ҧ�ͧ�ٻ�Ҿ

  • Height ��˹���Ҵ�����٧�ͧ�ٻ�Ҿ

  • Border �����鹡�ͺ����ٻ�Ҿ �����������Ţ�ҡ��� ��鹡�ͺ����ʴ���˹Ң�鹤��

  • HSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǹ͹ �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��

  • VSpace ��˹�����ҧ�����ҧ�ٻ�Ҿ��Т�ͤ�����ǵ�� �����������Ţ�ҡ��� ������ҧ����ҡ��鹤��

  • Align ���͡����ʴ��������ҧ�ٻ�Ҿ��Т�ͤ�����Сͺ ������ö�ٵ�����ҧ��èѴ�ҧ��ҡ��ͺ Preview ���

  • Short Description ����͸Ժ���ٻ�Ҿ��� �

  • �� OK �����׹�ѹ��õ�駤���������ٻ�Ҿŧ���ǹ������
      

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง

8. �ٻ�Ҿ����Ѿ��Ŵ���ʴ������ǹ������ �س����ö������������´��� � ������ͧ��� �����ҡ��ͧ�����䢡�õ�駤����������´�ٻ�Ҿ�ա���� ������ö ��ԡ����ٻ��Ф�ԡ�������ͧ��� Upload Image ��л�ҡ�˹�ҵ�ҧ Image Properties ���

��������º����������� ��ԡ "��ŧ" ���ͺѹ�֡

การใส่ภาพลงบนเว็บเพจมีกี่ขั้นตอน อะไรบ้าง
 

��ͤ�����ѧ㹡������ٻ�Ҿ

     - ��ա����§��äѴ�͡�ٻ�Ҿ�ҡ���������ҧ����������䫵� ������� � ��ҹ�Ҩ�������繤����дǡ��л����Ѵ��鹷�����䫵� ���ҡ�ѹ˹�����䫵�鹷ҧ������ʴ��ٻ�Ҿ����͹�Ź� ���觼�����ٻ�Ҿ���Ѵ�͡�ҹ������ʴ��ź�˹�����䫵�ͧ��ҹ�蹡ѹ���

     - ��ա����§��õ�駪�������Ҿ���µ���ѡ�������� �����к����ŧ�����������ʫ���Ҩ��������ʴ����Ҿ���١��ͧ �֧��õ�駪�������Ҿ�������ѧ������͵���Ţ��ҹ�鹤�� 

Jittima  Suebsook
www.ReadyPlanet.com

การใส่ภาพบนเว็บเพจมกี่ขั้นตอน อะไรบ้าง

3.1 การแทรกภาพ.
คลิกที่คำสั่ง Insert > Image..
หรือ คลิกที่ทูลบาร์ (Image).
หรือ ใช้แป้น<Ctrl>+<Alt>+<I> จะได้หน้าต่าง Select Image Source ดังนี้.
เลือกโฟลเดอร์ในช่อง Look in เลือกไฟล์ภาพที่ต้องการแล้วคลิกปุ่ม OK..
ภาพที่เลือกจะแทรกอยู่ในเว็บเพจทันที.

ปุ่มใดใช้สำหรับใส่รูปภาพลงในเว็บเพจ

2. ข้อใดคือขั้นตอนแรกของการนารูปภาพมาใช้งานในเว็บเพจ ก. คลิกปุ่ม Insert แล้วเลือกคาสั่ง (Image) ข. วางเคอร์เซอร์ลงบนเว็บเพจ บริเวณที่ต้องการแทรกภาพ ค. คลิกเลื่อนเมาส์ที่ขอบของภาพและย่อหรือขยายขนาด ง. เลือกภาพที่ต้องการนามาแทรกในเว็บเพจ ซึ่งสามารถดูตัวอย่างภาพได้โดย คลิก ปุ่ม OK.

รูปภาพมีความสําคัญอย่างไรในการสร้างเว็บเพจ

การใส่ภาพภายในเว็บเพจ เป็นส่วนดึงดูดของเว็บให้ดูดีมีสาระมากขึ้น เพิ่มความสวยงาม ดึงดูดความสนใจให้กับผู้ที่ผ่านที่เข้าชม เข้าศึกษา นอกจากจะช่วยให้ผู้ชมได้เห็นภาพจริงไม่ต้องจินตนาการแล้ว ยังมีส่วนช่วยให้เกิดความตื่นตาตื่นใจได้มากกว่าหน้าเว็บเพจที่มีแต่ข้อความล้วน ๆ ภาพที่ดีเพียงหนึ่งภาพสามารถแทนคำพูดได้มากกว่าพันคำ

ข้อใดคือการแทรกรูปภาพให้กับเว็บเพจในโปรแกรม Dreamweaver

1. นำ Cursor ไปวางไว้ในตำแหน่งที่เราต้องการใส่รูปภาพให้ปรากฎบนเว็บเพจ 2. จากนั้นไปที่หน้าต่าง Insert เลือกที่ Image: Image ดังรูป 3. เมื่อคลิกตามข้อ 2 แล้ว โปรแกรมจะเปิดหน้าต่างขึ้นมาเพื่อให้เราเลือกไฟล์รูปภาพที่ต้องการ ให้เราทำการเลือกรูปภาพตามต้องการ ดังรูป เมื่อเลือกได้แล้ว กดที่ปุ่ม OK.