Блог
Карта
FAQ

Верстка страниц

Верстка это процесс создания WEB-страниц. Создавать страницы Вы будете самостоятельно, т.к. то, что сделано собственными руками, лучше чем купленное или ворованное. Не зря же говорят - "Нет подарков лучше, чем подарки, сделанные своими руками".
Для создания страниц могут использоваться редакторы двух типов: WYSIWYG и текстовые.
Если Вы еще совсем не дружите с HTML, то использовать текстовый редактор рано. Можно создавать страницы редакторами WYSIWYG, в которых пользователю необходимо только разместить, желаемым образом, объекты на странице. В качестве такого редактора можно использовать Microsoft Word, входящий в состав пакет Microsoft Office.

Рассматривать верстку страницы WYSIWYG-редакторами я не буду, т.к. всю работу выполняет сам редактор, он автоматически генерирует код веб-страницы. Нам же, необходимо знать весь процесс создания страниц сайта, поэтому в качестве программы для создания WEB-страниц будем пользоваться текстовыми редакторами.
Текстовым редактором может быть стандартный Блокнот, но я предпочитаю другую программу, полностью заменяюшую блокнот - Notepad++.

Notepad++ отличная замена блокноту

Основные теги

Теги это элементы разметки веб-страницы, о которых Вы должны были узнать из первой статьи.

<html> </html> - определяет начало и конец страницы, обязателен. Между ними содержится весь код страницы. <head> </head> - отвечает за информативную сторону страницы. <title> </title> - заголовок, который отображается в верху окна. <body> </body > - между этими тегами содержится весь видимый контент страницы. <table> <tr> <td> - теги для создания таблиц. <ul> ... </ul> \ <p>...</p> }- теги для работы с текстовым содержимым страницы. <li>...</li> / <div></div></b> - логический блок, используется при блочной верстке. <img> - вставляет изображение. <a href="#"> ссылка </a> - добавляет ссылку на страницу, вместо решетки указывается ссылка.

Любая страница имеет расширение html. Поэтому мы должны видеть какое расширение имеет тот или иной файл, для этого откройте "Мой компьютер" выберите в меню "Сервис" - "Свойства папки", в открывшемся окне перейти во вкладку "Вид" и снять галочку напротив "Скрывать расширения для зарегистрированных типов файлов".

К имени файла приписывается расширение

Теперь все приготовления окончены и можно создавать веб-страницу.
Для начала нужно создать файл с расширением html, для этого, на пустом месте рабочего стола или папки, щелкните правой кнопкой мыши, выбираете меню "Создать" - "Текстовый документ", дальше меняете название файла на имя.html, имя может быть любым.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - обязательная часть, можно не менять <html> - начало страницы, написанной на языке html <head> - начало информационной части описания <title>Название страницы</title> </head> - конец тега head <body> <br> Здесь должен быть расположен основной код страницы. </body> </html> - окончание страницы.

Только что Вы увидели пример простой страницы. Нужно отметить, что в блоке head, кроме заголовка, может находиться и другая информация, например ключевые слова, описание страницы, авторство, кодировка, ссылки на подключаемые файлы или описание используемых стилей.

В теге body располагается код страницы отвечающий исключительно за видимый контент. Для примера можете скопировать нижеуказанный код и открыть получившийся файл в браузере.

<html> <head> <title>Пример простой страницы</title> </head> <body> <h1 ALIGN=CENTER>Привет мне!</h1> <h2>Это моя страница, которую я сделал выполняя все инструкции сайта</h2> <p>Я умею выравнивать абзац влево, </p> <p ALIGN=CENTER>и по центру</p> <p ALIGN=RIGHT>и по правому краю.</p> </body> </html>

Если у Вас получилось, то пробуйте экспериментировать, добавлять новые элементы на страницу, менять атрибуты уже существующих.
Вобщем если у Вас есть желание научиться делать грамотно и самостоятельно WEB-страницы, то продолжайте изучать HTML, например здесь.

Немного о шаблонах

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

Для решения первого недостатка достаточно сделать html-файл, который будет содержать основную структуру документа без основной части. Для примера можно воспользоваться вот таким шаблоном.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Пример страницы с таблицей №1.</title> </head> <body> <table width="100%" border="1" cellspacing="1" cellpadding="1" bgcolor=""> <tr> <th height="91" colspan=3 align="center" bgcolor="#66FF00"> <strong>Шапка сайта</strong></th> </tr> <tr> <th height="47" colspan=3 align="center" bgcolor="#BCEE68"> <table width="50%" border="2" cellspacing="1" bgcolor="#4876FF"> <tr> <td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td> <td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td> <td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td> <td align="center"><a href="#"><font color="#FFFFFF">меню</font></a></td> </tr> </table> </th> </tr> <tr> <th width="17%" height="498" align="center" bgcolor="#BFEFFF">левый блок</th> <th width="65%" align="center" bgcolor="grey"> <table width="90%" border="2" cellspacing="1" bordercolor="#0000CC"> Здесь будет находиться та часть, что меняется. Все остальные - постоянные части сайта. Меню, инфо-блоки, подвал и шапка сайта. <br> </th> <th width="18%" align="center" bgcolor="#98F5FF">правый блок</th> </tr> <tr> <th height="49" colspan=3 align="center" bgcolor="#1E90FF">Подвал сайта</th> </tr> </table> </body> </html>

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Пример страницы с таблицей №1.</title> </head> <?php include("shablon/top.htm"); // здесь указан путь к файлу отвечающим за шапку сайта include("shablon/left.htm"); // здесь указан путь к файлу отвечающим за левую часть сайта ?> Здесь будет основной код страницы <?php include("shablon/right.htm"); // здесь указан путь к файлу отвечающим за правую часть сайта include("shablon/bottom.htm"); // здесь указан путь к файлу отвечающим за подвал сайта ?>

Как видим, есть четыре файла, которые хранятся в папке "shablon" и отвечают за разные части страницы. Записав в каждый файл код, отвечающий за отображение определенной части страницы, данный шаблон подключает к текущей странице блоки, отображаемые на всех страницах сайта.
Такой подход гораздо удобнее, т.к. при необходимости поменять какую-либо часть сайта, Вам придется поменять ее только в одном файле.

Как вы поняли, данный процесс достаточно сложный и если речь идет о создании серьезного коммерческого проекта, то нужна целая команда специалистов. Но ведь Вы будете создавать пока-что любительский сайт и с ним вы вполне сможете справиться своими силами.
Пусть Вас не пугают сложности, ведь это все делается только для Вас, именно Ваш сайт будет приносить Вам прибыль в будущем.

Рейтинг статьи: 4 Оценили: 6
30.11.2017
Рейтинг@Mail.ru