ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Web Technology & Basic Web Development
By Wathinee
2
HTML (ต่อ)
3
Link (การสร้างการเชื่อมโยง) Table (ตาราง) Frame
เนื้อหาในบทนี้ Link (การสร้างการเชื่อมโยง) Table (ตาราง) Frame
4
Link Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน)
Link ไป Website อื่น Link ภายใน Webpage เดียวกัน Link ไป และ Link รูปภาพ
5
คำสั่ง 1. เปลี่ยนชื่อ “index.html” เป็นชื่อ “aboutus.html” สร้างหน้า index ใหม่โดยสร้างเป็น Frame 2. ให้นักศึกษาสร้าง Webpage ใหม่ตั้งชื่อว่า “linkpage.html” 3. Webpage นี้จะใช้ทดสอบการสร้าง Link ต่าง ๆ
6
ตัวอย่างหน้า linkpage.html
7
Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน)
รูปแบบ <a href=“ชื่อเว็บเพจ”> จุดลิงค์ </a>
8
linkpage.html หลังจากสร้าง Link
9
Link ไปยัง Website อื่น ๆ)
รูปแบบ <a href=“URL Website อื่น ๆ”> จุดลิงค์ </a>
10
Link ไปยัง Website อื่น ๆ)
11
Link ภายใน Webpage เดียวกัน
ขั้นตอน สร้างปลายทางที่ข้อความในหน้าเพจนั้น ๆ โดยสร้าง <a name=“ชื่อปลายทาง”> </a> เช่น <a name=“test”> </a> 2. สร้าง Link <a href=“#test”> ข้อความที่เป็นจุดลิงค์ </a>
12
ฝึกสร้าง Link ภายใน Webpage
เราจะไปทดสอบสร้างที่หน้า “homework2.html” ให้นักศึกษาสร้างจุด Link ดังนี้ Web Hosting Client / Server Web Server
13
ตัวอย่าง
14
Link ไป E-mail และ Link รูปภาพ
15
สีของข้อความที่เป็นจุดลิงค์
ลิงค์ที่ไม่เคยคลิกมาก่อน (สีน้ำเงิน) ลิงค์ที่เคยคลิกไปแล้ว (สีม่วง) ลิงค์ที่ถูกเลือก(กำลังจะเลือก) จะมีสีม่วง
16
สีของข้อความที่เป็นจุดลิงค์
ลิงค์ที่ไม่เคยคลิกมาก่อน (link) ลิงค์ที่เคยคลิกไปแล้ว (vlink) ลิงค์ที่ถูกเลือก(กำลังจะเลือก) (alink)
17
ตัวอย่าง
18
สรุป การบ้านสำหรับ Link
สร้างไฟล์ linkpage.html โดยมี Link ไปปลายทางดังนี้ 2. ไฟล์ homework2.html ให้สร้าง Link เพิ่มเติมไปทุกคำศัทพ์ น่ารู้ (สร้าง link ภายในwebpage เดียวกัน)
19
การสร้าง Table <table> <tr> <td> </td> <td> </td> </tr> </table>
20
คำสั่ง ให้นักศึกษาสร้างชื่อไฟล์ใหม่ เพื่อทดสอบสร้างตาราง ชื่อ "createtable.html"
21
วิธีควบคุมลักษณะของตาราง
<table border=“1”> … </table>
22
สร้างเส้นขอบ border
23
เปลี่ยนสีเส้นขอบตาราง bordercoloer
24
กำหนดขนาดของตาราง
25
ตำแหน่ง ของตารางในหน้าเว็บ align
26
สีพื้นหลังของตาราง (bgcolor)
27
พื้นตารางเป็นรูปภาพ background
28
ตั้งชื่อหัวข้อให้แต่ละคอลัมน์ th
29
คำสั่งตกแต่งตาราง คำสั่งอื่น ๆ
ตั้งค่าระยะห่างระหว่างช่องในตาราง cellspacing=“ขนาด” ตั้งค่าระยะห่างระหว่างขอบกับข้อมูลในตาราง cellpadding=“ขนาด”
30
การบ้านเพิ่มเติมสำหรับ table
สร้างไฟล์ชื่อ createtable.html มีเนื้อหาในชั่วโมงเรียน 2. และนำข้อมูลจาก Slide ถัดไปไปสร้างเพิ่มเติม พร้อมตกแต่งให้สวยงาม
31
การบ้านสำหรับเรื่อง create table
จำนวนนักเรียน ปี 2553 ปี 2554 ปี 2555 IT ชั้นปีที่ 1 15 20 com ชั้นปีที่ 1 30 40 IT ชั้นปีที่ 2 com ชั้นปีที่ 2 IT ชั้นปีที่ 3 com ชั้นปีที่ 3 IT ชั้นปีที่ 4 com ชั้นปีที่ 4 รวม (เฉลี่ย) Xxxx คน
32
<frameset rows=“30,*”> </frameset>
33
เรื่อง Frame <html> <head> </head> <frameset rows=“30,*”> หมายเหตุ : rows ,cols </frameset> <body> </body> </html>
34
ตัวอย่าง แบบ 3 frame แนวนอน
35
ตัวอย่าง แบบ 2 frame แนวนอน
36
ออกแบบหน้าเว็บ toppage.html linkpage.html mainpage.html
37
สร้างไฟล์ใหม่ สร้างไฟล์ชื่อ toppage.html เพื่อเก็บข้อมูลเกี่ยวกับ Logo หรือรูปหลักของ website สร้างไฟล์ชื่อ mainpage.html เขียนรายละเอียดทั่วไป เกี่ยวกับเว็บไซต์
38
ตัวอย่างไฟล์ toppage.html
39
ตัวอย่างไฟล์ mainpage.html
40
สร้าง Frame และเรียกใช้ ไฟล์
toppage.html linkpage.html mainpage.html
41
ข้อมูลสร้าง Frame ที่ไฟล์ index.html
42
ข้อมูลเพิ่มข้อมูลให้ Frame ที่ไฟล์ index.html
43
กำหนดคุณสมบัติของ Frame
กำหนดขอบของเฟรมให้หายไป <frameset rows="15%,*“ frameborder=“no”> </frameset> เปลี่ยนสี frame <frameset rows="15%,*“ bordercolor=“black”>
44
กำหนดคุณสมบัติของ Frame
ป้องกันไม่ให้ผู้ใช้ปรับขนาดของเฟรมได้ <frameset rows="15%,* “ frameborder=“no”> <frame noresize> </frame> </frameset>
45
ตัวอย่าง
46
เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame
toppage linkpage mainpage
47
เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame
48
สั่งให้ Link ไปแสดงข้อมูลที่ Frame ที่ต้องการ
<a href=“..” target=“ค่าที่กำหนด”> เนื้อหาจุดเชื่อม </a> _self = แสดงทับส่วนของ page หน้านี้เฉพาะส่วนนี้(frameนี้) _parent = ทับข้อมูลทั้งหมดทุก frame _blank = เปิดหน้า Windows หน้าใหม่เลย _top = แสดงทับข้อมูใหม่ทั้งหน้า ชื่อเฟรม = นำข้อมูลไปแสดงที่ พื้นที่ frame นั้น ๆ
49
ชื่อเฟรม = นำข้อมูลไปแสดงที่ พื้นที่ frame นั้น ๆ
50
แสดงผลที่ frame ชื่อ mainpage
51
สรุป การบ้านจากเรื่อง frame
ไฟล์ index.html ประกอบด้วยการสร้าง Frame และเรียกใช้ข้อมูลแสดงใน frame ออกแบบตามที่นักศึกษาชอบ 2. linkpage.html เพิ่มข้อมูลที่ Link ให้แสดงข้อมูลให้เหมาะสม(target)
52
แผนผังเว็บไซต์ ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง ข้อมูล logo
Link ข้อมูล ต้อนรับ ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง
53
แผนผังเว็บไซต์ ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง toppage.html
index.html toppage.html linkpage.html mainpage.html aboutus.html homework2.html createtable.html ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง
งานนำเสนอที่คล้ายกัน
![การเขียนคำสั่งเชื่อมโยง(link) ตัวอย่างการใช้คำสั่ง [1] [2]](/8/2106966/big_thumb.jpg "การเขียนคำสั่งเชื่อมโยง(link) ตัวอย่างการใช้คำสั่ง [1] [2]>")