Dreamweaver ашиглан мобайл вэбсайт үүсгэх: 7 алхам

Агуулгын хүснэгт:

Dreamweaver ашиглан мобайл вэбсайт үүсгэх: 7 алхам
Dreamweaver ашиглан мобайл вэбсайт үүсгэх: 7 алхам

Видео: Dreamweaver ашиглан мобайл вэбсайт үүсгэх: 7 алхам

Видео: Dreamweaver ашиглан мобайл вэбсайт үүсгэх: 7 алхам
Видео: How to Create and Link AdSense to YouTube Channel in 2023 2024, May
Anonim

Com.score Inc -ийн мэдээлснээр 100 сая гаруй хэрэглэгчид ухаалаг гар утсаа ашиглан интернет үзэх боломжтой. Энэхүү гарын авлагад танд 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 дээр "split view" дээр ажиллаж үзээрэй. Энэ горимд хэрхэн хүрэх вэ гэвэл хэрэв та 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 ашиглан мобайл вэбсайт үүсгэх 5 -р алхам 1 сум
    Dreamweaver ашиглан мобайл вэбсайт үүсгэх 5 -р алхам 1 сум
  • Одоо контентийг засахын тулд текстээ 'div data-role = "content"' ба '/div' хаягийн хооронд байрлуул. Жишээлбэл:

    Dreamweaver ашиглан гар утасны вэбсайт үүсгэх 5 -р алхам 2 сум
    Dreamweaver ашиглан гар утасны вэбсайт үүсгэх 5 -р алхам 2 сум

Алхам 6. Хөлийн хэсгийг засах

Хөлийн хэсгийг засахын тулд "Хуудасны хөл" текстийн оронд текстээ тавихад л болно.

Dreamweaver 7 ашиглан гар утасны вэбсайт үүсгээрэй
Dreamweaver 7 ашиглан гар утасны вэбсайт үүсгээрэй

Алхам 7. Вэбсайтаа "шууд горим" -оос үзээрэй

Та "хуваах горим" руу хаанаас шилжсэнээ санаж байна уу? яг тэр хэсэгт "амьд" гэсэн товчлуур байна. Үүнийг дарна уу, таны вэбсайт утсан дээр ямар байхыг харах болно!

Зөвлөмж болгож буй: