บทที่ 1 เริ่มต้นสร้าง jQuery Mobile Page
สร้าง site สำหรับเก็บงาน เปิด Dreamweaver CC ไปที่ site > manage site > new site ตั้งชื่อ site name = jmsummerx หรือ jmsummern กำหนด Local Folder ให้เป็น folder ใหม่ที่สร้างไว้สำหรับเก็บงานในการ เรียน summer นี้
เริ่มต้นสร้าง jm file และหน้า File > new >blank > html > create เคาะ enter ให้เกิดบรรทัดว่างระหว่าง <body> …</body> Click เลือกบรรทัดว่าง ที่ insert jQuery Mobile panel คลิกเลือก page กำหนดค่าเริ่มต้น ดังรูปที่ 1. แล้วคลิก OK จะได้รูปที่ 2. จากรูปที่ 2. กำหนด ID = page1 เลือก footer และ header คลิกปุ่ม OK
รูปที่ 1
รูปที่ 2.
สร้างโดย Starter Templates File > New > Starter Templates เลือก Mobile Starters ที่ช่อง sample folder ที่ Sample page เลือกอันใดอันหนึ่ง jQuery Mobile (CDN) jQuery Mobile (Local) jQuery Mobile with Theme (Local) เลือกอันนี้ เลือก HTML5 ที่ doctype คลิก create (1-5 ดังรูปที่ 3.) จะได้โครงสร้าง page ทั้งหมด 4 หน้าคือ page1, page2 , page3, page4 ดังรูปที่ 4.
รูปที่ 3.
รูปที่ 4.
การบันทึกไฟล์ File > Save ตั้งชื่อเป็น index เลือก Save as Types เป็น HTML Documents คลิกปุ่ม Save จะขึ้นหน้าต่าง Copy Dependent Files ให้คลิกเลือกปุ่ม Copy ดังรูปที่ 5.
รูปที่ 5.
แสดงผลหน้า page ด้วย Live View
เพิ่มหน้า วางตำแหน่งที่ต้องการเพิ่มpage หลัง page4 ที่ panel insert คลิกเลือก page ตั้งชื่อ page = page5