По данным com.score Inc., более 100 миллионов потребителей используют свои смартфоны для просмотра веб-страниц в Интернете. Узнайте, как создать мобильный веб-сайт специально для мобильной аудитории. Для этого урока вам понадобится Dreamweaver CS5 и выше. В этой статье подробно рассказывается, как создать мобильный веб-сайт на jquery.
Шаги
Шаг 1. Откройте Dreamweaver и выберите «Файл»> «Создать»
После этого вы увидите окно «Новый документ». Слева вы хотите выбрать вариант «страница из образца», затем в следующем столбце выберите «Mobile Starters», затем «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 = "Content"' - это начало раздела содержимого. Сюда вы помещаете фактическое содержание каждой страницы. Обратите внимание, что на первой странице есть:
-
и если вы посмотрите на настоящую веб-страницу, вы увидите, что на первой странице есть список ссылок. 'ul data-role = "listview"' означает, что вам нужен список ссылок в области содержимого. При добавлении каких-либо пунктов меню или 'data-role = "listview"' убедитесь, что вы связываете правильный текст с правильными страницами.. Например, если на второй странице написано «О нас», на третьей странице - «Наши услуги», а на четвертой странице - «Свяжитесь с нами», вы должны указать:
Создание мобильного веб-сайта с помощью Dreamweaver Step 5 Bullet 1 -
Теперь, чтобы редактировать контент, просто поместите свой текст между тегами 'div data-role = "content"' и '/ div'. Например:
Создание мобильного веб-сайта с помощью Dreamweaver Step 5 Bullet 2
Шаг 6. Отредактируйте нижний колонтитул
Чтобы отредактировать нижний колонтитул, просто поместите свой текст вместо текста «Нижнего колонтитула страницы».
Шаг 7. Взгляните на свой сайт в «живом режиме»
Помните, где вы перешли в «сплит-режим»? прямо в этой области есть кнопка с надписью «в прямом эфире». Нажмите на нее, и вы увидите, как ваш сайт будет выглядеть на телефоне!
