Скачать готовый сайт

Итак, всё изучили, таблицы, дивы. Как, что и куда запихивать тоже изучили :) Если нет, то не поленитесь, пробегитесь немного по предыдущим темам. Так как сейчас я просто выложу код, что бы вы могли скачать готовый сайт. Только учтите, это будет голый код, безо всяких красивостей. Так что дизайном придётся заняться самим.

Готовый сайт, который я выложу, будет только началом. Так сказать для вашей тренировки. Что бы вы всё попробовали на практике. А дальше можете переделать мой код, или создать свой новый. Можете конечно и мой оставить, дело ваше.


Теперь открываем программу, создаём документ PHP и копируем туда нижеприведённый код. Документ конечно можно создать другой. Но просто если у вас появятся вопросы, то так проще ориентироваться будет, не возникнет лишней путаницы и т.д. Если лень, можете просто скачать готовый, там тоже есть все объяснения. Ссылка на готовый документ.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Название странички.</title>
<meta name="keywords" content="Ключевые слова">
<meta name="description" content="Описание странички.">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="sajt">

<div class="shapka">
Шапка сайта, можно логотип сунуть, рекламу и т.д. Высоту сделал 120 рх. Вообще размер можно выставить любой. Посмотрите вверх, там есть слова - название странички, ключевые слова и т.д. Не забывайте их заполнять. В принципе поисковики сейчас мало внимания на них обращают, но всё-таки лучше прописывать.
</div>

<div class="kontent">

<div class="kontent1">
Меню.
<? include("menu/menu.php"); ?>
</div>

<div class="kontent2">
Тут ваши статьи.
</div>

<div class="kontent3">
Колонка справа. Можно рекламу засунуть и т.д. Можно и меню тут сделать, а слева рекламу поставить.
</div>
</div>

<div class="podval">
Подвал сайта. Я сделал 100 рх, тут обычно находятся счётчики и вся остальная мишура.
</div>
</div>
</body>
</html>

Немножко объяснений. В начале, там где выделил жирным, прописано - <meta charset="utf-8"> - это кодировка, далее - <link href="style.css" rel="stylesheet" type="text/css"> - присоединил таблицу стилей.


Страничку сделали, теперь надо присоединить таблицу стилей CSS. Что бы выставить местоположение, цвет, размер и т.д. Создаём документ с расширением .css. Тут другое использовать нельзя. И копируем следующий код. Ссылка для ленивых :)

@charset "utf-8";
*{margin:0;padding:0;}/* обнуляем отступы. У разных браузеров установки по умолчанию разные, поэтому лучше всё обнулять */
ul, ol, dl {
padding: 0;/* аналогично всё обнуляем */
margin: 0;
}
html {
height: 100%;/* прижимаю подвал к низу. Эти строки можете убрать. Это уже так сказать мой личный выпендрёж чистой воды :) Я приделал подвал к низу. Что бы он не поднимался при уменьшении масштаба странички, или при большом разрешении экрана. Наверное замечали, иногда заходите на сайт, а статья короткая и подвал поднимается вверх. Вот я и убрал эту оплошность */
}
body {
background-color: #FFF;/* цвет фона белый, лучше задавать в этом формате. Можно прописать названием цвета, к примеру- blue - синий. Это не ошибка, но в первом случае вы сможете более тонко подобрать цвет */
min-width: 1020px;/* минимальная ширина сайта */
background-image: url(http://...);/* фоновое изображение сайта */
background-repeat: no-repeat;/* не даёт повторяться фону */
background-attachment: fixed; /* фиксирует фон */
min-height: 100%;/* прижимаю подвал к низу */
position: relative;/* прижимаю подвал к низу */
}
.sajt{
min-height: 850px;/* минимальная высота сайта, можете удалить эту строчку. Она вам может понадобиться, если начнёте гуглевской рекламой торговать - ихняя реклама любит на всё сверху наезжать. Но вам пока её можно убрать. */
}
.shapka{
top: 0px;/* прижал к верху */
background-color: #CCC;/* цвет фона */
background-image: url(http://...);/* фоновое изображение */
background-repeat: repeat-x;/* фон можно сделать тоненькой полоской (например 1х100) и заставить его повторяться в одну из сторон. И вес будет маленький, в районе 1к и вид целого фона */
height: 120px;/* высота шапки */
width: 100%;/* ширина шапки */
}
.kontent{
background-color: #EEE;/* цвет фона */
}
.kontent1{
background-color: #EEE;/* цвет фона */
top: 120px;/* регулируем расстояние между меню (левой колонкой) и верхом */
left: 0px;/* отступ слева */
height: 300px;/* высота, её надо удалить!!! она у меня поставлена только что бы колонки в примере видно было */
width: 200px;/* ширина */
position: absolute;
}
.kontent2{
background-color: #F5F5F5;/* цвет фона */
font-family: "Times New Roman", Times, serif;/* Шрифт */
font-size: 16px;/* Размер шрифта */
color: #000;/* Цвет шрифта ваших статей */
padding: 0px 200px 100px 200px;/* отступы по краям, что бы не было наездов на шапку, подвал, колонки */
column-count: #; /* На несколько колонок разбивать текст. Это опять выпендрёж для больших мониторов. Это позволяет делиться статье на несколько колонок при большом разрешении экрана. Просто читать удобнее. Но если вам этого не надо, то можете удалить */
column-width: 600px; /* Ширина колонки */
column-gap: 60px; /* Расстояние между колонками */
column-rule: 1px solid #CCC; /* Стиль границы между колонками */
-moz-column-width: 600px;/* тоже самое */
-moz-column-gap: 60px;/* тоже самое */
-moz-column-rule: 1px solid #CCC;/* тоже самое */
-webkit-column-width: 600px;/* тоже самое */
-webkit-column-gap: 60px;/* тоже самое */
-webkit-column-rule: 1px solid #CCC;/* тоже самое. Всё, выпендрёж с колонками закончен :) */
}
.kontent2 a {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #3232C8;}/* цвет, размер, шрифт ссылок в ваших статьях */
.kontent2 a:link {text-decoration: none;color: #3232C8;}
.kontent2 a:visited {text-decoration: none;color: #3232C8;}
.kontent2 a:active {text-decoration: none;color: #3232C8;}
.kontent2 a:hover {text-decoration: underline;color: #000096;}/* цвет ссылок при наведении указателя, можете также выставить другой размер и шрифт и получится, что при наведении указателя ссылка будет меняться */
.kontent3{
background-color: #EEE;/* цвет фона */
top: 120px;/* выравниваю правую колонку относительно верха */
right: 0px;/* отступ справа */
height: 300px;/* высота, её надо удалить!!! она у меня поставлена только что бы колонки в примере видно было */
width: 200px;/* ширина */
position: absolute;
}
.podval{
background-color: #CCC;
background-image: url(http://...);
background-repeat: repeat-x;
bottom: 0px;/* прижал к низу */
width: 100%;/* ширина подвала */
height: 100px;/* высота */
position: absolute;
}
p {
margin: 15px 0px;/* помните мы убрали все отступы? Теперь делаем расстояние между абзацами */
}
a:focus {outline: none !important;}/* убирает окантовку вокруг ссылок */
a img {border: none !important;}/* и синюю окантовку вокруг изображений, которые являются ссылками */

/* а здесь настраиваем цвет выделения текста, можете удалить */
::selection {
background: #E1E1E1; /* цвет фона выделенного текста Safari, Chrome, Opera */
color: #333;/* цвет шрифта выделенного текста Safari, Chrome, Opera */
}
::-moz-selection {
background: #E1E1E1; /* FireFox */
color: #333;
}


Теперь надо вставить меню. Меню можете делать любое - простое, выпадающие, древовидное и т.д. Суть в том, что надо его вставить на все странички при помощи include. Прописываем код <? include("menu/menu.php"); ?> там где хотим что бы отображалось меню. Затем создаём документ PHP, делаем там меню и сохраняем под названием - menu.

Делается это что бы не надо было делать меню на каждой страничке сайта. Будет всего одно меню. Появится новая страничка, сделаете всего один новый пункт меню, вместо изменения меню на каждой страничке в отдельности. Тоже самое касается рекламных блоков. Просто вместо меню поставьте рекламный код и все дела.

Только перед тем как создавать меню, вставлять рекламные блоки - обязательно почистите страничку. Откройте её в режиме кода и просто удалите всё, что там есть. Иначе будут небольшие косяки и пропишите этот код. Ссылка :)

<p><a href="gotovij-sajt.php">1 страничка</a></p>
<p><a href="gotovij-sajt2.php">2 страничка</a></p>
<p><a href="gotovij-sajt3.php">3 страничка</a></p>

gotovij-sajt - это названия ваших страничек. Можете делать любые, только прописывайте без заглавных букв, одни строчные.

Это наипростейшее меню, просто ссылками, но можете вставить абсолютно любое. Или для ссылок в меню можно задать другие свойства, нежели на сайте. И они будут выглядеть по другому.


Пример работы сайта. Сайт резиновый, но сделана минимальная ширина, что бы удобнее было, что бы сайт не сплющивался до безобразия :) Можете сделать её любой, или вообще выкинуть. Тоже самое касается и высоты сайта. Что бы всё это дело заработало, достаточно залить эти файлы на хостинг. Что бы делать новые странички, достаточно просто копировать gotovij-sajt и сохранять его под нужным названием. Потом делаете ссылки на другие странички и сайт готов. Здесь работающий код примера с тремя страничками. Просто заливаете на хост и всё. Только не забывайте, что главная страничка сайта должна назваться index и ни как иначе. Если что не понятно обсуждаем на форуме - forum

Внимание. Хоть это и простой код сайта. Там нет ничего лишнего, только необходимый минимум. Но для его работы необходимо, что бы ваш хостинг поддерживал PHP. Платные почти все его поддерживают. Да, я и сам удивился, когда узнал что не все платные хостинги поддерживают PHP. Интересно и за что тогда они деньги берут? sprinthost.ru - на этом хостинге работает всё. Плюс ещё куча всего хорошего, о чём я уже сообщал на предыдущих страничках, так что не буду повторяться.

Можно конечно готовый сайт и для бесплатного хостинга сделать. В принципе и этот работать будет, если сохранить с другим расширением. Но всё равно потом лучше перейти на платный. На платном и сайт делать легче и зарабатывать проще. Так что зачем время терять?

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP