บทที่ 11 HTML images Show HTML images คือ การใส่รูปภาพในเอกสาร html 1.ใส่รูปภาพแบบปกติ ไม่มีการกำหนดอะไร
2.ในกรณีที่ต้องการใส่ชื่อภาพ ซึ่งอาจใช้เป็นข้อความสำรองในกรณีที่รูปภาพเกิดข้อผิดพลาดไม่สามารถแสดงผลบนหน้าเว็บเพจได้
3.ใส่ขนาดของภาพ
โดยค่าตัวเลขที่กรอกมีหน่วยเป็น pixels
ผลัพธ์ที่ได้คือ ***ในการใส่รูปภาพในเอกสาร html นี้การใส่ที่อยู่ URL สำคัญมาก เพราะถ้าที่อยู่ผิดรูปจะไม่แสดง วิธีการหาที่อยู่ URL ของรูปภาพมี 2 วิธี ดังนี้ 1.การเอารูปจากเว็บไซต์ - เปิดเว็บไซต์นั้นขึ้นมา หารูปที่ต้องการ - คลิกขวาที่รูป เลือก view image info แล้ว copy ตัว URL ในส่วน location ให้หมด - เมื่อได้ URL ก็เอาไปใส่ในโค็ด html ได้เลย จะสังเกตุได้ว่า จะขึ้นด้วย http และจบด้วย นามสกุล .jpg หรือ .gif 2.การเอารูปภาพจากคอมของเราเอง Tag ที่เกี่ยวข้อง
4.1 การใส่รูปภาพ จากข้อมูลเบื้องต้นเกี่ยวกับรูปภาพที่จะใส่ในเอกสาร HTML ในขั้นตอนต่อไป จะนำรูปภาพมาใส่ในเอกสาร โดยจะใช้คำสั่งในการใส่รูปภาพ คือ <img src="ชื่อไฟล์รูปภาพ" หรือ ชื่อ "path(ที่เก็บรูปภาพ)/ชื่อไฟล์" หรือ "image URL"> การใส่รูปภาพ นั้น การระบุตำแหน่งที่เก็บรูปภาพ (folder)นี้ เป็นจุดสำคัญมาก ถ้าระบุที่เก็บ (path)ผิด รูปภาพจำไม่ปรากฎขึ้น จะแสดงผลเป็นกรอบรูปภาพเล็ก ๆ แล้วมีเครื่องหมายกากบาท (x)หรือ ? กำกับ (ดูตัวอย่าง) สังเกตที่ path จะใช้เครื่องหมาย สแลช (/) ถ้าใส่เครื่องหมายผิดก็จะไม่แสดงภาพเช่นกัน เพราะอ้างอิงผิดนั่นเอง ดังตัวอย่าง ถ้าต้องการใส่รูปภาพชื่อไฟล์ flowers.gif" ซึ่งเก็บอยู่ใน folderimages จะกำหนดได้ ดังนี้ ทดสอบการใส่รูปภาพ ข้อควรระวังคือ เรื่องของที่เก็บภาพ (path) ตรวจสอบได้ดังนี้
- ������Ҿ���ʡ�� (Type) �� .jpeg/ .gif/ .png - ��駪����Ҿ�������ѧ�����е���Ţ ��ա����§���������������ѭ�ѡɳ��ѡâ�о���� - �������Ҿ����բ�Ҵ����Թ (File Size) 500 KB �������Ҿ�բ�Ҵ�������� ��Ъ������˹�����䫵��ʴ��������Ǣ����ҹ�鹤�� �Ը�����ٻ�Ҿ����䫵���١��ͧ 1. Log in �����ǹ��Ҫԡ ������� "�к���鹰ҹ" ��ԡ "�Ѵ��á���������� / ������" (����������� � ���������ͧ��� Text Editor ����ͧ��������ٻ�Ҿ���ͼ١�ԧ��ҡ�Ҿ�����ѧ�Ҿ�˭���) 2. ������˹�� "�Ѵ��á���������� / ������" ��ԡ�����͡���������� �ҡ��鹤�ԡ 3. ��ԡ�� "�����Ңͧ������" ��ԡ���͡�����
����ͧ����Ъ������س����ö�Ѿ��Ŵ�ٻ�Ҿ���������������䫵������ҧ���� ��§��ԡ�������ͧ��� 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 �س����ö��Ѻ��駤�ҡ���ʴ����ٻ�Ҿ�� �ѧ���
5.�ٻ�Ҿ����Ѿ��Ŵ���ʴ������ǹ������ �س����ö������������´��� � ������ͧ��� ��������º�������� ��ԡ "��ŧ" ���ͺѹ�֡
������Ѻ�������ٻ�Ҿ���ǹ���������䫵��������ǡѹ�Ѻ����ͧ��� Easy Upload Image ������ͧ��� Upload Image ���繵����ѡ㹡�èѴ����ٻ�Ҿ�������㹺�������������ͧ �� �������ź�ٻ�Ҿ�������ͧ�����ҹ ��û�Ѻ��Ҵ�ٻ�Ҿ�����ѧ�������ٻ�������к����� �繵� �Ըա����ҹ����ͧ��� Upload Image 1. ��ԡ����ͧ��� 2. �л�ҡ�˹�ҵ�ҧ "Image Properties" ��ԡ������ "Browse Server"
4. ��ҡ�˹�ҵ�ҧ "Open" ��ԡ���͡�ٻ�Ҿ����ͧ��èҡ����ͧ����������ͧ�س 5.��ԡ���� "Open" 6. ��ԡ���� Upload
8. �ٻ�Ҿ����Ѿ��Ŵ���ʴ������ǹ������ �س����ö������������´��� � ������ͧ��� �����ҡ��ͧ�����䢡�õ�駤����������´�ٻ�Ҿ�ա���� ������ö ��ԡ����ٻ��Ф�ԡ�������ͧ��� Upload Image ��л�ҡ�˹�ҵ�ҧ Image Properties ��� ��������º����������� ��ԡ "��ŧ" ���ͺѹ�֡ ��ͤ�����ѧ㹡������ٻ�Ҿ - ��ա����§��äѴ�͡�ٻ�Ҿ�ҡ���������ҧ����������䫵� ������� � ��ҹ�Ҩ�������繤����дǡ��л����Ѵ��鹷�����䫵� ���ҡ�ѹ˹�����䫵�鹷ҧ������ʴ��ٻ�Ҿ�����Ź� ���觼�����ٻ�Ҿ���Ѵ�͡�ҹ������ʴ��ź�˹�����䫵�ͧ��ҹ�蹡ѹ��� - ��ա����§��õ�駪�������Ҿ���µ���ѡ�������� �����к����ŧ�����������ʫ���Ҩ��������ʴ����Ҿ���١��ͧ �֧��õ�駪�������Ҿ�������ѧ������͵���Ţ��ҹ�鹤�� Jittima Suebsook การใส่ภาพบนเว็บเพจมกี่ขั้นตอน อะไรบ้าง3.1 การแทรกภาพ. คลิกที่คำสั่ง Insert > Image.. หรือ คลิกที่ทูลบาร์ (Image). หรือ ใช้แป้น<Ctrl>+<Alt>+<I> จะได้หน้าต่าง Select Image Source ดังนี้. เลือกโฟลเดอร์ในช่อง Look in เลือกไฟล์ภาพที่ต้องการแล้วคลิกปุ่ม OK.. ภาพที่เลือกจะแทรกอยู่ในเว็บเพจทันที. ปุ่มใดใช้สำหรับใส่รูปภาพลงในเว็บเพจ2. ข้อใดคือขั้นตอนแรกของการนารูปภาพมาใช้งานในเว็บเพจ ก. คลิกปุ่ม Insert แล้วเลือกคาสั่ง (Image) ข. วางเคอร์เซอร์ลงบนเว็บเพจ บริเวณที่ต้องการแทรกภาพ ค. คลิกเลื่อนเมาส์ที่ขอบของภาพและย่อหรือขยายขนาด ง. เลือกภาพที่ต้องการนามาแทรกในเว็บเพจ ซึ่งสามารถดูตัวอย่างภาพได้โดย คลิก ปุ่ม OK.
รูปภาพมีความสําคัญอย่างไรในการสร้างเว็บเพจการใส่ภาพภายในเว็บเพจ เป็นส่วนดึงดูดของเว็บให้ดูดีมีสาระมากขึ้น เพิ่มความสวยงาม ดึงดูดความสนใจให้กับผู้ที่ผ่านที่เข้าชม เข้าศึกษา นอกจากจะช่วยให้ผู้ชมได้เห็นภาพจริงไม่ต้องจินตนาการแล้ว ยังมีส่วนช่วยให้เกิดความตื่นตาตื่นใจได้มากกว่าหน้าเว็บเพจที่มีแต่ข้อความล้วน ๆ ภาพที่ดีเพียงหนึ่งภาพสามารถแทนคำพูดได้มากกว่าพันคำ
ข้อใดคือการแทรกรูปภาพให้กับเว็บเพจในโปรแกรม Dreamweaver1. นำ Cursor ไปวางไว้ในตำแหน่งที่เราต้องการใส่รูปภาพให้ปรากฎบนเว็บเพจ 2. จากนั้นไปที่หน้าต่าง Insert เลือกที่ Image: Image ดังรูป 3. เมื่อคลิกตามข้อ 2 แล้ว โปรแกรมจะเปิดหน้าต่างขึ้นมาเพื่อให้เราเลือกไฟล์รูปภาพที่ต้องการ ให้เราทำการเลือกรูปภาพตามต้องการ ดังรูป เมื่อเลือกได้แล้ว กดที่ปุ่ม OK.
|