И так всем привет. Для новичков хочу помочь понять php, css, js ну и так далее. А начну я с того что сделаем для начала шаблон для сайта при помощь тега div в наше время это самое просто для этого нам понадобиться такой файл как index.php я не буду вас учить как создать полноценный шаблон при помощи этого хотя можно и это но я сделаю не много проще.
для на чала нам понадобиться программа для поднятия локальной машины это такие как:
1)
2)
а) Open Server Full — это полная версия Open Server. Представляет собой мощную серверную платформу с Apache, Nginx, PHP, MySQL и полноценную программную среду, которая включает в себя большой набор полезного софта для веб-мастера и всё это полностью портативно! Актуальный список программ, включенных в состав пакета, вы можете найти на главной странице сайта.
б) Open Server Mini — содержит в себе только серверную часть платформы без пакета дополнительных программ и документации по модулям. Данная версия рекомендуется тем пользователям, которые имеют медленный интернет-канал или не располагают свободным местом на жёстком диске для полной версии Open Server.
в) Open Server Apps Pack — является расширением для Open Server Mini до версии Full. Коллекция портативных, т.е. не требующих установки, приложений, в которую входят браузеры, текстовые редакторы, графические утилиты, программы для общения в сети, менеджеры закачек, системные утилиты, плееры и очень многое другое, объединённые одной оболочкой. Так же в этот пакет входит полная документация по модулям Apache, Nginx, MySQL, PostgreSQL и PHP. Для установки пакета просто распакуйте его в папку с Open Server Mini.
3)
4)
5)
Вот как вы выбрали себе локальную машину, устанавливаем ее себе на ПК и начинаем.
Для начала создадим небольшой шаблончик сайта. чтоб потом можно было его наполнять, нужной вам информации.
и поэтому я повторюсь что для начала создадим файл index.php и наполним хотя бы следующей информацией.
ну так вот мы и раскидались с тегом div в принцепи вы спросите зачем нам его зачем мы его написали в index.php когда проще было прописать его в .html ну а это я вам объясню в следующий раз а пока давайте посмотрим что у нас вышло.
открываем страницу и у нас все по левому краю и так дело не пойдет вы ж согласны. по этому у нас есть вот эта строка
эта строка у нас отвичает за стили и по этому нам надо создать папку css и запихнуть в нее вайл style.css откроем теперь его и начнем заполнять нужной нам информацией.
и тут вы задались вопросом а что это такое @import url(""); и тут я вам могу помочь с объяснением, чтоб мне не заполнять все в один файл все данные и не искать что куда и зачем я раскидал их по файлом чтоб мне проще было искать нужную часть, к примеру шапка у меня в стиле up вот я лезу в этот стиль и что мне нужно добовляю или правлю как мне надо. в принципе вы можете сделать также. хотя каждому свое.
Шапка
Меню1
теперь трогаем основу разделяющие на три колонки.
так и теперь нам остался подвальчик.
Ну теперь вы можете как то по тихонь ку улучшать свое детише в дизайне. а в следуюшем уроке я вам покажу как можно сделать ности на странице и меню уже при помощи php.
Спасибо за внимание. ждите следуюшего урока кому понравилось жмите репутацию.
для на чала нам понадобиться программа для поднятия локальной машины это такие как:
1)
Вам необходимо зарегистрироваться для просмотра ссылок
- это самая популярная программа для создания домашней сети.2)
Вам необходимо зарегистрироваться для просмотра ссылок
- это портативная программная платформа, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий. а) Open Server Full — это полная версия Open Server. Представляет собой мощную серверную платформу с Apache, Nginx, PHP, MySQL и полноценную программную среду, которая включает в себя большой набор полезного софта для веб-мастера и всё это полностью портативно! Актуальный список программ, включенных в состав пакета, вы можете найти на главной странице сайта.
б) Open Server Mini — содержит в себе только серверную часть платформы без пакета дополнительных программ и документации по модулям. Данная версия рекомендуется тем пользователям, которые имеют медленный интернет-канал или не располагают свободным местом на жёстком диске для полной версии Open Server.
в) Open Server Apps Pack — является расширением для Open Server Mini до версии Full. Коллекция портативных, т.е. не требующих установки, приложений, в которую входят браузеры, текстовые редакторы, графические утилиты, программы для общения в сети, менеджеры закачек, системные утилиты, плееры и очень многое другое, объединённые одной оболочкой. Так же в этот пакет входит полная документация по модулям Apache, Nginx, MySQL, PostgreSQL и PHP. Для установки пакета просто распакуйте его в папку с Open Server Mini.
3)
Вам необходимо зарегистрироваться для просмотра ссылок
представляет собой серверный пакет или сервер приложений, включающий в себя веб-сервер Apache 2.0, интерпретатор PHP5 с библиотеками PECL, интерпретатор PERL5, сервера баз данных MySQL5 и SQLite2, FTP сервер SlimFTPd, а также обширные средства администрирования серверных компонентов. Причем указанные компоненты сервера приложений работают как единое целое.4)
Вам необходимо зарегистрироваться для просмотра ссылок
— простая в установке кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP и язык программирования Perl, и много дополнительных библиотек которые позволяют запустить полноценный веб-сервер. XAMPP работает со всеми 32-х разрядными ОС Microsoft, а также с Linux, MacOS X и Solaris. Программа свободно распространяется согласно лицензии GNU General Public License и является бесплатным, удобным в работе web-сервером, способным обслуживать динамические страницы. С помощью этой программы можно быстро развернуть на своем компьютере полноценный и быстрый веб-сервер. который позволит вам быстро создавать от маленьких динамических страниц до корпоративных сайтов. 5)
Вам необходимо зарегистрироваться для просмотра ссылок
— web-сервер и почтовый прокси-сервер, работающий на Unix-подобных операционных системах (тестировалась сборка и работа на FreeBSD, OpenBSD, Linux, Solaris, Mac OS X, AIX). Начиная с версии 0.7.52 появилась бинарная сборка под Microsoft Windows.Вот как вы выбрали себе локальную машину, устанавливаем ее себе на ПК и начинаем.
Для начала создадим небольшой шаблончик сайта. чтоб потом можно было его наполнять, нужной вам информации.
и поэтому я повторюсь что для начала создадим файл index.php и наполним хотя бы следующей информацией.
HTML:
<html>
<head>
<title>Вау мы заработали)</title> <!--При всем желание если хотете можно сделать что то вроде $title или $_title а это для тово если вы хотите делать сайт не нескольких языках, а пока пишем название нашей страници ;)-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Кодировка страници. можно прописать как windows-1251 и UTF-8 в принцепи очень полезная и хорошая вешь для кодировки языка-->
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" /> <!-- Это нам нужно для тогото чтоб сайт был красивым и привлекательным и манил к себе народ мы подключам стили.-->
</head>
<body>
<!-- Делаем шапку-->
<!-- Использовать всякие там table tr td мы не будем а будем использвать тег div сним на на много проще работать и он приятный на ощюп:) -->
<div class="up">
<!-- up я так назвал класс шапки) в принцепи вы ее можете назвать как хотите)-->
Тут бедет шапочка =)
</div>
<!-- Закончили с шапкой-->
<!-- Сдеесь я сделаю меню мне оно пригодиться)-->
<div class="menu1">
менюшка)
</div>
<!-- Закрыли менюшку -->
<!--Теперь берем основу где у меня будет под меню, новости, там календари и т.д. а разделяться все будет на 3 колонки.-->
<div class="osnova">
<!-- и так по ехали тут у нас теперь будет лево-->
<div class="left">
Лево
<div class="menu2">
Меню
</div>
<div class="rek">
тут реклама
</div>
<div class="coll_news">
самые лучшие новости =)
</div>
</div>
<!--Закрили лево если что тегов div можно добавить и для рекламы -->
<!--Теперь делаем центр тут у нас будут новсти, регистрация, редоктирование профиля и это все в будощем.-->
<div class="center">
<div class="news">
тут у нас будут новости
</div>
</div>
<!--Закрываем центр-->
<!--Ну а тут у нас будет Право-->
<div class="right">
<div class="vhod">
тут будет вход
</div>
<div class="baner">
банеры реклама и все автоматом
</div>
<div class="kalendar">
ну ладно уговорили впихнем и календарь
</div>
</div>
<!-- Закрыли Право-->
</div>
<!--закрыли основу -->
<!-- Переходим в подвал-->
<div class="fooo">
подвальчик и всяяекие прибомбасы =)
</div>
<!--Закрываем подвальчик -->
</body>
</html>ну так вот мы и раскидались с тегом div в принцепи вы спросите зачем нам его зачем мы его написали в index.php когда проще было прописать его в .html ну а это я вам объясню в следующий раз а пока давайте посмотрим что у нас вышло.
открываем страницу и у нас все по левому краю и так дело не пойдет вы ж согласны. по этому у нас есть вот эта строка
HTML:
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
Код:
@import url("up.css");
@import url("menu1.css");
@import url("osnova.css");
@import url("fooo.css");
* {
margin: 0;
padding: 0;
}и тут вы задались вопросом а что это такое @import url(""); и тут я вам могу помочь с объяснением, чтоб мне не заполнять все в один файл все данные и не искать что куда и зачем я раскидал их по файлом чтоб мне проще было искать нужную часть, к примеру шапка у меня в стиле up вот я лезу в этот стиль и что мне нужно добовляю или правлю как мне надо. в принципе вы можете сделать также. хотя каждому свое.
Шапка
Код:
.up {
width: 1240px; /* растягивайте на весь экран ну или как вам удобно. */
}Меню1
Код:
.menu1 {
width: 1240px;
}теперь трогаем основу разделяющие на три колонки.
Код:
@import url ("left.css");
@import url ("center.css");
@import url ("right.css");
.left {
width: 230px;
float: left;
position: relative;
margin: 0 0 10px 0;
padding: 0px 0px 0 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
-moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
}
.center {
width: 230px;
float: left;
position: relative;
margin: 0 0 10px 0;
padding: 0px 0px 0 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
-moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
}
.right{
width: 230px;
float: left;
position: relative;
margin: 0 0 10px 0;
padding: 0px 0px 0 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
-moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
box-shadow: 0 0 5px 0 rgba(0,0,0,0.33);
}так и теперь нам остался подвальчик.
Код:
.fooo {
clear: both;
background: ;
}Ну теперь вы можете как то по тихонь ку улучшать свое детише в дизайне. а в следуюшем уроке я вам покажу как можно сделать ности на странице и меню уже при помощи php.
Спасибо за внимание. ждите следуюшего урока кому понравилось жмите репутацию.
))
