Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 330 / 27 | Длительность: 11:36:00
Специальности: Программист
Лекция 5:

Использование CSS в мобильных разработках

Далее приводится пример страницы, форматирование которой выполняется в отдельном файле css/textformat.css, связанным с форматируемой страницей тегом <link>.

<!DOCTYPE HTML>
<html lang="ru">
<head>
<link rel="stylesheet" href="css/textformat.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Тестовая страница программных разработок компании Mighty Smite</title>
</head>
<body>
<h1>Пример форматирования текстов</h1>
<h2>Это заголовок h2</h2>
<h3>Это заголовок h3</h3>
 В мобильных приложениях роль CSS особенно велика в связи с тем, 
 что экраны мобильных устройств меньше; взаимодействия и ожидания здесь другие. 
 При работе с мобильными устройствами используются разные средства ввода: 
 пальцы, стилусы, маленькие кнопки. Необходимость прищуриваться, чтобы 
 разглядеть текст, может вызвать у пользователя раздражение. 
 Таблицы CSS являются также основой адаптивного дизайна мобильных приложений, 
 включающего набор методик использования CSS для экранов разных размеров. 
 </body>
</html>

Содержимое таблицы стилей (файл css/textformat.css):

body
  {
    background-color:#F2CC6E;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:black; /*#8C5F26;*/
    font-size:14px;
    max-width:900px;
  }
h1
  {
    color:#BCA55F;
    background-color:#3C371E;
    font-family:"Arial Black", Gadget, sans-serif;
    text-align:center;
 
  }
h2
  {
    color:#F26205;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif
  }
h3
  {
    color:#3C371E;
    font-family:Tahoma, Geneva, sans-serif;
  }

Результат тестирования страницы в эмуляторе:


Рис. 7.3.

Еще один пример форматирования страницы, содержащей семантические теги HTML5 (<article>, <header>, <section>, <figure>). Форматирование выполняется таблицей стилей с помощью селекторов главных тегов страницы: body, h1, h2.

<!DOCTYPE HTML>
<html lang="ru">
<head>
<style>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
body {
  background-color:#F2F2F2;
  color:#0D0D0D;
  font-family:Verdana, Geneva, sans-serif;
 font-size:35px
}
h1 {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#595959;
  background-color:#049DBF;
  text-align:center;
}
h2 {
  color:#048ABF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Простое размещение изображения</title>
</head>
<body>
<article>
 <header>
 <h1>Спортзал для разработчиков мобильных приложений</h1>
 </header>
 <section>
 <header>
 <h2>Тренировка разработчиков</h2>
 </header>
 <figure> <img src="images/webDeveloper.jpg" width="450" height="450"> </figure>
 Конечно же, Вы думали об этом. Не пора ли поработать над тегами &lt;figure&gt; и &lt;article&gt;? 
 Работайте с элементами и атрибутами HTML5 в нашем Спортзале для разработчиков. 
 Взявшись за работу, можно немного потрудиться над тегом &lt;section&gt; 
 и углубиться в создание серьезных элементов дизайна с помощью таблиц стилей CSS3. 
 Для вашего удобства спортзал работает круглосуточно 7 дней в неделю, 
 а доступ к нему вы можете получить из любой точки мира! 
 Все ваши друзья уже с нами, и только посмотрите на них! 
 Они уже вставляют видео на свои мобильные страницы! Вы это тоже можете. 
 Не проводите еще один день в мечтах о том, что когда-нибудь вы станете 
 разработчиком мобильных приложений - начните сегодня! </section>
</article>
</body>
</html>

Результат тестирования данной страницы в эмуляторе:


Рис. 7.4.
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?