|
|
| ||||||
 | Главная | | ||
| Новости | | ||
| Жизнь гимназии |  | | |
| Учителя | | | |
| Ученики | | | |
| Научная работа | | | |
| Гимназический вестник | | ||
| Галерея | | ||
| Публичный доклад | | ||
| Нормативные документы | | ||
| ||||
| Главная > Публикации учителей |  |
|
МБОУ
гимназия №1 Разработка
урока Создание
фреймовой структуры Web-страницы Учитель
информатики: Мисякова Ирина Васильевна г.
Краснознаменск 2010-2011
уч.год Урок
на тему «Создание фреймовой структуры Web-страницы» 1.
Актуализация
опорных знаний. Перечислите
назначение тегов: <html>,
<head>,
<title> <body> Для
чего нужен тэг <body
bgcolor>.
Как
можно задать цвет на Web-странице Как
создать гиперссылку на файл 2.
Новый
материал. Откройте
программу Блокнот. Наберите следующие тэги: <html>
<head> <title>
страничка
A<
/title><
/head> <body
bgcolor
="#ff00ff
">фрейм
розового цвета
ссылка на <А
href="c.htm"
>c.htm
< /А> <
/body> < /html> Сохраните
файл под именем a.htm Скопируйте
файл a.htm, переименуйте его в b.htm
и внесите изменения. <html> <head> <title>
страничка
B< /title>< /head> <body
bgcolor =”blue”>фрейм
голубогоцвета<
/body > </html> Скопируйте
файл b.htm, переименуйте его в c.htm
и внесите изменения <html> <head> <title>
страничка
A</ title>< /head> <body
bgcolor ="red">фpeйм красного цвета</body
> </html> Скопируйте
любой файл с расширением .jpg
( например cat.jpg)
к себе в папку. Откройте программу Блокнот. Перед вами тэги которые мы ещё не
изучали, но после набора, вы увидите и разберётесь сами, уверяю вас, как
они работают. Наберите следующие
тэги: <html> <head><title>
демонстрация фреймов </title></head> <frameset
rows="40%,* "> <frame
src="cat.jpg" > <frameset
cols="40%,* "> <frame
src="a.htm" > <frame
src="b.htm" > </frameset
> </frameset
> </html>
Сохраните
файл под именем frame.htm Откройте
файл frame.htm,
у вас в одном окне три файла и гиперссылка на файл с.htm.
А
теперь давайте разберёмся почему у нас так всё получилось. Вы владеете
английским языком, слова rows
– строки, cols
– колонки вам понятны. Кто может пояснить результат? Примерный ответ
учеников. Тег
<frameset
rows="40%,*
"> выделяет в 40% от всего окна для размещения строк в верхней части и тэг
<frame
src="cat.jpg"
> помещает туда графический файл cat.jpg.
Звёздочка ставится для того, чтобы в разных браузерах не было конфликтов при
отображении оставшейся части, принцип - сколько осталось, всё ей.
Тэг <frameset
cols="40%,*
"> разделяет оставшуюся часть окна на две колонки, причём левой отводится 40% от свей части и в
ней будет размещён файл a.htm
(<frame
src="a.htm"
>). Файлу b.htm
(<frame
src="b.htm"
>) отводится оставшаяся часть окна. Два тэга </frameset
> закрывают колонки и строки. Самостоятельное
задание по созданию таблицы на Web-странице: В
файле b.htm
- цвет фона изменить через
16-ричное представление. Добавить в файл b.htm
таблицу состоящую из 4 колонок и 3 строк. Заголовки 4-х колонок ввести самостоятельно по
правилу заполнения таблицы «объект-свойство», в строки ввести свойства
объектов. Пример
вставки таблицы и её заполнение <body
bgcolor=”#00FFFF”> <table
border="1"> <tr>
<th>Заголовок
1 колонки</th> <th>
Заголовок 2 колонки</th> <th>
Заголовок 3 колонки </th> <th>
Заголовок 4 колонки </th> </tr> <tr> <td>1
объект таблицы «объект-свойство»</td> <td
align="centre">свойство1</td> <td
align="centre">свойство2</td> <td
align="centre">свойство3</td> </tr> <tr> <td>2
объект таблицы «объект-свойство» </td> <td
align="centre"> свойство1</td> <td
align="centre"> свойство2</td> <td
align="centre"> свойство3</td> </tr>
</table> </body> | |
|
| Галерея |
 |
| Название |
|