ใช้ Web Developer แต่งบล็อกอย่างเทพ
posted on 30 Nov 2007 18:51 by palermos in indesign
Web Developer ที่ว่าเนี่ย มันเป็นหนึ่งในโปรแกรมเสริม หรือ extension ของเวบบราวเซอร์หมาไฟ Firefox ซึ่งมันจะช่วยให้การแต่งบล็อกนั้นเห็นภาพเสมือนจริง ซึ่งมันมีฟังก์ชันช่วยปรับแก้อะไรๆ เยอะแยะ โดยที่เราไม่ต้องแตะต้อง css ของจริงก่อนเลยก็ได้ เพราะบางครั้งเราแต่งๆอยู่ ดันพลาดไปลบอะไรๆที่เราไม่รู้ บล็อกก็เละขึ้นมาสิครับ แล้วความเลิศเลอของเจ้า Web Developer นั้นอยู่ที่การพรีวิวแบบจะจะ ซึ่งจะไม่เหมือนกับที่เราแก้ใน css editor ผมอธิบายมาอาจจะงง ดูเลยดีกว่า
สำหรับตัวอย่างบล็อกที่นำเสนอประกอบเอนทรี่นี้ ผมขอสาธิตจากบล็อกคนอื่นครับ เพื่อที่จะได้เห็นภาพกันชัดๆ ว่ามันสามารถส่องล่วงหน้าได้ อย่างบล็อกของท่านนี้
ღLoveYouForEverMore™ღ
ที่ผมเลือกบล็อกของท่านนี้เพราะว่ามีการปรับแต่งน้อยมาก ดูเลยแล้วกันครับ เล่นอะไรสนุกๆ
ต่อจากนี้ผมจะทำการแต่งบล็อกโดยเสมือนว่าผมเป็นเจ้าของบล็อก โดยการสร้างรูปอะไรๆขึ้นมา เช่น พื้นหลัง ตามดูนะครับ
พื้นหลัง
ทดลองเปลี่ยนสีพื้นหลังก่อนครับ
เข้าเมนู css editor
ที่ด้านล่าง..
ทดสอบการเปลี่ยนพื้นหลัง
โค้ดเดิมๆ
ผมจะทดลองแปลง
คราวนี้..พื้นหลังจะเปลี่ยนแปลงไปแล้ว วิธีการนี้สะดวกมากๆ เพราะเราเห็นภาพจริง ว่าเราพิมพ์โค้ดผิดไปบ้างหรือเปล่าด้วย ถ้าพิมพ์ผิดมันก็จะเดี้ยงต่อหน้าเรา เช่น
ทีนี้มาปรับแก้ตรง #neck กันเล่นๆครับ
ผมจะเปลี่ยนสี #neck ละนะ
ทีนี้จะลองแก้ส่วนอื่นๆตรงคอบล็อก ให้มันสีสดใส สอดคล้องกับพื้นหลังดูนะครับ
ผมกำหนดสีคำว่า Home ให้เป็นสีชมพูเข้ม ตัวหนา แล้วพอเอาเมาส์ไปวางจะออกแบบให้มันสีสีขาว ตัวหนา และขีดเส้นประใต้ข้อความ ก็ต้องทดลองพิมพ์โค้ดเพิ่มลงไป
โค้ดตรงเส้นข้างๆ
ทันทีที่เอาเมาส์ไปวาง
เอาเมาส์ไปลองวาง ก็จะัได้อย่างใจ
จริงๆ รหัสสีขาว พิมพ์แค่ #FFF ก็ใช้ได้แล้วครับสามารถย่อได้
ข้อควรระวังในการใช้ css editor ของ Web Developer คือ ถ้าเราเปลี่ยนไปเวบอื่นของเก่าที่เราทดลองทำมันจะหายหมดครับ ซึ่งเราก็สามารถเซฟ css ที่เราทดลองปรับแก้ได้ลงเครื่องเราเลย
บางส่วนของบล็อกยังไม่เข้าที่เข้าทาง ผมว่าเครื่องมือตัวนี้มีประโยชน์มากๆ เพราะปรับอะไรลงไปก็เห็นด้วยตาทันที ส่วนมากที่ผมเห็นว่ามันมีประโยชน์อีกด้านคือ การปรับค่า หมาจิ้น กับ แพดดิ้ง บางบล็อกไปปรับมั่ว ตัวเนื้อบล็อกก็เลยร่วงลงมากองข้างล่าง ดันซ้ายขวาให้เหมาะสมบล็อกจะได้ออกมาสวยๆ
ง่ายๆ.. และมันยังมีความพิเศษ สามารถทดลองปรับแก้ข้อความอะไรลงไปได้เช่น
จากเมนู Web Developer เข้าไปตรงนี้เลยครับ
ต้องอาศัยความรู้ภาษา html เล็กน้อยครับ (จริงๆใช้การสังเกตเอาก็ได้งิ) 
แก้เป็น
มาลองดูตัวอย่างบล็อกที่ผมปรับแก้เล่นๆครับ ของเจ้านี้
ย่อมาเหลือความกว้าง 420px ของจริงไปดู ที่นี่
เลิศไหม
เอาไปใช้งานฟรี คลิ้กรูปเลย
งานนี้สำหรับสาวกหมาไฟเท่านั้นนะครับ ieใช้ไม่ได้ จริงๆลูกเล่นของเจ้า extension ตัวนี้ยังมีอีกเยอะครับ ไม่ว่าจะเป็นปิดตรงนั้น เปิดตรงนี้ มือใหม่แต่งบล็อกผมว่า ควรจะลองใช้ดูครับ
ส่วนเจ้าของบล็อกสาธิต ไม่ต้องตกใจครับ บล็อกท่านไมไ่ด้โดนผมแอบเข้านะ เดี๋ยวจะตกใจไปกันใหญ่
...
#1 By ★ オーさん ~* on 2007-11-30 20:58