Как разбить страницу на части? [Версия для КПК]

Показать полную графическую версию : Как разбить страницу на части?

alturgrey

02-08-2010, 08:51

Уважаемые, помогите разбить страничку на подгружаемые блоки (или на фреймы).
У меня есть страница шаблон. Нужно попилить ее на четрые блока:
1. Шапка
2. Боковое меню-реклама справа
3. Нижнее поле (банеры-реклама)
4. Собственно центральная часть, где будет меняться ОСНОВОЕ содержимое страницы.

Я не знаю, насколько актуальны нынче фреймы, но нужно нечто подобное. Слышал про Ajax, да не все скрипты на подгружаемых страницах будут работать ..
На будущем сайте - страниц 200. Они все должны иметь Постоянную шапку, нижнее поле (типа шапки), и боковое поле с меню.
А центральная часть будет содержать Саму инфу, ради которой эти 200 страниц и живут.
Есть вариант, что бы Шапка, низ, и боковина, подгружались к каждой из листаемых страниц. Т.е сделав 201, или 208 новые страницы сайта, я впишу в заголовке "вызов шапки, и пр." ....
короче говоря, вот вам пример: http://www.mfpa.ru/r/entrants/ ...
- сбоку листаешь меню, страницы меняются, верх , низ и бок - остаются ... или наоборот, у них центральная-текстово-информативная чать страницы, грузится из папки какой-то, не содержа при этом "вызова" чего либо, а ограничиваясь десятком вот таких строк:
<p class=mok2><center><b>Бакалавриат</b>

От чего отталкиваться ?
вот код моей страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<title>News Magazine</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.timers.1.2.js"></script>
<script type="text/javascript" src="scripts/jquery.galleryview.2.1.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.galleryview.setup.js"></script>
</head>
<body id="top">


<div class="wrapper col0">
<div id="topline">

</div>
</div>

<div class="wrapper">
<div id="header">
<div class="fl_left">
<h1><a href="#"><strong>N</strong>ews <strong>M</strong>agazine</a></h1>
<p>111</p>
</div>
<br class="clear" />
</div>
</div>

<div class="wrapper col2">
<div id="topbar">
<div id="topnav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="style-demo.html">Style Demo</a></li>
<li><a href="full-width.html">Full Width</a></li>
<li><a href="#">DropDown</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li class="last"><a href="#">A Long Link Text</a></li>
</ul>
</div>

<br class="clear" />
</div>
</div>

<div class="wrapper">
<div class="container">


<div class="content">
<div class="footbox">
<h2>Lacus interdum</h2>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Suspendisse in neque</a></li>
<li><a href="#">Praesent et eros</a></li>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Suspendisse in neque</a></li>
<li class="last"><a href="#">Praesent et eros</a></li>
</ul>
</div>
</div>

<div class="column">
<ul class="latestnews">
<li><img src="images/demo/100x100.gif" alt="" />
<p><strong><a href="#">1</a></strong> Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna.</p>
</li>
<li><img src="images/demo/100x100.gif" alt="" />
<p><strong><a href="#">2</a></strong> Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna</p>
</li>
<li class="last"><img src="images/demo/100x100.gif" alt="" />
<p><strong><a href="#">3</a></strong> Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna</p>
</li>
</ul>
</div>
<br class="clear" />
</div>
</div>

<div class="wrapper"></div>


<div class="wrapper col8">
<div id="copyright">
<p class="fl_left">Copyright © 2010 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">4564564</p>
<br class="clear" />
</div>
</div>
</body>
</html>

css приводить не стал, думаю нет нужды ?
мне ЭТО, надо "попилить" на части, где часть:  - то, что будет меняться на каждой странице, а остальные части - оставаться неизменными_)_

Суть задачи в том, что меняя шапку, меняя боковое меню, внося корективы, не пришлось вносить их в код КАЖДОЙ из 200 страниц ...
А центральный контент, уж не знаю, в div занести, или еще как ... ЭТИ самые 200 страниц у меня уже есть, только там простой контент. их подгружать и нужно.
Фреймами это сделать, или подгружая как-то ... подскажите ?

Delirium

03-08-2010, 01:26

alturgrey, если брать ASP.NET, то там есть master-страницы. Т.е. на мастер-странице содержится неизменный код, а посередине(ну или где задашь) - изменяемый контент. в PHP, думаю, есть нечто подобное.

alturgrey

03-08-2010, 03:05

В том и вопрос, как лучше это реализовать ?

На каждой из 200 страниц в начале кода сделать вызов трех Основных блоков (шапку и прочие),
или наоборот, сделать страницу с каркасом из Этих блоков, с вызовом множества страниц контента в "рабочую" область страницы ....

Delirium

03-08-2010, 03:32

Повторю еще раз. Делаем мастер страницу, на которой будет блок "рабочей" области. Почитайте про технологии шаблонов и мастер-страниц и все станет понятно.

Sham

03-08-2010, 03:47

если речь о шаблонах (http://ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD), то страница собирается по частям (хедер+контент+футер). Компоновать лучше как удобно, но чем меньше частей, тем меньше обращений в базу/файлы. Реализация зависит от языка.

не видел предыдущий пост

alturgrey

03-08-2010, 07:28

Именно шаблоны. Язык ? ... да все просто - как видно из написанного выше кода -php/

Sham

03-08-2010, 15:11

Подберите шаблонизатор (smarty и т.д.) и рисуйте шаблоны, или используйте include (http://docs.php.net/manual/en/function.include.php)'ы для подключения файлов в скрипт.

alturgrey

04-08-2010, 03:52

Разбил.Теперь второй важный вопрос:
Как реализовать динамическую подгрузку контента (кучи файлов, с разномастным содержимым, текстами там, рисунками, прочим) в центральную, основную часть страницы, щелкая в Хедере по меню ?
Меню простое, прописали скрипт, в выпадающих позициях ссылки типа <a href =
Но как не меняя кода между :
<?
include("header.php");
?>
LINK на контент
<?
include("footer.php");
?>
, нажатиями в меню менять =LINK на контент= ?

Sham

04-08-2010, 14:00

в ссылке (через GET) шлите параметры, исходя из которых делайте инклуд нужного контента. rtm (http://docs.php.net/manual/ru/language.variables.external.php).

alturgrey

06-08-2010, 02:29

вот блок "подгружаемой секции:
<td>
<?
$page = $_GET['page']; //сомнение вызывает эта строка .. СЮДА ли ее нужно поставить ?

if(!$page) { include("eip.php"); }
else if ($page=="cdo") { include("cdo.php"); }
else if ($page=="eip") { include("eip.php"); }
else if ($page=="fik") { include("fik.php"); }
?>
</td>

Вот кусок из меню:
<li><a href="#nogo2a">Абитуриенту</a></li>
<li><a href="index.php?page=cdo">ЦДО</a></li>
<li><a href="index.php?page=eip">ЭИП</a></li>
<li><a href="index.php?page=fik">ФИК</a></li>
<li><a href="#nogo2e">Магистратура</a></li>

Позиции меню как и следовало ожидать, рисуются,
при скролинге мышкой менюшки в статус баре текст:
http://www.xxx.ru/new2/index.php?page=cdo

Но при нажатии, ВСЯ страница полностью (вместе с хедерами и футерами = хотя казалось бы, их существование никто не отменял, должны же хоть они были на странице остаться) белый скрин,
Ошибка:
невозможно найти страницу.
Возможно эт стр была удалена, переименована или врем.недоступна
бла бла
HTTP 404 файл не найден
IE

Sham

06-08-2010, 16:53

если index.php лежит в корне, то и относительные ссылки дб корневыми (/index.php).
$page = $_GET['page']; //сомнение вызывает эта строка .. СЮДА ли ее нужно поставить ?
if(!$page) { include("eip.php"); }
else if ($page=="cdo") { include("cdo.php"); }
else if ($page=="eip") { include("eip.php"); }
else if ($page=="fik") { include("fik.php"); } »

хотя бы наличие файла проверяйте, и (upd) очищайте от ненужных символов...

$page = (!empty($_GET['page']))? preg_replace('{[^a-z0-9\_\-]+}i', '', $_GET['page']) : '404';

if (is_readable($page . '.php'))
include($page . '.php');
else
include('404.php');

alturgrey

09-08-2010, 04:01

Поправил по вашему совету, работает. Спасибо большое.
Правда вопрос возник, а ели файлы контента в подпапке лежат, код сильно изменится ?

И САМОЕ ВАЖНОЕ .. - такая проблема: Я бился что бы под старым IE6 работал будущий сайт (обязательное условие заказчика), так как Родительская неразбитая страница макет пахала у меня под Google Chrome и Оперой.
Сейчас, под IE6 все кажет (кроме п.2 моего поста(, но под Google Chrome - Пшик - на экране только пустые ячейки таблицы (той, к которой лежат Includ-ы). Только четыре сморщенные ячейки,и все.
Мне так кажется что не понимает браузер includ.
Может суть в том, что в запускаемом index.php файле только таблица, и все. Он голый, без всех этих служебных строк в шапке файла (боди, хеды, и прочее прочее ) ???

Изначально сторонние броузеры (не официально практикуемый IE), открывали страницу неразбитую еще ... что может быть не так СЕЙЧАС ?

alturgrey

09-08-2010, 08:15

УВЫ, проблема очевидна.
Скачал Мозиллу, Оперу, Гуг новые ...
проверяю мои php файлы. Искомый index.php, где includ-ы вписаны, они (броузеры) эти - игнорят. Кроме IE.
табличку выдают пустую. и все.

Открываю старый index.xml,( который я разбивал на три .php) , - показывает все что надо.
Открываю разбитые header.php footer.php , все рулит.

Но, приписываю в тело header.php или footer.php, которые только что открывались, строку: include("cdo.php"); ..выдранную или целиком всю функцию ..

На экране только тот код, что был ранее ...

Скажите, что может быть ? Может так оказаться, что под броузеры НЕ IE, надо модифицировать код php ? или заголовок какой особенный писать ?

Вы сами можете проверить, если у кого есть та же Опера ..:
все что между строк <?php и ?> - не работает ... :(

Sham

09-08-2010, 16:29

Все браузеры соблюдают http, поэтому особенных заголовков не нужно. Кроссбраузерность - это обычно HTML + CSS (мб разная интерпретация кода).