В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.
Примечание: папку также часто называют директорией или каталогом.
Структура сайта
Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить HTML документы , изображения и другие ресурсы в разные папки, создав тем самым определенную структуру расположения различных файлов. Структурируя файлы как вам удобно, вы можете выбрать для себя достаточно гибкую систему организации файлов, учитывая то, что сайт может расти, система файлов при этом будет оставаться ясной и понятной. Структуру (иерархию) каталогов, в которых располагаются различные файлы, обычно можно увидеть в виде древа. Рассмотрим в качестве примера следующее изображение.
Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".
Чтобы вам лучше запомнить, опишем термины отдельно:
- Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
- Родительский каталог - это папка, содержащая другой каталог.
- Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.
Структура элементов
Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:
Схему, показывающую вложенность элементов, можно представить следующим образом:
- Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком .
- Родственный элемент
- это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими
, в примере такими элементами являются и ,
и <style> .</li> <li><span>Корневой элемент </span> - самый верхний элемент в иерархии (<html>), все другие элементы являются его потомками.</li> <li><span>Родительский элемент </span> - это элемент, который содержит другой элемент. Иногда его называют просто родитель .</li> <li>Потомок может являться непосредственно <a href="/tehniki-raboty-s-dom-roditelskie-dochernie-i-sosednie-elementy-tehniki.html">дочерним элементом</a>, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.</li> </ul> <p>В данной статье опишу только самые необходимые папки и файлы шаблона Joomla 1.5, но планирую в дальнейшем (по мере возможности и времени) дополнять статью дополнительными описаниями.</p> <h3>Где находятся файлы шаблонов Joomla 1.5</h3> <p>Место положение папок и файлов шаблона на Вашем хостинге или сервере определить легко. Все шаблоны располагаются в <a href="/ona-ne-udalyaetsya-kak-udalit-papku-esli-ona-ne-udalyaetsya-kak.html">специальной папке</a> <b>/templates </b> . Которая, в свою очередь, расположена в корневой папке Joomla.</p> <p>Откройте папку <b>/templates </b> . Там по умолчанию находятся папки с шаблонами: beez, ja_purity, rhuk_milkyway, system. К рассмотрению содержимого последней папки <b>system </b> я вернусь в одной из последующих статей. А пока рассмотрим содержимое папки шаблона rhuk_milkyway.</p> <h3>Список папок и файлов шаблона rhuk_milkyway</h3> <p><b>Папки: </b> <br> 1. css<br> 2. html<br> 3. images</p><p><b>Файлы: </b> <br> 1. favicon.ico<br> 2. index.html<br> 3. index.php<br> 4. params.ini<br> 5. templateDetails.xml<br> 6. template_thumbnail.png</p> <h3>Папка №1. CSS</h3> <p>В папке css содержатся файлы стилей шаблона. Здесь вы можете создавать сколько угодно файлов <a href="/dinamicheskii-stil---upravlenie-css-s-pomoshchyu-javascript-izmenenie.html">стилей css</a> (если это необходимо). Конкретно в рассматриваемом шаблоне они называются: black.css, black_bg.css, blue.css, blue_bg.css, green.css, green_bg.css, ieonly.css, orange.css, orange_bg.css, red.css, red_bg.css, template.css, template_rtl.css, white.css, white_bg.css.</p> <p>Много правда? В данном случае количество стилей обусловлено тем, что предусмотрена возможность менять <a href="/chem-otlichit-aifon-5-ot-5s-kak-vizualno-otlichit-raznye-modeli-aifonov-cvetovye.html">цветовую схему</a> шаблона. Я обычно использую только один файл. Т.к. делая шаблон для себя не вижу смысла в таком многообразии цветовых схем.</p> <h3>Папка №2. HTML</h3> <p>Т.к. в Joomla все расширения имеют готовый для вывода <a href="/kak-sdelat-validnyi-kod-html-onlain-proverka-dannyh-na-validnost-analiz.html">html код</a> с необходимой разметкой и собственными стилями, разработчики предусмотрели возможность изменить его не исправляя файлы самих расширений. Это необходимо для того, что бы при обновлении Joomla или ее расширений внесенные изменения не были потеряны. Для этого достаточно скопировать <a href="/how-to-find-the-file-in-windows-10.html">нужный файл</a> в папку html и поправить его так как это необходимо Вам. Я сейчас не буду описывать подробно как это делается правильно, потому что статья не об этом:), но обязательно опишу в одной из следующих статей.</p> <h3>Папка №3. IMAGES</h3> <p>Здесь хранятся изображения шаблона.</p> <h3>Файл №1. favicon.ico</h3> <p>Это изображение размером 16х16 пикселей, которое является иконкой сайта. Отображается иконка во вкладке браузера и в некоторых <a href="/istoriya-razvitiya-poiskovyh-sistem-poiskovye-sistemy-rossii-kakaya.html">поисковых системах</a> на против Вашего сайта в выдаче по релевантным поисковым запросам.</p> <h3>Файл №2. index.html</h3> <h3>Файл №3. index.php</h3> <p>Файл предназначен для html разметки шаблона. Здесь прописывается: где будут размещаться модули, где будет выводиться содержимое компонентов, какие файлы стилей будут подключены к шаблону, условия вывода модулей. С этим файлом придется работать больше остальных, потому что это не что иное как каркас и основа шаблона.</p> <h3>Файл №4. params.ini</h3> <p>Файл params.ini необходим для сохранения настроек Вашего шаблона. Он обязательно должен присутствовать в шаблоне с правами на запись 777.</p> <h3>Файл №5. templateDetails.xml</h3> <p>Файл templateDetails.xml несет в себе несколько <a href="/kak-vosstanovit-udalennyi-vatsap-poleznye-funkcii-whatsapp-kak.html">полезных функции</a>: используется для установки шаблона через админку Joomla; Содержит информацию о названии шаблона, авторе, дате создания, версии, лицензии и т.д.; Параметры шаблона.</p> <h3>Файл №6. template_thumbnail.png</h3> <p>Файл (изображение) показывает как выглядит шаблон. Необходимо для того что бы при распространении можно было быстро посмотреть что из себя представляет шаблон, е устанавливая его на сайт. А если он уже установлен, то он выполняет ту же функцию но из админки.</p> <p>Которые мы сейчас и рассмотрим по порядку.</p> <p>Как я уже говорил раньше, css призван оформлять html конструкции, то есть придавать им вид, цвет, размер, расположение, и так далее, а значит непосредственно воздействовать на html код.</p> <p>Для обеспечения этого воздействия, выполняется подключение css к html документу.</p> <p>Первый способ подключения css — cвязанные стили </span>. Применяется тогда, когда таблица стилей пишется в отдельном файле.</p> <p>В этом случае, файл style.css с таблицей стилей, подключается к html файлу в теге head, при помощи тега link</p> <p><!DOCTYPE html><br> <html lang ="ru "><br> <head ><br> <meta charset ="utf-8 " /><br><<span>link href ="css/style.css " type ="text/css " rel ="stylesheet "> </span><br> <title >Документ без названия
link — это одиночный тег;
href – знакомый нам атрибут ссылок, css/stile.css – значение указывающее путь к файлу, и название файла;
type – атрибут указывающий тип подключаемого элемента, в нашем случае это text/css ;
rel – атрибут определяющий взаимосвязь, и в значении его обычно пишется stylesheet (таблицы стилей);
В этом коде обычно меняется только значение style.css (название подключаемой таблицы). Таблицы подключены.
Теперь браузер будет отображать html файл в том виде, который для него будет прописан в файле style.css .
Кстати, на будущее. К одному html файлу можно подключать сколько угодно таблиц стилей. Все они подключаются в тег head .
И, что применяется гораздо чаще, наоборот, одну таблицу можно подключить к множеству html файлов.
Это наиболее предпочтительный способ подключения таблиц стилей, так все они находятся в одном файле и поэтому легче определяются.
А так же, если придётся изменять стиль нескольких однотипных элементов, то гораздо легче будет это сделать если они собраны в одном групповом селекторе.
Дело в том, что одной из задач веб-мастера является уменьшение объёма кода, при неизменном конечном результате, и отдельный файл style.css наиболее полно отвечает этому требованию.
Только представьте, чтобы написать заголовок к статье, нужно задать ему размер, цвет, шрифт и, возможно, что то ещё из стилей. И так для каждого поста.
В файле style.css можно будет задать стили один раз, но для всех заголовков постов сайта.
Теперь понимаете разницу?
Тем не менее и остальные способы подключения стилей имеют право на существование, так что давайте рассмотрим их, и ситуации, в которых они применяются.
Второй способ подключения css- глобальные стили позволяет подключать(располагать) таблицу стилей непосредственно в html файле.
Делается это при помощи тега style , и прописывается он так-же, как и в первом случае в теге head .
Документ без названия
Как видите, таблица стилей расположена прямо в html файле. Всё это работает так-же, как и при первом способе подключения, но применяется реже, из за громоздкости, и главное, из-за невозможности воздействия стилей на несколько файлов.
Когда его применять? Я, например использую этот способ при создании дизайна в редакторе файлов.
Гораздо проще отлаживать документ, если и html и css находятся на одной странице и можно быстро подправить и то, и другое.
Третий способ подключения css — внутренние стили позволяет прописывать стили прямо внутри html тега.
Реализуется он при помощи атрибута style , который не стоит путать с одноимённым тегом.
Применяется он тогда, когда нужно оформить только один элемент контента.
Для примера возьмём кусочек текста, и зададим ему стили, заключив в тег span
Всем привет, друзья. Сегодня отвечу на простейший вопрос: “как подключить таблицу стилей css к html-страничке?”
Видео-версия статьи:Для этого в содержимое тега нужно вставить следующую строку:
Поясняю: Тег link позволяет подключать к странице внешние файлы. Атрибут rel = “stylesheet” дает инструкции, что подключаемым файлом является именно таблица стилей. Href – это путь к файлу стилей. Как правило его значение “style.css” если таблица стилей называется именно так и лежит в одной папке с html-страничкой, для которой она подключается.
Как прописать путь к файлу
Соответственно, если css-файл лежит где-то в другом месте, то путь к нему прописывается по другому. Примеры, чтобы вам было понятней:
Файл table.css лежит в папке styles , которая находится в той же папке, что и html-страница: href = “styles/table.css”
Файл fonts.css лежит в папке styles , которая находится в папке css , а та в свою очередь находится там, где и html-страница: href = “styles/css/fonts.css”Две точки позволяют в указании пути вернуться назад от изначального места (от места, где находится наша html-страничка). Так что дотянуться можно так:
Href = “../style.css” – файл лежит на один уровень выше html-файла.
Href = “../../style.css” – на два уровня выше.
Href = “../../../css/style.css” – на три уровня выше + сам файл стилей лежит еще и в папке css.
Надеюсь, этих простых примеров вам понятно, чтобы полностью разобраться с тем, как задать путь к файлу.Устаревший атрибут
Раньше при подключении таблицы стилей нужно было также указывать в теге link атрибут type = “text/css” , но сегодня это уже не является обязательным требованием – браузеры и так прекрасно все понимают. Впрочем, для полноценной поддержки в старых браузерах можно перестраховаться и все же дописать его.
Продолжаем тему прошлого урока, где мы немного попытались понять, что же такое CSS. Прежде всего, нам необходимо создать файл со стилями, и сохранить его рядом с нашим файлам HTML. Но поскольку, в процессе создания сайта файлов, с расширением CSS может быть несколько, то лучше создать, для них отдельную папку. И так открываем ту папку, где хранится наш файл index.html, в открытой папке создаём папку и называем её «CSS», так нам легче будет понять, что здесь хранится. Далее открываем редактор «Notepad++» Файл > Новый, и сохраняем документ под именем «STYLE» с расширением «CSS», то есть должно получиться вот так, style.css. И у нас появляется две папки и один индексный файл.
Рисунок № 1.
Подключаем CSS к HTML.
Для того что бы наш фай style.css смог взаимодействовать с файлом index.html, необходимо меду тегами «HEAD» разместить, код вот такой строки:
Первым что мы видим это тег который переводится как «канал связи», то есть мы говорим браузеру сейчас будет произведено подключение документа, далее атрибут rel (relation- отношение) и stylesheet (стилям). То есть данный канал связи имеет отношения к стилям. Затем «type», то есть тип документа "text/css" и завершающим ответственным этапом здесь является сама ссылка на подключаемый файл, href="css/style.css", где указываем имя созданной папки со стилями и сам стилевой файл.
Рисунок № 2.
Переносим стили с HTML в CSS.
На предыдущих занятиях, мы с вами практически создали стили, на всей нашей странички HTML. Теперь эти готовые стили нам необходимо перенести в файл style.css, и начнём с тега BODY, где у нас указан фон нашего шаблона. В файле CSS пишем следующее body{}, где BODY является селектором тегов, а фигурные скобки это то место где будут размещаться стилевые правила для данного тега. Теперь в файле index.html, где после тега BODY идёт атрибут style, копируем всё то содержимое что идёт между двойных кавычек и вставляем в css. Немного подровняв, должно получиться вот так:
Body{ background-image: url("images/fon.jpg"); background-attachment: fixed; }
В файле index.html удаляем лишний код в теги BODY, что бы он остался вот таким чистым
, как будто мы его только создали. Сохраняем изменения в документе и идём к просмотру в браузере. Если всё сделали правильно, то фон нашей страницы должен исчезнуть, произошло это, потому что браузер не может найти путь к изображению. Давайте найдём причину ошибки. Обратите внимание на верхний код, браузер заходит и читает, что фон должен быть изображением, далее url, то есть путь и он видит. Что в папке, в которую он вошёл, должна быть папка images и в ней файл fon.jpg, вроде всё правильно. Но всё дело в том, что браузер вошёл в папку CSS а в этой директории у нас нет никакой папки images и мы должны сказать браузеру начинай поиск с корневой папки, то есть основной. Для этого следует указать браузеру отступ на один шаг назад, вот таким образом (../) две точки, и косой слеш. Если бы наш файл style.css находился ещё глубже на одну папку то пришлось бы указать возврат на две директории, то есть продублировать (../../). В общем, постарайтесь это понять и запомнить, чтобы отличать пути для файлов и документов, как прямые и вложенные. В данном случае файл style.css вложенный и не может иметь прямых путей, для документов.Body{ background-image: url("../images/fon.jpg"); background-attachment: fixed; }
После исправления этого пути, всё должно заработать и наш фон появится. На этом я предлагаю закончить данный урок, а вы в качестве домашнего задания протестируйте, моменты вложенности папок и пути к файлам. То есть создайте ещё одну папку, например с именем «STYLES» вложите туда папку «CSS» вместе с документом style.css и задайте правильный путь к изображению, что бы всё заработало.
А я жду вас в следующем уроке «Простая вёрстка в HTML + CSS. Урок №11», где мы займёмся переносом всех оставшихся стилей и сравним разницу и преимущество «CSS», при его использование.
