|
การสร้างไฟล์ต้นแบบ
การสร้างโฮมเพจให้ง่ายและรวดเร็วที่สุดจำเป็นต้องสร้างไฟล์ต้นแบบซึ่งจะมีการกำหนดคำสั่งพื้นฐานเอาไว้เมื่อต้องการสร้างไฟล์ใหม่
ก็เพียงแต่บันทึกเป็นไฟล์ใหม่ตามที่เราต้องการ และเพิ่มข้อมูลเนื้อหารายละเอียดเข้าเท่านั้น
เรามาดูว่า ไฟล์ต้นแบบ ของเราควรมีคำสั่งอะไรบ้าง
- ทุกครั้งที่เราเปิดโปรแกรม
Homesite 4.5 ขึ้นมาจะมีชื่อไฟล์ Untited มาให้อัตโนมัติ
ซึ่งจะกำหนดคำสั่งและส่วนประกอบของไฟล์ HTML เบื้องต้นไว้แล้ว
ดังรูป
- จะเห็นว่ามีข้อกำหนดที่สำคัญดังนี้
คือ
1. การกำหนดให้ทราบว่าไฟล์นี้ใช้คำสั่งตามข้อกำหนดของ
W3C เวอร์เชอร์ 4 (จะใส่หรือไม่ก็ได้)
2. Tags คำสั่งกำหนดให้เป็นไฟล์
HTML
3. Tags คำสั่งกำหนดส่วนหัว ซึ่งจะมีชื่อเรื่อง(Title)และสามารถใส่คำสั่งอื่น
ๆได้อีก
4. ส่วนแสดงเนื้อหาทั้งหมดในแต่ละหน้า ซึ่งจะประกอบด้วยรูปภาพ
ตัวอักษรต่างๆ
- ในส่วน
HAED เราจะใส่อะไรได้บ้าง
1. การประกาศความเป็นเจ้าของ/ผู้ออกแบบ
โดยใช้ Tags<Meta Name=Author CONTENT=pradit [email protected]>Author
หมายถึงเจ้าของ/ผู้ออกแบบเว็บหน้านี้ อาจจะใส่ Email สำหรับติดต่อไว้ด้วยก็ได้
ส่วนนี้จะไม่แสดงที่หน้าเว็บ แต่สามารถดูได้ที่ Viwe source
2.
คำหลัก(Keywords)และคำอธิบาย(Description)เกี่ยวกับเนื้อหาภายในเว็บไซต์นี้
(ไม่จำเป็นต้องใส่ทุกหน้า ใส่เฉพาะหน้าที่เป็น Index file
ก็พอแล้ว ดังต้วอย่าง
<Meta name=descriptionCONTENT=Atsamatwittaya
school Roi-ed of Thailand>
<Meta name=keywordCONTENT=Atsamatwittaya
school,atsamat,atsamrat,k12,โรงเรียน,อาจสามารถ>
ประโยชน์ของMeta
tags ในส่วนนี้คือ Search Engine จากเว็บดังๆจะเก็บข้อมูลจากคำสั่งนี้ไว้ในฐานข้อมูล
เมื่อเวลามีการค้นหาด้วยคำหลัก โปรแกรมจะทราบได้ ว่ามีเว็บไซต์ใดบ้างที่มีคำเหล่านี้และแสดงผลออกมา
ระหว่างคำกับเครื่องหมายคั่น (,)ไม่ต้องเคาะวรรค
3.
JAVA Script และคำสั่ง Style ต่างๆ แล้วแต่ความจำเป็นของแต่ละหน้า
ที่ผมใส่ประจำ คือ Style สำหรับกำหนดไม่ให้ข้อความแสดงจุดเชื่อมโยงมีขีดเส้นใต้
(ใช้เฉพาะ บราวเซอร์ IE หรือ NN เวอร์ชัน 4 ขึ้นไปเท่านั้น
<Style>
a{
text-decoration:none;
}
</Style>
4. Style Sheet
เป็นการควบคุมในรายละเอียดที่มากกว่าเดิม เพราะสามารถกำหนดได้ทั้งสีตัวอักษรของ
Link และการขีดเส้นใต้หรือไม่ในจุดเชื่อมโยง (ใส่แทนในข้อ
3 ข้างบนได้เลย)
<Style type=text/css>
<!
body{margin:Opx
Opx;padding:Opx Opx}
a:link{color:#00ffff:text-decoration:none}
a:visited{color:#ff99ff;
text-decoration:none}
a:active{color:#0099ff;
text-decoration:underline}
a:hover{color:#0099ff;
text-decoration:underline}
>
</Style>
จะเห็นว่ามีการกำหนดรายละเอียดได้มากขึ้น
ความหมายของคำสั่งที่น่ารู้มีดังนี้
- a:link
คือสีของจุดเชื่อมโยงเปลี่ยนให้เหมาะสมกับสีพื้นหลัง
- a:visited
คือสีของจุดเชื่อมโยงที่เคยคลิกไปดูมาแล้ว
- a:active
คือสีของจุดเชื่อมโยงขณะกำลังคลิกเมาส์ค้างไว้
- a:hover
คือสีของจุดเชื่อมโยงเมื่อเอาเมาส์ไปวางเหนือข้อความนั้น
- none คือไม่มีขีดเส้นใต้
- underline
คือมีขีดเส้นใต้
- Tags คำสั่งในส่วน
body ที่จำเป็นต้องมีได้แก่การกำหนดสีพื้นหลัง (background)
สีของตัวอักษรหลักของหน้า สีของจุดเชื่อมโยงทั้งก่อนและหลังการคลิกดังตัวอย่าง
<body link=#ffff00
VLINK=#00ffff ALINK= #00ff00 BGCOLOR= #000000
TEXT= #00ffdb>
1. LINK : หมายถึงสีแสดงข้อความจุดเชื่อมโยง
2.
VLINK : หมายถึงสีแสดงข้อความจุดเชื่อมโยงที่ถูกคลิกไปดูแล้ว(Visit
link)
3. ALINK : หมายถึง สีแสดงข้อความจุดเชื่อมโยงขณะกำลังคลิกเมาส์
(Active link)
4. BGCOLOR : หมายถึง สีพื้นหลัง หรือจะใช้ภาพแทนได้โดยใช้
background=ไฟล์ภาพ
5. TEXT : หมายถึง สีของตัวอักษรข้อความทั้งหมดในหน้านี้
ยกเว้นในส่วนที่มีคำสั่งอื่น บังคับไว้ การกำหนด Font
face สำหรับฟอนต์ที่ต้องการให้แสดงผล เราอาจจะไม่กำหนดเลยก็ได้
เพราะการกำหนดฟอนต์ใดฟอนต์หนึ่งตายตัว อาจทำให้ผู้ชมอ่านภาษาไทยไม่ออกก็ได้
แต่ถ้าอยากจะกำหนดจริงๆ ก็น่าจะกำหนดแบบหลากหลายครอบคลุมฟอนต์ที่คาดว่าจะมีในเครื่องผู้ชมเว็บของเราดังตัวอย่าง
<Font face=
thonburi,angsanaUPC,CodiaUPC,EucrosiaUPC,LilyUPC,Ms
sans serif,>
- ไฟล์ต้นแบบที่เราสร้างจะมีรายละเอียดดังภาพ
เมื่อเราต้องการสร้างไฟล์ใหม่ก็เพียงเปิดไฟล์ต้นแบบขึ้นมาแล้วใส่รายละเอียดต่าง
ๆตามต้องการแล้ว Save as เป็นไฟล์ใหม่ตามต้องการ
ไม่ใช่เรื่องยากใช่ไหมครับเราสามารถสร้าง
Tags คำสั่งเหล่านี้ได้อย่างง่ายดาย ด้วยการใช้ Wizard
ของโปแกรม Homesite 4.5 ได้เลยครับ
|
