Установка внутренних полей в таблице
При использовании таблиц возникает необходимость установки промежутков между ячейками или внутренних полей.
Внутренние поля - В полиграфии пустой промежуток между колонками называется внутренним полем (gutter). Для создания внутренних полей можно использовать таблицы: 
ввести ячейку, которая служит внутренним полем (как содержание ячейки можно указать несколько неразрывных пробелов),
воспользоваться атрибутом CELLPADDING (промежуток между содержанием и рамкой ячейки) или атрибутом CELLSPACING (промежуток между ячейками), как показано на приведенных примерах:
Задайте при верстке своей страницы внутренние поля различными способами.
Оформите отчет по проделанной работе, который должен содержать:
1. Запишите в отчет все теги, которые применяются при создании таблиц и их атрибуты. Контрольные вопросы:
1. Что такое статическая компоновка страницы и в чем еѐ достоинства/недостатки. Как она осуществляется?
2. Как объединить две ячейки в таблице по горизонтали?
3. Как задать толщину и цвет границ таблицы?
4. Как задать внутренние поля таблицы (внутренние отступы от текста)?
5. Как задать рисунок в качестве фона таблицы?
Практическая работа №7
«Фреймы»
Цель работы: научиться создавать фреймы различных типов, познакомиться с тегами для создания фреймов, создавать плавающий фрейм на странице.
Создание фреймов
Основная идея создания фреймов состоит в том, что каждый фрейм представляет собой область окна браузера, в которой отображается законченный HTML-документ. Если разбить окно браузера по вертикали ("столбцам") на два фрейма, можно поместить один HTML-документ в левый фрейм и второй HTML-документ в правый фрейм. Однако при этом вам необходимо создать и третий HTML-документ. Он называется мастерстраницей (master page) и содержит специальные тэги <frameset>, определяющие, как разбивается окно браузера на фреймы, а также тэги <frame>, которые определяют, какие документы отображаются в каждом фрейме. По существу, в этом и состоит основная функциямастер-страницы.
До сих пор рассматривалась структура веб-сайта, которая реализуется сменяющими друг друга страницами или же верстка с помощью таблиц. Например, код для панели навигации приходилось помещать в каждую страницу сайта. Размножение одинакового кода ведет кувеличению размера сайта и усложнению его преобразования.
Существует способ зафиксировать одну или несколько страниц в окне (например, для размещения панели навигации), тем самым разделив окно на независимые области. Это способ называется фреймы.
Для создания фреймового веб-сайта необходимо создание
а) фреймов (страниц, которые будут отображаться в окне). Для этого используются
отдельные HTML документы, загружаемые в отдельные фреймы.
б) контейнера (документа, содержащего объединяющий фреймы код). Фактически это и
есть мастер страница.
В качестве фреймов можно использовать любые веб-страницы. В качестве контейнера используется специфический документ, который не является веб-страницей, т.е. его содержимое нигде не отображается, и элемента body он не содержит.
| Этот код находится в документе index.html, который является мастерстраницей, то есть контейнером для фреймов |
Предположим, что мы имеем две веб-страницы (1.html и 2.html) c содержимым и одну вебстраницу с панелью навигации (menu.html). Тогда контейнер (index.html) будет иметь следующий код:
<frameset cols="90%,*" border="0">
<frame name="main" src="1.html">
<frame name="menu" src="menu.html">
</frameset>
Атрибут cols=”90%,*” означает, что используется вертикальное деление на фреймы, левый будет занимать 90% окна, правый – остальное место. Соответственно, указание rows вместо cols даст нам горизонтальное деление.
Примечание: если опустить знак процента, значение берется в пикселах.
Следует обратить особое внимание на атрибут name. Именно его наличие позволяет управлять отображением содержимого в «сменном» фрейме. Заданное в этом атрибуте имяуказывается затем в гиперссылках панели навигации в атрибуте target, например:
| Этот код – в документе menu.html |
<a target="main" href="1.html">1</a> <br>
<a target="main" href="2.html">2</a> <br>
Примечание: чтобы ссылки из внутренних страниц во фреймовом сайте открывались в новом окне (например, для отображения внешних ресурсов), нужно указывать атрибут target=”_blank”.
Обратите внимание на атрибуты имеющие отношение к разделителям окон фреймов, заданию их толщины, цвета, а также наличия полос прокрутов и т.д.
Верстка страницы фреймами
Предположим, мы хотим сделать такую страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее:
Рассмотрим атрибуты тегов <frameset> и <frame>. Первый из них, <frameset> - парный тег, т.е.
он обязательно должен иметь закрывающий тег. Может включать следующие атрибуты: cols и rows - применение и возможные значения этих аттрибутов были рассмотрены выше.
Внимание! Не рекомендуется одновременное использование аттрибутов cols и rows, т.е. в некоторых браузерах конструкция <frameset cols="50%,50%" rows="30%,70%"> может привести к непредсказуемым результатам;
border="x" - толщина рамок фреймов в пикселах;
frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или 1) рамок в определенном фреймсете. Например, таким образом в предыдущем примере можно было бы убрать только рамки между баннером и текстом и между логотипом и меню, а между левым и правым фреймами оставить;
bordercolor="#hhhhhh" - цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное слово (red, blue, teal, olive и т.д.); Тег <frame> может включать следующие атрибуты:
src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм; name="имя" - присваивает имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме
(подробнее в следующем абзаце); scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения
атрибута:
o yes - полосы прокрутки присутствуют обязательно;
o no - полосы прокрутки отсутствуют всегда - независимо от того, вмещается ли документ в фрейм целиком или нет;
o auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм;
noresize - наличие этого атрибута запрещает изменение размеров фрейма пользователем (обычно любую границу фрейма можно с легкостью переместить мышкой).
Плавающий фрейм
Еще один интересный тэг внутреннего (inline), или плавающего (floating), кадра iframe позволяет выводить HTML-документы в текущем окне браузера. Например, с помощью тэга
<center><iframe src="lesson3.htm" width="400" height="100"></iframe></center>
Ниже приведен пример, иллюстрирующий открытие плавающего фрейма внутри WEBстраницы.
Обязательный атрибут src определяет местонахождение документа, отображаемого во внутреннем кадре, а атрибуты ширины width и высоты height определяют размеры (в пикселах) кадра. Интересно отметить, что внутренний кадр действует как автономное окно браузера. В частности, щелчком на ссылке в отображаемом документе можно загрузить в кадр новый документ. Проверьте эту возможность в кадре, который выведен ранее.
С помощью атрибута frameborder="0" тэга <iframe> можно запретить формирование рамки вокруг кадра (по умолчанию для этого атрибута принимается значение frameborder="1", которое вызывает формирование рамки). Приведем пример внутреннего кадра без рамки:
<center><iframe frameborder="0" src="lesson3.htm" width="400" height="100"></iframe></center> Задание к лабораторной работе.
Создайте на вашей странице несколько фреймов, например напоминающих структурусловаря, статьи по определенному слову загружаются на той же странице в определенной частиокна. Кроме того разместите на вашей странице плавающий фрейм, в котором, например будетзагружаться информация об авторских правах и т.д. Оформите отчет по проделанной работе, который должен содержать:
Запишите шаблон мастер страницы.
Запишите все атрибуты тегов для создания страницы с фреймами.
Запишите ответы на контрольные вопросы. Контрольные вопросы:
1. Как создать плавающий или встроенный фрейм?
2. Можно ли запретить или разрешить передвигать пользователю границу разделения фреймов, меняя тем самым ширину окон? Каким образом?
3. Почему не рекомендуется использовать фреймы для верстки сайтов? Какие с ними могут быть связаны проблемы?
4. Как сделать разделители фреймов невидимыми?
5. Как задать величину отступа (внутренние границы) содержимого внутри фрейма?
Практическая работа №8
«Каскадные таблицы стилей CSS (Cascading Style Sheets)»
Цель работы:изучение и применение Каскадных Таблиц Стилей (CSS) при оформлении (разметке) Web-страниц.
Теоретические сведения:
Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).
Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:
Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они не были для этого предназначены изначально), они не решили всех проблем. Невозможно осуществить следующее:
- Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице).
- Нельзя задать фиксированные координаты положения блока на странице. - Нельзя наложить один блок на другой. Например, попробуйте надвинуть картинку поверх таблицы или другой картинки.
Вторая проблема заключалась в том, что приходилось каждый раз задавать на страницах размер и цвет шрифта, свойства ячеек таблицы и т.д. Это сильно увеличивало размеры страницы, а значит, она медленнее загружается. В случае если вам захотелось изменить цвет или размер шрифта, вам пришлось бы редактировать все страницы.
Третья проблема заключалась в том, что все браузеры имеют индивидуальные настройки.
Например, в браузере можно увеличить шрифт, что приведет к искажению всей страницы.
С помощью CSS эти проблемы можно решить.
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования.Если понадобится изменить параметры однотипных элементов на сайте, придется просматриватьвсе страницы, чтобы найти и поменять теги.
Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размерытекста и другие параметры в стилях. Стилем называется набор правил форматирования,который применяется к элементу документа, чтобы быстро изменить его внешний вид.
Стили позволяют одним действием применить сразу всю группу атрибутов форматирования.С их помощью можно, например, изменить вид всех заголовков. Вместо форматированиязаголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец,выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу <H1>.Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей,достаточно изменить параметры стиля во всех документах, где он используется, и вид текстапоменяется автоматически.
Другое преимущество CSS состоит в том, что стили предлагают намного большевозможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться вовнешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходитьчуть быстрее.
Способы применения CSS
Существует три способа применения таблиц стилей:
Внутренние таблицы стилей (Inline Style Sheets) - при помощи специального атрибута помещаются прямо в HTML теги.
Пример HTML:
<font color="blue" size="3" face="Arial"> Пример </font>Пример CSS:
<font style="color:blue; font-size:12pt; font-family:Arial"> Пример </font>
Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одноготега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.
Глобальные таблицы стилей (Global Style Sheets) - определяют стиль элементов во всем документе.
Для этого используется тег <STYLE type="text/css">.
Он размещается в заголовке документа <head>. Пример:
<html>
<head>
<STYLE type="text/css"> h1 {color:red; font-style:italic; font-size:32px} - переопределение стандартного тега.
.blue {color:blue} - определение нового класса
</STYLE>
</head>
<body>
Теперь эти стили можно применять в любом месте html-кода. Для этого используются следующие конструкции:
<h1> Этот заголовок написан крупным красным курсивом </h1> Вот <font class="blue"> это </font> слово - синие.
</body>
</html>
В данном примере все элементы H1 будут написаны крупным красным курсивом, все элементы с указанным классом BLUE будут синими.
Связанные таблицы стилей (Linked Style Sheets) - могут быть использованы для нескольких документов сразу и хранятся во внешнем файле. Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может бытьиспользован для любых веб-страниц. Для подключения таблицы связанных стилей используетсятег <LINK> в заголовке страницы
Пример внешнего файла:
Файл main.css
body {background:black; font-size:9pt; color:red; font-family:Arial Black}
.base{color:blue; font-style:italic}
h1 {color:white}
#bold {font-weight:bold}
В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так:
<LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла">
Пример:
Файл Index.html
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
Содержание Документа
</body>
</html>
Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им. Синтаксис CSS
Все объявления CSS (официально они называются "селекторы") записываются в фигурных скобках:
ТЕГ:псевдокласс.класс { характеристика1: значение1; характеристика2: значение2}Описание каждого класса делается при помощи конструкции, подобной этой:
.small { font-size: 9pt; }
Сначала указывается имя класса - оно может быть произвольным, но желательно все-таки давать осмысленное название. Далее, в фигурных скобках {} перечисляются все необходимые
параметры для данного класса. Параметры отделяются друг от друга точкой с запятой. Вот еще один пример, в котором используется более длинное описание:
.small { font-size: 9pt; color: #eeeeee; text-align: center; }
Универсальный класс - может быть применен к любому тегу, имя класса начинается с точки.
Пример:
<p class=small>Накладываем стиль на этот текст</p>
<td class=small>Накладываем стиль на этот текст</td>
Теговые классы - может быть применен к конкретному тегу, имя класса начинается суказания тега, после точки записывается имя класса. Пример:
p.small { font-size: 9pt; }
Класс, определенный таким образом, сработает только в том теге, для которого он предназначен, а для всех остальных будет проигнорирован:
<p class=small>Этот текст будет выведен стилем small</p>
<td class=small>А этот останется неизменным</td>
Мы можем определять параметры не только для одного тега, но и сразу для нескольких. Дляэтого в определении стиля достаточно перечислить их через запятую:
P, TD, LI { font-size: 9pt; color:green;}
В случае переопределения существующих тегов, в описании стиля можно указывать не все параметры, а лишь те из них, которые мы хотим изменить. Все остальные параметры примут значения по умолчанию, которые для разных тегов различны. Псевдоклассы
В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространенный. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта: a { text-decoration: none; }a:hover { text-decoration: underline; }
Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней. А вот и другой пример псевдокласса - определение буквицы вначале абзаца: p:first-letter { font-size: 200%; font-weight: bold; }
Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов. Выполнение работы: Задание 1
С помощью внутренних таблиц стилей, задайте оформление шрифта на вашей странице.
Сделайте, чтобы текст был написан полужирным шрифтом Arial, размером 12 пкс. Цвет шрифта задайте согласно выбранной ранее цветовой схеме.
Задание 2
Оформите свои страницы с помощью внешней таблицы стилей.
1.Создайте каталог /css/ в своей папке. Создайте в нем файл main.css
2.Подключите его ко всем страницам разработанного ранее сайта с помощью тега <LINK>.
3.Задайте по умолчанию следующие параметры для всех страниц (переопределив, тег <body>): - цвет фона
- размер шрифта
- цвет шрифта
4.Проверьте работоспособность внесенных изменений.
Задание 3
1.Задайте по умолчанию следующие параметры для всех абзацев с помощью глобальнойтаблицы стилей (переопределив, тег <p> и псевдоклассы тега <p>):
- выравнивание абзаца
- отступ красной строки
- размер и цвет первой буквы
- оформление всех заголовков третьего уровня 2.Проверьте работоспособность изменений.
3.В комментариях (в файле main.css) поясните эти параметры.
Все проделанные изменения запишите в отчет (то есть опишите, каким образом выполняется то или иное задание).
Запишите что такое внутренние, глобальные и каскадные таблицы стилей. Контрольные вопросы:
1. Что такое классы и селекторы?
2. Какие типы таблиц стилей вы знаете?
3. Синтаксис записи CSS.
4. В чем заключаются достоинства каскадных таблиц стилей?
5. Запишите пример задания стиля для ссылок (активных, посещенных …) в документе всеми
способами.
Практическая работа № 9
«Разработка Java-скриптов и их внедрение с web-страницу»
Цель работы: знакомство с основными понятиями языка Java-Script, создание скриптов и их внедрение в web-страницу. Теоретические сведения:
Чтобы «оживить» веб-страницы используют специальные скрипты.
Язык JScript является интерпретируемым объектно-ориентированным скриптовым языком (scripting language). Хотя язык JScript обладает меньшими возможностями, чем полномасштабные объектно-ориентированные языки типа C++ и Java, он оказывается достаточно мощным и гибким для разработки скриптов.
JScript не является "урезанной" версией какого-либо другого языка, например, он только отдаленно и косвенно связан с языком Java, и не слишком упрощен, хотя, конечно, его возможности ограничены. Например, на нем нельзя разрабатывать автономные приложения и имеются слабые средства работы с файлами. Более того, JScript-скрипты можно выполнитьтолько при наличии интерпретатора в web-сервере или web-браузере.
Относительно языка JavaSript необходимо отчетливо представлять себе следующие основные моменты:
JavaScript представляет собой скриптовый язык (scripting language)
Скриптовый язык является упрощенным (lightweight) языком программирования
Программа (скрипт - script) на языке JavaScript состоит из строк исполняемого компьютерного кода
JavaScript-скрипты можно вставлять в HTML-страницы
Когда JavaScript-код вставляется в HTML-документ, браузер считывает документ и интерпретирует JavaScript-код. Этот код может выполняться немедленно или спустя некоторое время, реагируя на последующие события.
Скрипты в секции HEAD: Скрипты, которые должны выполняться при их вызове или привозникновении события, размещаются в секции HEAD. Это гарантирует загрузку скрипта доего использования. <html>
<head>
<script language="JavaScript">
некоторые операторы
</script>
</head>
Скрипты в секции BODY: Скрипты, подлежащие выполнению при загрузке страницы,помещаются в секцию BODY. Когда скрипт находится в секции BODY, он генерируетсодержание на странице.
<html>
<head>
</head>
<body>
<script language="JavaScript">
некоторые операторы
</script>
</body> пример (вставьте данный скрипт в свою страницу, объясните в отчете назначение оператора document.write):
<html>
<head>
</head>
<body>
<script language="JavaScript">
document.write("Hello World!")
</script>
</body> </html>
Скрипты в секциях HEAD и BODY: В документ можно поместить любое число скриптов, размещая их в секциях HEAD и BODY.
<html>
<head>
<script language="JavaScript">
некоторые операторы
</script>
</head>
<body>
<script language="JavaScript">
некоторые операторы
</script>
</body>