Web-разработка - Страница 3

Не удивляйтесь, речь пойдёт не о кулинарии и садоводстве, а о самом, что ни на есть, настоящем интернет-проекте.

JaBloCo™ или Java Blog Contenter™ –  первый проект, задуманный мной и воплощенный совместными усилиями с талантливым харьковским java-программистом – Александром Скоробогатовым (aka ScAlAn). Суть проекта в следующем: создание текстового редактора для написания постов в блог на Wordpress-е с мобильного телефона.

Как и обещал – тонкая доводка css под различные браузеры и курс “похудения” для кода.

Не знаю, кто как, а у меня весь процесс обучения идёт преимущественно на своих ошибках. Так, например выяснилась “особенность” Opera-ы корёжить <div>, оформление шапки с использованием CSS “display: block” или различие в отступах “margin” и “padding” у Opera и IE…

Страшненький скин, который мы с Вами сваяли в течение прошлых уроков нуждается в серьёзном охорашивании. И проще всего это сделать, используя файл style.css.

Все прошлые занятия я мучил Вас минимальным кодом страниц, которые нужны для отображения блога. Сегодня поговорим о том, как сделать оформление не только информативным, но и привлекательным…

Прежде всего, сложите написанные по прошлым урокам страницы в одну папку и добавьте туда же файл style.css, который пока оставьте пустым.

Модульную сетку на странице можно задавать с помощью тегов <table> и <div>.

Слышал я про то, что для поисковиков предпочтительнее слоевая структура, а не табличная, но на поверку это оказалась SEO-шная байка двухлетней давности. С тех пор алгоритм ранжирования несколько раз менялся и теперь поисковикам безразлично какой структуры Ваша страница.

Технология – не очень сложна:

1. Загружаем нашу тему на блог (WAMP-сервером для локального тестирования запаслись, я надеюсь?)
2. Активизируем ее из админпанели и проверяем на синтаксис отображение в браузере. (Страшненькая, правда?)
3. Сохраняем страницу из браузера на компьютер и открываем в HTML редакторе.
4. Если Вы не убирали комментарии, то легко можете определить принадлежность кода к различным модулям нашего скина.
5. Оформляем нашу страницу с помощью тегов табличной <table> или слоевой <div> версткии сохраняем ее. Шрифты и отступы пока не трогаем.
6. Используя возможность редактирования файлов темы в админпанели или из PHP Expert Editor-а вносим добавочный код в ранее созданные файлы и смотрим на то, что у нас получилось.
7. Нравится? (Да – шаг 8, нет – шаг 3).
8. Все промежуточные “скриншоты” в HTML-е отправляем в корзину и на этом на сегодня успокаиваемся.

У меня получилось вот так: abc_theme.zip

Ничего сложного, как видите. Надеюсь, и у Вас получится.

А осталось нам – совсем немного: searchform.php и dropdowncats.php

searchform.php представляет из себя следующий код:

<form method=»get» id=»searchform» action=»<?php echo $_SERVER[‘PHP_SELF’]; ?>»>
<h3>Искать в блоге:</h3>
<input type=»text» value=»<?php echo wp_specialchars($s, 1); ?>» name=»s» id=»s» />
<input type=»submit» id=»searchsubmit» value=»Найти» />
</form>

dropdowncats.php выглядит так:

<form action=»<?php echo $PHP_SELF ?>» method=»get»>
<h3>Выбрать рубрику:</h3>
<?php dropdown_cats(); ?>
<input type=»submit» name=»submit» value=»Открыть» />
</form>

Теперь можете собрать все файлы вместе и проверить их работу. На внешний вид пока не обращайте внимания. Будет красивее )