การใส่คำบรรยายให้กับภาพ

การทำ Gradient ภาพ บางคนอาจจะรู้จักแแล้วแต่ส่วนใหญ่จะใช้โปรแกรม Graphic ทำแต่ที่จริงแล้ว dreamweaver ก็สามารถทำได้เช่นกัน มาดูขั้นตอนการทำกันเลย

การทำ Gradient ภาพโดยใช้ Dream

การทำ Gradient ภาพ บางคนอาจจะรู้จักแแล้วแต่ส่วนใหญ่จะใช้โปรแกรม Graphic ทำแต่ที่จริงแล้ว dreamweaver ก็สามารถทำได้เช่นกัน มาดูขั้นตอนการทำกันเลย

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

1. เปิดเอกสาร หรือสร้างเอกสาร Html ที่เราต้องการทำ Gradient ขึ้นมา ดังภาพ



2. จากนั้นให้เราทำการสร้าง CSS Style ขึ้นมาก่อน โดยมีขั้นตอนดังนี้
     2.1 คลิกขวาที่พื้นที่ว่างในหน้าจอจะมีเมนูขึ้นมาให้เราเลือก Css Styles --> New Css Style ดังภาพ



     2.2 จะมีหน้าต่าง New Css Style แสดงขึ้นมาให้เราใส่ชื่อ gradient ดังภาพ



     2.3 เลือก Extensions --> Alpha ดังภาพ



โดยมี Properties ที่เกี่ยวข้องดังนี้
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity = ความจางของภาพ ณ ตำแหน่งเริ่มต้น
FinishOpacity = ความจางของภาพ ณ ตำแหน่งสิ้นสุด
Style = รูปแบบของการทำ Alpha มีอยู่ 4 รูปแบบ
StartX = ตำแหน่งที่ให้เริ่มทำ Alpha แกน X
StartY = ตำแหน่งที่เริ่มทำ Alpha แกน Y
FinishX = ตำแหน่งสิ้นสุดการทำ Alpha แกน X
FinishY = ตำแหน่งสิ้นสุดการทำ Alpha แกน Y

ค่าที่ผมกำหนดใน Css มีดังนี้
Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=500)
3. หลังจากที่เราได้ Css แล้วก็มาถึงขั้นตอนการนำไปใช้ เริ่มต้นให้เรา Insert ภาพลงมาในเว็บเพจของเรา ดังภาพ
* ในที่นี้ผมใช้ภาพขนาด 500x500 px



4. จากนั้นให้เรานำ Mouse ไปคลิกที่รูปภาพ หลังจากนั้นเลือก Quick Tag Editor ที่ Properties ดังภาพ



5. จากนั้นตบแต่ง Background ให้เข้ากับภาพแล้วลอง Preview ดังภาพ

การเปลี่ยน Title ของเว็บเพจ

การเปลี่ยน Title ของเว็บเพจ จริงๆ แล้วก็เป็นเทคนิคที่ช่วยให้ Search Engine หาเว็บเราเจอ และเป็นการสื่อกับผู้เยี่ยมชมเว็บของเรา มาดูขั้นตอนการทำ
ขั้นตอนการทำ

1. ทำการเปลี่ยนโดยใช้ Dreamweaver สร้าง / เปิดเอกสารที่เราต้องการแก้ไข จากนั้นเปลี่ยน Title ได้จากเมนู Title ด้านบนได้เลย ดังภาพ



2. แก้ไขโดย Text Editor ในที่นี้ผมใช้โปรแกรม Edit Plus ให้ใช้โปรแกรม Edit Plus เิป็ดไฟล์เอกสาร Html หรือไฟล์เว็บเพจชนิดอื่นๆ จากนั้นแก้ไขได้จาก Tag Title ดังภาพ

การกำหนด Background ให้อยู่กับที่

การกำหนด Background ให้อยู่กับที่ เป็นการเพิ่มลูกเล่นให้กับเว็บอีกแบบหนึ่ง โดยปกติแล้วพื้นหลังที่เราใส่กันทั่วไปจะเคลื่อนที่ตามหน้าเว็บยิ่งถ้าเป็น Background แบบสีฉูดฉาดดูแล้วเวียนหัวหน้าดู ก็มาลองดูวิธีการทำ Background อีกวิธีครับ
ขั้นตอนการทำ
1. เตรียม Background ที่เราต้องการจะใส่ภายในเว็บ (จะดาวน์โหลดจากเว็บเราก็ได้นะครับ) ดังตัวอย่าง

2. เปิดหน้าเว็บ หรือทำการสร้างเอกสารขึ้นมา ดังภาพ

3. สร้าง Css Style ขึ้นมาโดยใ้ช้ Tag Html ดังตัวอย่าง
     3.1 คลิกขวาที่พื้นหลังเลือก Css Style --> Edit Style Sheet

     3.2 เลือกชนิดของ Css เป็น "Redefine HTML Tag" และ Tag เป็น "body"

     3.3 จากนั้นจะมีหน้าต่าง Style ขึ้นมาให้เรากำหนด ดังภาพ
          Background Image = รูปภาพที่เราต้องการใส่ภายในเว็บ
          Attachment = ข้อกำหนดที่เราจะใส่ลงไป

4. ลอง Preview ดูครับแต่จะไม่เห็นความเปลี่ยนแปลงจะต้องมีข้อมูลยาวกว่าหน้าที่แสดงผลนะครับถึงจะ Scroll ได้
* ความเห็นเพิ่มเติมถ้าคนที่ใช้ Dream 4 ที่ติดตั้งไทยบางตัวจะเขียน Css Body ให้แล้วให้เราเรียกขึ้นมาแก้ไขได้เลย ขอให้สนุกกับการทำเว็บครับ

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

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

เคล็ดไม่ลับ Dreamweaver : spacebar ง่ายเหมือนทำเอกสาร Word

นี่เป็นบทความแรกของเขา Mr.K ในเว็บไทยดีดีแห่งนี้ เพราะเข้ามาแล้วสนใจครับ พอดีมีการรับบทความจากทางบ้าน พอดีนึกขึ้นได้ว่ามีเทคนิคครับ เลยเอามาให้ดูกัน ในโปรแกรม Dreamweaver การเว้นวรรคนั้น ตามกฎของภาษา html เราสามารถเว้นวรรคได้แค่ 1 ช่องไฟเท่านั้น ไม่สามารถทำได้มากกว่านี้ ถ้าจะทำก็ต้องใช้อักขระพิเศษคือ   ซึ่งถ้าเรามัวมาใส่แต่อักขระนี้ เราคงเหนื่อยตายแน่ครับ Dreamweaver จึงมีทางออกโดยสร้างปุ่มขึ้นมาชื่อว่า Non Breaking Space ซึ่งมีหน้าตาแบบนี้ครับ ซึ่งทำให้เราสามารถเว้นวรรคมากกว่า 1 บรรทัดได้ แต่ถ้ามัวมากดถี่ๆ ก็เมื่อยมือนะครับ เลยมีคีย์ลัดคือ Ctrl + Shift + Spacebar แต่ว่าผมได้มีวิธีการสำหรับ spacebar หลายๆบรรทัด โดยไม่ต้องกดปุ่ม หรือกดคีย์ลัดคือ Ctrl + Shift + Spacebar อีก อยากรู้ใช่มั๊ยครับ ไปดูเลยครับ ตอนการทำ

ขั้นตอนการใช้งาน
1.เปิดโปรแกรม Dreamweaver ตามปกติ เลือกเอกสารมาสักหน้าหนึ่ง (หรือถ้าคุณกำลังสร้างเว็บเพจอยู่พอดีก็ทำได้ครับ)

2.เลือกไปที่ Edit -->Preferences หรือกดคีย์ลัด Ctrl + U ก็ได้

3.ที่แถบ Category เลือกไปที่ General

4.ติ๊กถูกที่ช่องว่างหน้าประโยคว่า Allow multiple consecutive spaces. แล้วคลิ๊ก OK แค่นี้คุณก็สามารถ spacebar เหมือนพิมพ์งาน word ได้แล้ว