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. Его достоинство в том, что в нем достаточно про­сто изменять позиционирование отдельных блоков, изменяя только смеще­ние их позиции относительно границ экрана.