Thaigraph

 

   

ค้นหา
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 6587|ตอบ: 6
go

CSS3 menu Maker

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 24-9-2010 20:02 |แสดงโพสต์ทั้งหมด

สวัสดีท่านผู้เรียนรู้ทุกท่านล่าสุดไทยกราฟได้เปลี่ยนเมนูด้านบนเป็นแนว css style ทำให้ดูมิติและทันสมัยขึ้นทั้งนี้ก็ได้โปรแกรมที่สำเร็จรูปคือโปรแกรม CSS3 menu Maker จากเว็บcss3menu.com ซึ่งเป็น Freeware แจกให้ไปใช้กันฟรีๆ วันนี้จะมา Review ในการใช้โปรแกรม และบอกแนวทางการทำไปใช้กับงานเว็บ


1.เริ่มจากทำการ Download โปรแกรมมาติดตั้ง โดยดาวโหลดที่เว็บเจ้าของโปรแกรมโดยตรง

 

css3menucom.jpg


http://css3menu.com/css3menu-setup.exe

 

โหลดจากไทยกราฟ thaigraph : css3menu.rar

 

 

2.เปิดโปรแกรมขึ้นมาดังภาพ.

 

review1.jpg

 

2.1.ส่วนของคำสั่งเมนูในการสร้างเมนูไอค่อนใหม่และเมนูซ้อน สามารถเพิ่มลบได้และเลื่อนตำแหน่งได้

 

2.2.ส่วนของ Preview รูปแบบไอค่อนที่ได้และลักษณะการเกิดไอค่อนที่ทำการลิ้งค์และซ้อนกันเป็นต้น

 

2.3.ส่วนของรายชื่อเทมเพทให้เราเลือกว่าใช้แนวไหนในอนาคตอาจจะมีหลายรูปแบบ

 

2.4.ส่วนของลักษณะการนำไปใช้คือรูปแบบ เมนูที่แสดง แนวตั้ง หรือ แนวนอน เป็นต้น

 

2.5.ส่วนการปรับ Item properties เช่นการใส่ชื่อเมนูและใส่ลิ้งค์ไอค่อน

 

2.6.ส่วนปรับแต่ง style ของไอค่อน เช่นการเปลี่ยนสีตัวอักษร และสีพื้นหลังไอค่อน และซับเมนู

 

3.แนวทางการใช้โปรแกรม


3.1.คลิ๊กเลือกไอเท่มจากนั้นทำการใส่ชื่อไอเท่มลงไปเช่น Home หรือจะใส่ลิ้งค์ไปเลยก็ได้ หรือจะใส่ทีหลังก็แล้วแต่

 

review2.jpg

 

3.2.เพิ่มเมนูไอ่ค่อนโดยการคลิ๊กสัญลักษณ์เครื่องหมายบวกสีเขียวดังภาพ แล้วพิมพ์ข้อความลงไอค่อนในตำแหน่งที่สองแล้วก็ทำแบบเดิมอีกจนได้เมนูตรงตามที่ต้องการดังตัวอย่าง.

 

additeam.jpg

 

3.3.การเพิ่มซับเมนูซ้อนในเมนูหลัก โดยการเลือกที่ไอค่อนเมนูก่อนหลังจากนั้นคลิ๊กสัญลักษณ์รูปกระดาษสีเขียวและมีเครื่องหมายบวกเพื่อเพิ่มซับเมนูเข้าไปดังภาพ.

 

submenu.jpg

 

3.4.การเพิ่มซับเมนูเข้าไปในซับอีกทีโดยการเลือกที่หัวข้อซับเมนูจากนั้นก็คลิ๊กไอค่อนเพิ่มซับเมนู ต้องการเกิดซับที่หัวข้อไหนก็ให้เลือกหัวข้อนั้นก่อนแล้วกดไอเท่มเพิ่มซับเมนูดังภาพ.

 

submenu-sub.jpg

 

3.5.ในกรณีที่เราเผลอไปเพิ่มเมนูเกินเราไม่สามารถทำการ undo ได้แต่เราสามารถลบเมนูที่เกินมาโดยการเลือกที่เมนูแล้วกดสัญลักษณ์ปุ่มลบสีแดงก็ทำการลบเมนูที่เกินมาได้แล้วดังภาพ.

 

delete-item.jpg

 

3.6.การเลื่อนสลับตำแหน่งไอเท่มตามต้องการโดยการเลือกที่ไอเท่มจากนั้นก็คลิ๊กเลือกสัษลักษณ์ลูกศรสีเขียวบนเมนูว่าจะ เลื่อนไปข้างหน้าหรือข้างหลัง หรือถ้าเป็นซับเมนูก็สามารถกำหนดให้เลื่อนขึ้นหรือลงได้ดังภาพ.

 

move1.jpg

 

move2.jpg

 

4.แนวทางการปรับแต่งเลือก style ที่เหมาะกับเว็บเรา

 

4.1 เลือก Templates แบบที่ต้องการ จากนั้นเลือกสีของเทมเพทที่ต้องการ และเลือกลักษณะเมนูแบบแนวนอนหรือแนวตั้ง

 

template.jpg

 

4.2 การปรับเปลี่ยน style ของไอเท่ม เช่นการเปลี่ยนสีเพิ่มความมนของขอบไอเท่ม และเลือกลักษณะตัวอักษรสีตัวอักษรเป็นต้น โดยการปรับตรงแทบ Main menu และ Submenu

 

modify-item.jpg

 

4.2.1. ปรับในส่วนของพื้นหลัง และสีตัวอักษรและ เปลี่ยนสีเวลาเอาเม้าส์ไปชี้

 

4.2.2. ปรับในส่วนของความมนของขอบไอ่เท่มทั้งขอบด้านในและขอบด้านนอก menu คือขอบด้านนอก item คือขอบด้านใน

 

4.2.3. ปรับในส่วนของ Font เลือก font และขนาดและรวมถึงลักษณะ font เป็นต้น

 

5.หลักการนำไปใช้ พอเราตกแต่งเมนูได้ตามต้องการแล้วขั้นตอนสุดท้ายคือการนำเอาไปใช้ประยุกต์กับเว็บเรา

 

5.1 ให้ทำการกด save งานก่อน

 

5.2 จากนั้นกดปุ่ม Publish เพื่อแปลงไปใช้กับเว็บ

 

publish.jpg

 

5.3 ทำการ Export HTML โดยการบันทึกชื่อเป็นตระกูล html จากนั้นทำการ save จากนั้น โปรแกรมก็จะทำการ preview เป็นเมนูขึ้นมาบน browser ดังภาพ.

 

save-html.jpg

 

6.การนำเมนูไปรวมกับโคส html ในหน้าเว็บหลักของเรา มาถึงขั้นตอนสุดท้ายที่จะนำเมนูไปติดหน้าเว็บของเรา

 

6.1 ในการไปติดร่วมกับหน้าเว็บ html ธรรมให้ทำการเปิดไฟล์ menu ที่สร้างเป็น html แล้วในโปรแกรม text editer เช่นพวก editpad หรือที่ notepad ก็ได้

 

6.2 ให้ทำการ copy ในส่วนที่ 1. ไปใว้ในส่วน head ของหน้าเว็บหลัก ระหว่าง <head></head>

 

copycode1.jpg

 

copycode2.jpg

 

6.3 จากนั้นให้ทำการ copy ในส่วนที่2. คือส่วนของโคส css ไปใส่ในตำแหน่งของ html ที่เราต้องการให้เมนูออกมา

 

copycode3.jpg

 

copycode4.jpg

 

6.4 อย่าลืม copy ไฟล์ทั้งหมดไปใว้ในโพล์เดอร์ หรือตำแหน่งในส่วนที่เรากำหนดด้วยไฟล์ที่จะเอาไปก็มี style.css และไฟล์รูปภาพ 3 ไฟล์ดังภาพ.

 

infofile.jpg

 

6.5 จากนั้นทำการ upload ขึ้น server แล้วรันดู เมนูก็จะออกตามตำแหน่งที่เรากำหนด

 

view-web.jpg

 

7.การนำเอาเมนูไปรวมกับ php ถ้าเว็บเราใช้ระบบ php เขียนแล้วหละก็ ต้องใช้หลักการ include ในตำแหน่งโคสของ php

 

7.1 ให้ทำการปรับโคส css3menu.html เป็น css3menu.php โดยการลบส่วนของ html หลักออกเหลือแค่ที่จะเอาไปใช้กับ php ดังตัวอย่าง.

 

code-php.jpg


7.2 จากนั้นเขียนคำสั่ง include file css3menu.php ในตำแหน่งส่วนของหน้าเว็บ php ดังตัวอย่าง.

 

include-css.jpg


7.3 หลักจากนั้นทำการ upload file ขึ้น server ให้ครบตามตำแหน่งที่เรากำหนด แล้วรันหน้าเว็บขึ้นมาเพื่อดูในส่วนของเมนูที่เราที่เราได้ทำขึ้นมาจาก css3 ก็เป็นอันเสร็จ.

 

สรุป. ตัว css3 จะต่างจากตัว css ธรรมดาที่ไม่มีไฟล์ *.js ควบคุมทำให้ เว็บโหลดเร็วกว่าและโคดจะเป็น css ล้วนๆ ไม่มี java มากวนเลย

 

ท้ายสุดขอขอบพระคุณเว็บ http://css3menu.com ที่ได้แจกโปรแกรมสร้าง css3 menu maker

 

ขอปัญญาเกิดแด่ท่าน

อ.ธนา ไทยกราฟ ดอท คอม

 

น้อมรับทุกคำติชม.

 

Rank: 5Rank: 5

Medal No.2 Medal No.1

โพสต์เมื่อ 13-10-2010 16:13 |แสดงโพสต์ทั้งหมด
ความรู้ยาวมากๆ อิอิ แต่โหลดมาละ nod32 ตรวจเจอเป็นไวรัส ต้องแก้อีก ซะงั้น

Rank: 5Rank: 5

โพสต์เมื่อ 28-10-2010 16:11 |แสดงโพสต์ทั้งหมด
มีประโยชน์มากครับ

Rank: 5Rank: 5

โพสต์เมื่อ 1-1-2011 13:31 |แสดงโพสต์ทั้งหมด
ขอบคุณค่ะ ได้ความรู้มากมายเลยทีเดียว

Rank: 1

โพสต์เมื่อ 23-7-2011 16:38 |แสดงโพสต์ทั้งหมด
สุดยอดครับ เทพมาก

Rank: 1

โพสต์เมื่อ 24-7-2011 03:29 |แสดงโพสต์ทั้งหมด
ดีมากๆครับ

Rank: 1

โพสต์เมื่อ 8-8-2011 13:17 |แสดงโพสต์ทั้งหมด
ดีมากๆเลยค่ะ ขอบคุณสำหรับความรู้ดีๆค่ะ

Thaigraph

GMT+7, 22-10-2019 14:09 , Processed in 0.105570 second(s), 22 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books