Page 42 - ชิ้นงานโครงงาน สหรัฐ

็
right 14.กำรสร ้ำงเวบไซต์ด้วยภำษำ HTML
่
็
Aoto % ค่ำทีเปนตัวเลข
่
่
ใช ้ก�ำหนดต�ำเเหนงวัตถุให้อยูด้ำนขอบขวำ
่
่
่
้
่
position สิงแรกทีเรำจะต้องเข้ำใจในกำรท�ำเวบไชต์ คือ โครงสร ้ำงของไฟล์ซึงจะเปนทีเกบไฟส์ทังหมด
็
็
็
่
่
้
static ทังรูปภำพและไฟล์เอกสำรต่ำงๆ ทีอยูในเวบไชต์ ควรจะถูกรวมอยูใน Folder เดียวกัน เพือให้ง่ย
่
็
่
่
้
่
ค่ำเริมต้นส�ำหรับ position ในกำรค้นหำ กำรเรียกใช ้ กำรลิงก์ และกำรจัดเกบข้อมล ส�ำหรับชือไฟล์นนควรเปนภำษำอังกฤษทุก
ู
ั
็
็
้
absolute ไฟล์ส�ำหรับในหนงสือเล่มนจะสร ้ำงโครงสร ้ำงไฟส์ของเวบไซต์ ดังน ี ้
ั
ี
็
้
่
่
่
จะไมสนใจอิลิเมนต์ก่อนหน้ำ เเต่จะพำตัวเองไปจุดนนเลย - โฟลเดอร ์ทีเกบเวบไชด์ซึงเปนโฟลเดอร ์หลักให้มีชือว่ำ html ใช ้เกบไฟล์ต่ำงๆ
ั
่
็
็
็
็
่
่
่
่
่
relative - โฟลเดอร ์ทีเกบรูปภำหซึงระอยูภำยในโฟลเดอร ์ html อีกทีหนง ให้มีชือว่ำ imges ซึงจะใช ้
่
ึ
็
่
่
่
จะมีลักษณะคล้ำยๆกับ static ต่ำงกันตรงที relative สำมำรถใช ้ top left bottom right ในกำร เกบรูปภำพและสือต่ำงๆ
็
่
ก�ำหนดต�ำเเหนงได้
้
่
fixed เมือสร ้ำงโพลเดอร ์ส�ำหรับกบไพล์ต่ำงๆ ของเวไชเสร็จแล้ว ขันต่อไปกจะเปนกำรสร ้ำงเวยเพ
็
็
็
็
็
่
่ ้
้
่
่
่
่
จะตรึงตัวเองอยูทีพืนหลังเสมอ ไมเลือนตำม Scroll Bar โดยกำรเขียนจำกภำษำ HTML ซึงจะต้องมี Editor ทีใช ้เขียน ในหนงสือเล่มนจะใช ้โปรถกรม
ี
ั
่
Clip Nokpad++ซึงสำมำรถดำวน์หลด้จำกอินเทร ์เนเปนโปรแกระฟริไมีเสียค�ำำใช ้จ่ำย โดยสำมำรถ
็
็
Aoto rect (top,bottom,left) เช่น clip:rect (opx,60px, 200px,0px); เลือกดำวน์โหลดได้ จำกเวบไซต์ http//notepad-ples-plas ang/ ไปทีเมน Downbad แล้ว
ู
็
่
่
่
่
่
่
้
่
็
่
ใช ้ก�ำหนดกำรตัดส่วนต่ำงๆของวัตุทีไมต้องกำรออกไป ซึงจัตัดออกเปนรูปสีเหลียม เลือกโปรแกรมNotrpad++ รุ่นส่ำสุดมำใช ้งำน เมือดำวน์โหลดมำแล้วกท�ำกำรติคตังลงทีเครือง
็
้
่
่
z-index คอมพิวเตอร ์ให้เร็จเรียบร ้อย เมือคิคตังเสร็จแล้วกเริมใช ้งำนได้ทันที ซึงมีวิธีกำรใช ้งำนดังน ี ้
็
เลขล�ำดับ auto
่
ใช ้ก�ำหนดล�ำดับกำรซ ้อนทับกันของวัตถุ 1 คลิกที Start-All Programs - Notepad ++ - Notepad
้
่
่
2 เมือเข้ำสูโปรแกรม Notepad++แล้วจะแสดงหน้ำจอขึน
่
็
่
็
่
3 ถ้ำต้องกำรสร ้ำงไฟล์ใหมกสำมำรถไปคลิกที Fle + New หรือจะกดปุม CIrl และปุม ธพร ้อมกันกได้
่
่
่
็
็
เมือได้ไฟใหมแล้วต่อไปกเลือกเปนภำษ HTML โดยไปคลิกที Langug) > H >HTML
่
่
็
เมือเลือกภำษำเสร็จแล้วกสำมำรถริมเขียนเวบไชต์ได้ทันที โดยทัวไปแลัวไฟล์แรกทีเขียนจะเปนหน้ำ
็
็
่
่
่
่
้
้
13.กำรก�ำหนดรูปเเบบของลิงก์ แรกเองเวบไชต์ซึงจะเรียกว่ำโฮมเพจ โดยจะต้องตังชือให้เปนชือว่ำ index เท่ำนน ส่วนทีเปนนำมสกุล
็
ั
็
็
้
ิ
ี
หรือชนดของไฟในหนงสือเมนจะใช ้เปนนำมสกุล html เพรำะสวั"งมำจำกภำษำ HTML แต่ำสำงมำ
ั
็
้
้
จำกภำยำ PHP กจะเปนนำมสกุล pp ซึงน"มสกุลของไฟหรือชนดของไฟส์นน จะขึนอยูกับอย่ำงไรก ็
ั
ิ
็
่
็
้
้
้
้
่
่
ั
�
ั
ื
็
็
็
ั
็
ก่อนทีจะสร ้ำงรูปแบบของลิงค์นน ก่อนอืนเรำจ�ำเปนจ้องรู้จัก pseudo-class และ ใด้ แต่กควรจะสอดคล้องกับเนอหำในเพจนนๆ และต้องเปนภำยำอังกรษเทำนน เช่น ถ้ำเปนนำหน้ำ
่
้
่
้
่
็
pseudo-element ก่อน ซึงเปนคลำสและอิลิเมนต์พิเศษ ถูกสร ้ำงขึนมำต่ำงหำกเพือท�ำให้งำน สร ้ำงไฟล์มำจำกภำษำอะไรหรือไปรแกรมอะไร เมือใด้ไฟล์แรกเปนindex.html แล้ว ไชล์ดอไปจะตัง
็
่
่
้
่
่
่
็
็
ตำมทีเรำต้องกำรซึงในรูปแบบกำรเรียนในแต่ละแบบดังน ี ้ ชือเวบเพจเกียวกับบุคลำกรอำจจะตังชือว่ำ perso.html กได้
selector: pseudo-class ( property: value 15.กำรสร ้ำงหน้ำโฮมเพจ
selector: pseudo-element ( property: value
selector.class: pseudo-class (property: value)
selector.class: pseudo-element (property: value) ส�ำหรับหน้ำโยมเพจจะเปนหน้ำแรกของเวบไซส์ ซึงจะตังชือว่ำ :index.html โดยมีรูปแบบและ
่
่
้
็
็
้
รำยละเอียดของเนอหำ
ื
่
่
่
่
ลิงก์ (Link) คือ จุดทีนำไปยังหน้ำเวบเพจอืนหรือเชือมโยงไปยังไฟล์ต่ำงๆ สำมำรถเชือมโยง
�
็
่
่
ไปยังทุกฟทีต้องกำรได้ ซึงนอกจำกลิงก์ใน HTML แบบปกติแล้ว ยังมีรูปแบบสถำนะต่ำงๆ ของลิงก์
่
่
�
ทีถูกนำมำใช ้อีกหลำยสถำนะซึงจะเรียกว่ำ pseudo-class ตัวอย่ำงเช่น anchor pseudo-class
42 43