การสร้างเฟรมเซตในเว็บเพจ

การสร้างเฟรมเซต

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

กำหนดรายละเอียดหน้าต่าง Properties

 Borders กำหนดให้แสดง (Yes) / ไม่แสดง (No) ขอบล้อมเฟรม (Default คือ Yes)

 Border Width กำหนดความหนาของเฟรม ถ้าไม่ต้องการแสดงขอบเฟรม กำหนดค่านี้เป็น 0
 Border Color กำหนดสีของขอบเฟรม
 Column (or Row) and Units กำหนดขนาดของคอลัมน์ หรือความสูงของเฟรม โดยให้เราระบุหน่วยที่ใช้ในช่อง Units
 Pixels หน่วย pixel แม่นยำที่สุด ในการกำหนดขนาด
 Percent หน่วยเปอร์เซ็นต์กับเฟรมอื่นในหน้าต่าง
 Relative หน่วยเปอร์เซ็นต์กับขนาดหน้าต่างบราวเซอร์

รายละเอียดแถบ Properties ของหน้าเว็บในเฟรมย่อย แถบ ของ Panel Group ด้านขวามือของโปรแกรมจะมี เครื่องมือ Advanced Layout ? คลิกเลือกแถบเฟรม ? คลิกส่วนใดส่วนหนึ่งของเฟรม

ปรากฏรายละเอียด หน้าต่าง Properties ของหน้าเว็บในเฟรมย่อย

Frame Name

ตั้งชื่อที่ใช้เรียกเฟรมย่อย ซึ่งต้องอ้างถึงชื่อเฟรม เมื่อมีการเชื่อมโยงกับเฟรมให้ใช้ตัวอักขระเล็กในการตั้งชื่อ
Src
ให้กำหนดชื่อและตำแหน่งเก็บไฟล์เว็บเพจที่จะถูกนำมาใช้ในเฟรม
Borders
กำหนดให้แสดง (Yes) / ไม่แสดง (No) ขอบล้อมเฟรมย่อย (Default คือ Yes)
Scroll
กำหนดให้แสดง (Yes) / ไม่แสดง (No) แถบเลื่อน (Scroll bar) ในเฟรมย่อยAutoให้แสดงแถบเลื่อนเฉพาะ เมื่อมีข้อมูลเกินกว่าที่จะแสดงได้บนหน้าจอ (Default คือ Auto)
No Resize
สั่งให้แสดงขอบเฟรมย่อย หากไม่ต้องการให้มีการใช้เมาส ์ปรับขนาดเฟรมให้เช็คถูกหน้าข้อความนี้
Border Color
กำหนดสีขอบเฟรม
Margin Width Margin Height
กำหนดระยะห่างระหว่างหน้าเว็บในเฟรมย่อยกับขอบเฟรม โดย Margin Width จะวัดจากด้านซ้ายของเฟรม Margin Height จะวัดจากด้านบนของเฟรม

การแทรกเว็บเพจลงในเฟรม

1. เปิดหน้าต่างเฟรมโดยเลือกคำสั่ง Window -->Others --> Frames หรือ กด Shift + F2
2. Click เลือกส่วนของเฟรมที่ต้องการจะแทรกเว็บเพจ
3. Click ที่รูปโฟล์เดอร์ เพื่อเลือกไฟล์เว็บเพจที่ต้องการแทรก
4. เลือกไฟล์ที่ต้องการแทรก ปรากฏหน้าเว็บเพจในเฟรมที่ถูกเลือกไว้

การบันทึกเฟรมย่อย


1. เลือกคำสั่ง File>Save All หรือกดคีย์ คือการบันทึกทุกไฟล์ที่ประกอบเป็นหน้าเว็บเฟรม
2. โปรแกรมจะถามให้บันทึกหน้าต่อไป ซึ่งจะปรากฏเส้นประ รอบ ๆ เฟรมย่อย โดยจะบันทึกจากด้าน ขวาล่าง? ซ้ายล่าง ? ขวาบน ? ซ้ายบน จนครบทุกเฟรมย่อม (ควรต้องชื่อให้เหมาะกับตำแหน่งเฟรม)
หากมีการแก้ไขหรือเปลี่ยนแปลงทุกครั้งต้อง ใช้คำสั่งบันทึก File > Save All Frames

การเชื่อมโยงหน้าเว็บในเฟรม


1. ลากเมาส์เลือกข้อความที่ต้องกำหนดเป็น Link
2. Click mouse ปุ่ม เพื่อเลือกไฟล์ที่จะเชื่อมโยงด้วยในแถบ Properties
3. เลือกไฟล์ที่ต้องการเชื่อมโยงด้วยแล้ว Click ปุ่ม selete
4. กำหนดรูปแบบการแสดงผลบนเฟรมจากช่อง Target ในแถบ Properties ตัวอย่างเราเลือก Main Frame คือ เฟรมที่อยู่ด้านขาวมือ

• _blank เปิดเพจใหม่ขึ้นมา
• _parent แสดงเพจหน้าเดิม โดยจะลบเฟรมออก
• _self แสดงในเฟรมเดียวกันกับที่มีข้อความอยู่
• _top ขยายเต็มหน้าจอ

รูปแบบที่เพิ่มมาจากการเชื่อมโยงปกติ คือ


• mainFrame แสดงเพจใหม่ในหน้า mainframe
• topFrame แสดงเพจใหม่ในหน้า topFrame
• leftFrame แสดงเพจใหม่ในหน้า leftFrame

5. เซฟแล้วตรวจสอบผ่านบราวเซอร์ เมื่อ Click ที่ Link หน้าเว็บเพจที่สามารถเชื่อมโยงได้ จะถูกแสดงในส่วนเฟรมที่กำหนดไว้

การสร้าง ตารางใน Dream weaver

ตาราง (Table)

1. คลิกเมาส์ ตำแหน่งที่ต้องการวางตาราง

2 คลิ๊กที่ปุ่มเครื่องมือสร้างตาราง Insert Table ในแถบ Object ปรากฏ กรอบทำงาน ดังนี้

กำหนดรายละเอียดของตาราง คือ

 Rows จำนวนแถวของตาราง
 Columns จำนวนคอลัมน์ของตาราง
 Width ความกว้างของตาราง กำหนดหน่วยได้ทั้งระบบ % และ Pixel
 Border ความหนาของเส้นขอบรอบตาราง
 Cell Padding ระยะห่างจากขอบข้างในของเซลล์เข้ามาในเซลล์ มีหน่วยเป็น pixel
 Cell Spacing ความหนาของเส้นคั่นระหว่างเซลล์

การลบตาราง
1. คลิกเลือกตารางทั้งตาราง
2. กดปุ่ม Delete

การลบแถว, ลบคอลัมน์


1. คลิกเลือกแถวหรือคอลัมน์ที่ต้องการลบ
2. กดปุ่มขวาของเมาส์ ปรากฏเมนูลัด
3. เลือกคำสั่ง Delete Row หรือ Delete Column

การเพิ่มแถว


1. นำเมาส์ไปคลิกในเซลล์สุดท้ายของตาราง
2. กดปุ่ม Tab จะได้แถวใหม่ต่อจากแถวสุดท้ายของตารางโดยอัตโนมัติ

การแทรกแถว/คอลัมน์

1. คลิกเลือกแถวหรือคอลัมน์ที่ต้องการแทรก
2. กดปุ่มขวาของเมาส์ ปรากฏเมนูลัด
3. เลือกคำสั่ง Insert, Row หรือ Insert Column หรือ Insert Rows or Columns

การปรับแต่งอื่นๆคลิ๊กที่ properties

ตารางแข่งขันฟุตบอลโลก 2010

เอามาฝากสำหรับคอบอล ตารางบอลโลก2010 ใครที่ยังไม่มีโหลดได้เลยจ้าา  ตารางบอลโลก

รวม เทคนิคการใช้ Photoshop

BG ลายน้ำกระเพื่อม

• เปิดไฟล์ภาพใหม่ กำหนดขนาดต้องการ โดยกำหนดโหมดภาพเป็น RGB

• เลือกสี Foreground เป็น น้ำเงินหรือฟ้า และ Background เป็นขาว เติมสีลงไปในภาพด้วยคำสั่ง Edit > Fill > Foreground Color
• ทำให้เป็นลายผสมแบบท้องฟ้าสีฟ้า ด้วยคำสั่ง Filter > Render > Clouds
• สร้าง Effect แบบน้ำกระเพื่อมด้วยคำสั่ง Filter > Distort > Ocean Ripple กำหนดค่าตามต้องการ แล้ว OK

การทำลิงค์ (Link) ในdreamweaver mx

การทำลิ้งค์มี 2 แบบ คือ 1 การทำลิงค์ไปยังเว็บไซต์อื่น วิธีการคือจะต้อง ระบุชื่อโดเมนที่เราจะลิ้งค์ไป เช่น ทำการลิงค์ไปที่ google ต้องระบุคือ http://www.google.com/ ถึง จะสามารถลิงค์ได้  ลิ้งค์แบบนี้เรียกว่า  Absolute Link

2 การทำลิ้งค์ภายในเว็บไซต์ มีวีธีทำหลายวิธีสามารถเลือกทำได้ เรียกว่า Relative Link 

วิธีการทำลิงค์ให้กับเว็บไซต์

การทำลิ้งค์ข้อความ 

เปิดโปรแกรม dreamweaver ขึ้นมา จากนั้น ลองพิมพ์ข้อความที่ต้องการสร้างลิ้งค์  แล้วลากเม้าส์คลุมตัวอักษรไว้ มาที่แถบ Properties ด้านล่าง  ที่คำว่า Link เพื่อนสามารถใส่ URL  ที่เพื่อนต้องการให้สิ้งค์ไปได้เลย  แต่หากเพื่อนๆต้องการ ทำลิ้งค์ภายในเว็บไซต์ เพื่อนๆต้องสร้างไฟล์ที่เป็นเป้าหมายที่ลิงค์ไป ไว้ก่อน จากนั้นคลิ๊กที่ปุ่มรูปโฟลเดอร์ ดังรูปตัวอย่างที่ลูกศรชี้

จากนั้น เลือกไฟล์ที่ต้องการลิ้งค์ไป แล้วกดOK    Save แล้วทดสอบด้วยการกดF12

การทำลิงค์เมล์ (E-mail Link)


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

ต้องพิมพ์ที่อยู่ E-mail Address ของเจ้าของเว็บไซต์ เพียงพิมพ์ข้อความติชมเท่านั้น โดยหลังจากคลิกลิงค์เมล์

Browser จะเปิดโปรแกรมส่งเมล์ให้โดยอัตโนมัติ ส่วนมากถ้าเป็น IE จะเปิดโปรแกรม Microsoft Outlook ให้

วิธีลิงค์เมล์

• พิมพ์ข้อความที่ต้องการลิงค์ไปยัง E-mail เช่น Email หรือ คำว่า ”Contact me”

• จากนั้นให้ป้ายทับ E-mail Address และมาที่ Properties inspector ในช่อง Link ให้พิมพ์
E-mail Address ที่ต้องการทำลิงค์ เช่น mailto:youre-mail@hotmail.com
 
เลือก Object ที่ Email Link ภายในแท็บ Insert ดังรูป
 
 

จะปรากฎDialog Box  ดังรูป

กำหนดค่าลงไป  text ก็ใส่รายละเอียดลงไป  E-mail ให้ใส่ที่อยู่ของเมล์ แล้วกด OKแล้ว SAVE

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

การทำลิ้งค์บางส่วนของภาพ หรือ การทำ Image Map

    เมื่อเราทำภาพลงไปในเว็บไซต์ แล้วต้องการทำลิ้งบางส่วนของภาพนั้น ทำได้โดย การใช้ Image Map     ยกตัวอย่างภาพทีมนักเตะสเปน ชุดลุยแชมป์ฟุตบอลโลกปี 2010  และต้องการทำลิงค์แต่ละคนเพื่อให้ลิ้งไปยังประวัติของแต่ละคน ( ยกตัวอย่างนะ )

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

2 พิมพ์ข้อความลงในช่อง Link ว่าต้องการทำลิงค์อะไร เช่น ลิงค์ไปยังเว็บไซต์ รูปภาพ อีเมล์

3กำหนด Target คือ เมื่อคลิกขอบเขตที่กำหนดเป็นลิงค์แล้ว จะปรากฏที่หน้าจอใด สิ่งมีอยู่ 4 แบบ คือ

_blank เปิดหน้าเว็บขึ้นมาใหม่ _parent จะอยู่หน้าหลักของเว็บกรณีที่ใช้เฟรมออกแบบ _self แทนที่
หน้าเว็บเดิมที่เปิดอยู่ _top จะอยู่ด้านบนของหน้าเว็บกรณีที่ใช้เฟรมออกแบบ เลือกแบบใดแบบหนึ่งก่อนก็ได้
4 Save แล้วกด F12 เพื่อแสดงผล ทดสอบโดยนำเม้าส์ไปวาง ตำแหน่งที่ทำลิ้งค์ไว้ ก็จะลิงค์ไปยังที่ที่เรากำหนด
เสร็จแล้วหละครับ.....

การสร้างปุ่มแฟลชจาก Dreamweaver

    เพื่อนหลายคนที่ไม่มีความชำนาญในการใช้โปรแกรม Flash แต่อยาจะมี Flashเข้ามาตกแต่ง เว็บไซต์ของตัวเองบ้าง ทำไงดี ความสามารถของ Dreamweaver นั้น สามารถทำได้เหมือนกัน

เปิดโปรแกรม Dreamweaver ขึ้นมา แล้วไปที่ เมนู Insert > Media  จะปรากฏเมนูดังนี้

สังเกตุ 3เมนูแรก นั้นแหละที่เราจะใช้งาน ปุ่มแรก ไว้สำหรับ เพื่อนๆที่มี ชิ้นงานไฟล์Flasn อยู่แล้วก็สามารถนำมา Import ได้ที่ปุ่มนี้เลย แต่ในส่วนที่เราจะพูดถึงวันนี้ก็คือ ปุ่มที่สอง Flash Button

พอคลิ๊กเข้าไปจะปรากฏหน้าจอดังนี้

ใส่ข้อความที่เพื่อนๆต้องการได้เลยครับ   ปรับแต่งตามความต้องการ เช็คความเรียบร้อยให้ดีนะ เพราะ เมื่อกดปุ่ม OK เพื่อสร้างข้อความแฟลชแล้วจะไม่สามารถแก้ไขได้ ต้องสร้างข้อความใหม่เท่านั้น

การเพิ่มช่องว่างเว้นวรรคใน Dreamweaver

    การเพิ่มช่องว่าง เว้นวรรคระหว่างตัวอักษรนั้น หลายคนที่ใช้ Dreamweaver ใหม่ๆนั้นจะพบว่า พอกด space bar มันเว้นได้ แค่ช่องเดียวเท่านั้น ทำยังไงดี    ให้เพื่อนๆ กด Control+Shift+Space bar พร้อมๆกันมันก็จะเว้นวรรคได้ตามใจของเพื่อนๆ มันคือคำสั่ง Non-Breaking Space นั้นเอง หรือจะเข้าไปที่แถบเมนู

Insert Bar ด้านบน แล้วเลือก Character  จะปรากฏปุ่ม Non-Breaking Space ขึ้นมา

การเปลี่ยน template joomla

     ติดค้างมานานสำหรับเรื่องของการทำ joomla  ว่าจะเขียน ตั้งหลายรอบแต่ก็ไม่ได้ฤกษ์งาม ยามดีซะที วันนี้เลยมาแนะนำ หลังจากที่เราติดตั้ง joomla เสร็จ จำไม่ได้ก็ย้อนกลับไปดู การติดตั้ง joomla เอานะครับ ก็เห็นหน้าตาของเว็บไซต์เราที่แสนจะธรรมดา ทำไงดีถ้าไม่อยากซ้ำกับคนอื่นเข้า ก็เปลี่ยนมันซะเลย      การเปลี่ยน template   เริ่มต้นโดยการ หา template จากในอินเตอร์เน็ต ฟรีๆเยอะเลยครับ หรือ หาจาก เว็บนี้ที่ผมแนะนำ      Free  template  เยอะแยะมากมาย พอเลือกได้ซักหนึ่งอัน เปิดไปยังให้เพื่อน login ไปที่หน้า Back and       ตามนี้นะ http://localhost/joomla/administrator/  จากนั้นก็ใส่รหัสของเพื่อนๆลงไป จากนั้นก็เลือก Extensions >>install/Uninstall

วิธีนี้ ยังเป็นวิธืเดียวกับการติดตั้ง  Extensions และ Plugin ต่างๆของjoomla  ด้วยนะ ก็จะมาโผล่หน้านี้

จากนั้นเพื่อนก็กดปุ่่ม Browse แล้วก็เลือก template ที่เพื่อนๆโหลดมา ที่เป็นไฟล์ Zip แล้วก็กด Upload file เลย

จากนั้นเมื่อ Upload เสร็จแล้ว ก็ให้เพื่อนๆไปที่ เมนู Extensions >>Template Manager ข้างบนอะ

ก็จะมาโผล่หน้าตามรูปข้างล่างนี้

มองหาชื่อ Template ของเพื่อนๆ ติ๊กช้องข้างหน้า ชื่อ  แล้วกด  Default ด้านขวามือ

บน  จากนั้นก็ลองเรียก http://localhost/joomla ของเพื่อนๆดู หน้าตาของ Template ก็จะเปลี่ยนไป

เป็นไง ถ้าอยากได้  Template สวยๆก็หาโหลดมา ติดตั้งได้เรื่อยๆเลย แต่ถ้าใครอยากสร้าง Template เองไม่ซ้ำแบบใครละก็ วันหลังจะมาแนะนำเครื่องมือ การสร้าง Template ให้นะ วันนี้แค่นี้ก่อนน สวัดดี

แจก โค็ด และ สคริป ในการทำเว็บ

แจกๆๆๆ ไปเจอมา โหลดไปใช้กันตามใจชอบ อิอิ เห็นว่าจำเป็นสำหรับการทำเว็บไซต์ แต่เขียนโปรแกรมไม่เป็น หือ..  
ทำ Gallery random ภาพ พร้อมวิธีใช้              ดาวน์โหลด   (เครดิต http://www.codetukyang.com/php )

รวม java script                                                ดาวน์โหลด

สคริปโปรโมทเว็บ                                           ดาวน์โหลด

ทำเว็บบอร์ด phpBB Version 3.0.1 ภาษาไทย               ดาวน์โหลด

ทำระบบสมาชิก                                              ดาวน์โหลด   (เครดิต http://www.funwhan.com  )

shopping cart     ทำระบบตระกร้า                    ดาวน์โหลด


ไปละ เดวถ้าเจออะไรดีๆก็จะเอามาฝากกันอีกนะครับ

การทำรูปถ่ายให้เป็นรูปวาดลายเส้น

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

โหลดได้จาก ที่นี่ เลยจ้า   วิธีใช้ก็ง่ายแสนง่ายติดตั้งแล้วเปิดโปรแกรมขึ้นมา เปิดรูปที่เราต้องการจะทำ

จากนั้นไปที่เมนู Cartoon >> เลือก into cartoon เพียงเท่านี้ รูปภาพของเราก็จะกลายมาเป็นรูปภาพลายเส้น ก็สวยไปอีกแนวนะครับ ดู ปู่โย แก่ไปเลย พี่ตอ ก็เท่ไปอีกแบบ อิอิ

ทำให้ Dreamweaver ใช้ภาษาไทยได้

    ก่อนอื่น เพื่อนๆต้องติดตั้ง ฟอนต์ภาษาไทย Thai addon ก่อน  ใครที่ยังไม่มี โหลดได้จาก ที่นี่  เมื่อเพื่อนๆโหลด thai addon มาเสร็จเรียบร้อยแล้ว ก็ทำการแตกไฟล์ แล้วคลิ๊กติดตั้งเลย เมื่อทำการติดตั้งแล้ว ที่โปรแกรม Dreamweaver ให้เลือกคำสั่ง Edit > Preferences และเลือก Fonts เพื่อกำหนดภาษาและชุดตัวอักษร โดยในช่อง Font Settings ให้เลือก THAI Windows-874

ถ้ายังใช้งานภาษาไทยไม่ได้ ให้เพื่อนทำตามนี้เลย

 1.เข้าไป set font ใหม่ โดยไปที่ menu >> edit >> preferences >> แล้วเลือกไปที่หมวด fonts >> ละก็ดูในส่วนของ font setting >> ให้เราเลือก Thai Windows-874 >> แล้วเลือก font ที่สามารถไช้ภาษาไทยได้ แล้วกด ok

(สำหรับ tis-620 ก็ให้ทำเหมือนกัน โดยให้เปลี่ยนจาก Thai Windows-874 เป็น Thai Tis-620)
2. menu >> modify >> page properties >> ตรง document encoding ให้เปลี่ยนเป็น Thai Windows-874 หรือ Thai Tis-620 ก็ได้ (ie ควรเป็น windows-874) ละก็ ok
3. ถ้าต้องการตั้งค่าเวลาสร้างเอกสารใหม่แล้วให้ encoding เป็น windows-874 หรือ tis-620 โดยอัตโนมัติ ให้ตั้งค่าตามนี้
ไปที่ menu >> edit >> preferences >> แล้วเลือกไปที่หมวด new document >> แล้วก็เลือก defauil encoding เป็น Thai Windows-874 หรือ Thai Tis-620 แล้วแต่จะใช้ครับ