Что нам потребуется для создания простого макета сайта с использованием блочной верстки (DIV верстки)
Примем как должное, что использование блочной DIV верстки в большинстве случаев будет предпочтительнее, чем использование верстки табличной. В то же время, верстка на дивах является немного более сложной в освоении и понимании, нежели верстка табличная, но оно того стоит.
Не пожалейте времени и попробуйте окунуться в основы блочной DIV верстки, для начала, хотя бы прочитав эту статью, в которой я постараюсь в доступной форме рассказать об основных моментах и принципах, используемых при создании макета (2 и 3 колонки) сайта на дивах (DIV — блоках или же по другому контейнерах). Обращаю ваше внимание, что в этой статье я довольно сильно забегаю вперед в нашем с вами процессе изучения основ верстания сайтов. Дело в том, что кроме знаний основ HTML, которые я надеюсь вы уже получили из моих уроков в рубрике HTML для начинающих, вам понадобятся хотя бы базовые познания в CSS (каскадных таблицах стилей), которые являются неотъемлемой и основополагающей частью блочной DIV верстки. Но, как раз о CSS я еще не рассказывал.
Тем не менее, думаю, что нам это не помешает, а данная статья может стать своеобразной вводной статьей по курсу CSS. Здесь вы на конкретных, несложных примерах увидите и, надеюсь, поймете логику работы с каскадными таблицами стилей CSS в связке с HTML кодом.
Сегодня мы попробуем на конкретных примерах разобраться в нюансах создания простейших д макетов (шаблонов) в 2 и 3 колонки для сайтов. Все свойства CSS, которые при этом будут использоваться, я постараюсь подробно разъяснить и объяснить необходимость их использования. А уже в последующих статьях курса по CSS мы рассмотрим все свойства каскадных таблиц стилей во всех подробностях и вариациях.
Для того, чтобы нам создать простой макет сайта, основанный на блочной DIV верстке, достаточно будет двух файлов, в одном из которых мы пропишем HTML код нашего макета (пусть это будет файл index.html ), а в другом — разместим стилевое оформление CSS макета (назовем этот файл style.css ). Почему мы назвали первый из файлов index.html , а не как-то по другому?
Как браузер работает с файлами сайта, почему особое значение придается файлам index.html и index.php, как обеспечить безопасность сайта
Все дело в алгоритме работы браузеров и в том, какие действия выполняет браузер при переходе по адресу, введенному в его адресной строке. Как вы наверное знаете, файлы любого сайта расположены на сервере хостинга (фактически сервер это обычный компьютер, заточенный под специфические задачи хостинга и работающий, как правило, под управлением Линукс подобных операционных систем).
Для каждого расположенного на сервере сайта отводится своя папка, которая прочно связывается с доменным именем сайта при помощи DNS серверов (подробнее про хостинг, домены и DNS читайте в этой серии статей — Доменное имя и хостинг для вашего будущего сайта). Так вот, браузер будет искать по указанному в адресной строке пути (корневой папка вашего сайта, в адресной строке будет соответствовать доменному имени вашего ресурса) именно файл под названием index.html или index.php.
Наверное, в теории не совсем понятно, поэтому поясню на примере. Когда вы набираете в адресной строке своего браузера, допустим:
то браузер осуществляет поиск в корневой папке моего блога (физически файлы блога находятся на сервере хостинга, в папке public_html , которая ассоциирована с доменным именем моего блога ktonanovenkogo.ru ). Что же ищет браузер в корневой папке моего блога? А ищет он файл index.html или index.php , и найдя соответствующий файл, открывает его:
- в случае index.html, браузер сразу же преобразует HTML код этого файл в видимую нам страничку блога
- в случае index.php, на сервере хостинга начнет выполняться в реальном времени код PHP, который прописан в этом файле. Скорость выполнения PHP кода зависит от скорости и загруженности сервера вашего хостинга, а так же от количества выделенных лично для вашего сайта ресурсов сервера. В результате выполнения этого PHP кода, на выходе будет сформирована страничка в формате HTML, которую браузер уже преобразует в видимую вам страничку блога. Немного подробнее о логике работы сайтов на основе CMS, использующих PHP код, вы можете почитать здесь.
Повышаем безопасность своего сайта — запрещаем просмотр содержимого директорий через браузер (.htaccess)
А что произойдет, если по указанному в адресной строке пути браузер не найдет ни файла index.html , ни файла index.php ? Тут все зависит от настроек сервера вашего хостинга. Если настроено все правильно, то при отсутствии, по заданному в адресной строке браузера пути, файлов index.html или index.php , браузер отобразит станицу ошибки 404. Если у вашего хостинга сервер настроен не правильно, то при отсутствии index.html или index.php по указанному пути, в окне браузера вы можете увидеть содержимое директории (папки) данного сайта.
Естественно, что ничего поменять в этих директориях вы из браузера не сможете, но взломщику может быть достаточно просто знания содержимого директорий вашего сайта, для дальнейшего успешного взлома. Давайте проверим. Зайдите по этому адресу моего сайта: http://ktonanovenkogo.ru/image/.
У вас откроется мой вариант страницы ошибок 404 (подробнее о том, как создать правильную страницу ошибок для Joomla и WordPress читайте в этих статьях — Настройка страницы ошибок 404 для сайта на Joomla с помощью компонента ARTIO JoomSEF и Как создать и зачем нужна страница ошибок 404 для блога на WordPress). В этой папке у меня хранятся изображения, которые я использую на страницах блога (например, это — http://ktonanovenkogo.ru/image/goo.png).
Защищаем директории своего сайта от просмотра их содержимого через браузер с помощью добавления пустого файла index.html
В принципе, вы можете сами запретить просмотр (листинг) директорий, в которых нет файлов index.html или index.php , если это не сделал за вас хостер. Сделать это можно несколькими способами. Один из них — это добавить во все папки не содержащие файлов index , пустой файл index.html.
Для этого вам нужно будет в текстовом редакторе сохранить пустую страницу, дав ей название index.html , а затем подключившись к вашему сайту по FTP скопировать этот пустой файл index.html во все папки, по умолчанию не файлов index .
Теперь, если кто-то наберет в адресной строке путь до такой папки вашего сайта, то он увидит пустую белую страницу и все. Хотя, конечно же, вместо пустого файла index.html , можно создать осмысленный файл index.html , помогающий пользователю сориентироваться на вашем сайте (вроде правильной страницы ошибки 404).
Кстати, в папках с дистрибутивом Joomla, которые по умолчанию не должны иметь файлов index , принудительно уже добавлен пустой файл index.html . Все это сделано для повышения безопасности работы сайтов на базе Joomla. Но данный способ очень трудозатратный, ибо папок не содержащих файлов index.html или index.php у вашего сайта может быть несколько сотен. Поэтому можно воспользоваться альтернативным способом.
Запрещаем просмотр директорий своего сайта (листинг) через браузер с помощью настройки файла .htaccess
Есть такой файл, предназначенный для дополнительной конфигурации сервера Apache (большинство хостингов работают под управлением Apache), который названием .htaccess. Да, да, именно так, с точкой перед названием и без расширения. Специфика линукса, однако. Так вот, этот файл скорей всего уже есть у вас в корневой папке сайта.
Вам нужно будет подключиться к вашему сайту по FTP и открыть корневую папку вашего сайта (обычно это либо папка public_html , либо папка htdocs ). Нашли файл .htaccess ? Если нет, то попробуйте выбрать из верхнего меню FileZilla пункт «Сервер»-"Принудительно отображать скрытые папки".
По-прежнему не видите файла .htaccess ? Ничего страшного, вы можете сами создать этот файл. Для этого вам нужно будет в текстовом редакторе сохранить пустую страницу, дав ей название .htaccess , а затем подключившись к вашему сайту по FTP, скопировать этот пустой файл .htaccess в корневую папку вашего ресурса. Все, теперь у вас есть файл .htaccess , поздравляю. Правда, он будет пустой, но это поправимо.
Для запрещения просмотра через браузер содержимого директорий, в которых нет файлов index.html или index.php , вам нужно будет прописать (или дописать, если ваш файл .htaccess не пустой) всего лишь одну сточку:
Все, теперь просмотр содержимого директорий вашего сайта через браузер будет запрещен. Собственно, этого мы и добивались.
Создаем простейший макет сайта в 2 колонки на основе блочной верстки (DIV верстки)
Вернемся к нашему макету сайта на основе блочной Div верстки, который в самом простом варианте будет состоять всего из двух файлов —index.html и style.css . Эти файлы вы можете положить, например, в любую созданную специально для этого папку на севере вашего хостинга. Допустим, что вы создадите в корневой папке вашего хостинга папку TEST, в которую положите файлы нашего макета в 2 колонки index.html и style.css .
Тогда, при обращению через браузер к папке TEST (в случае моего сайта для этого нужно будет набрать в адресной строке браузера http://ktonanovenkogo.ru/test ), запустится файл index.html . Но браузер так же осуществит подгрузку файла style.css , т.к. мы пропишем в файле index.html путь до файла стилевого оформления style.css . Ну, а теперь давайте рассмотрим все это подробно на конкретных примерах.
Сначала давайте попробуем создать простой макет в 2 колонки на Div верстке, который будет содержать верхнюю часть (шапку или же header), нижнюю часть (подвал или же footer), а так же те самые две колонки, из-за которых такой макет и называется 2 колоночным — это область для основного содержимого страницы (content) и область левой колонки макета на Div-ах (left), в которой обычно располагаются элементы, облегчающие навигацию по сайту (меню и тому подобные вещи), реклама и многое другое.
В схематичном виде 2 колоночный макет на основе Div верстки будет выглядеть так:
Каждый из элементов 2 колоночного макета мы поместим в свой контейнер DIV, присвоим ему уникальный ID, для которого в файле CSS добавим ряд свойств, описывающих внешний вид и положение данного контейнера на странице. Кроме этого, все контейнеры с элементами 2 колоночного макета мы поместим в один общий DIV контейнер, который позволит нам регулировать положение всего макета на странице (задать ширину макета, выравнивать макет относительно края страницы и т.д.)
Базовые элементы структуры любого HTML кода
Для начала вам нужно будет создать и сохранить в текстовом редакторе Notepad++ или же в специализированном веб-редакторе (Dreamweaver) два пустых файла index.html и style.css . Начнем, естественно, с написания HTML кода в файле index.html . Вы уже, наверное, знаете, что в любом HTML файле присутствуют исходные обязательные элементы, которые выглядят примерно так:
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
<title>Базовые элементы структуры любого HTML кода</title>
</head>
<body>
</body>
</html>
|
Как не печально, но на страницах данного блога я еще не успел рассказать об основах построения HTML документов, поэтому придется отвлечься и вкратце пробежаться по элементам этого обязательного кода в файлах HTML:
- строка !DOCTYPE служит для указания типа данного документа HTML (бюрократия в действии). Эти строки будут разными для разных версий HTML. Сейчас используется в основном версия HTML 4.01, но и для этой версии возможно несколько вариантов строки !DOCTYPE:
- Строгий HTML 4.01
1
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
|
При выборе этого варианта вам придется строго следить за соответствием вашего HTML кода спецификациям, в противном случае, вы увидите на странице браузера не совсем то, что планировали
- Переходный HTML 4.01
1
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
|
Это вариант строки !DOCTYPE является более демократичным и лояльным к ошибкам вебмастера, он попытается понять, что вы хотели сделать и не будет учитывать огрехи в коде HTML, поэтому переходный вариант HTML 4.01 использовать предпочтительней
- Открывающий тег HTML (
<html> ) ставится всегда в начале HTML документа, сразу после строки !DOCTYPE. Закрывающий тег HTML (</html> )ставится в самом конце HTML файла. Он как бы заключает в себя весь HTML код файла.
- Весь HTML код документа внутри открывающего и закрывающего тегов HTML (
<html> и </html> ) разбивается еще на две группы, заключенные в открывающие и закрывающие теги HEAD и BODY:
- Сразу после открывающего тега HTML ставится открывающий тег HEAD (
<head> ), затем может идти текст или же специальные теги, с помощью которых формируется, так называемый, заголовок HTML документа. В конце обязательно ставится закрывающий тег HEAD (</head> ). Что примечательно, содержимое тега HEAD не отображается непосредственно на странице в браузере.
- строка
1
|
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
|
, заключенная между открывающим и закрывающим тегом HEAD, позволяет подсказать браузеру, в какой именно кодировке русского языка сохранен этот HTML файл. В нашем случае указана кодировка UTF-8, но так же довольно распространенной является еще и кодировка Windows-1251. Вообще, с помощью тегов META (мета тегов) в заголовке HTML документа (между открывающим (<head> ) и закрывающим (</head> ) тегами HEAD) кроме кодировки русского языка обычно еще добавляют ключевые слова документа (keywords), например:
1
|
<meta name= "keywords" content= "блочная верстка, div верстка" >
|
или описание документа (description), например:
1
|
<meta name= "description" content= "Основы блочной верстки (DIV верстки) - Как работают сайты, повышение безопасности нашего сайта, структура HTML кода, создание простого двух-колоночного макета на дивах" >
|
и многое другое.
- строка
1
|
<title>Базовые элементы структуры любого HTML кода</title>
|
определяет заголовок страницы (TITLE) , создаваемой с помощью этого HTML документа. Вы можете видеть содержимое тега TITLE в самом верху окна вашего браузера. Содержимое этого тега TITLE имеет очень большое значение для поисковых систем. Это самый весомый критерий в распределении страниц различных сайтов в поисковой выдаче (подробнее читайте об этом в статье — Внутренняя оптимизация сайта. Обращайте на содержимое тега TITLE особое внимание. О том, как настроить правильное формирование тега TITLE для сайтов на Joomla и WordPress вы можете почитать здесь —
- Оптимальная настройка вида мета-тега Title для сайта на Joomla
- Настройка TITLE (заголовка) для всех страниц вашего сайта на Joomla с помощью плагина ARTIO JoomSEF
- Настройка внешнего вида заголовков всех страниц (мета-тег TITLE) в плагине All in One SEO Pack для блога на WordPress
- Сразу после закрывающего тега HEAD (т.е. сразу после заголовка HTML документа) следует открывающий тег BODY (
<body> ). Внутри этого тега BODY должна располагаться вся содержательная часть HTML документа, которая будет в явной форме отображаться на веб страницах в браузере. Здесь допускается использование любых возможных HTML тегов, которые будут интерпретироваться браузером в видимые элементы веб страницы. В самом конце HTML документа, но перед закрывающим тегом HTML (</html> ), должен будет обязательно стоять закрывающий тег BODY (</body> ).
Думаю, что общую структуру HTML документа хорошо визуализирует следующий рисунок: Ну, вот пришлось очень существенно отвлекаться на объяснения важных моментов, встреченных в ходе начала рассказа о блочной верстке (DIV верстки), да так, что в этой статье места на рассказ о создании 2 колоночного макета на дивах (DIV) уже и не осталось места.
|