เริ่มต้นใช้ Adobe MUSE

ก่อนอื่นต้องมีโปรแกรม Adobe MUSE ก่อนอื่น ดาว์นโหลดโปรแกรมแต่ติดตั้งให้เรียบร้อยก่อน อ่านจากบทความนี้ได้เลยคับ ลองเข้าโปรแกรมครับ จะเห็นโปรแกรมหน้าตาง่ายๆแบบนี้

1-6-2556 22-00-39

ให้เรา เลือกว่าต้องการสร้างเว็บไซต์สำหรับอะไร จากนั้นก็กำหนดขนาดของหน้าเพ็จ และค่าต่างๆ

1-6-2556 22-05-17

 

กำหนด ความกว้าง ความสูง ผมปรับ margins และ padding เป็น 0 ทั้งหมดเพื่อให้ชิดขอบ และกำหนด columns เป็น 2 columns กำหนดความกว้างของ columns โปรแกรมจะคำนวนให้เอง ติ๊กที่ Center Horizontally จะเป็นการจัดให้หน้าอยู่กลางจอ

1-6-2556 22-08-46

 

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

  1. Plan อันนี้ ดีมาก เพราะทำให้เราเห็นภาพรวม โครงสร้างเว็บไซต์ทั้งหมด โดยตามหลักการสร้างเว็บไซต์แล้ว ควรที่จะวางโครงสร้างกันก่อน โครงสร้างนี้สำคัญมาก เพราะ Plan จะตัวเชื่อมโยงเมนูต่างๆ ของเว็บไซต์ต่อไปด้วย ดังนั้น การเปลี่ยนแปลงโครงสร้างเว็บไซต์ ทำได้ง่ายขึ้น เพราะโปรแกรมจะสร้างเมนูตามโครงสร้างเองเลย ทำให้สะดวกไปเยอะ ทีนี้ หน้าจอนี้จะแบ่งเป็น 2 ส่วนคือ ด้านบน เห็นเป็นกล่องสี่เหลื่ยม นั่นคือ หน้าแรกของเว็บเพ็จของเรา ส่วนด้านล่างเป็น Master โดย Master นี้ ถ้าบอกว่า มันคือ Template ใน Dreamweaver คงไม่ผิด ผมเห็นบางรีวิว ไม่สนใจ master ไปแก้ไข Home เลย ซึ่งจริงๆ แล้วที่ถูกต้องคือ ต้องมาสร้างที่ Master ก่อน แล้วค่อยเลือก ว่า เพ็จนั้นจะใช้ Master ตัวไหน จากตัวอย่าง คือ A-master
  2. Design เป็นหน้าที่ใช้ในการออกแบบ หน้าตาจะคล้ายๆ Photoshop ซึ่ง Designer คุ้นเคยกันดี เดี๋ยวค่อยมาพูดรายละเอียดกันอีกที
  3. Preview ชื่อก็บอกอยู่แล้ว ใช้ดูผล ก่อนจะใช้งานจริง สามารถกดลิงค์เปลี่ยนหน้าได้ เหมือนกับรันบนเว็บจริง
  4. Publish อันนี้คือ ส่งงานออกไปสู่ Internet จริงๆ ความเจ๋ง มันอยู่ที่ว่า โปรกรมจะเชื่อมไปยัง Adobe Cloud ซึ่งเหมือนเราเอาไฟล์ ไปฝากบนโฮสท์จริงๆ และสามารถใช้งานได้จริง เรียกว่า ถ้าไม่เช่าโฮสท์อื่น ก็สามารถซื้อพื้นที่ Cloud ของ Adobe ได้เลย นี่เงินทองจะไม่ให้ไปไหนเลยนะเนี่ย
  5. Manage อันนี้คือการ Manage Site นั้นเอง สามารถ บริหารจัดการได้ เหมือนบน Server เรา

อันนี้เป็นการ Review คร่าวๆนะคับ เดี๋ยวต่อไป ผมจะลองสร้าง Template ต่อไปในบทความหน้า