ผู้บริโภคกว่า 100 ล้านคนใช้สมาร์ทโฟนเพื่อท่องอินเทอร์เน็ตตาม com.score Inc. เรียนรู้วิธีสร้างเว็บไซต์บนมือถือโดยเฉพาะสำหรับผู้ชมบนมือถือ สำหรับบทช่วยสอนนี้ คุณจะต้องใช้ Dreamweaver CS5 ขึ้นไป บทความนี้มีรายละเอียดวิธีการสร้างเว็บไซต์มือถือ jquery
ขั้นตอน
ขั้นตอนที่ 1. เปิด Dreamweaver และไปที่ไฟล์ > ใหม่
จากนั้นคุณจะเห็นหน้าต่าง "เอกสารใหม่" ทางด้านซ้ายมือ คุณต้องการเลือกตัวเลือก "หน้าจากตัวอย่าง" จากนั้นในคอลัมน์ถัดไป ให้เลือก "ตัวเริ่มมือถือ" จากนั้นเลือก "jQuery Mobile (CDN)"
ขั้นตอนที่ 2 สร้างหน้า
เมื่อคุณเปิดไฟล์ jQuery Mobile (CDN) คุณจะเห็นหน้าที่มีลักษณะดังนี้:
แม้ว่าในทางเทคนิคแล้วเอกสารนี้เป็นเอกสารหน้าเดียว แต่แต่ละส่วนหัวแสดงถึง "หน้า" ที่แตกต่างกัน ตัวอย่างเช่น "หน้าหนึ่ง" เป็นหน้าแรกสำหรับเว็บไซต์บนมือถือ "หน้าสอง" อาจเป็นหน้าเกี่ยวกับเรา "หน้าสาม" อาจเป็นหน้าบริการของคุณเป็นต้น
ขั้นตอนที่ 3 ดูรหัส
ขั้นตอนเหล่านี้อาจค่อนข้างยุ่งยากหากคุณไม่คุ้นเคยกับ HTML พื้นฐาน หากต้องการสร้างเนื้อหา ให้ลองทำงานใน "มุมมองแยก" บน Dreamweaver วิธีไปยังโหมดนั้นคือถ้าคุณดูที่มุมซ้ายมือของ Dreamweaver ใต้เมนูไฟล์ คุณจะเห็นสี่ตัวเลือก "code, split, design, and live" ดังนี้:
เลือกตัวเลือกที่ไฮไลต์ "แยก" แล้วคุณจะเห็นมุมมองของโค้ดและไซต์จริงแบบเคียงข้างกัน ลองดูที่รหัส
ขั้นตอนที่ 4 แก้ไขส่วนหัวสำหรับแต่ละหน้า
มี (div data-role="page") ซึ่งหมายความว่าเป็นจุดเริ่มต้นของหน้าใหม่ โปรดทราบว่าแต่ละหน้าเชื่อมโยงกับตัวเลข 'div data-role="page"' คือหน้าที่ 2, 'div data-role="page"' คือหน้าที่ 3 เป็นต้น
'div data-role="header"' คือส่วนหัว และคุณใส่ข้อมูลส่วนหัวระหว่างแท็ก "h1" กับ "/h1" ทั้งสองแท็ก
ขั้นตอนที่ 5. แก้ไขเนื้อหาและรายการเมนู
'div data-role="Content"' คือจุดเริ่มต้นของส่วนเนื้อหา นี่คือที่ที่คุณใส่เนื้อหาจริงของแต่ละหน้า โปรดทราบว่าในหน้าแรกมี:
-
และถ้าคุณดูหน้าเว็บจริง คุณจะเห็นว่าหน้าแรกมีรายการลิงก์ 'ul data-role="listview"' หมายความว่าคุณต้องการรายการลิงก์ในพื้นที่เนื้อหา เมื่อเพิ่มรายการเมนูหรือ 'data-role="listview"' ให้ตรวจสอบว่าคุณเชื่อมโยงข้อความที่ถูกต้องกับหน้าเว็บที่ถูกต้อง. ตัวอย่างเช่น หากหน้าสองคือ "เกี่ยวกับเรา" หน้าสามคือ "บริการของเรา" และหน้าสี่คือ "ติดต่อเรา" คุณต้องการใส่:
สร้างเว็บไซต์บนมือถือด้วย Dreamweaver ขั้นตอนที่ 5 Bullet 1 -
ในการแก้ไขเนื้อหา ให้ใส่ข้อความของคุณไว้ระหว่างแท็ก 'div data-role="content"' และ '/div' ตัวอย่างเช่น:
สร้างเว็บไซต์บนมือถือด้วย Dreamweaver ขั้นตอนที่ 5 Bullet 2
ขั้นตอนที่ 6 แก้ไขส่วนท้าย
หากต้องการแก้ไขส่วนท้าย ให้ใส่ข้อความแทนที่ข้อความ "ส่วนท้ายของหน้า"
ขั้นตอนที่ 7 ดูเว็บไซต์ของคุณใน "โหมดสด"
จำตำแหน่งที่คุณเปลี่ยนเป็น "โหมดแยก" ได้ไหม ตรงบริเวณนั้นจะมีปุ่มที่เขียนว่า "สด" คลิกที่นั้นแล้วคุณจะเห็นว่าเว็บไซต์ของคุณจะหน้าตาเป็นอย่างไรบนโทรศัพท์!
