Адаптация html- шаблонаРассмотрим, как самостоятельно можно внедрить html- вёрстку на сайт под управлением CMS Net. Cat. Вам подойдёт любой чистый html- шаблон, который вы можете найти! разумеется, в том случае, если вы используете шаблон, уже адаптированный для других CMS, вам придётся сначала очистить его от специальных функций, переменных и т. д.)Таким образом всё, что вам нужно сделать - заказать у дизайнера макет, у верстальщика - шаблон и далее заняться внедрением шаблона на сайт. Также вы можете воспользоваться уже готовым html- шаблоном.
Р’ этом случае, РїСЂРё РїРѕРёСЃРєРµ, именно такой запрос вам нужно писать РІ РїРѕРёСЃРєРѕРІРѕР№ системе ("html- шаблоны", "html- templates" Рё С‚. Рґ.). Ртим СЃРїРѕСЃРѕР±РѕРј воспользуемся Рё РјС‹. Для написания данного СѓСЂРѕРєР° Рё продолжения построение нашего сайта РЅР° CMS Net. Cat, нами был выбран бесплатный html- шаблон РїРѕРґ названием "Shop Around". Наш шаблон выглядит следующим образом: Р РёСЃ. Внедряемый html- шаблонДанный шаблон легко может быть использован для небольшого интернет- магазина. Сейчас давайте ненадолго перейдём РІ административный раздел Net.
Cat Рё посмотрим, РіРґРµ должен находиться шаблон нашего сайта. РќР° сайте РїРѕРґ управлением Net. Cat РІС‹ можете использовать любое количество макетов (шаблонов). РњС‹ будем использовать только РѕРґРёРЅ шаблон. Ртак, управление макетами находится РІ разделе "Разработка: Макеты дизайна": Р РёСЃ. Раздел СЃ существующими макетамиКак РІС‹ видите, Сѓ нас уже существует "Стандартный макет", РЅРѕ РјС‹ создадим новый. Для создания РЅРѕРІРѕРіРѕ макета необходимо нажать РЅР° пиктограмму СЃ зелёным крестиком: Сѓ соответствующего раздела- родителя.
Я хочу представить вашему вниманию несколько десятков ресурсов с различными CSS шаблонами и заготовками для создания web-сайта. Самым приятным является то, что все шаблоны бесплатны и смогут вас порадовать своим качеством и идеей.
Весь каталог бесплатных HTML шаблонов и CSS шаблонов сайтов на сайте html-templates.info. HTML и CSS шаблоны для создания сайтов спортивной тематики и спортивных порталов.. Профессиональные и современным HTML шаблоны. На сайте вы найдете сотни бесплатных шаблонов сайтов. Откройте для себя мир современных HTML 5 шаблонов для сайтов!
Учебник CSS. Сайтостроение / Шаблоны сайтов. Бесплатные шаблоны сайтов каталога и скачать бесплатно подходящий шаблон сайта c HTML, CSS, PSD и Flash. Иными словами, вы можете рассчитывать на адекватное отображение HTML5 шаблонов даже на старших версия IE. И все это абсолютно бесплатно!
Заметим, что у макетов, как и у разделов, так же существует иерархия и вложенность. Мы же в данном случае выбираем самый верхний пункт "Макеты дизайна": Рис.
Родительский пунктПри нажатии на кнопку добавления откроется стандартное окно добавления нового макета, оно же управление макетом. Рис. 5 - Окно для управления макетомСтруктурированно наш макет должен делиться на: Хедер (шапка). Верхняя часть сайтас логотипом, навигацией и т. п. Контентная часть. Всё содержимое нашего сайтаФутер (подвал). Нижняя часть сайта со счётчиками, копирайтами и т. д. Теперь давайте посмотрим на то, какие поля присутствуют в макете дизайна: Название макета.
Название используется только для разработчика и визуально на самом сайе никак не отображается. Шаблоны вывода навигации. Данное поле содержит массивы, используемые при построении меню, путь по сайту ("хлебные крошки") и т. п. Поле так же позволяет добавлять некоторый php или js скрипт, который может участвовать в составлении макета. Верхняя часть страницы (Header).
Собственно, название говорит само за себя. В данное поле помещается всё то, что должно отображаться в хедере вашего сайта. Нижняя часть страницы (Footer). В данное поле помещается всё то, что будет отображаться в подвале вашего сайта. Настройки отображения макета дизайна в разделе. Данные настройки содержат массивы задаваемых разработчиком переменных/полей, которые задаются один раз, и далее в них просто прописываются необходимые значения.
Пример того, как выглядят подобные настройки мы рассматривали при настройке компонента "Обратная связь" в визуальных настройках. Дополнительные поля. По- умолчанию добавлено только одно поле "Таблица стилей", но вы можете добавить свои поля по необходимости, перейдя в раздел "Разработка: Системные таблицы: Макеты дизайна".
РЎРІРѕРё поля РІС‹ сможете использовать РІ макете дизайна. Рспользование существующего поля (CSS) РІ качестве хранения стилей возможно, РЅРѕ РЅРµ желательно. Дело РІ том, что значения, которые Р±СѓРґСѓС‚ СЃСЋРґР° записаны, попадут РїСЂСЏРјРёРєРѕРј РІ исходный РєРѕРґ шаблона, что увеличит размер страницы. Р’СЃС‘ же рекомендуется выносить РІСЃРµ CSS стили РІ отдельный файл.
Вернёмся к нашему html- шаблону и визуально разделим его на наши составляющие. Пусть вас не смущает то, что наш учебный макет на английском языке, потому что в процессе внедрения все необходимые места будут нами переведены. Рис. 6 - Шаблон с разделёнными осставляющимиДля удобства, нами были выделены цветом 4 зоны для внедрения в макет. Давайте рассмотрим их начиная с верхнего: Зелёным цветом выделено то, что пойдёт в хедер. Сюда будут включены: логотип, главное меню, корзина товаров, форма поиска и список категорий. Сразу поясню, почему блоки из боковой панели так же идут в хедер.
Дело в том, что нам нужно найти такую область, которая будет повторяться на всех или на большинстве страниц. В данном случае, все элементы боковой панели как раз- таки будут выводиться на всех страницах нашего сайта.
Красным цветом обозначена панель с товарами. В нашем случае, это будет список последних товаров.
Данную панель считаю нужным выводить только на главной странице. Жёлтым цветом обозначен футер нашего сайта, а именно вся нижняя часть. Невыделенная часть в центре является контентной областью и будет изменяться в зависимость от нашего содержимого.
Теперь переходим Рє файлам нашего шаблона Рё начинаем подготовку Рє его внедрению. Р’ папке СЃ шаблоном Р±СѓРґСѓС‚ находиться РІСЃРµ необходимые нам файлы. Р РёСЃ. 7 - Файлы шаблонаПапка СЃ изображениями скачанного нами шаблона находится внутри папки стилей. Рсправляю эту неточность Рё переношу её РІ корень шаблона.
Теперь наша папка с файлами выглядит как и нужно: Рис. Файлы шаблонаНам будет необходимо отредактировать два файла: index.
и style. css. Открывайте их в текстовом редакторе. Все пути в файлах советуем сделать относительными.
Рис. 9 - Замена путей к файламТочно так же меняем пути к картинкам, js скриптам и т.