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

Опубликовано: 2019-11-18
Рубрика: Статьи
Редактировалось: 1 раз — 31 марта 2016
Просмотров: 2489
Настроение: как всегда
Играет: телевизор что-то бормочет
+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 страницы, похожие элементы есть везде. Позже напишу несколько адаптированных под Темлер статей.

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

skaz
Как подключить к Joomla не стандартный слайдер новостей, слайд шоу картинок. В интернете очень много...
9 - +6
samson
Joomla выходит все новыми релизами, и часто возникают вопросы, на какой делать сайт, графики ниже выхода...
4 - +9
artnikov
Доброго всем здоровья! С наступившим ВАС и с наступающими... При переводе файлов админки WP, я как-то...
4 - +13
samson
Всем известны сервисы по сбору статистики от Google, Яндекс и Liveinternet. Предлагаю свой альтернативный...
6 - +9
artnikov
Пока "есть еще" время, продолжу, с вашего разрешения... Данная тема посвещена-измененнию логина ADMIN,...
1 - +6