Jinsi ya kuunda Wavuti ya rununu na Dreamweaver: Hatua 7

Orodha ya maudhui:

Jinsi ya kuunda Wavuti ya rununu na Dreamweaver: Hatua 7
Jinsi ya kuunda Wavuti ya rununu na Dreamweaver: Hatua 7

Video: Jinsi ya kuunda Wavuti ya rununu na Dreamweaver: Hatua 7

Video: Jinsi ya kuunda Wavuti ya rununu na Dreamweaver: Hatua 7
Video: Jinsi ya kutengeneza Email au Barua pepe | Rudisha Facebook yako ilioibiwa ndani ya SEKUNDE 1 2024, Mei
Anonim

Zaidi ya watumiaji milioni 100 hutumia simu zao mahiri kuvinjari mtandao kulingana na com.score Inc Jifunze jinsi ya kuunda wavuti ya rununu haswa kwa hadhira ya rununu. Kwa mafunzo haya, utahitaji dreamweaver CS5 na zaidi. Nakala hii inaelezea jinsi ya kuunda tovuti ya jQuery ya rununu.

Hatua

Unda Wavuti ya rununu na Dreamweaver Hatua ya 1
Unda Wavuti ya rununu na Dreamweaver Hatua ya 1

Hatua ya 1. Fungua Dreamweaver na uende kwenye faili> Mpya

Kisha utaona Dirisha la "Hati mpya". Upande wa kushoto, unataka kuchagua chaguo "ukurasa kutoka kwa sampuli" kisha kwenye safu inayofuata, chagua "Starters za rununu", halafu "jQuery Mobile (CDN)"

Unda Wavuti ya rununu na Dreamweaver Hatua ya 2
Unda Wavuti ya rununu na Dreamweaver Hatua ya 2

Hatua ya 2. Unda Kurasa

Mara tu utakapofungua faili ya jQuery Mobile (CDN), utaona ukurasa unaofanana na huu:

Ingawa kwa kweli hii ni hati ya ukurasa mmoja, kila kichwa kinawakilisha "ukurasa" tofauti. Kwa mfano, "Ukurasa wa Kwanza" ni ukurasa wa kwanza wa wavuti ya rununu, "Ukurasa wa Pili" inaweza kuwa ukurasa kuhusu sisi, "Ukurasa wa Tatu" inaweza kuwa ukurasa wako wa huduma na kadhalika

Unda Wavuti ya rununu na Dreamweaver Hatua ya 3
Unda Wavuti ya rununu na Dreamweaver Hatua ya 3

Hatua ya 3. Angalia Kanuni

Hatua hizi zinaweza kuwa ngumu sana ikiwa haujui HTML ya msingi. Ili kuunda yaliyomo, jaribu kufanya kazi katika "mgawanyiko wa maoni" kwenye Dreamweaver. Jinsi ya kufika kwenye hali hiyo ni kama ukiangalia kona ya kushoto ya Dreamweaver, chini ya menyu ya faili, utaona chaguzi nne "nambari, kugawanyika, kubuni, na kuishi" kama hii:

Chagua chaguo iliyoangaziwa "mgawanyiko", na utaona mwonekano wa nambari na tovuti halisi kando-kando. Angalia nambari

Hatua ya 4. Hariri Vichwa vya habari kwa kila Ukurasa

Kuna (div data-role = "page"), ambayo inamaanisha kuwa ni mwanzo wa ukurasa mpya. Kumbuka kuwa kila ukurasa unahusishwa na nambari 'div data-role = "page"' ni ukurasa wa pili, 'div data-role = "page"' ni ukurasa wa tatu na kadhalika

'div data-role = "header"' ni eneo la kichwa, na unaweka habari yako ya kichwa kati ya vitambulisho viwili vya "h1" na "/ h1".

Unda Wavuti ya rununu na Dreamweaver Hatua ya 5
Unda Wavuti ya rununu na Dreamweaver Hatua ya 5

Hatua ya 5. Hariri Yaliyomo na Vitu vya Menyu

'div data-role = "Yaliyomo" ni mwanzo wa sehemu ya yaliyomo. Hapa ndipo unaweka yaliyomo kwenye kila ukurasa. Kumbuka kuwa katika ukurasa wa kwanza kuna:

  • na ukiangalia ukurasa halisi wa wavuti, unaona kuwa ukurasa wa kwanza una orodha ya viungo. 'ul data-role = "listview"' inamaanisha kuwa unataka orodha ya viungo kwenye eneo la yaliyomo. Unapoongeza vitu vya menyu yoyote au 'data-role = "listview", hakikisha unaunganisha maandishi sahihi na kurasa sahihi. Kwa mfano ikiwa ukurasa wa pili ni "Kuhusu sisi", ukurasa wa tatu ni "Huduma Yetu", na Ukurasa wa nne ni "Wasiliana Nasi" basi unataka kuweka:

    Unda Wavuti ya rununu na Dreamweaver Hatua ya 5 Bullet 1
    Unda Wavuti ya rununu na Dreamweaver Hatua ya 5 Bullet 1
  • Sasa kuhariri yaliyomo, weka maandishi yako katikati ya lebo ya 'div data-role = "content" na' / div '. Kwa mfano:

    Unda Wavuti ya rununu na Dreamweaver Hatua ya 5 Bullet 2
    Unda Wavuti ya rununu na Dreamweaver Hatua ya 5 Bullet 2

Hatua ya 6. Hariri kijachini

Ili kuhariri kijachini, weka tu maandishi yako badala ya maandishi ya "Ukurasa wa Kijachini".

Unda Wavuti ya rununu na Dreamweaver Hatua ya 7
Unda Wavuti ya rununu na Dreamweaver Hatua ya 7

Hatua ya 7. Angalia tovuti yako katika "Hali ya moja kwa moja"

Kumbuka ambapo ulibadilisha kuwa "hali ya kugawanyika?" sawa katika eneo hilo, kuna kitufe kinachosema "live". Bonyeza kwenye hiyo, na utaona tovuti yako itakavyokuwa kwenye simu!

Ilipendekeza: