КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Верстка разработанного макета
Как писал выше – каркас сайта имеет табличную структуру, и сделан одной таблицей которая состоит из двух строк и трех столбцов. Визуально структуру можно разделить на 3 части:
1) самый верхний – шапка сайта;
2) левый – меню;
3) средний – контейнер содержащий контент.
Начнем с таблицы. В <body> код разметки следующий:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> <!-- Название школы -->
</td>
<td >
</td>
</tr>
<tr>
<td> <!-- Меню -->
</td>
<td colspan="2" > <!-- Контент -->
</td>
</tr>
</table>
Как видно из примера, таблица занимает всю ширину окна браузера, не имеет границ и не имеет отступов между ячейками и от границы до текста.
В первой строке три ячейки: первая пустая, она, как и меню фиксированной ширены; вторая то же фиксированной ширены и высоты – это сделано для того, что бы фоновое изображение отображалось полностью и не повторялось, на ней находится название школы – «МОУ Мировская сош», а под ней прозрачное изображение которое не позволяет ячейке сжиматься сильнее определенного размера; последняя ячейка пустая, ее ширина динамически меняется в зависимости от размера окна.
Во второй строке таблицы две ячейки: первая фиксированная содержит меню с прозрачным изображением, а вторая не фиксированная – она изменяет свою ширину под окно браузера, в ней содержится контент, к тому же имеет атрибут colspan="2", поэтому нет третьей ячейки.
Использование слияния ячейки с контентом позволило сайту подстраиваться под разные размеры окна браузера. К тому же если размер будет уже определенной ширены, которая нам нужна, то появится полоса прокрутки. Сузиться нам не дадут два прозрачных изображения высотой в 1px которые находятся в первом и во втором столбце, минимальная сужаемая ширена будет равна суме длин этих полосок.
Код первой строки выглядит так:
<tr height="121">
<td width="200" bgcolor="#FF963A" height="121" >
</td>
<td bgcolor="#FF6600" background="images/3.jpg" width="778">
<p align="center">
<font face="Monotype Corsiva" size="+6" color="#856b00">
<strong>МОУ Мировская сош</strong>
</font>
</p>
<img src="images/line-h.png">
</td>
<td bgcolor="#FD9D37"> </td>
</tr>
Цвет фона одинаков для всей строки bgcolor="#FF963A" – оранжевый, текст с названием имеет оливковый цвет color="#856b00", размер +6, и шрифт ="Monotype Corsiva".
Прозрачное изображение <img src="images/line-h.png"> находится в попке с изображениями, длина его соответствует ширине фонового изображения background="images/3.jpg".
Меню содержит 5 пунктов:
<td bgcolor="#FFFF66" valign="top"><p align="center"> <font face="Monotype Corsiva" size="+3" color="#856b00"><strong>Меню</strong> </font></p>
<p style="margin-left:20px"> <a href="index.html">Главная</a> <br>
<a href="photo.html">Фотогалерея</a> <br>
<a href="tvor-rab.html">Творческие работы</a> <br>
<a href="museum.html">Экологический музей</a> <br>
<a href="history.html">История</a> <br>
<a href="kontakt.html">Контакты</a> </p>
<img src="images/line-m.png">
</td>
Фоновый цвет его такой же как и у контента bgcolor="#FFFF66" – бледно желтый, на нем в полнее комфортно читать текст. Вертикальное выравнивание valign="top" к верху. Слово «Меню» имеет те же параметры форматирования что и надпись в шапке сайта. Сами пункты меню имеют отступ слева style="margin-left:20px", и имеют стандартное форматирование ссылок. Разделяет их тег <br>.
Основной контент:
<td colspan="2" bgcolor="#FFFF66" valign="top" >
<p>
<em>
<img src="images/f2.jpg" alt="1" width="310" height="213" hspace="20" align="right">
<!-- Абзац текста контента --></p>
<p><!-- Абзац текста контента --></p>
</td>
Эта ячейка имеет в себе изображение и два параграфа.
|
|
Дата добавления: 2015-03-31; Просмотров: 367; Нарушение авторских прав?; Мы поможем в написании вашей работы!