Как создать собственный шаблон сайта
Приветствую всех посетителей сайта! В выходные разбирала архивы на своем компьютере и обнаружила немало файлов, которые однозначно могут пригодиться начинающим вебмастерам. Например, программа Artisteer, может очень быстро сгенерировать уникальный шаблон для обычного HTML-сайта или популярных CMS - Joomla, WordPress, Drupal.
Любой новичок в мире веб-дизайна, не имеющий специальных навыков, легко освоит Artisteer. Данная программа действительно понятна и проста в использовании, ее интерфйс схож на привычные всем Word и Power Point, похожая схема редактирования и управления файлом. К тому же, программа на русском языке, что значительно облегчает работу тем, кто не силен в английском.
Чтобы создать свой шаблон в Artisteer, не нужно обладать знаниями в области PHP, HTML, CSS, достаточно задать нужные параметры визуально и программа сама сгенерирует весь код. Имеется возможность настройки всех деталей шаблона, от хедера до шрифта, к тому же можно использовать любые свои текстуры, фоны, изображения и объекты.
При оформлении "верхнего колонтитула" (так у них называется блок с шапкой) можно использовать готовые дизайны header из библиотеки Artisteer, добавив к ним различные эффекты (перекрашивание, блики, текстуру, градиент, размытие), а можно использовать собственный хедер, все на ваше усмотрение.
При наличии знаний HTML и CSS, можно существенным образом изменить весь дизайн сайта, при этом оставив неизменным цветовое решение и разметку. То есть взять основу - готовый программный код, сгенерированный Artisteer, и затем внести собственные изменения в любом редакторе.
Согласитесь, у большинства сайтов структура одинакова - хедер, колонки, контент, меню, блоки, футер... Так вот Artisteer позволяет сократить время на разметку сайта, позволяя настроить нужное вам расположение элементов шаблона, их размер, оформление, эффекты в считанные минуты. В результате вы получаете "скелет" шаблона, в виде html-кода с готовыми стилями CSS и пр. После экспорта созданного шаблона останется внести свои финальные правки и получить уникальный шаблон в максимально короткие сроки!
Те, у кого уйма свободного времени и кто привык все делать с чистого листа, далее могут не читать:)) А у кого вечная нехватка временных ресурсов и отсутствие познаний в области веб-дизайна, то Artisteer может вам очень даже пригодиться. К тому же, проблема кроссбраузерности сайтов при использовании проги отпадает, так как программный код, генерируемый Artisteer, полностью совместим с популярными браузерами.
Если вы еще не представляете, как должен выглядеть ваш будущий сайт, то программа подскажет идею, для этого достаточно заглянуть в первую вкладку панели управления, которая так и называется "Идеи". Щелкая по кнопке "Предложить дизайн", вы каждый раз будете видеть новый вариант сайта. Играя с возможностями программы, можно найти подходящий вам результат.
Любой шаблон, созданный Artisteer, легко отредактировать под свои нужды. В панели управления есть все необходимые инструменты, которые позволяют настроить цвет, шрифты, макет, фон, лист, меню, дизайн статьи, блоки, кнопки, верхний (хедер) и нижний (футер) колонтитулы. В моем случае, первый шаблон, который сгенерировала программа, выглядел так:
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Просмотрев доступные варианты, щелкая по "Предложить дизайн", я остановилась вот на этом:
Теперь можно приступать к редактированию, название каждой вкладки говорит само за себя. Что очень удобно - при работе с любой вкладкой достаточно навести курсор на любую кнопку или пункт вкладки и программа сразу покажет текущие изменения в дизайне. На понравившемся варианте просто щелкаем мышкой и продолжаем работать дальше.
Давайте бегло пройдемся по вкладкам программы и оценим ее возможности. С первой вкладкой "Идеи" мы уже ознакомились, идем дальше. Вкладка Цвета и шрифты позволяет выбрать цветовую схему для шаблона из уже имеющихся либо задать свои значения, также здесь настраиваются шрифты, тип, размер, начертание и т.д.
Вкладка Макет отвечает за расположение блоков на странице: размеры хедера и меню, количество колонок, их расположение и размеры относительно друг друга, здесь вы задаете расположение форме подписки, контактным данным, новостям и т.д.
Вкладка Фон настраивает область, окружающую лист макета. В качестве фонового изображения можно использовать свое, заранее подготовленное либо выбрать из библиотеки программы. На фон можно добавить текстуру или блики.
Вкладка Лист отвечает за ширину и оформление основного содержимого шаблона. По умолчанию данная область имеет размер 900 px, но вы вправе изменить его на другое значение. Данная вкладка регулирует отступ сверху, скругление углов, границы и тень, прозрачность и цвет заливки.
Вкладка Верхний колонтитул (Хедер) позволяет украсить шапку сайта разными эффектами. Доступны добавление различных объектов (изображений) из библиотеки либо из своих файлов; добавление бликов, текстуры, градиента, размытия или тонирования. Для объектов доступны окраска, свечение и отражение.
Вкладка Статьи отвечает за настройки основного контента. Здесь задается оформление заголовкам, картинкам, тексту, комментариям т.п.
Возможности данной вкладки позволяют оформить контент страницы на профессиональном уровне.
Вкладки Меню, Кнопки и Нижний колонтитул (Футер) мало чем отличаются друг от друга. Инструменты на этих вкладках предназначены для изменения стилей, расположения и количества элементов на странице макета.
После небольшого редактирования шаблона, в частности я применила тонирование, блики, наложение текстуры, размытие и добавление объекта для хедера, поменяла местами блоки подписки, контактов, новостей и убрала оранжевый цвет, можно приступать к экспорту шаблона.
Кнопка экспорта есть во вкладке "Идеи" в самом конце и над панелью со всеми вкладками. Нажимаем на нее и в появившемся окошке выбираем вариант сохранения: в виде папки либо в виде архива. Если создается шаблон для CMS, то следует выбрать экспорт в виде архива, если обычный HTML-шаблон, то можно экспортировать и в виде папки.
По умолчанию шаблон экспортируется в папку Artisteer Templates, которую можно найти на диске С в папке Документы, но вы можете указать любую папку на своем компьютере для экспорта созданного шаблона.
Если вы за один раз не успели полностью отредактировать шаблон и хотите сохранить его для продолжения редактирования, то в таком случае его нужно сохранить в расширении artx. Для жмем по пиктограмме в виде палитры в левом верхнем углу и во всплывающем списке выбираем строку Сохранить как… В появившемся окне выбираем имя файла, место, куда сохранить и жмем Сохранить.
После этого вы в любой момент можете открыть сохраненный шаблон и продолжить редактирование. Но хочу обратить ваше внимание на следующие нюансы: если вы пользуетесь демо-версией программы, то при экспорте шаблона на всю графику накладываются водяные знаки в виде надписи "trial". Чтобы этого избежать, нужно немного схитрить.
При распаковке архива, который можно скачать в конце статьи, вы обнаружите два exe-файла. Установку программы осуществляем запуском файла Artisteer.2.2.0.17981.exe. На последнем шаге установки убираем галочку "Запустить файл". Далее в папку С:\Program Files\Artisteer 2\bin (папка, где установлена программа), копируем файл artisteer.2.2.0.17981-loader.exe, делаем ярлык на рабочем столе именно для этого файла и программу запускаем только с него. В архиве есть текстовая инструкция по установке.
При этом проблема с водяными знаками исчезает, но в случае сохранения проекта с расширением .artx и при открытии его для дальнейшего редактирования выдается сообщение "Этот проект создан с помощью старой версии и будет изменен". В каком виде он будет открыт и насколько изменен предугадать невозможно, поэтому лучше делать шаблон за один присест и не сохранять его с расширением .artx, а сразу экспортировать.
Архив с программой я выкладываю для ознакомления с возможностями Artisteer, чтобы вы смогли собственноручно попробовать создать собственный шаблон в этой программе. Версия Artisteer 2, конечно, уже старовата, но даже ее возможностей новичкам вполне достаточно для создания собственного шаблона.
Те, кому понравится функционал программы могут приобрести последнюю версию на официальном сайте http://artiateer.com либо скачать в инете бесплатно ломаную версию Artisteer 4.
В заключение скажу, Artisteer реально помогает сократить время на создание шаблона для Joomla, WordPress, Drupal, DotNetNuke, Blogger.com или обычного HTML-проекта и в кратчайшие сроки получить уникальную тему для своего сайта или блога. Считаю, что новичкам, не имеющим знаний в области веб-дизайна, возможности данной программы верстать кроссбраузерный код значительно облегчат создание шаблона.
P.S. Забыла сказать, что для Artisteer можно найти немало бесплатных шаблонов, например, на http://billionthemes.com в левом сайдбаре, где расширенный поиск, ставите галочку напротив artx и получаете несколько сотен довольно приличных шаблонов. Также, читала на форуме, что в 4-ой версии Artisteer есть возможность выбора шаблона из библиотеки программы, это уже интересней!:))
На этом материал завершаю. Надеюсь, Artisteer вам пригодится:))
Всем желаю успеха и до новых встреч! С ув. Светлана (SvetLana_TSV).
Не забудь заглянуть в свою почту и подтвердить подписку!