يستخدم أكثر من 100 مليون مستهلك هواتفهم الذكية لتصفح الإنترنت وفقًا لشركة com.score Inc. تعرف على كيفية إنشاء موقع ويب للجوال مخصص لجمهور الأجهزة المحمولة. في هذا البرنامج التعليمي ، ستحتاج إلى برنامج Dreamweaver CS5 والإصدارات الأحدث. توضح هذه المقالة بالتفصيل كيفية إنشاء موقع ويب للجوال jquery.
خطوات
الخطوة 1. افتح Dreamweaver وانتقل إلى ملف> جديد
سترى بعد ذلك نافذة "مستند جديد". على الجانب الأيسر ، تريد تحديد الخيار "صفحة من نموذج" ثم في العمود التالي ، اختر "تطبيقات الجوال" ، ثم "jQuery Mobile (CDN)"
الخطوة 2. قم بإنشاء الصفحات
بمجرد فتح ملف jQuery Mobile (CDN) ، سترى صفحة تشبه هذا:
على الرغم من أن هذا المستند عبارة عن صفحة واحدة من الناحية الفنية ، فإن كل رأس يمثل "صفحة" مختلفة. على سبيل المثال ، "الصفحة الأولى" هي الصفحة الرئيسية لموقع الويب للجوال ، ويمكن أن تكون "الصفحة الثانية" هي صفحة "نبذة عنا" ، وقد تكون "الصفحة الثالثة" صفحة خدماتك وما إلى ذلك
الخطوة 3. انظر إلى المدونة
قد تكون هذه الخطوات صعبة للغاية إذا لم تكن معتادًا على استخدام HTML الأساسي. لإنشاء المحتوى ، حاول العمل في "عرض مقسم" على Dreamweaver. كيفية الوصول إلى هذا الوضع هي إذا نظرت إلى الزاوية اليسرى من Dreamweaver ، أسفل قائمة الملفات ، فسترى أربعة خيارات "التعليمات البرمجية ، والتقسيم ، والتصميم ، والعيش" مثل هذا:
اختر الخيار المميز "تقسيم" ، وسترى عرضًا للرمز والموقع الفعلي جنبًا إلى جنب. ألق نظرة على الكود
الخطوة 4. قم بتحرير رؤوس كل صفحة
يوجد (div data-role = "page") ، مما يعني أنها بداية صفحة جديدة. لاحظ أن كل صفحة مرتبطة برقم 'div data-role = "page" "هي الصفحة الثانية ، و' div data-role =" page "'هي الصفحة الثالثة وهكذا
'div data-role = "header" "هي منطقة الرأس ، ويمكنك وضع معلومات الرأس بين علامتي" h1 "و" / h1 ".
الخطوة 5. تحرير المحتوى وعناصر القائمة
'div data-role = "Content" "هو بداية قسم المحتوى. هذا هو المكان الذي تضع فيه المحتوى الفعلي لكل صفحة. لاحظ أنه في الصفحة الأولى يوجد:
-
وإذا نظرت إلى صفحة الويب الفعلية ، فسترى أن الصفحة الأولى بها قائمة من الروابط. تعني 'ul data-role = "listview"' أنك تريد قائمة روابط في منطقة المحتوى. عند إضافة أي عناصر قائمة أو 'data-role = "listview"' ، تأكد من ربط النص الصحيح بالصفحات الصحيحة. على سبيل المثال ، إذا كانت الصفحة الثانية هي "نبذة عنا" ، والصفحة الثالثة هي "خدمتنا" ، والصفحة الرابعة هي "اتصل بنا" ، فأنت تريد وضع:
قم بإنشاء موقع ويب للجوال باستخدام Dreamweaver Step 5 Bullet 1 -
الآن لتعديل المحتوى ، ضع النص بين علامتي 'div data-role = "content" "و" / div ". على سبيل المثال:
قم بإنشاء موقع ويب للجوال باستخدام Dreamweaver Step 5 Bullet 2
الخطوة 6. قم بتحرير التذييل
لتعديل التذييل ، ضع النص في مكان نص "تذييل الصفحة".
الخطوة 7. ألق نظرة على موقع الويب الخاص بك في "الوضع المباشر"
تذكر المكان الذي تحولت فيه إلى "وضع الانقسام"؟ في تلك المنطقة ، يوجد زر يقول "مباشر". انقر فوق ذلك ، وسترى كيف سيبدو موقع الويب الخاص بك على الهاتف!
