เปิดด้วยอะไรได้ก็ทำอันนั้นอะครับ(notepad edit plus dream frontpage เยอะมาก) แต่ที่ขาดไม่ได้เลยเป็น firebug

design ? ใช้ photoshop ครับ

เอิ้กๆ

ตอบจริงๆ จังๆ ใช้ได้หมดอ่ะครับ อะไรที่เปิดทำได้ notepad เฉยๆ ก็ได้ถ้ามันหมดหนทางแล้ว

เพราะhtml+css ก็จำโค้ดได้เยอะในระดับนึง

แต่บางตัวต้องเปิด ref ดู เช่นพวก -moz, -webkit ต่างๆ นานา shadow, border-radius

ไม่เคยจำได้เลย - -"

design ผมใช้กระดาษ

ถ้าขั้นตอนออกแบบก็กระดาษดินสอปากกาครับ เพราะขั้นทำ wireframing ถ้าทำลงเป็น digital จะเปลืองเวลาเว้นแต่เป็น request ของลูกค้า

ส่วนขั้นตอนการทำ ถนัดอะไรก็ใช้อย่างนั้น เครื่องมือส่วนมากพื้นฐานต้องมีส่วน editor ด้วยเป็นอย่างต่ำ อย่างตอนนี้ใช้ netbeans เป็นหลัก อยู่ๆ วันนี้นึกครึ้มอยากกลับไปวันเก่า หา dreamweaver มาทดลองใช้ กลายเป็นว่าเขียนไม่ออก ต้องกลับมา netbeans ด้วยความเคยชิน

ส่วนตัวน่าห่วงคือการจำโค้ด ดังนั้นที่กังวลกว่าคือการหาแหล่งอ้างอิงข้อมูล เลยกลายเป็นตามหาโหลด cheat sheet ซะมากกว่า (พอหาได้ก็อยากปริ้นท์ติดข้างฝาหรือทับไว้ใต้กระจกมันซะเลย)

เขียนโค๊ดผมใช้ Notepad++ ครับ ส่วนทำไฟล์ภาพผมใช้ Photoshop แต่ขั้นตอนการออกแบบโครงหน้าเว็บนี่ ปากกากับดินสอเลย

ส่วนขั้นตอน Debug ผมใช้ Dragonfly เป็นหลัก แต่ตอนไปเทสกับเบราเซอร์อื่นก็ใช้ของเบราเซอร์นั้นๆจิ้มดูด้วยเช่นกัน

ผมกากเรื่องออกแบบครับ

ผมก็วาดในหัว แล้วก็ปรับใน code ไปเรื่อยๆ ครับ .... ไม่จบซะที

อ่านดูจากบทความเกี่ยวกับการออกแบบเว็บสมัยใหม่หลายๆ แห่ง เขาจะมีตัวอย่าง code ให้ ทั้ง html และ css

เลือก javascript framework ที่น่าใช้งานสักตัว เดี๋ยวนี้คงต้อง jquery

เอามาผสมรวมกัน ทำเป็น basic template ของตัวเอง ใช้เป็นจุดเริ่มต้น

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

เริ่ม code ด้วย text editor ที่ถนัด code ไป preview ไป บนบราวเซร์ซักตัว เช่น firefox หรือ chrome

จนเสร็จเป็น template เบื่้องต้นแล้วเอาไป test กับ IE ที่ต้องใช้ ปรับแก้กันอีกรอบ

ของผมก็ประมาณนี้ครับ

ใช้ Browser แล้วเลือก Save Page As... ครับ