การเขียนเว็บเพจอย่างง่ายด้วย Netscape Gold 3.0
1. รูปแสดงการเลือกใช้
Browser และ Editor
2. การกำหนดค่า Editor Perferences
- เลือก Editor Preferences จากเมนู Options
- เลือกแถบ General ดังรูป
- บ็อกซ์ Author name ใส่ชื่อผู้เขียน
- บ็อกซ์ HTML sourceใส่ notepad.exe เพื่อเลือกโปรแกรมที่ใช้เขียน
3. การกำหนดค่า Document Encoding
- เลือก Document Encoding จากเมนู Options
- จาก Document Encoding เลือก User Defined เพื่อแสดงฟอนต์ภาษาไทย
- จาก Document Encoding เลือก Set Default เพื่อกำหนดให้ใช้
User Defined ทุกครั้ง ดังรูป
- หมายเหตุ จะต้องกำหนดให้ default เป็น User Defined
4. รูปแสดง toolbar
ของ Editor
5. รูปแสดง toolbar
การจัดย่อหน้าของ Editor
6. Creating a new document : จากเมนู File คลิกเลือก
New Document ดังรูป
มี 3 วิธี คือ
- Blank ไม่จำเป็นต้องเชื่อมต่ออินเทอร์เน็ต
- จากเมนู View คลิก Edit Document Source
- คลิกปุ่ม Save ดังรูป
- ใส่ c:\temp\test.html จะได้ไฟล์ ดังรูป
- From Template จะต้องเชื่อมต่ออินเทอร์เน็ต
- From Wizard จะต้องเชื่อมต่ออินเทอร์เน็ต
7. Document Properties
- จากเมนู Properties เลือก Document
- คลิกแถบ General ใส่ Title เป็น Thailand: xxxx
School Web page: <ชื่อเรื่องของหน้านั้น> ดังรูป
- คลิกแถบ Appearence เลือก Color schemes เลือก Background
image ดังรูป
8. Edit Document Source
- จากเมนู View คลิก Edit Document Source จะเปิดไฟล์
test.html ขึ้นมา ดังรูป
9. Style
- เลือก Style ที่ต้องการ เช่น Normal, Heading 1...6,
Address, etc. ดังรูป
- พิมพ์ข้อความ
- จากเมนู View คลิก Edit Document Source
ดังรูป
10. List Item
- คลิกปุ่ม Unnumbered/Numbered List Item แล้วพิมพ์ข้อความ
level 1 ดังรูป
- คลิกปุ่ม Indent Paragraph พิมพ์ข้อความ level 2
- จากเมนู View คลิก Edit Document Source ดังรูป
11. Character
- เลือกข้อความที่ต้องการ
- คลิกปุ่ม Object Properties เลือก Style ที่ต้องการ
ดังรูป
- จากเมนู View คลิก Edit Document Source ดังรูป
12. Color, Horizontal line, ขึ้นบรรทัดใหม่ เติมช่องว่าง
- เลือกข้อความที่ต้องการ คลิกปุ่ม Font Color เลือกสีที่ต้องการ
ดังรูป
- คลิกปุ่ม Horizontal line จากนั้นดับเบิลคลิกที่เส้นแนวนอน
กำหนดคุณสมบัติของเส้นตามต้องการ ดังรูป
- กด Shift+Enter เพื่อขึ้นบรรทัดใหม่
- กด Shift+Spacebar เพื่อใส่ช่องว่าง
- จากเมนู View คลิก Edit Document Source
13. Table
- คลิกปุ่ม Insert Table ใส่ตาราง
- คลิกตาราง แล้วคลิกปุ่ม Object Properties ดังรูป
- จากเมนู View คลิก Edit Document Source
14. การเพิ่มลบ row of table, column of table
- เพิ่ม row, column จากเมนู Insert เลือก table ดังรูป
- ลบ row, column จากเมนู Edit เลือก Delete table
ดังรูป
- จากเมนู View คลิก Edit Document Source
15. Image
- จากเมนู Insert เลือก Image จากแถบ Image บ็อกซ์
Image filename คลิกปุ่ม Browse
- ใส่คำอธิบายรูปภาพที่บ็อกซ์ Alternative Representations
ดังรูป
- เลือกการจัดแนวข้อความจากบ็อกซ์ Alignment
- จากเมนู View คลิก Edit Document Source
Relative and Absolute link
1. รู้จักกับ URLs
- URL Uniform Resource Location เป็นที่อยู่ของ Web
Site แต่อาจเรียกบริการอื่นของอินเทอร์เน็ตได้ เช่น http://www.school.net.th/about/faq1.html#1
- ส่วนที่ 1 http:// เป็น Protocol สำหรับ Browser
ใช้เรียกข้อมูลจาก site
- http: สำหรับ Web Sites
- ftp: สำหรับ Ftp Sites
- gopher: สำหรับ Gopher Sites
- telnet: สำหรับ Telnet Sites
- ส่วนที่ 2 www.school.net.th/ เป็น Web Server Name
ชื่อคอมพิวเตอร์ Web Server
- ส่วนที่ 3 about/ เป็น Path ที่จัดเก็บ
document file
- ส่วนที่ 4 faq1.html เป็น Document Name มักลงท้ายด้วย
html, htm
- ส่วนที่ 5 #1 เป็น Anchor Name แยกด้วยเครื่องหมาย
# ชี้ไปยังจุดสำคัญของ Web Page ที่ยาวมาก
2. Linking Characters
- เลือกข้อความที่ต้องการ
- จากเมนู Properties เลือก Text ...
- คลิกที่แถบ Link
- ใส่ URL หรือ file ที่ต้องการเชื่อมโยงในบ็อกซ์
Link to ดังรูป
- จากเมนู View คลิก Edit Document Source
3. Linking Images
- เลือกรูปที่ต้องการ
- จากเมนู Properties เลือก Image ...
- คลิกที่แถบ Link
- ใส่ URL หรือ file ที่ต้องการเชื่อมโยงในบ็อกซ์
Link to ดังรูป
- จากเมนู View คลิก Edit Document Source
4. Linking to Specific places in your document
- คลิกที่ตำแหน่งพิเศษในเอกสาร
- คลิกปุ่ม Insert Target ใส่ชื่อตำแหน่ง ดังรูป
- เลือกข้อความ/รูปภาพที่ต้องการเชื่อมโยง
- จากเมนู Properties เลือก text หรือ image ดังรูป
- คลิกที่ชื่อตำแหน่งในบ็อกซ์ Select a named target
- จากเมนู View คลิก Edit Document Source
5. Relative and absolute links
- Relative links ดังรูป เช่น
- index2.html
- picture/pop_welcome.GIF
- ../index.html
- Absolute links ดังรูป เช่น
- /index2.html
- /picture/ pop_welcome.GIF
- /index.html
การ Upload เว็บเพจขึ้นเครื่อง SchoolNet
1. ไดเรกทอรีจัดเก็บ webpage ของโรงเรียน
- ภายใต้ไดเรกทอรีแต่ละท่าน จะมีไดเรกทอรี bin, www
เช่น ภายใต้ไดเรกทอรี somyos แสดง ดังรูป
- ดับเบิลคลิกที่ www จะมีไดเรกทอรีย่อย cgi-bin
และไฟล์ index.html ดังรูป
2. ดับเบิลคลิกที่ไอคอน CuteFTP ดังรูป
3. ถ้าไม่มีหน้าต่าง FTP Site Manager คลิกที่ ปุ่ม
4. คลิก OK
5. ดับเบิลคลิกที่ www (ถ้าไม่มีไดเรกทอรีดังกล่าว คลิกเมาส์ปุ่มขวา
เลือก Make New Directory)
6. ด้าน SchoolNet คลิกที่ไฟล์ index.html แล้วคลิกเมาส์ปุ่มขวา
เลือก Delete
7. ด้าน PC คลิกเลือกไฟล์ *.html และไฟล์รูปภาพที่จะโอนขึ้นเครื่อง
SchoolNet (กรณีเลือกหลายไฟล์พร้อมกัน ให้กดปุ่ม Ctrl
ค้างไว้) คลิกเมาส์ปุ่มขวาเลือก Upload
8. เปลี่ยนชื่อไฟล์ html ไฟล์แรกเป็น index.html (คลิกเมาส์ปุ่มขวาเลือก
rename)
9.ศึกษาข้อผิดพลาดที่เกิดประจำจากเอกสาร ปัญหาที่เกิดจากการใช้ Netscape Gold
- การเรียกดู webpage ของโรงเรียนบนเครื่อง SchoolNet
ใส่ URL เป็น http://www.school.net.th/~[login]/ เช่น
http://www.school.net.th/~somyos/
- การ link จาก http://www.school.net.th/thaischool/
เมื่อโอน webpage ของโรงเรียนขึ้นเครื่อง SchoolNet แล้วให้ส่ง
email แจ้งให้ schoolnet@nectec.or.th ทราบ โดยลงทะเบียนที่
http://www.nectec.or.th/
การสร้างเว็บเพจโดยใช้ไฟล์จาก Microsoft Word
- จะต้องจัดเก็บแบบ text only
Suggested Reading
- Style Guide
- Technical information
- Tools
|
