การสร้างเวปไซค์ด้วยWebpage Maker

ก่อนที่จะลงมือสร้างเว็บไซค์เราต้องกำหนดรายละเอียดต่างๆ ก่อนดันนี้ นะครับ

1. เว็บเพ็จที่จะสร้างมีจำนวนกี่หน้าก็ตามแต่  หน้าโฮมเพจหรือหน้าแรกจะต้องตั้งชื่อว่า index.html
2. สร้างโฟลเดอร์ที่ใช้สำหรับเก็บไฟล์โปรเจ็ค ของ Webpage Maker และไฟล์อื่นๆ ที่เกี่ยวของ ของเราในที่นี้ จะสร้างโฟลเดอร์ที่ชื่อว่า myweb เก็บ ไวที่ไดรฟ D:

3. สร้างสวนหัว (header) ด้วยโปรแกรม กราฟฟิค เช่น Adobe Photoshop  Photo scape  กำหนดขนาด 820×180 พิกเซล ในส่วนของความสูงอาจจะเป็นค่าอื่นก็ได้เช่น 200  พิกเซล เป็นต้น
4. เปิดโปรแกรม Webpage Maker คลิก ที่เมนู File > New Site และ File > Save As.. ตั้งชื่อไฟล์ ว่า myweb เก็บไวในโฟลเดอร์ D:\myweb จากนั้นไปที่เมนู Edit > Setting… กำหนดคาให้ โปรแกรม ดังภาพต่อไปนี้


5. คลิกที่เมนู Format > Page Properties กำหนดคาใหกับเว็บเพ็จ

ในแท็บ Appearance เราทำการปรับเปลี่ยนดังนี้ (เราสามารถเปลี่ยนได้ตามความชอบ)

Align: จะเป็นการกำหนดให้เว็บเพ็จแสดงอยู่ด้านซ้าย หรือ ตรงกลาง ในภาพเราเลือก Center คือตรงกลาง

ส่วนColor: เป็นการกำหนดค่าของสีที่ใช้ในเว็บเพจ

Character Set: เราใช้ UTF8  ถ้าไม่มีให้เรา ให้เลือก User Define แล้วพิมพ์ Windows-874 เข้าไป

 

การใส่ส่วนหัวให้กับเว็บเพจ (Banner)

การนำเอาส่วนหัว (Header) มาวางใส่เว็บเพจ ให้คลิกที่เมนู  Insert > Image > From file.. จากนั้นเลือกไฟล์ที่เราได้สร้างหรือจัดเตรียมไว้

หรือคลิกที่ Tool Bar นี้

 

เสร็จแล้วเลือกที่เก็บไฟล์รูปภาพแล้วคลิก Open

 

แล้วเราก็จะได้หัวเวป ดังรูป

 

จัดตำแหน่งที่ต้องการโดยการคลิกเมาส์ซ้ายค้างไว้แล้วลากไปมา เมื่อได้ตำแหน่งที่พอใจแล้ว ให้ทำการล็อครูปภาพไว้ โดยการคลิกเมาส์ ขวา จะมีเมนูขี้นมาแล้วเลือก Lock

 

ทำการ Save โดยไปที่เมนู File  > Save    แล้วก็จะปรากฎหน้าต่างขี้นมาให้เรากำหนด File Name เป็น Myweb เสร็จแล้วคลิก Save

 

 

ต่อไปเมื่อเรา Save หรือบันทึกเสร็จเรียบร้อยแล้วเราก็จะต้องการพรีวิวดู ด้วยการกด ปุ่ม F5 ที่คีย์บอร์ด หรือคลิกที่แว่นขยายจากแถบเครื่องมือ เพจเราก็จะแสดงผลในโปรแกรม Browser

 

 

ต่อไปเป็นการสร้างแถบเมนูด้านบนโดยการให้ รูปทรงมาช่วยในการตกแต่งพื้นหลังของเมนูด้านบน

อันดับแรกให้ไปคลิกที่เมนู Insert > Shape > Rectangle

 

คลิกเมาส์ปุ่มขวา ที่ Shape เลือก Properties   แล้วกำหนดคุณสมบัติ ของแทบ General และ Colors and ดังภาพ

 

นำไปวางไว้ใต้ Banner ดังรูปภาพ

 

จากนั้นไปที่เมนู  Insert  >  Text  แลวดับเบิ้ลคลิกเพื่อทาการพิมพ์เมนูต่างๆ  แลวจัดวางตามต้องการ

 

เมื่อเราเพิ่มแล้วจะได้ดังรูปภาพ

 

 

การเชื่อมโยงหรือการใส่ Link ให้กับตัวอักษร


ให้คลุมดำข้อความที่ต้องการเชื่อมโยง แล้วคลิกที่แถบเครืองมือ รูปโลกกับโซ่ โปรแกรมจะเปิดหน้าต่าง Hyperlink ขี้นมา เราก็สามารถทำการเชื่อมโยงได้แล้ว

 

 

 

รูปแบบการ Link (Link Type) ประกอบด้วย

(blank)      ว่างเปลา
A Page in My Site     เชื่อมโยงเว็บภายใน

Another Web Site     เชื่อมโยงเว็บภายนอก
An Email Address     เชื่อมโยงไปหา E-mail

An Ftp Address        เชื่อมโยงไปหาที่อยูในการ Upload
A File on My Computer    เชื่อมโยงไปหาไฟล์ในคอมพิวเตอร์เรา

 

URL เป็นช่องที่ให้เราใส่ชื่อเว็บไซต์ หรือชื่อไฟล์ที่เราต้องการเชื่อมโยงไปหา

รูปแบบการเปิด Link (Target) ประกอบด้วย

_blank      เปิดเว็บเพ็จปลายทางในวินโดว์ใหม
_parent     แสดงเว็บเพ็จในเฟรมที่ครอบเฟรมปัจจุบันอยู
(กรณีใชเฟรม)

_self       แสดงเว็บเพ็จในเฟรมเดิมของลิงค์
_top       แสดงเว็บเพ็จในวินโดว์เดิมโดยยกเลิก เฟรมที่ครอบอยูทั้งหมด

 

 

การเพิ่มเมนูด้านข้าง (Navigation Bar)

การสร้างเมนูดานขาง โดยการไปที่เมนู  Insert > Navigation Bar โปรแกรมจะเปิดหน้าต่าง ให้  Select Navigation Bar Style ให้เลือก พอเลือกได้แล้วก็พิมพ์เมนูที่ต้องการลงไป กดโอเค  ดังภาพ

 

 

เสร็จแล้วกด พรีวิวดู ก็จะได้เมนูที่ต้องการตามรูปภาพนี้

เกียรติศักดิ์

Blog นี้จัดขี้นมาเพื่อรวบรวมข้อมูลที่เกี่ยวข้องกับรายวิชาคอมพิวเตอร์ จากทุกๆ เวปไซค์ บนโลกออนไลน์ เพื่อให้นักเรียน ได้สืบค้นข้อมูล เรียนรู้ ทดสอบ ฯลฯ ซึ่งทางผู้จัดทำมิได้แสวงหาผลประโยชน์ไดๆทั้งสิ้น