Многоколоночная верстка макета страницы
Наибольшее распространение получили трехколоночные макеты. Ширина макета может быть задана в % от доступной ширины (экрана), в пикселях (px) и в стиле - «занимать все доступное пространство», обозначаемом значком бесконечности - ∞.
Рассмотрим построение трехколоночного макета правая и левая колонка которого фиксированной ширины, а центр является «резиновым» т.е. - ∞.
Вид макета и стили:
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Макет 3 колонки</title>
<style type="text/css">
.header, .footer { background: #a7a7a7; }
.layout { overflow: hidden; min-width:600px; }
.leftCol { background: #ff0000; float: left; width: 180px; }
.centerCol { background: #00ff00; margin: 0 180px 0 180px; }
.rightCol { background: #0000ff; width: 180px; float: right; }
</style>
</head>
<body>
<div class="header">Шапка сайта</div>
<div class="layout">
<div class="leftCol">Колонка 1</div>
<div class="rightCol">Колонка 3</div>
<div class="centerCol">Колонка 2</div>
</div>
<div class="footer">Подвал</div>
</body>
</html>
Результат:
Задание на лабораторную работу
Установить и настроить рабочее место разработчика
Сделать трехколоночный макет по варианту
|
1 |
|
|
2 |
|
|
3 |
|
|
4 |
|
|
5 |
|
|
6 |
|
Контрольные вопросы:
Что такое web-сервер?
Что такое сессия?
Что такое индексный файл?
Какая кодировка предпочтительна? Почему?
Как настроить отладчик PHP?
Как уменьшить размер памяти, потребляемой web-сервером?
Как уменьшить размер памяти, потребляемой интерпретатором PHP?
К каким тегам HTML применимо оформление средствами CSS?
Какова последовательность применения стилей CSS?
Как отладить программу на PHP с помощью NetBeans?
Приложение 1
Список литературы и ссылок
Работа с PHP в NetBeans
https://netbeans.org/kb/74/php/editorguide_ru.html
Инструменты просмотра отчетов xdebug:
http://www.simplecoding.org/webgrind-udobnyj-interfejs-dlya-analiza-bystrodejstviya-php-skriptov.html