Создание wap-страниц (в формате *.wml)
В этой статье мне бы хотелось поделиться своим опытом создания wap-страниц и вообще wap-сайта.
Для того, чтобы сайт можно было просматривать в мобильном браузере не всегда подойдет формат *.html, ведь совсем малая часть мобильные телефонов его отображает. Но все равно знаний языка html вам хватит. Поддерживаемый формат мобильными браузерами – это *.wml . Я его опробовал и могу сказать, что он даже легче чем сам html. Может это потому что здесь никакие скрипты и специальные возможности не поддерживаются.
Я постараюсь объяснить вам все на простом примере создания wap-страницы в формате *.wml . Итак, начнем:
Во-первых, надо сказать что стандартный браузер internet explorer формат wml не поддерживает и не может отобразить wap-страницу, поэтому для того, чтобы работать с такими страницами рекомендую приобрести, например, браузер opera. Здесь можно будет предпросматривать страницу. Также необходим текстовый html-редактор страниц – именно текстовый, потому что не получится создать страницу на визуальном редакторе. Сам я использую для создания wap-страниц программу microsoft office frontpage. Тут можно и кодом писать, и визуальным ректором попробовать (в случае с прописанием начального кода вручную визуальный редактор подойдет). Вы можете найти программу подходящую именно вам.
В отличии от компьютеров мобильные телефоны не воспринимают всех кодировок шрифтов, поэтому жестко ограничены эти элементы страниц. Необходимо в каждой странице для того, чтобы все правильно отображалось, исходный код начинать с:
< ?xml version="1.0" encoding="utf-8"?><br /> < !doctype wml public "-//wapforum//dtd wml 1.2//en" "http://www.wapforum.org/dtd/wml12.dtd">
Кодировку с этого сайта использует почти 90 % русскоязычных wap-сайтов, поэтому переживать не о чем. Я не считаю необходимым объяснять значение всего этого, потому что знающий html человек итак все поймет, а не очень хорошо знающему это не надо.
Как и в html основной код страницы обозначен тегом и , ак и здесь обозначаем основной код страницы
<wml> </wml>
Конечно открытие и закрытие этого тега соответственно должно быть в начале и в конце кода страницы (вначале то есть после кодов для кодировок).
В теге head, который здесь также присутствует, пишем:
<head><meta http-equiv="cache-control" content="no-cache" forua="true"/></head>
Чем-то вроде тега body в *.wml является тег card. Именно в этом теге пишется содержание страницы. Итак, вот как выглядит код для card:
<card id="index" title="Первая wap-страница"><br /> </card>
Здесь в поле «id» пишется название страницы, а в «index» пишется ее заголовок. Между первой и второй строчкой кода выше конечно пишется код содержания страницы.
Итак, давайте попробуем написать чего-нибудь, а потом поставить еще ссылку и картинку.
Пишем:
<br /> <p align="center"></p> <p>
Это чтобы все содержимое было по центру, по-другому нельзя, потому что не так отобразится на экране мобильных телефонов. После, в конце закроем тег «p».
Для того, чтобы написать простой текст, просто пишем его на отдельной строчке и в конце ставим «
». Причем этот тег нигде не начинается, он просто говорит о конце строчки и пишется во всех строчках в отображении. Например, напишем:
wap-страница<br />
Написав это, получим сточку со словами «wap-страница» посередине.
Теперь поставим ссылку, самую простую ссылку. Это можно сделать кодом:
<a href="http://wap.site.ru/index.wml">Главная </a><br />
Здесь думаю все понятно. Заметьте и в этой строчке поставлен тег «
, потому что его ставят в каждой строчке, только не строчке кода, а строчке самой страницы.
Думаю, с текстом и ссылками разобрались, теперь скажу о картинках. Поставить картинку можно кодом:
<img src="logohallo.gif" alt="wap.site.ru"/><br />
Здесь тоже наверно все понятно. Картинку вы можете своб поставить, для этого напишете вместо «logohallo.gif» ссылку на свою картинку. Обратите внимание, тег
Все что осталось узнать, это тег, который выдает содержимое через строчку. Как и в html здесь это тег «p». То есть для выделения текста через строчку необходимо ввести его код между:
</p> <p>
Итак, вот я и показал вам коды для вставки теста, картинки и ссылки. Не удивляйтесь, но это все что вам понадобится для создания целого wap-сайта. Мобильные браузеры не поддерживают ни скриптов, ни таблиц, ни чего-нибудь подобного.
Но все же необходимо посмотреть, что получится из всего этого, из того, что мы сейчас делали, итак, вот код, который у нас получился:
< ?xml version="1.0" encoding="utf-8"?><br /> < !doctype wml public "-//wapforum//dtd wml 1.2//en" "http://www.wapforum.org/dtd/wml12.dtd"><br /> <wml><br /> <card id="index" title="Первая wap-страница"></p> <p align="center"> wap-страница<br /> <a href="http://wap.site.ru/index.wml">Главная </a><br /> <img src="logohallo.gif" alt="wap.site.ru"/> </p> <p></card><br /> </wml>
Если вы решите просмотреть страницу в браузере, то не разберете ничего из слов. Все русские буквы будут в виде вопросительных знаков. Поэтому тут работа еще не заканчивается, осталась самая важная часть – перевод кода в формат wml. Для этого существуют такие программы, которые переводят этот код, а именно его русские буквы на нужный формат. Их совсем мало и трудно найти, поэтому специально для вас, я разместил один простейший такой «переводчик» и вы можете скачать его здесь. Распакуйте оба файла в одну папку и запустите приложение. Тут для вас откроет окошко с двумя полями. В первое мы вводим наш код и тут же в соседнем поле появляется новый вариант этого же кода, тот что нам и нужен. Итак, получится:
< ?xml version="1.0" encoding="utf-8"?><br /> < !doctype wml public "-//wapforum//dtd wml 1.2//en" "http://www.wapforum.org/dtd/wml12.dtd"><br /> <wml><br /> <card id="index" title="Первая wap-страница"></p> <p align="center"> wap-страница<br /> <a href="http://wap.site.ru/index.wml">Главная </a><br /> <img src="logohallo.gif" alt="wap.site.ru"/> </p> <p></card><br /> </wml>
Теперь все русские буквы будут правильно отображаться.
Web Дизайнер (designer)