Локальный веб-сервер | htmlbook.ru
Современный сайт представляет собой не просто набор HTML-документов, но и включает в себя множество технологий, в том числе серверных, таких как: SSI (Server-Side Includes, включения на стороне сервера), PHP (PHP: Hypertext Preprocessor, PHP: препроцессор гипертекста), базы данных и многое другое. Для ознакомления и изучения этих технологий ошибкой будет использовать посещаемый рабочий сайт в Интернете, поэтому имеет смысл установить необходимый комплект программ на локальный компьютер и тестировать все на нем.
Наиболее популярной связкой таких программ является веб-сервер Apache, язык программирования PHP, система управления базами данных MySQL, оболочка для администрирования баз данных PhpMyAdmin, шаблонизатор Smarty.
Указанные программы работают преимущественно под управлением Linux подобных систем, но имеются и версии под Windows. Основной плюс этой связки программ в универсальности. Сайт, созданный и проверенный на локальном компьютере под Windows, легко может быть перенесен на сервер с FreeBSD.
К тому же этот набор поддерживает подавляющее большинство хостеров.
В дальнейшем будут рассмотрены программы для домашнего компьютера с операционной системой Windows.
Кратко опишем, что представляют собой технологии, которые будут использоваться для создания сайта.
Веб-сервер
Веб-сервером называется программа, которая анализирует приходящие запросы и формирует готовые документы отправляемые пользователю. В качестве веб-сервера часто выступает Apache, как наиболее устоявшийся и популярный в Интернете. По разным оценкам его доля составляет почти 50% от общего числа используемых веб-серверов.
http://www.apache.org
PHP
Популярный язык программирования, используемый при разработке сайта.
http://www.php.net
MySQL
Система управления базами данных.
http://www.mysql.com
PhpMyAdmin
Веб-интерфейс для создания и управления базами данных MySQL. Позволяет просматривать таблицы, изменять их содержание, модифицировать структуру, делать выборку данных, сортировать информацию.
Все действия осуществляются прямо в браузере, в специально разработанном под него дружественном интерфейсе.
http://www.phpmyadmin.net
Smarty
Мощная система шаблонов для PHP. Использует свой собственный язык, который сочетает HTML и специальные теги Smarty. Шаблоны нужны для разделения программного кода и представления документа или по-другому, для отделения логики от содержания.
http://www.smarty.net
Все указанные программы и технологии являются открытыми, могут быть бесплатно загружены и свободно использоваться.
Можно установить необходимые программы, скачав их с сайта производителя и настроив под свои нужды. Однако это подчас требует знакомство с программой и владение необходимой квалификацией, которой у начинающих нет. Поскольку речь идет не о полноценном рабочем сервере, а о компьютере для тестирования и отладки, то имеет смысл использовать готовые комплекты. Такой комплект содержит в себе все необходимые для веб-разработчика программы, легко настраивается и управляется.
Далее пойдет речь о некоторых популярных комплектах веб-разработчика.
Макет страницы в Grid Layout ⚡️ HTML и CSS с примерами кода
Рассмотрим создание простейшего адаптивного стандартного макета веб-страницы, который состоит из шапки, подвала, основного содержимого, блока навигации и сайдбара. Для этого определим следующую веб-страницу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid Layout в CSS3</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header'
'.'
'menu'
'.'
'content'
'.'
'sidebar'
'.'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
}
.
header {
grid-area: header;
background-color: #bbb;
}
.menu {
grid-area: menu;
background-color: #ccc;
}
.sidebar {
grid-area: sidebar;
background-color: #ccc;
}
.content {
grid-area: content;
background-color: #eee;
}
.footer {
grid-area: footer;
background-color: #bbb;
}
h4 {
text-align: center;
}
@media screen and (min-width: 468px) {
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header header header header header'
'. . . . .'
'menu . content . sidebar'
'. . . . .'
'footer footer footer footer footer';
grid-template-columns: 130px 5px 1fr 5px 130px;
grid-template-rows: 90px 5px 1fr 5px 90px;
}
}
</style>
</head>
<body>
<div>
<div><h4>Header</h4></div>
<div><h4>Content</h4></div>
<div><h4>Menu</h4></div>
<div><h4>Sidebar</h4></div>
<div><h4>Footer</h4></div>
</div>
</body>
</html>
В прошлой теме уже рассматривалось применение именованных областей.
Однако, так как предполагается, что веб-страницу могут просматривать на мобильных устройствах, где ширина экрана ограничена, то хотелось бы иметь адаптивный макет. Поэтому в стиля имеются два разных определения грида. Одно определение грида для мобильных устройств (условно в качестве ширины устройств выбрано значение в 468px):
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header'
'.'
'menu'
'.'
'content'
'.'
'sidebar'
'.'
'footer';
grid-template-columns: 1fr;
grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
}
В таком состоянии грид имеет только один столбец и 5 строк для каждой области плюс 4 строки-разделители.
При увеличении ширины экрана в действие вступает другое определение грида:
.grid-container {
height: 100vh;
display: grid;
grid-template-areas:
'header header header header header'
'. . . . .'
'menu . content . sidebar'
'. . . . .'
'footer footer footer footer footer';
grid-template-columns: 130px 5px 1fr 5px 130px;
grid-template-rows: 90px 5px 1fr 5px 90px;
}
. . . .'
'menu . content . sidebar'
'. . . . .'
'footer footer footer footer footer';
grid-template-columns: 130px 5px 1fr 5px 130px;
grid-template-rows: 90px 5px 1fr 5px 90px;
}
В этом случае столбцов и строк будет по пять:
Макет страницы | HTML Собака
В давние времена человекообразные обезьяны использовали HTML-таблицы для компоновки веб-страниц. Весело, правда?! Но вскоре появился CSS, этот монолит из 2001: A Space Odyssey, который все изменил.
Макет с помощью CSS очень прост. Вы просто берете кусок своей страницы и вставляете его туда, куда хотите. Вы можете поместить эти фрагменты абсолютно или относительно в другой фрагмент.
Позиционирование
позиция 9Свойство 0016 используется для определения того, является ли поле абсолютным, относительным, статическим или фиксированным:
-
staticявляется значением по умолчанию и отображает блок в обычном порядке, как они появляются в HTML. -
относительныйочень похож настатический, но прямоугольник может быть смещен от его исходного положения со свойствамиверхнее,правое,нижнееилевое. -
absoluteвытаскивает коробку из обычного потока HTML и доставляет ее в собственный мир. В этом сумасшедшем маленьком мире абсолютное поле можно разместить в любом месте страницы с помощьюсверху,снизуислева. -
фиксированныйведет себя какабсолютный, но он будет абсолютно позиционировать блок по отношению к окну браузера, а не к веб-странице, поэтому фиксированные блоки должны оставаться точно там, где они находятся на экране, даже когда страница прокручивается.
Когда мы говорим об абсолютно позиционированных полях, размещенных в любом месте страницы, на самом деле они все еще расположены относительно краев страницы.
И чтобы добавить еще один возврат, страница на самом деле не обязательно должна быть контейнером — блок будет «абсолютно» позиционирован по отношению к любому нестатическому позиционированному содержащему блоку. Просто пока не обращайте на это внимания…
Макет с использованием абсолютного позиционирования
Вы можете создать традиционный двухколоночный макет с абсолютным позиционированием, если у вас есть что-то вроде следующего HTML:
<дел>
<ул>
Если бы вы использовали приведенные выше примеры и на всех ваших страницах были бы маленькие панели навигации и большие области содержимого, все было бы в порядке, но, особенно при использовании относительных значений ширины и размеров, вам часто приходится отказываться от любой надежды разместить что-либо, например, нижний колонтитул под этими полями. Если бы вы хотели сделать что-то подобное, одним из способов было бы 
Если вы создаете новый файл (и не редактируете файл из существующей темы), они добавляются за вас.
Оболочка заполняется именем класса 
Замените имя области на более значимое слово.
