- Курс-практикум «Педагогический драйв: от выгорания к горению»
- «Труд (технология): специфика предмета в условиях реализации ФГОС НОО»
- «ФАООП УО, ФАОП НОО и ФАОП ООО для обучающихся с ОВЗ: специфика организации образовательного процесса по ФГОС»
- «Специфика работы с детьми-мигрантами дошкольного возраста»
- «Учебный курс «Вероятность и статистика»: содержание и специфика преподавания в условиях реализации ФГОС ООО и ФГОС СОО»
- «Центр «Точка роста»: создание современного образовательного пространства в общеобразовательной организации»
Свидетельство о регистрации
СМИ: ЭЛ № ФС 77-58841
от 28.07.2014
- Бесплатное свидетельство – подтверждайте авторство без лишних затрат.
- Доверие профессионалов – нас выбирают тысячи педагогов и экспертов.
- Подходит для аттестации – дополнительные баллы и документальное подтверждение вашей работы.
в СМИ
профессиональную
деятельность
Таблицы и фреймы в веб дизайне
Оглавление
ТАБЛИЦЫ И ФРЕЙМЫ 1
Цвет рамки таблицы 1
Пример 1. Таблица 1. Cложная таблица с цветной рамкой и цветными ячейками 1
Пример 2. Таблица 2. Картинка с рамкой 2
Фреймы 2
Пример 3
ЗАДАНИЕ ПО ТАБЛИЦАМ 6
ЗАДАНИЯ ПО ФРЕЙМАМ 6
487
0
ТАБЛИЦЫ И ФРЕЙМЫ В ВЕБ ДИЗАЙНЕ
Оглавление
ТАБЛИЦЫ И ФРЕЙМЫ В ВЕБ ДИЗАЙНЕ1
Цвет рамки таблицы1
Пример 1. Таблица 1. Cложная таблица с цветной рамкой и цветными ячейками1
Пример 2. Таблица 2. Картинка с рамкой2
Фреймы2
Пример3
ЗАДАНИЕ ПО ТАБЛИЦАМ6
ЗАДАНИЯ ПО ФРЕЙМАМ6
Цвет рамки таблицы
Для любой таблицы можно задать рамку равную, например, 5 пикселям следующей записью: <table border="5">. Рамке мы можем задать цвет. Пусть она будет красной: <table border="5" bordercolor="red">.
Пример 1. Таблица 1. Cложная таблица с цветной рамкой и цветными ячейками
Как уже говорилось, атрибут таблицы сolspan - определяет количество столбцов, на которые протянулась ячейка по горизонтали (ширине), а rowspan – количество строк по вертикали (высоте).
Обратимся к такому примеру, в котором colspan=2 и rowspan=2 и красная рамка:
<table border="1" bordercolor="red">
<tr>
<tdheight="30"bgcolor="green"colspan="2"> Первая ячейка в первой строке зеленая, шириной в 2 столбца, высотой 30 пикселей
</td>
<tdwidth="60"bgcolor="green"rowspan="2">Вторая ячейка в 1й строке зеленая, высотой в 2 строки, зеленая, шириной 60 пикселей
</td>
</tr>
<tr>
<tdheight="30"width="50"bgcolor="red">Первая ячейка во второй строке красная, высотой 30, шириной 50 пикселей
</td>
<tdwidth="60"bgcolor="red">Вторая ячейка второй строки красная, шириной 60 пикселей
</td>
</tr>
</table>
Рис. 1. Таблица 1
Пример 2. Таблица 2. Картинка с рамкой
Посредством таблиц можно оформлять картинки в рамки:
<tableborder=5bordercolor=#ff0000width=200height=200>
<tr>
<td>
<Img src="/sobaka.jpg">
</td>
</tr>
</table>
Рис. 2. Таблица 2
Фреймы
Фреймы позволяют нам открыть в окне браузера сразу несколько документов одновременно. Чтобы браузер показал сразу несколько документов, надо создать специальныйindex.html и в нем указать, сколько документов откроется в одном окне сразу и сколько места будет занимать каждый из них (рис. 1).
Рис. 1. Типичный Web-документ с фреймовой структурой в три окна
Пример
Создадим файлindex.htm и обратите внимание на то, что здесь нет тега body:
<html>
<head>
<title>Фреймы</title>
<frameset> </frameset>
</head>
</html>
Далее мы создадим еще три фрейма: logo.htm (логотип), menu.htm (меню) и content.htm (содержание). Взаимное расположение этих окон может быть разным. Мы создадим вариант последовательного расположения этих окон друг под другом:
Файл стартовый index.htm:
<html>
<head>
<title>Фреймы</title>
<frameset rows="200,*,200">
<frame src="/logo.htm">
<frame src="/content.htm">
<frame src="/menu.htm">
</frameset>
</head>
</html>
В данном примере запись вида <framesetrows="200,*,200"> означает, что окно документа делиться на три строки. Высота первой строки 200 пикселов, третьей - 200, а вторая занимает все оставшееся между ними пространство.
Примечание
Row=строка. Заменив rows на cols мы получим не фреймы-строки, а фреймы-столбцы. Размер строк или столбцов можно задавать не только в пикселях, но и в процентах от общей ширины (высоты) окна, например, так <frameset cols="20%,20%,60%">. Сумма должна равняться 100%.
Тег frame сообщает браузеру какие документы будут в каждой строке (logo.htm, content.htm, menu.htm). Теперь создадим эти фреймы-строки.
Файл (фрейм) первый logo.htm:
<html>
<head>
<title>Фрейм 1</title>
</head>
<body>
Файл (фрейм)первый logo.htm: Логотип
</body>
</html>
Файл (фрейм)второй content.htm:
<html>
<title>Фрейм 2</title>
</head>
<body>
Файл (фрейм) второйcontent.htm: Содержание
</body>
</html>
Файл (фрейм) третий menu.htm:
<html>
<head>
<title>Фрейм 3</title>
</head>
<body>
Файл (фрейм) третий menu.html: Меню
</body>
</html>
Теперь все четыре файла (эти три и стартовый - index) поместим вместе в общую папку и посмотрим, что получилось в браузере (рис. 2).
Рис. 2. В браузере отрыто три окна сразу
ЗАДАНИЕ ПО ТАБЛИЦАМ
Создайте такую таблицу:
Создайте таблицу с синей рамкой. Закрасьте клетки этой таблицы в шахматном порядке красным (red) и зеленым (green) цветом. Сделайте первую строку таблицы клетками 40 пикселов, а вторую строку таблицы клетками 60 пикселов?
Вставьте какую-либо картинку в черную рамку.
ЗАДАНИЯ ПО ФРЕЙМАМ
Напишите код для следующих фреймов (вариант по выбору преподавателя):
Вариант 1
Вариант 2
Откройте в одном фрейме 4 веб документа как на рис:
Вариант 3
7
Адрес публикации: https://www.prodlenka.org/metodicheskie-razrabotki/340570-tablicy-i-frejmy-v-veb-dizajne
БЕСПЛАТНО!
Для скачивания материалов с сайта необходимо авторизоваться на сайте (войти под своим логином и паролем)
Если Вы не регистрировались ранее, Вы можете зарегистрироваться.
После авторизации/регистрации на сайте Вы сможете скачивать необходимый в работе материал.
- «Организационно-методическое обеспечение деятельности педагога дополнительного образования»
- «Основные аспекты волонтерской деятельности»
- «Содержание и методы преподавания учебного предмета «Литературное чтение» по ФГОС НОО»
- «ОГЭ 2025 по физике: содержание экзамена и технологии подготовки обучающихся в соответствии с ФГОС»
- «Подготовка обучающихся к ЕГЭ 2026 по информатике»
- «Организация документооборота в учреждениях социального обслуживания»
- Физика и астрономия: теория и методика преподавания в образовательной организации
- Педагогика и методика дошкольного образования
- Тифлопедагогика: учебно-воспитательная работа педагога с детьми с нарушениями зрения
- Методическое сопровождение реализации общеобразовательных программ. Организация деятельности учителя-методиста
- Основы управления дошкольной образовательной организацией
- Образовательные технологии и методики обучения основам безопасности жизнедеятельности
Чтобы оставлять комментарии, вам необходимо авторизоваться на сайте. Если у вас еще нет учетной записи на нашем сайте, предлагаем зарегистрироваться. Это займет не более 5 минут.