Как пользоваться шаблоном html

Работа с шаблоном сайта

Содержание

Введение

Есть много способов создать свой вебсайт. Из этих способов самый простой — использовать шаблон сайта, созданный специалистом по созданию шаблонов.

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

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

Автор шаблона Andreas Viklund дает пошаговую инструкцию по применению шаблона.

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

Сегодня в Интернете можно найти (и при желание загрузить) огромное количество шаблонов веб-страниц или шаблонов сайтов.
Все они называются «шаблонами», но являются ли они таковыми? На самом деле их было бы правильнее называть «образцами страниц».

Чем отличается образец страницы от шаблона?

В шаблоне есть неизменные элементы (например — название, верхний и нижний колонтитулы, навигационная панель) и есть редактируемые области, т.е. области, которые могут изменяться в страницах, создаваемых на основании шаблона. Неизменные элементы шаблона наследуются страницами, созданными по шаблону.
При изменении шаблона изменяются все страницы, созданные по шаблону.

Страница-образец также служит для создания других страниц, но при этом страницы создаются путем копирования образца и затем изменяются самым произвольным образом. Изменение страницы-образца никак не отражается на страницах, созданных по этому образцу.

Большинство шаблонов, которые предлагаются в Интернете, как раз и являются такими образцами страниц, а не шаблонами.
Нет смысла спорить со всем белым светом, шаблон — так шаблон. Придется и нам называть эти страницы-образцы шаблонами (но все же не забывая при этом о вышеупомянутом различии).

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

Приступим к работе по созданию сайта. Начнем с Шага 1 — Поиск и загрузка шаблона .

Пример анализа шаблона №4873 «Солидный бизнес»

Чтобы лучше понять как работать с шаблонами сайтов, проанализируем подробно один из несложных шаблонов тематики «Бизнес» под №4873.

Для начала скачайте архив шаблона 4873, и распакуйте его на своем компьютере.

В архив входят 6 html-файлов и папка images с рисунками. Мы будем разбирать файл index.html, скриншот которого представлен слева.

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

Откройте в html-редакторе файл index.html. Что мы видим?

HTML-код:

Пояснение:

Идут обязательные теги html-документа:

• открывающий тег HTML;
• тег головы документа HEAD, содержащий:
  • заголовок страницы;
  • определение кодировки страницы;
  • внутренний лист стилей.

Далее следует тело страницы, описываемое тегом BODY. Чтобы быстрее разобраться где какая таблица находится, будем пользоваться простым, но эффективным способом — изменять толщину границы таблицы с нулевого значения на 10 (вместо: border=»0″ вставляем border=»10″ и на просмотре смотрим где находится данная таблица) + будем назначать бордюру таблицы красный цвет, чтобы было хорошо видно:

Изменения в HTML-коде страницы:

Как выглядит на просмотре:

Пояснение:

Мы видим, что страница сверстана через основную таблицу, которая охватывает страницу полностью. Таблица состоит из пяти строк и двух столбцов. Правый столбец объединяет все пять строк и фактически представляет собой одну ячейку.

Разберем подробнее правую ячейку:

Изменения в HTML-коде страницы:

Как выглядит на просмотре:

Пояснение:

Синим выделен код, описывающий первую строку левого столбца и правый столбец:

• в первой строке левого столбца находится рисунок 1.jpg с размерами 750*73 (собственно ширина этого рисунка и определяет ширину всего левого столбца);
• в теге правой ячейки объединяются все 5 строк при помощи атрибута rowspan=»5″, при этом размеры этой ячейки заполняют все пространство справа и снизу (атрибуты height=»100%» w );
• в правую ячейку вложена таблица, которую мы выделили, состоящая из 5 строк:
  • фон первой строки заполняется рисунком r1.jpg, при этом строка имеет высоту 97 пикселей и заполняет всю ширину;
  • фон второй строки заполняется рисунком r2.jpg, при этом строка имеет высоту 39 пикселей и заполняет всю ширину;
  • фон третьей строки заполняется цветом #9CB775, при этом строка имеет высоту 176 пикселей и заполняет всю ширину;
  • фон четвертой строки заполняется белым цветом, при этом строка заполняет всю ширину и оставшуюся высоту;
  • фон пятой строки заполняется рисунком bak3.jpg, при этом строка имеет высоту 37 пикселей и заполняет всю ширину;

Для повышения удобочитаемости кода внесем соответствующие комментарии:

HTML-код:

Пояснение:

Я закомментировал в коде начала и концы основных элементов + прописал во всех строках правой таблицы поясняющие комментарии и выделил их красным цветом.

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

Изменения в HTML-коде страницы:

Как выглядит на просмотре:

Пояснение:

Синим выделен код, описывающий вторую строку левого столбца.

Как видим, в эту строку вложена таблица, состоящая из одной строки в которой находится 7 ячеек. Первые 6 ячеек одинаковы по размерам и заполнены изображениями m1.jpg..m6.jpg одинакового размера 86*24. Причем эти изображения являются ссылками на другие страницы сайта. По всей видимости, необходимо в графическом редакторе сделать соответствующие надписи на этих изображениях, согласно тематике страниц на которые ведут ссылки. Седьмая ячейка не содержит ссылку, и заполнена рисунком m7.jpg размером 234*24

Третья строка основной таблицы состоит из более сложной «матрешки», содержащей четыре вложенные таблицы.

HTML-код:

Пояснение:

В окне приведен фрагмент кода с комментариями. На рисунке хорошо видно как располагаются таблицы одна в другой:

• третья строка содержит вложенную таблицу (красный цвет), состоящую из двух ячеек: левая ячейка содержит изображение f.jpg; правая ячейка содержит вложенную таблицу (желтый цвет);
• вложенная желтая таблица в свою очередь состоит из двух строк: верхняя строка использует в качестве фона рисунок 2.jpg и содержит кнопку и строку поиска; нижняя строка содержит вложенную таблицу (розовый цвет);
• вложенная розовая таблица состоит из двух ячеек: в левой ячейке находятся четыре ссылки; правая ячейка содержит вложенную таблицу (голубой цвет);
• вложенная голубая таблица является последней вложенной таблицей и состоит всего из одной ячейки. Таблица в качестве фона использует изображение t1.jpg.

Обратите особое внимание на использование блоков div для форматирования различных элементов.

В общем-то ничего сложного, если разбирать все по кусочкам. Основная проблема — не запутаться во всех этих многочисленных вложениях и правильно расставлять закрывающие теги.

Четвертая строка основной таблицы содержит тоже 4 вложенные таблицы, но они не все вложены друг в друга.

HTML-код:

Пояснение:

В окне приведен фрагмент кода с комментариями. На рисунке хорошо видно как располагаются таблицы:

• четвертая строка содержит вложенную таблицу (красный цвет), состоящую из двух ячеек: левая ячейка содержит три вложенные таблицы, расположенные одна под другой;
• сначала идет желтая вложенная таблица, состоящая из одной ячейки, в которой находится надпись «Latest Company News»;
• под желтой таблицей располагаются собственно сами новости;
• под новостями расположена еще одна вложенная таблица (розовый цвет), состоящая из одной ячейки, в которой находится надпись «Company Resources»;
• под розовой таблицей располагается синяя таблица, состоящая из двух ячеек, в которых располагаются 4 изображения pic1.jpg..pic4.jpg с текстом;
• далее идет правая ячейка красной таблицы в качестве фона которой используется изображение bak2.jpg. Ячейка содержит строку ввода e-mail для подписки на рассылку новостей компании.

В самом конце кода находится пятая строка, содержащая авторские права.

Полный html-код рассмотренной страницы со всеми комментариями находится в окне ниже.

HTML-код:

Надо сказать, что подавляющее большинство шаблонов, представленных на этом сайте, сверстаны по принципу вложенных таблиц. Надеюсь, что рассмотренный здесь принцип разборки шаблонов поможет в понимании кода. Использование таблиц здорово помогает и облегчает верстку дизайна страницы. Владея в совершенстве таблицами можно сверстать сколь угодно сложный дизайн. Однако, всегда надо знать меру. Чрезмерное увлечение таблицами во-первых усложняет чтение кода; во-вторых замедляет работу браузера. Так, что как и в любом деле — здесь нужно знать меру.

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

В начало страницы

В начало страницы

Веб-компоненты. Часть 3: html шаблоны и импорты

Вступление

Приветствую коллеги. Данная статья является третьей и последней статьей в серии статей о веб-компонентах.Первые две статьи доступны по ссылкам:

В данной статье речь пойдет о элементе а также об HTML импортах.

HTML Templates элемент

Элемент представляет собой инструмент, позволяющий хранить контент на стороне клиента без его рендеринга на страницу, однако с возможностью его отображения в процессе исполнения посредством JavaScript.

Содержимое элемента при парсинге страницы обрабатывается исключительно в части валидации содержимого, но без его рендеринга (согласно спецификации, при рендеринге этот элемент ничего не представляет). Содержимое элемента можно клонировать и вставлять в документ из скриптов, что и используется как самостоятельно для шаблонизации так и при создании веб-компонентов.

Содержимое

К содержимому , как и к любому узлу, не имеющему браузерного контекста, не применимы никакие требования соответствия, кроме требований к правильности HTML и XML синтаксиса. Это означает, что в содержимом шаблона можно, например, указать элемент img не указав значение атрибутов src и alt, таким образом:

однако, вне элемента такой синтаксис валидным не является. При этом пропуск закрывающего тега

Все элементы указанные внутри тега в html коде не являются его дочерними элементами.

Бразуеры при создании элемента создают DocumentFragment чьим документом является т.н. approptiate template contents owner document, определяемый по этому алгоритму, документа в котором указан и указывает значением свойства .content созданный DocumentFragment.

То есть свойство .content у элемента template содержит DocumentFragment, и элементы, которые в html коде были указаны внутри тегов являются дочерними элементами именно этого DocumentFragment.

При этом элементу , как и любому другому, можно добавить дочерние элементы (appendChild()), но это будет считаться нарушение модели содержимого шаблона.

Клонирование шаблона

При клонирования содержимого шаблона важно помнить, что первый аргумент в .cloneNode([deep])
или второй в .importNode(externalNode, deep) передавать обязательно надо (согласно спецификации, если аргумент не будет передан, дальнейшее выполнение происходить не должно).

Кстати, да, не смотря на то что большинство примеров используют именно .cloneNode(), использование .importNode() тоже возможно. Разница только в том, когда документ обновится (для .cloneNode() — после вызова appendChild(); для .importNode() — после клонирования).

Show me the code ©

Использование шаблонов действительно очень простое. Я продолжу пример компоненты таб, с кодом которых я работала в примерах предыдущих статей.

Начинать я буду с того, что создам в html разметке два элемента и перенесу в них ту разметку, что была в методе .render() классов TabNavigationItem и TabContentItem (я также изменила некоторые стили но на функциональность это не влияет):

В конструкторе каждого класса я сохраню свойство template. Для TabNavigationItem это будет:

a для TabContentItem:

В метод render() каждому из этих классов я добавлю следующий код, предварительно удалив запись .innerHTML:

Получившийся код можно посмотреть тут

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

HTML импорты

Импорты представляют собой HTML документы которые подключены в качестве внешних ресурсов другим HTML документом. Система взаимоотношений между документами хорошо описана в черновике спецификации и не является предметом данной статьи.

Общая схема видна на изображении:

.

Для того чтобы реализовать импорты был добавлен новый тип в HTML link types (значения атрибута rel).

Слово import, указанное в значение атрибута rel элемента
собственно и создает ссылку к импортируемому ресурсу (дефолтным типом ресурса является text/html).

У элемента
может присутствовать атрибут async.

Расширения, предлагаемые черновиком спецификации предлагаются в АПИ HTMLLinkElement: добавляется свойство import, доступное только для чтения и содержащее импортируемый документ.

Свойство может содержать значение null в двух случаях: когда