วันอังคารที่ 5 กรกฎาคม พ.ศ. 2554

การใช้ dreamweaver 8

การใช้ dreamweaver 81. 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 เพื่อยืนยัน

8. หน้าต่าง Application ที่ติดต่อฐานข้อมูลเรียบร้อยแล้ว
ข้อมูลจาก : http://www.cannot.info/
เทคนิคการติดต่อฐานข้อมูลใน Dreamweaver MX โดยใช้ Appserv เป็น Webserver ให้ติดต่อกับฐานข้อมูล MySQL มีหลายคนถามถึงมาว่าเราจะติดต่อได้อย่างไรใครที่มีปัญหาอยู่อ่านบทความนี้ได้เลยครับ
ขั้นตอนการใช้งาน
3.
ต่อมาเราต้องมั่นใจว่า webserver เราใช้ได้ หลังจากนั้นให้เราเลือกที่เครื่องมือ Databases
 
 4. หลังจากนั้นเลือกฐานข้อมูลที่เราต้องการในที่นี้ผมเลือก test                                     
5. เพียงเท่านี้เราก็สามารถใช้ฐานข้อมูลบน Dreamweaver ได้แล้วครับ
                                                

Template ประกอบด้วย ข้อมูลในบริเวณพื้นที่ ที่สามารถแก้ไขได้ และ ข้อมูลบริเวณพื้นที่ ที่ไม่สามารถแก้ไขได้ สะดวกในการปรับปรุง หรือเปลี่ยนรูปแบบ ในเวลาอันรวดเร็ว ขั้นตอนการสร้าง ( ก่อนอื่นควรสร้าง SiteMap ก่อน ดูหัวข้อ สร้าง Site Map )
1.
ออกแบบเอกสาร HTML เป็นที่เรียบร้อย เลือก Save เป็น Save As Template
2.
จะปรากฏหน้าต่าง Save As Template
     Site
คือชื่อไซค์ ที่ได้ SiteMap ไว้แล้ว
     Existing Templates
ชื่อ Template ใน SiteMap
     Save As
ชื่อที่ตั้งขึ้นใหม่
3.
เมื่อ เลือก SiteMap และตั้งชื่อFile แล้ว จะเป็น ไฟล์นามสกุล .dwt ใน Folder ชื่อ Templates

4. สร้างพื้นที่สำหรับแก้ไขได้ โดยคลิกปุ่ม Editable Region ที่แท็บ Template
5.
จะปรากฏหน้าต่าง New Editable Region ขึ้นมา
6.
ตั้งชื่อ บริเวณที่ แก้ไขข้อมูลได้ ในช่อง Name แล้วคลิกปุ่ม OK
7. จะปรากฏ Code เกิดขึ้น ในมุมมองทั้งส่วน Show Code และส่วน Show Design
8.
ทำซํ้าอีก ถ้าต้องการสร้างพื้นที่ส่วนที่แก้ไขได้ ตั้งแต่ข้อ 4-7 แล้ว Save
9.
เสร็จสิ้นขั้นตอนการสร้าง Templates
10.
การสร้างเอกสาร HTML ใหม่ เพื่อเรียกTemplates มาใช้ เลือก File > New
11. จะปรากฏหน้าต่าง New Document ที่แท็บเลือก Templates และกดปุ่ม Create
12.
เมื่อสร้างใหม่จะเห็นพื้นที่ในส่วน แก้ไขไม่ได้้ เป็น สีเทา ( พอยน์เตอร์ จะเป็นรูปวงกลม )
13.
พื้นที่แก้ไขได้ จะเป็นสีเขียว ในมุมมองของ Show Design View
14.
ถ้าต้องการเปลี่ยน File ที่เรียกจาก Templates เป็น HTML เลือกเมนู Modify > Templates > Detach from Templates
ข้อควรระวังในการ Upload ข้อมูลผ่าน Dreamweaver ควรจะทำการสร้าง site ให้เรียบร้อยก่อน ขั้นตอนการทำ
1.
คลิกที่ Icon ถ้าในกรณีที่ยังไม่ได้มีการกำหนดค่า FTP จะขึ้นหน้าต่าง Site Definition for .... ให้เลือก Category -> Romote Info
2. จากนั้นทำการกำหนดค่าต่างๆ ดังนี้


3. เมื่อกำหนดค่าเสร็จเรียบร้อยแล้ว ให้ลองทำสอบการเชื่อมต่อ โดยการกดปุ่ม Test ถ้าสำเร็จจะขึ้นข้อความดังภาพ

ในกรณีที่การเชื่อมต่อล้มเหลว จะขึ้นข้อความดังนี้



4. ตรวจสอบชนิดของไฟล์ โดยกดที่ document type ที่หน้าต่าง Databases
2.
หลังจากนั้นทำการตรวจเช็คว่า Site, document type, testting server ทำงานหรือยังโดยสังเกตุที่เครื่องหมายถูกที่เมนู Databases ถ้าไม่ได้อ่านบทความในเรื่องนั้นๆ นะครับผมได้เขียนไว้แล้ว                                                   

3. หลังจากที่ทุกอย่างพร้อมให้เราเลือกที่เครื่องหมาย เลือก Mysql Connecttion หลังจากนั้นจะมีช่องให้เรากรอกเงื่อนไข Database
* ให้ลองตรวจสอบ user / pass ที่ผู้ให้บริการให้มาอีกครั้ง หรือ FTP Host
4.
จากนั้นทำการ Upload โดยเลือกโหมดให้เหมาะสมดังนี้
Local view :
สำหรับทำการ upload ข้อมูลขึ้น Server โดยกดที่ Icon
Remote view :
สำหรับ Download ข้อมูลจาก Server ลงมาแก้ไข โดยกดที่ Icon
*
ในขั้นตอนทั้งหมดที่กล่าวมา อย่าลืมทำการเชื่อมต่อ Internet ให้เรียบร้อยก่อนนะครับ

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

1.
เพื่อนๆต้องเปิดหน้าเว็บที่อยาก Lock ขึ้นมาก่อนนะ แล้วนำโค้ดนี้ไปวางในส่วนของ Head นะครับ
<!--www.houvthak.com-->
<SCRIPT language=JavaScript1.2>
<!--
/*
No Right Click
by: CyBerShOlT http://cybersholt.da.ru
*/
if (window.Event) // Only Netscape will have the CAPITAL E.
document.captureEvents(Event.MOUSEUP); // catch the mouse up event
function nocontextmenu() // this function only applies to IE4, ignored otherwise.
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e) // This function is used by all others

{
if (window.Event) // again, IE or NAV?
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</SCRIPT>

2. ถ้าเพื่อนๆงงดูตัวอย่างการวาง Script

<html>
<head>
<title>Un title page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<!--www.houvthak.com-->
<SCRIPT language=JavaScript1.2>
<!--
/*
No Right Click
by: CyBerShOlT http://cybersholt.da.ru/
*/
if (window.Event) // Only Netscape will have the CAPITAL E.
document.captureEvents(Event.MOUSEUP); // catch the mouse up event
function nocontextmenu() // this function only applies to IE4, ignored otherwise.
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e) // This function is used by all others
{
if (window.Event) // again, IE or NAV?
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
3. หลังจากนั้นก็ลองทดสอบดูนะครับ อิอิ ผมว่าคลิกขวาไม่ได้แน่ ติชมกันได้นะครับเผื่อผมเขียนไม่ดี
คุณอยากให้ลิ้งค์ของคุณเปลี่ยนสีได้ใช่มั้ยครับ ลองสร้างโค้ด 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 และเลือกที่ชื่อของลิ้งค์นั้น
ผลลัพธ์เช่น
บทความและรูปภาพจากเว็บไซต์ webthaidd.com
การกำหนด 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 ให้แล้วให้เราเรียกขึ้นมาแก้ไขได้เลย ขอให้สนุกกับการทำเว็บครับ
บทความและรูปภาพจากเว็บไซต์ webthaidd.com
การกำหนด Link Popup หลายคนถามเข้ามาถ้าเราจะให้ Link แล้วกำหนดหน้าที่ Popup ขึ้นมาให้มีขนาดตามที่เราต้องการนั้นทำอย่างไร ใครที่ติดปัญหาแบบนี้ก็มาดูวิธีการทำกันเลย
ขั้นตอนการทำ
1.
สร้างหน้าเว็บที่เราต้องการกำหนด Link ขึ้นมาพร้อมกับเมนูที่เราต้องการ
2. หลังจากนั้นให้เราเลือกเครื่องมือ Behavihor ( Shift+F3) กดที่ปุ่ม เพื่อเลือกเครื่องมือที่ใช้ทำ Popup ดังภาพ
3. หลังจากนั้นจะมีหน้าต่างขึ้นมาให้เรากำหนดเงื่อนไข
URL to Display = กำหนด URL ของเว้บที่เราต้องการ Link
Window Width =
กำหนดขนาดความกว้างของหน้าต่าง Popup
Attributes =
คุณสมบัติของหน้าต่าง Popup ว่าเราต้องการให้มีเครื่องมือ IE ส่วนไหนแสดงมาบ้าง
Window Name =
กำหนดชื่อให้กับหน้าต่าง * ถ้าชื่อซ้ำไม่ว่าผู้ใช้จำเปิดหน้าไหนก็จะ popup เพียงหน้าต่างเดียว แต่ข้อมูลจะเปลี่ยนไปตามนั้นนั้นๆ
Navigation Toolbar  
Menu Bar
Location Toolbar
Scrollbars as Needed
Status Bar
Resize Handles
                                          * กำหนดให้มีการขยายหน้าต่างได้