Практическая работа № 4 « » Применение каскадных таблиц

реклама
Практическая работа № 4
«Применение каскадных таблиц
стилей »
ДИСЦИПЛИНА: ИНТЕРНЕТ-ТЕХНОЛОГИИ
ПРЕПОДАВАТЕЛЬ: ЛУМПОВА Р.И.
Цели урока:
Обучающая:



обобщение и систематизация знаний по теме «Каскадные
таблицы стилей»;
отработка навыков создания таблицы стилей;
формирование и развитие информационных компетенций.
Развивающая:



развитие познавательного интереса к изучаемой дисциплине;
развитие творческих способностей обучающихся;
формирование умения ориентироваться в изучаемом материале
и принимать правильное решение.
Воспитательная:


развитие профессиональной культуры, интереса к будущей
профессии;
воспитание воли и настойчивости в достижении конечных
результатов при решении поставленных задач.
По итогам изучения студент должен:
Знать:
 назначение и применение CSS;
 возможности изменения параметров текста и фона;
 возможности CSS по работе с блочными объектами;
 свойства, которые управляют позиционированием
перемещаемого блока;
Уметь:
 устанавливать семейство шрифтов, стиль, толщину и
размер шрифта;
 задавать фон (цвет или изображение);
 применять теги <div> и <span>;
 с помощью свойств позиционировать блоки.
Вопрос 1: Как выделить другим цветом
фрагмент текста?
<html>
<head>
<meta charset=“utf-8">
<title>Изменение цвета текста</title>
<style type="text/css">
???
</style>
</head>
<body>
<p>Пословица: В ком правды нет, в том и добра мало</p>
</body>
</html>
Вопрос 2:
Как изменить цвет фона веб-страницы?
<html>
<head>
<meta charset=“utf-8">
<title>Цвет фона</title>
<style type="text/css">
???
</style>
</head>
<body>
<p>Пословица: Тот не ошибается, кто ничего не делает.</p>
</body>
</html>
(цвет фона #333, цвет текста #fc0)
Вопрос 3:
Как изменить цвет кнопки в форме?
<html>
<head>
<meta charset=“utf-8">
<title>Цвет кнопки</title>
<style type="text/css">
???
</style>
</head>
<body>
<form action="h.php">
<p><input type="button" value="Обычная кнопка">
<input type="button" value="Синяя кнопка"></p>
</form>
</body>
</html>
Вопрос 4:
Как добавить подчеркивание к заголовку?
<html>
<head>
<meta charset=“utf-8">
<title>Линия под заголовком</title>
<style type="text/css">
???
</style>
</head>
<body>
<h1>Пословица</h1>
<p>Рыбу ловят удочкой, а человека – словом</p>
</body>
</html>
Вопрос 5: Как выровнять текст одновременно по
правому и левому краю?
<html>
<head>
<meta charset=“utf-8">
<title>Выравнивание по ширине</title>
<style type="text/css">
???
</style>
</head>
<body>
<p>JPEG - популярный формат графических файлов, широко применямый при
создании сайтов и хранения изображений. JPEG поддерживает 24-битовый
цвет и сохраняет яркость и оттенки цветов в фотографиях. Данный формат
называют сжатием с потерями, поскольку алгоритм JPEG выборочно отвергает
данные.</p>
</body>
</html>
Вопрос 6: Как выровнять текст одновременно по
правому и левому краю?
<html>
<head>
<meta charset=“utf-8">
<title>Рамка вокруг текста</title>
<style type="text/css">
???
</style>
</head>
<body>
<p>Пословица: </br>Ум не имеет цены, а воспитание –
предела</p>
</body>
</html>
Вопрос 7:
Как убрать подчеркивание у ссылок?
<html>
<head>
<meta charset=“utf-8">
<title>Ссылки без подчеркивания</title>
<style type="text/css">
???
</style>
</head>
<body>
<p><a href="link.html">Ссылка без
подчеркивания</a> </p>
</body>
</html>
Вопрос 8:
Как убрать подчеркивание у ссылок?
<html>
<head>
<meta charset=“utf-8">
<title>Горизонтальный список</title>
<style type="text/css">
???
</style>
</head>
<body>
<ul >
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>AJAX</li>
</ul>
</body>
</html>
Вопрос 9:
Как выровнять таблицу по центру окна браузера?
<html>
<head>
<meta charset=“utf-8">
<title>Таблица в центре окна</title>
<style type="text/css">
???
</style>
</head>
<body>
<table>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>PHP</td>
</tr>
</table>
</body>
</html>
Вопрос 10:
Как выделить другим цветом первую строку
таблицы?
<html>
<head>
<meta charset="utf-8">
<title>Строка заголовка</title>
<style type="text/css">
???
</style>
</head>
<body>
<table>
<tr>
<th>Пословицы</th>
<th>Со всего мира</th>
</tr>
<tr>
<td>Пустую ложку ко рту не подносят</td>
<td>Кавказская</td>
</tr>
<tr>
<td>Одними надеждами цели не достигнешь</td>
<td>Арабская</td>
</tr>
<tr>
</table>
</body>
</html>
Задание для практической работы
Используя материалы к практической работе,
создайте мини- сайт:
 материал для сайта находится в папке
варианта (фотографии, тексты, изображение
для фона и перехода вперёд и назад);
 с главной страницы обеспечьте выход на все
страницы;
 с каждой страницы обеспечьте переход на
страницу вперёд и на страницу назад;
 параметры оформления должны быть во
внешней таблице стилей.
Скачать