Модульная разметка страниц интернет
advertisement
Лабораторная работа «Модульная разметка страниц интернетприложения». Цель работы: изучить процесс модульного
формирования страниц интернет-приложения
— интуитивная и наглядная структура, элементы располагаются друг
за другом в естественной последовательности, что облегчает
формирование нужной структуры.
Страницы интернет–приложений обычно строятся по модульному
принципу. Рассмотрим следующий вариант модульной разметки: начало
страницы (логотип, описание), центр (панель навигации, область
контента) и завершение страницы (сервисная навигация, контакты).
1) Продумаем систему каталогов (предлагаемый вариант
организации системы каталогов, представлен на рис. 1):
Недостатки табличной верстки:
— необходимость дополнительной разметки для определения таблиц,
(table) колонок (td) и строк (tr);
— табличная верстка подходит не для описания интернет-приложений
со сложной структурой;
— сложный дизайн с перекрытием элементов не реализуем.
Таблица с невидимой границей образует модульную сетку, в блоках
которой размещаются элементы интернет-страницы. Для табличной
верстки применяется минимальный набор табличных элементов:
— table – используется для создания таблицы;
— tr – используется для создания строк;
— td – используется для создания ячеек таблицы.
Рисунок 1 — Список основных файлов
— img – каталог для хранения графических ресурсов;
— pages – каталог для хранения основного контента;
— templates – в данном каталоге сосредоточены основные модульные
файлы: навигационная и дополнительная панели, начало и
завершение страницы;
— css – каталог для хранения каскадных таблиц стилей.
2) Начнем процесс разметки страниц. Разметка производится в
соответствии с языком разметки HTML (Hypertext Markup Language),
при котором основная роль отдается элементу TABLE (табличная
верстка).
Преимущества табличной верстки:
— простота и быстрота верстки;
— поддержка и корректное отображение абсолютно всеми
браузерами;
— таблицы не перекрывают друг друга;
3) Выделим основные блоки и определим расположение элементов
на странице. Рассмотрим следующий вариант: начало страницы
(логотип, описание); слева располагается панель навигации; в центре –
основной контентный блок страницы; справа – блок для
дополнительный информации и действий (регистрации, авторизации);
внизу – завершение страницы (рис. 2).
Рисунок 2 — Пример расположения основных модулей на странице
4) Определим структуру основной таблицы, которая будет состоять
из трех строк и трех столбцов (рис. 3):
— первая строка состоит из двух столбцов (1 и 2);
— вторая строка состоит из трех столбцов (3, 4 и 5);
— третья строка состоит из одного столбца (6).
<img src="/denwer/lr/img/ugatu.gif">
</td>
</tr>
<tr>
<td class=" internal_table_menu ">
<img src="/denwer/lr/img/dot_ttl.gif">
<a href= /denwer/lr/pages/html.php class="link">HTML </a><br/><br/>
<img src="/denwer/lr/img/dot_ttl.gif">
<a href= /denwer/lr/pages/css.php class="link">CSS</a><br/><br/>
<img src="/denwer/lr/img/dot_ttl.gif">
<a href= /denwer/lr/pages/php.php class="link">PHP</a><br/><br/>
<img src="/denwer/lr/img/dot_ttl.gif">
<a href= /denwer/lr/pages/java.php class="link">JAVA</a><br/><br/>
<img src="/denwer/lr/img/dot_ttl.gif">
<a href= /denwer/lr/pages/flash.php class="link">Adobe Flash</a><br/><br/>
Рисунок 3 — Структура таблицы
5) Учитывая вышеизложенное, в каталоге templates создадим
следующие файлы:
— top.php. В данном файле при помощи HTML-таблиц
формируются: логотип,
название страницы, и вертикальная
навигационная панель:
<html>
<head>
<title><?php echo $pagename; ?></title>
<link href="/denwer/lr/css/site.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class=internal_table>
<tr>
<td colspan="0" class="basic_table_logo">
<img src="/denwer/lr/img/ugatu_logo.gif">
</td>
<td colspan="2" class="basic_table_logo">
<td class=internal_table_text>
—
additional.php.
В
данном
файле
формируется
дополнительная панель для регистрации или авторизации
пользователей.
<td class=additional_table>
Логин: <input maxlength="10" size="10" value=""><p/>
Пароль: <input maxlength="10" size="10" value=""><p/>
<input type="button" style="font-weight:bold;" value="Вход">
<input type="button" style="font-weight:bold;" value="Регистрация">
</td>
</tr>
—
bottom.php. Данный файл формирует завершение
страницы.
<tr>
<td colspan="3" class="bottom_table"> «Модульная разметка страниц
интернет-приложения"
</td></tr></table></body></html>
— title.php. В данном файле осуществляется формирование
заголовка.
<?php
function title($title) {
echo '<table class="title_table">
<tr>
<td> <b> '.htmlspecialchars($title).'</b>
</td>
</tr>
</table>'; }
?>
6) Расположение основных элементов размечено. В корневом
каталоге создадим начальную (индексную) гипертекстовую страницу –
index.php и используя конструкции включений require_once()
объединим PHP-сценарии:
<?php
require_once("templates/title.php");
require_once ("templates/top.php");
?>
<?php
require_once ("templates/additional.php");
require_once ("templates/bottom.php");
?>
7) Далее
продумаем содержание каждого раздела панели
навигации:
— html.php – HTML (HyperText Markup Language;
— php.php – PHP (Hypertext Preprocessor;
— css.php – CSS (Cascading Style Sheets);
— java.php – JAVA;
— flash.php – Adobe Flash.
Создадим файлы, отображающие содержание разделов сайта, а
затем разместим их в каталоге page (рис.2). Рассмотрим пример
страницы для пункта меню HTML (HyperText Markup Language).
<?php
require_once("Z:/denwer/www/denwer/lr/templates/title.php");
$pagename = "Общее представление";
require_once ("Z:/denwer/www/denwer/lr/templates/top.php");
echo title($pagename);
?>
<h1 class=title>Язык разметки гипертекста</h1>
<p class=text>Язык HTML был разработан британским учёным Тимом
Бернерсом-Ли в 1991—1992 годах. HTML создавался как язык для
обмена научной….<p>
<?php
require_once ("Z:/denwer/www/denwer/lr/templates/additional.php");
require_once ("Z:/denwer/www/denwer/lr/templates/bottom.php");
?>
8) Для описания единого стиля интернет-страниц воспользуемся
технологией CSS. Для удобства вынесем CSS в отдельный файл (в
каталоге css) и пропишем в нем стили для элементов и классов.
.title {
text-align: center;
font-style: italic;
font-size: 15pt;
padding:15px;
}
.title_table {
width:100%;
border:5;
background:#ebeaf4;
height:20px;
text-align: center;
}
.text {
text-align: justify;
text-indent: 40px;
}
.basic_table_logo {
height:20%;
}
.internal_table {
height:100%;
width:100%;
margin-bottom:0px;
}
.internal_table_menu {
text-align: left;
vertical-align: top;
padding-top: 30px;
width:15%;
}
.link {
color: black;
font-size: 15pt;
font-weight:bold;
padding-bottom: 100px;
}
.internal_table_text {
vertical-align:top;
}
.additional_table{
text-align: right;
vertical-align: top;
padding-top: 40px;
width:20%;
font-weight:bold;
}
.bottom_table {
height:30px;
border-top: 1px solid black;
text-align: right;
}