От чего зависит внешний вид сайта?
Итак, вы загрузили на сайт основные материалы, создали главное меню, настроили модуль авторизации. Теперь пришло время "навести красоту" на сайте, т.е. начать его оформление. Почему именно сейчас? Потому, что при создании каждого последующего элемента (модуля, компонента) лучше сразу настраивать его внешний вид, чем потом повторно к этому возвращаться.
От чего зависит внешний вид сайта?
За то, как выглядят все элементы сайта, а так же в какой-то степени за их расположение "отвечают" CSS - каскадные таблицы стилей. При создании кода страницы система подключает файлы CSS и браузер получает из этих таблиц все необходимые данные.
Как это работает?
Что бы посмотреть код загруженной страницы вашего сайта нажмите сочетание клавиш Ctrl + U; при этом у вас откроется новая вкладка с загруженным кодом:
Здесь вы увидите такие строки (вместо "wds" будет название папки с вашим сайтом):
17 <link href="http://wds//templates/wds_template_v1/css/stl_tpl_wds_v1.css" rel="stylesheet" type="text/css" />
18 <link href="http://wds//templates/wds_template_v1/css/main_menu.css" rel="stylesheet" type="text/css" />
19 <link href="http://wds//templates/system/css/system.css" rel="stylesheet" type="text/css" />
В этом коде тег <link> подключает, т.е. загружает на компьютер (в специальную папку) файлы таблиц CSS, из которых браузер получает всю необходимую информацию для построения внешнего вида страницы.
Зачем всё это вынесено в отдельные таблицы, почему нельзя просто прописать данные в коде страниц? Для этого есть несколько серьёзных причин.
Причина 1. Дело в том, что код страницы в том виде, в котором его получает браузер, на сайте просто не существует!!! На самом деле такой код создаётся довольно не простым способом из различных фрагментов кода, содержащегося в файлах установленного шаблона, модулей, компонентов и т.д., то есть "собирается по частям". Это удобно тем, что вам не нужно переписывать для каждой страницы одни и те же фрагменты, достаточно прописать их один раз. Представьте себе, что на вашем сайте 100 страниц, на каждой из которой находится одно и тоже меню, несколько одних и тех же модулей и других одинаковых элементов. Вам пришлось бы переписывать огромное количество абсолютно одинакового кода для каждой страницы! Мало того, что это заняло бы огромное количество времени, так ещё и ваш сайт разросся бы до огромных размеров и "весил" бы очень много гигабайт...
Причина 2: удобство изменения кода. Что бы изменить какую-то определённую часть кода, касающуюся настроек внешнего вида, достаточно просто внести изменения в файл CSS; при этом эти изменения коснуться всех необходимых элементов. Если бы такой код был прописан для каждой страницы отдельно, то представьте, сколько бы ушло времени на внесение таких изменений!!!
Причина 3: удобство чтения и редактирования кода в отдельном файле. Намного удобнее читать код, "разбитый" на части по файлам. Например, один файл CSS "отвечает" за модули и контент, другой за главное меню, третий за страничку ошибки 404 и т.д., а вот за построение основного кода страницы (который можно просмотреть при помощи сочетания клавиш Ctrl + U) "отвечает" файл index.php, расположенный в установленном по умолчанию шаблоне.
Если сказать коротко, буквально "в двух словах", общий принцип построения страницы такой: файл index.php установленного шаблона вначале подключает все необходимые файлы - CSS (.css), JavaScript (.js), затем создаёт все необходимые элементы и модульные позиции. После создания код загружается на компьютер пользователя и браузер начинает его выполнять, по ходу подгружая в специальную папку все указанные в коде файлы каскадных таблиц стилей, скриптов, изображений и т.д.; при этом браузер создаёт все необходимые элементы, оформляя их в соответствии с данными файлов CSS.
Вы можете просмотреть все загруженные браузером файлы для любой страницы. Для этого в Я.браузере нажмите сочетание клавиш Ctrl + S; при этом откроется стандартное окно Windows, предлагающее выбрать место для загрузки и имя файла. После загрузки вы сможете просмотреть в созданной папке все файлы, "участвующие" в создании страницы на экране.
