|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 27 | Длительность: 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>
§
<th>
Кошки
<th>
Собаки
<th>
Рыбки
<tr>
<th>
Корм
<td>
Хорошая еда для кошек
<td>
Корм для собак
<td>
Противный корм для рыб
<tr>
<th>
Уход
<td>
Когти
<td>
Резиновый мяч
<td>
Очистка аквариума и пористые камни для аквариума
</table>
</body>
</html>Запустите проект и перейдите на его вторую страницу. Результат выполнения должен быть примерно вот таким:
< Лекция 5 || Практическая работа 3 || Лекция 6 >
Дмитрий Белов