Linly Zaa

วันจันทร์ที่ 19 ธันวาคม พ.ศ. 2554

การทำธงพริ้วไหว...

การทำธงพริ้วไหว ในบทความนี้จะให้รู้จักการใช้เครื่องมือ Distort เพื่อประยุกต์ใช้กับงาน ไม่ว่าจะเป็นตัวอักษร หรือวัตถอื่นๆ อย่างในตัวอย่างการทำ ดังนี้ ขั้นตอนการทำ 1. สร้างเอกสารเปล่าขึ้นมา พร้อมเลือกเครื่องมือ Rectangle Tool วาดธงขึ้นมา ดังภาพ

2. นำ Mouse เลือกวัตถุทั้งหมด แล้วทำการ Group โดยเข้าไปที่เมนู Object --> Group (Ctrl+G)

3. ใช้เครื่องมือ Envelope Distort โดยเข้าไปที่เมนู Object --> Envelope Distort --> Make with Warp เพื่อทำการเปลี่ยนแปลงรูปทรงของธง ดังภาพ

4. ตบแต่งวัตถุเพิ่มเติม เพียงเท่านี้เราก็สามารถทำธงที่ดูพริ้วไ้หวได้แล้วครับ ไม่ยากเลยใช่ไหมครับ ลองนำไปใช้กันดูนะครับ

ที่มา http://www.webthaidd.com/illustrator/webthaidd_article_215_.html

เทคนิคการทำ Bullet Arrow

เทคนิคการทำ Bullet Arrow บางคนอาจจะสงสัยว่าการทำลูกศรหน้าข้อความทำอย่างไร ต้องใช้ Photoshop ด้วยหรือเปล่า จริงๆ แล้วเราสามารถใช้ Dreamweaver ทำได้เลยเช่นกัน แต่งานนี้ต้องใช้ CSS เข้ามาช่วยเล็กน้อยนะครับ มาดูขั้นตอนการทำเลยดีกว่าครับ ขั้นตอนการทำ 1. สร้างเอกสารเว็บเพจขึ้นมา เลือกแถบเครื่องมือ Characters จากนั้นเลือก Insert Other Character เลือกสัญญลักษณ์ "»" ใส่ลงในเว็บ ดังภาพ

2. จากนั้นในหน้าเว็บเพจจะขึ้นตัวอักษร ดังภาพ

3. ทำการสร้าง Css ชื่อว่า Arrow เพื่อนำไปควบคุม Character ให้เป็น Bullet Arrow * ถ้าใครไม่เข้าใจการสร้าง Css ลองอ่านบทความการสร้าง Css เพิ่มเติมนะครับ

4. จากนั้นนำ Css มาใส่ที่ Character ดังภาพ

5. จากนั้นตบแต่งสีสันให้เข้ากับข้อความและลอง Preview ดูจะได้ดังภาพ

6. ลองนำไปใช้กับเว็บดูนะครับ เผื่อจะได้ไม่ต้องมานั่งปวดหัวกับการสร้าง Bullet Arrow ต่างๆ ที่มา http://www.webthaidd.com/dreamweaver/webthaidd_article_205_.html

การทำโฆษณาแบบพับเก็บได้

การทำโฆษณาแบบพับเก็บได้ หลายคนอาจจะสงสัยว่าเว็บดังๆ เขาทำโฆษณากันอย่างไรแบบที่วิ่งอยู่บนหน้าจอ แล้วยังสามารถพับเก็บได้ การทำก็มีด้วยกันหลายแบบเช่นรูปภาพ หรือไม่ก็ 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. จากนั้นก็ลองทดสอบการทำงานดูครับ (รับรองว่าโปรแกรมอะไรก็มา Block ไม่อยู่) ที่มา http://www.webthaidd.com/dreamweaver/webthaidd_article_204_.html

การใส่ Keyword ให้กับเว็บไซต์

หลายคนอาจจะสงสัยว่าเวลาค้นหาเว็บไซต์ ทำไมไม่เจอเว็บเรา คำถามนี้ถูกถามขึ้นมาบ่อยครั้ง ณ หลายแห่งและหลายเว็บ ส่วนใหญ่ก็จะบอกเป็นคำตอบเดียวกันว่าให้ใส่ keyword ซิ ^^! แล้วใส่อย่างไร ? ลองอ่านบทความนี้ซิครับ แล้วจะทราบว่าขั้นตอนในการทำนั้นไม่ได้ยากอย่างที่คิด ขั้นตอนการทำ 1. เปิดเอกสารที่เราต้องการใส่ keyword คีย์ลัดเปิดเอกสาร Ctrl+O 2. จากนั้นเลือกเครื่องมือ Head -> Keyword ดังภาพ

3. จากนั้นจะมีหน้าต่าง popup ขึ้นมาให้เราใส่ keyword ที่เราต้องการลงไปได้เลยครับ ตัวอย่างดังภาพ * ควรใส่ , เพื่อแบ่งคำในการค้นหา

4. เพียงเท่านี้เว็บเราก็จะโกอินเตอร์ กับเขาเสียที ขอให้สนุกกับการทำเว็บ ^^! * แต่ใ่ช่ว่าขั้นตอนในเบื้องต้นจะใช้ได้ตลอด เราควรที่จะคอย update ข้อมูลอยู่เสมอเพื่อสร้างความน่าสนใจให้ผู้ที่เยี่ยมชมเว็บไซต์ของเรา ที่มา http://www.webthaidd.com/dreamweaver/webthaidd_article_226_.html

การตั้งค่าภาษาไทยให้กับ Dreamweaver 8

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

2. จากนั้นเลือกปุ่ม More... มนส่วนของ Create New ดังภาพ

3. จะพบหน้าต่างแสดงขึ้นมา ใ้ห้เลืิอกที่เมนู Preferences..

4. จากนั้นตั้งค่าดังภาพ

5. จากนั้นลองสร้างเอกสาร เพียงเท่านี้ในครั้งต่อไป เราก็จะใช้งานโปรแกรมในการทำเว็บภาษาไทย ได้อย่างไม่มีปัญหา ดังภาพ

ที่มา http://www.webthaidd.com/dreamweaver/webthaidd_article_207_.html

การทำ Favorites icon

การทำ Favorites icon หลายคนอาจสงสัยว่าทำอย่างไรต้องเขียน script หรือต้องติดตั้ง plugin หรือไม่ เรามาดูคำตอบของคำถามนั้นกัน ขั้นตอนการทำ 1. ขั้นแรกเราต้องมีภาพขนาด 16x16 px แนะนำให้เป็นภาพสกุล PNG นะครับเพื่อที่ภาพที่ออกมาจะได้คมครับ 2. จากนั้นทำการแปลงภาพจาก PNG เป็นไฟล์ ICON โดยเข้าผ่านเว็บไซต์นี้นะครับ จะได้ไม่ต้องไปหาโปรแกรมให้ยุ่งยากครับ แถมยังฟรีอีกด้วยครับ http://www.converticon.com/ 3. จากนั้นเราจะได้ไฟล์ .ico ให้เราทำการ save ลงมายังเครื่องเราดังภาพ

4. ทำการเปลี่ยนชื่อของ icon เป็น favicon.ico เพื่อให้ Browser อ่านไฟล์ออก 5. จากนั้นทำการ upload ให้ไปที่เดียวกับเว็บไซต์ และลอง Favorites ดูนะครับก็จะได้ดังภาพ

กดปุ่มที่ Favorites จะเห็นดังภาพ

เปิดเว็บไซต์หลังจากที่ Favorites ก็จะได้ผลดังภาพ ที่มา http://www.webthaidd.com/dreamweaver/webthaidd_article_404_.html

การจัดระเบียบ code

การจัดระเบียบ code การจัดเรียง code ที่เป็นระเบียบสำคัญมากสำหรับคนที่เขียนโปรแกรม แต่ถ้าเราเขียนไปหลายๆ บรรทัดแล้วจะมานั่งจัดก็คงจะเสียเวลา เราให้ dreamweaver ช่วยจัดให้ดีกว่า ขั้นตอนการทำ 1. เปิดหน้าเว็บไซต์ขึ้นมา จากนั้นกดที่ปุ่ม code ดังภาพ