Рисуем сайт, четыре.

Рисуем сайт, четыре.

Дизайн, меню, контент, всё скопом и по порядку. Напоминаю, что всё прежде и ниже сказанное, основано на материалах nanoCMS и я исхожу из тог, что вы ознакомились с описанием сайта.

Про контейнер div id="gordi", говорили в «Рисуем сайт, три», далее идёт контейнер div id="main".

В этом контейнере находится наша писанина и менюшки. Контейнер div class="header" пуст, но он есть, и это необходимость. Не вдаваясь в подробности, можно сказать, что контейнер div class="header" резервирует место под вывод шапки(header) сайта.

Контейнер div id="content" определяет, в основном, позицию и обтекание соседних элементов нашего контента. В контейнер встроена переменная $content, которая и выводит информацию в тело сайта.

Подробнее: делаем копию файла index. php, который находится в data\content\, переименуем его в ddd. php, открываем в редакторе новосотворённый файл, берём любой понравившийся текст, копируем и вставляем его вместо того, что было между EOF. Набираем в броузере http://test1.ru/ddd. htm и наблюдаем страницу.

Дальнейшая, боевая раскраска страницы, это дело полёта вашей фантазии и базы знаний.

Так же хочу отметить переменную $add, которая выводит из одноимённого контейнера, а контейнер в файле _add. php, содержимое. Ежели вставить в текст страницы $add, мы получим соответственно вывод, в данном случае, контейнера под рекламный блок 160х600.

Таким образом из файла _add. php можно выводить всё что угодно и куда угодно. Сделаем так, вставьте данный код в _add. php не нарушая того, что там уже есть:

$beatles=<<<EOF

<div class="thebeatles">

<img src=../i/thebeatles. jpg alt=thebeatles >

</div>

EOF; thebeatles и сохраните эту картинку в папке i.

Теперь поставив переменную $beatles, в нужное место, у нас будет выводится картинка. Как она будет выводится, расскажите броузеру сами с помощью class="thebeatles".

Далее идут меню, в контейнерах div class="left" и class="right", соответственно. Меню выводится переменными $leftmenu и $rightmenu, так же соответственно. Никаких причуд и хитростей здесь нет, всё расположено в файле _menu. php. А вот со стилями разбирайтесь сами, благо текста по этому поводу написано много.

Следует отметить, что меню можно расположить в _add. php, насочинять переменных и прописать всё с помощью ul и li, с заданием соответствующих стилей. Что в свою очереди сделает меню более гибким.

Контейнеры div class="wrap" и div class="clear" помогают правильно расположить рядом стоящие и внутрь завёрнутые контейнеры.

Дале у нас идёт div id="footer", который всегда наблюдается в низу. Ничего интересного, кроме умело написанных стилей, в фотере нет. Ну, а переменная $title_default, выводит ссылку с анкором, это то, что вы прописали в settings. php.

Опустившись ещё ниже, найдём шапку сайта. Она не упала, её положили именно сюда. Хитросплетение нейронов в голове Мастера Гордии породило такой вариант. Это сделано, что бы не мешать роботам индексировать нашу писаниу.

В headerе присутствуют переменные; $title_default, $title и $topmenu. $title это вывод названия страницы, которое прописывается в каждой странице, при её изготовлении. $topmenu это горизонтальное меню в верху страницы, которое находится в файле _menu. php.

Так уж сложилось, что человеку привычно с начало делать ошибки, а подом с успехом их исправлять. Дивная вёрстка не терпит ошибок, лишний div, или не хватка оного, приводят к непредсказуемым и не ожидаемым результатам. Имейте в своём распоряжении все популярные броузеры, ИЕ, Мозила, Опера, Сафари. Проверяйте на всех броузерах внешний вид, а уж потом можно и пивка попить.

Иначе переписка может быть следующей:

— … морда твоего блога разлезлась ….

— Какой браузер юзаем? У меня всё ок во всяком случае.

— отослал скрин

— Просто пользуюсь Оперой. Никаких проблем и не видел. Нужно будет и на Мозилку проверять.

Обратите своё внимание на надписи в первой, /* Выше этой строки в файле ничего не должно быть */ и последней, /* Ниже этой строки в файле ничего не должно быть. */ строке файлов. Это не простые надписи, это то чего ни в коем случае делать не следует. Не верите? Поставьте пробел после?> и попробуйте


Карта сайта


Информационный сайт Webavtocat.ru