หน้าเว็บ

Tech & Tips

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

2. จากนั้นวาด Layer ลงในเว็บเพจ 1 Layer พร้อมตั้งชื่อ "ads" ดังภาพ


3. จากนั้นนำรูปภาพที่เตรียมไว้วางใส่ลงไปใน Layer ใช้ Hotspot สร้างส่วนที่จะให้ผู้ใช้กดปุ่มปิดหน้าต่าง ดังภาพ

4. เลือกเครื่องมือ Behaviors (Shift+F3) ใช้ Action เครื่องมือ Show-Hide Layers สั่งให้ซ่อน Layer "ads" ดังภาพ
* ถ้า Show-Hide Layers ไม่ขึ้นให้เลือกที่จุด Hotspot ที่เราสร้างไว้ตอนแรกก่อน


5. จากนั้นให้สังเกตุที่เครื่องมือ Behaviors สถานะของ Mouse อยู่ที่ onMouseOver ให้เราทำการเปลี่ยนเป็น onClick ดังภาพ
* ถ้าไม่มีให้เลือกให้ไปแก้ที่โค้ดแทนก็ได้





6. จากนั้นก็ทำการใส่ Link ให้กับรุปภาพตามปกติ (จะลิงค์มาที่ http://www.webthaidd.com/ ก็ได้นะ)


7. จากนั้นก็ลองทดสอบการทำงานดู


2. การนำ รูปภาพมาเป็น ปุ่ม submit form 
 1. เตรียมรูปภาพที่จะนำมาเป็น ปุ่ม submit form ก่อน

2.ไปที่ form สำหรับ ส่งข้อมูล ที่เตรียมไว้ เอา ปุ่ม submit form ที่ใส่ไว้ในตอน แรกออกได้เลย ถ้าใครจะไม่ได้ทำ ก็ไม่ต้องใส่เลยนะ
3. จากนั้นไปที่ Tap menu ด้านบน ของ Dreamweaver เลือก  Forms
4. เลือก Images Field
5. จะ มี Select Image Source ขึ้นมาเพื่อให้หารูป ภาพ
และเมื่อเลือก รูปภาพ ที่ต้องการได้ ก็เสร็จแล้ว


3. นําเนื้อหาจาก Ms Word เข้า Dreamweaver
ใน Dreamweaver เราสามารถที่ จะเปิดและ นําเข้าเอกสาร HTML ที่ ถูกสร้างโดย 
โปรแกรม Microsoft Word ได้ โดยใช้คําสั่ง Clean up Word HTML ใน 
การลบโค้ด HTML ที่ถูกสร้างโดย Word ออก ซี่งโค้ดที่ถูกลบออกดังกล่าวจะเป็นโค้ดที่ใช้กําหนด 
รูปแบบของเนื้อหาใน Word ซึ่งไม่สามารถแสดงใน WebBrowser ได้
ก่อนอื่นควร แปลงเอกสาร Microsoft Word ให้เป็น HTML ก่อน ( โดยเลือกคำสั่ง บันทึกเป็นเวบเพจ )
วิธีที่ 1 
1. เปิดไฟล์ HTML ที่ถูกสร้างจาก Word ด้วย Dreamweaver 
2. เลือก Commands > Clean Up Word HTML 
3. ปรากฏ ไดอะล็อกเมนู Clean Up Word HTML กดปุ่ม OK เพื่อลบโค้ด
วิธีที่ 2 
1. เปิด Dreamweaver เลือกคําสั่ง File > Import > Word HTML 
2. เลือกไฟล์ HTML ที่ถูกสร้างจาก Word 
3. Dreamweaver จะตรวจสอบรุ่นของ Word ที่ใช้บันทึกไฟล์ ดังกล่าว 
4. ปรากฏ ไดอะล็อกเมนู Clean Up Word HTML กดปุ่ม OK เพื่อลบโค้ด 

ข้อมูลใน ไดอะล็อกเมนู Clean Up Word HTML
Clean up HTML from เลือกเวอร์ชั่นของ Microsoft Word
Remove all Word Specific Markup กําหนดให้ ลบแท็ก HTML เฉพาะที่ถูกสร้างโดย Word
Clean up CSS กําหนดให้ลบ CSS เฉพาะที่ถูกสร้างโดย Word
Clean up <font> Tags กําหนดให้ ลบแท็ก HTML ที่อยู่ ในแท็ก <body> แล้ว กําหนดค่าขนาดของตัวอักษร ในแท็ก <body> ให้เท่ากับ 2
Fix Invalidly Nested Tags กําหนดให้ลบแท็ก font ที่ ถูกสร้างโดย Word ที่อยู่ นอกแท็ก ที่อยู่ในระดับบล็อกออก เช่น แท็ก <p>, <h1> และ<h2>
Set Background Color เป็นฟิลด์ที่ให้พิมพ์ รหัสของสีที่ เป็นเลขฐาน 16 ในการกําหนดสีพื้นหลัง ให้กับเว็บเพจ
Apply Source Formatting กําหนดให้ใช้ รูปแบบของซอร์สโค้ด ตามที่กําหนดไว้ใน HTML Format Preference
Show Log on Completion กําหนดให้แสดงกล่องข้อความ ที่แสดงรายละเอียด ของการเปลี่ยนแปลงที่ได้ ทํากับเอกสาร HTML ที่ สร้างจาก Word ในขณะที่นําเข้าเนื้อหาใน Dreamweaver