Стили,их определение и применение. Теги и атрибуты CSS.
В ранее подготовленных html-документах присутствуют как теги и атрибуты физического форматирования, действие которых распространяется на отдельные абзацы, так и стилевые, оказывающие свое действие на целые веб-страницы. Также применялись стили для отдельных блоков документа (которые состоят из одного и более абзацев).
В первом случае стиль, задаваемый для всей страницы, был прописан в заголовке документа, во втором – в отдельных блоках. Также использовался прием, при котором в заголовочной части html-документа определялись персональные стили, а затем применялись выборочно к конкретным блокам текста, благодаря использованию так называемых идентификаторов (указателей на определенный стиль).
На рис. 7.1. дан пример определения стилей в заголовочной части html- документа: body {… }– для всей веб-страницы, h4 {… }– для строк заголовков в документе, td, th {… }– для всех таблиц в документе.
Тег комментария здесь использован в соответствии с синтаксическими требованиями языка html. Отдельные стили могут не поддерживаться некоторыми браузерами, тогда они игнорируются в документе, в остальных случаях комментарий носит формальный характер.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>MedEq Поставки медтехники</title>
<style type="text/css">
<!--
body {
margin-right:50px;
margin-left:50px;
}
h4{
color: #000000;
}
td,th {
font-family: Calibri;
font-size:18px;
font-weight:bold;
color:#003399;
background-color:#ECE9D8;
}
-->
</style> </head>
Рис. 7.1. Пример определения стилей веб-страницы.
Назначение отдельных стилевых параметров указано в табл. 1.1. Фрагменты текста, где определены стили для отдельных блоков приведены на рис. 7.2. Шаблон такого определения имеет вид: div# Имя блока{параметры блока}.
div#blok1{position:relative; border:none;
margin-left:50px;margin-right:50px; height:240px;
background-color:#ECE9D8;}
div#blok2{border:none; position:relative;
margin-left:400px; border-height:75px;}
Рис. 7.2. Пример определения стилей для блоков.
Такое определение блоков документа характерно тем, что определяемые стили присваиваются блокам с заданными идентификаторами. На рис. 7.3. показано применение стилей к блокам.
<body>
<div id="blok1" valign="top">
<img src="logotip.png" align="left">
<div id="blok2">
<a href="./Navig/Kont1.html"><img src="./Navig/vibor1.png"> </a>
<a href="./Navig/Dost2.html"><img src="./Navig/vibor2.png"> </a>
<a href="./Navig/Opis3.html"><img src="./Navig/vibor3.png"> </a>
<a href="./Navig/Zakaz4.html"><img src="./Navig/vibor4.png"> </a>
<img src="znak.png" align="right" >
</div>
</body>
Рис. 7.3. Пример присвоения стилей блокам.
Для примера рис. 7.3. характерно, что блок 2 оказывается вложенным в блок 1. Таким образом, можно создавать любые комбинации из блоков.
В примере рис. 7.4. стиль переопределяется. То есть отменяется действие отдельных параметров стиля, заданного для всего документа в его заголовочной части, и на блок <p style…> … </p> теперь оказывают влияние параметры внутреннего стиля. Те параметры общего стиля, которые не переопределены в данном блоке, сохраняют свое действие внутри него.
<p style=" margin-left:450px; width:500px; font-size:24pt;
background-color:wheat; color:black; border:1px solid blue; text-align:center">
МЕДИЦИНСКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ </p >
Рис. 7.4. Пример переопределения стиля.
В общем случае для CSS работает основное правило: стили, заданные во внутренних ( в том числе и вложенных) блоках документа имеют приоритет по отношению к стилям, определенным во внешних по отношению к ним фрагментах. Это снимает конфликты стилей.
В примере рис. 7.5. блоки 1, 2, 3 определены с учетом их последующего размещения на экране. Размещение блоков задано в примере рис. 7.6. Благодаря внутреннему переопределению отдельных параметров стилей, легко изменять положение блоков на экране по отношению друг к другу.
div#blok1{ position:relative; border:none;
margin-left:50px; margin-right:50px;
height:240px; background-color:#ECE9D8; }
div#blok2{ border:none; position:relative;
margin-left:400px; border-height:75px; }
div#blok3{ border:none; position:relative;
margin-left:50px; margin-right:50px; height:820px; }
Рис. 7.5. Пример размещения блоков методом CSS.
На рис. 7.6. дан пример оформления блоков со встроенными рисунками, которые вызываются из файлов по ссылкам. Кроме того определен пустой блок 3.
<div id="blok1" valign="top">
<img src="D:/Praktika/logotip.png" align="left">
<div id="blok2">
<a href="D:/Praktika/BAZA/Kont1.html">
<img src="D:/Praktika/Menu/vibor1.png"></a>
<a href="D:/Praktika/BAZA/Dost2.html">
<img src="D:/Praktika/Menu/vibor2.png"></a>
<a href="D:/Praktika/BAZA/Opis3.html">
<img src="D:/Praktika/Menu/vibor3.png"></a>
<a href="D:/Praktika/BAZA/Zakaz4.html">
<img src="D:/Praktika/Menu/vibor4.png"></a>
<img src="D:/Praktika/znak.png" align="right" ></div>
<p style=" margin-left:450px; width:500px; font-size:24pt; background-color:wheat; color:black; border:1px solid blue; text-align:center">
МЕДИЦИНСКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ</p ></div><br>
<div id="blok3" valign="top"> </div>
Рис. 7.6. Пример оформления блоков с рисунками.
На рис. 7.7. определены блоки столбцов: каталога, кардиографов, энцефалографов, спирографов, реографов для последующего размещения в них информации о приборах, а на рис. 7.8. вызываются эти блоки. Их размещение на экране по горизонтали задается левой границей с учетом зазора между блоками, причем ширина блоков – одинаковая.
div#kat{ margin-left:20px;}
div#kar1{margin-left:280px;margin-top:-1305px;}
div#enc2{margin-left:540px;margin-top:-1305px;}
div#spi3{margin-left:800px;margin-top:-1305px;}
div#reo4{margin-left:1060px;margin-top:-1305px;}
Рис. 7.7. Пример формирования веб-страницы методом CSS.
Размещение по вертикали отсчитывается от верхнего края экрана и задается отрицательным числом. Все блоки вложены в блок 3.
<div id="blok3" valign="top">
<div id="kat"> КАТАЛОГ </div>
<div id="kar1">КАРДИОГРАФЫ</div>
<div id="enc2">ЭНЦЕФАЛОГРАФЫ</div>
<div id="spi3">СПИРОГРАФЫ</div>
<div id="reo4">РЕОГРАФЫ</div>
Рис. 7.8. Пример вложения блоков.
Довольно широко распространен прием использования внешних таблиц стилей. Их применение позволяет импортировать стили, заданные во внешнем файле (CSS – файл) со стилевыми шаблонами для всех веб-страниц. Это упрощает оформление всех страниц сайта и обеспечивает его единый стиль.
Однако существуют и недостатки такого подхода: если внешних стилей слишком много, то при загрузке сайта его отдельные страницы могут оказаться недогруженными. С другой стороны, при чрезмерном изобилии внутренних стилей сами веб-страницы будут долго загружаться. То есть в каждом отдельном случае нужно находить компромиссное решение. Для простых сайтов обычно нет необходимости во внешнем CSS – файле.
7.2. Практические задания по теме: задания 7-1…7-8.
Задание 7-1.
1). Скопировать содержимое файла index.html в папку Prakt7 и сохранить как bmt7.txt.
2). Изъять из текста в файле bmt7.txt таблицу с витриной приборов, размещенную после заголовка МЕДИЦИНСКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ а также стилевые параметры h4{…} и td,th {…} в заголовочной части документа. Сохранить документ как bmt7-1.html и просмотреть в браузере.
Задание 7-2.
1). В документе bmt7-1.html для тега body установить новые стилевые параметры:
body{margin:0px; background-color:pink; bgcolor="pink" font-size:18px; font-weight:bold; color:#003399}. Сохранить документ как bmt7-2.html и просмотреть в браузере.
2). Добавить в заголовочную часть документа определение двух новых стилей:
div#blok {position:relative;border:none; margin-left:50px; margin-right:50px;
height:240px; background-color:#ECE9D8}
div#blok2{border:none; margin-left:400px; border-height:75px}.
3). В документе bmt7-2.html для меню, а также для рисунков логотипа и эмблемы (logotip.png и znak.png) заменить физическое форматирование на стилевое. Сдвинуть меню к верхней границе экрана и внести небольшие изменения в оформление. С этой целью добавить в заголовочную часть документа определение двух новых стилей:
div#blok1{position:relative; border:none; margin-left:50px; margin-right:50px; height:240px; background-color:#ECE9D8}
div#blok2{border:none; margin-left:400px; border-height:75px}
и применить стиль blok1 ко всем указанным объектам, а стиль blok2 (дополнительный стиль) – только к меню и эмблеме:
<div id="blok1" valign="top">
<img src="D:/Praktika/logotip.png" align="left">
<div id="blok2">
<a href="D:/Praktika/BAZA/Kont1.html"> <img src="D:/Praktika/Menu/ vibor1.png"></a>
<a href="D:/Praktika/BAZA/Dost2.html"> <img src="D:/Praktika/Menu/ vibor2.png"></a>
<a href="D:/Praktika/BAZA/Opis3.html"> <img src="D:/Praktika/Menu/ vibor3.png"></a>
<a href="D:/Praktika/BAZA/Zakaz4.html"> <img src="D:/Praktika/Menu/ vibor4.png"></a>
<img src="D:/Praktika/znak.png" align="right" ></div></div>
Сохранить результат и просмотреть в браузере, убедившись в появлении бежевого фона в верхней части веб-страницы и отступов слева и справа от краев экрана для рисунков.
(Блок 2 входит в блок1, то есть является его внутренним блоком).
Задание 7-3.
1). Начать построение витрины таваров стилевым методом CSS. Для этого в документе bmt7-2.html перенести всю строку заголовка витрины МЕДИЦИНСКИЕ ПРИБОРЫ И ОБОРУДОВАНИЕ вместе со всеми ее стилевыми параметрами в блок1 в качестве второй строки. Сохранить документ как bmt7-3.html и просмотреть в браузере, убедившись в новом размещении упомянутого заголовка на экране.
Задание 7-4.
1). Продолжить построение витрины. В отличие от табличного метода витрину следует оформить не в виде 4-х строк таблицы, как при табличном методе, а в виде 5-ти блоков, размещенных на экране подобно столбцам. Крайний левый блок – каталог приборов, остальные блоки – группы приборов, представленные ранее в витрине, оформленной табличным методом. Каждая группа должна иметь заголовок. Размещение блоков рекомендуется выполнить как на рис. 7.9.
Сначала создать блок с именем block 3 с невидимой рамкой, который должен вмещать в себя остальные блоки, схематично представленные на рис.7.9. В документе bmt7-3.html определить его как:
div#blok3{border:none; pozition:absolute; margin-left:50px; margin-right:50px; height:1300px; background-color:#ECE9D8;}
Сохранить документ как как bmt7-4.html.
2). Вставить блок 3 в текст html-документа сразу после строки заголовка витрины. Сохранить результат и проверить в браузере размещение нового блока на экране.
| КАТАЛОГ |
| Кардиограф |
| Энцефалограф |
| Спирограф |
| Реограф |
Рис. 7.9. Схема компоновки объектов на главной веб-странице (витрина).
Задание 7-5.
1). Создать еще 5 блоков в соответствии с рис. 7.9, присвоив им имена: kat (каталог), kar1, enc2, spi3, reo4 одинаковой ширины и вложить их в блок3 с зазорами 20px между блоками. Рамки для блоков задать сплошные, зеленого цвета. Для всех блоков задать единые параметры:
div#kat,div#kar1,div#enc2,div#spi3,div{border:2px solid green; pozition:absolute; width:240px; height:1300px; background-color:#ECE9D8;}
Сохранить документ как bmt7-5.html.
2). Для заданного размещения блоков на экране задать дополнительно индивидуальные параметры и сохранить результат:
div#kat{ margin-left:20px;}
div#kar1{margin-left:280px;margin-top:-1305px;}
div#enc2{margin-left:540px;margin-top:-1305px;}
div#spi3{margin-left:800px;margin-top:-1305px;}
div#reo4{margin-left:1060px;margin-top:-1305px;}
3). Задать для блока 3, вмещающего в себя остальные блоки, отступ сверху margin-left: - 1305px. Сохранить результат.
4). В конце html-текста документа bmt7-5.html разместить вновь введенные блоки слева направо в соответствии в следущем порядке:
<div id="blok3" valign="top">
<div id="kat"> КАТАЛОГ</div>
<div id="kar1">КАРДИОГРАФЫ</div>
<div id="enc2">ЭНЦЕФАЛОГРАФЫ</div>
<div id="spi3">СПИРОГРАФЫ</div>
<div id="reo4">РЕОГРАФЫ</div> </div>
Сохранить документ как bmt7-5.html и просмотреть в браузере.
Задание 7-6.
1). Оформить заголовки в блоках , внеся в блоки стиль с параметрами, определяющими размер, цвет, фон, рамку и пр. по образцу:
<div id="kat"><p style="width:240px;height:30px;font-size:18pt; background-color:wheat; color:black;border:none;text-align:center"> КАТАЛОГ </p></div>
Сохранить документ как bmt7-6.html и просмотреть в браузере.
Задание 7-7.
1). Скопировать в конец документа bmt6-.html таблицу с витриной из файла index.html и сохранить документ как bmt7-7.html. Перенести строки таблицы в соответствующие блоки, заменяя теги строк <td> на теги абзаца (параграфа) <p> и применяя внутри этих тегов стилевые параметры по образцу:
<p align="center"> <a href="D:/Praktika/kar1.html"> <img src="D:/Praktika/Kard1.png" width="240" border="0" /></a></p> <h4 align="center">Электрокардиограф ЭК1Т-04</h4> ,
где скорректирован адрес ссылки и размер вставляемого рисунка и сохранить документ.
3). Удалить таблицу из документа, сохранить результат и просмотреть в браузере, проверив действие всех ссылок.
Рис. 7.10. Веб-страница документа bmt7-4.html (фрагмент).
Рис. 7.11. Веб-страница документа bmt7-5.html (фрагмент).
Рис. 7.12. Веб-страница документа bmt7-6.html (фрагмент).
Рис. 7.13. Веб-страница документа bmt7-7.html (фрагмент).
Рис. 7.14. Веб-страница документа bmt7-8.html (фрагмент).
Задание 7-8.
1). В документе bmt7-7.html установить высоту 120px для всех рисунков витрины в блоках rfr1, enc2, spi3, reo4 и сохранить документ как bmt7-7.html.
2). Уменьшить высоту вставляемых рисунков до 820px и смещение margin-top во вложенных блоках до - 825px. Сохранить документ и проверить в браузере.
Полученная веб-страница – представляет собой html-документ, оформленный методом CSS. Его достоинство в том, что в нем достаточно просто изменять позиционирование отдельных блоков, изменяя только смещение их позиции относительно границ экрана.
Обработка форм
Средства обработки форм. Подготовки файла обработки.
Как отмечалось ранее, в подразделе 6.1, формы нужны для ввода данных клиентом, пользователем сайта, и последующего их использования сайтодержателем по назначению. Обработка формы осуществляется на сервере, на котором загружен и зарегистрирован сайт, в результате выполнения серверной программы. Обычно серверные программы пишут на языке программирования php. Язык php требует серьезного изучения, однако для написания простых программ, где не требуется сложная обработка, достаточно знать небольшое количество команд и функций этого языка.
В простых случаях отдельные функции обработки можно ввести в обычный html-документ с php-вставками. Их использование удобно проследить на примере файла otvet_z.html. Часть его html-текста c php-вставкой представлена ниже, на рис. 8.1.
<body>
<?php
echo "Уважаемый "; echo $Fio; echo "!"; print "<br>";
echo "Ваш заказ принят"; print "<br>";
echo "Ваш телефон "; echo $Tel; print "<br>";
echo "Ваш адрес "; echo $Adr; print "<br>";
echo "Ваша электронная почта "; echo $Epo; print "<br>";
echo "Ваш вид доставки "; echo $Dost; print "<br>";
echo "Ваши дополнения: "; echo $Pri;
?>
<h2>Благодарим за удачный выбор.</h2> </body>
Рис. 8.1. Пример html-документа с php-вставкой.
Из приведенного примера видно, что для вставки php-программы в текст html- документа используются теги <?php … ?>. Далее, в тексте программы используются переменные $Fio, $Tel, $Adr, $Epo, $Dost, $Pri. Эти же имена переменных используются в документе blank_z.html (бланке заказа) для ввода клиентом соответствующих данных на сайте в браузере.
В результате обработки сервером php-кода рис. 8.1 данные передаются в файл otvet_z.html из формы документа blank_z.html вместе с переменными и отображаются в браузере, благодаря выполнению команды echo. Аналогично действует и команда print. Существует множество других php-команд , предназначенных для выполнения различных действий с переменными. В целом, команды и функции, выполняемые php- программами, во многом заимствованы из языка программирования C++.
8.2. Практическое задание по теме.
Рис. 8.2. Результат исполнения файла otvet_z.html (без серверной обработки)
Задание 8-1.
1). Открыть в блокноте документ blank_z.html , обратить внимание на переменные и их содержимое, предназначенное для отправки на сервер.
2). Открыть в блокноте файл otvet_z. php и обратить внимание на синтаксис записи команд и переменных в php-коде.
3) Запустить тот же файл, но с расширением .html. Сравнить содержимое файлов otvet_z. php и otvet_z.html. Обратить внимание на то, что содержимое обоих файлов одинаковое и на то, что в html-файле php-вставка не работает, хотя отображаются результаты интерпретации html-текста. Результат исполнения файла otvet_z.html показан на рис.8.2.
Так как после заполнения формы (в файле blank_z.html) в данном случае не используются серверные средства для обработки php –команд, то на экран выводится исходный текст php-программы. При серверной обработке переменные $Tel, $Adr, $Dost, $Epo, $Pri заменяются данными, которые вводились в форму клиентом (заказчиком). В данном случае клиент получит сообщение, в котором указываются его идентификационные данные и подтвержается, что заказ принят.
Для исполнения файла otvet_z. php (равно как и php-вставки в html-файле) необходимо иметь доступ к серверу, а сайт должен быть загружен на этом сервере. Для этого сайт должен быть на нем зарегистрирован.
Более подробно эти вопросы будут рассмотрены в разделе 10.