Практическое занятие № 22

ТЕМА: Понятие о каскадных таблицах стилей (CSS).

ЦЕЛЬ: Сформировать знания о каскадных таблицах стилей, научить использовать таблицы при разработке фрагментов веб-сайтов. 

 

1. Последовательность выполнения практического занятия.

1.1. Внеаудиторная подготовка

а. повторить технику безопасности при работе на ПК.

б. повторить материал предыдущего занятия или изучить материал учебной  литературы: Информатика: учебное пособие для 11 класса, с. 41…50.

1.2. Работа на учебном занятии

а. Выполнить практические задания.

б. Убрать рабочее место.

в. Оформить отчёт.

2. Методические указания

 

Теоретические сведения для выполнения Задания 1.

Использование таблиц.

Размещать текст в несколько колонок, а также располагать рисунки и текст в требуемых местах веб-страниц удобно с помощью таблиц.

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

http://gatk.by/dotd/inform/pz28/pz28.files/image001.jpg

 

Задание 1. Создать веб-страницу на тему города Беларуси,  на которой изображена карта Беларуси с гербами городов и указаны даты их основания, как показано на рисунке ниже.

герб.jpg

 

ГОРОДА

БЕЛАРУСИ

Флаг_Белоруссии.png

 

МИНСК

1067

 

belarus2.gif

 

ВИТЕБСК

974

 

 

ГРОДНО

1127

 

МОГИЛЕВ

1267

 

БРЕСТ

1019

 

ГОМЕЛЬ

1142

 

 

Методика выполнения Задания 1.

- запустить редактор FrontPage, который находится Пусксе программы\MS Office\ FrontPage;

- вставим таблицу из четырёх строк и трёх столбцов;

- в средней ячейке первой строки наберем  заголовок Города Беларуси;

- оставшиеся ячейки второго столбца выделим и выполним следующую последовательность действий: на дополнительной вкладке Работа с таблицами переключимся на закладку Макет и нажмём кнопку Объединить ячейки;

http://gatk.by/dotd/inform/pz28/pz28.files/image025.jpg

- в полученную ячейку (она одна после процедуры объединения ячеек) вставим изображение карты Беларуси;

- все файлы, необходимые для работы находятся в папке на диске Z:\ Веб-конструирование\Таблицы;

- в первую и третью ячейки первой строки вставим изображения герба и флага Беларуси;

- в остальные ячейки введем названия городов и даты их основания, а также отформатируем надписи и установим размеры ячеек в соответствии с рисунком, при этом проще всего изменять ширину столбцов, перетаскивая их границы с помощью мыши;

- для размещения всей информации по центру ячеек выделим таблицу, правой клавишей мыши вызовем контекстно-зависимое меню и командой Выравнивание ячеек установим Выравниванять по центру;  

http://gatk.by/dotd/inform/pz28/pz28.files/image026.jpg

- сохраните веб-страницу в свою папку с именем goroda.htm.

 

Теоретические сведения для выполнения Задания 2.

Понятие каскадных таблиц стилей (CSS).

 

Каскадные таблицы стилей:

          управляют внешним видом документов;

          позволяют использовать разнообразные эффекты в оформлении;

          дают возможность применять единый стиль для различных документов с минимумом затрат.

 

Стиль – это правило, указывающее браузеру, как выводить на экран содержимое какого-то определенного тега.

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

Правило приписывает определенное значение одному или нескольким свойствам тега или нескольким тегам.

Например: цвет, шрифт, интервал между строками, отступы в таблицах, фон и т.д.

 

Способы присоединения стиля к тегу:

http://gatk.by/dotd/inform/pz28/pz28.files/image028.jpg

 

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

Этот каскад свойств и стилевых правил и дал название стандарту каскадных таблиц стилей.

Long waterfall

 

1. Встроенные стили.

Это простейший способ применения стиля к тегу. Для этого используется атрибут style:

<h1 style=“color:blue; font-style:italic;”>

Заголовок синий курсив </h1>

 

Этот стиль действует только для этого тега.

 

2. Таблицы стилей на уровне документа

Таблицы стилей на уровне документа задаются с помощью тега <style>. Этот тег должен находиться в заголовке документа.

 

<html>

<head <title> Текст с синими заголовками </title>

<style type=”text/css”>

    h1 { color: blue; font-style: italic; }

</style>

</head>

<body>

 

Атрибут type=”text/css указывает, что используются стили каскадных таблиц стилей.

 

3. Внешние таблицы стилей

Внешние таблицы стилей – это отдельные файлы с расширением .css, в которых записаны правила оформления тегов.

my_styles.css

h1 {color:red;}     body {background: black; font: medium helvetica;}

 

Этот файл содержит два правила.

В файле .css могут быть только правила и комментарии 

/*текст комментария*/

 

Для построения таблицы в языке HTML  используются теги <table>  - таблица; <tr>  - строка таблицы;  <td> - ячейка таблицы.

В этих тегах можно использовать атрибуты  width - ширина таблицы или ячейки, bgcolor  цвет фона таблицы или ячеек,border  - толщина рамки и    bordercolor - цвет рамки и другие.

Ширина таблицы может быть задана в пикcелях или в процентах по  отношению к ширине страницы, напримерwidth=450 или   width=40%.

По умолчанию при отображении таблицы создается эффект выпуклости границы. Если задать атрибуты border=1 иbordercolor =green, то эффект выпуклости исчезнет и таблица будет ограничена двойной рамкой зеленого цвета. Атрибутcellspacing=0 задает одинарную рамку.

Кроме редакторов Блокнот, Patriot XP и др., которые позволяют составлять программы на языке HTML, есть возможность программировать и в самом редакторе визуального программирования FrontPage. Для этого необходимо использовать режимС разделением:

 

image5

 

Задание 1. Создать в окне кода редактора FrontPage таблицу из четырех столбцов и одной строки шириной 600 пикселей с рамкой зеленого цвета толщиной 1 пиксель как показано на рисунке ниже.

image5

 

Методика выполнения Задания 2.

- создадим ещё один документ в редакторе FrontPage;

- перейдём в режим С разделением;

- в верхнем окне наберем HTML-код;

- все файлы, необходимые для работы находятся в папке на диске Z:\ Веб-конструирование\Таблицы;

- в нижнем окне будет отображен результат;

- сохраним документ под именем tabl2.htm и просмотрим веб-страницу в браузере.

 

Самостоятельная работа

Создайте домашнюю страницу на тему одного из городов Гомельской области на основе текстовой информации и фотографий, которые размещены на диске  D:\Папка для сохраненияля 1 курса\Города, используя любой из способов построения таблиц.

 

3. Содержание отчета

а. Титульный лист

б. Цель работы

в. Дидактическое и методическое обеспечение

г. Последовательность выполнения работы по заданиям с описанием основных этапов осуществляемых действий

д. Заключение в виде анализа полученных результатов и выводов

 

 Контрольные вопросы

1.   Как вставить таблицу в редакторе FrontPage?

2.  Для чего используются таблицы на веб-страницах?

3.  Как задается размер шрифта на веб-страницах?