การสร้างเว็บไซต์ Responsive ด้วย Adobe Muse CC 2017 ตอนที่ 1 : Site Map

เริ่มต้นด้วยการสร้าง Site ด้วย Adobe Muse CC 2017

เมื่อเราเข้ามาในโปรแกรม Adobe Muse และสร้างไฟล์ใหม่ด้วยคำสั่ง New จากนั้นโปรแกรมจะมีหน้าต่าง New Site ให้เรากำหนดค่าเบื้องต้นของโครงสร้างเว็บไซต์

เมื่อเราเข้ามาในโปรแกรม Adobe Muse และสร้างไฟล์ใหม่ด้วยคำสั่ง New จากนั้นโปรแกรมจะมีหน้าต่าง New Site ให้เรากำหนดค่าเบื้องต้นของโครงสร้างเว็บไซต์

 

จากหน้านี้เรากำหนดความกว้างของหน้าจอได้ 2 แบบคือ

  1. Fluid Width เป็นการกำหนดความกว้างแบบยืดหยุ่น เหมาะสำหรับการทำ responsive web ที่การจัดวางไม่ซับซ้อน โครงหน้าของเว็บจะยืดหยุ่นไปตามหน้าจออุปกรณ์
  2. Fixed Width เป็นการกำหนดความกว้างแบบตายตัว เหมาะสำหรับการทำ web ที่ต้องการการจัดวางแบบตายตัว รวมถึงเว็บที่ต้องการใช้คำสั่ง Animation ของ Muse ต้องกำหรดเป็น Fixed Width นะครับ
  • Max Page จะเป็นตัวกำหนดความกว้างสูงสุดของหน้าเว็บ มันจะล็อก object ในหน้าเว็บของเราไม่ให้ขยายมากกว่าความกว้างนี้ ยกเว้น เราสั่งให้ object กว้างเต็มบราวเซอร์ ปกติจะเป็น 960 px (ตามมตรฐาน Grid 960 หากต้องการหน้าจอกว้างกว่านี้ มาตรฐานถัดมาเป็น 1200 px)
  • Advanced Setting จะตั้งค่า min Width คือหน้าจอแคบสุดที่จะแสดงผล โดยปกติตั้งตามค่าที่ให้มาคือ 320 px ก็เหมาะสมดี ส่วน Min Heigth เป็นความสูงน้อยที่สุดไว้ที่ 500 px เพื่อป้องกันไม่ให้หน้าเว็บที่เนื้อหาน้อย หน้าหดสั้นเกินไป
  • Margins กับ Padding  คือช่องไฟของ Box Model ของส่วน Body ของเว็บไซต์ (อ่านเรื่อง Box model และ HTML เพิ่มเติม) ส่วน icon เล็กๆคลิกมาจะมีคำว่า Center กับ Left Align เป็นการสั่งให้จัดโครงของเว็บไซต์อยู่ตรงกลาง หรือ ชิดซ้าย
  • Resolution หากเลือกเป็น Standard จะใช้กราฟิกแบบมาตรฐาน แต่ถ้าเลือกเป็น HiDpi จะทำให้รองรับกราฟิกความละเอียดสูง เช่น Retina Display แต่ก็แลกมากับไฟล์ที่ใหญ่ขึ้นและเว็บโหลดช้าลง
  • Language เลือกภาษาหลักของเว็บไซต์
  • Sticky Footer เลือกไว้เพื่อตรึง Footer ให้อยู่ด้านล้างสุดของเว็บไซต์เสมอ

ตั้งค่าได้แล้วกด Ok เข้าสู้หน้าการสร้างเว็บไซต์กันเลย

ในหน้านี้ จะเป็นหน้าสำหรับการสร้าง Page ต่างๆของเว็บไซต์เรา โดยจะเรียกหน้านี้ว่า Plan ซึ่งประกอบด้วย 2 ส่วน ครึ่งบนจะเป็น Site Map ส่วนครึ่งล่าง จะเป็น Master ทั้ง 2 ส่วนนี้จะทำงานสัมพันธ์กัน โดยส่วนของ Site Map จะมีหน้าที่สร้างและกำหนดความสัมพันธ์ของหน้าต่างๆ ว่าหน้าไหนเป็นหน้าหลัก และเป็นหน้าย่อย โดยส่วนของ Site Map นี้ จะนำไปผูกกับ Widget Menu เพื่อสร้างเมนูด้วย ดังนั้นจึงต้องกำหนดโครงสร้างให้ถูกต้อง

ในหน้านี้ จะเป็นหน้าสำหรับการสร้าง Page ต่างๆของเว็บไซต์เรา โดยจะเรียกหน้านี้ว่า Plan ซึ่งประกอบด้วย 2 ส่วน ครึ่งบนจะเป็น Site Map ส่วนครึ่งล่าง จะเป็น Master ทั้ง 2 ส่วนนี้จะทำงานสัมพันธ์กัน โดยส่วนของ Site Map จะมีหน้าที่สร้างและกำหนดความสัมพันธ์ของหน้าต่างๆ ว่าหน้าไหนเป็นหน้าหลัก และเป็นหน้าย่อย โดยส่วนของ Site Map นี้ จะนำไปผูกกับ Widget Menu เพื่อสร้างเมนูด้วย ดังนั้นจึงต้องกำหนดโครงสร้างให้ถูกต้อง

 

 

เมื่อวางเมาท์บน Page จะมีเครื่องหมาย + ขึ้นมา 3 ด้าน ซ้ายขวาคือการเพิ่มหน้าเว็บไซต์ หรือ page ในระดับเดียวกัน หรือเป็น page แม่ (Parent Page) ส่วน เครื่องหมาย + ด้านล่าง คือการสร้างหน้าย่อย (Sub Page) ซึ่งจะกลายเป็น Sub Menu ต่อไป

 

ทำการสร้างโครงสร้างหน้าเว็บจนสมบูรณ์

ทำการสร้างโครงสร้างหน้าเว็บจนสมบูรณ์

 

จากนั้นเราจะไปออกแบบ Master Page กันต่อไป