Поделиться
Практическая работа «Фреймы».docx
Практическая работа «Фреймы»
Тип урока – Совершенствования знаний, умений и навыков
Вид урока – учебный практикум
Ресурсы: компьютеры, Visual Studio Code.
Требование:
· Каждый ученик должен сделать 1 страницу, с тремя дополнительными.
· Создать свою папку на рабочем столе
· Название страницы должно соответствовать его заданию
Напоминание:
· Текст страницы записывается после тега <body>
· Выравнивание осуществляется с помощью тега
<p align=”……”> Текст,
который выравнивается</p>
· Переход на новую строку <br>
· Цвет текста
<font color=" ">Текст</font>
 |
|||
 |
· Цвет фона
<body bgcolor=" ">
|
|||
|
|||
· Заголовки
<h1> Первый заголовок </h1>
<h2> Второй заголовок </h2>
<h3> Третий заголовок </h3>
· Стиль текста
· Вставка изображения
<img src="foto.jpg"> foto.jpg-название файла с изображением
· Вставка изображения с размерами
<img src="foto.jpg"
width="180" height="240">
height -
Высота изображения.
width -Ширина изображения
· Выравнивание изображения
·
·
· Пример таблицы:
|
<html> <head> <title>Иван</title> </head> <body> <table border="10" width="300" height="300"> <tr> <td> 1 </td></p> <td> 2 </td> <td> 3 </td> </tr> <tr> <td>4 </td>
<td>5 </td> <td>6 </td> </tr> <tr> <td>7 </td> <td>8 </td> <td>9 </td> </tr> </table> </body> </HTML>
|
|
· Ссылка
<a href= “путь к файлу”> Название ссылки </a>
· Ссылка картинкой
<a href="путь к файлу"><img src="путь к изображению"></a>
· «Прозрачная» таблица(верстка сайта таблицей)
<table border= “0”>……</table>
· Видео
<video src="путь к видео" width="400" height="300" controls="controls">
</video>
· Бегущая строка
Примеры бегущих строк
· Кнопка
<button type="button" >
<a href="путь к файлу">Название ссылки </a>
</button>
· Аудиофайл
<audio controls>
<source src="путь к файлу ">
</audio>
· Фреймы
<html>
<head>
<title>фреймы
</title>
</head>
<frameset>
</frameset>
</html>
Отсутствие тега <body> компенсирует новый тег <frameset> - установить фрейм или набор фреймов
<frameset rows="15%,15%,70%"> - такая запись говорит о том, что будет три
горизонтальных окошка где последнее займет 70% площади окна браузера, а первые
два по 15%.
<frameset
cols ="200,240,200"> - здесь три окна расположены вертикально ширина которых указана в
пикселях.
<frameset
rows="100,*,180"> -
такая запись значит, что первое и третье окно будут иметь ширину 100 и 180
пикселей соответственно, а второй фрейм займет всю оставшеюся площадь.
<html>
<head>
<title>фреймы</title>
</head>
<frameset
rows="15%,15%,70%">
<frame
src="logotype.html">
<frame
src="menu.html">
<frame
src="text.html">
</frameset>
</html>
Logotype,menu,text-3 дополнительные страницы.
Практическое задание
Сделать 1 основной сайт(index.html), который с помощью 3 фреймов(3 дополнительные страницы) будет отображаться вся информация.
Составляющие 1 сайта:
· Включить 3 фрейма(горизонтальные)
· Размер фрейма 15%,15%,70%
· 3 дополнительные страницы имеют название: logo,menu,text
· Logo-изображение размером 800 на 120, выравнивание по центру
· Menu-(по вариантам). Заголовок, с выравниванием по середине
· Text-(по вариантам).
· Цвет фона:красный
· Выравнивание: как по заданию
· Выделение: как по заданию
|
Вариант |
Menu |
Text |
|
1 |
Домашние сырные палочки |
Простой, но очень вкусный рецепт домашних сырных палочек. Пальчики оближешь! 1 .Приготовим продукты для сырных полочек. Нам понадобится: Сыр твердый-300 г. Яйцо-1 шт. Мука-30 г. Масло растительное-70 мл. 2. сыр натереть на мелкой терке, добавить муку, яйцо. Перемешать. Сформировать сырные палочки. 3.Обжарить их в растительном масле до золотистого цвета. 4.Сырные палочки готовы! |
|
2 |
Драники |
Простой и быстрый рецепт картофельных драников. Приготовим продукты. Нам понадобится: Картофель-11 шт. Яйца-2 шт. Соль и перец- по вкусу Масло- для жарки 1.Картофель очистить и натереть на крупной терке. 2.Добавить яйца, соль, перец. 3.Перемешать. 4.Жарить на среднем огне до румяности с обеих сторон
|
Пример
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
