Верстка нашего блога
Как я и обещал, начнем мы с верстки...В этой области я не очень силен, и парой допускаю очень грубые ошибки. Не исправляю их я, потому что все, что пишу, все прекрасно работает, не смотря на, так называемую, валидность кода. Ну что ж? С дизайном, я думаю, мучиться не стоит, напишем простенькую страницу, где текст будет находится по середине, а меню с права. Лого рисовать я не стану, напишем просто какой нить текст. У нашего конечного результата будет возможность изменять дизайн не трогая код, так что не будем долго отвлекаться на красоту. Главный каркас, то есть область под лого, область под текст и под меню, будет состоять из таблицы. Все что в нутрии главного каркаса будет состоять из дивов…
Пошагово я расписывать создание 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: Если после запуска Вы наблюдаете не адекватную картину в виде каракозябр, или непонятных символов в верху ( типа вот таких - п»їп»ї ), то переходите вот к этому посту "Правильная кодировка у нашего движка". Эта проблема связана с кодировкой, так что ее, просто, необходимо сменить, и все =)
 |
Исходник |
http://rio-shaman.ru/index.php?blog=90
Для своего сайта необходимо создать собственную дерикторию на созданном денвером локальном диске.
Например: Z:/home/mysite.ru/www/, где mysite.ru - название вашего сайта.
Что это за ошибка?
Ошибка может заключаться в неправильном запросе SQL, или отсутствие подключения к БД из-за не правильного логина и пароля к таблице БД