งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

Web Technology & Basic Web Development By Wathinee

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "Web Technology & Basic Web Development By Wathinee"— ใบสำเนางานนำเสนอ:

1 Web Technology & Basic Web Development By Wathinee

2 HTML ( ต่อ )

3 เนื้อหาในบทนี้ Link ( การสร้างการ เชื่อมโยง ) Table ( ตาราง ) Frame

4 Link 1. Link ไปยัง Webpage อื่น ( ที่อยู่ใน Website เดียวกัน ) 2.Link ไป Website อื่น 3. Link ภายใน Webpage เดียวกัน 4. Link ไป และ Link รูปภาพ

5 คำสั่ง 1. เปลี่ยนชื่อ “index.html” เป็นชื่อ “aboutus.html” สร้างหน้า index ใหม่โดยสร้าง เป็น Frame 2. ให้นักศึกษาสร้าง Webpage ใหม่ตั้งชื่อว่า “linkpage.html” 3. Webpage นี้จะใช้ทดสอบการ สร้าง Link ต่าง ๆ

6 ตัวอย่างหน้า linkpage.html

7 Link ไปยัง Webpage อื่น ( ที่อยู่ใน Website เดียวกัน ) รูปแบบ จุด ลิงค์

8 linkpage.html หลังจาก สร้าง Link

9 Link ไปยัง Website อื่น ๆ ) รูปแบบ จุดลิงค์

10 Link ไปยัง Website อื่น ๆ )

11 Link ภายใน Webpage เดียวกัน ขั้นตอน 1. สร้างปลายทางที่ข้อความในหน้าเพจนั้น ๆ โดยสร้าง เช่น 2. สร้าง Link ข้อความที่เป็นจุดลิงค์

12 ฝึกสร้าง Link ภายใน Webpage เราจะไปทดสอบสร้างที่หน้า “homework2.html” 1. ให้นักศึกษาสร้างจุด Link ดังนี้ Web Hosting Client / Server Web Server

13 ตัวอย่าง

14 Link ไป และ Link รูปภาพ

15 สีของข้อความที่เป็นจุดลิงค์ ลิงค์ที่ไม่เคยคลิกมาก่อน ( สีน้ำเงิน ) ลิงค์ที่เคยคลิกไปแล้ว ( สีม่วง ) ลิงค์ที่ถูกเลือก ( กำลังจะเลือก ) จะมีสี ม่วง

16 สีของข้อความที่เป็นจุดลิงค์ ลิงค์ที่ไม่เคยคลิกมาก่อน (link) ลิงค์ที่เคยคลิกไปแล้ว (vlink) ลิงค์ที่ถูกเลือก ( กำลังจะเลือก ) (alink)

17 ตัวอย่าง

18 สรุป การบ้านสำหรับ Link 1. สร้างไฟล์ linkpage.html โดยมี Link ไปปลายทางดังนี้ 2. ไฟล์ homework2.html ให้ สร้าง Link เพิ่มเติมไปทุกคำ ศัทพ์ น่ารู้ ( สร้าง link ภายใน webpage เดียวกัน )

19 การสร้าง Table

20 คำสั่ง ให้นักศึกษาสร้างชื่อไฟล์ใหม่ เพื่อ ทดสอบสร้างตาราง ชื่อ "createtable.html"

21 วิธีควบคุมลักษณะของ ตาราง …

22 สร้างเส้นขอบ border

23 เปลี่ยนสีเส้นขอบตาราง bordercoloer

24 กำหนดขนาดของตาราง

25 ตำแหน่ง ของตารางในหน้า เว็บ align

26 สีพื้นหลังของตาราง (bgcolor)

27 พื้นตารางเป็นรูปภาพ background

28 ตั้งชื่อหัวข้อให้แต่ละคอลัมน์ th

29 คำสั่งตกแต่งตาราง คำสั่ง อื่น ๆ ตั้งค่าระยะห่างระหว่างช่องในตาราง cellspacing=“ ขนาด ” ตั้งค่าระยะห่างระหว่างขอบกับข้อมูลใน ตาราง cellpadding=“ ขนาด ”

30 การบ้านเพิ่มเติมสำหรับ table 1. สร้างไฟล์ชื่อ createtable.html มีเนื้อหาในชั่วโมงเรียน 2. และนำข้อมูลจาก Slide ถัดไป ไปสร้างเพิ่มเติม พร้อมตกแต่งให้ สวยงาม

31 การบ้านสำหรับเรื่อง create table จำนวน นักเรียน ปี 2553 ปี 2554 ปี 2555 IT ชั้นปีที่ com ชั้นปีที่ IT ชั้นปีที่ com ชั้นปีที่ IT ชั้นปีที่ com ชั้นปีที่ IT ชั้นปีที่ com ชั้นปีที่ รวม ( เฉลี่ย )Xxxx คน

32 เรื่อง Frame

33 เรื่อง Frame หมายเหตุ : rows,cols

34 ตัวอย่าง แบบ 3 frame แนวนอน

35 ตัวอย่าง แบบ 2 frame แนวนอน

36 ออกแบบหน้าเว็บ toppage.html linkpage.htmlmainpage.html

37 สร้างไฟล์ใหม่ 1. สร้างไฟล์ชื่อ toppage.html เพื่อ เก็บข้อมูลเกี่ยวกับ Logo หรือรูปหลัก ของ website 2. สร้างไฟล์ชื่อ mainpage.html เขียนรายละเอียดทั่วไป เกี่ยวกับ เว็บไซต์

38 ตัวอย่างไฟล์ toppage.html

39 ตัวอย่างไฟล์ mainpage.html

40 สร้าง Frame และเรียกใช้ ไฟล์ toppage.html linkpage.htmlmainpage.html

41 ข้อมูลสร้าง Frame ที่ไฟล์ index.html

42 ข้อมูลเพิ่มข้อมูลให้ Frame ที่ไฟล์ index.html

43 กำหนดคุณสมบัติของ Frame กำหนดขอบของเฟรมให้หายไป เปลี่ยนสี frame

44 กำหนดคุณสมบัติของ Frame ป้องกันไม่ให้ผู้ใช้ปรับขนาดของเฟรม ได้

45 ตัวอย่าง

46 เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame toppage linkpagemainpage

47 เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame

48 สั่งให้ Link ไปแสดงข้อมูลที่ Frame ที่ต้องการ เนื้อหาจุดเชื่อม _self = แสดงทับส่วนของ page หน้านี้เฉพาะส่วนนี้ (frame นี้ ) _parent = ทับข้อมูลทั้งหมดทุก frame _blank = เปิดหน้า Windows หน้าใหม่เลย _top = แสดงทับข้อมูใหม่ทั้งหน้า ชื่อเฟรม = นำข้อมูลไปแสดงที่ พื้นที่ frame นั้น ๆ

49

50 แสดงผลที่ frame ชื่อ mainpage

51 สรุป การบ้านจากเรื่อง frame 1. ไฟล์ index.html ประกอบด้วยการสร้าง Frame และเรียกใช้ ข้อมูลแสดงใน frame ออกแบบตามที่ นักศึกษาชอบ 2. linkpage.html เพิ่มข้อมูลที่ Link ให้แสดง ข้อมูลให้เหมาะสม (target)

52 แผนผังเว็บไซต์ ข้อมูล ส่วนตัว คำศัพท์น่า รู้ การสร้าง ตาราง ข้อมูล logo ข้อมูล ต้อนรับ ข้อมูล Link

53 แผนผังเว็บไซต์ ข้อมูล ส่วนตัว คำศัพท์น่า รู้ การสร้าง ตาราง toppage.html mainpage.html linkpage.html index.html aboutus.html homework2.html createtable.html


ดาวน์โหลด ppt Web Technology & Basic Web Development By Wathinee

งานนำเสนอที่คล้ายกัน


Ads by Google