วันอังคารที่ 21 สิงหาคม พ.ศ. 2550

CSS - Cascading Style Sheet


CSS หรือ Cascading Style Sheet คือสิ่งที่คล้ายๆกับโครงสร้างที่กำหนดหลายๆสิ่งไว้ด้วยกันเช่นฟอนท์, สีฟอนท์, สีแบ็คกราวด์ฯลฯ

วิธีใช้คือ จากDreamweaver เหมือนเดิมนะครับ กดที่แถบเมนู Window แล้วCSS Styles

อย่างที่เห็นจะมีหน้าต่างใหม่เปิดขึ้นมาทางด้านขวาๆของจอ ให้กดปุ่มเล็กๆที่เป็นรูป + เพื่อสร้างCSS อันใหม่ วินโดวส์จะมห้กำหนดชื่อ และสร้างชีทอันใหม่ขึ้นมาทันที โดนเราสามารถแก้ไขฟอนท์ บอร์ดเดอร์ ตาราง ฯลฯ ได้ทันที

ส่วนการนำไปใช้ให้ไฮไลท์ข้อความที่ต้องการ แล้วคลิกขวาที่Style Sheet ของเราแล้วกดapply
เป็นอันเสร็จสิ้นครับ








ข้อดีและข้อเสีย...
-ไฟล์จะเล็กลง เพราะมีcodeน้อยกว่าเดิม
-ปรับแต่งได้ง่าย
-สามารถใช้กับเว็บเพจหลายๆหน้าได้ด้วยชีทเพียงอันเดียว
~ผู้ที่ไม่มีฟอนท์ในชีทของเรา จะมองไม่เห็นฟอนท์

วันอังคารที่ 14 สิงหาคม พ.ศ. 2550

Frames, Good or Bad?



คราวนี้จะมาคุยเกี่ยวกับข้อดีและข้อเสียของเฟรมกัน

เริ่มจากข้อดีก่อนนะครับ

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

ข้อเสีย

ถ้าใช้เฟรมไม่เป็น จะทำให้หน้าต่างของเฟรมดูไม่เรียบร้อย และถ้าใส่เฟรมเยอะไป จะทำให้หน้าเว็บเพจเปิดช้าลง

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

ถ้าให้เลือก ผมจะใช้สำหรับการทำเมนู เพื่อเป็นความสะดวกของเว็บเพจของตน

Frames

Generate Your Own Glitter Graphics @ GlitterYourWay.com - Image hosted by ImageShack.us
กลับมาอีกครั้งกับDreamweaverนะครับ คราวนี้ทดลองเกี่ยวกับการใช้เฟรม หรือโครงนั่นเอง
ถ้าให้อธิบายง่ายๆ เฟรมคืออุปกรณ์ที่ใช้แยกหน้าออกเป็นหลายๆส่วน เพื่อความสะดวกในการมอง และแยกหัวข้อออกจากกันฯลฯ
คราวนี้จะมาอธิบายเกี่ยวกับการใช้นะครับ รับรองว่าไม่ยาก
คราวนี้ไม่มีภาพประหอบเนื่องจาก... ภาพใหญ่ไปไม่มีเวลาย่อ


อธิบายคร่าวๆ การสร้างเฟรมสร้างได้จากtab Layout

พอกดแล้ว จะมีออพชั่นให้เลือกเกี่ยวกับเฟรม ว่าจะไว้ด้านไหน อย่างไร และใส่ชื่อของเฟรม

แค่นี้ก็ได้เฟรมอย่างง่ายแล้วครับ

เมื่อสร้างเฟรมเสร็จแล้วจะสามารถเปลี่ยนสี, ขนาดบอร์เดอร์ และสีแบ็คกราวด์ได้ต่างๆ

ลิงค์ต่างๆที่ใส่ในเฟรมสามารถเลือกให้เมื่อกดแล้วจะไปเปิดหน้าต่างใหม่ที่ใดได้เช่นกัน

วันอังคารที่ 7 สิงหาคม พ.ศ. 2550

Quized


สัปดาห์นี้ได้ทำหลายอย่างมาก แต่จะอธิบายรวมๆนะครับ






ตอนแรกได้ลองใช้ Dreamweaver อย่างเคย ในการเรียนรู้เกี่ยวกับคำสั่งต่างๆที่เกี่ยวกับการใช้ Form




หลังจากนั้นได้ลองใช้ Functions ต่างๆที่เกี่ยวกับแบบสอบถามเช่น ปุ่ม, กรอบ, Dropdown Menu, Check Box ฯลฯ




Text Field และ Hidden Field คือการใส่กรอบสำหรับเขียนตัวอักษร ส่วนHidden นั้นจะทำการซ่อนเอาไว้


Text Area คือกรอบใหญ่ๆสำหรับใส่ข้อความที่เยอะๆ


Checkbox, Radio Button, Radio Group คือกล่องสำหรับเช็กถูก, จุดหรือวงสำหรับคลิกเพื่อแสดงว่าตอบข้อใด ฯลฯ, Radio Button หลายๆอันในForm เดียวกัน ตามลำดับนะครับ




ส่วนใหญ่มีแค่นี้ล่ะครับ วันนี้ขอจบแค่นี้ก่อน

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

Progress -----> Improvement



ให้พูดง่ายๆคือครั้งนี้จะสรุปเกี่ยวกับงานที่ทำมานะครับ


Week 1

อาทิตย์แรกเลยจริงๆเป็นการปฐมนิเทศ แต่จะเริ่มจากที่เรียนเลยละกัน โดยที่พวกเราได้สร้างบล็อกไว้ใน http://www.blogger.com/

หลังจากที่แต่ละคนได้สร้างบล็อกเสร็จแล้ว ได้ทำการค้นหาเว็บเพื่อวิจารณ์โดยให้เขียนลงบล็อกของเรา.....จบอาทิตย์1^^


Week 2

หลังจากที่มีบล็อกกันแล้ว ในการทำงานเราจึงได้นำมาเขียนวิธีการลงบล็อก

และงานแรกคือ การอธิบายเกี่ยวกับงาน Graphics Design ซึ่งพวกเราได้ไปหาข้อมูล รูปภาพ และทำการอ้างอิง กันหมดทุกคน

เมื่องานเสร็จจึงไปคอมเมนต์คนอื่น เพื่อฝึกการวิจารณ์ และจะทำต่อไปในงานอื่นๆด้วย


Week 3

งานนี้ได้เริ่มทำงานกัน โดยใช้ Adobe Photoshop นะครับ โดยแต่ละกลุ่มได้มีงานของแต่ละคน และที่ผมทำคือการใช้Filter

นอกจากนี้ก็มีการปรับแสง เพื่อให้ภาพดูสว่าง หรือมืด แล้วนำมาเขียนวิธีทำ+ภาพตัวอย่างที่ทำลงบนบล็อก


Week 4

งานครั้งนี้ ได้เปลี่ยนจากโฟโต้ช็อปมาเป็น Macromedia Dreamweaver ซึ่งก็คือโปรแกรมทำเว็บไซต์นั่นเอง

ที่สอนนั้น มีการสร้างตาราง ซึ่งได้ลองทำตารางทั้งขนาดเล็กและใหญ่ หลายๆขนาด ไว้ โดยมีข้อความในตาราง และสีต่างๆเช่น สีขอบตาราง สีตัวอังษรในตาราง หรือแม้แต่ สีของพื้นหลังในตาราง


Week 5

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


จบแล้วนะครับ ที่เรียนมาทั้งหมดนี้ ได้ฝึกการใช้คอมพิวเตอร์ด้วยโปรแกรมต่างๆมากมายเช่น Macromedia Dreamweaver หรือ Adobe Photoshop โดยแต่ละครั้งที่ทำงานได้ฝึกการวิจารณ์ โดยการวิจารณ์งานที่เพื่อนๆได้เขียนไว้

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

กรสร้างHyperlink ใน Macromedia Dreamweaver

Generate Your Own Glitter Graphics @ GlitterYourWay.com - Image hosted by ImageShack.us
เริ่มจากการใส่ Hyperlink นะคับ หรือLink นั่นเอง
เริ่มที่หน้าจอให้ใส่ข้อความอะไรก็ได้ที่ต้องการลิงค์ไป
ไฮไลท์ข้อความทั้งหมดนั้นแล้วดูตรงProperties ด้านล่างจะมีกรอบที่เขียนว่า Link อยู่
ให้ใส่ Url ที่ต้องการลิงค์ไปแล้วก้อเสร็จแล้วล่ะครับ
อย่างที่บอกมาตอนแรกเป็นวิธีง่ายๆนะ ถ้ายากๆก็เขียน HTML Code เองเลย อิอิ
ต้อไปก็ใส่ภาพเป็นลิงค์นะคับ คล้ายๆแบบเดิม แต่แทนที่จะไฮไลท์ข้อความก็คลิกที่ภาพ
แล้วตรงProperties ให้ใส่ Url ของเราไป
บางคนคงสงสัยต่อ แล้วพวกที่ทำเป็นแผนที่โลกนี่แยกภาพมาประกอบกันเป็นคนละลิงค์หรืออะไร
ไม่ใช่นะคับ มันมีวิธีแยกลิงค์ในภาพหรือในDreamweaver จะเรียกว่า Hotspot
แถบHotspotอยู่ใน Properties นั่ลล่ะคับ ที่เป็นรูปสี่เหลี่ยม วงกลม กับโพลิกอน
ให้คลิกซักอันแล้วในภาพของเราก็ลากตรงส่วนที่จะทำลิงค์ พอวาดเสร็จแล้วจะมีขึ้นมาให้ใส่Urlของเรา
เสร็จไปอีกอย่างละ หุหุ

งานต่อไป(ที่รับสั่งมา)
คือการใส่Ankor นั่นเอง เคยเห็นใช่ใหมที่เวลาอ่านบทความยาวๆในหน้าเดียวกัน จะมี
กระโดด(jump- -)ไปที่บทอื่นๆ ก็คือใส่Ankor ไว้ซึ่งคล้ายกับHyperlink แต่ลิงค์ไปที่หน้าเดียวกันแต่เลื่อนลงหรือขึ้นอีก ที่เห็นเยอะที่สุดคือกลับข้างบนหรือ Topนั่นเอง
ในแถบเครื่องมือด้านบนจะมีรูปสมออยู่นะคับ ให้เลื่อนเคอเซอร์ไปที่ๆต้องการใส่ไว้ก่อน แล้วกดปุ่มสมอนั่นล่ะคับ จะมีหน้าต่างขึ้นมาให้ใส่ชื่อนะ สำคัญมากๆ
แล้วอยากใส่ลิงค์ไปตรงไหนก็ให้ใส่ข้อความแล้วลิงค์ไปตามชื่อของสมอของเรา
แล้วพอลองกดดูก็จะไปที่ๆสมอของเราอยู่นั่งเอง สังเกตว่าเวลาeditจะเห็นสมอแต่เวลาดูจะหายไป เพราะฉะนั้นถ้าทำให้ข้อความเลื่อนไปหน่อยไม่เป็นไรคับ เพราะของจริงจะไม่มีผลกระทบ
วันนี้จบแค่นี้ก่อนละกันๆ
เ

วันอังคารที่ 26 มิถุนายน พ.ศ. 2550

การสร้างตาราง






ลองเปลี่ยนจาก Photoshop มาเป็น Dreamweaver มั่งดูนะคนับ







ภาพหน้าจอคร่าวๆนะ



ส่วนเรื่องที่จะบอกก็คือ วิธีทำตารางนั่นเอง


ลองอธิบายแบบใหม่ๆดู



ก็จะได้ตารางขนาด 2*2 อย่างง่ายมา