Практическая работа № 4 « » Применение каскадных таблиц
advertisement
Практическая работа № 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> Задание для практической работы Используя материалы к практической работе, создайте мини- сайт: материал для сайта находится в папке варианта (фотографии, тексты, изображение для фона и перехода вперёд и назад); с главной страницы обеспечьте выход на все страницы; с каждой страницы обеспечьте переход на страницу вперёд и на страницу назад; параметры оформления должны быть во внешней таблице стилей.
