Mahigit sa 100 milyong mga mamimili ang gumagamit ng kanilang mga smartphone upang mag-browse sa internet ayon sa com.score Inc. Alamin kung paano lumikha ng isang mobile website na partikular para sa mobile madla. Para sa tutorial na ito, kakailanganin mo ang dreamweaver CS5 at pataas. Detalye ng artikulong ito kung paano lumikha ng isang jquery mobile website.
Mga hakbang
Hakbang 1. Buksan ang Dreamweaver at pumunta sa file> Bago
Makikita mo pagkatapos ang isang "Bagong Dokumento" na Window. Sa kaliwang bahagi, nais mong piliin ang pagpipiliang "pahina mula sa sample" pagkatapos ay sa susunod na haligi, piliin ang "mobile Starters", pagkatapos "jQuery Mobile (CDN)"
Hakbang 2. Lumikha ng Mga Pahina
Kapag binuksan mo ang jQuery Mobile (CDN) file, makikita mo ang isang pahina na katulad nito:
Bagaman ito ay isang teknikal na isang pahina ng dokumento, ang bawat header ay kumakatawan sa isang iba't ibang "pahina". Halimbawa, ang "Pahina One" ay ang home page para sa mobile website, ang "Pahina Pangalawang" ay maaaring tungkol sa amin na pahina, ang "Pahina Pangatlong" ay maaaring pahina ng iyong mga serbisyo at iba pa
Hakbang 3. Tingnan ang Code
Ang mga hakbang na ito ay maaaring maging medyo nakakalito kung hindi ka pamilyar sa pangunahing HTML. Upang likhain ang nilalaman, subukang magtrabaho sa "split view" sa Dreamweaver. Paano makarating sa mode na iyon ay kung titingnan mo ang kaliwang sulok ng Dreamweaver, sa ibaba ng menu ng file, makikita mo ang apat na pagpipilian na "code, split, disenyo, at live" tulad nito:
Piliin ang naka-highlight na pagpipilian na "split", at makikita mo ang isang view ng code at ang aktwal na site na magkatabi. Tingnan ang code
Hakbang 4. I-edit ang Mga Header para sa bawat Pahina
Mayroong (div data-role = "pahina"), na nangangahulugang ito ang simula ng isang bagong pahina. Tandaan na ang bawat pahina ay naiugnay sa isang bilang 'div data-role = "pahina"' ay ang pangalawang pahina, 'div data-role = "pahina"' ay ang pangatlong pahina at iba pa
Ang 'div data-role = "header"' ay ang lugar ng header, at inilalagay mo ang iyong impormasyon sa header sa pagitan ng dalawang "h1" at "/ h1" na mga tag.
Hakbang 5. I-edit ang Mga Item sa Nilalaman at Menu
Ang 'div data-role = "Nilalaman"' ay ang simula ng seksyon ng nilalaman. Dito mo inilalagay ang aktwal na nilalaman ng bawat pahina. Tandaan na sa unang pahina mayroong:
-
at kung titingnan mo ang tunay na web page, makikita mo na ang unang pahina ay may isang listahan ng mga link. Ang 'ul data-role = "listview"' ay nangangahulugang nais mo ang isang listahan ng mga link sa lugar ng nilalaman. Kapag nagdaragdag ng anumang mga item sa menu o 'data-role = "listview"', tiyaking na-link mo ang tamang teksto sa mga tamang pahina. Halimbawa kung ang pahina ng dalawang ay "Tungkol sa Amin", ang pahina ng tatlong ay "Ang aming Serbisyo", at ang pahina na apat ay "Makipag-ugnay sa Amin" kung gayon nais mong ilagay:
Lumikha ng isang Website ng Mobile na may Dreamweaver Hakbang 5 Bullet 1 -
Ngayon upang mai-edit ang nilalaman, simpleng ilagay ang iyong teksto sa pagitan ng 'div data-role = "content"' at '/ div' na mga tag. Halimbawa:
Lumikha ng isang Website ng Mobile na may Dreamweaver Hakbang 5 Bullet 2
Hakbang 6. I-edit ang Footer
Upang mai-edit ang footer, ilagay lamang ang iyong teksto sa lugar ng text na "Page Footer".
Hakbang 7. Tingnan ang iyong website sa "live Mode"
Tandaan kung saan ka lumipat sa "split mode?" sa mismong lugar na iyon, mayroong isang pindutan na nagsasabing "live". Mag-click sa na, at makikita mo kung ano ang hitsura ng iyong website sa isang telepono!
