Знакомство с HTML, структура кода шаблона.

Опубликовано: 2019-03-19
Рубрика: Статьи
Редактировалось: 1 раз — 31 марта 2016
Просмотров: 2143
Настроение: как всегда
Играет: телевизор что-то бормочет
+6
: 6
Решил написать эту статью в связи с тем, что некоторые пользователи программы пасуют перед редактированием шаблонов в ручную, считая, что раз он написан программой то там ничего редактировать нельзя. Это далеко не так, программа выдает достаточно разборчивый и удобно редактируемый код. Все шаблоны независимо от CMS для которой предназначены в том числе и простые страницы сделанные и экспортированные из программы имеют обычную структуру HTML документа:
Код PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. < ссылки на скрипты и стили >
  6. </head>
  7. <body>
  8. < содержание страницы >
  9. </body>
  10. </html>
То есть между тегами <head></head> вся техническая информация страницы для браузера, поисковых систем, и пр. А между тегами <body></body> вся информация для пользователей соответственно оформленная.
Разберем структуру готовой страницы сделанной в артистире. Для редактирования нам понадобятся редакторы Notepad++ и Dreamweaver (я пользуюсь для всех редактирований только ими) причем Dreamweaver я использую редко ввиду его громоздкости, но в нем есть очень удобная вещь, такая как форматирование кода. Вкладка команды --> исходное форматирование. Нужно часто для того чтобы выровнять код после многочисленных исправлений руками. А после выравнивания уже легче в Notepad++ понять где открывающий тег а где закрывающий, соответственно если есть ошибки или не закрыитые теги то легче их найти.Так как он имеет подсветку закрывающих тегов. Пример:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

То есть ясно видно какой закрывающий тег div соответствует открывающему <div class="art-header">.
Теперь разберем непосредственно структуру с генерированных страниц из шаблона. Для лучшего понимания я удалил все дубликаты модулей и оставил по одному в каждой позиции. У меня получилось следующее:

Спойлер
Предварительно я отформатировал код в Dreamweaver (способом как писал выше) и теперь в Notepad++ мы легко можем отследить сформированные Artisteer блоки. Во первых страница начинается как обычно с открывающего и закрывающего тега head:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Между ними техническая информация:

1. Кодировка страницы:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
2. Название страницы:

<title>New Page</title>
3. Ссылки на стили css:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->
4. Ссылки на скрипты и библиотеки:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
Дальше идет содержимое непосредственно нашей страницы в теге body

1. Сама страница, за её вывод в Artisteer отвечает класс art-sheet и вложенный класс art-sheet-body:

<div class="art-box art-sheet">
<div class="art-box-body art-sheet-body">
В которых <div class="art-box art-sheet"> отвечает за положение страницы в документе, а <div class="art-box-body art-sheet-body"> задает параметры содержания страницы.

2. Дальше идут классы header, то есть вывод нашей шапки страницы:

<div class="art-header">
В него вкладывается все, что мы хотим разместить в шапке сайта, например:

<div class="art-logo">
Который отвечает за вывод логотипа, или если мы добавим дополнительную позицию в шаблон например для баннера. Здесь следует обратить внимание если мы добавляем еще, что то это должно быть оформлено отдельным блоком например:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

То есть имеем открывающий и закрывающий тег <div class="art-header">, а между ними отдельные блоки для <div class="art-logo"> (открывающий и закрыващий) и отдельно <div class="art-header-object"> (так же открывающий и закрывающий).

3. Горизонтальное меню <div class="art-bar art-nav"> в него вложен дополнительный класс <div class="art-nav-outer"> и непосредственно класс отвечающий за структуру меню <ul class="art-hmenu">:

<div class="art-bar art-nav">
<div class="art-nav-outer">
<ul class="art-hmenu">

4. Содержимое макета страницы <div class="art-layout-wrapper"> и вспомогательные классы:

<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
Они отвечают за параметры внутренних элементов страницы и их положения art-sidebar1, art-sidebar2 и art-content.

5. Классы <div class="art-layout-cell art-sidebar1"> и <div class="art-layout-cell art-sidebar2"> левая и правая колонка шаблона соответственно. В <div class="art-layout-cell art-sidebar1"> находятся блоки и модули.

6. Класс <div class="art-box art-vmenublock"> отвечает за вывод вертикального меню а дополнительный <div class="art-box-body art-vmenublock-body"> за его содержание. Так же сюда отдельно входят дополнительные блоки содержащие параметры вывода названия блока (и его оформления:

<div class="art-bar art-vmenublockheader">
И содержимое самого блока (параметры и оформление)

<div class="art-box art-vmenublockcontent">
<div class="art-box-body art-vmenublockcontent-body">

То же самое относится и к простым блокам (модулей) шаблона:

<div class="art-box art-block">
<div class="art-box-body art-block-body">
<div class="art-bar art-blockheader">
<h3 class="t">Главное меню</h3>
</div>
<div class="art-box art-blockcontent">
<div class="art-box-body art-blockcontent-body">

7. За параметры содержимого в центре страницы отвечает класс <div class="art-layout-cell art-content"> внутри него расположен непосредственно контент страницы, а именно содержание оформлением которого занимаются классы:

<div class="art-box art-post">
<div class="art-box-body art-post-body">
Сюда еще включено множество дополнительных классов отвечайщих за вывод содержимого так как мы задумывали в программе.

8. Ну и последнее это содержимое так называемого подвала страницы (footer) за него отвечают классы:

<div class="art-footer">
<div class="art-footer-body">
Здесь так же можно расположить дополнительные модули по такому же принципу как и в header.

Ну вот примерно и все по структуре страницы Artisteer. Надеюсь эта статья поможет Вам лучше ориентироваться при редактировании шаблонов. В заключении хотелось бы добавить, что если Вы откроете страницы index.php Ваших сделанных шаблонов для Joomla, WordPress, и пр. в Notepad++ то без труда увидите, что структура описанная выше есть и в них единственное отличие, что часть кода вынесена в другие файлы и заменена вставками php кода.
Комментарии (8)
gradus #
: 0
Весьма полезная статья ,жаль что я ее раньше не обнаружил .
Overin #
: 0
Ищущие да обрящат
fortunat #
: 0
У Artisteer 4.3 есть отличия по этому коду. Статья полезная. Тоже интересовался устройством страницы в Artisteer. Оказалось все довольно просто.
Городовой #
: 0
Полезная информация. Интересует насколько актуальна для artisteer 4.3?
skaz #
: 0
В статье описан принцип и некоторые способы работы со страницей. Они одинаковы для любых HTML документов. Что касается версии Artisteer, названия немного модифицируются, но основа сохраняется.
ked #
: 0
Хорошо бы и по CSS в артистире такую же статью чтобы написали. smile
Max_fom #
: 0
Полезная инфа. Не плохо бы было если подобное было написано для Themler
samson #
: 0
Это общая структура HTML страницы, похожие элементы есть везде. Позже напишу несколько адаптированных под Темлер статей.

Случайное из блогов

samson
Так как многих давно интересовало как сделать суффиксы модулей для Джумла в Artisteer 4.1-4.2 то выкладываю...
7 - +11
samson
Публикую несколько бесплатных онлайн сервисов необходимых в работе, которые помогут мастерам протестировать...
2 - +6
samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9
artnikov
Доброго здоровья. В интернете МИЛЛИОН статей на тему, как вывести сайт за кратчайший срок в ТОП 3 или ТОП...
11 - +7
samson
Всем известны сервисы по сбору статистики от Google, Яндекс и Liveinternet. Предлагаю свой альтернативный...
6 - +9