วันอาทิตย์ที่ 24 มกราคม พ.ศ. 2553

การแทรก FlashButton ลงในเว็บเพจ

การแทรก FlashButton ลงในเว็บเพจ หลายคนคงจะได้ลองเล่นดูแล้ว แต่อาจจะมีบางคนอาจจะสงสัยว่าจะแทรกปุ่มคล้ายๆ Dreamweaver ได้หรือไม่ ลองมาอ่านบทความนี้ดูครับ

ขั้นตอนการทำ


1. เปิดหน้าเอกสารขึ้นมา ดังภาพ

2.จากนั้นให้เราเข้าไปที่เมนู Insert --> FlashButtonจะแสดงหน้าต่างเมนูขึ้นมา ดังภาพ

3.. เลือกปุ่มที่เป็นรูปที่เราต้องการและทำการดับเบิ้ลคลิ๊กที่รูปหรือจะคลิ๊กok ก็ได้ครับ ดังภาพ

4.คราวนี้เราก็จะมายังหน้าต่างปรับแต่งFlashButton ทำการกำหนดลิงค์และใส่สีหรือปรับขนาดตัวอักษรได้เลยครับ

5.จากนั้นกด ok จะได้ผล ดังภาพ

6. เป็นอย่างไรกันบ้างครับ ลองนำไปใช้กันดู

การกำหนดขนาดตัวอักษรโดยใช้ Css Style

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

ขั้นตอนการทำ

1. สร้างเอกสารขึ้นมา แล้วพิมพ์ข้อความลงในเว็บเพจนั้น ดังภาพ

2. จากนั้นทำการสร้าง Css โดยเริ่มจากเข้าไปที่เมนู Define Styles (Ctrl+F6) จะแสดงหน้าต่าง ดังภาพ
* ถ้าไม่ได้ใช้ Template ที่ช่อง Style จะว่างเปล่า

3. จากนั้นกดปุ่ม ที่เมนูด้านล่างของหน้าต่าง Styles จะมีหน้าต่างขึ้นมา ดังภาพ

4. จากนั้นให้กำหนดชื่อของ Css ทีเราต้องการใช้ ในที่นี้ผมยกตัวอย่างเช่น ผมต้องการกำหนดขนาดตัวอักษร 12 point และจะใช้ Font : Tahoma ทำการกำหนด ดังภาพ

5. หลังจากที่สร้าง Css : Font 12 เรียบร้อยแล้วก็ถึงขั้นตอนการนำมาใช้ให้ทำการ Highlight ในส่วนของข้อความที่เราต้องการกำหนดขนาด ดังภาพ

6. จากนั้นทำการเลือก Class ที่ Properties ด้านล่าง ดังภาพ

7. เพียงเท่านี้เราก็สามารถกำหนดขนาดให้กับตัวอักษรภายในเว็บเพจได้แล้ว โดยที่สามารถเปิดดูที่เครื่องที่ไหนก็ได้จะมีขนาดเท่ากับ 12 point ทุกครั้ง

การทำตาราง Rollover Table

การทำตาราง Rollover Table

ขั้นตอนการทำ

1. สร้างเอกสารขึ้นมา แล้วสร้างตารางขึ้นมา ดังภาพ

2. จากนั้นก็คลิ๊กขวาแล้วเลือก Make Cell Rollover ดังภาพ

3. จากนั้นเราก็จะเข้าสู่หน้าต่างสำหรับสร้าง ตารางRollover ขึ้นมาดังภาพซึ่งประกอบด้วย 2เมนูหลักดังนี้ัคือ
3.1 Select the style of Rollover เป็นเมนูที่ใช้สำหรับกำหนดรูปแบบให้กับตาราง
3.2 Apply Rollover เป็นเมนูสำหรับกำหนดว่าจะให้แสดงผล Rollover กับแถว หรือ คอลัมน์

4. ในที่นี้ผมเลือกให้แสดงผลกับ คอลัมน์ โดยผมติ๊กในช่อง Cell ในเมนูที่2 จากนั้นก็คลิ๊กตรง ปุ่ม Add ในเมนูที่ 1

5. หลังจากนั้นก็จะมีหน้าต่างขึ้นมาแล้วให้เราตั้งชื่อรูปแบบของเรา (ตั้งเป็นภาษาอังกฤษเท่านั้นห้ามใช้เครื่องหมายใด)

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

7. หลังจากนั้นก็จะกลับมาสู่หน้าต่างกำนดรูปแบบให้กับ ตารางRollover อีกครั้งแต่คราวนี้ลองสังเกตดูก็จะเห็น
ตาราง Rollover ที่เราสร้างขึ้นมา และเมื่อเราเอาเม๊าไปแตะ ดู มันก็จะเปลี่ยนสีไปตามที่เราได้กำหนดไว้ และจากนั้น
ก็คลิ๊กเลือก Finish ก็เป็นอันเรียบร้อยครับท่าน

8. จากนั้นก็ Save และลอง Preview ดูนะครับ

การทำ Scrollbar colors

การทำ Scrollbar colors

ขั้นตอนการทำ

1. สร้างเอกสารขึ้นมา จากนั้นก็คลิ๊กไปตรงเมนู Format และก็เลือกตรง Scrollbar colors ดังภาพ

2. จากนั้นเราก็จะเข้าสู่หน้าต่างสำหรับสร้าง Scrollbar colors ดังภาพ

3. ระหว่างที่เรากำลังเลือกสีให้กับ Scrollbar สังเกตดูตรงหน้าต่าง Preview ข้างล่างนะครับ มันจะเปลี่ยนไปตามแบบสีที่เราได้เลือกไว้ และเมื่อเลือกสีสัน Scrollbar ของเราได้เป็นที่ถูกใจแล้ว ก็คลิ๊กปุ่ม ok ได้เลยครับ

4. เมื่อคลิ๊กปุ่ม ok แล้วเพียงเท่านี้ก็เป็นอันเสร็จพิธีแล้วครับท่าน

เปลี่ยน Theme เว็บไซต์ง่ายสไตล์ Namo

ฉีกรูปแบบเว็บไซต์เดิมๆ สำหรับคนที่ทำเว็บไซต์มานานๆ เมื่อเว็บไซต์ใหญ่ขึ้น คงมีคำถามไม่น้อยว่าจะเปลี่ยน Template ของเว็บไซต์อย่างไร (ถ้าจะทำใหม่คงใช้เวลาไม่น้อย) เรามาดูวิธีการแก้ปัญหานี้กันดีกว่า ด้วย Template ที่โปรแกรม Namo เตรียมมาให้เราใช้หลายรูปแบบ

ขั้นตอนการทำ

1. เปิดไซต์ของเว็บไซต์ที่ทำ

2. เปิดหน้า Index ขึ้นมา

3. เลือกคำสั่ง Format -> Theme

4. จากนั้นทำการเลือก Theme ที่ต้องการจะเปลี่ยน และกด Ok

5. ตัวอย่างเมื่อทำการเปลี่ยน Theme แล้ว

รูปแบบเว็บไซต์ก่อนเปลี่ยน

รูปแบบเว็บไซต์ เมื่อทำการเปลี่ยน Theme ใหม่แล้ว

ยกเลิกการสร้างไฟล์ .bak ไม่ให้มากวนใจในการทำเว็บ

ไฟล์ .bak เราส่วนใหญ่ทราบกันอยู่แล้วว่าเป็นไฟล์ Backup ของไฟล์ที่เราทำงานผ่านไปแล้ว ไฟล์พวกนี้ถือว่าเป็นประโยชน์ในด้านการทำงาน แต่ในด้านการใช้งานบางคนอาจจะมองว่ามันทำให้ตาลาย หาไฟล์ที่ใช้งานจริงใน Folder ได้ลำบาก เราจะมายกเลิกการสร้างไฟล์ .bak นี้กัน

ขั้นตอนการทำ

1. เปิดโปรแกรม Namo ขึ้นมา จากนั้นเข้าไปที่เมนูิ Tools -> Preferences ดังภาพ

2. เลือกแถบคำสั่ง Save

เพียงเท่านี้ไฟล์ .bak ก็จะไม่มาให้รำคาญตา

เปลี่ยนสีเมนูเว็บไซต์ ง่ายเพียงปลาย Mouse

ขั้นตอนการทำ

1. เิปิดหน้าเอกสารที่เราต้องการทำสีขิงเมนู และทำการเลือก Script Wizard ที่ Panel ด้านซ้ายดังภาพ

2. จากนั้นเลือกที่แถบเมนู Text Menu หลังจากที่เลือก Script แล้วให้กด Next ดังภาพ

3. ทำการเพิ่มเมนูที่เราจะใช้ในหน้าเว็บไซต์ โดยกดที่ปุ่ม Add ดังภาพ

4. หลังจากที่สร้างเมนู ถ้าเราไม่ถูกใจตำแหน่งของเมนูก็สามารถปรับเปลี่ยนได้ตามต้องการ ดังภาพ

5. ถ้าถูกใจตำแหน่งของเมนูแล้วให้กดที่ปุ่ม Next เพื่อไปทำขั้นตอนของการกำหนดสีของเมนู ดังภาพ

6. หลังจากที่กำหนดสีของเมนูเรียบร้อยแ้ล้วให้กด Next เพื่อทำขั้นตอนของการกำหนดรูปแบบการแสดงผลเมนู ดังภาพ

7. ในการทดสอบผมได้เลือกแบบแสดงเมนูปกติ จะได้ผลดังตัวอย่าง

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

การใส่สีตัวอักษร และสีพื้นหลังของตัวอักษร

ขั้นตอนการทำ

1. สร้างเอกสาร และพิมพ์ข้อความที่ต้องการลงไปในเอกสาร ดังภาพ

2. ทำความรู้จักกับเครื่องมือ ก่อนที่จะนำไปใช้งาน ดังภาพ

แถบเมนูด้านบน

แถบเมนูด้านล่าง

ถ้าหาแถบเมนู Inspector ที่ด้านล่างไม่เจอให้กด Alt+2 หรือเข้าที่เมนูดังภาพ

3. หลังจากที่ทำความเข้าใจกับเครื่องมือ แล้วลองกำหนดรูปแบบตัวอักษร ดังภาพ

การใช้งาน Drop-down menu จัดระเบียบหน้าเว็บไซต์

ขั้นตอนการทำ

1. เปิดเอกสาร และเลือกเครื่องมือดังภาพ

2. คลิกปุ่ม Next เพื่อทำขั้นตอนต่อไป จากนั้นคลิกปุ่ม Add เพื่อทำการเพิ่มเมนูลงใน Drop-down menu ดังภาพ

3. เมื่อเพิ่มเมนูได้ตามต้องการให้กดปุ่ม Finish จากนั้นโปรแกรมจะทำการสร้างเมนูขึ้นมาดังภาพ

จะได้เมนู Drop-down menu ดังนี้