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

การทำธงพริ้วไหว ในบทความนี้จะให้รู้จักการใช้เครื่องมือ 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 ดังภาพ

2. จากนั้นจะเห็นว่า code ไม่เป็นระเบียบ ดังภาพตัวอย่าง

3. ทำการจัดระบบ code ด้วยการกดที่ปุ่ม Commands -> Apply Source Formatting ดังภาพ

4. ลองสังเกตุที่ code อีกครั้งจะเห็นว่าเราจะอ่าน code ได้ง่ายขึ้น ดังภาพ

5. สำหรับโปรแกรมเมอร์ที่มีปัญหาในเรื่องนี้ ก็ลองนำไปประยุกต์ใช้งานดูนะครับ ที่มา http://www.webthaidd.com/dreamweaver/webthaidd_article_405_.html

การนำ รูปภาพมาเป็น ปุ่ม submit form

การนำ รูปภาพมาเป็น ปุ่ม submit form หลายคนคงเคยเห็นแล้วนะครับว่า ในหลายๆ เว็บได้มีการใช้ รูปภาพ มาเป็น ปุ่ม submit form ( webthaidd ก็เช่นกัน ) ซึ่งนั่นก็จำทำให้เว็บนั้นๆ ดูสวยงามมากยิ่งขึ้น เนื่องจากว่าจะทำให้ ทุกอย่าง เข้ากันกับ ธีม ของเว็บ เพราะฉะนั้นจะช้า อยู่ใย มาเปลี่ยนให้ ปุ่ม Submit เป็นรูปภาพเพื่อให้กับธีมของเว็บของเรา มาเริ่มกันเลยดีกว่าครับ 1. เตรียมรูปภาพที่้จะนำมาเป็น ปุ่ม submit form ก่อนเลยครับการนำ รูปภาพมาเป็น ปุ่ม submit form หลายคนคงเคยเห็นแล้วนะครับว่า ในหลายๆ เว็บได้มีการใช้ รูปภาพ มาเป็น ปุ่ม submit form ( webthaidd ก็เช่นกัน ) ซึ่งนั่นก็จำทำให้เว็บนั้นๆ ดูสวยงามมากยิ่งขึ้น เนื่องจากว่าจะทำให้ ทุกอย่าง เข้ากันกับ ธีม ของเว็บ เพราะฉะนั้นจะช้า อยู่ใย มาเปลี่ยนให้ ปุ่ม Submit เป็นรูปภาพเพื่อให้กับธีมของเว็บของเรา มาเริ่มกันเลยดีกว่าครับ 1. เตรียมรูปภาพที่้จะนำมาเป็น ปุ่ม submit form ก่อนเลยครับ

2.ไปที่ form สำหรับ ส่งข้อมูล ที่เตรียมไว้ เอา ปุ่ม submit form ที่ใส่ไว้ในตอน แรกออกได้เลย ถ้าใครจะไม่ได้ทำ ก็ไม่ต้องใส่เลยนะครับ

>>

3. จากนั้นไปที่ Tap menu ด้านบน ของ Dreamweaver เลือก Forms

4. เลือก Images Field

5. จะ มี Select Image Source ขึ้นมาเพื่อให้หารูป ภาพ

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

ลองทำกันดูนะครับ ไม่ยากเลยใช่มั้ยครับ ที่มา:http://www.webthaidd.com/dreamweaver/webthaidd_article_666_.html

Connect Database ผ่าน DreamweaverMX

Connect Database ผ่าน DreamweaverMX

ขั้นตอนการให้ DreamweaverMX ติดต่อฐานข้อมูล Database

1.เปิดโปรแกรม คลิกเมนู File เลือก New เพื่อสร้างไฟล์ขึ้นใหม่ (New Document )
2. แท็ป General ในช่อง Category เลือก Dynamic Page และ เลือกภาษา ที่ต้องการติดต่อ เช่น ASP VBScript , PHP กดปุ่ม Create เพื่อยืนยัน

3. เลือก เมนู Window > Databases ปรากฏหน้าต่าง Application
Create a site for this file ( ควรทำการ MapSite ด้วยดูในหัวข้อ "สร้าง Site Map" )
เลือก Choose a document type เลือกFile Extension และ เลือกภาษาที่ไช้ กด OK
เลือก Set up the site's testing server เพื่อตั้งค่า แล้วคลิกปุ่ม OK เพื่อยืนยัน

4. ตั้งค่าใน หน้าต่าง Site Definition ที่แท็ป Advanced
Server Model เลือก ภาษาที่ใช้ติดต่อ
Access เลือก Local/Network
Testing Server Folder ชี้ไปที่เก็บ File
URL Prefix ใส่ http://localhost/

5.หลังจากตั้งค่าเรียบร้อยแล้ว เลือกเครื่องหมาย+ ที่หน้าต่าง Application ดังรูปข้างบน
ถ้าใช้ภาษา ASP โปรดไปข้อที่ 6
ถ้าใช้ภาษา PHP โปรดไปข้อที่ 7

--------------------------------------------------------------------------------
6. ขั้นตอน การตั้งค่า สำหรับภาษา ASP
ถ้าใช้ภาษา ASP จะปรากฏรายการดังนี้
Custom Connection String
Data Source Name (DNS)

ตั้งค่า ถ้าเลือก Custom Connection String
Connection Name ใส่ชื่อของการติดต่อ เพื่อใช้อ้างถึงภายในโปรแกรม Dream
Connection String ตั้งค่าคำสั่งติดต่อกับฐานข้อมูล ( ดูจากหัวข้อ "รวมคำสั่ง ASP ติดต่อ ฐานข้อมูล")

ตั้งค่า ถ้าเลือก Data Source Name (DNS)
Connection Name ใส่ชื่อของการติดต่อ เพื่อใช้อ้างถึงภายในโปรแกรม Dream
Data Source Name (DNS) เลือกรายการชื่อฐานข้อมูล
( จาก ODBC Data Source แท็บ System DSN ใน Control Panel )
User Name ใส่ชื่อที่มีใน ฐานข้อมูล
Password ใส่รหัสผ่านที่มีใน ฐานข้อมูล

คลิกปุ่ม Test เพื่อทดสอบการ Connection และคลิกปุ่ม OK เพื่อยืนยัน

--------------------------------------------------------------------------------
7. ขั้นตอน การตั้งค่า สำหรับภาษา PHP
ถ้าใช้ภาษา PHP จะปรากฏรายการดังนี้
MySQL Connection

การตั้งค่า ใน MySQL Connection
Connection Name ใส่ชื่อของการติดต่อ เพื่อใช้อ้างถึงภายในโปรแกรม Dream
MySQL Server เลือกชื่อเซิฟเวอร์ที่ใช้ หรือ localhost
User Name ใส่ชื่อที่มีใน MySQL
Password ใส่รหัสผ่านที่มีใน MySQL

และกดปุ่ม Select เพื่อเลือก ฐานข้อมูล
ถ้า User Name และ Password ถูกต้อง จะปรากฏหน้าต่าง Select Database
เลือก Database และกดปุ่ม OK เพื่อยืนยัน
http://www.webthaidd.com/dreamweaver/file_dream/dream77/8.jpg

คลิกปุ่ม Test เพื่อทดสอบการ Connection และคลิกปุ่ม OK เพื่อยืนยัน

--------------------------------------------------------------------------------

8. หน้าต่าง Application ที่ติดต่อฐานข้อมูลเรียบร้อยแล้ว

ข้อมูลจาก : http://www.cannot.info/

การสร้างเงาให้ตารางใน Dremweaver

การสร้างเงาให้ตารางใน Dremweaver

1. ให้ทำการสร้างไฟล์ Pixels img ขึ้นมาก่อน โดยใช้ Photoshop สร้างไฟล์ใหม่
File --> New แล้วกำหนด Contents = Transparent และปรับความสูงความกว้าง เท่ากับ 5 จากนั้นเราก็จะได้ไฟล์ใหม่ที่มีลักษณะโปร่ง จากนั้นให้ทำการ Save For Web โดย กำหนดให้เป็นไฟล์เป็นนามสกุล Gif เราก็จะได้ไฟล์ pixels.gif (ให้บันทึกชื่อ
pixels)

2. ให้การเปิดโปรแกรม Dreamweaver ขึ้นมาจากนั้นให้ใส่Table 2 Columns โดยคลิ๊กไอค่อนรูป Table หรือใช้คำสั่ง Insert --> Table แล้วให้ตั้งค่าดังตัวอย่าง

3. จากนั้นให้ใส่ Table โดยใช้ขั้นตอนที่2 (หรือทำการคลิ๊กที่Table แล้วทำการ Copy แล้ว Paste อีก 2 บรรทัด) เพิ่มอีก 2 ดังตัวอย่าง

4. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 1. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่งตัวอย่าง

5. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่ง ตัวอย่าง.

6. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. Columns ที่ 2. เป็นสีพื้นของเงา (โคสสี #C0C0C0) แล้วใส่ Table แถวที่ 3. Columns 2. เป็นสีเงาเหมือน แถวที่ 2. ดังตัวอย่าง

7. เมื่อเราได้โครงร่าง Table ดังตัวอย่างแล้วหลังจากนั้นให้ทำการปรับแต่งโดยการกำหนดความกว้างภายใน Columns แต่ ละ Columns และ ใช้ pixels.gif กำหนดความสูงความกว้างในแต่ละ Columns โดยมีขั้นตอนดังต่อไปนี้

7.1 ให้การทำงานมาอยู่ที่ table แถวที่1. จากนั้นให้เคอร์เซอร์อยู่ใน Columns ที่1. แล้วให้ใส่ไฟล์pixels.gif ไป โดย คลิ๊กเลือกไอค่อนรูปภาพ แล้วปรับความกว้างใน Columns ที่ 2. เท่ากับ 5 จากนั้น Table ก็จะหมดความขนาดของ pixels.gif ดังตัวอย่าง.

7.3 จากนั้นให้การทำงานอยู่ที่ Table แถวที่3. แล้วให้ทำการใส่ Pixels.gif ลงไปในColumns ทั้งสองแล้วปรับค่าความ กว้างของ Colums แรก เท่ากับ 5 แล้ว Table ก็จะหดตัวเท่ากับความสูงของ pixels.gif

จากนั้นเราลองทำการแสดงผลที่ Browser ก็จะเห็นเมนูมีลักษณะมีเงาลอยออกมาจากพื้นดังตัวอย่าง ก็เป็นอันเสร็จกระบวนการ.

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