- •В.Л. Гренков интернет технологии. Методика и практика создания web-страниц и web-сайтов
- •Москва 2014
- •. Документы html и основные теги.
- •1.2. Практические задания по теме: задания 1…10.
- •2. Освоение правил и приемов вставки рисунков рисунков и видеороликов в веб-документы
- •2.1. Атрибуты оформления текста и графики в html-документах
- •2.2. Практические задания по теме: задания 2-1…2-9
- •3. Практические приемы создания списков в веб-страницах
- •3.1. Виды списков, теги и атрибуты их оформления
- •3.2. Практические задания по теме: задания 3-1…3-11
- •4. Практические приемы создания таблиц в веб-страницах
- •4.1. Применение и оформление таблиц в html-документах.
- •4.2. Практические задания по теме: задания 1…9.
- •5. Создание гиперссылок и связывание веб-страниц
- •5.1. Оформление внешних и внутренних гиперссылок.
- •5.2. Практические задания по теме: задания 5-1…5-11.
- •6. Практические приемы создания форм в веб-страницах
- •6.1. Назначение и структура форм. Теги и атрибуты формы.
- •6.2. Практические задания по теме: задания 6-1…6-5
- •7. Применение таблиц каскадных стилей css
- •7.1. Стили,их определение и применение. Теги и атрибуты css.
- •7.2. Практические задания по теме: задания 7-1…7-8.
- •8. Обработка форм
- •8.1. Средства обработки форм. Подготовки файла обработки.
- •8.2. Практическое задание по теме.
- •Тема 9. Практика создания сайта
- •9.2. Практические задания по теме: задания 9-1…9-4.
- •Тема 10. Публикация сайта. Требования к сайту и его поддержка.
- •10.1. Особенности регистрации и поддержки сайта.
- •10.2. Практическое задание по теме.
7. Применение таблиц каскадных стилей css
7.1. Стили,их определение и применение. Теги и атрибуты 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 – файле.