Dreamweaver менен мобилдик вебсайтты кантип түзүү керек: 7 кадам

Мазмуну:

Dreamweaver менен мобилдик вебсайтты кантип түзүү керек: 7 кадам
Dreamweaver менен мобилдик вебсайтты кантип түзүү керек: 7 кадам

Video: Dreamweaver менен мобилдик вебсайтты кантип түзүү керек: 7 кадам

Video: Dreamweaver менен мобилдик вебсайтты кантип түзүү керек: 7 кадам
Video: 47. Office Onlineга киришүү 2024, Апрель
Anonim

100 миллиондон ашык керектөөчүлөр смартфондорун колдонушат com.score Inc. ылайык интернетти карап чыгуу үчүн атайын мобилдик аудитория үчүн мобилдик вебсайтты кантип түзүүнү үйрөнүңүз. Бул үйрөткүч үчүн сизге Dreamweaver CS5 жана андан кийинки версиясы керек болот. Бул макалада jquery мобилдик веб -сайтын кантип түзүү керектиги айтылат.

Кадамдар

Dreamweaver менен мобилдик вебсайт түзүңүз 1 -кадам
Dreamweaver менен мобилдик вебсайт түзүңүз 1 -кадам

Кадам 1. Dreamweaverди ачыңыз жана файлга өтүңүз> Жаңы

Андан кийин "Жаңы документ" терезесин көрөсүз. Сол жактагы "үлгүдөгү баракты" тандап, кийинки тилкеде "мобилдик баштоочуларды", андан кийин "jQuery Mobile (CDN)" тандаңыз.

Dreamweaver 2 -кадам менен мобилдик вебсайт түзүңүз
Dreamweaver 2 -кадам менен мобилдик вебсайт түзүңүз

Кадам 2. Барактарды түзүү

JQuery Mobile (CDN) файлын ачкандан кийин, сиз окшош баракты көрөсүз:

Бул техникалык жактан бир барак документ болгону менен, ар бир аталыш башка "баракты" билдирет. Мисалы, "Биринчи бет" - бул мобилдик веб -сайттын башкы баракчасы, "Экинчи бет" биз жөнүндө баракча болушу мүмкүн, "Үчүнчү бет" сиздин кызмат баракчаңыз болушу мүмкүн жана башкалар

Dreamweaver 3 менен мобилдик вебсайт түзүңүз
Dreamweaver 3 менен мобилдик вебсайт түзүңүз

Кадам 3. Кодексти караңыз

Эгерде сиз негизги HTML менен тааныш болбосоңуз, бул кадамдар өтө татаал болушу мүмкүн. Мазмунду түзүү үчүн Dreamweaverде "бөлүнгөн көрүнүштө" иштеп көрүңүз. Бул режимге кантип жетүү керек, эгер сиз Dreamweaverдин сол бурчун, файл менюсунун астын карасаңыз, анда "код, бөлүнүү, дизайн жана жашоонун" төрт вариантын көрөсүз:

Бөлүнгөн "бөлүү" опциясын тандаңыз, ошондо сиз коддун көрүнүшүн жана чыныгы сайтты жанаша көрөсүз. Кодду карап көрүңүз

Кадам 4. Ар бир Барактын Башын түзөтүңүз

Бар (div data-role = "page"), бул жаңы барактын башталышы экенин билдирет. Белгилей кетсек, ар бир барак сан менен байланышкан 'div data-role = "page"' экинчи бет, 'div data-role = "page"' үчүнчү бет ж.б.

'div data-role = "header"'-бул баш аймак, жана сиз башыңыздын маалыматын эки "h1" жана "/h1" тегинин арасына коёсуз.

Dreamweaver 5 -кадам менен мобилдик вебсайт түзүңүз
Dreamweaver 5 -кадам менен мобилдик вебсайт түзүңүз

Кадам 5. Мазмунду жана Меню пункттарын түзөтүңүз

'div data-role = "Мазмун"'-мазмун бөлүмүнүн башталышы. Бул жерде сиз ар бир барактын чыныгы мазмунун коёсуз. Белгилей кетсек, биринчи бетте:

  • жана чыныгы веб -баракчаны карасаңыз, биринчи баракта шилтемелердин тизмеси бар экенин көрөсүз. 'ul data-role = "listview"' сиз контент чөйрөсүндөгү шилтемелердин тизмесин каалаарыңызды билдирет. Кандайдыр бир меню пункттарын же 'data-role = "listview"' кошуп жатканда, туура текстти туура баракчалар менен байланыштырганыңызды текшериңиз.. Мисалы, эгер экинчи бет "Биз жөнүндө" болсо, үчүнчү бет "Биздин кызмат" жана төртүнчү бет "Биз менен байланыш" болсо, анда сиз койгуңуз келет:

    Dreamweaver Step 5 Bullet 1 менен мобилдик вебсайт түзүңүз
    Dreamweaver Step 5 Bullet 1 менен мобилдик вебсайт түзүңүз
  • Эми мазмунду түзөтүү үчүн, текстти 'div data-role = "content"' жана '/div' тегдеринин ортосуна кой. Мисалы:

    Dreamweaver Step 5 Bullet 2 менен мобилдик вебсайт түзүңүз
    Dreamweaver Step 5 Bullet 2 менен мобилдик вебсайт түзүңүз

Кадам 6. Колонтитулду түзөтүү

Колонтитулду түзөтүү үчүн, жөн гана "Page Footer" текстинин ордуна текстти коюңуз.

Dreamweaver 7 менен мобилдик вебсайт түзүңүз
Dreamweaver 7 менен мобилдик вебсайт түзүңүз

Кадам 7. "Жандуу режимде" веб -сайтыңызды карап көрүңүз

"Бөлүү режимине" кайда өткөнүңүз эсиңиздеби? дал ошол аймакта "жаша" деген баскыч бар. Аны чыкылдатыңыз, ошондо телефонуңузда веб -сайтыңыз кандай болорун көрөсүз!

Сунушталууда: