MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

Шаблоны для новичков. Урок 1. Основы работы с MaxSite CMS. HTML

MaxSite CMS / Создание шаблонов (версии 0.8x)Просмотров: 12671 (174)

Так уж получается, что шаблонов для MaxSite CMS мало. Поэтому, любой, кто решит завести себе сайт, неизбежно столкнется с проблемой создания нового или изменения существующего шаблона. Мои статьи в основном были обращены на верстальщиков и программистов, которым не нужно объяснять элементарные вещи вебмастеринга.

Благодаря небольшому обсуждению (особенно Владимиру Точилину с его дельными советами), я понял (или мне разжевали :) ) что нет смысла больше зазывать (приглашать, просить) спецов, а есть смысл просто научить тех, кто хочет учиться; кто принимает MaxSite CMS и готов на её базе научиться делать шаблоны.

В любом случае новый курс расчитан на полных чайников новичков не только в MaxSite CMS, но и в верстке, и в программировании. Именно по этой причине уроки будут детально расписаны и будет куча объяснялок.

Тест-задание: установить MaxSite CMS

Если вы самостоятельно справились с установкой MaxSite CMS, то нет никаких преград, чтобы осилить и работу с шаблонами. Установка очень простая и всё делается автоматом, нужно только указать некоторые параметры сервера, базы данных и т.п.

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

Считайте, что умение установить MaxSite CMS - является минимальным уровнем подоготовки. :)

Базовые основы работы с MaxSite CMS

Тут я не буду повторяться - нужно научиться работать с админ-панелью. Здесь ничего сложного нет, просто один раз попробовать и дальше уже никаких вопросов не возникнет.

Единственный момент, на который я хочу обратить особое внимание - это обязательное использование невизуального редактора Editor markItUp. В MaxSite CMS по-умолчанию используется визуальный редактор. Достаточно простой, но с присущей для всех визуальных редакторов проблемой - HTML-код форматирования определяется браузером. Поэтому текст, набранный в Опере будет иметь другой HTML-код, чем тот же текст и оформление сделанные в FireFox'е.

Невизуальные редактора не имеют таких проблем, а для оформления текста используется либо HTML-код (что требует некоторых знаний), либо BB-код (простой и эффективный).

Для включения Editor markItUp нужно активировать плагин editor_markitup. Для работы с BB-кодом - плагин bbcode.

Активация плагинов

Всё, получили готовый редактор.

Редактор markItUp

Можно работать.

Что такое HTML

HTML - это язык разметки текста. Браузер знает этот язык и согласно ему отображает форматированный текст, графику и прочее оформление сайта. Нажмите в браузере Ctrl+U (иходный код страницы) и убедитесь, что здесь присутствует обычный текст.

Исходный код HTML-страницы

HTML предназначен для двух вещей:

  • Первая - визуальное офомление сайтов.
  • Вторая - семантическое представление текстов.

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

Что такое HTML-тэги

HTML состоит из тэгов. Тэги разные и предназначены под разные задачи. Например, для того, чтобы выделить текст полужирным используется тэг <B> (от слова bold):

<b>Полужирный текст</b>

Тэги бывают парные и одиночные. Примеры одиночных тэгов:

<br> - принудительный перенос строки
<hr> - горизонтальная линия
<img> - картинка

Примеры парных тэгов:

<p>текст</p> - абзац текста
<blockquote>текст</blockquote> - цитата
<pre>текст</pre> - преформатированный текст

Тэги могут иметь различные атрибуты. Например для указания адреса картинки (IMG) используется атрибут SRC:

<img src="адрес">

В общем все HTML-тэги имеют какой-то из этих вариантов написания:

<тег>
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...</тег>

Сколько всего тэгов. Справочник HTML

Всего в HTML5 (это наш стандарт) более 100 тэгов. Большинство из них вряд ли понадобятся, но иметь какое-то представление всё-таки будет полезным. Приводить все тэги я не буду, просто даю ссылку на русский справочник HTML. Также в Сети можно найти и справочник в виде отдельного файла (как правило chm - справка windows). Но это уже на любителя.

Виды тэгов

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

Поскольку физически HTML - это простой текст, то браузер должен получить в этом тексте управляющие команды - тэги. Поэтому браузер делает некоторые вполне очевидные для нас вещи неочевидными:

  • Переносы в тексте не учитываются
  • Несколько пробелов подряд превращаются в один
  • Табуляция превращается в пробел

То есть, сколько бы мы не жали Enter в html-тексте, браузер упорно будет игнорировать наши попытки.

Единственное исключение - есть некоторые тэги, вроде PRE, которые как раз и предназначены для вывода преформатированного текста: в нем учитываются и переносы, и пробелы, и табуляция.

Что же делать? Правильно! Нужно используя различные тэги, указывать браузеру как мы хотим увидеть наш текст. Скажем для абзацев использовать парный P.

<p>первый абзац</p>
<p>второй абзац</p>
<p>третий абзац</p>
<p>четвертый абзац</p>

В нашем примере тэг P - тэг блочного уровня. Как только браузер встретит его в html-тексте, он начнет вывод с новой строки.

Блочные тэги

Такое же действие имеют все тэги блочного уровня. Наиболее употребительными будут тэги:

  • P - абзац
  • DIV - произвольный (общий) блок
  • BLOCKQUOTE - блок цитаты
  • H1, H2, H3, H4, H5, H6 - заголовки уровня 1-6
  • UL - список (булечкой)
  • OL - нумерованный список
  • TABLE - таблица

Все эти тэги должны иметь обязательный закрывающий тэг.

Строчные тэги

Строчные тэги не создают новой строки. Обычно строчные тэги используются для визуального выделения в тексте. Примеры:

  • B - полужирный текст
  • I - курсив
  • U - подчеркнутый
  • S - зачеркнутый
  • Q - цитата в строке
  • SMALL - уменьшенный размер шрифта
  • BIG - увеличенный размер шрифта
  • SPAN - общий (универсальный) элемент
  • SUB - нижний индекс
  • SUP - верхний индекс

Все эти тэги так же должны иметь закрывающий парный тэг.

Вложенность тэгов

В HTML важно следить за вложенностью парных тэгов. То есть первый открытый тэг должен быть закрыт позже второго вложенного.

Пример неверной вложенности:

<b>текст текст <i>текст</b></i>

Правильный вариант:

<b>текст текст <i>текст</i></b>
Строго говоря, браузер сам исправит эту ошибку без последствий. Однако, нужно стремиться писать валидный HTML-код изначально!

Еще обратите внимание, что HTML-тэги можно указывать как заглавными, так и строчными буквами. Но я рекомендую придерживаться какого-то своего стиля оформления. Я, например, предпочитаю строчные буквы в HTML-коде.

Строчные и блочные тэги одновременно

Очень простое правило: строчные тэги должны находиться внутри блочных. Блочные только внутри других блочных.

Пример неверной вложенности:

<b><p>текст</p></b>

Здесь блочный P находится внутри строчного B.

Правильно:

<p><b>текст</b></p>

Практика!

Всё, пока хватит теории, пора перейти к практике. :)

В отличие от других учебников все действия мы будем (пока) делать прямо в админке MaxSite CMS. Делаем новую запись и пишем

Произвольный HTML в MaxSite CMS

Теперь попробуйте разместить произвольный текст внутри html и посмотреть как он отбражается на странице.

Например:

[html]
текст
текст
текст
[/html]

На сайте будет выглядеть в одну строчку:

Текст без HTML

Почему?

Небольшое пояснение насчет использования <br> в текстовом редакторе MaxSite CMS. Вместо этого тэга используйте bb-код [br]. Это связано с особенностью учета переносов строк (Enter).

Попробуйе поиграть с оформлением текста. Расставьте полужирный текст, курсив. Сделайте заголовки.

Заключение

Сейчас не стоит задача выучить все HTML-тэги. Более того, дальше по ходу обучения, мы увидим, что большинство из них могут вообще не пригодиться. Но запомните, что знание самых простых тэгов здорово облегчит вам жизнь при оформлении текстов статей. Ну и, конечно, знание этих основ необходимо для работы с шаблонами - конечной цели нашего обучения. :)

««« Урок 2

Комментариев: 11 RSS

1Демиург20-01-2012 04:03

Начинание прелестное! Но настолько из глубины... Не затянется ли предисловие к обучению работы по созданию шаблонов на месяца? :)

P.S. Кстати, у нескольких верстальщиков интересовался, верстают ли они под MaxSite - пока никто этого не делает, а жаль... Собственно, надеюсь, начинание ситуацию исправит. Заодно и сам постараюсь поучиться :)

3Vladimir Tochilin21-01-2012 11:37

Демиург:

«Не затянется ли предисловие к обучению работы по созданию шаблонов на месяца?»

Продолжительность срока зависит от подготовки. Спросите Максима - сколь надо ему времени, чтобы создать шаблон – он ответит: – 2 часа плюс несколько лет подготовки.

Уровень даже этих уроков – не для совсем уж незнаек. Однако кто хочет стать чайником – наверняка уж прочитал хоть немного про HTML.

Просто, новичкам кажется, что языки программирования – страшные дебри, но как правильно говорит Максим – надо запомнить всего несколько символов – остальные? - надо лишь знать, где найти при надобности.

Можно лишь посоветовать новичкам – когда приходишь на страницу интересного сайта – жми на Ctrl+U – изучай код, по которому браузер рисует страницу, которая перед тобой! Исходный код страницы поможет быстро освоить языки разметки и стили.

Для меня эти уроки будут даже полезны – Мой стаж новичка верстальщика – плотных 4 месяца. HTML, конечно почитал, но потом сразу решил – надо делать – а по дороге нахватаюсь теории.

К счастью – приматы отлично обучаются по принципу – Делай как Я!

4MAX21-01-2012 13:03

Сегодняшняя вёрстка - это шаманство с CSS. Но при этом идет завязка на HTML. Поэтому уроки так и будут строиться - вначале базовые основы - синтаксис, после будем углубляться до специфичных тэгов и css-свойств.

Я считаю, что курс рассчитан прежде всего на тех, что хочет научиться. Совершенно не стремлюсь, чтобы каждая «кухарка» разбиралась в вебстроительстве. Кому интересно, без труда заглянут в стравочник и получат исчерпывающую информацию. Поэтому продолжительность курса будет не такая уж длинная, как это может показаться. Я даю основы и сразу переходим к более сложным вещам и хитростям.

5Vladimir Tochilin22-01-2012 09:16

Может, кому-то покажется легче изучать статью, как это сделал я – открыл «Исходный код страницы», для чего надо кликнуть правой по окну и выбрать в табличке строку «Просмотр кода страницы». Лучше открыть в новом окне, чтобы совместить статью и ее кодовый исходник не только рядом, но и по строкам. Теперь можно сравнивать текст в статье и те же строчки в коде. Пример перед глазами.

Наглядно видно, как браузер из ровного неформатированного текста в коде «печатает» на экране те же буквы и слова красивыми и разной толщины и цвета.

В коде текст статьи находится несколько ниже и начинается с тэга <h1>, за которым идут слова названия <h1>Шаблоны для новичков…

Легко можно понять, что тэги – это команды для браузера:

- Раз название «Шаблоны для новичков. Урок 1. Основы работы с MaxSite CMS. HTML» стоит между тэгами <h1> и </h1>, то браузер должен нарисовать нам название самыми крупными буквами (h1). Буквы, обрамленные <h2> и </h2> будут помельче.

- Если слова «Полужирный текст» заключить между <b> и </b>, то для нас браузер напечатает его жирными буквами.

Одиночные (непарные) тэги, например – тэг переноса строки <br> - завершающей половинки не имеет. После него браузер делает принудительный обрыв текста и перенос на новую строку – ясно, что достаточно одного тэга <br>.

Для блоковых тэгов – интуитивно понятно – внешне всё должен обрамлять блоковый тэг, а внутри строчных может быть много.

- Тэг <p> </p> - самый частый блочный тэг, потому что им обрамляется каждый абзац. Внутри абзаца в предложениях могут быть разные строчные тэги. Отсюда можно понять порядок вложенности парных тегов: строчные внутри блоковых.

Пример – смотрим в коде страницы несколько ниже названия:

<p>В любом случае новый курс рассчитан на полных <s>чайников</s> новичков …</p> - Здесь <p>…</p> обрамляют пару <s> </s> и т.д.

Еще один момент- если посмотреть на начало и конец кода, то там стоит парный тэг <html></html>. Он является основным для html-документов. Таким способом указывается браузеру, что ему следует придерживаться инструкций языка HTML, а никакого другого.

С атрибутами несколько сложнее, но понятно – задать размер букв тэгом <h1> легко, ну а если мы хотим дополнительно сделать их красными? Тогда к тэгу прикрепляется какое-то описание – атрибут цвета - какими мы хотим их видеть. Цвет – это атрибут, а «красные» – его значение. Только это уже из следующего урока.

Если вы поняли принцип работы браузера с тэгами, то запоминать все тэги не требуется.

А вот сравнивать страницу на экране (которая для людей) и код страницы (который для браузера) для будущих верстальщиков полезно. Таким способом можно узнать многое о дизайне чужого сайта.

И еще один совет новичкам – не прореживайте, если текст на экране слишком мелкий – Жмите Cntr и крутите колесико мышки вперед – буквы и увеличатся.

6Руслан26-01-2012 09:59

Замечательные уроки - давно пора! Я тоже считаю себя чайником - и мне они помогают.

Есть некоторые нюансы при написании текста

Если написать в маркетапе так

тексттексттекст

и посмотреть потом код то увидим

текст текст текст

а если написать вот так

текст

текст

текст

без указания что это -html

то получим это

текст

текст

текст

я пользуюсь вторым вариантом , может и не правильно но мне так удобней

1. не надо каждый раз вставлять в конце строки
а нажимаю ЕНТЕР

2. я знаю что каждая строка находится в

и потом я могу прописать стили в add_style.css

я уже шесть месяцев изучаю Maxsite, работать уже приловчился,

большим недостатком считаю отсутствие единой документации ( особенно для начинающих)

информацию приходиться искать на разных сайтах.

Это моя первая CMS и изучать что-то другое не хочется и не буду.

Меня вполне устраивают возможности максайта.

7MAX26-01-2012 10:42

Для изучения HTML с помощью редактора MaxSite CMS, нужно использовать обрамляющие [html] - тогда это будет ровно тот код, который вы и задумали.

8Руслан26-01-2012 17:28

а можно как-то назначить типа "горячей клавиши" ??

нажимаешь ЕНТЕР а вставляется "br"

задалбывает после каждой строчки - взять мышку , найти в меню "br", вставить

и так каждый раз

9samizdam01-03-2012 13:47

Вы в примере строчных элементов приводите устаревшие морально и технически тэги.

11Аноним05-09-2012 23:48

создайте на KOHANA шустрее HMVC лучше MVC CodeIgniter

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.