Geum.ru

Сергеева Диана Лазаревна учитель информатики средней школы №10 г. Ярцево 2007 г. Содержание: пояснительная записка

Вид материалаПояснительная записка

Содержание


Герб Ярцева
Герб Ярцева
Этапы занятия
I. Орг.момент.
Тестовый опрос.
III. Изучение нового материала.
Цвет и фон таблицы.
Цвет внешней рамки.
Подобный материал:
1   2   3   4   5   6   7   8   9



III. Закрепление материала.


Лабораторная работа «Таблицы на Web-страницах. Герб Ярцева».

Цель работы:
  • научиться создавать таблицы на Web-странице;
  • научиться задавать общие параметры таблицы.

1
Создать папку Герб Ярцева

2
Скопировать файл gerb.gif c Рабочего стола в папку Герб Ярцева.

3
В папке Герб Ярцева создать HTML-документ под именем table.php

4
Набрать содержимое HTML-документа под именем table.php.





Герб Ярцева











Герб Ярцева
Описание герба:

"Щит скошен слева и полускошен справа. В верхнем зелёном поле золотой кадуцей Меркурия.

В среднем голубом поле золотые наковальня и молот. В нижнем красном поле серебряная бобина с пряжей. В вольной части герб Смоленска. Щит увенчан серебряной башенной короной о трёх зубцах и окружен справа дубовой ветвью с желудями,

слева - колосьями пшеницы и стеблем льна, перевитыми гвардейской лентой, на которой золотыми литерами сделана надпись - "ЯРЦЕВО"

Автор городской символики - Г.В. Ражнев.

Кадуцей символизирует, что становление города связано с деятельностью купца А.И. Хлудова. Наковальня, молот и бобина указывают на характерные отрасли промышленности, развитые в Ярцево. Георгиевская лента напоминает о том, что во время Великой Отечественной войны одна из дивизий стала Гвардейской на ярцевской земле.






5
Сохранить изменения в файле table.php

6
Просмотреть созданную Web-страницу.

Результат
Web-страница содержит в табличном виде информацию о гербе г.Ярцево. В заголовке таблицы содержится ее название – «Герб г.Ярцево». Слева в таблице изображение герба г.Ярцево, справа-описание герба.


IV. Итог занятия.
  • На Web-странице можно использовать таблицы для представления данных и для компоновки страницы.
  • Для таблицы можно задать следующие параметры:
    1. размер относительно окна браузера
    2. выравнивание таблицы в документе
    3. выравнивание содержимого


Занятие 8. Таблица как инструмент Web-дизайна. Цвет и фон таблицы.

Цели занятия:
  • научить применять таблицы для разметки Web-страниц;
  • научить устанавливать цвет и фон таблицы;
  • научить устанавливать цвет внешней рамки таблицы.


План занятия

Этапы занятия
Деятельность учителя
Деятельность учащихся

Орг.момент
Приветствует учащихся, проверяет их готовность к занятию.
Ученики готовятся к занятию, приветствуют учителя.

Актуализация опорных знаний.
Учитель проводит тестовый опрос. Руководит проверкой тестовых работ учащимися.

Ученики отвечают на вопросы теста. Самостоятельно проверяют свои работы под руководством учителя.

Изучение нового материала.
Учитель проводит лекцию для знакомства учащихся с новым материалом. Помогает учащимся при составлении конспекта.
Ученики слушают объяснения учителя. Составляют конспект, используя опорные вопросы.

Закрепление материала.
Учитель знакомит с целями и планом выполнения лабораторной работы. Наблюдает за выполнением лабораторной работы, консультирует учащихся.
Ученики выполняют лабораторную работу за компьютером. В случае необходимости обращаются за консультацией к учителю.

Итог занятия
Учитель задает вопросы для повторения основных знаний, полученных на занятии.

Ученики отвечают на вопросы учителя.


Ход занятия.

I. Орг.момент.

II. Актуализация опорных знаний.

Ребята, на прошлом занятии мы научились создавать таблицы на Web-странице. Сейчас мы проверим ваши знания по пройденной теме. Вам будут розданы вопросы теста с вариантами ответов. После того, как вы ответите на вопросы, мы вместе проверим правильность ответов.

Тестовый опрос.
  1. Для создания таблицы на Web-странице можно использовать:

А. Контейнер …


Б. тег

В. тег

2. Для формирования отдельной строки таблицы используется:

А. контейнер

Б. контейнер

В. контейнер …

3. Тег
… …
позволяет установить:

А. высоту таблицы, составляющую 70 % высоты окна браузера

Б. высоту таблицы, равную 70 пикселям

В. ширину таблицы, составляющую 70 % ширины окна браузера

4. Какой из следующих HTML-кодов разместит таблицу по правому

краю Web-страницы:

А.


Б. < TABLE align=top>

В. < TABLE align=left>

5.Содержимое ячейки таблицы можно центрировать по вертикали с помощью тега:

А.


Б.

В.

III. Изучение нового материала.

Учащимся сообщается о том, что в ходе лекции они должны записать в тетради ответы на вопросы.

Вопросы для учащихся.
  • Для каких целей на Web-странице можно использовать таблицу?
  • Какой атрибут позволяет задать цвет фона таблицы, строки или ячейки таблицы?
  • Какой атрибут позволяет заполнить графическим изображением фон таблицы или отдельной ячейки?
  • В каких тегах можно записать атрибуты bgcolor и background?
  • Какие атрибуты позволяют отображать таблицу в рамке определенного цвета?


Ребята, на прошлом занятии мы научились применять таблицы для представления данных с естественной табличной организацией (например, список сотрудников, список услуг).

Кроме этого, таблицы часто применяются как наиболее популярный и простой способ компоновки Web-страниц. Все пространство страницы разбивается на прямоугольные ячейки таблицы, в которых размещаются другие элементы (тексты, графика, ссылки и т.п.). При этом границы ячеек могут быть как видимыми, так и невидимыми.

Для табличной разметки страницы особое внимание следует обратить на задание размеров таблицы – абсолютных или относительных. Так, задание ширины и высоты таблицы равными 100% растягивает её на всю клиентскую область браузера, что часто и требуется. Следует учитывать, что в случае задания абсолютных размеров таблицы браузер будет использовать их лишь как рекомендуемые, а окончательный результат определится с учетом размеров содержимого ячеек. Поэтому размеры таблицы приходиться подбирать экспериментально, в зависимости от конкретного содержимого.

В одной из ячеек можно поместить ссылки на другие страницы сайта. Это будет навигационная панель или оглавление сайта.

Цвет и фон таблицы.

Цвет фона всей таблицы или отдельных ячеек устанавливается с помощью атрибута bgcolor. Значение этого атрибута задается шестнадцатеричным числом в соответствии с моделью RGB или именем цвета.

В зависимости от того, какой из тегов (, ,
или ) вы дополните атрибутом bgcolor, получится четыре варианта задания цвета: фона всей таблицы, фона строки, фона ячейки заголовка или фона данных. Например, тег назначает красный фон всей таблицы, а зеленый фон ячейки задает тег
.

Примечание. С помощью атрибута bgcolor можно установить цвет фона всего документа. Для этого атрибут bgcolor вставляют в тег . Например, .

Фон всей таблицы или отдельных ячеек можно заполнить графическим изображением с помощью атрибута background. Атрибут background принимает в качестве значения адрес графического файла и записывается в тегах ,
или . Например,

Если в тегах таблицы не указаны атрибуты bgcolor или background, то фон таблицы считается прозрачным. В этом случае фон таблицы определяется фоном документа, заданным одноименными атрибутами в теге .

Если в одном и том же табличном теге используются одновременно два атрибута, bgcolor и background, то происходит заполнение фона графическим изображением.

Изображение, используемое в качестве фона, не масштабируется в соответствии с размерами элемента (таблицы или ячейки), а размеры элемента автоматически не подстраивается под размеры изображения. Если изображение больше элемента, то будет видна лишь некоторая его часть, а если меньше, то элемент заполняет заполняет несколько экземпляров изображения.

Примечание. Графическое изображение можно использовать в качестве фона всей страницы. Для этого достаточно тег дополнить атрибутом background. Например, .

Цвет внешней рамки.

Чтобы выделить цветом внешнюю рамку таблицы, нужно в тег
ввести атрибуты bordercolor и border. Значение атрибута bordercolor выбирается из именованных цветов или задается в числовом шестнадцатеричном формате.

Например тег
…