Как отредактировать шаблон сайта?

При создании сайтов часто используются уже готовые шаблоны, найденные в сети. Они порой скачиваются пользователями тысячи раз, созданные на их основе ресурсы очень похожи по внешнему оформлению. Чтобы сайт имел индивидуальный дизайн, его шаблон следует отредактировать.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - шаблон сайта;
• - программа Dreamweaver.

Инструкция

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

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

Удобнее всего рассматривать процесс редактирования на конкретном примере. Скачайте любой из html-шаблонов – например, этот: http://web-silver.ru/templates/sites/086/086.zip. Распакуйте его, потом откройте html-файл в программе Dreamweaver. Обратите внимание на переключатель режимов в левом верхнем углу – «Код», «Раздельно», «Дизайн». Переключаясь между режимами, вы сможете редактировать шаблон наиболее удобным для вас образом.

Переключитесь на вид «Дизайн», затем кликните мышкой любой из элементов – например, шапку страницы, в приведенном примере шаблона на ней представлен текст The river. Обратите внимание на то, что в нижней части окна программы появились свойства этого элемента страницы. В частности, указана ширина, высота, используемая картинка. Вы можете поменять размеры шапки, указав их в соответствующих полях или просто перетащив мышкой на самой шапке маркеры границ. Поменяйте изображение, для этого подберите нужную вам картинку такого же размера и вставьте вместо исходной.

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

Совет добавлен 18 мая 2011 Совет 2: Как редактировать шаблоны сайтов Сделать свой сайт в наше время несложно, даже если вы не имеете никаких специфических знаний в области веб-дизайна и программирования. В любой момент вы можете воспользоваться массой различных шаблонов, размещенных в интернете, и на основе готовых шаблонов изготовить и опубликовать в сети свой сайт. Однако далеко не всех устраивает в полной мере тот вариант сайта, который предлагает шаблон. О том, как изменить шаблон сайта и придать ему уникальности мы расскажем в этой статье.

Инструкция

Скачайте шаблон и найдите в нем файл style.css. Обычно этот файл располагается в папке public_html.

Откройте файл style.css в блокноте и найдите фрагмент кода, отвечающий за внешний вид верхней части сайта. Этот фрагмент выглядит следующим образом:#logotype {

background:url (images/logotype.png) no-repeat left center #fff;

width:230px;

height:60px;

margin:10px 25px;

position:relative;

В данном коде в строке background:url вам нужно указать путь к фоновому изображению будущего сайта. Следующие строки обозначают длину и высоту изображения, а пункт margin определяет отступ изображения по вертикали и горизонтали.

Найдите в папках шаблона файл logotype.png, используемый в коде в качестве логотипа, и замените его в той же папке на собственный логотип с таким же названием в формате png.

Фоновое изображение загрузите в папку public_html/tmpl/имя_шаблона/Images/, после чего, как уже говорилось выше, пропишите в строке background:url путь к изображению.

При необходимости перепишите параметры высоты, длины и отступа изображения. Строку position:relative можно не трогать. Сохраните изменения в файле и загрузите его на сервер вместо прежнего файла шаблона.

Если вы хотите сменить нижний логотип сайта, найдите в style.css фрагмент кода, который начинается со слов logotype-footer. Сохраните рисунок с новым логотипом и загрузите его в папку шаблона Images.

Измените параметры длины и высоты. Снова сохраните файл style.css и загрузите обновленный сайт на сервер.

Как редактировать шаблоны сайтов - версия для печати

Оцените статью!