คู่มือการใช้งานดีไซน์หน้าเว็บไซต์

วิธีเพิ่มหน้า

  • เปิดหน้าตัวสร้าง
  • กด "เปิดตัวจัดการเพจ" ซึ่งจะปรากฏเมื่อวางเมาส์เหนือ breadcrumbs ทางด้านขวาของโลโก้ Novi
  • กด "เพิ่มหน้าใหม่" บนแผงที่ปรากฏ
  • ป้อนชื่อหน้าและกด "สร้างหน้า"

หากต้องการบันทึกการเปลี่ยนแปลงที่ทำกับโครงการ คุณต้องกดปุ่ม "บันทึกการเปลี่ยนแปลง" ซึ่งอยู่ที่ส่วนบนขวาของอินเทอร์เฟซ

วิธีเปลี่ยนหน้า

อินเทอร์เฟซใหม่:

  • เปิดหน้าตัวสร้าง
  • กด "เปิดตัวจัดการเพจ" ซึ่งจะปรากฏเมื่อวางเมาส์เหนือ breadcrumbs ทางด้านขวาของโลโก้ Novi
  • เลือกหน้าที่เหมาะสมโดยกด LMB บนแผงที่ปรากฏ
วิธีลบเพจ
  • เปิดหน้าตัวสร้าง
  • กด "เปิดตัวจัดการเพจ" ซึ่งจะปรากฏเมื่อวางเมาส์เหนือ breadcrumbs ทางด้านขวาของโลโก้ Novi
  • กด "ลบ" บนแผงที่ปรากฏ

หากต้องการบันทึกการเปลี่ยนแปลงที่ทำกับโครงการ คุณต้องกดปุ่ม "บันทึกการเปลี่ยนแปลง" ซึ่งอยู่ที่ส่วนบนขวาของอินเทอร์เฟซ

วิธีการทำซ้ำหน้า
  • เปิดหน้าตัวสร้าง
  • กด "เปิดตัวจัดการเพจ" ซึ่งจะปรากฏเมื่อวางเมาส์เหนือ breadcrumbs ทางด้านขวาของโลโก้ Novi
  • กด "ซ้ำ" บนแผงที่ปรากฏ

หากต้องการบันทึกการเปลี่ยนแปลงที่ทำกับโครงการ คุณต้องกดปุ่ม "บันทึกการเปลี่ยนแปลง" ซึ่งอยู่ที่ส่วนบนขวาของอินเทอร์เฟซ

วิธีเพิ่มหน้าตัวอย่าง
  • เปิดหน้าตัวสร้าง
  • กด "เปิดตัวจัดการเพจ" ซึ่งจะปรากฏเมื่อวางเมาส์เหนือ breadcrumbs ทางด้านขวาของโลโก้ Novi
  • กด "อัปโหลดตัวอย่าง" บนแผงที่ปรากฏ
  • เลือกไฟล์ที่จำเป็นจากไลบรารีสื่อและอัปโหลดไฟล์ใหม่  คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับคุณลักษณะไลบรารีสื่อทั้งหมดได้ในส่วน "ไลบรารีสื่อ"
  • กด "แทรกรูปภาพ"

หากต้องการบันทึกการเปลี่ยนแปลงที่ทำกับโครงการ คุณต้องกดปุ่ม "บันทึกการเปลี่ยนแปลง" ซึ่งอยู่ที่ส่วนบนขวาของอินเทอร์เฟซ

การตั้งค่าหน้า

การตั้งค่าหน้าจะใช้เฉพาะกับหน้าที่เปิดอยู่ในโปรแกรมแก้ไขภาพในขณะนี้

  • ทริกเกอร์สำหรับการแสดงการตั้งค่าหน้าปัจจุบัน
  • ชื่อหน้า - ชื่อหน้า
  • ชื่อไฟล์ – ชื่อไฟล์ HTML ของหน้า (สร้างโดยอัตโนมัติจากชื่อหน้า)
  • ใช้เป็นโฮมเพจ - ตั้งหน้าปัจจุบันเป็น 'ด้านหน้า' หน้าหนึ่ง
  • Favicon - และตัวเลือกในการอัปโหลด favicon ของเว็บไซต์
  • ข้อมูลเมตาของเพจ

* เมื่อบันทึกการตั้งค่า (ในกรณีที่ชื่อเพจถูกแก้ไข) ลิงก์ URL ทั้งหมดของโครงการจะถูกแทนที่ด้วยค่า "ชื่อไฟล์" (รวมถึงค่าที่ตั้งล่วงหน้า)
* ปุ่ม "บันทึกการเปลี่ยนแปลง" อาจไม่สามารถใช้ได้หากกรอกฟิลด์ "ชื่อไฟล์" ไม่ถูกต้อง (เช่น ชื่อไฟล์ HTML ที่ไม่ถูกต้อง หรือชื่อไฟล์ซ้ำกัน)

กดปุ่ม "บันทึกการเปลี่ยนแปลง" หลังจากคุณตั้งค่าเสร็จแล้ว  จากนั้นบันทึกโครงการโดยกดปุ่ม "บันทึกโครงการ"

โหมดการออกแบบ

โหมดนี้มีไว้สำหรับนักพัฒนาเป็นหลัก  มันให้ตัวเลือกต่อไปนี้แก่คุณ:

  • กำหนดค่าปลั๊กอินของตัวสร้าง
  • แก้ไขซอร์สโค้ดของหน้า (HTML, CSS, JS) ด้วยความช่วยเหลือของเครื่องมือแก้ไขโค้ด
  • จัดการค่าที่ตั้งล่วงหน้าของโปรเจ็กต์
  • จัดการเนื้อหาของเพจโดยใช้โปรแกรมแก้ไขภาพ

โหมดแก้ไข

โหมดนี้มีไว้สำหรับผู้ใช้ปลายทางเป็นหลัก  ช่วยให้คุณใช้เครื่องมือภาพทั้งหมดสำหรับการแก้ไขเนื้อหา รวมถึงปลั๊กอินของตัวสร้าง  "โหมดแก้ไข" เป็นโหมดที่โหลดโดยค่าเริ่มต้น

โหมดดูตัวอย่าง

โหมดนี้ช่วยให้ดูตัวอย่างเว็บไซต์ของคุณได้

การกำหนดค่า (เครื่องมือเลเยอร์)

คุณสามารถเข้าถึงการตั้งค่าโปรเจ็กต์ได้โดยคลิกรายการ "การกำหนดค่า" ในเมนูหลักของอินเทอร์เฟซของตัวสร้าง

  • ประเภทของการตั้งค่าโครงการ
  • หมวดหมู่ของการตั้งค่าระบบ
  • พื้นที่ระบุการตั้งค่าสำหรับหมวดหมู่ที่เลือก

การตั้งค่าโครงการรวมถึงต่อไปนี้:

  • "ทั่วไป" รวมถึง:
    • ชื่อโครงการ – ชื่อของโครงการ
    • เส้นทางไดเรกทอรีรูปภาพ – เส้นทางไปยังไดเรกทอรีที่มีรูปภาพโครงการ
    • เส้นทางไดเรกทอรีวิดีโอ - เส้นทางไปยังไดเรกทอรีที่มีไฟล์วิดีโอโครงการ
    • เส้นทางไดเรกทอรีแบบอักษร - เส้นทางไปยังไดเรกทอรีที่มีแบบอักษรของโครงการ
    • เส้นทางไดเรกทอรีสไตล์ - เส้นทางไปยังไดเรกทอรีที่มีสไตล์
  • "เผยแพร่" ซึ่งอนุญาตให้เปลี่ยนเส้นทางการเผยแพร่บนเซิร์ฟเวอร์ของคุณซึ่งเป็นที่ตั้งของตัวสร้าง  นอกจากนี้ยังมีตัวเลือกสำหรับเปิด/ปิดการยืนยันเส้นทางก่อนเผยแพร่
  • "แบบอักษร Google" อนุญาตให้กำหนดค่าแบบอักษร Google ในโครงการของคุณ  โปรดทราบว่าการตั้งค่านี้ใช้ในโปรแกรมแก้ไขข้อความของ Novi  นี่คือวิธีการทำงาน:
  • "เทมเพลตไฟล์และโค้ด" ให้คุณเปลี่ยนมาร์กอัปพื้นฐานของเพจใหม่และคอนเทนเนอร์เพจ
  •  "Project Layers" รวมถึงการตั้งค่าระบบเลเยอร์

ในการตั้งค่าระบบ แท็บ "ทั่วไป" ประกอบด้วย:

  • แสดงเคล็ดลับในการเริ่มต้น - ระบุว่าจำเป็นต้องแสดงการนำเสนอครั้งแรกเมื่อเริ่มต้นตัวสร้างหรือไม่
  • ตรวจหาการอัปเดต - ระบุว่าจำเป็นต้องตรวจสอบการอัปเดตของตัวสร้างหรือไม่ (มีตั้งแต่เวอร์ชัน 0.8.3)
  • ภาษา - ตัวเลือกสำหรับเลือกภาษาอินเทอร์เฟซของตัวสร้าง
กฎการสร้างเลเยอร์

ในการตรวจจับการโต้ตอบของผู้ใช้กับองค์ประกอบเค้าโครงโครงการ Novi ใช้ระบบเลเยอร์  เลเยอร์คือกฎที่กำหนดกลุ่มตรรกะขององค์ประกอบเลย์เอาต์สำหรับการปรับแต่งในโปรแกรมแก้ไขภาพ (การลาก วาง ลบ ทำซ้ำ ขนส่ง และอื่นๆ) คุณยังสามารถจัดการองค์ประกอบของหน้าโดยไม่คำนึงถึงเลเยอร์ตามที่อธิบายไว้ใน “การขยาย คุณสมบัติของการทำงานกับองค์ประกอบ”

วิธีเพิ่ม/เปลี่ยนเลเยอร์

ในการเพิ่มเลเยอร์ คุณต้อง:

  • เปิดหน้าตัวสร้าง
  • เปิดเมนูหลัก (กดไอคอนโลโก้ Novi Builder) ที่มุมซ้ายบนของอินเทอร์เฟซ
  • เลือก "การกำหนดค่า"
  • ในส่วน "Project Layers" ให้กด "+" ที่ด้านล่างของตาราง
  • กรอกข้อมูลในส่วน "กฎการสร้างเลเยอร์"
  • กด "บันทึกการเปลี่ยนแปลง"

หากต้องการบันทึกการเปลี่ยนแปลงที่ทำกับโครงการ คุณต้องกดปุ่ม "บันทึกการเปลี่ยนแปลง" ซึ่งอยู่ที่ส่วนบนขวาของอินเทอร์เฟซ

กฎการสร้างเลเยอร์

เมื่อสร้างเลเยอร์ คุณต้องป้อนพารามิเตอร์ต่อไปนี้:

  • ชื่อ – ชื่อซึ่งจะแสดงเมื่อวางเมาส์เหนือองค์ประกอบในโปรแกรมแก้ไขภาพ
  • องค์ประกอบ – ตัวเลือก CSS ที่กำหนดกลุ่มลอจิคัลซึ่งใช้กฎนี้
  • สามารถแทรกลงใน – ตัวเลือก CSS ที่กำหนดพื้นที่ของการจัดการกับกลุ่มลอจิคัล

ตัวอย่างการใช้เลเยอร์
ลองมาดูตัวอย่างโปรเจ็กต์ว่างที่ไม่มีเลเยอร์กัน  หลังจากเข้าสู่ "โหมดแก้ไข" คุณจะไม่สามารถโต้ตอบกับองค์ประกอบเลย์เอาต์ได้ และคุณจำเป็นต้องเพิ่มเลเยอร์

สร้างเลเยอร์ตามย่อหน้า "วิธีเพิ่มหรือเปลี่ยนเลเยอร์" ด้วยพารามิเตอร์ต่อไปนี้:

  • ชื่อ - มาตรา
  • องค์ประกอบ - .section
  • ใส่ได้ - ตัวเครื่อง

ดังนั้น เลเยอร์ที่เรียกว่า "Section" จะถูกสร้างขึ้น ซึ่งจะประกอบด้วยองค์ประกอบทั้งหมดของเลย์เอาต์ HTML ที่มีคลาส .section  การปรับเปลี่ยนทั้งหมด (การลาก เพิ่ม ฯลฯ) จะเกิดขึ้นในบริบทของผู้ปกครอง

หลังจากบันทึกเลเยอร์ใน "โหมดแก้ไข" (เมื่อองค์ประกอบที่มีคลาส .section ปรากฏบนหน้าเป้าหมาย) และในขณะที่วางเมาส์เหนือองค์ประกอบเลย์เอาต์ ซึ่งสอดคล้องกับเลเยอร์ที่สร้างขึ้น ตัวอย่างเช่น:

           
...

แผงตัวแก้ไขจะแสดงพร้อมตัวเลือกในการลาก ทำซ้ำ และลบ

พื้นที่การลาก ในกรณีนี้ จะจำกัดอยู่ที่แท็ก "body" ที่ระบุไว้ในพารามิเตอร์ของเลเยอร์ Section นั่นคือ คุณจะไม่สามารถย้ายองค์ประกอบที่มีคลาส .section นอกขอบเขตของ ตัวอย่างเช่น ไปยัง

นอกจากนี้ หากมีการตั้งค่าล่วงหน้าที่บันทึกไว้ในโปรเจ็กต์ (วิธีการทำงานกับพรีเซ็ตจะอธิบายไว้ในส่วน "การทำงานกับพรีเซ็ต") หลังจากวางเมาส์เหนือพื้นที่ที่สามารถใช้พรีเซ็ต (โค้ด HTML ที่ระบุอยู่ในนั้น) ตามเลเยอร์ โมดูล ของการเพิ่มที่ตั้งไว้ล่วงหน้าจะปรากฏขึ้น

ขยายคุณสมบัติของการทำงานกับองค์ประกอบต่างๆ

Novi ใช้ระบบเลเยอร์สำหรับการแก้ไของค์ประกอบภาพ
หากคุณต้องการแก้ไของค์ประกอบที่ไม่ได้อธิบายไว้ในระบบเลเยอร์ คุณสามารถใช้ปุ่ม Ctrl ใน Windows OS หรือ Cmd ใน Mac OS ได้

เมื่อกดปุ่มนี้ คุณจะสามารถเข้าถึงองค์ประกอบทั้งหมดของหน้าปัจจุบันได้  ขอให้เราพิจารณาตัวอย่างต่อไปนี้:

ที่นี่เราต้องวางปุ่มก่อนข้อความ

หากเปิดใช้งาน "โหมดการออกแบบ" ไว้:

  • กด Ctrl ค้างไว้บน Windows OS หรือ Cmd บน Mac OS
  • เลือกปุ่มโดยคลิก LMB
  • คลิก LMB บนแผงที่ปรากฏค้างไว้ appeared
ขยายคุณสมบัติของการทำงานกับองค์ประกอบต่างๆ

ปล่อย LMB และ Ctrl บน Windows OS หรือ Cmd บน Mac OS
หากเปิดใช้งาน "โหมดแก้ไข":

  • กด Ctrl ค้างไว้บน Windows OS หรือ Cmd บน Mac OS แล้ววางเมาส์เหนือปุ่ม
  • คลิก LMB ค้างไว้บนไอคอน    ของแผงที่ปรากฏ
การวางองค์ประกอบก่อนพื้นที่ข้อความ

ปล่อย LMB และ Ctrl บน Windows OS หรือ Cmd บน Mac OS

กรุณาให้ความสนใจของคุณ!  วิธีนี้ช่วยให้คุณจัดการองค์ประกอบเลย์เอาต์ได้  ปฏิบัติตามกฎความถูกต้องของโค้ด HTML และความหมาย

เครื่องมือที่ตั้งไว้ล่วงหน้า

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

แผงพรีเซ็ตประกอบด้วยรายการต่อไปนี้:

  • แผงของนักพัฒนา
  • 'สร้างพรีเซ็ต' ตัวเลือก
  • รายการที่ตั้งไว้ล่วงหน้าที่มีอยู่
  • ตั้งค่าหมวดหมู่และแถบค้นหา
วิธีสร้างพรีเซ็ต

มี 2 ​​วิธีในการสร้างพรีเซ็ต:

  • สร้างพรีเซ็ตโดยใช้แผงพรีเซ็ต
  • ใช้เมนูบริบทของโปรแกรมแก้ไขภาพ

ในกรณีแรกคุณต้อง:

  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดการออกแบบ" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • เปิดแผงด้านล่างโดยกด "Presets"
  • บนแผงที่ปรากฏ ให้กด "เพิ่มค่าที่ตั้งไว้ใหม่"
  • กรอกข้อมูลในฟิลด์ตามที่แสดงในย่อหน้า "วิธีตั้งค่าพารามิเตอร์อย่างถูกต้องเมื่อสร้างพรีเซ็ต" ของส่วนนี้
  • กด "บันทึกที่ตั้งไว้ล่วงหน้า"

ในกรณีที่สอง:

  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดการออกแบบ" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • เลือกพื้นที่ที่จำเป็น
  • เปิดเมนูบริบทโดยกด RMB
  • เลือก "บันทึกเป็นค่าที่ตั้งล่วงหน้า"
  • กรอกข้อมูลในฟิลด์ตามที่แสดงในย่อหน้า "วิธีตั้งค่าพารามิเตอร์อย่างถูกต้องเมื่อสร้างพรีเซ็ต" ของส่วนนี้
  • กด "บันทึกที่ตั้งไว้ล่วงหน้า"

ในกรณีแรก คุณต้องตั้งค่าเค้าโครงที่กำหนดไว้ล่วงหน้า  ในกรณีที่สอง เลย์เอาต์จะถูกนำมาจากองค์ประกอบที่คุณเลือกในช่องข้อความ "HTML Code"

วิธีตั้งค่าพารามิเตอร์อย่างถูกต้องเมื่อสร้างพรีเซ็ต

ในช่อง "ชื่อที่ตั้งไว้ล่วงหน้า" ให้ระบุชื่อที่ตั้งไว้ล่วงหน้า[#br] คุณต้องระบุคำหลักในฟิลด์ "คำหลัก" เพื่อให้สามารถค้นหาค่าที่ตั้งล่วงหน้าที่เหมาะสมได้  เราขอแนะนำให้คุณระบุคีย์ที่ตั้งไว้ล่วงหน้าตามเนื้อหาที่เขียนไว้  ตัวอย่างเช่น ส่วนที่มีลูกค้าของเราจะมีคีย์ชื่อ "ลูกค้า" หรือ "พันธมิตร"

พื้นที่ข้อความ "HTML Code" แสดงโค้ด HTML ซึ่งจะถูกแทรกลงในหน้าที่เลือกหลังจากใช้ค่าที่ตั้งไว้ล่วงหน้า

ช่องทำเครื่องหมาย "ปรับใช้เมื่อแทรกค่าที่ตั้งไว้ล่วงหน้า" กำหนดว่าหน้าจะถูกโหลดซ้ำเมื่อใส่ค่าที่ตั้งไว้ล่วงหน้าหรือไม่

วิธีเพิ่มการแสดงตัวอย่างที่ตั้งไว้ล่วงหน้า
  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดการออกแบบ" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • เปิดแผงด้านล่างโดยกด "Presets"
  • บนแผงที่ปรากฏ เลือก "อัปโหลดตัวอย่าง" จากเมนูบริบทของค่าเป้าหมายที่ตั้งไว้ล่วงหน้า
  • เลือกไฟล์ที่จำเป็นจากไลบรารีสื่อและอัปโหลดไฟล์ใหม่  คุณสามารถหาข้อมูลเพิ่มเติมเกี่ยวกับคุณลักษณะไลบรารีสื่อทั้งหมดได้ในส่วน "ไลบรารีสื่อ"
  • กด "แทรกรูปภาพ"
วิธีแก้ไขพรีเซ็ต
  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดการออกแบบ" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • เปิดแผงด้านล่างโดยกด "Presets"
  • บนแผงที่ปรากฏ เลือก "แก้ไข" จากเมนูบริบทของค่าเป้าหมายที่ตั้งไว้ล่วงหน้า
วิธีการทำซ้ำพรีเซ็ต
  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดการออกแบบ" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • เปิดแผงด้านล่างโดยกด "Presets"
  • บนแผงที่ปรากฏ เลือก "ทำซ้ำ" จากเมนูบริบทของค่าเป้าหมายที่ตั้งไว้ล่วงหน้า
วิธีการลบพรีเซ็ต
  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดการออกแบบ" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • เปิดแผงด้านล่างโดยกด "Presets"
  • บนแผงที่ปรากฏ เลือก "ลบ" จากเมนูบริบทของค่าเป้าหมายที่ตั้งไว้ล่วงหน้า
การเพิ่มพรีเซ็ตให้กับเพจ to

มี 2 ​​วิธีในการเพิ่มพรีเซ็ตในหน้า:

  • ด้วยความช่วยเหลือของแผงที่ตั้งไว้ล่วงหน้า
  • การใช้โมดูลแทรกที่ตั้งไว้ล่วงหน้า

ในกรณีแรกคุณต้อง:

  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดการออกแบบ" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • เปิดแผงด้านล่างโดยกด "Presets"
  • บนแผงที่ปรากฏ ให้ค้นหาค่าที่ตั้งไว้ล่วงหน้าที่จำเป็น
  • ลากพรีเซ็ตไปยังพื้นที่แก้ไขภาพโดยกด LMB ค้างไว้ จากนั้นพื้นที่แทรกจะถูกเน้นด้วยเส้นสีน้ำเงินทึบ
  • ในกรณีที่สอง:
  • เปิดหน้าตัวสร้าง
  • ไปที่ "โหมดแก้ไข" โดยกดปุ่มที่เหมาะสมตรงกลางแผงด้านบน
  • วางเมาส์เหนือพื้นที่ที่คุณต้องการเพิ่มพรีเซ็ต
  • หากมีพรีเซ็ตและหากเป็นไปตามกฎของเลเยอร์ "+" จะปรากฏขึ้น ให้กดที่พรีเซ็ต
  • เลือกพรีเซ็ตที่จำเป็นในหน้าต่างโต้ตอบที่ปรากฏ

ตัวแก้ไขเนื้อหา (เครื่องมือพื้นฐาน)

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

การดำเนินการแก้ไขเนื้อหาพื้นฐานที่มีอยู่ในโปรแกรมแก้ไขภาพมีดังต่อไปนี้:

  • การถอด
  • กำลังวางจากพรีเซ็ต
  • ทำซ้ำ
  • การเปลี่ยน

ตัวเลือกทั้งหมดนี้มีอยู่ในรายการโฮเวอร์ - เพียงวางเคอร์เซอร์ของเมาส์บนรายการในโปรแกรมแก้ไขภาพ

การลบเนื้อหา

วางเมาส์เหนือรายการเป้าหมายเพื่อลบเนื้อหาบางส่วนของหน้าและกดปุ่ม "ลบเลเยอร์"

วางเนื้อหาจากพรีเซ็ต

วางเมาส์เหนือพื้นที่เป้าหมายเพื่อเพิ่มเนื้อหาบางส่วนจากพรีเซ็ต  ในกรณีที่มีการตั้งค่าล่วงหน้าที่ตรงกับข้อกำหนดของกฎการเพิ่มเลเยอร์ (อยู่ในส่วน "การกำหนดค่า") คุณจะเห็นไอคอน '+'  กดและเลือกพรีเซ็ตจากรายการที่มีอยู่

ทำซ้ำเนื้อหา

วางเมาส์เหนือรายการเป้าหมายเพื่อทำซ้ำเนื้อหาบางส่วนในหน้าเว็บ แล้วกดปุ่ม "Duplicate layer"

การแทนที่เนื้อหา

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

เครื่องมือลากและวาง

เครื่องมือลากและวางช่วยให้คุณสามารถจัดเรียงรายการใหม่ภายในพื้นที่แก้ไขภาพได้
กฎการลากรายการมีการอธิบายไว้ในระบบเลเยอร์ Novi ในส่วน "การกำหนดค่า" พื้นที่การลากมีการระบุที่การกำหนดค่าภายใต้ 'คอนเทนเนอร์เพจ'

ขั้นแรก คุณควรวางรายการเป้าหมายไว้ภายในพื้นที่แก้ไขภาพ คลิกที่ "ย้ายเลเยอร์" จากนั้นลากรายการไปยังพื้นที่แก้ไขภาพโดยกดปุ่มซ้ายของเมาส์ค้างไว้

พื้นที่ที่สามารถลากได้จะถูกชี้ขึ้นด้วยเส้นขอบสีน้ำเงินทึบ

โปรแกรมแก้ไขข้อความ

โปรแกรมแก้ไขข้อความช่วยให้คุณสามารถแก้ไขข้อความภายในพื้นที่โปรแกรมแก้ไขภาพได้
มีคุณสมบัติดังต่อไปนี้:

  • ทำให้ข้อความเป็นตัวหนา
  • ทำให้ข้อความเป็นตัวเอียง
  • ขีดเส้นใต้ข้อความ
  • เปลี่ยนการจัดแนวข้อความ
  • เปลี่ยนตัวพิมพ์ข้อความ
  • เพิ่มลิงค์ไปยังข้อความ
  • เปลี่ยนสีข้อความ
  • เปลี่ยนขนาดตัวอักษร
  • เปลี่ยนระยะห่างแนวตั้ง
  • เปลี่ยนแบบอักษรข้อความ text
  • เปลี่ยนความสูงของเส้น
  • เปลี่ยนระยะห่างตัวอักษร

เมื่อไม่สามารถใช้คุณลักษณะกับส่วนข้อความบางอย่างได้ (เช่น การจัดตำแหน่งข้อความ) ไอคอนที่เกี่ยวข้องของตัวแก้ไขจะถูกปิดใช้งาน (แสดงเป็นสีเข้ม)

ตัวแก้ไขโค้ด

โปรแกรมแก้ไขโค้ด Novi ใช้ได้ในโหมดการออกแบบเท่านั้น

คุณอาจพบรายการคุณลักษณะด้านล่าง:

  • เปิดใช้งานการแก้ไขซอร์สโค้ด (HTML, CSS และ JS)
  • เข้ากันได้อย่างสมบูรณ์กับ Emmet fully
  • รวม HTML, การตรวจสอบ CSS โดยค่าเริ่มต้น
  • ใช้การแก้ไขของคุณทันทีเมื่อเปิดใช้งาน "Autodeploy"
  • ให้ตัวเลือกในการสลับระหว่างไฟล์ HTML, CSS, JS ทั้งหมดที่ใช้บนหน้าเป้าหมาย
  • ไฮไลต์ซอร์สโค้ดของรายการในตัวแก้ไขโค้ดเมื่อคุณกดที่รายการด้วยปุ่มซ้ายของเมาส์ในโปรแกรมแก้ไขภาพเพื่อการนำทางที่ใช้งานง่ายบนโค้ด HTML

คุณสมบัติกริด CSS

ในเวอร์ชัน 0.9.6 ของตัวสร้าง Novi มีการเพิ่มความสามารถในการทำงานกับคุณสมบัติกริด CSS  คุณสมบัติ grid-template เป็นคุณสมบัติชวเลขสำหรับรายการถัดไป:

  • grid-template-rows   (กำหนดจำนวนและความสูงของแถวในรูปแบบกริด);
  • grid-template-columns   (กำหนดจำนวนและความกว้างของคอลัมน์ในรูปแบบกริด);
  • grid-template-areas   (ระบุพื้นที่ภายในโครงร่างกริด)

ด้วยความช่วยเหลือของคุณสมบัติกริด คุณสามารถกำหนดจำนวนแถวและคอลัมน์ที่ต้องการ ตั้งชื่อพื้นที่ภายใน และใช้กริด CSS ดังกล่าวเพื่อสร้างเค้าโครงของระดับความซับซ้อนขั้นสูง

ต่อไปนี้คือตัวอย่างไวยากรณ์ CSS ที่พร้อมใช้งานซึ่งขณะนี้ได้รับการสนับสนุนอย่างเต็มที่โดยเครื่องมือตรวจสอบของ Novi builder:

.item1 { พื้นที่กริด: ส่วนหัว; }  .item2 { พื้นที่กริด: ซ้าย; }  .item3 { พื้นที่กริด: หลัก; }  .item4 { พื้นที่กริด: ขวา; }  .item5 { พื้นที่กริด: ส่วนท้าย; }  .grid-container {   แสดง: กริด;   เทมเพลตกริด:    'ส่วนหัว ส่วนหัว ส่วนหัว ส่วนหัว ส่วนหัว ส่วนหัว '    ด้านซ้าย หลัก หลัก หลัก ด้านขวา '    ' ส่วนท้ายด้านซ้าย   ตารางช่องว่าง: 1px;   สีพื้นหลัง: #2196F3;   ช่องว่างภายใน: 1px;  }

การใช้ CSS ดังกล่าวพร้อมกับโค้ด HTML นี้:

           
หัวข้อ
แถบด้านข้างซ้าย
พื้นที่หลัก
แถบด้านข้างขวา
ส่วนท้าย

คุณจะได้ผลลัพธ์ดังต่อไปนี้:

ตรวจสอบเพิ่มเติมเกี่ยวกับการใช้คุณสมบัติกริด CSS ได้ที่ลิงค์ต่อไปนี้:

https://www.w3schools.com/cssref/pr_grid-template.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
https://css-tricks.com/snippets/css/complete-guide-grid/

เคล็ดลับ:   เบราว์เซอร์เวอร์ชันเก่าไม่สนับสนุนคุณสมบัติกริด CSS (เช่น Chrome เวอร์ชันขั้นต่ำที่ต้องใช้คือ v.57)  เราขอแนะนำให้คุณปรับปรุงซอฟต์แวร์ของคุณให้ทันสมัยอยู่เสมอเพื่อรับประกันการแสดงผลเว็บไซต์ของคุณอย่างถูกต้อง

เมนูบริบท

เมนูบริบทช่วยให้คุณจัดการรายการในโปรแกรมแก้ไขภาพได้
ชุดของการดำเนินการที่ดำเนินการโดยใช้เมนูบริบทจะขึ้นอยู่กับโหมด Novi ปัจจุบัน

เมนูบริบทใน "โหมดแก้ไข"

เมนูบริบทใน "โหมดแก้ไข" ช่วยให้คุณทำสิ่งต่อไปนี้ได้:

  • ตัดรายการ
  • คัดลอกรายการ
  • วางก่อน ภายใน หรือหลังรายการที่เลือก
  • ลบรายการ
  • ทำซ้ำรายการ
  • ตรวจสอบซอร์สโค้ดของรายการ

ในการตัดรายการ คุณควรวางเคอร์เซอร์ไว้เหนือรายการนั้น ให้คลิกที่รายการนั้นด้วยปุ่มเมาส์ขวาและเลือกการทำงาน "ตัด" ในเมนูบริบท

ในการคัดลอกรายการ คุณควรวางเมาส์ไว้เหนือเคอร์เซอร์ของเมาส์ ให้คลิกที่รายการนั้นด้วยปุ่มเมาส์ขวาและเลือกการดำเนินการ "คัดลอก" ในเมนูบริบท

ในการวางรายการที่ถูกตัดหรือคัดลอกก่อนหน้านี้ คุณควรเลื่อนเคอร์เซอร์ของเมาส์ไปที่พื้นที่เป้าหมาย คลิกด้วยปุ่มเมาส์ขวาและเลือกการดำเนินการ "วาง" ในเมนูบริบท  คุณจะต้องระบุตำแหน่งที่จะแทรกรายการด้วย

ในการลบรายการ คุณควรวางเมาส์ไว้เหนือเคอร์เซอร์ของเมาส์ ให้คลิกที่รายการนั้นด้วยปุ่มเมาส์ขวาและเลือกการดำเนินการ "ลบ" ในเมนูบริบท

ในการโคลนรายการ คุณควรวางเมาส์ไว้เหนือเคอร์เซอร์ของเมาส์ ให้คลิกที่รายการนั้นด้วยปุ่มเมาส์ขวาและเลือกการดำเนินการ "ทำซ้ำ" ในเมนูบริบท

ในการตรวจสอบซอร์สโค้ดของรายการ คุณควรวางเมาส์ไว้เหนือเคอร์เซอร์ของเมาส์ ให้คลิกที่รายการนั้นด้วยปุ่มเมาส์ขวาและเลือกการทำงาน "ซอร์สโค้ด" ในเมนูบริบท  ตัวสร้างจะสลับไปที่โหมดการออกแบบและซอร์สโค้ดของรายการจะถูกเน้นในตัวแก้ไขโค้ด

ด้านล่างนี้ คุณอาจพบตัวอย่างการใช้เมนูบริบทของโปรแกรมแก้ไขภาพ:

เมนูบริบทใน "โหมดการออกแบบ"

เมนูบริบทของ "โหมดการออกแบบ" ของ Novi เป็นเวอร์ชันเพิ่มเติมซึ่งมีอยู่ใน "โหมดแก้ไข"

ตัวเลือกเพิ่มเติมมีดังต่อไปนี้:

  • เลือกรายการหลัก
  • บันทึกรายการเป็นพรีเซ็ต

ด้านล่างนี้ คุณอาจพบตัวอย่างการใช้เมนูบริบทของโปรแกรมแก้ไขภาพในโหมดออกแบบ:

ห้องสมุดสื่อ

ไลบรารีสื่อประกอบด้วยไฟล์กราฟิกทั้งหมดที่ใช้ในเทมเพลต  ช่วยให้คุณเพิ่มและลบไฟล์กราฟิกและวิดีโอทั้งหมดของโครงการได้อย่างง่ายดาย

ในการเข้าถึงไลบรารีสื่อ ให้ใช้เมนูหลักของ Novi Builder

ไลบรารีสื่อมีลักษณะดังนี้:

  • แผงหมวดหมู่ 3 หมวดหมู่สงวนไว้โดย Novi ("แสดงทั้งหมด", "เฉพาะรูปภาพ", "วิดีโอเท่านั้น");
  • หมวดหมู่โครงการที่กำหนดเอง
  • ปุ่มสำหรับเพิ่มหมวดหมู่ที่กำหนดเอง
  • ครึ่งแผง;
  • แผงอัปโหลดสื่อ
  • เมนูบริบทของแผงสื่อ

* หมวดหมู่ที่กำหนดเองคือหมวดหมู่ที่สร้างโดยผู้ใช้  หมวดหมู่ที่กำหนดเองรองรับฟังก์ชันต่อไปนี้:

  • เปลี่ยนชื่อหมวดหมู่;
  • การล้างข้อมูลประเภทสื่อ
  • การลบหมวดหมู่;
  • การเพิ่มไฟล์สื่อในหมวดหมู่
วิธีเพิ่มไฟล์มีเดียในไลบรารี

มีหลายวิธีในการเพิ่มไฟล์ลงในไลบรารีสื่อ  ในครั้งแรกคุณต้อง:

  • เปิดเมนูหลักของ Novi Builder;
  • เลือกรายการ "ห้องสมุดสื่อ";
  • กดปุ่ม "อัปโหลดไฟล์";
  • เลือกไฟล์ กดปุ่ม "อัปโหลด"

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

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

*เมื่อคุณอัปโหลดไฟล์ใหม่ไปยังแกลเลอรีสื่อ ไฟล์นั้นจะถูกเพิ่มในหมวดหมู่ที่ใช้งานอยู่ในปัจจุบัน ยกเว้นกรณีของการอัปโหลดไฟล์วิดีโอเมื่อหมวดหมู่ที่ใช้งานคือ "รูปภาพเท่านั้น" และในทางกลับกัน

วิธีการครอบตัดรูปภาพในไลบรารีสื่อ

ในการครอบตัดรูปภาพในไลบรารีสื่อ คุณควร:

  • เปิดไลบรารีสื่อ
  • เรียกเมนูบริบทของไฟล์เป้าหมายโดยคลิกขวาที่ไฟล์
  • เลือกรายการ "ครอบตัดรูปภาพ"
  • เลือกพื้นที่ที่ต้องการ
  • กดปุ่ม "ครอบตัดรูปภาพ"
วิธีย่อภาพในไลบรารีสื่อ

ในการลดขนาดรูปภาพในไลบรารีสื่อ คุณต้อง:

  • เปิดห้องสมุดสื่อ open
  • คลิก RMB บนไฟล์เป้าหมายเพื่อเปิดเมนูบริบท
  • เลือก "ลดภาพ"
  • ระบุขนาดที่ต้องการโดยใช้กล่องเลื่อนหรืออินพุต
  • กด "สมัคร"  หากคุณต้องการเปลี่ยนสำเนาของรูปภาพต้นฉบับ ให้ทำเครื่องหมายที่ "คัดลอกรูปภาพต้นฉบับ" ในสถานะใช้งาน
วิธีลบไฟล์ออกจากไลบรารีสื่อ

ในการลบไฟล์ออกจากไลบรารีสื่อ คุณควร:

  • เปิดไลบรารีสื่อ
  • เลือกไฟล์ที่ต้องการ (ไลบรารีรองรับการเลือกหลายรายการด้วย Ctrl หรือ Shift);
  • เรียกเมนูบริบทของไฟล์ที่เลือกโดยกดปุ่มขวาของเมาส์
  • เลือกรายการ "ลบไฟล์ทั้งหมด"

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

วิธีเพิ่มไฟล์มีเดียในหมวดหมู่

ในการเพิ่มไฟล์สื่อในหมวดหมู่ คุณควร:

  • เปิดไลบรารีสื่อ
  • เลือกไฟล์ที่จำเป็น (ไลบรารีสื่อรองรับการเลือกหลายรายการด้วย Ctrl หรือ Shift);
  • กดปุ่มขวาของเมาส์ ลากไฟล์ไปยังพื้นที่ชื่อหมวดหมู่เป้าหมาย

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

วิธีลบไฟล์มีเดียออกจากหมวดหมู่

ในการลบไฟล์สื่อออกจากหมวดหมู่ คุณควร:

  • เปิดไลบรารีสื่อ
  • เลือกหมวดหมู่ที่กำหนดเอง
  • เลือกไฟล์ที่ต้องการ (ไลบรารีสื่อรองรับการเลือกหลายรายการด้วย Ctrl หรือ Shift);
  • เรียกเมนูบริบทของไฟล์ที่เลือกโดยกดปุ่มขวาของเมาส์
  • เลือกรายการ "ลบไฟล์จากหมวดหมู่" สำหรับไฟล์เป้าหมาย

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

วิธีเพิ่มหมวดหมู่ในไลบรารีสื่อ

ในการเพิ่มหมวดหมู่ในไลบรารี คุณควร:

  • เปิดไลบรารีสื่อ
  • กดปุ่ม "เพิ่มหมวดหมู่ใหม่"

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

วิธีลบหมวดหมู่ออกจากไลบรารีสื่อ

ในการลบหมวดหมู่ออกจากไลบรารีสื่อ คุณควร:

  • เปิดไลบรารีสื่อ
  • เลือกหมวดหมู่ที่กำหนดเองที่จำเป็น
  • เรียกเมนูบริบทของหมวดหมู่ที่เลือกโดยคลิกขวา
  • เลือกรายการ "ลบหมวดหมู่"

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

วิธีเปลี่ยนชื่อหมวดหมู่

ในการเปลี่ยนชื่อประเภท คุณควร:

  • เปิดไลบรารีสื่อ
  • เลือกหมวดหมู่ที่กำหนดเองที่จำเป็น
  • เรียกเมนูบริบทของหมวดหมู่ที่เลือกโดยคลิกขวาหรือดับเบิลคลิกปุ่มซ้ายของเมาส์ที่ชื่อหมวดหมู่
  • เลือกรายการ "เปลี่ยนชื่อหมวดหมู่" ป้อนชื่อที่ต้องการ กด Enter

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

วิธีลบไฟล์มีเดียออกจากหมวดหมู่

ในการลบไฟล์มีเดียทั้งหมดออกจากหมวดหมู่ คุณควร:

  • เปิดไลบรารีสื่อ
  • เลือกหมวดหมู่ที่กำหนดเองที่จำเป็น
  • เรียกเมนูบริบทของหมวดหมู่ที่เลือกโดยคลิกขวา
  • เลือกรายการ "ล้างหมวดหมู่"

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

วิธีอัปโหลดไฟล์โครงการไปยังแกลเลอรีสื่อ

ในการอัปโหลดไฟล์โครงการไปยังแกลเลอรีสื่อ คุณต้อง:

  • เปิดห้องสมุดสื่อ
  •  กด "อัปโหลดไฟล์โครงการ"  
  • ในหน้าต่างโมดอลที่เปิดอยู่ ให้ตรวจสอบเส้นทางไปยังไฟล์โครงการและหลังจากนั้นกด "นำเข้า"  หากเส้นทางไม่เหมาะสม คุณต้องคลิก "เปลี่ยนเส้นทางไดเรกทอรี" และแทนที่ด้วยเส้นทางที่ถูกต้องในช่องที่เกี่ยวข้อง "เส้นทางไดเรกทอรีรูปภาพ:" และ "เส้นทางไดเรกทอรีวิดีโอ:"

หากต้องการบันทึกการเปลี่ยนแปลง ให้ใช้ปุ่ม "บันทึก" ที่มุมขวาของแถบด้านบน

การรวม Unsplash

ในเวอร์ชัน 0.9.6 ของตัวสร้าง Novi เราได้แนะนำตัวเลือกในการเพิ่มรูปภาพ Unsplash ลงในไลบรารีสื่อของคุณ  Unsplash เป็นบริการที่มอบภาพถ่ายที่ได้รับอนุญาตอย่างเต็มรูปแบบกว่า 1,000,000 ภาพจากทั่วทุกมุมโลกฟรีอย่างแน่นอน  ด้วยวิธีนี้ คุณจะสามารถเข้าถึงรูปภาพคุณภาพสูงหลายพันรายการที่อนุญาตให้ใช้ในโครงการเว็บของคุณได้โดยตรงผ่านอินเทอร์เฟซของตัวสร้าง

ในการเข้าถึงและใช้แกลเลอรี Unsplash ให้ทำตามขั้นตอนต่อไปนี้:

  • คลิกที่ไอคอนเมนูที่มุมบนขวาของหน้าจอตัวสร้าง
  • ไปที่เมนู 'Media Library'
  • ค้นหาปุ่ม "รูปภาพจาก Unsplash" ที่ด้านบนขวาของป๊อปอัป  จดจำได้ง่ายเนื่องจากไอคอนโลโก้ Unsplash ถัดจากชื่อที่เกี่ยวข้อง

  • เรียกดูภาพถ่ายหุ้นโดยใช้คำหลักที่เกี่ยวข้องใน  การค้นหา   ข้อมูล
  • สุดท้าย ให้คลิกที่ไอคอนดาวน์โหลดสีน้ำเงินบนรูปภาพที่เลือกเพื่อบันทึกไว้ในแกลเลอรีสื่อของคุณ

    เคล็ดลับ:   แต่ละภาพมีช่างภาพระบุไว้ด้านล่าง เพื่อให้คุณสามารถตรวจสอบภาพถ่ายที่เหลือของเขา หรือติดตาม/ติดต่อผู้เขียนภาพบน  https://unsplash.com   หากจำเป็น

  • หลังจากเพิ่มรูปภาพ Unsplash ลงในแกลเลอรีของคุณเรียบร้อยแล้ว ไอคอนดาวน์โหลดจะเปลี่ยนเป็นเครื่องหมายถูก และรูปภาพจะเข้าถึงได้จากไฟล์สื่อของโครงการโดยตรง  หากต้องการดูที่นั่น ให้คลิกปุ่ม   "ย้อนกลับ"   ที่ด้านบนซ้ายของแกลเลอรี Unsplash
  • หรือคุณอาจต้องการสร้างโฟลเดอร์หมวดหมู่เฉพาะและเพิ่มรูปภาพ Unsplash ที่นั่นเพื่อจัดระเบียบไฟล์สื่อของคุณอย่างดี

เคล็ดลับ: โปรด   ทราบว่าการใช้ไฟล์สื่อหลายไฟล์บนหน้าเว็บอาจทำให้ความเร็วในการโหลดช้าลง  เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น อย่าลืมปรับเนื้อหาในหน้าของคุณให้เหมาะสม โดยเฉพาะไฟล์มีเดีย เช่น รูปภาพและวิดีโอ  หากจำเป็น ผู้เชี่ยวชาญของเราสามารถทำงานนี้ให้คุณได้โดยเป็นส่วนหนึ่งของบริการเพิ่มประสิทธิภาพที่เราจัดเตรียมไว้เพื่อประหยัดเวลาและความพยายามของคุณ  สำหรับรายละเอียดเพิ่มเติมกรุณาติดต่อเราได้ที่   https://novibuilder.com/contact

ตัวจัดการไอคอน

เครื่องมือนี้ให้ตัวเลือกแก่คุณในการจัดการฟอนต์ที่เป็นสัญลักษณ์ของโปรเจ็กต์  โดยค่าเริ่มต้น ตัวสร้างมีฟอนต์สัญลักษณ์ยอดนิยม 7 แบบที่พร้อมใช้งาน:

  • FontAwesome
  • ไอคอนการออกแบบวัสดุ
  • ไอคอนวัสดุโดย Google
  • ไอคอนแบน Bigmug Line
  • ไอคอนแบน Budicons เปิดตัว
  • ไอคอนแบน Budicons ฟรี
  • GlyphIcons ลูกครึ่ง

ใช้เมนูหลักของ Novi Builder เพื่อเข้าถึงตัวจัดการไอคอน

ตัวจัดการไอคอนมีลักษณะดังนี้:

  • เลือกตัวเลือกเพื่อเลือกตระกูลฟอนต์ (ในกลุ่มฟอนต์พื้นฐาน 7 ตระกูล ซึ่งรวมอยู่โดยค่าเริ่มต้น)
  • ช่องค้นหาเพื่อค้นหาภายในตระกูลแบบอักษรที่เลือก
  • พื้นที่เอาต์พุตของฟอนต์สัญลักษณ์ที่เลือก
  • ปุ่มสำหรับอัปโหลดไฟล์เก็บถาวรของฟอนต์สัญลักษณ์ที่กำหนดเอง
วิธีเพิ่มแบบอักษรที่กำหนดเองให้กับโปรเจ็กต์ตัวสร้าง

ในการเพิ่มแบบอักษรสัญลักษณ์ที่กำหนดเองให้กับโปรเจ็กต์ ให้ทำตามขั้นตอนต่อไปนี้:

  • เปิดตัวจัดการไอคอน สามารถเข้าถึงได้จากเมนูตัวสร้างหลัก
  • คลิกปุ่ม "อัปโหลดไอคอนแพ็ค"
  • เรียกดูไฟล์เก็บถาวรแบบอักษรของคุณ  ควรเป็นไปตามข้อกำหนดที่ระบุไว้ในส่วน "การสร้างไฟล์เก็บถาวรสำหรับการนำเข้าแบบอักษรที่เป็นสัญลักษณ์"
  • นำเข้าแบบอักษรและบันทึกการเปลี่ยนแปลงโดยกดปุ่ม บันทึกโครงการ ที่มุมบนขวาของแผงตัวสร้างหลัก
การสร้างไฟล์เก็บถาวรสำหรับการนำเข้าฟอนต์ที่เป็นสัญลักษณ์

คุณควรเตรียมไฟล์เก็บถาวรฟอนต์เพื่อนำเข้าฟอนต์เข้าสู่ตัวสร้างสำเร็จ  จะต้องปฏิบัติตามกฎต่อไปนี้:

  • ไฟล์เก็บถาวรไม่ควรมีไดเร็กทอรีพาเรนต์สำหรับไฟล์
    • ไม่ถูกต้อง:
      • font-awesome.zip
        • ตัวอักษรที่น่ากลัวa
          • font-awesome.css
          • แบบอักษร
            • FontAwesome.otf
            • fontawesome-webfont.eot
            • fontawesome-webfont.ttf
    • แก้ไข:
      • font-awesome.zip
        • font-awesome.css
        • FontAwesome.otf
        • fontawesome-webfont.eot
        • fontawesome-webfont.ttf
  • ไฟล์เก็บถาวรต้องมีไฟล์ฟอนต์ CSS
  • ไฟล์ฟอนต์ CSS ต้องมีกฎ @font-face พร้อมการอ้างอิงทั้งหมดไปยังไฟล์ฟอนต์และคุณสมบัติฟอนต์แฟมิลี่ที่ระบุ
  • ไฟล์ฟอนต์ CSS ต้องมีชุดของคลาสเพื่อกำหนดไอคอน
การแทนที่ไอคอนในโครงการ

คุณควรใช้ปลั๊กอินการแทนที่ไอคอนเพื่อเปลี่ยนไอคอนภายในโครงการ  คำอธิบายโดยละเอียดของปลั๊กอินมีอยู่ที่ส่วนปลั๊กอินไอคอน ใต้ปลั๊กอิน

ส่วน SEO

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

ในการเข้าถึงส่วน SEO ให้ทำตามขั้นตอนต่อไปนี้:

  • คลิกที่ไอคอนเมนูที่มุมบนขวาของหน้าจอตัวสร้าง
  • ไปที่เมนู 'การกำหนดค่า'
  • เลือกแท็บ 'SEO' จากตัวเลือกที่มี

มาดูการตั้งค่าส่วนบุคคลของส่วน 'SEO' กันดีกว่า  มีนวัตกรรมที่สำคัญที่สุดสองประการ - ตอนนี้คุณมีความสามารถในการสร้างไฟล์ sitemap.xml และ robots.txt ผ่านทางตัวสร้าง  ดังนั้นการตั้งค่าจึงแบ่งออกเป็นสองส่วนสำหรับการกำหนดค่าและสร้างแต่ละไฟล์แยกกัน

แผนผังเว็บไซต์

โดเมนแผนผังเว็บไซต์   - ระบุโดเมนที่ถูกต้องที่คุณเปิดเว็บไซต์ของคุณเพื่อการทำงานที่ถูกต้องของไฟล์ sitemap.xml  เช่น   http://example.com

หลังจากที่คุณป้อนโดเมนแผนผังเว็บไซต์ ตำแหน่งไฟล์จะปรากฏขึ้นด้านล่าง ภายใต้ข้อความ ' ไฟล์ แผนผังเว็บไซต์ที่ สร้างไว้ที่นี่:  '  เช่น   http://example.com/sitemap.xml

บล็อกถัดไปช่วยให้คุณกำหนดค่าต่อไปนี้ในเมนูแบบเลื่อนลงตามลำดับ:

  • ลำดับความสำคัญของหน้าแรก   (จาก 0.0 ถึง 1.0 โดยค่าเริ่มต้นถูกตั้งค่าเป็น 1.0) - ตั้งค่าความสำคัญสัมพัทธ์ของหน้าหลักของเว็บไซต์ของคุณ
  • ลำดับความสำคัญของหน้าอื่น ๆ   (จาก 0.0 ถึง 1.0 โดยค่าเริ่มต้นถูกตั้งค่าเป็น 0.8) - ตั้งค่าความสำคัญสัมพัทธ์ของหน้าภายในของเว็บไซต์ของคุณ
  • ความถี่ในการเปลี่ยนหน้าแรก   (เสมอ/ชั่วโมง/รายวัน/รายสัปดาห์/รายเดือน/รายปี/ไม่เคย) - กำหนดค่าขึ้นอยู่กับว่าคุณวางแผนที่จะเพิ่มข้อมูลใหม่ในหน้าหลักของเว็บไซต์ของคุณบ่อยแค่ไหน
  • ความถี่ในการเปลี่ยนหน้าอื่นๆ   (เสมอ/ชั่วโมง/รายวัน/รายสัปดาห์/รายเดือน/รายปี/ไม่เคย) - กำหนดค่าขึ้นอยู่กับว่าคุณวางแผนที่จะแก้ไขหรือเพิ่มหน้าภายในบ่อยแค่ไหน

เมื่อป้อนพารามิเตอร์ทั้งหมดตามข้อมูลเฉพาะเว็บไซต์ของคุณ ให้คลิกที่ลิงก์สีน้ำเงิน 'สร้าง' ด้านล่าง  ไฟล์ sitemap.xml ที่สร้างขึ้นใหม่จะมีลิงก์ของหน้าเว็บไซต์ของคุณและทำหน้าที่เป็นแผนงานสำหรับระบบการจัดทำดัชนีเครื่องมือค้นหา

เคล็ดลับ:   อย่าลืมเก็บโฟลเดอร์เซิร์ฟเวอร์ที่สามารถเขียนได้ เพื่อให้ไฟล์ถูกสร้างขึ้นโดยไม่มีปัญหาใดๆ

ROBOTS.TXT

robots.txt ที่แนะนำ   (ช่องทำเครื่องหมาย เลือกไว้โดยค่าเริ่มต้น) - ทำเครื่องหมายในช่องนี้เพื่อใช้ไฟล์ที่แนะนำ

แนะนำให้โปรแกรมรวบรวมข้อมูลเว็บไม่เข้าถึงและสร้างดัชนีเว็บไซต์ของคุณ   (ช่องทำเครื่องหมาย ไม่ได้เลือกโดยค่าเริ่มต้น) - ตัวเลือกเพื่อป้องกันไม่ให้เครื่องมือค้นหาจัดทำดัชนีเว็บไซต์ของคุณ  อาจมีประโยชน์ในระหว่างการปรับปรุงเว็บไซต์ ในขณะที่อยู่ในสถานะการบำรุงรักษาและคุณยังไม่พร้อมที่จะเผยแพร่สู่สาธารณะ  ตัวเลือกนี้ใช้ได้เฉพาะในกรณีที่ใช้ไฟล์ robots.txt ที่แนะนำเท่านั้น

URL ไปยังไฟล์ sitemap.xml ของคุณ   - ระบุเส้นทางของไฟล์ sitemap.xml ที่นี่ หรือเว้นว่างไว้เพื่อให้ตัวเลือกนี้รับค่าดีฟอลต์ (กำหนดไว้ในส่วน SITEMAP)

รหัสที่กำหนดเองในไฟล์ robots.txt   (ว่างเปล่าโดยค่าเริ่มต้น) - หากจำเป็น ให้ใช้พื้นที่ข้อความนี้เพื่อใส่กฎของคุณเองที่ควรวางไว้ในไฟล์ robots.txt

ถัดไป คลิกลิงก์ 'สร้าง' สีน้ำเงินด้านล่างเพื่อสร้างไฟล์ robots.txt  ด้วยความช่วยเหลือของไฟล์นี้ คุณจะสามารถซ่อนข้อมูลที่ละเอียดอ่อนหรือเนื้อหาที่ซ้ำซ้อนจากเว็บโรบ็อตได้ในเวลาไม่นาน

เคล็ดลับ:   อีกทางเลือกหนึ่ง การกำหนดค่าแบบมืออาชีพของส่วนนี้อาจถูกสั่งจากทีมผู้เชี่ยวชาญ SEO ของเรา พร้อมด้วยการเขียนเนื้อหาคุณภาพสูงสำหรับเว็บไซต์ของคุณ  โปรดตรวจสอบรายละเอียดเพิ่มเติมที่   หน้า นี้

เครื่องมือแสดงตัวอย่างความละเอียด

คุณสามารถค้นหาเครื่องมือปรับขนาดได้ที่อินเทอร์เฟซหลักของ Novi  สามารถใช้สำหรับการแสดงตัวอย่างโปรแกรมแก้ไขภาพบนหน้าจอขนาดต่างๆ

Resizer มี 7 มิติที่แตกต่างกัน โดยค่าเริ่มต้น “Desktop Full-HD” จะเปิดใช้งานอยู่  นอกจากนี้ยังมีมิติข้อมูลดังต่อไปนี้:

  • ภาพเหมือนมือถือ 320x480 px
  • แนวนอนมือถือ 480x320 px
  • แนวตั้งแท็บเล็ต 768x1024 px
  • แนวนอนแท็บเล็ต 1024x768 px
  • โน้ตบุ๊ก 1280x720 px
  • พีซีตั้งโต๊ะ 1600x900 px

โปรดทราบว่า resizer จะแสดงโปรเจ็กต์ของคุณบนขนาดหน้าจอต่างๆ แต่จะไม่จำลองอุปกรณ์  ดังนั้น ในบางกรณี การแสดงผลอาจแตกต่างกันในอุปกรณ์จริง

ส่งออก

ส่งออกเทมเพลต

การส่งออกเทมเพลตใน Novi Builder มีอยู่ในเมนูหลักของอินเทอร์เฟซ รายการ "ส่งออก", "ส่งออกเทมเพลต" การส่งออกช่วยให้สามารถบันทึกไฟล์ ZIP ในตำแหน่งที่เลือก  โครงสร้างเทมเพลตจะได้รับการเก็บรักษาไว้อย่างสมบูรณ์

โครงการส่งออก

การส่งออกโปรเจ็กต์ใน Novi Builder ใช้งานได้จากเมนูหลักของอินเทอร์เฟซ รายการ "ส่งออก" "ส่งออกโครงการ" การส่งออกช่วยให้สามารถบันทึกไฟล์ ZIP ในตำแหน่งที่เลือก  โครงสร้างโครงการจะได้รับการเก็บรักษาไว้อย่างสมบูรณ์

นำเข้า

เพิ่มฟีเจอร์ของการนำเข้าโปรเจ็กต์และเทมเพลตไปยังตัวสร้างแล้ว

เมื่อทำงานกับโครงการขนาดใหญ่ (ขนาดขึ้นอยู่กับการตั้งค่าเซิร์ฟเวอร์ของคุณ พารามิเตอร์ post_max_size และ upload_max_filesize) หรือเทมเพลต เราขอแนะนำให้คุณเพิ่มค่าของพารามิเตอร์ post_max_size และ upload_max_filesize ในไฟล์การตั้งค่าของ PHP

การนำเข้าโครงการ

เตรียมนำเข้าโครงการ

ก่อนนำเข้าโปรเจ็กต์ของคุณ จำเป็นต้องสร้างไฟล์เก็บถาวรที่เหมาะสม (หากไฟล์เก็บถาวรนั้นสร้างโดยตัวสร้างในระหว่างการเอ็กซ์พอร์ต ไฟล์นั้นจะตรงตามข้อกำหนดทั้งหมดที่เขียนไว้ด้านล่าง)

โครงการ Novi มีโครงสร้างดังต่อไปนี้โดยค่าเริ่มต้น:

  • แม่แบบ – โฟลเดอร์โครงการ
  • .novi – โฟลเดอร์เสริม ประกอบด้วยไฟล์แกลเลอรีสื่อและการแสดงตัวอย่างหน้า
  • bat – โฟลเดอร์ที่มีสคริปต์ php ของโครงการ
  • css – โฟลเดอร์ที่มีรูปแบบโครงการ
  • อิลิเมนต์ – โฟลเดอร์เสริม ซึ่งประกอบด้วยโปรเจ็กต์ที่ตั้งไว้ล่วงหน้า
  • ฟอนต์ – โฟลเดอร์ที่มีฟอนต์โปรเจ็กต์
  • ภาพ – โฟลเดอร์ที่มีรูปภาพโครงการ
  • js - รหัส JS ของโครงการ
  • index.html – หน้า HTML ของโครงการ
  • project.json – ไฟล์คอนฟิกูเรชันโปรเจ็กต์

ในการนำเข้าโครงการของคุณ คุณต้องเตรียมไฟล์ ZIP ซึ่งจะรวมเนื้อหาทั้งหมดของไดเร็กทอรีเทมเพลต

ความสนใจ!  ไฟล์เก็บถาวรต้องไม่มีไดเร็กทอรีหลักเพิ่มเติม

ไม่ถูกต้อง:

  • template.zip
    • แม่แบบ
      • .ใหม่
      • ...
      • โครงการ.json

แก้ไข:

  • template.zip
    • .ใหม่
    • ...
    • โครงการ.json

ความสนใจ!  โฟลเดอร์รูทของไฟล์เก็บถาวรต้องมีไฟล์ .html และไฟล์ project.json อย่างน้อยหนึ่งไฟล์

เพจที่ไม่ได้อยู่ในโฟลเดอร์รูทของไฟล์เก็บถาวรจะไม่สามารถแก้ไขในตัวสร้างได้

การนำเข้าโครงการ

หากต้องการนำเข้าโครงการ ให้เปิดเมนูหลัก เลือก "นำเข้า" "นำเข้าโครงการ"

นำเข้าเทมเพลต

กำลังเตรียมการนำเข้าเทมเพลต

ก่อนนำเข้าเทมเพลตของคุณ จำเป็นต้องสร้างไฟล์เก็บถาวรที่เหมาะสม (หากไฟล์เก็บถาวรนั้นสร้างโดยตัวสร้างในระหว่างการส่งออก ไฟล์จะตรงตามข้อกำหนดทั้งหมดที่เขียนไว้ด้านล่าง)

  • ไฟล์เก็บถาวรต้องไม่มีโฟลเดอร์หลักเพิ่มเติม

ไม่ถูกต้อง:

  • site.zip
    • เว็บไซต์
      • ภาพ
      • ...
      • index.html

แก้ไข:

  • site.zip
    • ภาพ
    • ...
    • index.html

โฟลเดอร์รูทของไฟล์เก็บถาวรต้องมีไฟล์ .html อย่างน้อยหนึ่งไฟล์ ทุกหน้าที่ไม่อยู่ในไดเร็กทอรีรากจะไม่สามารถใช้ได้ในตัวจัดการเพจของตัวสร้าง

จะใช้งานไม่ได้:

  • site.zip
    • ภาพ
    • css
    • ...
    • หน้า
      • index.html
      • ...
      • contact.html

จะสามารถใช้ได้:

  • site.zip
    • ภาพ
    • css
    • ...
    • index.html
    • ...
    • contact.html

นำเข้าเทมเพลต

หากต้องการนำเข้าเทมเพลต ให้เปิดเมนูหลัก เลือก "นำเข้า" "นำเข้าเทมเพลต"

การแก้ไขปัญหา:

  • หลังจากนำเข้าโปรเจ็กต์/เทมเพลตและรีสตาร์ทตัวสร้าง ฉันแนะนำให้ดำเนินการอีกครั้ง
    • คุณต้องตรวจสอบโครงสร้างของแม่แบบ/โครงการของคุณให้สอดคล้องกับข้อกำหนดที่อธิบายไว้ในส่วนนี้
    • ในกรณีของการนำเข้าโปรเจ็กต์ คุณควรตรวจสอบไฟล์คอนฟิกูเรชันโปรเจ็กต์ project.json
  • ระหว่างกระบวนการอัปโหลดไฟล์เก็บถาวร เกิดข้อผิดพลาดร้ายแรง
    • เราแนะนำให้เพิ่มค่าพารามิเตอร์ post_max_size และ upload_max_filesize ใน php.ini

สิ่งพิมพ์

การเผยแพร่โครงการพร้อมใช้งานจากแผงหลักของอินเทอร์เฟซ Novi และจะดำเนินการตามเส้นทางที่คุณระบุไว้ในการตั้งค่าโครงการ รายการ "เส้นทางการเผยแพร่"

การเผยแพร่สามารถทำได้ภายในเซิร์ฟเวอร์ที่ติดตั้ง Novi Builder เท่านั้น

ระวังตัวไว้!  การเผยแพร่ซ้ำจะอัปเดตเนื้อหาของเว็บไซต์ของคุณก็ต่อเมื่อแอตทริบิวต์ "เส้นทางการเผยแพร่" ในการตั้งค่าโครงการยังคงไม่เปลี่ยนแปลง

ก่อนเผยแพร่ทุกครั้ง คุณจะเห็นหน้าต่างยืนยัน  คุณสามารถปิดใช้งานตัวเลือกนี้ในการตั้งค่าโปรเจ็กต์ รายการการตั้งค่าการเผยแพร่ "ปิดใช้งานการยืนยันก่อนเผยแพร่"

หลายภาษา

เพิ่มฟีเจอร์ของการเปลี่ยนภาษาใน Novi Builder  ในการใช้งาน คุณต้อง:

  • เปิดเมนูหลัก
  • เลือก "การกำหนดค่า"
  • ในหมวด "ระบบ" เลือก "ทั่วไป"
  • เลือกตัวเลือกที่จำเป็นในรายการดรอปดาวน์ "เปลี่ยนภาษาของแอปพลิเคชันปัจจุบัน:"

คุณยังสามารถเพิ่มภาษาสำหรับอินเทอร์เฟซของ Novi

วิธีเพิ่มภาษาสำหรับอินเทอร์เฟซ Novi

ข้อมูลภาษาอินเทอร์เฟซของ Novi แสดงในรูปแบบ json  ข้อมูลทั้งหมดสำหรับการแปลจะถูกเก็บไว้ในโฟลเดอร์ lang ของโครงการ Novi

ในการเพิ่มการแปล คุณต้อง:

  • สร้างไฟล์การแปล "en.json" โดยที่ en เป็นตัวระบุภาษา
  • เพิ่มอ็อบเจ็กต์ json ลงในไฟล์ languages.json ด้วยข้อมูลต่อไปนี้:
"en": { - ตัวระบุภาษา   "file": "en.json" – เส้นทางไปยังไฟล์ที่มีข้อมูลการแปลที่สร้างขึ้นในขั้นตอนก่อนหน้า    "name": "English" – ชื่อภาษาที่จะแสดงในการตั้งค่าระบบระหว่างการเลือกภาษา  }

กฎการกรอกไฟล์แปล (ไฟล์ "en.json"):

  • คีย์ทั้งหมดสำหรับการแปลจะต้องนำมาจากไฟล์ blank.json ซึ่งรวมอยู่ในแพ็คเกจ Novi Builder ที่กำหนด (ไดเร็กทอรี lang)
  • คุณต้องไม่เปลี่ยนชื่อคีย์หรือแก้ไขการซ้อนของคีย์ มิฉะนั้น การแปลของคุณจะไม่ปรากฏ  มิฉะนั้น การแปลของคุณจะไม่ปรากฏ  ตัวอย่างเช่น ลองแยกส่วนของไฟล์ en.json:
"editor": {    "replaceItem": {      "tooltip": "คำแปลของคุณไปที่นี่"    }  }

หากมีการเปลี่ยนแปลงใดๆ ในรายชื่อนี้ ยกเว้น "การแปลของคุณไปที่นี่" การแปลของคุณจะไม่ปรากฏในเครื่องมือสร้าง

  • ค่าการแปลยังใช้รหัสย่อสำหรับการแสดงข้อมูลแบบไดนามิกหรือข้อมูลที่สงวนไว้  รหัสย่อมีลักษณะดังนี้:

"ไปที่ #{errorLine} บรรทัด" ทุกอย่างที่เขียนระหว่าง " และ " คือชื่อย่อ

คุณสามารถเปลี่ยนลำดับรหัสย่อในบรรทัดได้ แต่คุณต้องไม่เปลี่ยนชื่อ มิฉะนั้น ข้อมูลแบบไดนามิกจะไม่ปรากฏ

ในกรณีที่การกรอกไม่ถูกต้องหรือการข้าม/ลบข้อมูลในไฟล์การแปล ข้อมูลเหล่านี้จะถูกแทนที่ด้วยการแปลจากไฟล์ en.json

ผู้จัดการสไตล์

เพิ่ม Style Manager ใน Novi Builder ในเวอร์ชัน 0.9.0  อนุญาตให้แก้ไขสไตล์ของโครงการของคุณ

ตั้งอยู่ในแผงนักพัฒนาซอฟต์แวร์และมีลักษณะดังนี้:

ที่ไหน:

  • แท็บบนแผงนักพัฒนาซอฟต์แวร์สำหรับแสดงโค้ด HTML และสไตล์
  • โค้ด HTML ของหน้าเว็บ
  • ทริกเกอร์สำหรับแสดง/ซ่อนตัวจัดการสไตล์
  • แผงผู้จัดการสไตล์ Style

แผงของตัวจัดการรูปแบบยังสามารถแบ่งออกเป็นองค์ประกอบต่อไปนี้:

  • แท็บสำหรับแสดงสไตล์ที่ใช้กับองค์ประกอบปัจจุบัน  สไตล์เหล่านี้ทั้งหมดสามารถแก้ไขได้ ระวังด้วยการแก้ไขสไตล์สากล!
  • แท็บซึ่งแสดงสไตล์ทั้งหมดที่ใช้กับองค์ประกอบหลอกขององค์ประกอบที่เลือก เช่น :before, :after
  • แท็บแสดงสไตล์ทั้งหมดรวมถึงสไตล์ที่สืบทอดมาจากผู้ปกครอง ซึ่งเพิ่มโดยเบราว์เซอร์ที่ใช้กับองค์ประกอบ
  • สลับ "สถานะ" ซึ่งแสดงรูปแบบขององค์ประกอบในสถานะ :hover, :focus, :active
  • ปุ่มสำหรับเพิ่มตัวเลือกให้กับตัวจัดการรูปแบบขององค์ประกอบที่เลือก
  • พื้นที่สำหรับแสดงรูปแบบองค์ประกอบตามทางเลือกของลูกค้า

หลักการทำงานของ Style Manager

ในการเริ่มต้นใช้งาน Style Manager คุณต้องมีความรู้พื้นฐานเกี่ยวกับ HTML และ CSS

ตัวจัดการสไตล์จะแสดงสไตล์ขององค์ประกอบที่เลือก ดังนั้นเมื่อคุณเปิดตัวจัดการสไตล์โดยไม่ได้เลือกองค์ประกอบ องค์ประกอบนั้นจะว่างเปล่า

วิธีเลือกองค์ประกอบเพื่อแสดงสไตล์

มี 2 ​​วิธีในการเลือกองค์ประกอบ:

  • การใช้โปรแกรมแก้ไขภาพ
  • การใช้ตัวแก้ไขโค้ด HTML ของหน้าเว็บ

ในกรณีแรก กด LMB บนองค์ประกอบเป้าหมายใน Visual Editor ก็เพียงพอแล้ว  หากองค์ประกอบไม่ได้อธิบายไว้ในเลเยอร์ ให้ใช้ Ctrl + LMB เพื่อเลือก

ในกรณีที่สอง คุณต้องเปิดโค้ด HTML ของหน้าเว็บโดยใช้เมนูบริบทของ Visual Editor แล้วเลือก "ซอร์สโค้ด" หรือสลับไปที่โหมดแก้ไข แล้วเปิดแท็บ HTML บนแผงนักพัฒนาซอฟต์แวร์

หลังจากนี้ คุณจะเลือกแท็กที่ต้องการได้ด้วย LMB  ในเวลาเดียวกัน องค์ประกอบใน Visual Editor จะถูกเลือกเช่นกัน และสไตล์องค์ประกอบจะแสดงในตัวจัดการสไตล์

*หากแท็กที่เลือกไม่อยู่ในคอนเทนเนอร์ของหน้า (คุณสามารถหาข้อมูลเพิ่มเติมได้ในส่วน "การกำหนดค่า") องค์ประกอบจะไม่ถูกเลือก

วิธีเพิ่ม/เปลี่ยนสไตล์องค์ประกอบโดยใช้ Style Manager

เมื่อแก้ไขสไตล์ด้วย Style Manager ไฟล์ CSS ใหม่ (novi.css) จะถูกสร้างขึ้นโดยจัดเก็บสไตล์ทั้งหมดที่คุณเพิ่มไว้  รูปแบบที่แก้ไขจะถูกเขียนใหม่ในไฟล์โครงการปัจจุบัน

ในการเริ่มต้น คุณต้องเลือกองค์ประกอบที่ต้องการ อ่านรายละเอียดเพิ่มเติมในย่อหน้าก่อนหน้า

หลังจากนั้น หากคุณต้องการแก้ไขสไตล์ที่มีอยู่ เพียงคลิก LMB บนคุณสมบัติที่จำเป็นในแท็บ Style หรือในแท็บ Pseudo-Elements แล้วแทนที่ด้วยรูปแบบที่คุณต้องการ  ตัวเลือก คุณสมบัติ และค่าทั้งหมดสามารถแก้ไขได้

คุณต้องระมัดระวังเมื่อทำการเปลี่ยนแปลงรูปแบบองค์ประกอบสากล  การแก้ไขค่าและคุณสมบัติของตัวเลือกที่เลือกจะนำไปสู่การเปลี่ยนแปลงขององค์ประกอบทั้งหมดที่เหมาะสมกับตัวเลือกที่เลือก

ในการเพิ่มสไตล์ใหม่ให้กับองค์ประกอบ คุณต้องใช้ปุ่ม "+" ที่มุมบนขวาของ Style Manager

สิ่งสำคัญคือต้องรู้ว่าเมื่อเปิด "องค์ประกอบหลอก" หรือ :โฮเวอร์ :สถานะใช้งาน ถูกเลือก ตัวเลือกที่เกี่ยวข้องจะถูกเพิ่มเข้าไป:

ในกรณีที่เพิ่มสไตล์ด้วย state novi resizer (ดูเพิ่มเติมในย่อหน้า "เครื่องมือแสดงตัวอย่างความละเอียด") ซึ่งแตกต่างจาก "Desktop Full HD" กฎ CSS จะถูกแปลงเป็นคำขอสื่อที่เกี่ยวข้อง

* ตอนนี้ Visual Editor มีคุณสมบัติในการตั้งค่าโฮเวอร์บนองค์ประกอบใดก็ได้  ในการดำเนินการดังกล่าว ให้คลิก RMB บนองค์ประกอบเป้าหมายและเปิดเมนูบริบท  หลังจากนั้น เลือก "บังคับสถานะ 'โฮเวอร์'"  คุณลักษณะนี้มีให้ในโหมดแก้ไข  หากต้องการดูสถานะ :hover ในโหมดการออกแบบ คุณต้องใช้ Style Manager ปุ่ม "States"

Updater

การอัปเดตตัวสร้างพร้อมใช้งานตั้งแต่ v. 0.8.3

ตามค่าเริ่มต้น การอัปเดต Novi จะถูกปิดใช้งาน คุณควรทำเครื่องหมายที่รายการ "ตรวจสอบการอัปเดต" ใต้การตั้งค่าระบบเพื่อเปิดใช้งาน

หากมี Novi Builder เวอร์ชันใหม่กว่า คุณจะเห็นหน้าต่างโต้ตอบหลังจากการโหลดตัวสร้าง  คุณจะสามารถอัปเดตตัวสร้างได้โดยทำตามคำแนะนำ

โปรเจ็กต์ปัจจุบันจะไม่เปลี่ยนแปลงหลังจากใช้การอัปเดต

ปุ่มลัด

มีปุ่มลัดที่มีประโยชน์มากมายในโมดูล Novi Builder ต่างๆ

ใบสมัคร
  • Ctrl + S - บันทึกโครงการ
โปรแกรมแก้ไขภาพ (โหมดแก้ไข)
  • Ctrl + Enter - ยกเลิกการเลือกองค์ประกอบปัจจุบัน
  • Esc - ยกเลิกการเลือกองค์ประกอบปัจจุบัน
โปรแกรมแก้ไขภาพ (โหมดการออกแบบ)
  • Alt + ~ - นำทางไปยังคอนเทนเนอร์หลักของรายการที่เลือก
  • Ctrl + X - ตัดรายการที่เลือก
  • Ctrl + C - คัดลอกรายการที่เลือก
  • Ctrl + Alt + V - วางก่อนรายการที่เลือก
  • Ctrl + V - วางลงในรายการที่เลือก
  • Ctrl + Shift + V - วางหลังรายการที่เลือก
  • ลบ - ลบรายการ
  • Ctrl + D - ทำซ้ำรายการที่เลือก
  • Ctrl + Q - บันทึกรายการที่เลือกเป็นค่าที่ตั้งไว้ล่วงหน้า
ตัวแก้ไขโค้ด
  • Ctrl + S - บันทึกในตัวแก้ไข
  • Ctrl + L - การจัดรูปแบบไฟล์
  • Ctrl + D - ลบทั้งบรรทัด
  • Ctrl + Shift + D - ทำซ้ำทั้งบรรทัด
  • Ctrl + Z - เลิกทำการเปลี่ยนแปลงล่าสุด
  • Ctrl + C - คัดลอกลงในคลิปบอร์ด
  • Ctrl + V - วางจากคลิปบอร์ด
  • Alt + Down - เลื่อนบรรทัดลง
  • Alt + Up - เลื่อนบรรทัดขึ้น
  • Alt + Delete - ลบออกจนสุดบรรทัด
  • Alt + Backspace - ลบไปที่จุดเริ่มต้นของบรรทัด
  • Ctrl + A - เลือกทั้งหมด
  • Shift + Left - เลือกหนึ่งสัญลักษณ์ทางซ้าย
  • Shift + Right - เลือกหนึ่งสัญลักษณ์ทางด้านขวา
  • Shift + Home - เลือกไปที่จุดเริ่มต้นของบรรทัด
  • Shift + End - เลือกไปที่ท้ายบรรทัด
  • Ctrl + Shift + Home - เลือกไปที่จุดเริ่มต้นของไฟล์
  • Ctrl + Shift + End - เลือกที่ส่วนท้ายของไฟล์
  • Ctrl + LMB (ปุ่มซ้ายของเมาส์) - ตั้งค่า multicursor
  • Ctrl + Alt + ขวา - เลือกการตั้งค่าการวนซ้ำถัดไปของ multicursor
  • Ctrl + Alt + ซ้าย - เลือกการตั้งค่าการวนซ้ำก่อนหน้าของ multicursor
  • Ctrl + F - ค้นหา
  • Ctrl + H - แทนที่
  • Ctrl + K - ค้นหารายการถัดไป
  • Ctrl + Shift + K - ค้นหารายการก่อนหน้า\