Стили,их определение и применение. Теги и атрибуты 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). Удалить таблицу из документа, сохранить результат и просмо­­треть в браузере, проверив действие всех ссылок.

Стили,их определение и применение. Теги и атрибуты CSS. - student2.ru

Рис. 7.10. Веб-страница документа bmt7-4.html (фрагмент).

Стили,их определение и применение. Теги и атрибуты CSS. - student2.ru

Рис. 7.11. Веб-страница документа bmt7-5.html (фрагмент).

Стили,их определение и применение. Теги и атрибуты CSS. - student2.ru

Рис. 7.12. Веб-страница документа bmt7-6.html (фрагмент).

Стили,их определение и применение. Теги и атрибуты CSS. - student2.ru

Рис. 7.13. Веб-страница документа bmt7-7.html (фрагмент).

Стили,их определение и применение. Теги и атрибуты CSS. - student2.ru

Рис. 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. Практическое задание по теме.

Стили,их определение и применение. Теги и атрибуты CSS. - student2.ru

Рис. 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.

Наши рекомендации