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

การทำ 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 ได้แล้ว

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

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

ขั้นตอนการแก้ไข

1. เปิดโปรแกรม Dreamweaver 8 ดังภาพ

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

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

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

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

การค้นหา และแทนที่คำในเอกสาร Web Page

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

เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม
เว็บไทยดีดี ดอท คอม

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



4. จากนั้นกดคีย์ลัด Ctrl+F จะมีหน้าต่าง Find and Replace ดังภาพ



5. จากนั้นให้เราใส่ข้อความที่เราต้องการแทนที่ลงในช่อง Replace ดังภาพ



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

webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com
webthaidd.com

1. เิปิดเอกสารที่เราพิมพ์ข้อมูลผิดขึ้นมา
2. จากนั้นเราจะเห็นข้อมูลที่เราต้องการแก้ไข ในที่นี้ผมจะยกตัวอย่างคำดังภาพ "เว็บไทยดีดี ดอท คอม"

การสร้าง Site Dreamweaver ให้ใช้กับฐานข้อมูล Mysql ได้

หลายคนอาจจะสงสัยว่าจะสร้าง Site ให้กับ Dreamweaver เพื่อใช้งานกับ php และฐานข้อมูล mysql ได้อย่างไร ดังนั้นเรามาดูการสร้างไซต์ เพื่อเป็นพื้นฐานในการเขียนโปรแกรมในขั้นต่อไป

ขั้นตอนการทำ
1. สร้าง Folder สำหรับเก็บข้อมูลเว็บไซต์ ในที่นี้ผมสร้าง Folder Test ดังภาพ



2. จากนั้นทำการ Define Site มาที่ Folder ที่เราสร้าง ดังภาพ


3. ให้เราเลือกที่หน้าต่าง Databases สังเกตุว่าโปรแกรมติ๊กถูกอยุ่ 2 อันที่ Site ดังนั้นเราจะต้องทำ Testting Server ด้วยถึงจะใช้งานได้



4. กำหนดค่าให้กับ Testting Server ดังภาพ

การ ทำ link เปลี่ยน สี

วิธีการทำ link ที่สามารถเปลี่ยนสีได้
คุณอยากให้ลิ้งค์ของคุณเปลี่ยนสีได้ใช่มั้ยครับ ลองสร้างโค้ด CSS ตัวนี้ไปติดกันเลยครับ
<STYLE type=text/css>
.link_12_dark_blue:link {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 15px;
text-decoration: none;
color:#0066CC;
}
.link_12_dark_blue:visited {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 15px;
text-decoration: none;
color:#0066CC;
}
.link_12_dark_blue:active {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 15px;
text-decoration: none;
color:#0066CC;
}
.link_12_dark_blue:hover {
font-family: MS Sans Serif, Tahoma, sans-serif;
font-size: 15px;
text-decoration: none;
color:#FF0000;
}
</STYLE>
CSS ตัวนี้มีหน้าที่อะไรบ้าง เรามาทำความเข้าใจกับมันกันดีกว่าครับ

.link_12_dark_blue = ชื่อของ css ที่เราตั้งชื่อให้
link =  ตัวลิ้งค์ ไม่มีการกระทำ
visited = เมื่อลิ้งค์นั้นถูกคลิ๊กไปแล้ว
active =  คณะที่ลิ้งค์นั้นถูกใช้งาน
hover = คณะ ที่นำเมาส์มาวางบนลิ้งค์
font-family: = ชื่อ font ของลิ้งค์ตัวนั้น
font-size = ขนาดของ font
text-decoration = รูปแบบของตัวอักษร ในกรณี ต้องการ ให้ไม่มีการขีดเส้นใต้ให้ใส่  text-decoration: none;
color:#FF0000; = สีของลิ้งค์
วิธีการเรียกใช้งาน
1 ทำลิ้งค์ขึนค้นมา
2 ลากเมาส์คลุมดำที่ลิ้งค์นั้น
3. คลิกขวาที่แท็ก a จากนั้น เลือก set Class และเลือกที่ชื่อของลิ้งค์นั้น

ผลลัพธ์เช่น
http://www.webthaidd.com/

การทำ link ไร้เส้นใต้

คุณเคยประสบปัญหา เรื่องเส้นใต้ที่ลิ้งค์อยู่ใช่มั้ยครับ วันนี้เราจะมาแก้ปัญหานี้ด้วยกันดีกว่าครับ
แค่คุณเอาโค้ด นี้ไปติดไว้และเรียกใช้ปัญหานี้ก็จะหายไปแล้วครับ
text-decoration: none;
สำหรับวิธีการเรียกใช้ ให้เราไปเปิดหน้า Code นะครับ
<a href="http://www.webthaidd.com">http://www.webthaidd.com</a>
โค้ดลิ้งค์ทั่วๆ ไปจะเป็นแบบนี้ใช่มั้ยล่ะครับ วิธีการเรียกใช้คำสั่ง text-decoration: none; ก็ง่ายๆครับ
แค่คุณใส่ style="คำสั่งที่ต้องการ"
ตัวอย่างคำสั่งจริง
<a href="http://www.webthaidd.com" style="text-decoration: none;">http://www.webthaidd.com </a>
ตัวอย่างผลลัพธ์
http://www.webthaidd.com/

การใส่ไฟล์ VDO ใน Dreamweaver

การใส่ File  VDO (.wmv) ลงในหน้า เว็บเพจ โดย Dreamweaver
คุณเคยเห็นเว็บไซด์ หลายๆ เว็บมี VDO หน้า เว็บกันใช้มั้ยครับ วันนี้เราเอามาใส่กันบ้างดีกว่า
ง่ายๆ ครับ แค่ ไป ที่ Insert > media > Plugin  และ หา ไฟล์ที่เป็น .wmv มาลง

การนำ รูปภาพมาเป็น ปุ่ม 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 ขึ้นมาเพื่อให้หารูป ภาพ

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

ขั้นตอนการสร้าง Site Map

ขั้นตอนการสร้าง Site Map

การสร้าง Site Map เพื่อตรวจสอบสภาวะการเชื่องโยง เช็คลิ้งค์ ในเวบเพจ แต่ละหน้า และการจำลองหน้าเวบ ก่อน Upload ไปที่ Server

ขั้นตอนที่ท่านดู ใช้ Dreamweaver MX
รูปแบบ ขั้นตอน บางส่วน อาจจะไม่เหมือน หากท่านใช้ Dreamweaver Version ต่างจากนี้
1. คลิกเมนู Site เลือก New Site ใน โปรแกรม Dreamweaver



2. ปรากฎหน้าต่าง Site Definition เลือก แท็บ Advanced
3. Local info
    Site Name ตั้งชื่อ Site
    Local Root Folder เลือกชี้ไปที่ Directory ที่เก็บ File
    Default Image Folder เลือกชี้ไปที่ Directory ที่เก็บรูปภาพ
    HTTP Address ใส่ URL
    Cache เลือกเพื่อปรับปรุงจุดเชื่อมโยงเวบเพจ

---------------------------------------------------------------------------------------------------------------------------------------------------
* ตั้งแต่ข้อ 4 - 9 จะเลือกเป็นค่า Default ของโปรแกรมก็ได้

4. Remote info 
    Access เลือก FTP โอนย้ายไพล์ข้อมูลผ่าน FTP
    FTP Host ชื่อ URLที่โอนย้ายไพล์ข้อมูล
    Host Directory กำหนด Folder แรกที่เก็บเวบเพจ
    Login ชื่อ User ที่เข้าไปปรับปรุงแก้ไข
    Password รหัสผ่าน ที่เข้าไปปรับปรุงแก้ไข
    Save บันทึกรหัสผ่าน
    Check In/Out ตรวจสอบการปรับปรุง อัตโนมัติ
    Check Out Name ชื่อที่ใช้ ตรวจสอบ
    Email Address อีเมล์ผู้ตรวจสอบ
5.Testing Server
    Server Model รูปแบบ Sever ที่ใช้ทดสอบ
    Access เลือก FTP โอนย้ายไพล์ข้อมูลผ่าน FTP
    FTP Host ชื่อ URLที่โอนย้ายไพล์ข้อมูล
    Host Directory กำหนด Folder แรกที่เก็บเวบเพจ
    Login ชื่อ User ที่เข้าไปปรับปรุงแก้ไข
    Password รหัสผ่าน ที่เข้าไปปรับปรุงแก้ไข
    Save บันทึกรหัสผ่าน
6. Cloaking
    Enable Cloaking กำหนด File และ Folder ที่ซ่อนอยู่ ออกจากไซค์
    Cloak Files Ending With กำหนดนามสกุล File ที่ต้องการซ่อน
7. Design Notes 
    Maintain Design Notes เพื่อผู้ใช้งานร่วมกัน สามารถเปลี่ยนแปลง แก้ไขได้
    Upload Design Notes for Sharing เพื่อผู้ใช้งานร่วมกัน สามารถแบ่งปันข้อมูลได้
8. Site Map Layout 
    Home page กำหนดหน้าแรก
    Number of Columns กำหนดจำนวนคอลัมน์ แสดงผังโครงสร้างเวบ
    Columns Width กำหนดความกว้างคอลัมน์ โครงสร้างเวบ
    Icon Labels กำหนดรูปแบบ โครงสร้างเวบ
    Options กำหนดโครงสร้างย่อย แต่ละไอคอน
9. File View Columns ข้อมูลแสดงที่คอลัมน์ บนผังโครงสร้าง

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



8. เมื่อเรียบร้อยแล้ว กดปุ่ม OK ตัวโปรแกรมจะ Scan หา File ใน Directory



9. กรณี ที่ท่านสร้าง Site Map ไว้หลายไซค์ เวลาเปิดโปรแกรม Dream ก็ควร Edit Site ด้วย

ข้อมูลจาก : 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.2 จากนั้นให้การทำงานอยู่ที่ Table แถวที่2. แล้วให้พิมพ์ข้อมูลลงไปใน Columns ที่1. แล้วใส่Pixels.gif ลงไปใน Columns ที่2. แล้วใสความกว้างของ Columns = 5 ลักษณะ Table ก็จะหดตัวดังตัวอย่าง

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

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