Верстка нашего блога

 

Как я и обещал, начнем мы с верстки...В этой области я не очень силен, и парой допускаю очень грубые ошибки. Не исправляю их я, потому что все, что пишу, все прекрасно работает, не смотря на, так называемую, валидность кода. Ну что ж? С дизайном, я думаю, мучиться не стоит, напишем простенькую страницу, где текст будет находится по середине, а меню с права. Лого рисовать я не стану, напишем просто какой нить текст. У нашего конечного результата будет возможность изменять дизайн не трогая код, так что не будем долго отвлекаться на красоту. Главный каркас, то есть область под лого, область под текст и под меню, будет состоять из таблицы. Все что в нутрии главного каркаса будет состоять из дивов…

 

 

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="/templates/style.css">
</head>
<body>
<table width="800px" height="750px" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td colspan="2" height="60px" valign="top">
<!--ЛОГО-->
<div class="logo"><div class="logoP">
<p style="padding:3px;">Мой первый блог</p>
</div></div>
<!--ЛОГО-->
</td>
</tr>
<tr>
<td valign="top" align="center"><br>
<!--ТЕКСТ-->
<div class="div_news">
<p class="title">Введение</p>
<p>Хотел дописать свою CMS но увы дело это долгое по причине того, что постоянно придумываю что-то еще, и внедряю все новые элементы.. Боюсь что мое, так сказать, "дописывание" может никогда не закончится =) Эта небольшая статья будет содержать лишь цель моего (и Вашего) проекта. Написание статей на блоге помогает мне разобраться в написанном коде, и улучшать его. Тем самым этот цикл статей мне поможет точно, возможно он и поможет Вам. Писать будем скрипт блога. </p>
<p align="right"><a href="#">Читать дальше</a></p>
</div>
<div class="div_footer">
Автор: Rio-Shaman | 09 Октября 2011 года 07:39
</div>

<div class="div_news">
<p class="title">Кнопка "Читать дальше"</p>
<p>Было время, пришлось задуматься...как же делают такой мини текст, после которого идет кнопка читать полностью... Постигая PHP с трудом верилось что это делается в ручную...На своем первом сайте я делал специальный столбец с мини текстом, и именно этот текст выводил на новостной странице, добавляя внизу кнопку "Читать дальше" Это работает, но мне кажется это как то не очень удобно... Я искал способ который бы подсчитывал символы в переменной, и обрезал, скажем после двухсот символов, переменную... Я до сих пор верю что такой способ есть, но я его не нашел =( Какое то время я пользовался таким способом: </p>
<p align="right"><a href="#">Читать дальше</a></p>
</div>
<div class="div_footer">
Автор: Rio-Shaman | 03 Октября 2011 года 11:20
</div>
<!--ТЕКСТ-->
</td>
<td width="200px" valign="top"><br>
<!--МЕНЮ-->
<p align="center">Меню</p>
<div class="div_menu"><a class="menu_link" href="#">ссылка 1</a></div>
<div class="div_menu"><a class="menu_link" href="#">ссылка 2</a></div>
<div class="div_menu"><a class="menu_link" href="#">ссылка 3</a></div>
<div class="div_menu"><a class="menu_link" href="#">ссылка 4</a></div>
<div class="div_menu"><a class="menu_link" href="#">ссылка 5</a></div>
<div class="div_menu"><a class="menu_link" href="#">ссылка 6</a></div>
<div class="div_menu"><a class="menu_link" href="#">ссылка 7</a></div>
<div class="div_menu"><a class="menu_link" href="#">ссылка 8</a></div>
<!--МЕНЮ-->
</td>
</tr>
</table>
</body>
</html>

Нам следует сохранить страничку в формате html и поместить ее в папку templates на сервере. В этой папке будут лежать все файлы html и CSS. Вот файл CSS:

body
{
margin:0px;
font-family:Verdana;
font-weight:100;
font-size:11px;
}
.title{font-weight:bold;font-size:13px;}
p{margin:2px;}
a.menu_link{font-weight:100;margin-left:15px;}
a{font-weight:bold;}
a:link {color:#000; text-decoration:none;}
a:visited {color:#000; text-decoration:none;}
a:hover {color:#000; text-decoration:none;}
a:active {color:#000; text-decoration:none;}
.div_news
{
border:1px solid #dcdcdc;
width:550px;
vertical-align:top;
text-align:justify;
padding:2px;
}
.div_footer
{
border:1px solid #dcdcdc;
width:550px;
vertical-align:top;
text-align:justify;
padding:2px;
margin-top:5px;
margin-bottom:10px;
font-weight:bold !important;
font-size:9px !important;
}
.div_menu
{
width:200px;
border:1px solid #dcdcdc;
margin:2px;
}
.logo
{
width:100%;
border:1px solid #dcdcdc;
border-top:0px;
height:50px;
}
.logoP
{
font-size:16px;
width:100%;
border:1px solid #dcdcdc;
height:45px;
margin:5px;
margin-top:0px;
}


Тоже кидаем ее в папку templates.

Если вы просматривали html код ,то могли заметить, что теги титл и мета пустые. Я это сделал специально. За все содержание страницы будет отвечать php файл, который будет находится в корне нашего сайта. Что бы закончить наш шаблон, надо поменять в нем следующие строчки

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="">
<meta name="keywords" content="">

на

<title><?=$header_title?></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="<?=$header_metaD?>">
<meta name="keywords" content="<?=$header_metaK?>">

Собственно для чего это надо? В переменных $header_title, $header_metaD, $header_metaK будет храниться информация о название страницы, ключевых словах, и описание страницы. И теперь наш шаблон знает где выводить эту информацию.

Так, и наконец нам нужно будет добавить php файл, вот его код:

<?
//Пока что мы вводим значение переменных в ручную
$header_title = "Документ HTML";
$header_metaD = "Описание страницы";
$header_metaK = "Ключевые слова страницы";

include("templates/index.html");//Подключение шаблона
?>


Называем его index.php, и сохраняем в корне нашего сайта. При запуске index.php, код подключит наш шаблон с дизайном, и выведет текст содержащийся в переменных..

Собственно на этом верстка окончена. В следующей статье мы будем писать первый “модуль” вывода мини новостей. На моем блоге уже есть статья Простой движок CMS на PHP где я писал пример этого модуля, так что если хотите можете почитать

update: Если после запуска Вы наблюдаете не адекватную картину в виде каракозябр, или непонятных символов в верху ( типа вот таких - п»їп»ї ), то переходите вот к этому посту "Правильная кодировка у нашего движка". Эта проблема связана с кодировкой, так что ее, просто, необходимо сменить, и все =)

Исходник
 

Возможно Вам будут интересны следующие заметки

Комментарии (10)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
Александр, 04 Июня 2012 г. 10:42 пишет:
Гость
Я большинство уроков просмотрел, но не встретил пока, где именно вставляются метаданные (сейчас они вручную вставились). Если у Вас описано, то напишите ссылку пожалуйста в каком уроке.
Rio-Shaman, 04 Июня 2012 г. 11:44 пишет:
Автор
В админ панели пока что можно вставлять мета теги лишь для статей, для главной странице пока нельзя. В момент реализации главных настроек движка появится данная возможность. Что касается скрипта который подставляет значения мета тегов, то мы их реализовывали в этом посте:
http://rio-shaman.ru/index.php?blog=90
Ответ для пользователя: Александр
Александр, 04 Июня 2012 г. 14:48 пишет:
Гость
Спасибо! Значит я проглядел
Ответ для пользователя: Rio-Shaman
Alex, 22 Сентября 2012 г. 11:23 пишет:
Гость
Блин, ну не могу я понять, почему у Вас короткие теги используются (<? ?>)??? Их вроде хотят вообще из употребления вывести.... И зачем значение include в скобках, да ещё и в двойные кавычки...??? Засорение кода вроде как.
fabrigas201, 19 Октября 2012 г. 21:53 пишет:
Гость
ну пока работают можно применить, в будущем оставят только такого вида <?= ?>
Ответ для пользователя: Alex
Игорь, 23 Марта 2013 г. 20:15 пишет:
Гость
у меня сервер Denwer куда это все расположить ?
Nikita, 25 Марта 2013 г. 11:26 пишет:
Читатель
Игорь, денвер понадобится на следующих уроках, а тут просто верстка..
Для своего сайта необходимо создать собственную дерикторию на созданном денвером локальном диске.
Например: Z:/home/mysite.ru/www/, где mysite.ru - название вашего сайта.
Ответ для пользователя: Игорь
Егор, 22 Марта 2014 г. 19:38 пишет:
Читатель
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in P:\home\test1.ru\www\moduls\news.php on line 5

Что это за ошибка?
Алексей, 25 Марта 2014 г. 10:48 пишет:
Автор
Функция mysql_query() возвратила неверный результат. После чего, естественно, функция mysql_fetch_array() не может получить результат выборки.
Ошибка может заключаться в неправильном запросе SQL, или отсутствие подключения к БД из-за не правильного логина и пароля к таблице БД
Ответ для пользователя: Егор
Reactor, 11 Мая 2014 г. 10:57 пишет:
Читатель
Короткие теги типа <? ?>, вообще полный вид это вот так <?php ?>... а когда подключаем плагин в веб сервере, именно там, short_tag... то мы можем писать без php... Скоро разрабочики сделают, т.е. переход на короткие теги... Он подключает файл через " " или ' ', скобки обезательно, как написано в документации php(ПиЭйчПи) разрабочиков, это простая формальность подключения файла...
Ответ для пользователя: Alex