com.score Inc. के अनुसार 10 करोड़ से अधिक उपभोक्ता अपने स्मार्टफोन का उपयोग इंटरनेट ब्राउज़ करने के लिए करते हैं। जानें कि विशेष रूप से मोबाइल दर्शकों के लिए एक मोबाइल वेबसाइट कैसे बनाई जाती है। इस ट्यूटोरियल के लिए, आपको Dreamweaver CS5 और बाद के संस्करण की आवश्यकता होगी। इस लेख में बताया गया है कि कैसे एक jQuery मोबाइल वेबसाइट बनाई जाए।
कदम
चरण 1. ड्रीमविवर खोलें और फ़ाइल > नया पर जाएं।
फिर आपको एक "नया दस्तावेज़" विंडो दिखाई देगी। बाईं ओर, आप "नमूना से पृष्ठ" विकल्प चुनना चाहते हैं, फिर अगले कॉलम में, "मोबाइल स्टार्टर्स" चुनें, फिर "jQuery मोबाइल (सीडीएन)"
चरण 2. पृष्ठ बनाएँ।
एक बार जब आप jQuery मोबाइल (सीडीएन) फ़ाइल खोलते हैं, तो आपको एक ऐसा पेज दिखाई देगा जो इस तरह दिखता है:
यद्यपि यह तकनीकी रूप से एक पृष्ठ का दस्तावेज़ है, प्रत्येक शीर्षलेख एक अलग "पृष्ठ" का प्रतिनिधित्व करता है। उदाहरण के लिए, "पेज वन" मोबाइल वेबसाइट का होम पेज है, "पेज टू" हमारे बारे में पेज हो सकता है, "पेज थ्री" आपका सर्विसेज पेज हो सकता है और इसी तरह।
चरण 3. कोड को देखें।
यदि आप मूल HTML से अपरिचित हैं तो ये चरण बहुत कठिन हो सकते हैं। सामग्री बनाने के लिए, Dreamweaver पर "विभाजित दृश्य" में काम करने का प्रयास करें। उस मोड तक कैसे पहुंचे, यदि आप फ़ाइल मेनू के नीचे, Dreamweaver के बाएं कोने को देखते हैं, तो आपको चार विकल्प "कोड, स्प्लिट, डिज़ाइन और लाइव" इस तरह दिखाई देंगे:
हाइलाइट किया गया विकल्प "स्प्लिट" चुनें, और आपको कोड का एक दृश्य और वास्तविक साइट साथ-साथ दिखाई देगी। कोड पर एक नज़र डालें।
चरण 4. प्रत्येक पृष्ठ के लिए शीर्षलेख संपादित करें।
वहाँ (div डेटा-भूमिका = "पृष्ठ") है, जिसका अर्थ है कि यह एक नए पृष्ठ की शुरुआत है। ध्यान दें कि प्रत्येक पृष्ठ एक संख्या से जुड़ा है 'div डेटा-भूमिका = "पृष्ठ" दूसरा पृष्ठ है, 'div डेटा-भूमिका = "पृष्ठ" तीसरा पृष्ठ है और इसी तरह
'div data-role="header"' हेडर क्षेत्र है, और आप अपनी हेडर जानकारी को दो "h1" और "/h1" टैग के बीच रखते हैं।
चरण 5. सामग्री और मेनू आइटम संपादित करें।
'div data-role="Content"' सामग्री अनुभाग की शुरुआत है। यह वह जगह है जहां आप प्रत्येक पृष्ठ की वास्तविक सामग्री डालते हैं। ध्यान दें कि पहले पृष्ठ में है:
-
और यदि आप वास्तविक वेब पेज को देखते हैं, तो आप देखते हैं कि पहले पृष्ठ में लिंक की एक सूची है। 'ul data-role="listview"' का अर्थ है कि आप सामग्री क्षेत्र में लिंक की एक सूची चाहते हैं। कोई भी मेनू आइटम या 'डेटा-भूमिका = "सूचीदृश्य" जोड़ते समय, सुनिश्चित करें कि आप सही टेक्स्ट को सही पृष्ठों से लिंक करते हैं।. उदाहरण के लिए यदि पृष्ठ दो "हमारे बारे में" है, पृष्ठ तीन "हमारी सेवा" है, और पृष्ठ चार "हमसे संपर्क करें" है, तो आप रखना चाहते हैं:
Dreamweaver के साथ एक मोबाइल वेबसाइट बनाएं चरण 5 बुलेट 1 -
अब सामग्री को संपादित करने के लिए, अपने टेक्स्ट को 'div data-role="content"' और '/div' टैग्स के बीच में रखें। उदाहरण के लिए:
Dreamweaver के साथ एक मोबाइल वेबसाइट बनाएं चरण 5 बुलेट 2
चरण 6. पाद लेख संपादित करें।
पाद लेख को संपादित करने के लिए, बस अपने पाठ को "पृष्ठ पाद लेख" पाठ के स्थान पर रखें।
चरण 7. अपनी वेबसाइट को "लाइव मोड" में देखें।
याद रखें कि आपने "स्प्लिट मोड" में कहाँ स्विच किया था? ठीक उस क्षेत्र में, "लाइव" कहने वाला एक बटन है। उस पर क्लिक करें, और आप देखेंगे कि आपकी वेबसाइट फोन पर कैसी दिखेगी!
