การ Upload ข้อมูลผ่าน Dreamweaver

ข้อควรระวังในการ Upload ข้อมูลผ่าน Dreamweaver ควรจะทำการสร้าง site ให้เรียบร้อยก่อน
ขั้นตอนการทำ

1. คลิกที่ Icon ถ้าในกรณีที่ยังไม่ได้มีการกำหนดค่า FTP จะขึ้นหน้าต่าง Site Definition for .... ให้เลือก Category -> Romote Info



2. จากนั้นทำการกำหนดค่าต่างๆ ดังนี้





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



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



* ให้ลองตรวจสอบ user / pass ที่ผู้ให้บริการให้มาอีกครั้ง หรือ FTP Host

4. จากนั้นทำการ Upload โดยเลือกโหมดให้เหมาะสมดังนี้

Local view : สำหรับทำการ upload ข้อมูลขึ้น Server โดยกดที่ Icon
Remote view : สำหรับ Download ข้อมูลจาก Server ลงมาแก้ไข โดยกดที่ Icon

* ในขั้นตอนทั้งหมดที่กล่าวมา อย่าลืมทำการเชื่อมต่อ Internet ให้เรียบร้อยก่อนนะครับ มิฉะนั้นจะไม่สามารถอัพโหลดลงได้นะครับ
ขอขอบคุณรูปภาพจาก www.webthaidd.com

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

การทำโฆษณาแบบพับเก็บได้
ขั้นตอนการทำ
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ให้กับรุปภาพตามปกติ

7. จากนั้นก็ลองทดสอบการทำงานดูครับ

ขอขอบคุณรูปภาพจาก www.webthaidd.com

การทำ Favorites icon

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

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



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

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

เปิดเว็บไซต์หลังจากที่ Favorites ก็จะได้ผลดังภาพ

ขอขอบคุณรูปภาพจาก www.webthaidd.com

วิธีการทำ 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 และเลือกที่ชื่อของลิ้งค์นั้น


ขอขอบคุณรูปภาพจาก  www.webthaidd.com

การสร้างเงาให้ตารางใน 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ก็จะเห็นเมนูมีลักษณะมีเงาลอยออกมาจากพื้นดังตัวอย่าง ก็เป็นอันเสร็จ.

ขอขอบคุณรูปจาก www.webthaidd.com

ใช้ได้กับทุกเวอร์ชั่นนะครับ

วิธีใช้ DREAMWEAVER 8 บทที่1

วิธีใช้ DREAMWEAVER 8 บทที่1

สำหรับการเรียนรู้วิธีการสร้างเว็บไซต์ด้วยตนเองในวันนี้ จะเริ่มจากบทที่ 1 คือการกำหนดLocal site และการสร้างหน้าแรกของเว็บไซต์ สำรวจความพร้อมของเรากันสักนิด 
~คอมพิวเตอร์ติดตั้งโปรแกรม DREAMWEAVER 8 เรียบร้อย
~มีอินเตอร์เน็ตสำหรับการค้นหาข้อมูลและภาพประกอบ
~คุณสมบัติของผู้ที่จะทำ ใจรักมีความสนใจ มีความรู้พื้นฐานคอมพิวเตอร์ใช้งานอินเตอร์เน็ตเป็น
ขั้นตอนแบบstep by step (การกำหนด Local site) ก็คือโฟลเดอร์ในเครื่องที่จะเก็บข้อมูลเว็บไซต์เรานั้นเอง
1 เปิดโปรแกรม DREAMWEAVER ขึ้นมาตามภาพ จากนั้นไปที่เมนู site >> New Site

2 กำหนดชื่อของเว็บไซต์ ตามตัวอย่างผมใส่ Golopburi ,และช่อง http address (ชื่อของเว็บเราแบบทางการที่จะให้ผู้ใช้งานเข้ามาดู) ให้เรากรอกเข้าไปตามโดเมนเนมที่เรามีอยู่ แต่ถ้าไม่มีหรือยังไม่ได้จด ก็คลิก Next ต่อไปได้เลย

3 ในขั้นตอนนี้ให้เราคลิก Next ต่อไปได้เลยครับ

4 การกำหนดเส้นทางทีจะไปยังโฟลเดอร์ที่จะเก็บข้อมูลของเรา ให้คลิกสัญญลักษณ์แฟ้ม เพื่อเข้าไปเลือก หรือสร้างโฟลเดอร์รองรับข้อมูลเว็บไซต์ของเรา ตามตัวอย่างผมกำหนดไว้ที่ไดร์ฟ c:\Golopburi ,จากนั้นคลิก Next

5 จะถามเกี่ยวกับ Host FTP สำหรับให้เราupload ไฟล์ข้อมูลขึ้นไปเพื่อให้แสดงบนอินเตอร์เน็ต ถ้าเรายังไม่มีข้อมูลเว็บโฮสต์ในขั้นตอนนี้ ก็เลือก None ,และคลิก Next ผ่านไปก่อน แล้วเราค่อยมากำหนดทีหลังได้

6 ภาพแสดงข้อมูลการกำหนดค่า Local site ของเราเสร็จเรียบร้อย ,คลิกDone

7 การสร้างหน้าแรกของเว็บไซต์ ให้ไปที่เมนู File>> New

8 ให้เลือก Page Design(CSS) ,Halo Left New ตามภาพตัวอย่าง ,คลิก Create

9 จะให้เราบันทึกซื่อไฟล์ ให้เรากำหนดเป็น index ,คลิก save

10 รูปแบบไฟล์ที่เราเลือกต้องการส่วนประกอบเพิ่มเติม เพื่อการทำงานที่ถูกต้อง ให้เราคลิกCopy ได้เลยครับ

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

หมายเหตุ: ใช้ได้กับทุกเวอร์ชั่นนะครับ

ปลาการ์ตูน

ปลาการ์ตูน