למעלה מ -100 מיליון צרכנים משתמשים בסמארטפונים שלהם כדי לגלוש באינטרנט על פי com.score Inc. למד כיצד ליצור אתר אינטרנט לנייד במיוחד לקהל הנייד. להדרכה זו תזדקק ל- Dreamweaver CS5 ומעלה. מאמר זה מפרט כיצד ליצור אתר jquery לנייד.
צעדים
שלב 1. פתח את Dreamweaver ועבור לקובץ> חדש
לאחר מכן תראה חלון "מסמך חדש". בצד שמאל, אתה רוצה לבחור את האפשרות "דף מתוך מדגם" ולאחר מכן בעמודה הבאה, בחר "Starters mobile" ולאחר מכן "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 = "תוכן"' הוא תחילת קטע התוכן. כאן אתה שם את התוכן האמיתי של כל דף. שימו לב כי בעמוד הראשון יש:
-
ואם אתה מסתכל על דף האינטרנט בפועל, אתה רואה שהדף הראשון כולל רשימת קישורים. 'ul data-role = "listview"' פירושו שאתה רוצה רשימת קישורים באזור התוכן. בעת הוספת פריטי תפריט או 'data-role = "listview"', הקפד לקשר את הטקסט הנכון לדפים הנכונים.. לדוגמה, אם עמוד שני הוא "אודותינו", עמוד שלישי הוא "השירות שלנו", ודף רביעי הוא "צור קשר", אתה רוצה לשים:
צור אתר אינטרנט לנייד באמצעות Dreamweaver שלב 5 Bullet 1 -
עכשיו כדי לערוך תוכן, פשוט הכנס את הטקסט שלך בין התגים 'div data-role = "content"' ו- '/div'. לדוגמה:
צור אתר לנייד באמצעות Dreamweaver שלב 5 Bullet 2
שלב 6. ערוך את הכותרת התחתונה
כדי לערוך את הכותרת התחתונה, פשוט הניח את הטקסט שלך במקום הטקסט "כותרת תחתונה".
שלב 7. תסתכל על האתר שלך ב"מצב חי"
זכור היכן עברת ל"מצב פיצול? " ממש באזור זה, יש כפתור שאומר "חי". לחץ על זה ותראה איך האתר שלך ייראה בטלפון!
