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

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

< Лекция 5 || Практическая работа 3 || Лекция 6 >
Аннотация: На этом занятии разрабатывается Cordova - проект, использующий таблицы стилей для текстов и таблиц.
Ключевые слова: файл

Ход выполнения работы:

Создайте проект Cordova с произвольным именем, например, labCSS.

Откройте в папке проекта www/css файл index.css, содержащий таблицу стилей шаблона проекта:

Замените содержимое таблицы стилей файла index.css (полностью удалите старое содержимое) новыми правилами, содержащими селекторы body, h1, h2 и h3:

body {
background-color:#fbf7e4; -Цвет фона
font-family:Verdana, Geneva, sans-serif; - Стиль текста 
margin-left:20px; ;-Отступ слева
color:#8e001c;-Цвет текста
}
h1 {
background-color:#8E001C;
color:#e7e8d1;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;- Положение текста(center-центр,right-право, left - лево)
}
h2 {
background-color:#424242;
color:#d3ceaa;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:5px;-Отступ слева 
}
h3
 {
background-color:black;
color:white;
font-family:"Trebuchet MS", Calibri, Helvetica, sans-serif;
margin-left:8px;
}

Замените содержимое главного файла проекта - index.html (полностью удалите старое содержимое) новым кодом разметки, содержащим элемент <style> для связи с созданной таблицей стилей index.css и теги <body>, <h1>, <h2> и <h3>, соответствующие правилам таблицы стилей. Новый код разметки страницы index.html:

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

Результат запуска Cordova - проекта:

Создадим вторую html-страницу проекта - SecondPage.html, на которой представим таблицу "Содержание домашних питомцев". Для будущей страницы создайте в папке проекта www/css второй файл стилей Secondstyle.css:

body {
      background-color:#fbf7e4;
      font-family:Verdana, Geneva, sans-serif;
      margin-left:20px;
      color:#8e001c;
      }
	  table {
      width:400px;
      border-style:groove;
      border-width:thick;
      border-color:#FF5C19;
      color:#C00;
      font-family:Verdana, Geneva, sans-serif;
      font-size:10px;
      }
      caption {
      font-family:Tahoma, Geneva, sans-serif;
      font-size:24px;
      color:hsl(17, 60%, 40%);
      padding:12px;
      }
      td, th {
      height:50px;
      border-style:solid;
      border-width:thin;
      border-color:#000;
      padding:20px;
      }

Создайте в папке www новую страницу SecondPage.html, включающую ссылку на файл стилей "css/Secondstyle.css":

<!DOCTYPE HTML>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="css/Secondstyle.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Тестовая страница</title>
    </meta>
    </head>
  <body>
    <table>
      <caption>
        Содержание домашних питомцев
      </caption>
<tr>
<td>
&#167;
<th>
Кошки
<th>
Собаки
<th>
Рыбки
<tr>
<th>
Корм
<td>
Хорошая еда для кошек
<td>
Корм для собак
<td>
Противный корм для рыб
<tr>
<th>
Уход
<td>
Когти
<td>
Резиновый мяч
<td>
 Очистка аквариума и пористые камни для аквариума
</table>
  </body>
</html>

Запустите проект и перейдите на его вторую страницу. Результат выполнения должен быть примерно вот таким:


< Лекция 5 || Практическая работа 3 || Лекция 6 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 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);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?