Создаем CMS. Структура каталогов. Структура таблиц БД. Шаблон сайта: World Wide Web

Я реализую у себя следующую структуру каталогов и файлов. В дальнейшем она обязательно будет дополняться, и возможно изменится, ведь я создаю свою первую CMS.

admin (администраторский каталог)

classes (библиотеки классов, необходимые данному разделу)
templates (папка шаблонов)

default (папка шаблона по умолчанию)

index.php (главная страница администраторского раздела)

classes (библиотеки классов)
install (директория установки системы)

css (таблицы стилей для шаблона установки)

setap.css (сам файл таблиц стилей для шаблона установки)

index.php (главная страница установки)

modules (подключаемые модули)
templates (шаблоны сайта)

default (шаблон по умолчанию)

blocks (блоки шаблона)

content.php (центральная часть)
footer.php (нижняя часть)
header.php (верхняя часть)
menuLeft.php (левое меню навигации)
newsLeft.php (блок новостей слева)

css (таблицы стилей шаблона)

style.css (главная каскадная таблица стилей)

img (картинки)

english.png (иконка "английский")
home.png (иконка "домашняя")
mail.png (иконка "почта")
rassia.png (иконка "русский")
runa.png (логотип)

js (папка со скриптами JavaScript
index.php (главная страница шаблона)

.htaccess (хтакцес)
404.php (ошибка 404)
config.php (файл конфигурации БД)
index.php (главная страница сайта)

Изначальная структура таблиц базы данных MySQL:

pdb_users (таблица пользователей)

userID (идентификатор пользователя)
username (логин)
password (пароль)
email (адрес электронной почты)
activ (уровень доступа)

pdb_config (конфигурация системы)
pdb_pages (страницы)
pdb_menu (меню навигации)

Должен предупредить, что шаблон не во всем корректно отображается в IE, и писался для google chrome.

Файл шаблона index.php:


<?php include ('templates/default/blocks/header.php'); /*подключаем верхнюю часть сайта*/?>
<div class="razriv"></div>
<!----- центральная часть сайта ----->
<div class="center">
 <!----- левый блок ----->
 <div class="left">
<?php include ('templates/default/blocks/menuLeft.php'); /*подключаем левое меню навигации*/?>
<?php include ('templates/default/blocks/newsLeft.php'); /*подключаем новостной блок*/?>
 </div>
 <!----- конец левый блок ----->
<?php include ('templates/default/blocks/content.php'); /*подключаем основную часть страницы*/?>
</div>
<!----- конец центральная часть сайта ----->
</div>
<!----- конец дива контейнера (class="conteiner" начало искать в blocks/header.php) ----->
<div class="razriv"></div>
<?php include ('templates/default/blocks/footer.php'); /*подключаем нижнюю часть сайта*/?>

header.php:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <!----- здесь мы подключаем стили ----->
 <link rel="stylesheet" type="text/css" href="templates/default/css/style.css" />
 
 <!----- здесь мы подключаем скрипты ----->

 <!----- информация о создателе и лицензии ----->
    <meta name="author" content="Kalinin Sergey" />
    <meta name="copyright" content="Вы можете изменять данный шаблон, как Вам угодно, для собственного использования. Вы не можете использовать его в комерческих целях" />

 <!----- настройки документа ----->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 <!----- информация для поисковиков ----->
    <meta name="keywords" content="" />
    <meta name="description" content="" />
 <title>Шаблон главной страницы</title>
</head>
<body>
<!----- начало тела страницы ----->
<!----- контенинер ----->
<div class="conteiner">
<!----- header.php ----->
<!----- шапка сайта ----->
<div class="site-top">
 <!----- контейнер для верхней части header (название и иконки меню) ----->
 <div class="top-top">
  <!----- название сайта ----->
  <div class="site-name">
   <div style="float:left; margin-top:4px; margin-right:13px;">
    <a href=#><img src="templates/default/img/runa.png" border="0" width="20" height="20" /></a>
   </div>
   <div style="">
    <a href=#>Pokolenie (Content Manager System)</a>
   </div>
  </div>
  <!----- конец названия сайта ----->
  <!----- иконки меню ----->
  <div class="top-right">
    <a href=#><img src="templates/default/img/rassia.png" border="0" alt="Сменить язык" title="Сменить язык"/></a>
    <a href=#><img src="templates/default/img/home.png" border="0" alt="Вернуться на главную" title="Вернуться на главную"/></a>
    <a href=#><img src="templates/default/img/mail.png" border="0" alt="Отправить письмо" title="Отправить письмо"/></a>
  </div>
  <!----- конец иконки меню ----->
 </div>
 <!----- конец контейнер для верхней части header ----->
  <!----- верхняя навигация ----->
  <div class="top-navigation">
   <ul class="site-navigation">
    <li><a href=#>Home page</a></li>
    <li><a href=#>Новости</a></li>
    <li><a href=#>Блог</a></li>
    <li><a href=#>Фотогалерея</a></li>
    <li><a href=#>Контакты</a></li>
   </ul>
  </div>
  <!----- конец верхняя навигация ----->
</div>
 <!----- конец header.php ----->
menuLeft.php:


<!----- левая навигация ----->
  <div class="left-navigation">
  <p>"Home page"</p>
  <ul class="left-ul">
   <li><a href=#>Главная</a></li>
   <li><a href=#>Новости</a></li>
   <li><a href=#>Блог</a></li>
  </ul>
  </div>
  <!----- конец левой навигации ----->

newsLeft.php:


<!----- две новости слева ----->
  <div class="news">
   <p>News</p>
   <div class="news-1">
    <a href=#>Нацисты наступают!</a>
    <div><p>Здесь располагается описание первой новости. This is news company</p></div>
   </div>
   <div class="news-1">
    <a href=#>html 5 + css 3</a>
    <div><p>Здесь располагается описание второй новости. This is news world</p></div>
   </div>
  </div>
  <!----- конец две новости слева ----->

content.php:

<!----- основная часть ----->
 <div class="content">
 <!----- заголовок основной части ----->
 <h1>в топку internet explorer</h1>
 <!----- конец заголовок основной части ----->
 <p>Текст страницы</p>
 </div>
 <!----- конец основная часть ----->

footer.php:


<!----- начало блока эпилога footer ----->
<div class="footer">
 <!----- нижняя навигация ----->
 <div class="footer-navigation">
  <div class="footer-link"><a href="#">forum</a></div>
  <div class="footer-link"><a href="#">документация</a></div>
  <div class="footer-link"><a href="#">наши другие проекты</a></div>
  <div class="footer-link"><a href="#">о нас</a></div>

 </div>
 <!----- конец нижняя навигация ----->
 <!----- copyright ----->
 <div class="copyright">
  <p><a href=#>Sergey Kalinin &copy;</a></p>
  <p>2012 год</p>
 </div>
 <!----- end copyright ----->
</div>
<!----- конец контентной части ----->
</body>
</html>

Файл стилей style.css:

/*----- элемент body -----*/
body{
 margin: 0 auto;
 padding: 0px;
 background-color:#ffffff;
 text-align:center;
}

/*----- главный контейнер сайта (все содержимое сайта выводится здесь) -----*/
.conteiner {
 margin: 0 auto;
 padding: 0px;
 position: relative;
 margin-top:1%;
 width:840px;
 height:480px;
 text-align:left;
 background-color:#F1F1F1;
}
/*----- header, верхняя часть сайта (в этом div выводится логотип, имя сайта и верхняя навигация)-----*/
.site-top {
 margin: 0px;
 padding: 0px;
 width:840px;
 height:61px;
 background-color:#3383b8;
}
/*----- контейнер для хранения имени сайта и правой верхней менюшки -----*/
.top-top{
 margin:0px;
 padding:0px;
}
/*----- имя сайта -----*/
.site-name{
 padding-top:3px;
 padding-left:18px;
 width:600px;
 text-align:left;
 float:left;
}
/*----- класс для ссылки div "имя сайта" -----*/
.site-name a{
 font-size:25px;
 color:#ffffff;
 font-family: Arial;
 text-decoration:none;
}
/*----- правая верхняя меню из иконок -----*/
.top-right{
 margin-right:35px;
 padding-top:5px;
 text-align:right;
}
.top-right a{
 margin-left:17px;
}
/*----- контейнер для верхней навигации -----*/
.top-navigation{
 margin:0px;
 margin-top:5px;
 padding:0px;
 text-align:right;
}
/*----- верхняя навигация -----*/
ul.site-navigation {
 margin: 0px;
 padding:0px;
 height: 20px;
 background-color: #3383b8;
 float:left;
}

ul.site-navigation li {
 line-height: 20px;
 height: 20px;
 float:left;
 width:140px;
 list-style: none;
}

ul.site-navigation li a {
 width:auto;
 display: block;
 text-align:center;
 color: #fff;
 text-decoration:none;
 margin: 0;
 border-right: 1px solid #f4f4f4;
 font-family: Verdana;
 font-size:12px;
 /* Анимация для браузеров основаных на Webkit */
 -webkit-transition: background-color 0.15s linear;
}
/* Добавим анимацию при наведении */
 ul.site-navigation li a:hover {
 background-color: #3597D8;
 color:#f1f1f1;
}
/*end top navigation*/

.razriv{
 margin:0px;
 padding:0px;
 width:840px;
 height:3px;
 background-color:#ffffff;
}
/*----- левый блок -----*/
.left{
 margin:0px;
 padding:0px;
 margin-left:3px;
 margin-top:3px;
 width:180px;
 height:410px;
 background-color:#ffffff;
 float:left;
}
/*----- блок левая навигация -----*/
.left-navigation{
 margin:0px;
 padding:0px;
 width:180px;
 height:90px;
 margin-bottom:20px;
 text-align:center;
}

.left-navigation p{
 margin:0px;
 padding:0px;
 padding-top:5px;
 padding-bottom:5px;
 color:#f4f4f4;
 font-family: Arial;
 font-weight:bold;
}
/*----- левая навигация -----*/
ul.left-ul {
 margin: 0px;
 margin-left:3px;
 padding:0px;
 width:173px;
 height: 20px;
 background-color: #3383b8;
}

ul.left-ul li {
 margin:0px;
 padding:0px;
 line-height: 20px;
 height: 20px;
 width:173px;
 list-style: none;
 background-color: #3383b8;
}

ul.left-ul li a {
 width:auto;
 display: block;
 text-align:center;
 color: #fff;
 text-decoration:none;
 margin: 0px;
 font-family: Verdana;
 font-size:12px;
 /* Анимация для браузеров основаных на Webkit */
 -webkit-transition: background-color 0.15s linear;
}
/* Добавим анимацию при наведении */
 ul.left-ul li a:hover {
 background-color: #3597D8;
 color:#f1f1f1;
}
/*----- блок новости -----*/
.news{
 margin:0px;
 margin-top:3px;
 padding:0px;
 margin-left:3px;
 width:173px;
 height:295px;
 text-align:center;
 background-color:#3383b8;
}

.news p{
 margin:0px;
 padding:0px;
 padding-top:5px;
 padding-bottom:5px;
 color:#FFFFFF;
 font-weight:bold;
}
/*----- блок отдельной новости -----*/
.news-1{
 margin: 0 auto;
 padding: 0px;
 padding-top:7px;
 width:166px;
 height:100px;
 margin-bottom:10px;
 background-color:#f1f1f1;
}

.news-1 a{
 color:#3383b8;
 font-family: Verdana;
 font-size:12px;
 font-weight:bold;
 text-decoration:none;
}

.news-1 a:hover{
 color:#FF0000;
 font-family: Verdana;
 font-size:12px;
 font-weight:bolder;
}

.news-1 p{
 padding:4px 4px 4px 4px;
 text-align:center;
 color:#000000;
 font-family: Verdana;
 font-size:12px;
 font-weight:normal;
}
/*----- основная часть сайта -----*/
.content {
 margin-left:187px;
 margin-right:7px;


}
/*----- заголовок основной части -----*/
.content h1{
 margin-top:2px;
 margin-bottom:2px;
 text-align:center;
 font-size:22px;
 font-family: Arial;
 color:#3383b8;
}
/*----- форматирование абзацев основной части -----*/
.content p{
 text-align:justify;
 padding-left:5px;
 margin-top:5px;
 margin-right:5px;
 margin-bottom:5px;
 font-family: Verdana;
 font-size:10px;
}

/*----- foooooooter -----*/
.footer{
 margin:0 auto;
 width:840px;
 text-align:center;
}

.footer-navigation{
 width:840px;
 height:15px;
 background-color:#3383b8;
 text-align:right;
 position:relative;
}

.footer-link{
 text-align:center;
 float:left;
 margin-left:25px;
 margin-right:20px;
}

.footer-link a{
 font-family: Verdana;
 font-size:10px;
 text-decoration:none;
 color: #ffffff;
}

.footer-link a:hover{
 font-family: Verdana;
 font-size:10px;
 text-decoration:none;
 color: #f1f1f1; 
}
/*----- copyright -----*/
.copyright{
 text-align:center
}
.copyright p{
 font-family: Verdana;
 font-size:10px;
 text-decoration:none;
 color: #000000;
 margin-top:1px;
 margin-bottom:1px;
}

.copyright a{
 font-family: Verdana;
 font-size:10px;
 text-decoration:none;
 color:#3383b8;
}

.copyright a:hover{
 font-family: Verdana;
 font-size:10px;
 text-decoration:none;
 color: #ff0000;
 font-weight:inherit;
}



Размеры картинок: логотип 45*45, иконки почты, языка и домашней страницы 22*22

World Wide Web

Страницы

воскресенье, 9 сентября 2012 г.

Создаем CMS. Структура каталогов. Структура таблиц БД. Шаблон сайта

Я реализую у себя следующую структуру каталогов и файлов. В дальнейшем она обязательно будет дополняться, и возможно изменится, ведь я создаю свою первую CMS.

Изначальная структура таблиц базы данных MySQL:

Комментариев нет:

Отправить комментарий

Страницы

воскресенье, 9 сентября 2012 г.

Создаем CMS. Структура каталогов. Структура таблиц БД. Шаблон сайта

Я реализую у себя следующую структуру каталогов и файлов. В дальнейшем она обязательно будет дополняться, и возможно изменится, ведь я создаю свою первую CMS.

Изначальная структура таблиц базы данных MySQL:

Комментариев нет:

Отправить комментарий

воскресенье, 9 сентября 2012 г.